@sedoo/unidoo 0.1.67 → 0.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sedoo/unidoo",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "private": false,
   "scripts": {
     "build": "npm run build:unidoo && npm run build:auth",

package/src/components/unidoo-player/UnidooPlayer.vue

@@ -16,6 +16,7 @@
         :label="label"
         :entries="entries"
         :displayThumbnails="displayThumbnails"
+        :thumbnailRatio="thumbnailRatio"
       >
 
         <template v-slot:customField>
@@ -75,11 +76,16 @@ export default {
     displayThumbnails: {
       type: Boolean,
       default: false
+    },
+
+    thumbnailRatio: { 
+      type: String,
+      default: "null"
     }
   },
 
   data: () => ({
-    entries: null
+    entries: []
   }),
 
   computed: {

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

@@ -1,30 +1,32 @@
 <template>
   <v-container class="d-flex justify-start flex-wrap">
-    <v-img
-      class="thumbnail ma-1"
-      :style="selected === index ? activeStyle : ''"
+    <thumbnail-entry
       v-for="(link, index) in links"
-      :lazy-src="link"
-      :src="link"
-      :key="link"
-      :max-width="100"
-      contain
-      @click="select(index)"
-    ></v-img>
+      :selected="isActive(index)"
+      :link="link"
+      :thumbnailRatio="thumbnailRatio"
+      :key="index"
+      @select="select(index)"
+    ></thumbnail-entry>
   </v-container>
 </template>
 
 <script>
+import ThumbnailEntry from "./ThumbnailEntry.vue";
+
 export default {
   name: "thumbnail-entries",
+  components: {
+    ThumbnailEntry
+  },
   props: {
-    entries: { type: Array, required: true },
-    value: { type: Number, default: 0 }
+    entries: { type: Array, default: () => [], required: true },
+    value: { type: Number, default: 0 },
+    thumbnailRatio: { type: String, default: null }
   },
   data() {
     return {
-      selected: null,
-      activeStyle: "border: 3px solid black; border-radius: 3px;"
+      selected: null
     };
   },
   created() {
@@ -44,9 +46,9 @@ export default {
     }
   },
   methods: {
-    select(link) {
-      this.selected = link;
-      this.$emit("select", link);
+    select(index) {
+      this.selected = index;
+      this.$emit("select", index);
     },
     isActive(index) {
       return this.selected === index;
@@ -54,9 +56,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-.thumbnail {
-  cursor: pointer;
-}
-</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <v-img
+    ref="thumbnail"
+    class="thumbnail ma-1"
+    :style="selected ? activeStyle : ''"
+    :src="link"
+    :aspect-ratio="computedRatio"
+    :width="width"
+    :max-width="width"
+    contain
+    @click="select"
+    @load="handleLoadImage"
+  ></v-img>
+</template>
+
+<script>
+export default {
+  name: "thumbnail-entry",
+  props: {
+    selected: { type: Boolean, default: false },
+    link: { type: String, default: null },
+    thumbnailRatio: { type: String, default: null }
+  },
+  data() {
+    return {
+      activeStyle: "border: 3px solid black; border-radius: 3px;",
+      ratio: null,
+      width: "calc(100%/3 - 16px)"
+    };
+  },
+  computed: {
+    computedRatio() {
+      if (this.thumbnailRatio) {
+        const [a, b] = this.thumbnailRatio.split("/");
+        if (b) {
+            return Number(a) / Number(b);
+        }
+        return Number(a);
+      }
+      return this.ratio;
+    }
+  },
+  methods: {
+    select() {
+      this.$emit("select");
+    },
+    handleLoadImage() {
+      const { height, width } =
+        this.$refs.thumbnail.$el.getBoundingClientRect();
+      this.ratio = width / height;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.thumbnail {
+  cursor: pointer;
+}
+</style>

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

@@ -115,6 +115,7 @@
         v-if="displayThumbnails"
         :value.sync="value"
         :entries="entries"
+        :thumbnailRatio="thumbnailRatio"
         @select="updateFromThumbnail"
     ></thumbnail-entries>
     </div>
@@ -144,8 +145,9 @@ export default {
     progressBarTitle: { type: String, default: 'Loading image' },
     clickableFrame: { type: Boolean, default: true },
     playerBarTop: { type: Boolean, default: true },
-    entries: { type: Array, default: null },
-    displayThumbnails: { type: Boolean, default: false }
+    entries: { type: Array, default: () => [] },
+    displayThumbnails: { type: Boolean, default: false },
+    thumbnailRatio: { type: String, default: null }
   },
 
   data: () => ({

package/src/components/unidoo-player/unidoo-simple-player/UnidooSimplePlayer.vue

@@ -12,6 +12,7 @@
       :loadedFrames="loadedFrames"
       :entries="entries"
       :displayThumbnails="displayThumbnails"
+      :thumbnailRatio="thumbnailRatio"
       @reload-frames="refreshPreload(loadIndex)"
       progressBarTitle="Loading image"
     >
@@ -63,12 +64,17 @@ export default {
 
     entries: {
       type: Array,
-      default: () => null
+      default: () => []
     },
 
     displayThumbnails: {
       type: Boolean,
       default: false
+    },
+
+    thumbnailRatio: { 
+      type: String,
+      default: null
     }
   },