Merge remote-tracking branch 'origin/feature/player-ui'

Ircam-WAM · Jul 11, 2022 · a57fc8d · a57fc8d
2 parents 2acdbe0 + 5d4cc21
commit a57fc8d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/src/components/PlayerControls.vue b/src/components/PlayerControls.vue
@@ -13,6 +13,7 @@
         </span>
       </p>
     </div>
+    <Icon icon="fad:loop" class="player-icon player-loop-icon" :class="{ 'player-loop-on': isLooping }" @click="toggleLoop" />
     <Icon icon="el:volume-up" class="player-icon volume-icon" @click="isVolumeSliderOpen = !isVolumeSliderOpen" />
     <Icon icon="fad:caret-down" class="icon-caret icon-caret-down" :class="{ 'show': !isPlayerMenuOpen }" @click="isPlayerMenuOpen = !isPlayerMenuOpen" />
     <Icon icon="fad:caret-up" class="icon-caret icon-caret-up" :class="{ 'show': isPlayerMenuOpen }" @click="isPlayerMenuOpen = !isPlayerMenuOpen" />
@@ -90,6 +91,7 @@ export default defineComponent({
     const isVolumeSliderOpen = ref(false)
     const isPlayerMenuOpen = ref(false)
     const isFirstPlay = ref(true)
+    const isLooping = ref(false)
 
     const currentTime = ref('00:00')
     const totalTime = ref('/ 00:00')
@@ -153,6 +155,13 @@ export default defineComponent({
       return minutes + ':' + seconds
     }
 
+    function toggleLoop () {
+      if (audioElement) {
+        isLooping.value = !isLooping.value
+        audioElement.loop = !audioElement.loop
+      }
+    }
+
     function toggleVolume () {
       isVolumeOn.value = !isVolumeOn.value
 
@@ -193,13 +202,15 @@ export default defineComponent({
       isVolumeSliderOpen,
       isPlayerMenuOpen,
       isFirstPlay,
+      isLooping,
 
       currentTime,
       totalTime,
 
       handlePlayPause,
       handlePlayEnd,
 
+      toggleLoop,
       toggleVolume,
       toggleVolumeSlider,
       setVolume,
@@ -251,6 +262,13 @@ export default defineComponent({
   }
 }
 
+.player-loop-on {
+  background-color: #2c3e50;
+  color: #dcdcdc;
+  stroke: #dcdcdc;
+  stroke-width: 10px;
+}
+
 #player-timecode {
   display: flex;
   flex-direction: row;

diff --git a/src/store/annotation-track.ts b/src/store/annotation-track.ts
@@ -3,7 +3,9 @@ import {
   onMounted,
   watch,
   ComputedRef,
-  reactive
+  reactive,
+  InjectionKey,
+  inject
 } from 'vue'
 import { useApi, AnnotationTrack } from '@/utils/api'
 
@@ -57,3 +59,13 @@ export default function (itemUuid: ComputedRef<string>): AnnotationTrackStore {
     remove
   })
 }
+
+export const annotationTrackStoreKey: InjectionKey<AnnotationTrackStore> = Symbol('annotation-track-store')
+
+export function useAnnotationTrackStore (): AnnotationTrackStore {
+  const resolved = inject(annotationTrackStoreKey)
+  if (resolved === undefined) {
+    throw new Error('store not found')
+  }
+  return resolved
+}