add player

ffplayout/frontend/pages/control.vue

@@ -5,7 +5,7 @@
             <b-row>
                 <b-col cols="3">
                     <b-aspect class="player-col" aspect="16:9">
-                        Player
+                        <video-player v-if="videoOptions.sources" reference="videoPlayer" :options="videoOptions" />
                     </b-aspect>
                 </b-col>
                 <b-col cols="9" class="control-col">
@@ -19,6 +19,14 @@
             </b-row>
             <splitpanes class="default-theme pane-row">
                 <pane min-size="20" size="24">
+                    <loading
+                        :active.sync="isLoading"
+                        :can-cancel="false"
+                        :is-full-page="false"
+                        background-color="#485159"
+                        color="#ff9c36"
+                    />
+
                     <div v-if="folderTree.tree" class="browser-div">
                         <div>
                             <b-breadcrumb>
@@ -26,7 +34,7 @@
                                     v-for="(crumb, index) in crumbs"
                                     :key="crumb.key"
                                     :active="index === crumbs.length - 1"
-                                    @click="getPath(crumb.path)"
+                                    @click="getPath(extensions, crumb.path)"
                                 >
                                     {{ crumb.text }}
                                 </b-breadcrumb-item>
@@ -41,7 +49,7 @@
                                     :key="folder.key"
                                     class="browser-item"
                                 >
-                                    <b-link @click="getPath(`${folderTree.tree[0]}/${folder}`)">
+                                    <b-link @click="getPath(extensions, `${folderTree.tree[0]}/${folder}`)">
                                         <b-icon-folder-fill class="browser-icons" /> {{ folder }}
                                     </b-link>
                                 </b-list-group-item>
@@ -51,8 +59,17 @@
                                     class="browser-item"
                                 >
                                     <b-link>
-                                        <b-icon-film class="browser-icons" /> {{ file.file }}
+                                        <b-row>
-                                        <span class="duration">{{ file.duration | toMin }}</span>
+                                            <b-col cols="1" class="browser-icons-col">
+                                                <b-icon-film class="browser-icons" />
+                                            </b-col>
+                                            <b-col class="browser-item-text">
+                                                {{ file.file }}
+                                            </b-col>
+                                            <b-col cols="1" class="browser-dur-col">
+                                                <span class="duration">{{ file.duration | toMin }}</span>
+                                            </b-col>
+                                        </b-row>
                                     </b-link>
                                 </b-list-group-item>
                             </b-list-group>
@@ -99,7 +116,9 @@
                                             {{ item.source | filename }}
                                         </b-col>
                                         <b-col cols="1" class="text-center">
-                                            <b-icon-play-fill />
+                                            <b-link @click="showModal(item.source)">
+                                                <b-icon-play-fill />
+                                            </b-link>
                                         </b-col>
                                         <b-col cols="1" text>
                                             {{ item.duration | secondsToTime }}
@@ -121,6 +140,16 @@
                 </pane>
             </splitpanes>
         </b-container>
+        <b-modal
+            id="preview-modal"
+            ref="prev-modal"
+            size="xl"
+            centered
+            title="Preview"
+            hide-footer
+        >
+            <video-player v-if="previewOptions" reference="previewPlayer" :options="previewOptions" />
+        </b-modal>
     </div>
 </template>
 
@@ -147,12 +176,18 @@ export default {
 
     data () {
         return {
-            today: this.$dayjs().format('YYYY-MM-DD')
+            isLoading: false,
+            today: this.$dayjs().format('YYYY-MM-DD'),
+            extensions: '',
+            videoOptions: {},
+            previewOptions: {},
+            previewComp: null,
+            previewSource: ''
         }
     },
 
     computed: {
-        ...mapState('config', ['configPlayout']),
+        ...mapState('config', ['configGui', 'configPlayout']),
         ...mapState('media', ['crumbs', 'folderTree']),
         ...mapState('playlist', ['playlist'])
     },
@@ -164,22 +199,59 @@ export default {
     },
 
     async created () {
-        await this.getPath('')
         await this.getConfig()
         await this.getPlaylist()
+
+        this.extensions = this.configPlayout.storage.extensions.join(' ')
+
+        await this.getPath(this.extensions, '')
+
+        this.videoOptions = {
+            liveui: true,
+            controls: true,
+            suppressNotSupportedError: true,
+            autoplay: false,
+            preload: 'auto',
+            sources: [
+                {
+                    type: 'application/x-mpegURL',
+                    src: this.configGui.player_url
+                }
+            ]
+        }
     },
 
     methods: {
         async getConfig () {
+            await this.$store.dispatch('auth/inspectToken')
+            await this.$store.dispatch('config/getGuiConfig')
             await this.$store.dispatch('config/getPlayoutConfig')
         },
-        async getPath (path) {
+        async getPath (extensions, path) {
+            this.isLoading = true
             await this.$store.dispatch('auth/inspectToken')
-            await this.$store.dispatch('media/getTree', path)
+            await this.$store.dispatch('media/getTree', { extensions, path })
+            this.isLoading = false
         },
         async getPlaylist () {
             await this.$store.dispatch('auth/inspectToken')
             await this.$store.dispatch('playlist/getPlaylist', { dayStart: this.configPlayout.playlist.day_start, date: this.today })
+        },
+        showModal (src) {
+            this.previewOptions = {
+                liveui: false,
+                controls: true,
+                suppressNotSupportedError: true,
+                autoplay: false,
+                preload: 'auto',
+                sources: [
+                    {
+                        type: 'video/mp4',
+                        src: encodeURIComponent(src)
+                    }
+                ]
+            }
+            this.$root.$emit('bv::show::modal', 'preview-modal')
         }
     }
 }
@@ -213,6 +285,14 @@ export default {
     width: 100%;
 }
 
+.browser-icons-col {
+    max-width: 10px;
+}
+
+.browser-dur-col {
+    min-width: 110px;
+}
+
 .browser-div .ps, .playlist-container .ps {
     height: 600px;
 }
@@ -222,6 +302,18 @@ export default {
     overflow-y: scroll;
 }
 
+.browser-item-text {
+    display: inline-block;
+    max-width: 95%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.ps__thumb-x {
+    display: none;
+}
+
 .splitpanes__pane {
     width: 30%;
 }