@sedoo/unidoo 0.0.71 → 0.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sedoo/unidoo",
-    "version": "0.0.71",
+    "version": "0.0.75",
     "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/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')};
     }
 
@@ -502,6 +511,26 @@ export default {
 
   [player-part] [player-layout-displayer] {
     height: 100%;
+    width: 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] {
@@ -551,7 +580,7 @@ export default {
     min-height: 60vh;
   }
   [player-layout].zoomed [player-part] [player-layout-displayer] {
-    height : inherit;
+    padding: 0;
   }
 
   @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 {