Add replay action and played state to audio track

src/components/AudioTrack/AudioController.vue

@@ -61,7 +61,7 @@ export default {
     status: {
       type: String,
       required: true,
-      validator: (val) => ['playing', 'paused'].includes(val),
+      validator: (val) => ['playing', 'paused', 'played'].includes(val),
     },
     /**
      * the CSS classes to apply on the waveform; This can take any form
@@ -84,9 +84,14 @@ export default {
     // Sync status from parent to player and store
     watch(
       () => props.status,
-      (status) => {
+      (status, prevStatus) => {
         if (!audioEl.value) return
 
+        if (prevStatus === 'played' && status === 'playing') {
+          // If going from played to playing, then reset the time to the beginning. Let the regular logic handle actually triggering the playing of the audio
+          audioEl.value.currentTime = 0
+        }
+
         switch (status) {
           case 'playing':
             audioEl.value.play()
@@ -146,6 +151,10 @@ export default {
 
       currentTime.value = audioEl.value.currentTime
       duration.value = audioEl.value.duration
+
+      if (currentTime.value >= duration.value) {
+        emit('finished')
+      }
     }
     const updateTimeLoop = () => {
       updateTime()
@@ -169,6 +178,7 @@ export default {
       if (audioEl.value && duration.value) {
         audioEl.value.currentTime = duration.value * frac
         updateTime()
+        emit('seeked')
       }
     }
 

src/components/AudioTrack/AudioTrack.vue

@@ -16,6 +16,8 @@
           v-bind="controllerProps"
           :audio="audio"
           @ready="handleReady"
+          @finished="status = 'played'"
+          @seeked="handleSeeked"
         />
       </template>
 
@@ -87,6 +89,12 @@ export default {
 
     const status = ref('paused')
 
+    const handleSeeked = () => {
+      if (status.value === 'played') {
+        status.value = 'paused'
+      }
+    }
+
     /* Metadata readiness */
 
     const isReady = ref(false)
@@ -104,6 +112,7 @@ export default {
 
     return {
       status,
+      handleSeeked,
 
       isReady,
       handleReady,

src/components/AudioTrack/PlayPause.vue

@@ -12,15 +12,35 @@
       aria-hidden="true"
       focusable="false"
     >
-      <use v-if="isPlaying" :href="`${icons.pause}#icon`" />
-      <use v-else :href="`${icons.play}#icon`" />
+      <use :href="`${icon}#icon`" />
     </svg>
   </button>
 </template>
 
 <script>
 import playIcon from '~/assets/icons/play.svg'
 import pauseIcon from '~/assets/icons/pause.svg'
+import replayIcon from '~/assets/icons/replay.svg'
+
+/**
+ * @param {'playing' | 'paused' | 'played'} status
+ */
+const getLabelFromStatus = (status) => {
+  switch (status) {
+    case 'playing':
+      return 'play-pause.pause'
+    case 'paused':
+      return 'play-pause.play'
+    case 'played':
+      return 'play-pause.replay'
+  }
+}
+
+const STATUS_TO_ICON = {
+  playing: pauseIcon,
+  paused: playIcon,
+  played: replayIcon,
+}
 
 /**
  * Displays the control for switching between the playing and paused states of
@@ -38,21 +58,18 @@ export default {
      */
     status: {
       type: String,
-      validator: (val) => ['playing', 'paused'].includes(val),
+      validator: (val) => ['playing', 'paused', 'played'].includes(val),
     },
   },
-  data: () => ({
-    icons: {
-      play: playIcon,
-      pause: pauseIcon,
-    },
-  }),
   computed: {
     isPlaying() {
       return this.status === 'playing'
     },
     label() {
-      return this.$t(this.isPlaying ? 'play-pause.pause' : 'play-pause.play')
+      return this.$t(getLabelFromStatus(this.status))
+    },
+    icon() {
+      return STATUS_TO_ICON[this.status]
     },
   },
   methods: {