@enso-ui/how-to 4.0.12 → 4.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/how-to",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "description": "Basic how-to package",
   "main": "src/bulma/pages/howTo/Index.vue",
   "scripts": {
@@ -32,8 +32,7 @@
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "v-tooltip": "4.0.0-beta.2",
     "video.js": "^7.0",
-    "vue": "^3.0",
-    "vue-video-player": "^5.0"
+    "vue": "^3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "5.0.0-beta.6",

package/src/bulma/pages/howTo/Index.vue

@@ -72,7 +72,7 @@
             <div class="columns is-multiline">
                 <div class="column is-half"
                     v-for="(vid, index) in filteredVideos"
-                    :key="index">
+                    :key="vid.id">
                 <how-to-video class="is-rounded raises-on-hover"
                     :video="vid"
                     :tags="tags"

package/src/bulma/pages/howTo/components/HowToVideo.vue

@@ -40,16 +40,14 @@
                     </span>
                 </card-control>
                 <card-control v-if="canAccess('howTo.posters.destroy') && video.poster">
-                    <confirmation @confirm="destroyPoster"
-                        v-tooltip="i18n('Remove poster')">
+                    <confirmation @confirm="destroyPoster">
                         <span class="icon is-small">
                             <fa :icon="['far', 'trash-alt']"/>
                         </span>
                     </confirmation>
                 </card-control>
                 <card-control v-else-if="canAccess('howTo.videos.destroy')">
-                    <confirmation @confirm="destroyVideo"
-                        v-tooltip="i18n('Delete video')">
+                    <confirmation @confirm="destroyVideo">
                         <span class="icon is-small">
                             <fa :icon="['far', 'trash-alt']"/>
                         </span>
@@ -96,8 +94,7 @@ import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faInfo, faTags, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faEdit, faImage } from '@fortawesome/free-regular-svg-icons';
-import { videoPlayer } from 'vue-video-player';
-import 'vue-video-player/src/custom-theme.css';
+import VideoPlayer from './VideoPlayer.vue';
 import {
     Card, CardHeader, CardCollapse, CardControl, CardContent,
     CardFooter, CardFooterItem,
@@ -124,7 +121,7 @@ export default {
         CardContent,
         Fa,
         Uploader,
-        videoPlayer,
+        VideoPlayer,
     },
 
     inject: ['canAccess', 'errorHandler', 'i18n', 'route', 'toastr'],

package/src/bulma/pages/howTo/components/VideoPlayer.vue

@@ -0,0 +1,216 @@
+<template>
+    <div class="video-player" v-if="reseted">
+        <video class="video-js" ref="video">
+            <track v-for="crtTrack in trackList"
+               :kind="crtTrack.kind"
+               :label="crtTrack.label"
+               :src="crtTrack.src"
+               :srcLang="crtTrack.srcLang"
+               :default="crtTrack.default"/>
+        </video>
+    </div>
+</template>
+
+<script>
+  // lib
+  import _videojs from 'video.js';
+  const videojs = window.videojs || _videojs;
+
+  // as of videojs 6.6.0
+  const DEFAULT_EVENTS = [
+      'loadeddata',
+      'canplay',
+      'canplaythrough',
+      'play',
+      'pause',
+      'waiting',
+      'playing',
+      'ended',
+      'error'
+  ]
+
+  // export
+  export default {
+      name: 'VideoPlayer',
+      props: {
+          start: {
+              type: Number,
+              default: 0,
+          },
+          crossOrigin: {
+              type: String,
+              default: '',
+          },
+          playsinline: {
+              type: Boolean,
+              default: false,
+          },
+          customEventName: {
+              type: String,
+              default: 'statechanged',
+          },
+          options: {
+              type: Object,
+              required: true,
+          },
+          events: {
+              type: Array,
+              default: () => [],
+          },
+          globalOptions: {
+              type: Object,
+              default: () => ({
+                  // autoplay: false,
+                  controls: true,
+                  // preload: 'auto',
+                  // fluid: false,
+                  // muted: false,
+                  controlBar: {
+                      remainingTimeDisplay: false,
+                      playToggle: {},
+                      progressControl: {},
+                      fullscreenToggle: {},
+                      volumeMenuButton: {
+                          inline: false,
+                          vertical: true,
+                      }
+                  },
+                  techOrder: ['html5'],
+                  plugins: {},
+              })
+          },
+          globalEvents: {
+              type: Array,
+              default: () => [],
+          },
+          trackList: {
+              type: Array,
+              default: () => [],
+          }
+      },
+      data() {
+          return {
+              player: null,
+              reseted: true,
+          }
+      },
+      mounted() {
+          if (!this.player) {
+              this.initialize();
+          }
+      },
+      beforeUnmount() {
+          if (this.player) {
+              this.dispose();
+          }
+      },
+      methods: {
+          initialize() {
+
+              // videojs options
+              const videoOptions = Object.assign({}, this.globalOptions, this.options)
+
+              // ios fullscreen
+              if (this.playsinline) {
+                  this.$refs.video.setAttribute('playsinline', this.playsinline)
+                  this.$refs.video.setAttribute('webkit-playsinline', this.playsinline)
+                  this.$refs.video.setAttribute('x5-playsinline', this.playsinline)
+                  this.$refs.video.setAttribute('x5-video-player-type', 'h5')
+                  this.$refs.video.setAttribute('x5-video-player-fullscreen', false)
+              }
+
+              // cross origin
+              if (this.crossOrigin !== '') {
+                  this.$refs.video.crossOrigin = this.crossOrigin
+                  this.$refs.video.setAttribute('crossOrigin', this.crossOrigin)
+              }
+
+              // emit event
+              const emitPlayerState = (event, value) => {
+                  if (event) {
+                      this.$emit(event, this.player)
+                  }
+                  if (value) {
+                      this.$emit(this.customEventName, { [event]: value })
+                  }
+              }
+
+              // avoid error "VIDEOJS: ERROR: Unable to find plugin: __ob__"
+              if (videoOptions.plugins) {
+                  delete videoOptions.plugins.__ob__
+              }
+
+              // videoOptions
+              // console.log('videoOptions', videoOptions)
+
+              // player
+              const self = this
+              this.player = videojs(this.$refs.video, videoOptions, function() {
+
+                  // events
+                  const events = DEFAULT_EVENTS.concat(self.events).concat(self.globalEvents)
+
+                  // watch events
+                  const onEdEvents = {}
+                  for (let i = 0; i < events.length; i++) {
+                      if (typeof events[i] === 'string' && onEdEvents[events[i]] === undefined) {
+                          (event => {
+                              onEdEvents[event] = null
+                              this.on(event, () => {
+                                  emitPlayerState(event, true)
+                              })
+                          })(events[i])
+                      }
+                  }
+
+                  // watch timeupdate
+                  this.on('timeupdate', function() {
+                      emitPlayerState('timeupdate', this.currentTime())
+                  })
+
+                  // player readied
+                  self.$emit('ready', this)
+              })
+          },
+          dispose(callback) {
+              if (this.player && this.player.dispose) {
+                  if (this.player.techName_ !== 'Flash') {
+                      this.player.pause && this.player.pause();
+                  }
+                  this.player.dispose();
+                  this.player = null;
+                  this.$nextTick(() => {
+                      this.reseted = false;
+                      this.$nextTick(() => {
+                          this.reseted = true;
+                          this.$nextTick(() => {
+                              callback && callback();
+                          });
+                      });
+                  });
+              }
+          },
+      },
+      watch: {
+          options: {
+              deep: true,
+              handler(options, oldOptions) {
+                  this.dispose(() => {
+                      if (options && options.sources && options.sources.length) {
+                          this.initialize();
+                      }
+                  });
+              },
+          },
+      },
+  };
+</script>
+
+<style>
+.vjs-custom-skin > .video-js .vjs-big-play-button {
+    top: 50%;
+    left: 50%;
+    margin-left: -1.5em;
+    margin-top: -1em
+}
+</style>