fix: music visualizer transitions and music hangs

jellyfin · Aug 9, 2023 · 832911e · 832911e
1 parent c84be20
commit 832911e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/frontend/src/components/Playback/MusicVisualizer.vue b/frontend/src/components/Playback/MusicVisualizer.vue
@@ -1,24 +1,27 @@
 <template>
-  <div ref="musicVisualizer" />
+  <div ref="visualizerElement" />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+/**
+ * TODO: When the WebAudio node is connected to audiomotion-analyzer, the volume
+ * of the media increases abruptly. Investigate why and fix.
+ */
+import { shallowRef, onMounted, onBeforeUnmount } from 'vue';
 import AudioMotionAnalyzer from 'audiomotion-analyzer';
-import { mediaElementRef } from '@/store';
+import { mediaWebAudio } from '@/store';
 
-let visualizer: AudioMotionAnalyzer;
-const musicVisualizer = ref(undefined);
+let visualizerInstance: AudioMotionAnalyzer;
+const visualizerElement = shallowRef<HTMLDivElement>();
 
 onMounted(() => {
-  visualizer = new AudioMotionAnalyzer(musicVisualizer.value, {
-    source: mediaElementRef.value,
+  visualizerInstance = new AudioMotionAnalyzer(visualizerElement.value, {
+    source: mediaWebAudio.sourceNode,
     mode: 2,
     gradient: 'prism',
     reflexRatio: 0.025,
     overlay: true,
-    showBgColor: true,
-    bgAlpha: 0,
+    showBgColor: false,
     fftSize: 16_384,
     frequencyScale: 'bark',
     showScaleX: false,
@@ -27,18 +30,10 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (visualizer) {
-    visualizer.toggleAnalyzer();
-    visualizer.disconnectInput();
-    visualizer.disconnectOutput();
-
-    if (mediaElementRef.value) {
-      const audioCtx = new AudioContext();
-
-      audioCtx
-        .createMediaElementSource(mediaElementRef.value)
-        .connect(audioCtx.destination);
-    }
+  if (visualizerInstance) {
+    visualizerInstance.disconnectInput();
+    visualizerInstance.disconnectOutput();
+    visualizerInstance = undefined;
   }
 });
 </script>
diff --git a/frontend/src/pages/playback/music/index.vue b/frontend/src/pages/playback/music/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-main>
+  <v-main v-if="playbackManager.queue">
     <v-app-bar color="transparent">
       <app-bar-button-layout @click="$router.back()">
         <template #icon>
@@ -19,7 +19,7 @@
       </app-bar-button-layout>
     </v-app-bar>
     <v-col class="px-0">
-      <transition v-if="playbackManager.queue">
+      <v-fade-transition mode="out-in">
         <swiper
           v-if="!isVisualizing"
           class="d-flex justify-center align-center user-select-none"
@@ -46,7 +46,12 @@
         </swiper>
         <music-visualizer
           v-else
+<<<<<<< HEAD
           class="d-flex justify-center align-center user-select-none presentation-height" />
+=======
+          class="d-flex justify-center align-center user-select-none"
+          style="height: 65vh" />
+>>>>>>> 1b7be01f (fix: music visualizer transitions and music hangs)
       </v-fade-transition>
       <v-row class="justify-center align-center mt-3">
         <v-col cols="6">