From cec34d49fa14ec27876435f543a13f68f931713e Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Sun, 3 Jul 2022 18:12:09 +0000
Subject: [PATCH] Rewrite player component to script setup

---
 front/package.json                            |    1 +
 front/src/App.vue                             |   56 +-
 front/src/components/audio/Player.vue         | 1009 +++++++----------
 front/src/composables/audio/useSoundCache.ts  |   36 +
 .../src/composables/audio/useTrackSources.ts  |   51 +
 front/src/composables/usePlayer.ts            |   46 +-
 front/src/composables/useQueue.ts             |   21 +-
 front/src/init/howler.ts                      |   17 +
 front/src/init/mediaSession.ts                |   45 +
 front/src/init/webSocket.ts                   |   53 +-
 front/src/shims-vuex.d.ts                     |    3 +-
 front/src/store/ui.ts                         |    2 +-
 front/src/types.ts                            |   10 +-
 front/src/utils/index.ts                      |    3 +-
 front/yarn.lock                               |    5 +
 15 files changed, 678 insertions(+), 680 deletions(-)
 create mode 100644 front/src/composables/audio/useSoundCache.ts
 create mode 100644 front/src/composables/audio/useTrackSources.ts
 create mode 100644 front/src/init/howler.ts
 create mode 100644 front/src/init/mediaSession.ts

diff --git a/front/package.json b/front/package.json
index d0652084a..1f824f62b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@types/dompurify": "^2.3.3",
+    "@types/howler": "^2.2.7",
     "@types/jest": "28.1.3",
     "@types/jquery": "3.5.14",
     "@types/lodash-es": "4.17.6",
