@sedoo/unidoo 0.1.68 → 0.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sedoo/unidoo",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "private": false,
   "scripts": {
     "build": "npm run build:unidoo && npm run build:auth",
@@ -22,7 +22,9 @@
   "dependencies": {
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.3.8",
+    "dompurify": "^3.2.4",
     "keycloak-js": "^8.0.2",
+    "marked": "^0.8.2",
     "moment": "^2.30.1",
     "ol": "^6.15.1",
     "ol-ext": "^4.0.23",

package/src/components/UnidooMarkdown.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-card v-if="markdown" flat>
+            <v-card-text v-html="markdown"></v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+import marked from "marked";
+import DOMPurify from "dompurify/dist/purify.min.js";
+
+export default {
+  name: "unidoo-markdown",
+  props: {
+    service: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      markdown: null
+    };
+  },
+  mounted() {
+    this.fetchMarkdown();
+  },
+  methods: {
+    async fetchMarkdown() {
+      if (!this.service) return;
+
+      try {
+        const response = await this.axios.get(this.service);
+        this.markdown = DOMPurify.sanitize(marked(response.data), null);
+      } catch (error) {
+        this.markdown = null;
+        console.error("An error occurred while fetching markdown", error);
+      }
+    }
+  }
+};
+</script>

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>
@@ -145,7 +146,8 @@ export default {
     clickableFrame: { type: Boolean, default: true },
     playerBarTop: { type: Boolean, default: true },
     entries: { type: Array, default: () => [] },
-    displayThumbnails: { type: Boolean, default: false }
+    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
     }
   },