Add thumbnail-count option

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()
+      }
     },
   }
 }