@enso-ui/how-to 4.0.10 → 4.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/how-to",
-  "version": "4.0.10",
+  "version": "4.0.14",
   "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"
@@ -201,7 +201,7 @@ export default {
 
     components: { Fa, Fade, HowToVideo, Uploader, },
 
-    inject: ['canAccess', 'errorHandler', 'i18n', 'route', 'toastr'],
+    inject: ['canAccess', 'errorHandler', 'http', 'i18n', 'route', 'toastr'],
 
     data: () => ({
         videos: [],
@@ -265,12 +265,12 @@ export default {
 
     methods: {
         getVideos() {
-            axios.get(this.route('howTo.videos.index'))
+            this.http.get(this.route('howTo.videos.index'))
                 .then(({ data }) => (this.videos = data))
                 .catch(this.errorHandler);
         },
         getTags() {
-            axios.get(this.route('howTo.tags.index'))
+            this.http.get(this.route('howTo.tags.index'))
                 .then(({ data }) => (this.tags = data))
                 .catch(this.errorHandler);
         },
@@ -305,26 +305,26 @@ export default {
                 return;
             }
 
-            axios.post(this.route('howTo.tags.store'), { name: this.query })
+            this.http.post(this.route('howTo.tags.store'), { name: this.query })
                 .then(({ data }) => {
                     this.tags.push(data);
                     this.query = '';
                 }).catch(this.errorHandler);
         },
         updateTag() {
-            axios.patch(this.route('howTo.tags.update', this.selectedTag.id), {
+            this.http.patch(this.route('howTo.tags.update', this.selectedTag.id), {
                 name: this.selectedTag.name,
             }).catch(this.errorHandler);
         },
         deleteTag(tagId) {
-            axios.delete(this.route('howTo.tags.destroy', tagId))
+            this.http.delete(this.route('howTo.tags.destroy', tagId))
                 .then(() => {
                     const index = this.tags.findIndex(({ id }) => id === tagId);
                     this.tags.splice(index, 1);
                 }).catch(this.errorHandler);
         },
         update() {
-            axios.patch(this.route('howTo.videos.update', this.video.id), this.video)
+            this.http.patch(this.route('howTo.videos.update', this.video.id), this.video)
                 .then(({ data }) => {
                     this.toastr.success(data.message);
                     this.reset();

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>
@@ -90,13 +88,13 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 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,
@@ -123,10 +121,10 @@ export default {
         CardContent,
         Fa,
         Uploader,
-        videoPlayer,
+        VideoPlayer,
     },
 
-    inject: ['canAccess', 'errorHandler', 'i18n', 'route', 'toastr'],
+    inject: ['canAccess', 'errorHandler', 'http', 'i18n', 'route', 'toastr'],
 
     props: {
         video: {
@@ -139,6 +137,8 @@ export default {
         },
     },
 
+    emits: ['delete',  'edit', 'start-tagging', 'stop-tagging'],
+
     data: () => ({
         tagging: false,
     }),
@@ -166,14 +166,14 @@ export default {
             };
         },
         destroyPoster() {
-            axios.delete(this.route('howTo.posters.destroy', this.video.poster.id))
+            this.http.delete(this.route('howTo.posters.destroy', this.video.poster.id))
                 .then(({ data }) => {
                     this.toastr.success(data.message);
                     this.video.poster = null;
                 }).catch(this.errorHandler);
         },
         destroyVideo() {
-            axios.delete(this.route('howTo.videos.destroy', this.video.id))
+            this.http.delete(this.route('howTo.videos.destroy', this.video.id))
                 .then(({ data }) => {
                     this.toastr.success(data.message);
                     this.$emit('delete');

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>