@enso-ui/how-to 4.0.14 → 4.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/how-to",
-  "version": "4.0.14",
+  "version": "4.0.18",
   "description": "Basic how-to package",
   "main": "src/bulma/pages/howTo/Index.vue",
   "scripts": {
@@ -28,9 +28,9 @@
     "@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"
   },

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

@@ -27,7 +27,7 @@
                         <fade>
                             <div class="control"
                                  v-if="video.name">
-                                <uploader :url="uploadLink"
+                                <enso-uploader :url="uploadLink"
                                     :params="video"
                                     :file-size-limit="20000000"
                                     file-key="video"
@@ -45,7 +45,7 @@
                                             </span>
                                         </a>
                                     </template>
-                                </uploader>
+                                </enso-uploader>
                                 <a class="button is-outlined is-success"
                                     @click="video = video; update()"
                                     v-if="editingVideo">
@@ -179,7 +179,7 @@
 <script>
 import { focus } from '@enso-ui/directives';
 import { Fade } from '@enso-ui/transitions';
-import { Uploader } from '@enso-ui/uploader/bulma';
+import { EnsoUploader } from '@enso-ui/uploader/bulma';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faBan,
@@ -199,7 +199,9 @@ export default {
 
     directives: { focus },
 
-    components: { Fa, Fade, HowToVideo, Uploader, },
+    components: {
+        Fa, Fade, HowToVideo, EnsoUploader,
+    },
 
     inject: ['canAccess', 'errorHandler', 'http', 'i18n', 'route', 'toastr'],
 
@@ -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() {
@@ -295,7 +297,7 @@ export default {
             this.deselectTags();
         },
         deselectTags() {
-            this.tags.map((tag) => {
+            this.tags.map(tag => {
                 tag.selected = false;
                 return tag;
             });

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

@@ -14,7 +14,7 @@
                     </span>
                 </card-control>
                 <card-control v-if="!video.poster && canAccess('howTo.posters.store')">
-                    <uploader class="pt-1"
+                    <enso-uploader class="pt-1"
                         :url="route('howTo.posters.store')"
                         :params="{ videoId: video.id }"
                         file-key="poster"
@@ -25,7 +25,7 @@
                                 <fa :icon="['far', 'image']"/>
                             </span>
                         </template>
-                    </uploader>
+                    </enso-uploader>
                 </card-control>
                 <card-control v-if="canAccess('howTo.videos.update')">
                     <span class="icon"
@@ -35,7 +35,8 @@
                 </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>
@@ -94,13 +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 './VideoPlayer.vue';
 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 { EnsoUploader } from '@enso-ui/uploader';
+import VideoPlayer from './VideoPlayer.vue';
 import 'video.js/dist/video-js.css';
 
 library.add([faTrashAlt, faInfo, faTags, faEdit, faImage, faInfoCircle]);
@@ -120,7 +121,7 @@ export default {
         CardFooterItem,
         CardContent,
         Fa,
-        Uploader,
+        EnsoUploader,
         VideoPlayer,
     },
 
@@ -137,7 +138,7 @@ export default {
         },
     },
 
-    emits: ['delete',  'edit', 'start-tagging', 'stop-tagging'],
+    emits: ['delete', 'edit', 'start-tagging', 'stop-tagging'],
 
     data: () => ({
         tagging: false,
@@ -180,7 +181,7 @@ export default {
                 }).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

@@ -2,208 +2,216 @@
     <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"/>
+               :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();
-                      }
-                  });
-              },
-          },
-      },
-  };
+// 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>