✨ #157

src/components/ActionThumbnailPreview.vue

@@ -1,35 +1,89 @@
 <template>
   <q-page-sticky
       class="z-top"
-      v-if="mainStore.currentActionThumbnailSrc"
+      v-if="annotationStore.currentThumbnailActionId !== null"
       :offset="offset"
   >
     <div class="relative-position">
       <img
-          class="shadow-1 rounded-borders"
+          class="block shadow-1 rounded-borders"
           :style="{'max-width': imgMaxWidth + 'px'}"
           style="transition: max-width 0.1s;"
-          :src="mainStore.currentActionThumbnailSrc"
+          :src="thumbnailSrc"
           alt="thumbnail"
           draggable="false"
           v-touch-pan.prevent.mouse="handleMove"
           @wheel.prevent="handleResize"
       />
       <q-btn
-          class="absolute-top-right text-black"
+          class="absolute-left text-black"
+          style="bottom: 36px;"
           flat
-          icon="cancel"
-          @click="mainStore.currentActionThumbnailSrc = null"
-      ></q-btn>
+          icon="arrow_back"
+          @click="handlePrevThumbnail"
+      >
+        <q-tooltip>Previous thumbnail preview</q-tooltip>
+      </q-btn>
+      <q-btn
+          class="absolute-right text-black"
+          style="bottom: 36px;"
+          flat
+          icon="arrow_forward"
+          @click="handleNextThumbnail"
+      >
+        <q-tooltip>Next thumbnail preview</q-tooltip>
+      </q-btn>
+      <q-btn-group
+          flat
+          class="absolute-bottom"
+          spread
+      >
+        <q-btn
+            class="text-black"
+            flat
+            icon="gps_fixed"
+            @click="handleLocate"
+        >
+          <q-tooltip>Locate to this action</q-tooltip>
+        </q-btn>
+        <q-btn
+            class="text-black"
+            flat
+            icon="edit_location_alt"
+            @click="handleSet"
+        >
+          <q-tooltip>Set current left / right frame as this action's start / end</q-tooltip>
+        </q-btn>
+        <q-btn
+            class="text-black"
+            flat
+            icon="cancel"
+            @click="annotationStore.currentThumbnailActionId = null"
+        >
+          <q-tooltip>Close thumbnail preview</q-tooltip>
+        </q-btn>
+      </q-btn-group>
     </div>
   </q-page-sticky>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import utils from '~/libs/utils.js'
+import { useAnnotationStore } from '~/store/annotation.js'
+import { useConfigurationStore } from '~/store/configuration.js'
 import { useMainStore } from '~/store/index.js'
 
 const mainStore = useMainStore()
+const annotationStore = useAnnotationStore()
+const configurationStore = useConfigurationStore()
+
+// thumbnail src
+const thumbnailSrc = computed(() => {
+  return configurationStore.actionLabelData.find(label => label.id ===
+      annotationStore.actionAnnotationList[annotationStore.currentThumbnailActionId].action
+  ).thumbnail
+})
 
 // draggable
 const offset = ref([16, 16])
@@ -41,7 +95,44 @@ const handleMove = event => {
 }
 // resizable
 const imgMaxWidth = ref(400)
+const imgMinWidth = 400
 const handleResize = event => {
-  imgMaxWidth.value += event.deltaY / -5
+  const delta = event.deltaY / -5
+  if (imgMaxWidth.value + delta >= imgMinWidth) {
+    imgMaxWidth.value += delta
+  }
+}
+// buttons
+const handlePrevThumbnail = () => {
+  for (let i = annotationStore.currentThumbnailActionId - 1; i >= 0; i--) {
+    if (configurationStore.actionLabelData.find(
+        label => label.id === annotationStore.actionAnnotationList[i].action).thumbnail) {
+      annotationStore.currentThumbnailActionId = i
+      return
+    }
+  }
+}
+const handleNextThumbnail = () => {
+  for (let i = annotationStore.currentThumbnailActionId + 1; i < annotationStore.actionAnnotationList.length; i++) {
+    if (configurationStore.actionLabelData.find(
+        label => label.id === annotationStore.actionAnnotationList[i].action).thumbnail) {
+      annotationStore.currentThumbnailActionId = i
+      return
+    }
+  }
+}
+const handleLocate = () => {
+  const currentAction = annotationStore.actionAnnotationList[annotationStore.currentThumbnailActionId]
+  if (typeof (currentAction.start) === 'number') {
+    annotationStore.leftCurrentFrame = utils.time2index(currentAction.start)
+  }
+  if (typeof (currentAction.end) === 'number') {
+    annotationStore.rightCurrentFrame = utils.time2index(currentAction.end)
+  }
+}
+const handleSet = () => {
+  const currentAction = annotationStore.actionAnnotationList[annotationStore.currentThumbnailActionId]
+  currentAction.start = utils.index2time(annotationStore.leftCurrentFrame)
+  currentAction.end = utils.index2time(annotationStore.rightCurrentFrame)
 }
 </script>

