✨ close #185

src/hooks/frameIndicator.js

@@ -1,5 +1,6 @@
 import { useQuasar } from 'quasar'
 import { computed } from 'vue'
+
 import utils from '~/libs/utils.js'
 import { useAnnotationStore } from '~/store/annotation.js'
 import { usePreferenceStore } from '~/store/preference.js'
@@ -104,23 +105,6 @@ export const frameIndicator = () => {
       }
     }
 
-    if (preferenceStore.actions) {
-      const frameList = []
-      const colorList = []
-      for (let i = 0; i < annotationStore.actionAnnotationList.length; i++) {
-        const action = annotationStore.actionAnnotationList[i]
-        const startFrame = utils.time2index(action.start)
-        const endFrame = utils.time2index(action.end)
-        frameList.push([startFrame, endFrame - startFrame + 1])
-        colorList.push(`linear-gradient(${action.color}, ${action.color})`)
-      }
-      if (ALWAYS_SHOW || frameList.length) {
-        positionHeightOffset += HEIGHT_UNIT
-        getBackgroundStyleList(positionHeightOffset)
-        getStyleList(frameList, colorList, positionHeightOffset)
-      }
-    }
-
     return {
       '--marker-height': `${32 + positionHeightOffset}px`,
       '--marker-bg-image': bgImageList.join(','),

src/pages/annotation/KeyframePanel.vue

@@ -88,6 +88,10 @@
         @update:model-value="handleInput"
         :disable="!annotationStore.video.frames"
       />
+      <ActionIndicator
+        v-if="preferenceStore.actions"
+        style="margin-top: -10px"
+      />
     </div>
     <q-btn-group flat>
       <q-btn
@@ -121,12 +125,16 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+
 import { frameIndicator } from '~/hooks/frameIndicator.js'
 import utils from '~/libs/utils.js'
+import ActionIndicator from '~/pages/annotation/components/ActionIndicator.vue'
 import KeyframeTable from '~/pages/annotation/components/KeyframeTable.vue'
 import { useAnnotationStore } from '~/store/annotation.js'
+import { usePreferenceStore } from '~/store/preference.js'
 
 const annotationStore = useAnnotationStore()
+const preferenceStore = usePreferenceStore()
 
 // left buttons
 const isPaused = ref(true)
@@ -148,9 +156,12 @@ const play = () => {
   videoPlayTimeout = setTimeout(() => {
     handleStop()
   }, duration)
-  videoPlayInterval = setInterval(() => {
-    moveLeftFrame(1)
-  }, 1000 / annotationStore.video.fps / videoPlayer.playbackRate)
+  videoPlayInterval = setInterval(
+    () => {
+      moveLeftFrame(1)
+    },
+    1000 / annotationStore.video.fps / videoPlayer.playbackRate
+  )
 }
 const pause = () => {
   clearTimeout(videoPlayTimeout)

src/pages/annotation/components/ActionIndicator.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="action-indicator"
+    :style="{ 'background-color': q.dark.isActive ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)' }"
+  >
+    <div
+      :title="`Action: ${action.action}\nStart: ${action.start}\nEnd: ${action.end}\nDuration: ${
+        action.end - action.start
+      }\nDescription: ${action.description}`"
+      class="action"
+      v-for="(action, index) in actionIndicatorList"
+      :style="{
+        left: action.leftPercent,
+        right: action.rightPercent,
+        'background-color': action.color
+      }"
+      @click="handleClick(index)"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { useQuasar } from 'quasar'
+import { computed } from 'vue'
+
+import utils from '~/libs/utils.js'
+import { useAnnotationStore } from '~/store/annotation.js'
+import { useConfigurationStore } from '~/store/configuration.js'
+
+const annotationStore = useAnnotationStore()
+const configurationStore = useConfigurationStore()
+const q = useQuasar()
+
+const actionIndicatorList = computed(() => {
+  if (!annotationStore.video.frames) {
+    return []
+  }
+  return annotationStore.actionAnnotationList.map((action) => {
+    const markerWidthUnit = 100 / (annotationStore.video.frames - 1)
+    const leftFrame = utils.time2index(action.start)
+    const rightFrame = utils.time2index(action.end)
+    const leftPercent = (leftFrame - 0.5) * markerWidthUnit + '%'
+    const rightPercent = (annotationStore.video.frames - rightFrame - 1.5) * markerWidthUnit + '%'
+    return {
+      ...action,
+      leftPercent,
+      rightPercent
+    }
+  })
+})
+
+const handleClick = (index) => {
+  const action = annotationStore.actionAnnotationList[index]
+  annotationStore.leftCurrentFrame = utils.time2index(action.start)
+  annotationStore.rightCurrentFrame = utils.time2index(action.end)
+  if (configurationStore.actionLabelData.find((label) => label.id === action.action).thumbnail) {
+    annotationStore.currentThumbnailAction = annotationStore.currentThumbnailAction === action ? null : action
+  } else {
+    annotationStore.currentThumbnailAction = null
+  }
+}
+</script>
+
+<style>
+.action-indicator {
+  position: relative;
+  height: 8px;
+}
+
+.action-indicator .action {
+  position: absolute;
+  height: 100%;
+  background-blend-mode: multiply;
+  cursor: pointer;
+}
+
+.action-indicator .action:hover {
+  transform: scaleY(1.5);
+  transition: transform 0.2s ease-in-out;
+}
+</style>