feat(playback): fix concurrency

Even though we handled the connection/disconnection of nodes properly, the AudioContext marks an HTMLMediaElement as already attached to a node, so our best bet is to instantiate/dispose the AudioContext on demand (removing the console warning that appeared when booting the client along the way)

Also create a PromiseQueue class for enqueuing promises easily

Signed-off-by: Fernando Fernández <[email protected]>

Author: ferferga

frontend/src/App.vue

@@ -12,12 +12,13 @@
     </VApp>
     <Snackbar />
     <ConfirmDialog />
-    <PlayerElement />
+    <PlayerElement v-if="remote.auth.currentUser.value" />
   </JApp>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { remote } from './plugins/remote';
 import { themeSettings } from '#/store/settings/theme';
 import { useLoading } from '#/composables/use-loading';
 

frontend/src/components/Playback/MusicVisualizer.vue

@@ -20,12 +20,12 @@ function destroy(): void {
   }
 }
 
-watch(visualizerElement, () => {
+watch([visualizerElement, mediaWebAudio.sourceNode], () => {
   destroy();
 
-  if (visualizerElement.value) {
+  if (visualizerElement.value && mediaWebAudio.sourceNode.value) {
     visualizerInstance = new AudioMotionAnalyzer(visualizerElement.value, {
-      source: mediaWebAudio.sourceNode,
+      source: mediaWebAudio.sourceNode.value,
       connectSpeakers: false,
       mode: 2,
       gradient: 'prism',

frontend/src/components/Playback/PlayerElement.vue

@@ -7,16 +7,16 @@
       <div class="uno-relative">
         <Component
           :is="mediaElementType"
-          v-show="mediaElementType === 'video' && videoContainerRef"
+          v-show="playbackManager.isVideo.value && videoContainerRef"
           ref="mediaElementRef"
           :poster="String(posterUrl)"
           autoplay
           crossorigin
           playsinline
           :loop="playbackManager.isRepeatingOnce.value"
-          class="uno-h-full uno-max-h-100vh"
           :class="{
             'uno-object-fill uno-w-screen': playerElement.state.value.isStretched,
+            'uno-h-full uno-max-h-100vh': playbackManager.isVideo.value
           }"
           @loadeddata="onLoadedData">
           <track
@@ -37,9 +37,10 @@
 <script setup lang="ts">
 import Hls, { ErrorTypes, Events, type ErrorData } from 'hls.js';
 import HlsWorkerUrl from 'hls.js/dist/hls.worker.js?url';
-import { computed, nextTick, watch } from 'vue';
+import { computed, nextTick, onScopeDispose, watch } from 'vue';
 import { useTranslation } from 'i18next-vue';
 import { isNil } from '@jellyfin-vue/shared/validation';
+import { PromiseQueue } from '@jellyfin-vue/shared/promises';
 import { useSnackbar } from '#/composables/use-snackbar';
 import {
   mediaElementRef,
@@ -51,7 +52,7 @@ import { getImageInfo } from '#/utils/images';
 import { subtitleSettings } from '#/store/settings/subtitle';
 
 const { t } = useTranslation();
-let busyWebAudio = false;
+const webAudioQueue = new PromiseQueue();
 const hls = Hls.isSupported()
   ? new Hls({
     testBandwidth: false,
@@ -90,55 +91,29 @@ function detachHls(): void {
  * Suspends WebAudio when no playback is in place
  */
 async function detachWebAudio(): Promise<void> {
-  if (mediaWebAudio.context.state === 'running' && !busyWebAudio) {
-    busyWebAudio = true;
-
-    try {
-      if (mediaWebAudio.gainNode) {
-        mediaWebAudio.gainNode.gain.setValueAtTime(mediaWebAudio.gainNode.gain.value, mediaWebAudio.context.currentTime);
-        mediaWebAudio.gainNode.gain.exponentialRampToValueAtTime(0.0001, mediaWebAudio.context.currentTime + 1.5);
-        await nextTick();
-        await new Promise(resolve => globalThis.setTimeout(resolve));
-        mediaWebAudio.gainNode.disconnect();
-        mediaWebAudio.gainNode = undefined;
-      }
-
-      if (mediaWebAudio.sourceNode) {
-        mediaWebAudio.sourceNode.disconnect();
-        mediaWebAudio.sourceNode = undefined;
-      }
+  const { context, sourceNode } = mediaWebAudio;
 
-      await mediaWebAudio.context.suspend();
-    } catch {} finally {
-      busyWebAudio = false;
+  if (context.value) {
+    if (sourceNode.value) {
+      sourceNode.value.disconnect();
+      sourceNode.value = undefined;
     }
+
+    await context.value.close();
+    context.value = undefined;
   }
 }
 
 /**
  * Resumes WebAudio when playback is in place
  */
 async function attachWebAudio(el: HTMLMediaElement): Promise<void> {
-  if (mediaWebAudio.context.state === 'suspended' && !busyWebAudio) {
-    busyWebAudio = true;
+  const { context, sourceNode } = mediaWebAudio;
 
-    try {
-      await mediaWebAudio.context.resume();
-
-      mediaWebAudio.sourceNode = mediaWebAudio.context.createMediaElementSource(el);
-      mediaWebAudio.sourceNode.connect(mediaWebAudio.context.destination);
-
-      /**
-       * The gain node is to avoid cracks when stopping playback or switching really fast between tracks
-       */
-      mediaWebAudio.gainNode = mediaWebAudio.context.createGain();
-      mediaWebAudio.gainNode.connect(mediaWebAudio.context.destination);
-      mediaWebAudio.gainNode.gain.setValueAtTime(mediaWebAudio.gainNode.gain.value, mediaWebAudio.context.currentTime);
-      mediaWebAudio.gainNode.gain.exponentialRampToValueAtTime(1, mediaWebAudio.context.currentTime + 1.5);
-    } catch {} finally {
-      busyWebAudio = false;
-    }
-  }
+  context.value = new AudioContext();
+  sourceNode.value = context.value.createMediaElementSource(el);
+  await context.value.resume();
+  sourceNode.value.connect(context.value.destination);
 }
 
 /**
@@ -188,17 +163,19 @@ function onHlsEror(_event: typeof Hls.Events.ERROR, data: ErrorData): void {
   }
 }
 
-watch(mediaElementRef, async () => {
+watch(mediaElementRef, () => {
   detachHls();
-  await detachWebAudio();
+  void webAudioQueue.add(() => detachWebAudio());
 
   if (mediaElementRef.value) {
-    if (mediaElementType.value === 'video' && hls) {
+    if (playbackManager.isVideo.value && hls) {
       hls.attachMedia(mediaElementRef.value);
       hls.on(Events.ERROR, onHlsEror);
     }
 
-    await attachWebAudio(mediaElementRef.value);
+    if (playbackManager.isAudio.value) {
+      void webAudioQueue.add(() => attachWebAudio(mediaElementRef.value!));
+    }
   }
 });
 
@@ -238,4 +215,10 @@ watch(playbackManager.currentSourceUrl,
     }
   }
 );
+
+onScopeDispose(() => {
+  detachHls();
+  hls?.destroy();
+  void detachWebAudio();
+});
 </script>

frontend/src/plugins/remote/auth.ts

@@ -43,7 +43,7 @@ class RemotePluginAuth extends BaseState<AuthState> {
   public readonly servers = computed(() => this._state.value.servers);
   public readonly currentServer = computed(() => this._state.value.servers[this._state.value.currentServerIndex]);
   public readonly currentUser = computed(() => this._state.value.users[this._state.value.currentUserIndex]);
-  public readonly currentUserId = computed(() => this.currentUser.value.Id);
+  public readonly currentUserId = computed(() => this.currentUser.value?.Id);
   public readonly currentUserToken = computed(() => this._getUserAccessToken(this.currentUser.value));
   public readonly addedServers = computed(() => this._state.value.servers.length);
 

frontend/src/store/index.ts

@@ -50,9 +50,8 @@ export const mediaControls = useMediaControls(mediaElementRef);
  * WebAudio instance of the local media player
  */
 export const mediaWebAudio = {
-  context: new AudioContext(),
-  sourceNode: undefined as undefined | MediaElementAudioSourceNode,
-  gainNode: undefined as undefined | GainNode
+  context: shallowRef<AudioContext>(),
+  sourceNode: shallowRef<MediaElementAudioSourceNode>()
 };
 
 /**

packages/shared/src/universal/promises.ts

@@ -0,0 +1,38 @@
+export class PromiseQueue {
+  private concurrency: number;
+  private queue: (() => void)[] = [];
+  private activeCount = 0;
+
+  public constructor(concurrency = 1) {
+    this.concurrency = concurrency;
+  }
+
+  public add<T>(task: () => Promise<T>): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      const run = () => {
+        this.activeCount++;
+        /* eslint-disable promise/prefer-await-to-then, promise/catch-or-return */
+        task()
+          .then(resolve)
+          .catch(reject)
+          .finally(() => {
+            this.activeCount--;
+
+            // Dispara la siguiente tarea en la cola, si existe
+            const next = this.queue.shift();
+
+            if (next) {
+              next();
+            }
+          });
+        /* eslint-enable promise/prefer-await-to-then, promise/catch-or-return */
+      };
+
+      if (this.activeCount < this.concurrency) {
+        run();
+      } else {
+        this.queue.push(run);
+      }
+    });
+  }
+}