fix: make progress bars work again

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>

front/.eslintrc.js

@@ -38,7 +38,6 @@ module.exports = {
     '@intlify/vue-i18n/valid-message-syntax': 'error',
     '@intlify/vue-i18n/no-i18n-t-path-prop': 'error',
     '@intlify/vue-i18n/no-missing-keys': 'error',
-    '@intlify/vue-i18n/no-dynamic-keys': 'error',
     '@intlify/vue-i18n/no-unused-keys': ['error', {
       extensions: ['.ts', '.vue'],
       enableFix: true

front/package.json

@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "2.0.0",
-    "@intlify/unplugin-vue-i18n": "^0.8.1",
+    "@intlify/unplugin-vue-i18n": "^0.8.2",
     "@types/diff": "5.0.2",
     "@types/dompurify": "2.4.0",
     "@types/howler": "2.2.7",
@@ -72,7 +72,7 @@
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "@vitejs/plugin-vue": "4.0.0",
     "@vitest/coverage-c8": "0.25.8",
-    "@vue/compiler-sfc": "3.2.45",
+    "@vue/compiler-sfc": "3.2.47",
     "@vue/eslint-config-standard": "8.0.1",
     "@vue/eslint-config-typescript": "11.0.2",
     "@vue/test-utils": "2.2.7",

front/src/api/player.ts

@@ -79,15 +79,15 @@ export class HTMLSound implements Sound {
     })
 
     useEventListener(this.#audio, 'waiting', () => {
-      console.log('>> AUDIO WAITING', this.__track?.title)
+      console.log('>> AUDIO WAITING', this)
     })
 
     useEventListener(this.#audio, 'playing', () => {
-      console.log('>> AUDIO PLAYING', this.__track?.title)
+      console.log('>> AUDIO PLAYING', this)
     })
 
     useEventListener(this.#audio, 'stalled', () => {
-      console.log('>> AUDIO STALLED', this.__track?.title)
+      console.log('>> AUDIO STALLED', this)
     })
 
     useEventListener(this.#audio, 'loadeddata', () => {
@@ -96,7 +96,7 @@ export class HTMLSound implements Sound {
     })
 
     useEventListener(this.#audio, 'error', (err) => {
-      console.error('>> AUDIO ERRORED', err, this.__track?.title)
+      console.error('>> AUDIO ERRORED', err, this)
       this.isErrored.value = true
       this.isLoaded.value = true
     })
