@sedoo/unidoo 0.1.64 → 0.1.66

package/package.json

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

package/src/components/UnidooConfirmDialog.vue

@@ -1,5 +1,5 @@
 <template>
-<v-dialog v-model="confirmDialog" persistent :width="width">
+<v-dialog v-model="confirmDialog" persistent :width="width" @keydown.enter="confirm">
       <v-card>
         <v-card-title :class="titleClasses">{{title}}</v-card-title>
         <v-card-text>{{message}}</v-card-text>

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

@@ -15,6 +15,7 @@
         class="constrained"
         :label="label"
         :entries="entries"
+        :displayThumbnails="displayThumbnails"
       >
 
         <template v-slot:customField>
@@ -69,6 +70,11 @@ export default {
     isLoading: {
       type: Boolean,
       default: false
+    },
+
+    displayThumbnails: {
+      type: Boolean,
+      default: false
     }
   },
 

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

@@ -0,0 +1,59 @@
+<template>
+  <v-container class="d-flex justify-start flex-wrap">
+    <v-img
+      class="thumbnail ma-1"
+      :style="selected === index ? activeStyle : ''"
+      v-for="(link, index) in links"
+      :lazy-src="link"
+      :src="link"
+      :key="link"
+      :max-width="100"
+      contain
+      @click="select(index)"
+    ></v-img>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "thumbnail-entries",
+  props: {
+    entries: { type: Array, required: true },
+    value: { type: Number, default: 0 }
+  },
+  data() {
+    return {
+      selected: null,
+      activeStyle: "border: 3px solid black; border-radius: 3px;"
+    };
+  },
+  created() {
+    this.selected = this.value;
+  },
+  computed: {
+    links() {
+      return this.entries.map((entry) => entry.media.content);
+    }
+  },
+  watch: {
+    value(val) {
+      this.selected = val;
+    }
+  },
+  methods: {
+    select(link) {
+      this.selected = link;
+      this.$emit("select", link);
+    },
+    isActive(index) {
+      return this.selected === index;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.thumbnail {
+  cursor: pointer;
+}
+</style>

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

@@ -111,6 +111,12 @@
           <v-divider style="order: 5;"></v-divider>
         </div>
       </div>
+      <thumbnail-entries
+        v-if="displayThumbnails"
+        :value.sync="value"
+        :entries="entries"
+        @select="updateFromThumbnail"
+    ></thumbnail-entries>
     </div>
   </div>
 
@@ -118,9 +124,14 @@
 
 <script>
 import Vue from 'vue'
+import ThumbnailEntries from "./ThumbnailEntries.vue";
 
 export default {
 
+  components: {
+    ThumbnailEntries
+  },
+
   props: {
     frequency: { type: Number, default: 1000 },
     min: { type: Number, default: 0 },
@@ -133,6 +144,8 @@ 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 }
   },
 
   data: () => ({
@@ -321,6 +334,11 @@ export default {
       this.clickedValue = this.value;
     },
 
+    updateFromThumbnail(index) {
+      this.value = index;
+      this.playOrStopSlider();
+    },
+
     reinit() {
       this.value = this.min;
       this.stop();

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

@@ -10,6 +10,8 @@
       :graduation="graduation"
       :frequency="300"
       :loadedFrames="loadedFrames"
+      :entries="entries"
+      :displayThumbnails="displayThumbnails"
       @reload-frames="refreshPreload(loadIndex)"
       progressBarTitle="Loading image"
     >
@@ -62,6 +64,11 @@ export default {
     entries: {
       type: Array,
       default: () => null
+    },
+
+    displayThumbnails: {
+      type: Boolean,
+      default: false
     }
   },