fix: cleanup and fix mobile view

Author: michalsek

packages/audiodocs/src/audio/Equalizer.ts

@@ -14,7 +14,7 @@ export default class Equalizer {
       const filter = audioContext.createBiquadFilter();
       filter.type = frequencies[i].type;
       filter.frequency.value = frequencies[i].frequency;
-      // filter.Q.value = 1;
+      filter.Q.value = 1;
       filter.gain.value = 0;
       return filter;
     });

packages/audiodocs/src/canvasUtils/drawEQControlPoints.ts

@@ -18,41 +18,31 @@ export default function drawEQControlPoints(
   const controlPointSize = 48;
   const halfSize = controlPointSize / 2;
 
-  // Draw control points for each equalizer band
   frequencies.forEach((freqConfig, index) => {
     if (AudioManager.equalizer && AudioManager.equalizer.bands[index]) {
       const band = AudioManager.equalizer.bands[index];
       const frequency = freqConfig.frequency;
-
-      // Get current gain value in dB
       const gainValue = band.gain.value;
 
-      // Calculate X position based on frequency (logarithmic scale)
       const logFreq = Math.log10(frequency);
       const normalizedPos = (logFreq - logMin) / (logMax - logMin);
       let posX = x + (normalizedPos * width);
 
-      // Apply custom positioning:
-      // Points 1,2,5 keep their current positions, point 3 goes to center + 96px, point 4 reflects point 2
       if (index === 0) {
-        posX += 96; // Point 1 (index 0) - keep current position
+        posX += 96;
       } else if (index === 1) {
-        posX += 66; // Point 2 (index 1) - keep current position
+        posX += 66;
       } else if (index === 2) {
-        posX = x + width / 2 + 59; // Point 3 (index 2) - center + 86px to the right
+        posX = x + width / 2 + 59;
       } else if (index === 3) {
-        // Point 4 (index 3) - reflect point 2's position
-        posX -= 18; // Reflect point 2's position
+        posX -= 18;
       } else {
-        posX -= 96; // Point 5 (index 4) - keep current position
+        posX -= 96;
       }
 
-      // Calculate Y position based on gain value
-      // Assuming ±12dB range for display
-      const normalizedGain = gainValue / 12; // -1 to 1 range
+      const normalizedGain = gainValue / 12;
       const posY = y + height / 2 - (normalizedGain * height / 2);
 
-      // Draw outer circle (border)
       ctx.beginPath();
       ctx.arc(posX, posY, halfSize, 0, Math.PI * 2);
       ctx.fillStyle = fillColor;

packages/audiodocs/src/components/LandingWidget/SoundButton/styles.module.css

@@ -52,3 +52,13 @@
 [data-theme='dark'] .soundButtonActive .soundButtonName {
   color: var(--swm-navy-dark-100);
 }
+
+
+@media (max-width: 768px) {
+  .soundButtonInactive,
+  .soundButtonActive,
+  .soundButtonDisabled {
+    padding: 15px 12px;
+    margin: 0;
+  }
+}

packages/audiodocs/src/components/LandingWidget/Toolbar/index.tsx

@@ -39,7 +39,7 @@ const Toolbar: React.FC<ToolbarProps> = (props) => {
 
   return (
     <div className={styles.toolbar}>
-      <div>
+      <div className={styles.soundButtons}>
         {soundButtons.map(renderButton)}
       </div>
       <div>

packages/audiodocs/src/components/LandingWidget/Toolbar/styles.module.css

@@ -4,14 +4,30 @@
   margin-bottom: 12px;
 }
 
-
 .eqButton {
   padding: 15px 16px;
   border: none;
   margin-right: 8px;
   cursor: pointer;
 }
 
+@media (max-width: 768px) {
+  .eqButton {
+    display: none;
+  }
+
+  .toolbar {
+    width: 100%;
+  }
+
+  .soundButtons {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 12px;
+  }
+}
+
 .eqButtonText {
   font-size: 16px;
   font-weight: 400;

packages/audiodocs/src/components/LandingWidget/index.tsx

@@ -92,19 +92,31 @@ const LandingWidget: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <Toolbar
-        isLoading={isLoading}
-        soundButtons={buttons}
-        onPlaySound={onPlaySound}
-        displayType={displayType}
-        onSetDisplayType={setDisplayType}
-      />
+      <div className={styles.toolbarDesktop}>
+        <Toolbar
+          isLoading={isLoading}
+          soundButtons={buttons}
+          onPlaySound={onPlaySound}
+          displayType={displayType}
+          onSetDisplayType={setDisplayType}
+        />
+      </div>
 
       {displayType === 'equalizer' ? (
         <Equalizer />
       ) : (
         <Spectrogram />
       )}
+
+      <div className={styles.toolbarMobile}>
+        <Toolbar
+          isLoading={isLoading}
+          soundButtons={buttons}
+          onPlaySound={onPlaySound}
+          displayType={displayType}
+          onSetDisplayType={setDisplayType}
+        />
+      </div>
     </div>
   );
 }

packages/audiodocs/src/components/LandingWidget/styles.module.css

@@ -2,3 +2,19 @@
 .container {
   position: relative;
 }
+
+.toolbarMobile {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .toolbarMobile {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .toolbarDesktop {
+    display: none;
+  }
+}