@@ -104,7 +104,7 @@ export class HTMLSound implements Sound {
 
   async preload () {
     this.isErrored.value = false
-    console.log('CALLING PRELOAD ON', this.__track?.title)
+    console.log('CALLING PRELOAD ON', this)
     this.#audio.load()
   }
 

front/src/components/Queue.vue

@@ -2,7 +2,7 @@
 import type { QueueItemSource } from '~/types'
 
 import { whenever, watchDebounced, useCurrentElement, useScrollLock, useFullscreen, useIdle, refAutoReset, useStorage } from '@vueuse/core'
-import { nextTick, ref, computed, watchEffect, watch, defineAsyncComponent } from 'vue'
+import { nextTick, ref, computed, watchEffect, defineAsyncComponent } from 'vue'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -27,7 +27,6 @@ const {
   isPlaying,
   currentTime,
   duration,
-  progress,
   bufferProgress,
   seekTo,
   loading: isLoadingAudio,
@@ -108,13 +107,6 @@ const touchProgress = (event: MouseEvent) => {
   seekTo(time)
 }
 
-const animated = ref(false)
-watch(currentTrack, async track => {
-  animated.value = false
-  await nextTick()
-  animated.value = true
-})
-
 const play = async (index: number) => {
   isPlaying.value = true
   return playTrack(index)
@@ -368,7 +360,7 @@ if (!isWebGLSupported) {
                   :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
                 />
                 <div
-                  :class="['position bar', { animated }]"
+                  class="position bar"
                   :style="{
                     animationDuration: duration + 's',
                     animationPlayState: isPlaying
@@ -416,23 +408,21 @@ if (!isWebGLSupported) {
           <h2 class="ui header">
             <div class="content">
               <button
+                v-t="'components.Queue.button.close'"
                 class="ui right floated basic button"
                 @click="$store.commit('ui/queueFocused', null)"
-              >
+              />
-                {{ $t('components.Queue.button.close') }}
-              </button>
               <button
+                v-t="'components.Queue.button.clear'"
                 class="ui right floated basic button danger"
                 @click="clear"
-              >
+              />
-                {{ $t('components.Queue.button.clear') }}
-              </button>
               {{ labels.queue }}
               <div class="sub header">
                 <div>
-                  {{ $t('components.Queue.meta.queuePosition', {index: currentIndex +1, length: queue.length}) }}
+                  <span v-t="{ path: 'components.Queue.meta.queuePosition', args: { index: currentIndex + 1, length: queue.length } }" />
                   <span class="middle pipe symbol" />
-                  {{ $t('components.Queue.meta.end') }}
+                  <span v-t="'components.Queue.meta.end'" />
                   <span :title="labels.duration">
                     {{ endsIn }}
                   </span>

front/src/components/audio/Player.vue

@@ -27,7 +27,6 @@ const {
   seekTo,
   currentTime,
   duration,
-  progress,
   bufferProgress,
   loading: isLoadingAudio
 } = usePlayer()
@@ -131,10 +130,9 @@ const hideArtist = () => {
   >
     <h1
       id="player-label"
+      v-t="'components.audio.Player.header.player'"
       class="visually-hidden"
-    >
+    />
-      {{ $t('components.audio.Player.header.player') }}
-    </h1>
     <div
       class="ui inverted segment fixed-controls"
       @click.prevent.stop="toggleMobilePlayer"
@@ -305,18 +303,14 @@ const hideArtist = () => {
                 @click.stop="toggleMobilePlayer"
               >
                 <i class="stream icon" />
-                <span>
+                <span v-t="{ path: 'components.audio.Player.meta.position', args: { index: currentIndex + 1, length: queue.length } }" />
-                  {{ $t('components.audio.Player.meta.position', { index: currentIndex + 1, length: queue.length }) }}
-                </span>
               </button>
               <button
                 class="position circular control button desktop-and-below"
                 @click.stop="switchTab"
               >
                 <i class="stream icon" />
-                <span>
+                <span v-t="{ path: 'components.audio.Player.meta.position', args: { index: currentIndex + 1, length: queue.length } }" />
-                  {{ $t('components.audio.Player.meta.position', { index: currentIndex + 1, length: queue.length }) }}
-                </span>
               </button>
 
               <button

front/src/composables/audio/player.ts

@@ -167,7 +167,13 @@ export const usePlayer = createGlobalState(() => {
   }, 1000)
 
   // Progress
-  const progress = ref(0)
+  useRafFn(() => {
+    const sound = currentSound.value
+    document.documentElement.style.setProperty('--fw-track-progress', sound
+      ? `${(sound.currentTime / sound.duration * 100).toFixed(Math.log(window.innerWidth))}%`
+      : '0'
+    )
+  })
 
   // Loading
   const loading = computed(() => {
@@ -207,7 +213,6 @@ export const usePlayer = createGlobalState(() => {
     seekBy,
     seekTo,
     bufferProgress,
-    progress,
     loading,
     errored
   }

front/src/composables/audio/queue.ts

@@ -1,6 +1,6 @@
 import type { Track, Upload } from '~/types'
 
-import { createGlobalState, useNow, useStorage, useTimeAgo, whenever } from '@vueuse/core'
+import { createGlobalState, useStorage, useTimeAgo, whenever } from '@vueuse/core'
 import { computed, ref, shallowReactive, watchEffect } from 'vue'
 import { shuffle as shuffleArray, sum } from 'lodash-es'
 import { useClamp } from '@vueuse/math'

front/src/composables/audio/tracks.ts

@@ -127,7 +127,6 @@ export const useTracks = createGlobalState(() => {
   // Preload next track
   const { start: preload, stop: abortPreload } = useTimeoutFn(async (track: QueueTrack) => {
     const sound = await createSound(track)
-    sound.__track = track
     await sound.preload()
   }, 100, { immediate: false })
 

front/src/style/components/_player.scss

@@ -48,7 +48,7 @@
   .ui.progress .bar {
     transition: none;
     width: 100%;
-    transform: translateX(-100%);
+    transform: translateX(calc(var(--fw-track-progress) - 100%));
     transform-origin: top left;
     will-change: transform;
     position: absolute;

front/src/style/components/_queue.scss

@@ -160,7 +160,7 @@
   .ui.progress .bar {
     transition: none;
     width: 100%;
-    transform: translateX(-100%);
+    transform: translateX(calc(var(--fw-track-progress) - 100%));
     transform-origin: top left;
     will-change: transform;
   }
@@ -171,18 +171,6 @@
   .ui.progress:not(.indeterminate)
     .bar.position:not(.buffer) {
     background: var(--vibrant-color);
-    will-change: transform;
-    
-    
-    &.animated {
-      @keyframes progress {
-        0% { transform: translate3d(-100%, 0, 0) }
-        100% { transform: translate3d(0, 0, 0) }
-      }
-      
-      animation-name: progress;
-      animation-timing-function: linear;
-    }
   }
 
   .indicating.progress .bar {

front/src/style/globals/_app.scss

@@ -2,6 +2,11 @@
 html {
   scroll-behavior: smooth;
 }
+
+:root {
+  --fw-track-progress: 0;
+}
+
 @media screen and (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;

front/vite.config.ts

@@ -6,6 +6,7 @@ import { resolve } from 'path'
 import { visualizer } from 'rollup-plugin-visualizer'
 
 import manifest from './pwa-manifest.json'
+import Vue from '@vitejs/plugin-vue'
 
 const port = +(process.env.VUE_PORT ?? 8080)
 

front/yarn.lock

@@ -1331,7 +1331,7 @@
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.3.0-beta.17.tgz#1180dcb0b30741555fad0b62e4621802e8272ee5"
   integrity sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==
 
-"@intlify/unplugin-vue-i18n@^0.8.1":
+"@intlify/unplugin-vue-i18n@^0.8.2":
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/@intlify/unplugin-vue-i18n/-/unplugin-vue-i18n-0.8.2.tgz#4196cb5bee4243bb3a33af76ce9663f3e106809a"
   integrity sha512-cRnzPqSEZQOmTD+p4pwc3RTS9HxreLqfID0keoqZDZweCy/CGRMLLTNd15S4TUf1vSBhPF03DItEFDr1F+8MDA==
@@ -2226,7 +2226,7 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-sfc@^3.2.45":
+"@vue/compiler-sfc@3.2.47", "@vue/compiler-sfc@^3.2.45":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz#1bdc36f6cdc1643f72e2c397eb1a398f5004ad3d"
   integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==