feat: clicking visualizer button toggles the screen

resources/assets/js/components/layout/app-footer/FooterExtraControls.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="extra-controls" data-testid="other-controls">
     <div class="wrapper">
-      <a
+      <button
         v-koel-tooltip.top
         class="visualizer-btn"
         data-testid="toggle-visualizer-btn"
-        href="/#/visualizer"
-        title="Show the visualizer"
+        title="Toggle visualizer"
+        @click.prevent="toggleVisualizer"
       >
         <Icon :icon="faBolt" />
-      </a>
+      </button>
 
       <button
         v-if="useEqualizer"
@@ -41,15 +41,20 @@
 import { faBolt, faCompress, faExpand, faSliders } from '@fortawesome/free-solid-svg-icons'
 import { computed, onMounted, ref } from 'vue'
 import { eventBus, isAudioContextSupported as useEqualizer, isFullscreenSupported } from '@/utils'
+import { useRouter } from '@/composables'
 
 import Volume from '@/components/ui/Volume.vue'
 
 const isFullscreen = ref(false)
 const fullscreenButtonTitle = computed(() => (isFullscreen.value ? 'Exit fullscreen mode' : 'Enter fullscreen mode'))
 
+const { go, isCurrentScreen } = useRouter()
+
 const showEqualizer = () => eventBus.emit('MODAL_SHOW_EQUALIZER')
 const toggleFullscreen = () => eventBus.emit('FULLSCREEN_TOGGLE')
 
+const toggleVisualizer = () => go(isCurrentScreen('Visualizer') ? -1 : 'visualizer')
+
 onMounted(() => {
   document.addEventListener('fullscreenchange', () => {
     isFullscreen.value = Boolean(document.fullscreenElement)

resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`renders 1`] = `
 <div data-v-8bf5fe81="" class="extra-controls" data-testid="other-controls">
-  <div data-v-8bf5fe81="" class="wrapper"><a data-v-8bf5fe81="" class="visualizer-btn" data-testid="toggle-visualizer-btn" href="/#/visualizer" title="Show the visualizer"><br data-v-8bf5fe81="" data-testid="Icon" icon="[object Object]"></a>
+  <div data-v-8bf5fe81="" class="wrapper"><button data-v-8bf5fe81="" class="visualizer-btn" data-testid="toggle-visualizer-btn" title="Toggle visualizer"><br data-v-8bf5fe81="" data-testid="Icon" icon="[object Object]"></button>
     <!--v-if--><br data-v-8bf5fe81="" data-testid="Volume">
     <!--v-if-->
   </div>

resources/assets/js/components/layout/main-wrapper/MainContent.vue

@@ -64,7 +64,7 @@ const NotFoundScreen = defineAsyncComponent(() => import('@/components/screens/N
 const VisualizerScreen = defineAsyncComponent(() => import('@/components/screens/VisualizerScreen.vue'))
 
 const { useYouTube } = useThirdPartyServices()
-const { resolveRoute, onRouteChanged, getCurrentScreen } = useRouter()
+const { onRouteChanged, getCurrentScreen } = useRouter()
 
 const currentSong = requireInjection(CurrentSongKey, ref(undefined))
 

resources/assets/js/router.ts

@@ -101,7 +101,12 @@ export default class Router {
     this.$currentRoute.value.params = params
   }
 
-  public go (path: string) {
+  public go (path: string | number) {
+    if (typeof path === 'number') {
+      history.go(path)
+      return
+    }
+
     if (!path.startsWith('/')) {
       path = `/${path}`
     }