diff --git a/front/src/App.vue b/front/src/App.vue
index f1e82687d..056f69a1a 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -12,22 +12,15 @@ import ReportModal from '~/components/moderation/ReportModal.vue'
 import { useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
 
 import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
-import {
-  ListenWSEvent,
-  PendingReviewEditsWSEvent,
-  PendingReviewReportsWSEvent,
-  PendingReviewRequestsWSEvent,
-  Track
-} from '~/types'
-import useWebSocketHandler from '~/composables/useWebSocketHandler'
-import { CLIENT_RADIOS } from '~/utils/clientRadios'
+import { Track } from '~/types'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
+import useQueue from '~/composables/useQueue'
 import { useStore } from '~/store'
 
 const store = useStore()
 
 // Tracks
-const currentTrack = computed(() => store.getters['queue/currentTrack'])
+const { currentTrack } = useQueue()
 const getTrackInformationText = (track: Track | undefined) => {
   if (!track) {
     return null
@@ -60,49 +53,6 @@ onMounted(async () => {
   document.getElementById('fake-content')?.classList.add('loaded')
 })
 
-// WebSocket handlers
-useWebSocketHandler('inbox.item_added', () => {
-  store.commit('ui/incrementNotifications', { type: 'inbox', count: 1 })
-})
-
-useWebSocketHandler('mutation.created', (event) => {
-  store.commit('ui/incrementNotifications', {
-    type: 'pendingReviewEdits',
-    value: (event as PendingReviewEditsWSEvent).pending_review_count
-  })
-})
-
-useWebSocketHandler('mutation.updated', (event) => {
-  store.commit('ui/incrementNotifications', {
-    type: 'pendingReviewEdits',
-    value: (event as PendingReviewEditsWSEvent).pending_review_count
-  })
-})
-
-useWebSocketHandler('report.created', (event) => {
-  store.commit('ui/incrementNotifications', {
-    type: 'pendingReviewReports',
-    value: (event as PendingReviewReportsWSEvent).unresolved_count
-  })
-})
-
-useWebSocketHandler('user_request.created', (event) => {
-  store.commit('ui/incrementNotifications', {
-    type: 'pendingReviewRequests',
-    value: (event as PendingReviewRequestsWSEvent).pending_count
-  })
-})
-
-useWebSocketHandler('Listen', (event) => {
-  if (store.state.radios.current && store.state.radios.running) {
-    const current = store.state.radios.current
-
-    if (current?.clientOnly) {
-      CLIENT_RADIOS[current.type].handleListen(current, event as ListenWSEvent, store)
-    }
-  }
-})
-
 // Time ago
 // TODO (wvffle): Migrate to useTimeAgo
 useIntervalFn(() => {
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 047d5b72a..6b58d79ca 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -1,3 +1,393 @@
+<script setup lang="ts">
+// TODO (wvffle): Move most of this stufff to usePlayer
+import { Track } from '~/types'
+import { useStore } from '~/store'
+import { Howl, Howler } from 'howler'
+import axios from 'axios'
+import VolumeControl from './VolumeControl.vue'
+import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
+import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
+import { ref, computed, watch, onMounted, onBeforeUnmount, watchEffect } from 'vue'
+import { useTimeoutFn, useIntervalFn } from '@vueuse/core'
+import { useGettext } from 'vue3-gettext'
+import useQueue from '~/composables/useQueue'
+import usePlayer from '~/composables/usePlayer'
+import useTrackSources, { TrackSource } from '~/composables/audio/useTrackSources'
+import useSoundCache from '~/composables/audio/useSoundCache'
+
+const store = useStore()
+const { $pgettext } = useGettext()
+
+const toggleMobilePlayer = () => {
+  store.commit('ui/queueFocused', ['queue', 'player'].includes(store.state.ui.queueFocused as string) ? null : 'player')
+}
+
+const {
+  isShuffling,
+  shuffle,
+  previous,
+  isEmpty: queueIsEmpty,
+  hasNext,
+  hasPrevious,
+  currentTrack,
+  currentIndex,
+  tracks,
+  next
+} = useQueue()
+
+const {
+  playing,
+  loading: isLoadingAudio,
+  looping,
+  duration,
+  progress,
+  durationFormatted,
+  currentTimeFormatted,
+  bufferProgress,
+  currentTime,
+  seek,
+  togglePlayback,
+  resume,
+  pause
+} = usePlayer()
+
+// Key binds
+onKeyboardShortcut('e', toggleMobilePlayer)
+onKeyboardShortcut('p', togglePlayback)
+onKeyboardShortcut('s', shuffle)
+onKeyboardShortcut('q', () => store.dispatch('queue/clean'))
+onKeyboardShortcut('m', () => store.dispatch('player/toggleMute'))
+onKeyboardShortcut('l', () => store.commit('player/toggleLooping'))
+onKeyboardShortcut('f', () => store.dispatch('favorites/toggle', currentTrack.value?.id))
+onKeyboardShortcut('escape', () => store.commit('ui/queueFocused', null))
+
+onKeyboardShortcut(['shift', 'up'], () => store.commit('player/incrementVolume', 0.1), true)
+onKeyboardShortcut(['shift', 'down'], () => store.commit('player/incrementVolume', -0.1), true)
+
+onKeyboardShortcut('right', () => seek(5), true)
+onKeyboardShortcut(['shift', 'right'], () => seek(30), true)
+onKeyboardShortcut('left', () => seek(-5), true)
+onKeyboardShortcut(['shift', 'left'], () => seek(-30), true)
+
+onKeyboardShortcut(['ctrl', 'shift', 'left'], previous, true)
+onKeyboardShortcut(['ctrl', 'shift', 'right'], next, true)
+
+const currentSound = ref()
+const isUpdatingTime = ref(false)
+const preloadDelay = ref(15)
+const isListeningSubmitted = ref()
+const soundId = ref()
+const nextTrackPreloaded = ref(false)
+
+const maxPreloaded = ref(3)
+const soundCache = useSoundCache(maxPreloaded)
+
+const updateProgress = () => {
+  isUpdatingTime.value = true
+
+  if (currentSound.value?.state() === 'loaded') {
+    const time = currentSound.value.seek()
+    const duration = currentSound.value.duration()
+
+    store.dispatch('player/updateProgress', time)
+    updateBuffer(currentSound.value._sounds[0]._node)
+
+    const toPreload = store.state.queue.tracks[currentIndex.value + 1]
+    if (!nextTrackPreloaded.value && toPreload && !soundCache.has(toPreload.id) && (time > preloadDelay.value || duration - time < 30)) {
+      getSound(toPreload)
+      nextTrackPreloaded.value = true
+    }
+
+    if (time > duration / 2) {
+      if (!isListeningSubmitted.value) {
+        store.dispatch('player/trackListened', currentTrack.value)
+        isListeningSubmitted.value = true
+      }
+    }
+  }
+}
+
+// const updateProgressThrottled = useThrottleFn(updateProgress, 50)
+
+const labels = computed(() => ({
+  audioPlayer: $pgettext('Sidebar/Player/Hidden text', 'Media player'),
+  previous: $pgettext('Sidebar/Player/Icon.Tooltip', 'Previous track'),
+  play: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play'),
+  pause: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause'),
+  next: $pgettext('Sidebar/Player/Icon.Tooltip', 'Next track'),
+  unmute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute'),
+  mute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Mute'),
+  expandQueue: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue'),
+  loopingDisabled: $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping disabled. Click to switch to single-track looping.'),
+  loopingSingle: $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping on a single track. Click to switch to whole queue looping.'),
+  loopingWhole: $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping on whole queue. Click to disable looping.'),
+  shuffle: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Shuffle your queue'),
+  clear: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Clear your queue'),
+  addArtistContentFilter: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
+}))
+
+// Preloading
+const { start: loadCurrentTrack, stop: cancelLoadingCurrentTrack } = useTimeoutFn(
+  (track, oldValue) => loadSound(track as Track, oldValue as Track),
+  100,
+  { immediate: false }
+) as { start: (a: Track, b: Track) => unknown, stop: () => void }
+
+watch(currentTrack, (track, oldValue) => {
+  nextTrackPreloaded.value = false
+
+  cancelLoadingCurrentTrack()
+
+  currentSound.value?.pause()
+  store.commit('player/isLoadingAudio', true)
+
+  loadCurrentTrack(track, oldValue)
+})
+
+const observeProgress = ref(false)
+useIntervalFn(() => {
+  if (observeProgress.value) {
+    updateProgress()
+  }
+}, 1000)
+
+watch(playing, async (isPlaying) => {
+  if (currentSound.value) {
+    if (isPlaying) {
+      soundId.value = currentSound.value.play(soundId.value)
+    } else {
+      currentSound.value.pause(soundId.value)
+    }
+  } else {
+    await loadSound(currentTrack.value)
+  }
+
+  observeProgress.value = isPlaying
+})
+
+const setCurrentTime = (time: number) => {
+  if (time < 0 || time > duration.value) {
+    return
+  }
+
+  if (!currentSound.value?._sounds[0] || time === currentSound.value.seek()) {
+    return
+  }
+
+  // if (time === 0) {
+  //   this.updateProgressThrottled.cancel()
+  // }
+
+  currentSound.value.seek(time)
+  // If player is paused update progress immediately to ensure updated UI
+  if (!playing.value) {
+    updateProgress()
+  }
+}
+
+watchEffect(() => {
+  if (!isUpdatingTime.value) {
+    setCurrentTime(currentTime.value)
+    isUpdatingTime.value = false
+  }
+})
+
+onMounted(() => {
+  // TODO (wvffle): Check if it is needed
+  store.dispatch('player/updateProgress', 0)
+  // TODO (wvffle): Check if it is needed
+  store.commit('player/playing', false)
+  // TODO (wvffle): Check if it is needed
+  store.commit('player/isLoadingAudio', false)
+
+  // TODO (wvffle): Check if it is needed
+  Howler.unload() // clear existing cache, if any
+
+  // TODO (wvffle): Check if it is needed
+  nextTrackPreloaded.value = false
+
+  if (currentTrack.value) {
+    getSound(currentTrack.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  observeProgress.value = false
+})
+
+const getSound = (trackData: Track) => {
+  const cached = soundCache.get(trackData.id)
+  if (cached) {
+    return cached.sound
+  }
+
+  const srcs: TrackSource[] = useTrackSources(trackData)
+  const sound: Howl = new Howl({
+    src: srcs.map((source) => source.url),
+    format: srcs.map((source) => source.type),
+    autoplay: false,
+    loop: false,
+    html5: true,
+    preload: true,
+
+    onend () {
+      const onlyTrack = store.state.queue.tracks.length === 1
+      if (looping.value === 1 || (onlyTrack && looping.value === 2)) {
+        currentSound.value.seek(0)
+        store.dispatch('player/updateProgress', 0)
+        soundId.value = currentSound.value.play(soundId.value)
+      } else {
+        store.dispatch('player/trackEnded', currentTrack.value)
+      }
+    },
+
+    onunlock () {
+      if (store.state.player.playing && currentSound.value) {
+        soundId.value = currentSound.value.play(soundId.value)
+      }
+    },
+
+    onload () {
+      const node = (sound as any)._sounds[0].node as HTMLAudioElement
+
+      node.addEventListener('progress', () => {
+        if (sound !== currentSound.value) {
+          return
+        }
+
+        updateBuffer(node)
+      })
+    },
+
+    onplay () {
+      if (sound !== currentSound.value) {
+        return sound.stop()
+      }
+
+      const time = currentSound.value.seek()
+      const duration = currentSound.value.duration()
+      if (time <= duration / 2) {
+        isListeningSubmitted.value = false
+      }
+
+      store.commit('player/isLoadingAudio', false)
+      store.commit('player/resetErrorCount')
+      store.commit('player/errored', false)
+      store.commit('player/duration', sound.duration())
+    },
+
+    onloaderror (soundId, error) {
+      soundCache.delete(trackData.id)
+      sound.unload()
+
+      if (sound !== currentSound.value) {
+        return
+      }
+
+      console.error('Error while playing:', soundId, error)
+      handleError()
+    }
+  })
+
+  soundCache.set(trackData.id, {
+    id: trackData.id,
+    date: new Date(),
+    sound
+  })
+
+  return sound
+}
+const getTrack = async (trackData: Track) => {
+  // use previously fetched trackData
+  if (trackData.uploads.length) {
+    return trackData
+  }
+
+  // we don't have any information for this track, we need to fetch it
+  return axios.get(`tracks/${trackData.id}/`)
+    .then(response => response.data, () => null)
+}
+
+const handleError = () => {
+  store.commit('player/isLoadingAudio', false)
+  store.dispatch('player/trackErrored')
+}
+
+const updateBuffer = (node: HTMLAudioElement) => {
+  // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
+
+  const { buffered, currentTime: time } = node
+
+  let range = 0
+  try {
+    while (buffered.start(range) >= time || time >= buffered.end(range)) {
+      range += 1
+    }
+  } catch (IndexSizeError) {
+    return
+  }
+
+  let loadPercentage
+
+  const start = buffered.start(range)
+  const end = buffered.end(range)
+
+  if (range === 0) {
+    // easy case, no user-seek
+    const loadStartPercentage = start / node.duration
+    const loadEndPercentage = end / node.duration
+    loadPercentage = loadEndPercentage - loadStartPercentage
+  } else {
+    const loaded = end - start
+    const remainingToLoad = node.duration - start
+    // user seeked a specific position in the audio, our progress must be
+    // computed based on the remaining portion of the track
+    loadPercentage = loaded / remainingToLoad
+  }
+
+  if (loadPercentage * 100 === bufferProgress.value) {
+    return
+  }
+
+  store.commit('player/bufferProgress', loadPercentage * 100)
+}
+
+const loadSound = async (trackData: Track, oldValue?: Track) => {
+  const oldSound = currentSound.value
+
+  if (oldSound && trackData !== oldValue) {
+    oldSound.stop(soundId.value)
+    soundId.value = null
+  }
+
+  if (!trackData) {
+    return
+  }
+
+  if (!isShuffling.value && trackData !== oldValue) {
+    trackData = await getTrack(trackData)
+
+    if (trackData == null) {
+      handleError()
+    }
+
+    currentSound.value = getSound(trackData as Track)
+    // TODO (wvffle): #1777
+    soundId.value = currentSound.value.play()
+    store.commit('player/isLoadingAudio', true)
+    store.commit('player/errored', false)
+    store.commit('player/playing', true)
+    store.dispatch('player/updateProgress', 0)
+    observeProgress.value = true
+  }
+}
+
+const switchTab = () => {
+  store.commit('ui/queueFocused', store.state.ui.queueFocused === 'player' ? 'queue' : 'player')
+}
+</script>
+
 <template>
   <section
     v-if="currentTrack"
@@ -145,8 +535,8 @@
           <button
             :title="labels.previous"
             :aria-label="labels.previous"
+            :disabled="!hasPrevious"
             class="circular button control tablet-and-up"
-            :disabled="!hasPrevious || null"
             @click.prevent.stop="$store.dispatch('queue/previous')"
           >
             <i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" />
@@ -156,7 +546,7 @@
             :title="labels.play"
             :aria-label="labels.play"
             class="circular button control"
-            @click.prevent.stop="playback = true"
+            @click.prevent.stop="resume"
           >
             <i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']" />
           </button>
@@ -165,15 +555,15 @@
             :title="labels.pause"
             :aria-label="labels.pause"
             class="circular button control"
-            @click.prevent.stop="playback = false"
+            @click.prevent.stop="pause"
           >
             <i :class="['ui', 'big', 'pause', {'disabled': !currentTrack}, 'icon']" />
           </button>
           <button
             :title="labels.next"
             :aria-label="labels.next"
+            :disabled="!hasNext"
             class="circular button control"
-            :disabled="!hasNext || null"
             @click.prevent.stop="$store.dispatch('queue/next')"
           >
             <i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" />
@@ -199,17 +589,17 @@
               class="circular control button"
               :title="labels.loopingDisabled"
               :aria-label="labels.loopingDisabled"
-              :disabled="!currentTrack || null"
+              :disabled="!currentTrack"
               @click.prevent.stop="$store.commit('player/looping', 1)"
             >
               <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']" />
             </button>
             <button
               v-if="looping === 1"
-              class="looping circular control button"
               :title="labels.loopingSingle"
               :aria-label="labels.loopingSingle"
-              :disabled="!currentTrack || null"
+              :disabled="!currentTrack"
+              class="looping circular control button"
               @click.prevent.stop="$store.commit('player/looping', 2)"
             >
               <i
@@ -223,7 +613,7 @@
               class="looping circular control button"
               :title="labels.loopingWhole"
               :aria-label="labels.loopingWhole"
-              :disabled="!currentTrack || null"
+              :disabled="!currentTrack"
               @click.prevent.stop="$store.commit('player/looping', 0)"
             >
               <i
@@ -259,7 +649,7 @@
                 <i class="stream icon" />
                 <translate
                   translate-context="Sidebar/Queue/Text"
-                  :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}"
+                  :translate-params="{index: currentIndex + 1, length: tracks.length}"
                 >
                   %{ index } of %{ length }
                 </translate>
@@ -271,7 +661,7 @@
                 <i class="stream icon" />
                 <translate
                   translate-context="Sidebar/Queue/Text"
-                  :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}"
+                  :translate-params="{index: currentIndex + 1, length: tracks.length}"
                 >
                   %{ index } of %{ length }
                 </translate>
@@ -318,602 +708,3 @@
     </div>
   </section>
 </template>
-
-<script>
-import { useStore } from '~/store'
-import { mapState, mapGetters, mapActions } from 'vuex'
-import toLinearVolumeScale from '~/composables/audio/toLinearVolumeScale'
-import { Howl, Howler } from 'howler'
-import { throttle, reverse } from 'lodash-es'
-import axios from 'axios'
-import VolumeControl from './VolumeControl.vue'
-import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
-import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
-import updateQueryString from '~/composables/updateQueryString'
-import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
-import { useThrottleFn, useTimeoutFn, useToggle } from '@vueuse/core'
-import { computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
-import useQueue from '~/composables/useQueue'
-
-export default {
-  components: {
-    VolumeControl,
-    TrackFavoriteIcon,
-    TrackPlaylistIcon
-  },
-  setup (props, { emit }) {
-    // TODO (wvffle): When migrating to <script setup> use  defineEmits
-    // const emit = defineEmits(['next', 'previous'])
-
-    const store = useStore()
-    const { $pgettext } = useGettext()
-
-    const queue = computed(() => store.state.queue)
-    const queueIsEmpty = computed(() => queue.value.tracks.length === 0)
-    const currentTrack = computed(() => store.getters['queue/currentTrack'])
-    const currentTime = computed(() => store.state.player.currentTime)
-
-    const toggleMobilePlayer = () => {
-      store.commit('ui/queueFocused', ['queue', 'player'].indexOf(store.state.ui.queueFocused) > -1 ? null : 'player')
-    }
-
-    const { shuffle } = useQueue()
-
-    const seek = (step) => {
-      if (step > 0) {
-        // seek right
-        if (currentTime.value + step < this.duration) {
-          store.dispatch('player/updateProgress', (currentTime.value + step))
-        } else {
-          this.next() // parenthesis where missing here
-        }
-      } else {
-        // seek left
-        const position = Math.max(currentTime.value + step, 0)
-        store.dispatch('player/updateProgress', position)
-      }
-    }
-
-    const next = async () => {
-      await store.dispatch('queue/next')
-      emit('next')
-    }
-
-    const previous = async () => {
-      await store.dispatch('queue/previous')
-      emit('previous')
-    }
-
-    // Playback
-    const playing = computed(() => store.state.player.playing)
-    const [playback, togglePlayback] = useToggle()
-    watch(playback, isPlaying => store.dispatch(
-      isPlaying
-        ? 'player/resumePlayback'
-        : 'player/pausePlayback'
-    ))
-
-    // Add controls for notification drawer
-    if ('mediaSession' in navigator) {
-      navigator.mediaSession.setActionHandler('play', () => (playback.value = true))
-      navigator.mediaSession.setActionHandler('pause', () => (playback.value = false))
-      navigator.mediaSession.setActionHandler('seekforward', () => seek(5))
-      navigator.mediaSession.setActionHandler('seekbackward', () => seek(-5))
-      navigator.mediaSession.setActionHandler('nexttrack', next)
-      navigator.mediaSession.setActionHandler('previoustrack', previous)
-    }
-
-    // Key binds
-    onKeyboardShortcut('e', toggleMobilePlayer)
-    onKeyboardShortcut('p', togglePlayback)
-    onKeyboardShortcut('s', shuffle)
-    onKeyboardShortcut('q', () => store.dispatch('queue/clean'))
-    onKeyboardShortcut('m', () => store.dispatch('player/toggleMute'))
-    onKeyboardShortcut('l', () => store.commit('player/toggleLooping'))
-    onKeyboardShortcut('f', () => store.dispatch('favorites/toggle', currentTrack.value?.id))
-    onKeyboardShortcut('escape', () => store.commit('ui/queueFocused', null))
-
-    onKeyboardShortcut(['shift', 'up'], () => store.commit('player/incrementVolume', 0.1), true)
-    onKeyboardShortcut(['shift', 'down'], () => store.commit('player/incrementVolume', -0.1), true)
-
-    onKeyboardShortcut('right', () => seek(5), true)
-    onKeyboardShortcut(['shift', 'right'], () => seek(30), true)
-    onKeyboardShortcut('left', () => seek(-5), true)
-    onKeyboardShortcut(['shift', 'left'], () => seek(-30), true)
-
-    onKeyboardShortcut(['ctrl', 'shift', 'left'], previous, true)
-    onKeyboardShortcut(['ctrl', 'shift', 'right'], next, true)
-
-    return {
-      queue,
-      queueIsEmpty,
-      currentTrack,
-
-      toggleMobilePlayer,
-      shuffle,
-
-      next,
-      previous,
-      playback,
-      playing
-    }
-  },
-  data () {
-    return {
-      isShuffling: false,
-      sliderVolume: this.volume,
-      showVolume: false,
-      currentSound: null,
-      dummyAudio: null,
-      isUpdatingTime: false,
-      sourceErrors: 0,
-      progressInterval: null,
-      maxPreloaded: 3,
-      preloadDelay: 15,
-      listenDelay: 15,
-      listeningIsSubmitted: false,
-      soundsCache: [],
-      soundId: null,
-      playTimeout: null,
-      nextTrackPreloaded: false
-    }
-  },
-  computed: {
-    ...mapState({
-      currentIndex: state => state.queue.currentIndex,
-      isLoadingAudio: state => state.player.isLoadingAudio,
-      volume: state => state.player.volume,
-      looping: state => state.player.looping,
-      duration: state => state.player.duration,
-      bufferProgress: state => state.player.bufferProgress,
-      errored: state => state.player.errored
-    }),
-    ...mapGetters({
-      hasNext: 'queue/hasNext',
-      hasPrevious: 'queue/hasPrevious',
-      emptyQueue: 'queue/isEmpty',
-      durationFormatted: 'player/durationFormatted',
-      currentTimeFormatted: 'player/currentTimeFormatted',
-      progress: 'player/progress'
-    }),
-    updateProgressThrottled () {
-      return throttle(this.updateProgress, 50)
-    },
-    labels () {
-      const audioPlayer = this.$pgettext('Sidebar/Player/Hidden text', 'Media player')
-      const previous = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Previous track')
-      const play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play')
-      const pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause')
-      const next = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Next track')
-      const unmute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute')
-      const mute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Mute')
-      const expandQueue = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue')
-      const loopingDisabled = this.$pgettext('Sidebar/Player/Icon.Tooltip',
-        'Looping disabled. Click to switch to single-track looping.'
-      )
-      const loopingSingle = this.$pgettext('Sidebar/Player/Icon.Tooltip',
-        'Looping on a single track. Click to switch to whole queue looping.'
-      )
-      const loopingWhole = this.$pgettext('Sidebar/Player/Icon.Tooltip',
-        'Looping on whole queue. Click to disable looping.'
-      )
-      const shuffle = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Shuffle your queue')
-      const clear = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Clear your queue')
-      const addArtistContentFilter = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
-      return {
-        audioPlayer,
-        previous,
-        play,
-        pause,
-        next,
-        unmute,
-        mute,
-        loopingDisabled,
-        loopingSingle,
-        loopingWhole,
-        shuffle,
-        clear,
-        expandQueue,
-        addArtistContentFilter
-      }
-    }
-  },
-  watch: {
-    currentTrack: {
-      async handler (newValue, oldValue) {
-        if (newValue === oldValue) {
-          return
-        }
-        this.nextTrackPreloaded = false
-        clearTimeout(this.playTimeout)
-        if (this.currentSound) {
-          this.currentSound.pause()
-        }
-        this.$store.commit('player/isLoadingAudio', true)
-        this.playTimeout = setTimeout(async () => {
-          await this.loadSound(newValue, oldValue)
-        }, 100)
-        this.updateMetadata()
-      },
-      immediate: false
-    },
-    volume: {
-      immediate: true,
-      handler (newValue) {
-        this.sliderVolume = newValue
-        Howler.volume(toLinearVolumeScale(newValue))
-      }
-    },
-    sliderVolume (newValue) {
-      this.$store.commit('player/volume', newValue)
-    },
-    playing: async function (newValue) {
-      if (this.currentSound) {
-        if (newValue === true) {
-          this.soundId = this.currentSound.play(this.soundId)
-        } else {
-          this.currentSound.pause(this.soundId)
-        }
-      } else {
-        await this.loadSound(this.currentTrack, null)
-      }
-
-      this.observeProgress(newValue)
-    },
-    currentTime (newValue) {
-      if (!this.isUpdatingTime) {
-        this.setCurrentTime(newValue)
-      }
-      this.isUpdatingTime = false
-    },
-    emptyQueue (newValue) {
-      if (newValue) {
-        Howler.unload()
-      }
-    }
-  },
-  mounted () {
-    this.$store.dispatch('player/updateProgress', 0)
-    this.$store.commit('player/playing', false)
-    this.$store.commit('player/isLoadingAudio', false)
-    Howler.unload() // clear existing cache, if any
-    this.nextTrackPreloaded = false
-    // this is needed to unlock audio playing under some browsers,
-    // cf https://github.com/goldfire/howler.js#mobilechrome-playback
-    // but we never actually load those audio files
-    this.dummyAudio = new Howl({
-      preload: false,
-      autoplay: false,
-      src: ['noop.webm', 'noop.mp3']
-    })
-    if (this.currentTrack) {
-      this.getSound(this.currentTrack)
-      this.updateMetadata()
-    }
-  },
-  beforeUnmount () {
-    this.dummyAudio.unload()
-    this.observeProgress(false)
-  },
-  unmounted () {
-  },
-  methods: {
-    ...mapActions({
-      mute: 'player/mute',
-      unmute: 'player/unmute'
-    }),
-    async getTrackData (trackData) {
-      // use previously fetched trackData
-      if (trackData.uploads.length) return trackData
-
-      // we don't have any information for this track, we need to fetch it
-      return axios.get(`tracks/${trackData.id}/`)
-        .then(
-          response => response.data,
-          () => null
-        )
-    },
-    handleError ({ sound, error }) {
-      this.$store.commit('player/isLoadingAudio', false)
-      this.$store.dispatch('player/trackErrored')
-    },
-    getSound (trackData) {
-      const cached = this.getSoundFromCache(trackData)
-      if (cached) {
-        return cached.sound
-      }
-      const srcs = this.getSrcs(trackData)
-      const self = this
-      const sound = new Howl({
-        src: srcs.map((s) => { return s.url }),
-        format: srcs.map((s) => { return s.type }),
-        autoplay: false,
-        loop: false,
-        html5: true,
-        preload: true,
-        onend: function () {
-          self.ended()
-        },
-        onunlock: function () {
-          if (self.$store.state.player.playing && self.sound) {
-            self.soundId = self.sound.play(self.soundId)
-          }
-        },
-        onload: function () {
-          const sound = this
-          const node = this._sounds[0]._node
-          node.addEventListener('progress', () => {
-            if (sound !== self.currentSound) {
-              return
-            }
-            self.updateBuffer(node)
-          })
-        },
-        onplay: function () {
-          if (this !== self.currentSound) {
-            this.stop()
-            return
-          }
-          const t = self.currentSound.seek()
-          const d = self.currentSound.duration()
-          if (t <= (d / 2)) {
-            self.listeningIsSubmitted = false
-          }
-          self.$store.commit('player/isLoadingAudio', false)
-          self.$store.commit('player/resetErrorCount')
-          self.$store.commit('player/errored', false)
-          self.$store.commit('player/duration', this.duration())
-        },
-        onloaderror: function (sound, error) {
-          self.removeFromCache(this)
-          if (this !== self.currentSound) {
-            return
-          }
-          console.log('Error while playing:', sound, error)
-          self.handleError({ sound, error })
-        }
-      })
-      this.addSoundToCache(sound, trackData)
-      return sound
-    },
-    getSrcs: function (trackData) {
-      const a = document.createElement('audio')
-      const allowed = ['probably', 'maybe']
-      const sources = trackData.uploads.filter(u => {
-        const canPlay = a.canPlayType(u.mimetype)
-        return allowed.indexOf(canPlay) > -1
-      }).map(u => {
-        return {
-          type: u.extension,
-          url: this.$store.getters['instance/absoluteUrl'](u.listen_url)
-        }
-      })
-      a.remove()
-      // We always add a transcoded MP3 src at the end
-      // because transcoding is expensive, but we want browsers that do
-      // not support other codecs to be able to play it :)
-      sources.push({
-        type: 'mp3',
-        url: updateQueryString(
-          this.$store.getters['instance/absoluteUrl'](trackData.listen_url),
-          'to',
-          'mp3'
-        )
-      })
-      if (this.$store.state.auth.authenticated) {
-        // we need to send the token directly in url
-        // so authentication can be checked by the backend
-        // because for audio files we cannot use the regular Authentication
-        // header
-        return sources.map(source => {
-          source.url = updateQueryString(
-            source.url,
-            'token',
-            this.$store.state.auth.scopedTokens.listen
-          )
-
-          return source
-        })
-      }
-
-      return sources
-    },
-
-    updateBuffer (node) {
-      // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
-      let range = 0
-      const bf = node.buffered
-      const time = node.currentTime
-      try {
-        while (!(bf.start(range) <= time && time <= bf.end(range))) {
-          range += 1
-        }
-      } catch (IndexSizeError) {
-        return
-      }
-      let loadPercentage
-      const start = bf.start(range)
-      const end = bf.end(range)
-      if (range === 0) {
-        // easy case, no user-seek
-        const loadStartPercentage = start / node.duration
-        const loadEndPercentage = end / node.duration
-        loadPercentage = loadEndPercentage - loadStartPercentage
-      } else {
-        const loaded = end - start
-        const remainingToLoad = node.duration - start
-        // user seeked a specific position in the audio, our progress must be
-        // computed based on the remaining portion of the track
-        loadPercentage = loaded / remainingToLoad
-      }
-      if (loadPercentage * 100 === this.bufferProgress) {
-        return
-      }
-      this.$store.commit('player/bufferProgress', loadPercentage * 100)
-    },
-    updateProgress: function () {
-      this.isUpdatingTime = true
-      if (this.currentSound && this.currentSound.state() === 'loaded') {
-        const t = this.currentSound.seek()
-        const d = this.currentSound.duration()
-        this.$store.dispatch('player/updateProgress', t)
-        this.updateBuffer(this.currentSound._sounds[0]._node)
-        const toPreload = this.$store.state.queue.tracks[this.currentIndex + 1]
-        if (!this.nextTrackPreloaded && toPreload && !this.getSoundFromCache(toPreload) && (t > this.preloadDelay || d - t < 30)) {
-          this.getSound(toPreload)
-          this.nextTrackPreloaded = true
-        }
-        if (t > (d / 2)) {
-          if (!this.listeningIsSubmitted) {
-            this.$store.dispatch('player/trackListened', this.currentTrack)
-            this.listeningIsSubmitted = true
-          }
-        }
-      }
-    },
-    seekForward () {
-      this.seek(5)
-    },
-    seekBackward () {
-      this.seek(-5)
-    },
-    observeProgress: function (enable) {
-      const self = this
-      if (enable) {
-        if (self.progressInterval) {
-          clearInterval(self.progressInterval)
-        }
-        self.progressInterval = setInterval(() => {
-          self.updateProgress()
-        }, 1000)
-      } else {
-        clearInterval(self.progressInterval)
-      }
-    },
-    setCurrentTime (t) {
-      if (t < 0 || t > this.duration) {
-        return
-      }
-      if (!this.currentSound || !this.currentSound._sounds[0]) {
-        return
-      }
-      if (t === this.currentSound.seek()) {
-        return
-      }
-      if (t === 0) {
-        this.updateProgressThrottled.cancel()
-      }
-      this.currentSound.seek(t)
-      // If player is paused update progress immediately to ensure updated UI
-      if (!this.$store.state.player.playing) {
-        this.updateProgress()
-      }
-    },
-    ended: function () {
-      const onlyTrack = this.$store.state.queue.tracks.length === 1
-      if (this.looping === 1 || (onlyTrack && this.looping === 2)) {
-        this.currentSound.seek(0)
-        this.$store.dispatch('player/updateProgress', 0)
-        this.soundId = this.currentSound.play(this.soundId)
-      } else {
-        this.$store.dispatch('player/trackEnded', this.currentTrack)
-      }
-    },
-    getSoundFromCache (trackData) {
-      return this.soundsCache.filter((d) => {
-        if (d.track.id !== trackData.id) {
-          return false
-        }
-
-        return true
-      })[0]
-    },
-    addSoundToCache (sound, trackData) {
-      const data = {
-        date: new Date(),
-        track: trackData,
-        sound: sound
-      }
-      this.soundsCache.push(data)
-      this.checkCache()
-    },
-    checkCache () {
-      const self = this
-      const toKeep = []
-      reverse(this.soundsCache).forEach((e) => {
-        if (toKeep.length < self.maxPreloaded) {
-          toKeep.push(e)
-        } else {
-          e.sound.unload()
-        }
-      })
-      this.soundsCache = reverse(toKeep)
-    },
-    removeFromCache (sound) {
-      const toKeep = []
-      this.soundsCache.forEach((e) => {
-        if (e.sound === sound) {
-          e.sound.unload()
-        } else {
-          toKeep.push(e)
-        }
-      })
-      this.soundsCache = toKeep
-    },
-    async loadSound (newValue, oldValue) {
-      let trackData = newValue
-      const oldSound = this.currentSound
-      if (oldSound && trackData !== oldValue) {
-        oldSound.stop(this.soundId)
-        this.soundId = null
-      }
-      if (!trackData) {
-        return
-      }
-      if (!this.isShuffling && trackData !== oldValue) {
-        trackData = await this.getTrackData(trackData)
-        if (trackData == null) {
-          this.handleError({})
-        }
-        this.currentSound = this.getSound(trackData)
-        this.$store.commit('player/isLoadingAudio', true)
-        this.soundId = this.currentSound.play()
-        this.$store.commit('player/errored', false)
-        this.$store.commit('player/playing', true)
-        this.$store.dispatch('player/updateProgress', 0)
-        this.observeProgress(true)
-      }
-    },
-    switchTab () {
-      if (this.$store.state.ui.queueFocused === 'player') {
-        this.$store.commit('ui/queueFocused', 'queue')
-      } else {
-        this.$store.commit('ui/queueFocused', 'player')
-      }
-    },
-    updateMetadata () {
-      // If the session is playing as a PWA, populate the notification
-      // with details from the track
-      if (this.currentTrack && 'mediaSession' in navigator) {
-        const metadata = {
-          title: this.currentTrack.title,
-          artist: this.currentTrack.artist.name
-        }
-        if (this.currentTrack.album && this.currentTrack.album.cover) {
-          metadata.album = this.currentTrack.album.title
-          metadata.artwork = [
-            { src: this.currentTrack.album.cover.urls.original, sizes: '96x96', type: 'image/png' },
-            { src: this.currentTrack.album.cover.urls.original, sizes: '128x128', type: 'image/png' },
-            { src: this.currentTrack.album.cover.urls.original, sizes: '192x192', type: 'image/png' },
-            { src: this.currentTrack.album.cover.urls.original, sizes: '256x256', type: 'image/png' },
-            { src: this.currentTrack.album.cover.urls.original, sizes: '384x384', type: 'image/png' },
-            { src: this.currentTrack.album.cover.urls.original, sizes: '512x512', type: 'image/png' }
-          ]
-        }
-        navigator.mediaSession.metadata = new window.MediaMetadata(metadata)
-      }
-    }
-  }
-}
-</script>
diff --git a/front/src/composables/audio/useSoundCache.ts b/front/src/composables/audio/useSoundCache.ts
new file mode 100644
index 000000000..f414121ed
--- /dev/null
+++ b/front/src/composables/audio/useSoundCache.ts
@@ -0,0 +1,36 @@
+import { MaybeRef } from "@vueuse/core"
+import { Howl } from "howler"
+import { sortBy } from "lodash-es"
+import { reactive, watchEffect, ref, unref } from "vue"
+
+export interface CachedSound {
+  id: string
+  date: Date
+  sound: Howl
+}
+
+export default (maxPreloaded: MaybeRef<number>) => {
+  const soundCache = reactive(new Map<string, CachedSound>())
+  const cleaningCache = ref(false)
+
+  watchEffect(() => {
+    let toRemove = soundCache.size - unref(maxPreloaded)
+
+    if (toRemove > 0 && !cleaningCache.value) {
+      cleaningCache.value = true
+
+      const excess = sortBy(soundCache.values(), [(cached: CachedSound) => cached.date])
+        // TODO (wvffle): Check if works
+        .slice(0, toRemove) as unknown as CachedSound[]
+
+      for (const cached of excess) {
+        soundCache.delete(cached.id)
+        cached.sound.unload()
+      }
+
+      cleaningCache.value = false
+    }
+  })
+
+  return soundCache
+}
\ No newline at end of file
diff --git a/front/src/composables/audio/useTrackSources.ts b/front/src/composables/audio/useTrackSources.ts
new file mode 100644
index 000000000..f360bfbda
--- /dev/null
+++ b/front/src/composables/audio/useTrackSources.ts
@@ -0,0 +1,51 @@
+import { Track } from "~/types"
+import { useStore } from '~/store'
+import updateQueryString from '~/composables/updateQueryString'
+
+export interface TrackSource {
+  url: string 
+  type: string
+}
+
+export default (trackData: Track): TrackSource[] => {
+  const store = useStore()
+  const audio = document.createElement('audio')
+
+  const allowed = ['probably', 'maybe']
+
+  const sources = trackData.uploads
+    .filter(upload => {
+      const canPlay = audio.canPlayType(upload.mimetype)
+      return allowed.indexOf(canPlay) > -1
+    })
+    .map(upload => ({
+      type: upload.extension,
+      url: store.getters['instance/absoluteUrl'](upload.listen_url)
+    }))
+
+  // We always add a transcoded MP3 src at the end
+  // because transcoding is expensive, but we want browsers that do
+  // not support other codecs to be able to play it :)
+  sources.push({
+    type: 'mp3',
+    url: updateQueryString(
+      store.getters['instance/absoluteUrl'](trackData.listen_url), 
+      'to', 
+      'mp3'
+    )
+  })
+
+  const token = store.state.auth.scopedTokens.listen
+  if (store.state.auth.authenticated && token !== null) {
+      // we need to send the token directly in url
+      // so authentication can be checked by the backend
+      // because for audio files we cannot use the regular Authentication
+      // header
+      return sources.map(source => ({
+        ...source,
+        url: updateQueryString(source.url, 'token', token)
+      }))
+  }
+
+  return sources
+}
\ No newline at end of file
diff --git a/front/src/composables/usePlayer.ts b/front/src/composables/usePlayer.ts
index 4791efcc4..1968f5ea5 100644
--- a/front/src/composables/usePlayer.ts
+++ b/front/src/composables/usePlayer.ts
@@ -1,28 +1,62 @@
-import { useStore } from "~/store"
-import { computed } from "vue"
+import { computed, watchEffect } from "vue"
+import { Howler } from 'howler'
+import useQueue from '~/composables/useQueue'
+import toLinearVolumeScale from '~/composables/audio/toLinearVolumeScale'
+import store from "~/store"
 
 export default () => {
-  const store = useStore()
   const looping = computed(() => store.state.player.looping)
   const playing = computed(() => store.state.player.playing)
   const loading = computed(() => store.state.player.isLoadingAudio)
   const errored = computed(() => store.state.player.errored)
   const focused = computed(() => store.state.ui.queueFocused === 'player')
 
-  const volume = computed(() => store.state.player.volume)
+  // Volume
+  const volume = computed({
+    get: () => store.state.player.volume,
+    set: (value) => store.commit('player/volume', value)
+  })
 
+  watchEffect(() => Howler.volume(toLinearVolumeScale(volume.value)))
+
+  // Time and duration
   const duration = computed(() => store.state.player.duration)
   const currentTime = computed(() => store.state.player.currentTime)
 
   const durationFormatted = computed(() => store.getters['player/durationFormatted'])
   const currentTimeFormatted = computed(() => store.getters['player/currentTimeFormatted'])
 
+  // Progress
   const progress = computed(() => store.getters['player/progress']) 
   const bufferProgress = computed(() => store.state.player.bufferProgress) 
 
+  // Controls
   const pause = () => store.dispatch('player/pausePlayback')
   const resume = () => store.dispatch('player/resumePlayback')
 
+  const { next } = useQueue()
+  const seek = (step: number) => {
+    // seek right
+    if (step > 0) {
+      if (currentTime.value + step < duration.value) {
+        store.dispatch('player/updateProgress', (currentTime.value + step))
+      } else {
+        next()
+      }
+
+      return
+    }
+
+    // seek left
+    const position = Math.max(currentTime.value + step, 0)
+    store.dispatch('player/updateProgress', position)
+  }
+
+  const togglePlayback = () => {
+    if (playing.value) return pause()
+    return resume()
+  }
+
   return { 
     looping,
     playing,
@@ -42,6 +76,8 @@ export default () => {
     bufferProgress,
 
     pause,
-    resume
+    resume,
+    seek,
+    togglePlayback
   }
 }
\ No newline at end of file
diff --git a/front/src/composables/useQueue.ts b/front/src/composables/useQueue.ts
index ab88e957f..2a4fcea2a 100644
--- a/front/src/composables/useQueue.ts
+++ b/front/src/composables/useQueue.ts
@@ -1,19 +1,21 @@
-import { useTimeoutFn, useThrottleFn } from "@vueuse/core"
-import { useTimeAgo, useNow } from '@vueuse/core'
-import { useGettext } from "vue3-gettext"
-import { useStore } from "~/store"
+import { useTimeoutFn, useThrottleFn, useTimeAgo, useNow, whenever } from '@vueuse/core'
+import { Howler } from 'howler'
+import { gettext } from '~/init/locale'
 import { ref, computed } from "vue"
 import { Track } from "~/types"
 import { sum } from 'lodash-es'
+import store from "~/store"
+
+const { $pgettext } = gettext
 
 export default () => {
-  const store = useStore()
-  const { $pgettext } = useGettext()
-
   const currentTrack = computed(() => store.getters['queue/currentTrack'])
   const currentIndex = computed(() => store.state.queue.currentIndex)
   const hasNext = computed(() => store.getters['queue/hasNext'])
+  const hasPrevious = computed(() => store.getters['queue/hasPrevious'])
+
   const isEmpty = computed(() => store.getters['queue/isEmpty'])
+  whenever(isEmpty, () => Howler.unload())
 
   const removeTrack = (index: number) => store.dispatch('queue/cleanTrack', index)
   const clear = () => store.dispatch('queue/clean')
@@ -87,8 +89,11 @@ export default () => {
 
   return { 
     currentTrack,
+    currentIndex,
     hasNext,
-    isEmpty,
+    hasPrevious,
+    isEmpty, 
+    isShuffling,
 
     removeTrack,
     clear,
diff --git a/front/src/init/howler.ts b/front/src/init/howler.ts
new file mode 100644
index 000000000..082e62ef0
--- /dev/null
+++ b/front/src/init/howler.ts
@@ -0,0 +1,17 @@
+import { InitModule } from '~/types'
+import { Howl } from 'howler'
+
+export const install: InitModule = ({ app }) => {
+  // TODO (wvffle): Check if it is needed
+
+  // this is needed to unlock audio playing under some browsers,
+  // cf https://github.com/goldfire/howler.js#mobilechrome-playback
+  // but we never actually load those audio files
+  const dummyAudio = new Howl({
+    preload: false,
+    autoplay: false,
+    src: ['noop.webm', 'noop.mp3']
+  })
+
+  return dummyAudio
+}
diff --git a/front/src/init/mediaSession.ts b/front/src/init/mediaSession.ts
new file mode 100644
index 000000000..c2fc191b3
--- /dev/null
+++ b/front/src/init/mediaSession.ts
@@ -0,0 +1,45 @@
+import { InitModule } from '~/types'
+import { whenever } from '@vueuse/core'
+import useQueue from '~/composables/useQueue'
+import usePlayer from '~/composables/usePlayer'
+
+export const install: InitModule = ({ app }) => {
+  const { currentTrack, next, previous } = useQueue()
+  const { resume, pause, seek } = usePlayer()
+
+  // Add controls for notification drawer
+  if ('mediaSession' in navigator) {
+    navigator.mediaSession.setActionHandler('play', resume)
+    navigator.mediaSession.setActionHandler('pause', pause)
+    navigator.mediaSession.setActionHandler('seekforward', () => seek(5))
+    navigator.mediaSession.setActionHandler('seekbackward', () => seek(-5))
+    navigator.mediaSession.setActionHandler('nexttrack', next)
+    navigator.mediaSession.setActionHandler('previoustrack', previous)
+
+    // TODO (wvffle): set metadata to null when we don't have currentTrack?
+    // If the session is playing as a PWA, populate the notification
+    // with details from the track
+    whenever(currentTrack, () => {
+      const { title, artist, album } = currentTrack.value
+
+      const metadata: MediaMetadataInit = {
+        title,
+        artist: artist.name
+      }
+
+      if (album?.cover) {
+        metadata.album = album.title
+        metadata.artwork = [
+          { src: album.cover.urls.original, sizes: '96x96', type: 'image/png' },
+          { src: album.cover.urls.original, sizes: '128x128', type: 'image/png' },
+          { src: album.cover.urls.original, sizes: '192x192', type: 'image/png' },
+          { src: album.cover.urls.original, sizes: '256x256', type: 'image/png' },
+          { src: album.cover.urls.original, sizes: '384x384', type: 'image/png' },
+          { src: album.cover.urls.original, sizes: '512x512', type: 'image/png' }
+        ]
+      }
+
+      navigator.mediaSession.metadata = new window.MediaMetadata(metadata)
+    }, { immediate: true })
+  }
+}
diff --git a/front/src/init/webSocket.ts b/front/src/init/webSocket.ts
index e32a55a7f..3177596b6 100644
--- a/front/src/init/webSocket.ts
+++ b/front/src/init/webSocket.ts
@@ -1,6 +1,14 @@
-import { InitModule } from '~/types'
+import {
+  InitModule,
+  ListenWSEvent,
+  PendingReviewEditsWSEvent,
+  PendingReviewReportsWSEvent,
+  PendingReviewRequestsWSEvent,
+} from '~/types'
 import { watchEffect, watch } from 'vue'
 import { useWebSocket, whenever } from '@vueuse/core'
+import useWebSocketHandler from '~/composables/useWebSocketHandler'
+import { CLIENT_RADIOS } from '~/utils/clientRadios'
 
 export const install: InitModule = ({ store }) => {
   watch(() => store.state.instance.instanceUrl, () => {
@@ -25,4 +33,47 @@ export const install: InitModule = ({ store }) => {
       console.log('Websocket status:', status.value)
     })
   }, { immediate: true })
+
+  // WebSocket handlers
+  useWebSocketHandler('inbox.item_added', () => {
+    store.commit('ui/incrementNotifications', { type: 'inbox', count: 1 })
+  })
+
+  useWebSocketHandler('mutation.created', (event) => {
+    store.commit('ui/incrementNotifications', {
+      type: 'pendingReviewEdits',
+      value: (event as PendingReviewEditsWSEvent).pending_review_count
+    })
+  })
+
+  useWebSocketHandler('mutation.updated', (event) => {
+    store.commit('ui/incrementNotifications', {
+      type: 'pendingReviewEdits',
+      value: (event as PendingReviewEditsWSEvent).pending_review_count
+    })
+  })
+
+  useWebSocketHandler('report.created', (event) => {
+    store.commit('ui/incrementNotifications', {
+      type: 'pendingReviewReports',
+      value: (event as PendingReviewReportsWSEvent).unresolved_count
+    })
+  })
+
+  useWebSocketHandler('user_request.created', (event) => {
+    store.commit('ui/incrementNotifications', {
+      type: 'pendingReviewRequests',
+      value: (event as PendingReviewRequestsWSEvent).pending_count
+    })
+  })
+
+  useWebSocketHandler('Listen', (event) => {
+    if (store.state.radios.current && store.state.radios.running) {
+      const { current } = store.state.radios
+
+      if (current.clientOnly) {
+        CLIENT_RADIOS[current.type].handleListen(current, event as ListenWSEvent, store)
+      }
+    }
+  })
 }
diff --git a/front/src/shims-vuex.d.ts b/front/src/shims-vuex.d.ts
index aa9a199bd..9658d05c7 100644
--- a/front/src/shims-vuex.d.ts
+++ b/front/src/shims-vuex.d.ts
@@ -1,7 +1,8 @@
 import { Store } from 'vuex'
+import { RootState } from '~/store'
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
-    $store: Store<any>
+    $store: Store<RootState>
   }
 }
diff --git a/front/src/store/ui.ts b/front/src/store/ui.ts
index bd98ea38c..86d28c186 100644
--- a/front/src/store/ui.ts
+++ b/front/src/store/ui.ts
@@ -47,7 +47,7 @@ type NotificationsKey = 'inbox' | 'pendingReviewEdits' | 'pendingReviewReports'
 export interface State {
   currentLanguage: 'en_US' | keyof typeof availableLanguages
   selectedLanguage: boolean
-  queueFocused: null
+  queueFocused: null | 'queue' | 'player'
   momentLocale: 'en'
   lastDate: Date
   maxMessages: number
diff --git a/front/src/types.ts b/front/src/types.ts
index da8bf23a1..d80986942 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -2,6 +2,7 @@ import type { App } from 'vue'
 import type { Store } from 'vuex'
 import { Router } from 'vue-router'
 import { AxiosError } from 'axios'
+import { RootState } from '~/store'
 
 declare global {
   interface Window {
@@ -14,7 +15,7 @@ declare global {
 export interface InitModuleContext {
   app: App
   router: Router
-  store: Store<any>
+  store: Store<RootState>
 }
 
 export type InitModule = (ctx: InitModuleContext) => void
@@ -71,8 +72,12 @@ export interface Track {
 
   album?: Album
   artist?: Artist
+
+  // TODO (wvffle): Make sure it really has listen_url
+  listen_url: string
 }
 
+
 export interface Channel {
   id: string
   artist?: Artist
@@ -171,6 +176,9 @@ export interface Upload {
   source?: string
   uuid: string
   duration?: number
+  mimetype: string
+  extension: string
+  listen_url: string
 }
 
 // FileSystem Logs
diff --git a/front/src/utils/index.ts b/front/src/utils/index.ts
index e1c354cf4..30374c7fc 100644
--- a/front/src/utils/index.ts
+++ b/front/src/utils/index.ts
@@ -2,6 +2,7 @@ import { startCase } from 'lodash-es'
 import { Store } from 'vuex'
 import { Router } from 'vue-router'
 import { APIErrorResponse } from '~/types'
+import { RootState } from '~/store'
 
 export function setUpdate (obj: object, statuses: Record<string, unknown>, value: unknown) {
   for (const key of Object.keys(obj)) {
@@ -46,7 +47,7 @@ export function getCookie (name: string) {
 }
 
 // TODO (wvffle): Use navigation guards
-export async function checkRedirectToLogin (store: Store<any>, router: Router) {
+export async function checkRedirectToLogin (store: Store<RootState>, router: Router) {
   if (!store.state.auth.authenticated) {
     return router.push({ name: 'login', query: { next: router.currentRoute.value.fullPath } })
   }
diff --git a/front/yarn.lock b/front/yarn.lock
index 27c749a62..3d554c94c 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1390,6 +1390,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/howler@^2.2.7":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@types/howler/-/howler-2.2.7.tgz#5acfbed57f9e1d99b8dabe1b824729e1c1ea1fae"
+  integrity sha512-PEZldwZqJJw1PWRTpupyC7ajVTZA8aHd8nB/Y0n6zRZi5u8ktYDntsHj13ltEiBRqWwF06pASxBEvCTxniG8eA==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"