@sedoo/unidoo 0.1.71 → 0.1.72

package/src/components/unidoo-player/unidoo-player-layout/UnidooPlayerLayout.vue

@@ -1,27 +1,26 @@
 <template>
   <div>
-
     <div player-layout elevation="0" :class="{ zoomed: isZoomed }">
-
       <div mask @click="zoomPlayer"></div>
 
       <div body>
-
         <div sub-body :style="subBodyStyle">
-        
-          <v-divider style="order: 1;"></v-divider>  
+          <v-divider style="order: 1"></v-divider>
 
-          <v-row viewer-part :style="{ order: ((playerBarTop) ? 2 : 4) }">
-          
-            <v-list-item player-layout-slider-part >
+          <v-row viewer-part :style="{ order: playerBarTop ? 2 : 4 }">
+            <v-list-item player-layout-slider-part>
               <div style="display: flex; flex-direction: column; width: 100%">
-                <div custom-top-left >
+                <div custom-top-left>
                   <slot name="customField"></slot>
                 </div>
-                <div style="display: flex; justify-content: center; margin-top: 10px;">
-                  <slot name="frameTitle">
-
-                  </slot>
+                <div
+                  style="
+                    display: flex;
+                    justify-content: center;
+                    margin-top: 10px;
+                  "
+                >
+                  <slot name="frameTitle"> </slot>
                 </div>
 
                 <v-btn
@@ -35,15 +34,18 @@
                 >
                   <v-icon>mdi-cached</v-icon>
                 </v-btn>
-       
-                <unidoo-progress-bar v-if="showProgressBar"
+
+                <unidoo-progress-bar
+                  v-if="showProgressBar"
                   :title="progressBarTitle"
                   :current="loadedFrames"
-                  :max="max + 1">        
+                  :max="max + 1"
+                >
                 </unidoo-progress-bar>
 
-                <v-slider v-else-if="canPlay"
-                  style="margin-top: -10px; padding: 0 5px;"
+                <v-slider
+                  v-else-if="canPlay"
+                  style="margin-top: -10px; padding: 0 5px"
                   v-model="value"
                   ref="slider"
                   :id="id"
@@ -57,58 +59,88 @@
                 >
                   <template v-slot:prepend>
                     <div buttons>
-
-                      <v-btn color="primary" fab x-small dark style="margin-right: 5px;" @click="previous">
+                      <v-btn
+                        color="primary"
+                        fab
+                        x-small
+                        dark
+                        style="margin-right: 5px"
+                        @click="previous"
+                      >
                         <v-icon>mdi-skip-previous</v-icon>
                       </v-btn>
 
-                      <v-btn v-if="!isPlaying" color="primary" fab small dark @click="clicPlay">
+                      <v-btn
+                        v-if="!isPlaying"
+                        color="primary"
+                        fab
+                        small
+                        dark
+                        @click="clicPlay"
+                      >
                         <v-icon>mdi-play</v-icon>
                       </v-btn>
 
-                      <v-btn v-if="isPlaying" color="primary" fab small dark @click="clickStop">
+                      <v-btn
+                        v-if="isPlaying"
+                        color="primary"
+                        fab
+                        small
+                        dark
+                        @click="clickStop"
+                      >
                         <v-icon>mdi-stop</v-icon>
                       </v-btn>
 
-                      <v-btn color="primary" fab x-small dark style="margin-left: 5px;" @click="next">
+                      <v-btn
+                        color="primary"
+                        fab
+                        x-small
+                        dark
+                        style="margin-left: 5px"
+                        @click="next"
+                      >
                         <v-icon>mdi-skip-next</v-icon>
                       </v-btn>
-                    
                     </div>
-
                   </template>
                 </v-slider>
 
-                <iframe ref="sizeHandlerIframe" src="about:blank" style="width:100%; height:0; border:0;"></iframe>
+                <iframe
+                  ref="sizeHandlerIframe"
+                  src="about:blank"
+                  style="width: 100%; height: 0; border: 0"
+                ></iframe>
               </div>
             </v-list-item>
-            
           </v-row>
 
-          <v-divider style="order: 3;"></v-divider>
+          <v-divider style="order: 3"></v-divider>
 
-          <v-row player-part :style="{ order: ((playerBarTop) ? 4 : 2) }">
-            
-            <v-list-item player-layout-displayer v-if="clickableFrame" :ripple="false" @click="playOrStopFrame">
+          <v-row player-part :style="{ order: playerBarTop ? 4 : 2 }">
+            <v-list-item
+              player-layout-displayer
+              v-if="clickableFrame"
+              :ripple="false"
+              @click="playOrStopFrame"
+            >
               <div viewer-container>
                 <div viewer-slot-container>
                   <slot name="displayer"></slot>
                 </div>
               </div>
-
             </v-list-item>
 
