add video player, loading

ffplayout/frontend/components/VideoPlayer.vue

@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <div v-if="options.sources">
+            <video
+                :id="reference"
+                class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
+                width="1024"
+                height="576"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+/* eslint-disable camelcase */
+import videojs from 'video.js'
+require('video.js/dist/video-js.css')
+
+export default {
+    name: 'VideoPlayer',
+    props: {
+        options: {
+            type: Object,
+            default () {
+                return {}
+            }
+        },
+        reference: {
+            type: String,
+            default () {
+                return ''
+            }
+        }
+    },
+    data () {
+        return {
+            player: null
+        }
+    },
+
+    mounted () {
+        this.player = videojs(this.reference, this.options, function onPlayerReady () {
+            // console.log('onPlayerReady', this);
+        })
+    },
+
+    beforeDestroy () {
+        if (this.player) {
+            this.player.dispose()
+        }
+    },
+
+    methods: {
+    }
+}
+</script>

ffplayout/frontend/nuxt.config.js

@@ -44,8 +44,10 @@ export default {
      */
     plugins: [
         { src: '~/plugins/filters' },
+        { src: '~plugins/video.js', ssr: false },
         { src: '~plugins/scrollbar.js', ssr: false },
-        { src: '~plugins/splitpanes.js', ssr: false }
+        { src: '~plugins/splitpanes.js', ssr: false },
+        { src: '~plugins/loading.js', ssr: false }
     ],
     /*
      ** Nuxt.js dev-modules

ffplayout/frontend/package-lock.json

@@ -12486,6 +12486,11 @@
         }
       }
     },
+    "vue-loading-overlay": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.3.2.tgz",
+      "integrity": "sha512-5nBsaeb3quOBVXCgbSu9VNWkBVEsbDCupahv8dqkgbtJ00uKoNOPyw38+reWGHKNDBDl+x7x8wT8u3dV7ali7g=="
+    },
     "vue-meta": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.3.3.tgz",

ffplayout/frontend/package.json

@@ -21,6 +21,7 @@
     "nuxt-dayjs-module": "^1.1.2",
     "splitpanes": "^2.2.1",
     "video.js": "^7.7.5",
+    "vue-loading-overlay": "^3.3.2",
     "vue2-perfect-scrollbar": "^1.5.0",
     "vuedraggable": "^2.23.2"
   },

ffplayout/frontend/plugins/loading.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Loading from 'vue-loading-overlay'
+import 'vue-loading-overlay/dist/vue-loading.css'
+
+Vue.use(Loading)
+Vue.component('loading', Loading)

ffplayout/frontend/plugins/video.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VideoPlayer from '@/components/VideoPlayer.vue'
+
+Vue.component('video-player', VideoPlayer)