@sedoo/unidoo 0.0.69 → 0.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sedoo/unidoo",
-    "version": "0.0.69",
+    "version": "0.0.73",
     "private": false,
     "scripts": {
         "build": "vue-cli-service build --target lib --name unidoo src/plugin.js",

package/src/components/unidoo-player/image-viewer/image-viewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-col justify="center" style="display: flex; height : 100%">
+  <v-col justify="center" style="display: flex; height: inherit">
     <v-row justify="center" style="height : 100%" >
 
       <img 

package/src/components/unidoo-player/level-selector/level-selector-row.vue

@@ -5,20 +5,20 @@
       <span label>{{label}} : </span>
 
       <span line v-if="options && options.length > 0">
-        <span v-for="key in options"
-          value
-          :key="key"
-          :class="'level ' + ((availableOptions.includes(key)) ? 'clickable-level ' : 'disabled-level ')  + focus(key)"
-          @click="emitInput(key, (availableOptions.includes(key)))"
-        >{{key}}</span>
+        <span v-for="item in options"
+          :key="item.value"
+          :title="item.legend"
+          :class="'level ' + ((availableOptions.includes(item.value)) ? 'clickable-level ' : 'disabled-level ')  + focus(item.value)"
+          @click="emitInput(item.value, (availableOptions.includes(item.value)))"
+        >{{item.value}}</span>
       </span>
       <span line v-else>
-        <span v-for="key in availableOptions"
-          value
-          :key="key"
-          :class="'level ' + 'clickable-level ' + focus(key)"
-          @click="$emit('input', key)"
-        >{{key}}</span>
+        <span v-for="item in availableOptions"
+          :key="item.value"
+          :title="item.legend"
+          :class="'level ' + 'clickable-level ' + focus(item.value)"
+          @click="$emit('input', item.value)"
+        >{{item.value}}</span>
       </span>
     
     </div>  

package/src/components/unidoo-player/level-selector/level-selector.vue

@@ -145,7 +145,8 @@ export default {
             curLevels.forEach(l => {
               if (this.levels[l.name]) {
                 if (!this.levels[l.name].values) this.levels[l.name].values = [];
-                this.pushIfNotExist(this.levels[l.name].values, l.value);
+                this.pushIfObjectNotExist(this.levels[l.name].values, { value: l.value, legend: this.getLegend(l.value) });
+                // this.pushIfNotExist(this.levels[l.name].values, l.value);
               }
 
               // compute id with options combination
@@ -176,6 +177,17 @@ export default {
       }
     },
 
+    getLegend(value){
+      if(value && this.data && this.data.legend){
+        const legend = this.data.legend.find(el => (el.code && el.code.toUpperCase() === value.toUpperCase()));
+        if(legend) {
+          return legend.label;
+        } else {
+          return null;
+        }
+      }
+    },
+
     mergeDeep(target, source) {
       const isObject = (obj) => obj && typeof obj === 'object';
 
@@ -249,6 +261,13 @@ export default {
         }
     },
 
+    pushIfObjectNotExist(array, element) { 
+        if (array && !array.some(e => e.value === element.value)) {
+            array.push(element);
+        }
+    },
+
+
     sort(array) {
       if (array) {
         if (array.length > 1) {

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

@@ -88,14 +88,23 @@
           <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">
-
-              <slot name="displayer"></slot>
+              <div viewer-container>
+                <div viewer-slot-container>
+                  <slot name="displayer"></slot>
+                </div>
+              </div>
 
             </v-list-item>
 
-            <slot v-else player-layout-displayer name="displayer"></slot>
+            <div v-else player-layout-displayer >
+              <div viewer-container>
+                <div viewer-slot-container>
+                  <slot name="displayer"></slot>
+                </div>
+              </div>
+            </div>
 
           </v-row>
 
@@ -146,7 +155,7 @@ export default {
     },
 
     subBodyStyle(){
-      const vh = (this.isZoomed) ? '60vh' : '40vh';
+      const vh = (this.isZoomed) ? '65vh' : '40vh';
       return { gridTemplateRows: ((this.playerBarTop) ? '10px 140px 10px ' + vh + ' 10px' : '10px ' + vh + ' 10px 140px 10px')};
     }
 
@@ -504,6 +513,25 @@ export default {
     height: 100%;
   }
 
+  [player-layout] [viewer-container] {
+    display: flex;
+    height: inherit;
+    width: 100%;
+    overflow: auto;
+  }
+
+  [player-layout] [viewer-container] [viewer-slot-container] {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    margin:auto;
+  }
+
+  [player-layout].zoomed [viewer-container] [viewer-slot-container] {
+    height: fit-content;
+  }
+
   [buttons] {
     display: flex;
     align-items: baseline;
@@ -551,7 +579,8 @@ export default {
     min-height: 60vh;
   }
   [player-layout].zoomed [player-part] [player-layout-displayer] {
-    height : inherit;
+    padding: 0;
+    height: 100%;
   }
 
   @media screen and (max-width: 890px) {
@@ -578,7 +607,7 @@ export default {
 </style>
 <style>
   [player-layout] .v-slider__tick-label {
-    font-size: 0.8em;
+    font-size: 0.65em;
   }
 
   [player-layout] .v-slider__tick {