Update share page to show player ui

client/components/player/PlayerUi.vue

@@ -8,7 +8,7 @@
           <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
         </ui-tooltip>
 
-        <ui-tooltip direction="top" :text="$strings.LabelSleepTimer">
+        <ui-tooltip v-if="!hideSleepTimer" direction="top" :text="$strings.LabelSleepTimer">
           <button :aria-label="$strings.LabelSleepTimer" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
             <span v-if="!sleepTimerSet" class="material-icons text-2xl">snooze</span>
             <div v-else class="flex items-center">
@@ -18,7 +18,7 @@
           </button>
         </ui-tooltip>
 
-        <ui-tooltip v-if="!isPodcast" direction="top" :text="$strings.LabelViewBookmarks">
+        <ui-tooltip v-if="!isPodcast && !hideBookmarks" direction="top" :text="$strings.LabelViewBookmarks">
           <button :aria-label="$strings.LabelViewBookmarks" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
             <span class="material-icons text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
           </button>
@@ -78,7 +78,9 @@ export default {
     },
     sleepTimerSet: Boolean,
     sleepTimerRemaining: Number,
-    isPodcast: Boolean
+    isPodcast: Boolean,
+    hideBookmarks: Boolean,
+    hideSleepTimer: Boolean
   },
   data() {
     return {
@@ -368,4 +370,4 @@ export default {
     left: 100%;
   }
 }
-</style>
+</style>

client/pages/share/_slug.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="page-wrapper" class="w-full h-screen overflow-y-auto">
     <div class="w-full h-full flex items-center justify-center">
-      <div>
+      <div class="w-full p-8">
         <p class="text-3xl font-semibold text-center mb-6">{{ mediaItemShare.playbackSession?.displayTitle || 'N/A' }}</p>
 
-        <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-4 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-auto" :class="!hasLoaded ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
-          <span class="material-icons text-5xl">{{ !hasLoaded ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
-        </button>
+        <div class="w-full py-8">
+          <player-ui ref="audioPlayer" :chapters="chapters" :paused="isPaused" :loading="!hasLoaded" :is-podcast="false" hide-bookmarks hide-sleep-timer @playPause="playPause" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setVolume="setVolume" @setPlaybackRate="setPlaybackRate" @seek="seek" />
+        </div>
       </div>
     </div>
   </div>
@@ -34,7 +34,9 @@ export default {
     return {
       localAudioPlayer: new LocalAudioPlayer(),
       playerState: null,
-      hasLoaded: false
+      playInterval: null,
+      hasLoaded: false,
+      totalDuration: 0
     }
   },
   computed: {
@@ -47,27 +49,130 @@ export default {
         return track
       })
     },
-    paused() {
-      return this.playerState !== 'PLAYING'
+    isPlaying() {
+      return this.playerState === 'PLAYING'
+    },
+    isPaused() {
+      return !this.isPlaying
+    },
+    chapters() {
+      return this.mediaItemShare.playbackSession?.chapters || []
     }
   },
   methods: {
     playPause() {
-      if (!this.localAudioPlayer || this.mediaLoading) return
+      if (!this.localAudioPlayer || !this.hasLoaded) return
       this.localAudioPlayer.playPause()
     },
+    jumpForward() {
+      if (!this.localAudioPlayer || !this.hasLoaded) return
+      const currentTime = this.localAudioPlayer.getCurrentTime()
+      const duration = this.localAudioPlayer.getDuration()
+      this.seek(Math.min(currentTime + 10, duration))
+    },
+    jumpBackward() {
+      if (!this.localAudioPlayer || !this.hasLoaded) return
+      const currentTime = this.localAudioPlayer.getCurrentTime()
+      this.seek(Math.max(currentTime - 10, 0))
+    },
+    setVolume(volume) {
+      if (!this.localAudioPlayer || !this.hasLoaded) return
+      this.localAudioPlayer.setVolume(volume)
+    },
+    setPlaybackRate(playbackRate) {
+      if (!this.localAudioPlayer || !this.hasLoaded) return
+      this.localAudioPlayer.setPlaybackRate(playbackRate)
+    },
+    seek(time) {
+      if (!this.localAudioPlayer || !this.hasLoaded) return
+
+      this.localAudioPlayer.seek(time, this.isPlaying)
+      this.setCurrentTime(time)
+    },
+    setCurrentTime(time) {
+      if (!this.$refs.audioPlayer) return
+
+      // Update UI
+      this.$refs.audioPlayer.setCurrentTime(time)
+    },
+    setDuration() {
+      if (!this.localAudioPlayer) return
+      this.totalDuration = this.localAudioPlayer.getDuration()
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setDuration(this.totalDuration)
+      }
+    },
+    startPlayInterval() {
+      clearInterval(this.playInterval)
+      this.playInterval = setInterval(() => {
+        if (this.localAudioPlayer) {
+          this.setCurrentTime(this.localAudioPlayer.getCurrentTime())
+        }
+      }, 1000)
+    },
+    stopPlayInterval() {
+      clearInterval(this.playInterval)
+      this.playInterval = null
+    },
     playerStateChange(state) {
       console.log('Player state change', state)
       this.playerState = state
+      if (state === 'LOADED' || state === 'PLAYING') {
+        this.setDuration()
+      }
       if (state === 'LOADED') {
         this.hasLoaded = true
       }
+      if (state === 'PLAYING') {
+        this.startPlayInterval()
+      } else {
+        this.stopPlayInterval()
+      }
+    },
+    playerTimeUpdate(time) {
+      this.setCurrentTime(time)
+    },
+    getHotkeyName(e) {
+      var keyCode = e.keyCode || e.which
+      if (!this.$keynames[keyCode]) {
+        // Unused hotkey
+        return null
+      }
+
+      var keyName = this.$keynames[keyCode]
+      var name = keyName
+      if (e.shiftKey) name = 'Shift-' + keyName
+      if (process.env.NODE_ENV !== 'production') {
+        console.log('Hotkey command', name)
+      }
+      return name
+    },
+    keyDown(e) {
+      if (!this.localAudioPlayer || !this.hasLoaded) return
+
+      var name = this.getHotkeyName(e)
+      if (!name) return
+
+      // Playing audiobook
+      if (Object.values(this.$hotkeys.AudioPlayer).includes(name)) {
+        this.$eventBus.$emit('player-hotkey', name)
+        e.preventDefault()
+      }
     }
   },
   mounted() {
+    window.addEventListener('keydown', this.keyDown)
+
     console.log('Loaded media item share', this.mediaItemShare)
     this.localAudioPlayer.set(null, this.audioTracks, false, 0, false)
     this.localAudioPlayer.on('stateChange', this.playerStateChange.bind(this))
+    this.localAudioPlayer.on('timeupdate', this.playerTimeUpdate.bind(this))
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.keyDown)
+
+    this.localAudioPlayer.off('stateChange', this.playerStateChange)
+    this.localAudioPlayer.destroy()
   }
 }
 </script>