✨ close #165

anucvml · Jun 8, 2022 · 819698f · 819698f
1 parent f622721
commit 819698f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/src/pages/annotation/ControlPanel.vue b/src/pages/annotation/ControlPanel.vue
@@ -156,24 +156,35 @@
           <q-toggle
               v-model="preferenceStore.muted"
               label="Muted"
-          ></q-toggle>
+          />
           <q-toggle
               v-model="preferenceStore.grayscale"
               label="Grayscale"
-          ></q-toggle>
+          />
           <q-toggle
               v-if="!$q.platform.has.touch && annotationStore.mode !== 'action'"
               v-model="preferenceStore.showPopup"
               label="Show Popup"
-          ></q-toggle>
+          />
+          <q-select
+              class="q-my-md"
+              label="Playback Rate"
+              outlined
+              dense
+              options-dense
+              emit-value
+              map-options
+              v-model="annotationStore.videoPlaybackRate"
+              :options="videoPlaybackRateOptions"
+          />
         </q-item-section>
       </q-item>
     </div>
   </q-list>
 </template>
 
 <script setup>
-import { computed, watch } from 'vue'
+import { computed, watch, ref } from 'vue'
 import { ObjectAnnotation, RegionAnnotation, SkeletonAnnotation } from '~/libs/annotationlib.js'
 import utils from '~/libs/utils.js'
 import { useAnnotationStore } from '~/store/annotation.js'
@@ -494,4 +505,32 @@ const handleBulkClear = () => {
         utils.notify('Bulk clear successful!', 'positive')
       })
 }
+
+// options
+const videoPlaybackRateOptions = [
+  {
+    label: '0.5x',
+    value: 0.5
+  },
+  {
+    label: '0.75x',
+    value: 0.75
+  },
+  {
+    label: '1.0x',
+    value: 1.0
+  },
+  {
+    label: '1.25x',
+    value: 1.25
+  },
+  {
+    label: '1.5x',
+    value: 1.5
+  },
+  {
+    label: '2.0x',
+    value: 2.0
+  }
+]
 </script>
diff --git a/src/pages/annotation/KeyframePanel.vue b/src/pages/annotation/KeyframePanel.vue
@@ -100,14 +100,16 @@ let lastLeftCurrentFrame
 const play = () => {
   const videoPlayer = document.getElementById('video-player')
   isPaused.value = false
+  videoPlayer.playbackRate = annotationStore.videoPlaybackRate
   videoPlayer.play()
-  const duration = (utils.index2time(annotationStore.rightCurrentFrame) - videoPlayer.currentTime) * 1000
+  const duration = (utils.index2time(annotationStore.rightCurrentFrame) - videoPlayer.currentTime) * 1000 /
+      videoPlayer.playbackRate
   videoPlayTimeout = setTimeout(() => {
     handleStop()
   }, duration)
   videoPlayInterval = setInterval(() => {
     moveLeftFrame(1)
-  }, 1000 / annotationStore.video.fps)
+  }, 1000 / annotationStore.video.fps / videoPlayer.playbackRate)
 }
 const pause = () => {
   clearTimeout(videoPlayTimeout)

diff --git a/src/store/annotation.js b/src/store/annotation.js
@@ -40,6 +40,7 @@ const DEFAULT_ANNOTATION = {
 
   currentSortedActionList: [],
   currentThumbnailAction: null,
+  videoPlaybackRate: 1
 }
 
 export const useAnnotationStore = defineStore('annotation', () => {