From 5d4cc21b23ff77a16778f5d2453140ac3db06de1 Mon Sep 17 00:00:00 2001
From: gllmp <guillaume.piccarreta@gmail.com>
Date: Fri, 8 Jul 2022 17:04:09 +0200
Subject: [PATCH] add loop mode to player controls #149

---
 src/components/PlayerControls.vue | 18 ++++++++++++++++++
 src/store/annotation-track.ts     | 14 +++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/PlayerControls.vue b/src/components/PlayerControls.vue
index 0b1b0df..bd1532e 100644
--- 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,6 +202,7 @@ export default defineComponent({
       isVolumeSliderOpen,
       isPlayerMenuOpen,
       isFirstPlay,
+      isLooping,
 
       currentTime,
       totalTime,
@@ -200,6 +210,7 @@ export default defineComponent({
       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
index f69178a..0d86016 100644
--- 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
+}