Resolve TODOs

front/src/components/Queue.vue

@@ -13,8 +13,8 @@ import { useQueue } from '~/composables/audio/queue'
 
 import time from '~/utils/time'
 
-// import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
-// import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
+import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import PlayerControls from '~/components/audio/PlayerControls.vue'
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
@@ -131,6 +131,18 @@ const reorderTracks = async (from: number, to: number) => {
     scrollToCurrent()
   }
 }
+
+const hideArtist = () => {
+  if (currentTrack.value.artistId !== -1) {
+    return store.dispatch('moderation/hide', {
+      type: 'artist',
+      target: {
+        id: currentTrack.value.artistId,
+        name: currentTrack.value.artistName
+      }
+    })
+  }
+}
 </script>
 
 <template>
@@ -205,8 +217,7 @@ const reorderTracks = async (from: number, to: number) => {
             </p>
           </div>
           <div class="additional-controls desktop-and-below">
-            <!-- TODO (wvffle): Update props -->
-            <!-- <track-favorite-icon
+            <track-favorite-icon
               v-if="$store.state.auth.authenticated"
               :track="currentTrack"
             />
@@ -219,10 +230,10 @@ const reorderTracks = async (from: number, to: number) => {
               :class="['ui', 'really', 'basic', 'circular', 'icon', 'button']"
               :aria-label="labels.addArtistContentFilter"
               :title="labels.addArtistContentFilter"
-              @click="$store.dispatch('moderation/hide', {type: 'artist', target: currentTrack.artist})"
+              @click="hideArtist"
             >
               <i :class="['eye slash outline', 'basic', 'icon']" />
-            </button> -->
+            </button>
           </div>
           <div class="progress-wrapper">
             <div

front/src/components/audio/Player.vue

@@ -10,8 +10,8 @@ import { useStore } from '~/store'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import time from '~/utils/time'
 
-// import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
-// import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
+import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import VolumeControl from './VolumeControl.vue'
 import PlayerControls from './PlayerControls.vue'
 
@@ -107,6 +107,18 @@ const loopingTitle = computed(() => {
       ? $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping on a single track. Click to switch to whole queue looping.')
       : $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping on whole queue. Click to disable looping.')
 })
+
+const hideArtist = () => {
+  if (currentTrack.value.artistId !== -1) {
+    return store.dispatch('moderation/hide', {
+      type: 'artist',
+      target: {
+        id: currentTrack.value.artistId,
+        name: currentTrack.value.artistName
+      }
+    })
+  }
+}
 </script>
 
 <template>
@@ -216,8 +228,7 @@ const loopingTitle = computed(() => {
           v-if="$store.state.auth.authenticated"
           class="controls desktop-and-up fluid align-right"
         >
-          <!-- TODO (wvffle): Uncomment -->
-          <!-- <track-favorite-icon
+          <track-favorite-icon
             class="control white"
             :track="currentTrack"
           />
@@ -229,10 +240,10 @@ const loopingTitle = computed(() => {
             :class="['ui', 'really', 'basic', 'circular', 'icon', 'button', 'control']"
             :aria-label="labels.addArtistContentFilter"
             :title="labels.addArtistContentFilter"
-            @click="$store.dispatch('moderation/hide', {type: 'artist', target: currentTrack.artist})"
+            @click="hideArtist"
           >
             <i :class="['eye slash outline', 'basic', 'icon']" />
-          </button> -->
+          </button>
         </div>
         <player-controls class="controls queue-not-focused" />
         <div class="controls progress-controls queue-not-focused tablet-and-up small align-left">

front/src/components/favorites/TrackFavoriteIcon.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { QueueTrack } from '~/composables/audio/queue'
 import type { Track } from '~/types'
 
 import { useGettext } from 'vue3-gettext'
@@ -6,7 +7,7 @@ import { useStore } from '~/store'
 import { computed } from 'vue'
 
 interface Props {
-  track?: Track
+  track?: QueueTrack | Track
   button?: boolean
   border?: boolean
 }

front/src/components/playlists/TrackPlaylistIcon.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
+import type { QueueTrack } from '~/composables/audio/queue'
 import type { Track } from '~/types'
 
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
 
 interface Props {
-  track?: Track | null
+  track?: Track | QueueTrack
   button?: boolean
   border?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
-  track: null,
+  track: undefined,
   button: false,
   border: false
 })

front/src/composables/audio/queue.ts

@@ -9,8 +9,10 @@ import { useClamp } from '@vueuse/math'
 import { looping, LoopingMode, isPlaying, usePlayer } from '~/composables/audio/player'
 import { useStore } from '~/store'
 
+import { useTracks } from '~/composables/audio/tracks'
+import { gettext } from '~/init/locale'
+
 import axios from 'axios'
-import { useTracks } from './tracks'
 
 // import useWebWorker from '~/composables/useWebWorker'
 
@@ -94,6 +96,8 @@ export const useQueue = createGlobalState(() => {
   const { currentSound } = useTracks()
 
   const createQueueTrack = async (track: Track): Promise<QueueTrack> => {
+    const { $pgettext } = gettext
+
     if (track.uploads.length === 0) {
       // we don't have any information for this track, we need to fetch it
       const { uploads } = await axios.get(`tracks/${track.id}/`)
@@ -106,9 +110,9 @@ export const useQueue = createGlobalState(() => {
       id: track.id,
       title: track.title,
       // TODO (wvffle): i18n
-      artistName: track.artist?.name ?? 'Unknown artist',
+      artistName: track.artist?.name ?? $pgettext('*/*/*', 'Unknown artist'),
       // TODO (wvffle): i18n
-      albumTitle: track.album?.title ?? 'Unknown album',
+      albumTitle: track.album?.title ?? $pgettext('*/*/*', 'Unknown album'),
       artistId: track.artist?.id ?? -1,
       albumId: track.album?.id ?? -1,
       coverUrl: (track.cover?.urls ?? track.album?.cover?.urls ?? track.artist?.cover?.urls)?.original

front/src/composables/audio/tracks.ts

@@ -71,6 +71,7 @@ export const useTracks = createGlobalState(() => {
       return sound
     }
 
+    console.log('NO TRACK IN CACHE, CREATING')
     const soundPromise = createSoundPromise()
     soundPromises.set(track.id, soundPromise)
     return soundPromise
@@ -83,11 +84,6 @@ export const useTracks = createGlobalState(() => {
     console.log('LOADING TRACK', index)
 
     const track = queue.value[index]
-    if (!soundPromises.has(track.id) && !soundCache.has(track.id)) {
-      // TODO (wvffle): Resolve race condition - is it still here after adding soundPromises?
-      console.log('NO TRACK IN CACHE, CREATING')
-    }
-
     const sound = await createSound(track)
     console.log('CONNECTING NODE')
 

front/src/composables/audio/usePlayOptions.ts

@@ -3,11 +3,11 @@ import type { ContentFilter } from '~/store/moderation'
 
 import { useCurrentElement } from '@vueuse/core'
 import { computed, markRaw, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
+import { gettext } from '~/init/locale'
 
 import jQuery from 'jquery'
 import axios from 'axios'
@@ -49,7 +49,7 @@ export default (props: PlayOptionsProps) => {
   const filterableArtist = computed(() => props.track?.artist ?? props.album?.artist ?? props.artist)
   const filterArtist = async () => store.dispatch('moderation/hide', { type: 'artist', target: filterableArtist.value })
 
-  const { $npgettext } = useGettext()
+  const { $npgettext } = gettext
   const addMessage = (tracks: Track[]) => {
     if (!tracks.length) {
       return

front/src/store/moderation.ts

@@ -117,7 +117,7 @@ const store: Module<State, RootState> = {
     }
   },
   actions: {
-    hide ({ commit }, payload) {
+    hide ({ commit }, payload: State['filterModalTarget']) {
       commit('filterModalTarget', payload)
       commit('showFilterModal', true)
     },