fix: visualizer stopped working

resources/assets/js/components/ui/ViewModeSwitch.vue

@@ -61,7 +61,7 @@ const value = computed({
     }
   }
 
-  @media only screen and(max-width: 768px) {
+  @media only screen and (max-width: 768px) {
     margin-top: 8px;
   }
 }

resources/assets/js/components/ui/Visualizer.vue

@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import initVisualizer from '@/utils/visualizer'
-import { eventBus } from '@/utils'
+import { eventBus, logger } from '@/utils'
 
 import CloseModalBtn from '@/components/ui/BtnCloseModal.vue'
 
@@ -31,6 +31,7 @@ onMounted(() => {
   try {
     initVisualizer(el.value!)
   } catch (e) {
+    logger.warn('Failed to initialize visualizer', e)
     // in e.g., DOM testing, the call will fail due to the lack of proper API support
   }
 })

resources/assets/js/utils/visualizer.ts

@@ -161,7 +161,7 @@ export default (container: HTMLElement) => {
   Sketch.create({
     container,
     particles: [],
-    init () {
+    setup () {
       // generate some particles
       for (let i = 0; i < NUM_PARTICLES; i++) {
         const particle = new Particle(random(this.width), random(this.height))
@@ -170,7 +170,6 @@ export default (container: HTMLElement) => {
         this.particles.push(particle)
       }
 
-      // setup the audio analyser
       const analyser = new AudioAnalyser(NUM_BANDS, SMOOTHING)
 
       // update particles based on fft transformed audio frequencies