Add thumbnail-count option

sist2-vue/src/components/DebugInfo.vue

@@ -30,6 +30,7 @@ export default {
         {key: "esIndex", value: this.$store.state.sist2Info.esIndex},
         {key: "tagline", value: this.$store.state.sist2Info.tagline},
         {key: "dev", value: this.$store.state.sist2Info.dev},
+        {key: "mongooseVersion", value: this.$store.state.sist2Info.mongooseVersion},
         {key: "esVersion", value: this.$store.state.sist2Info.esVersion},
         {key: "esVersionSupported", value: this.$store.state.sist2Info.esVersionSupported},
         {key: "esVersionLegacy", value: this.$store.state.sist2Info.esVersionLegacy},

sist2-vue/src/components/DocCard.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="doc-card" :class="{'sub-document': doc._props.isSubDocument}" :style="`width: ${width}px`">
+  <div class="doc-card" :class="{'sub-document': doc._props.isSubDocument}" :style="`width: ${width}px`"
+       @click="$store.commit('busTnTouchStart', null)">
     <b-card
         no-body
         img-top

sist2-vue/src/components/FullThumbnail.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="doc._props.hasThumbnail" class="img-wrapper" @mouseenter="onTnEnter()" @mouseleave="onTnLeave()">
+  <div v-if="doc._props.hasThumbnail" class="img-wrapper" @mouseenter="onTnEnter()" @mouseleave="onTnLeave()"
+       @touchstart="onTouchStart()">
     <div v-if="doc._props.isAudio" class="card-img-overlay" :class="{'small-badge': smallBadge}">
       <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
     </div>
@@ -25,26 +26,53 @@
 
     <img ref="tn"
          v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
-         :src="(doc._props.isGif && hover) ? `f/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
+         :src="tnSrc"
          alt=""
          :style="{height: (doc._props.isGif && hover) ? `${tnHeight()}px` : undefined}"
          class="pointer fit card-img-top" @click="onThumbnailClick()">
-    <img v-else :src="`t/${doc._source.index}/${doc._id}`" alt=""
+    <img v-else :src="tnSrc" alt=""
          class="fit card-img-top">
+
+    <ThumbnailProgressBar v-if="hover && doc._props.hasVidPreview"
+                          :progress="(currentThumbnailNum + 1) / (doc._props.tnNum)"
+    ></ThumbnailProgressBar>
   </div>
 </template>
 
 <script>
 import {humanTime} from "@/util";
+import ThumbnailProgressBar from "@/components/ThumbnailProgressBar";
 
 export default {
   name: "FullThumbnail",
   props: ["doc", "smallBadge"],
+  components: {ThumbnailProgressBar},
   data() {
     return {
-      hover: false
+      hover: false,
+      currentThumbnailNum: 0,
+      timeoutId: null
     }
   },
+  created() {
+    this.$store.subscribe((mutation) => {
+      if (mutation.type === "busTnTouchStart" && mutation.payload !== this.doc._id) {
+        this.onTnLeave();
+      }
+    });
+  },
+  computed: {
+    tnSrc() {
+      const doc = this.doc;
+      const props = doc._props;
+      if (props.isGif && this.hover) {
+        return `f/${doc._id}`;
+      }
+      return (this.currentThumbnailNum === 0)
+          ? `t/${doc._source.index}/${doc._id}`
+          : `t/${doc._source.index}/${doc._id}${String(this.currentThumbnailNum).padStart(4, "0")}`;
+    },
+  },
   methods: {
     humanTime: humanTime,
     onThumbnailClick() {
@@ -53,11 +81,43 @@ export default {
     tnHeight() {
       return this.$refs.tn.height;
     },
+    tnWidth() {
+      return this.$refs.tn.width;
+    },
     onTnEnter() {
       this.hover = true;
+      if (this.doc._props.hasVidPreview) {
+        this.currentThumbnailNum += 1;
+        this.scheduleNextTnNum();
+      }
     },
     onTnLeave() {
+      this.currentThumbnailNum = 0;
       this.hover = false;
+      if (this.timeoutId !== null) {
+        window.clearTimeout(this.timeoutId);
+        this.timeoutId = null;
+      }
+    },
+    scheduleNextTnNum() {
+      const INTERVAL = this.$store.state.optVidPreviewInterval ?? 700;
+      this.timeoutId = window.setTimeout(() => {
+        if (!this.hover) {
+          return;
+        }
+        this.scheduleNextTnNum();
+        if (this.currentThumbnailNum === this.doc._props.tnNum - 1) {
+          this.currentThumbnailNum = 0;
+        } else {
+          this.currentThumbnailNum += 1;
+        }
+      }, INTERVAL);
+    },
+    onTouchStart() {
+      this.$store.commit("busTnTouchStart", this.doc._id);
+      if (!this.hover) {
+        this.onTnEnter()
+      }
     },
   }
 }

sist2-vue/src/components/ThumbnailProgressBar.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="thumbnail-progress-bar" :style="{width: `${percentProgress}%`}"></div>
+</template>
+
+<script>
+export default {
+  name: "ThumbnailProgressBar",
+  props: ["doc", "progress"],
+  computed: {
+    percentProgress() {
+      return Math.min(Math.max(this.progress * 100, 0), 100);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.thumbnail-progress-bar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+
+  height: 4px;
+  background: #2196f3AA;
+
+  z-index: 9;
+}
+
+.theme-black .thumbnail-progress-bar {
+  background: rgba(0, 188, 212, 0.95);
+}
+
+.sub-document .thumbnail-progress-bar {
+  max-width: calc(100% - 8px);
+  left: 4px;
+}
+
+
+</style>