✨ video player

src/components/ZoomImage.vue

@@ -9,7 +9,7 @@
       <q-card>
         <img
             class="cursor-pointer"
-            style="max-width: 300px"
+            style="max-width: 400px"
             :src="src"
             alt="thumbnail"
             @click="showPopup = false"

src/pages/annotation/CanvasPanel.vue

@@ -8,6 +8,7 @@
         :width="CANVAS_WIDTH"
         :height="canvasHeight"
     />
+    <VideoPlayer v-if="position === 'left'" class="absolute-top"/>
     <canvas
         ref="canvas"
         style="inset: 0;"
@@ -133,6 +134,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { ObjectAnnotation, RegionAnnotation, SkeletonAnnotation } from '~/libs/annotationlib.js'
 import utils from '~/libs/utils.js'
 import FilmStrip from '~/pages/annotation/components/FilmStrip.vue'
+import VideoPlayer from '~/pages/annotation/components/VideoPlayer.vue'
 import ObjectTable from '~/pages/annotation/ObjectTable.vue'
 import RegionTable from '~/pages/annotation/RegionTable.vue'
 import SkeletonTable from '~/pages/annotation/SkeletonTable.vue'

src/pages/annotation/KeyframePanel.vue

@@ -9,7 +9,7 @@
           :icon="isPaused ? 'play_arrow' : 'pause'"
           @click="handlePlayPause"
       >
-        <q-tooltip>{{ isPaused ? 'pause (p)' : 'play (p)' }}</q-tooltip>
+        <q-tooltip>{{ isPaused ? 'play (p)' : 'pause (p)' }}</q-tooltip>
       </q-btn>
       <q-btn
           outline
@@ -95,13 +95,55 @@ const q = useQuasar()
 const isPaused = ref(true)
 const showVideoPlayer = ref(false)
 const showEdit = ref(false)
+let videoPlayTimeout
+let videoPlayInterval
+let lastLeftCurrentFrame
 
+const play = () => {
+  const videoPlayer = document.getElementById('video-player')
+  isPaused.value = false
+  videoPlayer.play()
+  const duration = (utils.index2time(annotationStore.rightCurrentFrame) - videoPlayer.currentTime) * 1000
+  videoPlayTimeout = setTimeout(() => {
+    handleStop()
+  }, duration)
+  videoPlayInterval = setInterval(() => {
+    moveLeftFrame(1)
+  }, 1000 / annotationStore.video.fps)
+}
+const pause = () => {
+  clearTimeout(videoPlayTimeout)
+  clearInterval(videoPlayInterval)
+  isPaused.value = true
+  const videoPlayer = document.getElementById('video-player')
+  videoPlayer.pause()
+}
 const handlePlayPause = () => {
-  // TODO
+  const videoPlayer = document.getElementById('video-player')
+  if (!showVideoPlayer.value) {
+    showVideoPlayer.value = true
+    lastLeftCurrentFrame = annotationStore.leftCurrentFrame
+    videoPlayer.style.display = 'block'
+    videoPlayer.currentTime = utils.index2time(annotationStore.leftCurrentFrame)
+    play()
+  } else {
+    if (isPaused.value) {
+      play()
+    } else {
+      pause()
+    }
+  }
 }
-
 const handleStop = () => {
-  // TODO
+  const videoPlayer = document.getElementById('video-player')
+  videoPlayer.style.display = 'none'
+  videoPlayer.pause()
+  videoPlayer.currentTime = utils.index2time(lastLeftCurrentFrame)
+  showVideoPlayer.value = false
+  isPaused.value = true
+  clearTimeout(videoPlayTimeout)
+  clearInterval(videoPlayInterval)
+  annotationStore.leftCurrentFrame = lastLeftCurrentFrame
 }
 
 // right buttons

src/pages/annotation/components/VideoPlayer.vue

@@ -1,7 +1,18 @@
 <template>
-  VideoPlayer
+  <video
+      id="video-player"
+      :class="['full-width', {'grayscale': preferenceStore.grayscale}]"
+      style="display: none;"
+      preload="auto"
+      :src="annotationStore.video.src"
+      :muted="preferenceStore.muted"
+  />
 </template>
 
 <script setup>
+import { useAnnotationStore } from '~/store/annotation.js'
+import { usePreferenceStore } from '~/store/preference.js'
 
+const annotationStore = useAnnotationStore()
+const preferenceStore = usePreferenceStore()
 </script>