Merge pull request #76 from esmersmith/media-player-improvements

NowPlaying Improvements: seek buttons, play/pause track item syncing, replay button, shortcuts.
tranxuanthang · May 15, 2024 · 001af1b · 001af1b
2 parents 0664193 + 71a045c
commit 001af1b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 7 deletions.
diff --git a/src/components/NowPlaying.vue b/src/components/NowPlaying.vue
@@ -16,8 +16,11 @@
           </div>
         </div>
         <div class="basis-1/3 flex-1 flex justify-center items-center">
-          <button v-if="status !== 'playing'" @click.prevent="resume" class="button button-primary text-white p-2 rounded-full text-xl"><Play /></button>
-          <button v-else @click.prevent="pause" class="button button-primary text-white p-2 rounded-full text-xl"><Pause /></button>
+          <button @click.prevent="seek(reverse10)" class="button button-secondary p-2 m-2 rounded-full text-xl"><Rewind_10 /></button>
+          <button v-if="status === 'playing'" @click.prevent="pause" class="button button-primary text-white p-2 rounded-full text-xl"><Pause /></button>
+          <button v-else-if="playingTrack && status === 'stopped'" @click.prevent="playTrack(playingTrack)" class="button button-primary text-white p-2 rounded-full text-xl"><Replay /></button>
+          <button v-else @click.prevent="resume" class="button button-primary text-white p-2 rounded-full text-xl"><Play /></button>
+          <button @click.prevent="seek(forward10)" class="button button-secondary p-2 m-2 rounded-full text-xl"><FastForward_10 /></button>
         </div>
         <div class="basis-1/3 flex-1">
         </div>
@@ -28,13 +31,15 @@
 
 <script setup>
 import { computed } from '@vue/reactivity'
+import { ref, onMounted, onUnmounted } from 'vue'
 import Seek from './now-playing/Seek.vue'
 import LyricsViewer from './now-playing/LyricsViewer.vue'
 import PlainLyricsViewer from './now-playing/PlainLyricsViewer.vue'
-import { Play, Pause } from 'mdue'
+import { Play, Pause, Replay, Rewind_10, FastForward_10 } from 'mdue'
 import { usePlayer } from '@/composables/player.js'
 
-const { playingTrack, status, duration, progress, pause, resume, seek } = usePlayer()
+const { playingTrack, status, duration, progress, playTrack, pause, resume, seek } = usePlayer()
+const keydownEvent = ref(null)
 
 const lyrics = computed(() => {
   if (!playingTrack.value) {
@@ -52,7 +57,56 @@ const plainLyrics = computed(() => {
   return playingTrack.value.txt_lyrics
 })
 
+const forward10 = computed(() => {
+  if (!playingTrack.value) {
+    return null
+  }
+  return Math.min(duration.value, progress.value + 10)
+})
+
+const reverse10 = computed(() => {
+  if (!playingTrack.value) {
+    return null
+  }
+  return Math.max(0, progress.value - 10)
+})
+
 const humanDuration = (seconds) => {
   return new Date(seconds * 1000).toISOString().slice(11, 19)
 }
+
+
+onUnmounted(async () => {
+  if (keydownEvent.value) {
+    document.removeEventListener(keydownEvent.value)
+  }
+})
+
+onMounted(async () => {
+  keydownEvent.value = document.addEventListener('keydown', (event) => {
+    switch (event.code) {
+      case 'Space':
+      case 'Enter':
+        event.preventDefault()
+        if (status.value==='playing') {
+          pause()
+        } else if (playingTrack.value && status.value==='stopped') {
+          playTrack(playingTrack.value)
+        } else {
+          resume()
+        }
+        break;
+      case 'ArrowLeft':
+        event.preventDefault()
+        seek(reverse10.value)
+        break;
+      case 'ArrowRight':
+        event.preventDefault()
+        seek(forward10.value)
+        break;
+      default:
+        break;
+    }
+  })
+})
 </script>
diff --git a/src/components/library/track-list/TrackItem.vue b/src/components/library/track-list/TrackItem.vue
@@ -37,7 +37,9 @@
     <!-- Action buttons -->
     <div class="flex-none w-[15%] h-full flex justify-end items-center p-1">
       <div v-if="track" class="flex justify-end items-center gap-1">
-        <button class="text-brave-30 hover:bg-brave-30 hover:text-white rounded p-2 transition" @click.prevent="playTrack(track)"><Play /></button>
+        <button v-if="isPlaying && status ==='playing'" @click.prevent="pause" class="text-brave-30 hover:bg-brave-30 hover:text-white rounded p-2 transition"><Pause /></button>
+        <button v-else-if="isPlaying && status === 'stopped'" @click.prevent="playTrack(track)" class="text-brave-30 hover:bg-brave-30 hover:text-white rounded p-2 transition"><Replay /></button>
+        <button v-else v-on="isPlaying ? {click: resume} : {click: () => playTrack(track)}" class="text-brave-30 hover:bg-brave-30 hover:text-white rounded p-2 transition"><Play /></button>
         <button class="text-brave-30 hover:bg-brave-30 hover:text-white rounded p-2 transition" @click.prevent="searchLyrics(track)"><TextSearch /></button>
         <button class="text-brave-30 hover:bg-brave-30 hover:text-white rounded p-2 transition" @click.prevent="editLyrics(track)"><PlaylistEdit /></button>
       </div>
@@ -46,7 +48,7 @@
 </template>
 
 <script setup>
-import { Play, TextSearch, PlaylistEdit } from 'mdue'
+import { Play, Pause, TextSearch, PlaylistEdit, Replay } from 'mdue'
 import { humanDuration } from '../../../utils/human-duration.js'
 import { useSearchLyrics } from '../../../composables/search-lyrics.js'
 import { useEditLyrics } from '../../../composables/edit-lyrics.js'
@@ -56,7 +58,7 @@ import { invoke } from '@tauri-apps/api/tauri'
 import { listen } from '@tauri-apps/api/event'
 import { usePlayer } from '@/composables/player.js'
 
-const { playTrack, playingTrack } = usePlayer()
+const { playTrack, playingTrack, status, pause, resume } = usePlayer()
 
 const { searchLyrics } = useSearchLyrics()
 const { editLyrics } = useEditLyrics()