src/pages/annotation/ActionTable.vue

@@ -93,7 +93,7 @@
       </div>
     </template>
     <template v-slot:body="props">
-      <q-tr :class="{ 'bg-warning': props.row.end - props.row.start <= 0}">
+      <q-tr :class="{ 'bg-warning': props.row.end - props.row.start <= 0, 'bg-green-2': props.rowIndex === annotationStore.currentThumbnailActionId}">
         <q-tooltip
             anchor="top middle"
             v-if="props.row.end - props.row.start <= 0"
@@ -130,7 +130,7 @@
               class="cursor-pointer rounded-borders vertical-middle float-left q-mr-md"
               style="height: 40px;"
               :src="configurationStore.actionLabelData.find(label => label.id === props.row.action).thumbnail"
-              @click="handleThumbnailPreview(configurationStore.actionLabelData.find(label => label.id === props.row.action).thumbnail)"
+              @click="handleThumbnailPreview(props)"
               alt="thumbnail"
           />
           <q-select
@@ -319,6 +319,7 @@ const handleAddAdvance = () => {
 const handleClearAll = () => {
   if (annotationStore.actionAnnotationList.length !== 0) {
     utils.confirm('Are you sure to delete ALL actions?').onOk(() => {
+      annotationStore.currentThumbnailActionId = null
       annotationStore.actionAnnotationList = []
     })
   } else {
@@ -367,8 +368,10 @@ for (let action of configurationStore.actionLabelData) {
   }
   objectOptionMap.value[action.id] = objectOptionList
 }
-const handleThumbnailPreview = (src) => {
-  mainStore.currentActionThumbnailSrc = mainStore.currentActionThumbnailSrc === src ? null : src
+const handleThumbnailPreview = props => {
+  const { row: { action }, rowIndex } = props
+  if (configurationStore.actionLabelData.find(label => label.id === action).thumbnail)
+    annotationStore.currentThumbnailActionId = annotationStore.currentThumbnailActionId === rowIndex ? null : rowIndex
 }
 const handleActionInput = (row) => {
   row.color = configurationStore.actionLabelData.find(label => label.id === row.action).color
@@ -390,6 +393,7 @@ const handleSet = (row) => {
 }
 const handleDelete = (row) => {
   utils.confirm('Are you sure to delete this action?').onOk(() => {
+    annotationStore.currentThumbnailActionId = null
     for (let i in annotationStore.actionAnnotationList) {
       if (annotationStore.actionAnnotationList[i] === row) {
         annotationStore.actionAnnotationList.splice(i, 1)

src/pages/configuration/components/TableBase.vue

@@ -68,11 +68,10 @@
           <q-td v-if="col.type === 'input'">
             <img
                 v-if="props.row.thumbnail"
-                class="vertical-middle float-left cursor-pointer rounded-borders float-left q-mr-md"
+                class="vertical-middle float-left rounded-borders float-left q-mr-md"
                 style="height: 40px;"
                 :src="props.row.thumbnail"
                 alt="thumbnail"
-                @click="handleThumbnailPreview(props.row.thumbnail)"
             />
             <q-input
                 input-class="text-center"
@@ -167,9 +166,7 @@ defineEmits(['add', 'delete'])
 const configurationStore = useConfigurationStore()
 const mainStore = useMainStore()
 const { [props.storeKey]: tableData } = storeToRefs(configurationStore)
-const handleThumbnailPreview = (src) => {
-  mainStore.currentActionThumbnailSrc = mainStore.currentActionThumbnailSrc === src ? null : src
-}
+// TODO: adapt ActionThumbnailPreview
 
 // Edit
 const showEdit = ref(false)

src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { useMainStore } from '~/store/index.js'
+import { useAnnotationStore } from '~/store/annotation.js'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -38,7 +38,7 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from) => {
-  useMainStore().currentActionThumbnailSrc = null
+  useAnnotationStore().currentThumbnailActionId = null
   if (to.path === from.path || Object.keys(to.query).length || !Object.keys(from.query).length) return true
   return { ...to, query: from.query }
 })

src/store/annotation.js

@@ -36,7 +36,9 @@ const DEFAULT_ANNOTATION = {
   copyMode: false,
   addPointMode: false,
   delPointMode: false,
-  indicatingMode: false
+  indicatingMode: false,
+
+  currentThumbnailActionId: null,
 }
 
 export const useAnnotationStore = defineStore('annotation', () => {

src/store/index.js

@@ -8,7 +8,6 @@ export const useMainStore = defineStore('main', {
     zoom: false,
     submitURL: null,
     isSaved: true,
-    videoFormat: null,
-    currentActionThumbnailSrc: null
+    videoFormat: null
   })
 })