-            <div v-else player-layout-displayer >
+            <div v-else player-layout-displayer>
               <div viewer-container>
                 <div viewer-slot-container>
                   <slot name="displayer"></slot>
                 </div>
               </div>
             </div>
-
           </v-row>
 
-          <v-divider style="order: 5;"></v-divider>
+          <v-divider style="order: 5"></v-divider>
         </div>
       </div>
       <thumbnail-entries
@@ -117,18 +149,16 @@
         :entries="entries"
         :thumbnailRatio="thumbnailRatio"
         @select="updateFromThumbnail"
-    ></thumbnail-entries>
+      ></thumbnail-entries>
     </div>
   </div>
-
 </template>
 
 <script>
-import Vue from 'vue'
+import Vue from "vue";
 import ThumbnailEntries from "./ThumbnailEntries.vue";
 
 export default {
-
   components: {
     ThumbnailEntries
   },
@@ -142,7 +172,7 @@ export default {
     graduation: { type: Array, default: () => [] },
     loop: { type: Boolean, default: false },
     loadedFrames: { type: Number, default: null },
-    progressBarTitle: { type: String, default: 'Loading image' },
+    progressBarTitle: { type: String, default: "Loading image" },
     clickableFrame: { type: Boolean, default: true },
     playerBarTop: { type: Boolean, default: true },
     entries: { type: Array, default: () => [] },
@@ -162,46 +192,52 @@ export default {
 
   computed: {
     showProgressBar() {
-      return this.max != null && this.loadedFrames != null && this.loadedFrames < this.max + 1
+      return (
+        this.max != null &&
+        this.loadedFrames != null &&
+        this.loadedFrames < this.max + 1
+      );
     },
 
     canPlay() {
-      return this.max > 0 && this.loadedFrames >= this.max + 1
+      return this.max > 0 && this.loadedFrames >= this.max + 1;
     },
 
     subBodyStyle() {
-      const vh = (this.isZoomed) ? '75vh' : '43vh';
-      return { gridTemplateRows: ((this.playerBarTop) ? '10px 120px 10px ' + vh + ' 10px' : '10px ' + vh + ' 10px 120px 10px') };
+      const vh = this.isZoomed ? "75vh" : "43vh";
+      return {
+        gridTemplateRows: this.playerBarTop
+          ? "10px 120px 10px " + vh + " 10px"
+          : "10px " + vh + " 10px 120px 10px"
+      };
     }
-
   },
 
   watch: {
-
     initialValue(val) {
       this.value = val;
     },
 
     value(val) {
-      this.$emit('input', val);
+      this.$emit("input", val);
     },
 
     canPlay(val) {
-      if (val) {
+      if (val && typeof document !== "undefined") {
         // trick used to init wrapper v-app to the slider (app field) after its initialization in case of multi instance vuetify
         const self = this;
         Vue.nextTick(() => {
           if (self.$refs.slider) {
             const slider = self.$refs.slider;
-            const apps = document.querySelectorAll('[data-app]');
-            apps.forEach(elem => {
+            const apps = document.querySelectorAll("[data-app]");
+            apps.forEach((elem) => {
               if (elem.contains(slider.$el)) {
                 slider.app = elem;
               }
             });
           }
           self.focusSlider();
-        })
+        });
       }
     },
 
@@ -212,24 +248,27 @@ export default {
     sliderSize() {
       this.initGraduation();
     }
-
   },
 
   created() {
-    this.playerListener = this.handlePlay.bind(this);
-    document.addEventListener('play-stop', this.playerListener);
-    this.barListener = this.keyHandler.bind(this);
-    document.addEventListener('keyup', this.barListener);
+    if (typeof document !== "undefined") {
+      this.playerListener = this.handlePlay.bind(this);
+      document.addEventListener("play-stop", this.playerListener);
+      this.barListener = this.keyHandler.bind(this);
+      document.addEventListener("keyup", this.barListener);
+    }
   },
 
   mounted() {
-    this.id = this.create_UUID();
-    this.value = this.initialValue;
-    if (this.autoPlay) {
-      this.play();
+    if (typeof document !== "undefined") {
+      this.id = this.create_UUID();
+      this.value = this.initialValue;
+      if (this.autoPlay) {
+        this.play();
+      }
+      document.dispatchEvent(new CustomEvent("show-play"));
+      this.initIframe();
     }
-    document.dispatchEvent(new CustomEvent('show-play'));
-    this.initIframe();
   },
 
   beforeDestroy() {
@@ -238,11 +277,13 @@ export default {
   },
 
   destroyed() {
-    document.dispatchEvent(new CustomEvent('remove-player'));
-    document.removeEventListener('play-stop', this.playerListener);
-    this.playerListener = null;
-    document.removeEventListener('keyup', this.barListener);
-    this.barListener = null;
+    if (typeof document !== "undefined") {
+      document.dispatchEvent(new CustomEvent("remove-player"));
+      document.removeEventListener("play-stop", this.playerListener);
+      this.playerListener = null;
+      document.removeEventListener("keyup", this.barListener);
+      this.barListener = null;
+    }
   },
 
   methods: {
@@ -281,7 +322,7 @@ export default {
       this.clickedValue = -1;
       clearInterval(this.timeInterval);
     },
-    
+
     clickStop() {
       this.stop();
       this.focusSlider();
@@ -354,7 +395,7 @@ export default {
         this.reinit();
       }
     },
-    
+
     restart() {
       this.reinit();
       if (this.autoPlay) {
@@ -364,7 +405,7 @@ export default {
 
     emitReloadFrames() {
       this.stop();
-      this.$emit('reload-frames');
+      this.$emit("reload-frames");
     },
 
     initGraduation() {
@@ -374,27 +415,29 @@ export default {
         let delta = 1;
         if (this.sliderSize && gradsLength && this.graduation[0]) {
           const firstGrad = this.graduation[0].length * 9; // nb chars * number of pixels for 1 character
-          let exceed = Math.ceil(this.sliderSize - (gradsLength * firstGrad) - 30); // add 30px of margin
-          exceed = (exceed < 0) ? -exceed : 0;
+          let exceed = Math.ceil(
+            this.sliderSize - gradsLength * firstGrad - 30
+          ); // add 30px of margin
+          exceed = exceed < 0 ? -exceed : 0;
           const gradsExceed = exceed / firstGrad;
           if (gradsLength - gradsExceed) {
-            delta = Math.ceil(gradsLength / (gradsLength - gradsExceed)); 
+            delta = Math.ceil(gradsLength / (gradsLength - gradsExceed));
           } else {
             delta = Math.ceil(gradsLength);
           }
         }
 
         let n = 0;
-        this.graduation.forEach(element => {
+        this.graduation.forEach((element) => {
           if (n % delta) {
             result.push(null);
-            } else {
+          } else {
             result.push(element);
           }
           n++;
         });
-      } 
-        
+      }
+
       this.filteredGraduation = result;
     },
 
@@ -405,7 +448,7 @@ export default {
         this.sliderSize = box.width - 114 - 9 - 32 - 10; // - padding and margin
         const iframeWin = iframe.contentWindow;
         this.resizeListener = this.handleResize.bind(this);
-        iframeWin.addEventListener('resize', this.resizeListener);
+        iframeWin.addEventListener("resize", this.resizeListener);
       }
     },
 
@@ -414,7 +457,7 @@ export default {
       if (iframe) {
         const iframeWin = iframe.contentWindow;
         if (iframeWin) {
-          iframeWin.removeEventListener('resize', this.resizeListener);
+          iframeWin.removeEventListener("resize", this.resizeListener);
         }
         this.resizeListener = null;
       }
@@ -438,11 +481,14 @@ export default {
 
     create_UUID() {
       var dt = new Date().getTime();
-      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
           var r = (dt + Math.random() * 16) % 16 | 0;
           dt = Math.floor(dt / 16);
-          return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
-      });
+          return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+        }
+      );
       return uuid;
     },
 
@@ -456,10 +502,10 @@ export default {
 
     keyHandler(e) {
       if (this.isPlaying) {
-        if (e.keyCode === '37') {
+        if (e.keyCode === "37") {
           // left arrow
           this.previous();
-        } else if (e.keyCode === '39') {
+        } else if (e.keyCode === "39") {
           // right arrow
           this.clickStop();
         }
@@ -472,168 +518,165 @@ export default {
           this.play();
         } else {
           this.stop();
-        } 
+        }
       }
     }
-
   }
-}
+};
 </script>
 <style scoped>
-  [player-layout] [body] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    max-width: 91vw;
-    background: white;
-    transition: opacity 0.2s ease-in-out;
-    transition: margin 0.2s ease-in-out;
-  }
-
-  [player-layout] [body] [sub-body] {
-    display: grid;
-    background: white;
-    align-items: center;
-  }
+[player-layout] [body] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  max-width: 91vw;
+  background: white;
+  transition: opacity 0.2s ease-in-out;
+  transition: margin 0.2s ease-in-out;
+}
 
-  [player-layout] [mask] {
-    position: fixed;
-    visibility: hidden;
-    z-index: 99998;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    background: rgb(0,0,0);
-    opacity: 0;
-    transition: all 0.2s;
-  }
+[player-layout] [body] [sub-body] {
+  display: grid;
+  background: white;
+  align-items: center;
+}
 
-  [viewer-part] {
-    margin-top: 0;
-    margin-bottom: 0;
-    height: 100%;
-  }
+[player-layout] [mask] {
+  position: fixed;
+  visibility: hidden;
+  z-index: 99998;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: rgb(0, 0, 0);
+  opacity: 0;
+  transition: all 0.2s;
+}
 
-  [player-layout-slider-part] {
-    position: relative;
-    margin: 10px 0;
-    max-height: 100%;
-  }
+[viewer-part] {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 100%;
+}
 
-  [player-layout-slider-part] [custom-top-left]{
-    position: absolute;
-    top: -5px;
-    left: 30px;
-  }
+[player-layout-slider-part] {
+  position: relative;
+  margin: 10px 0;
+  max-height: 100%;
+}
 
-  [player-part] [player-layout-displayer] {
-    height: 100%;
-    width: 100%;
-  }
+[player-layout-slider-part] [custom-top-left] {
+  position: absolute;
+  top: -5px;
+  left: 30px;
+}
 
-  [player-layout] [viewer-container] {
-    display: flex;
-    height: inherit;
-    width: 100%;
-    overflow: auto;
-  }
+[player-part] [player-layout-displayer] {
+  height: 100%;
+  width: 100%;
+}
 
-  [player-layout] [viewer-container] [viewer-slot-container] {
-    display: flex;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    margin:auto;
-  }
+[player-layout] [viewer-container] {
+  display: flex;
+  height: inherit;
+  width: 100%;
+  overflow: auto;
+}
 
-  [player-layout].zoomed [viewer-container] [viewer-slot-container] {
-    height: fit-content;
-  }
+[player-layout] [viewer-container] [viewer-slot-container] {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+}
 
-  [buttons] {
-    display: flex;
-    align-items: baseline;
-  }
+[player-layout].zoomed [viewer-container] [viewer-slot-container] {
+  height: fit-content;
+}
 
-  .v-input__slider {
-    align-items: center;
-  }
+[buttons] {
+  display: flex;
+  align-items: baseline;
+}
 
-  [reload-button] {
-    position: absolute;
-    top: -5px;
-    right: 15px;
-  }
+.v-input__slider {
+  align-items: center;
+}
 
-  [player-layout].zoomed [body] {
-    position: fixed;
-    display: block;
-    z-index: 99999;
-    top: 4vh;
-    left: 4vw;
-    right: 4vw;
-    overflow: auto;
-    margin-top: -5px;
-    margin-bottom: 5px;
-    padding-left : 15px; 
-    padding-right : 15px;
-    height: auto;
-    max-height: 92vh;
-    border-radius: 5px;
-  }
+[reload-button] {
+  position: absolute;
+  top: -5px;
+  right: 15px;
+}
 
-  [player-layout].zoomed [mask] {
-    visibility: visible;
-    opacity: 0.3;
-  }
+[player-layout].zoomed [body] {
+  position: fixed;
+  display: block;
+  z-index: 99999;
+  top: 4vh;
+  left: 4vw;
+  right: 4vw;
+  overflow: auto;
+  margin-top: -5px;
+  margin-bottom: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  height: auto;
+  max-height: 92vh;
+  border-radius: 5px;
+}
 
-  [player-layout] [player-part] {
-    height: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
+[player-layout].zoomed [mask] {
+  visibility: visible;
+  opacity: 0.3;
+}
 
-  [player-layout].zoomed [player-part] {
-    min-height: 60vh;
-  }
-  [player-layout].zoomed [player-part] [player-layout-displayer] {
-    padding: 0;
-  }
+[player-layout] [player-part] {
+  height: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 
-  @media screen and (max-width: 890px) {
+[player-layout].zoomed [player-part] {
+  min-height: 60vh;
+}
+[player-layout].zoomed [player-part] [player-layout-displayer] {
+  padding: 0;
+}
 
-    [player-part] {
-      flex-direction: column-reverse;
-    }
+@media screen and (max-width: 890px) {
+  [player-part] {
+    flex-direction: column-reverse;
+  }
 
-    [displayer-part] {
-      flex: 0 0 100%;
-      max-width: 100%;
-    }
-    
-    [viewer-part] {
-      flex-direction: column;
-    }
+  [displayer-part] {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
 
-    [slider-part] {
-      flex: 0 0 100%;
-      max-width: 100%;
-    }
+  [viewer-part] {
+    flex-direction: column;
   }
 
+  [slider-part] {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
 </style>
 <style>
-  [player-layout] .v-slider__tick-label {
-    font-size: 0.65em;
-  }
+[player-layout] .v-slider__tick-label {
+  font-size: 0.65em;
+}
 
-  [player-layout] .v-slider__tick {
-    cursor: pointer;
-  }
+[player-layout] .v-slider__tick {
+  cursor: pointer;
+}
 
-  [player-layout] .v-slider--horizontal .v-slider__tick .v-slider__tick-label {
-    top: 12px;
-  }
-</style>
+[player-layout] .v-slider--horizontal .v-slider__tick .v-slider__tick-label {
+  top: 12px;
+}
+</style>