@enso-ui/how-to 4.0.12 → 4.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/how-to",
-  "version": "4.0.12",
+  "version": "4.0.16",
   "description": "Basic how-to package",
   "main": "src/bulma/pages/howTo/Index.vue",
   "scripts": {
@@ -28,12 +28,11 @@
     "@enso-ui/transitions": "^2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
     "@fortawesome/free-regular-svg-icons": "^5.2.0",
-    "@fortawesome/free-solid-svg-icons": "^5.2.0",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
-    "v-tooltip": "4.0.0-beta.2",
+    "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"
@@ -199,9 +199,11 @@ export default {
 
     directives: { focus },
 
-    components: { Fa, Fade, HowToVideo, Uploader, },
+    components: {
+        Fa, Fade, HowToVideo, Uploader,
+    },
 
-    inject: ['canAccess', 'errorHandler', 'i18n', 'route', 'toastr'],
+    inject: ['canAccess', 'errorHandler', 'http', 'i18n', 'route', 'toastr'],
 
     data: () => ({
         videos: [],
@@ -236,7 +238,7 @@ export default {
                 ? this.videos
                 : this.videos.filter(({ tagList }) => tagList
                     .filter(
-                        (tagId) => this.selectedTags.findIndex(({ id }) => tagId === id) !== -1,
+                        tagId => this.selectedTags.findIndex(({ id }) => tagId === id) !== -1,
                     ).length === this.selectedTags.length);
         },
         filteredTags() {
@@ -265,12 +267,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);
         },
@@ -295,7 +297,7 @@ export default {
             this.deselectTags();
         },
         deselectTags() {
-            this.tags.map((tag) => {
+            this.tags.map(tag => {
                 tag.selected = false;
                 return tag;
             });
@@ -305,26 +307,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

@@ -35,21 +35,20 @@
                 </card-control>
                 <card-control v-if="canAccess('howTo.videos.update')">
                     <span class="icon"
-                        @click="tagging = !tagging; $emit(tagging ? 'start-tagging' : 'stop-tagging')">
+                        @click="tagging = !tagging;
+                            $emit(tagging ? 'start-tagging' : 'stop-tagging')">
                         <fa :icon="tagging ? 'check' : 'tags'"/>
                     </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,14 +95,13 @@ 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 {
     Card, CardHeader, CardCollapse, CardControl, CardContent,
     CardFooter, CardFooterItem,
 } from '@enso-ui/card/bulma';
 import Confirmation from '@enso-ui/confirmation/bulma';
 import { Uploader } from '@enso-ui/uploader';
+import VideoPlayer from './VideoPlayer.vue';
 import 'video.js/dist/video-js.css';
 
 library.add([faTrashAlt, faInfo, faTags, faEdit, faImage, faInfoCircle]);
@@ -124,10 +122,10 @@ export default {
         CardContent,
         Fa,
         Uploader,
-        videoPlayer,
+        VideoPlayer,
     },
 
-    inject: ['canAccess', 'errorHandler', 'i18n', 'route', 'toastr'],
+    inject: ['canAccess', 'errorHandler', 'http', 'i18n', 'route', 'toastr'],
 
     props: {
         video: {
@@ -140,7 +138,7 @@ export default {
         },
     },
 
-    emits: ['delete',  'edit', 'start-tagging', 'stop-tagging'],
+    emits: ['delete', 'edit', 'start-tagging', 'stop-tagging'],
 
     data: () => ({
         tagging: false,
@@ -169,21 +167,21 @@ 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');
                 }).catch(this.errorHandler);
         },
         removeTag(tag) {
-            const index = this.video.tagList.findIndex((id) => id === tag.id);
+            const index = this.video.tagList.findIndex(id => id === tag.id);
             this.video.tagList.splice(index, 1);
         },
     },

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

@@ -0,0 +1,224 @@
+<template>
+    <div class="video-player" v-if="reseted">
+        <video class="video-js" ref="video">
+            <track v-for="crtTrack in trackList"
+               :key="crtTrack.src"
+               :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: () => [],
+        },
+    },
+
+    emits: ['ready'],
+
+    data() {
+        return {
+            player: null,
+            reseted: true,
+        };
+    },
+
+    watch: {
+        options: {
+            deep: true,
+            handler(options) {
+                this.dispose(() => {
+                    if (options && options.sources && options.sources.length) {
+                        this.initialize();
+                    }
+                });
+            },
+        },
+    },
+
+    mounted() {
+        if (!this.player) {
+            this.initialize();
+        }
+    },
+
+    beforeUnmount() {
+        if (this.player) {
+            this.dispose();
+        }
+    },
+
+    methods: {
+        initialize() {
+            // videojs options
+            const videoOptions = { ...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();
+                        });
+                    });
+                });
+            }
+        },
+    },
+};
+</script>
+
+<style>
+.vjs-custom-skin > .video-js .vjs-big-play-button {
+    top: 50%;
+    left: 50%;
+    margin-left: -1.5em;
+    margin-top: -1em
+}
+</style>