[RZA-250159]: fixed keyboard and audio toggle button issue

Author: recursivezero

src/assets/styles/draw.css

@@ -304,20 +304,7 @@
 }
 
 @media (max-width: 480px) {
-  #keyboard-trigger {
-    height: 32px !important;
-    width: 32px !important;
-  }
 
-  .share-trigger-button {
-    height: 32px !important;
-    width: 32px !important;
-  }
-
-  .share-trigger-button svg {
-    height: 12px !important;
-    width: 12px !important;
-  }
 
   .controls {
     right: 0;
@@ -349,4 +336,4 @@
 
 .controls {
   z-index: 100;
-}
+}

src/assets/styles/varnmala/reader.css

@@ -28,10 +28,9 @@
   padding: 0.5rem;
 }
 
-.container__reader > .letter {
+.container__reader>.letter {
   width: 100%;
   box-sizing: border-box;
-  margin-left: 4rem;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
@@ -187,12 +186,12 @@
     font-size: min(200rem, 70vw);
   }
 
-  .container__reader > .letter {
+  .container__reader>.letter {
     justify-content: center;
     margin-left: auto;
   }
 
   .mute-button {
     font-size: min(1.5rem, 6vw);
   }
-}
+}

src/components/ControllerContainer.astro

@@ -7,7 +7,7 @@ import BackgroundToggle from "@/components/draw/BgToggle.astro";
 import ResetButton from "@/components/draw/ResetButton.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import Help from "@/components/Help.astro";
-import Speak from "@/components/Speaker.astro";
+import AudioToggle from "@/components/Speaker.astro";
 import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
 ---
 
@@ -22,7 +22,7 @@ import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
     <KeyboardTrigger />
     <SharePopover />
   </div>
-  <Speak />
+  <AudioToggle />
   <Help
     title="Draw Keyboard"
     description="Draw letters by sliding your finger across the keys! Try the buttons to change the style, make it BIG or small, change the images, pick cool backgrounds, and customize font colors!"
@@ -57,6 +57,7 @@ import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
       isKeyboardNav = false;
       controlButtons.forEach((btn) => btn.classList.remove("keyboard-focus"));
     });
+    //for the audio feature
     document.addEventListener("keydown", (event) => {
       const e = event as KeyboardEvent;
       if (e.key === "Tab") {

src/components/KeyboardTrigger.astro

@@ -2,19 +2,24 @@
 import KeyboardIcon from "@/assets/icons/KeyboardIcon.svg";
 ---
 
-<button id="keyboard-trigger" aria-label="Toggle virtual keyboard">
+<button id="keyboard-trigger" class="show_on_touch" aria-label="Toggle virtual keyboard">
   <KeyboardIcon />
 </button>
 
 <style>
+  @media (hover: none), (pointer: coarse) {
+    .show_on_touch {
+      display: flex !important;
+    }
+  }
+
   #keyboard-trigger {
     background-color: transparent;
     color: var(--primary);
     border: 1px solid var(--primary);
     border-radius: 50%;
     width: 49px;
     height: 49px;
-    display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -33,6 +38,9 @@ import KeyboardIcon from "@/assets/icons/KeyboardIcon.svg";
 </style>
 
 <script>
+  const showOnTouchElement = document.querySelector(".show_on_touch");
+  const isTouchDevice = window.matchMedia("(hover: none), (pointer: coarse)").matches;
+  (showOnTouchElement as HTMLElement).style.display = isTouchDevice ? "flex" : "none";
   let currentHiddenInput: HTMLInputElement | null = null;
   let isKeyboardForcedOpen: boolean = false;
 

src/components/Speaker.astro

@@ -5,15 +5,16 @@ declare global {
   }
 }
 
-//Append this to script section where you want to add this feature:
+//Append this to script on keydown section where you want to add this feature:
 /*    
-    document.addEventListener('keydown', (event) => {
-    const key = event.key;
-    if (key.length === 1 && key.match(/[a-z]/i)) {
-      if (window.playLetterSound) {
-        window.playLetterSound(key.toLowerCase());
-      }
+  const attachAudio = (key: string) => {
+    if (/[A-Z]/i.test(key)) {
+      window?.playLetterSound(key.toLowerCase());
     }
+  };
+  document.addEventListener("keydown", (event) => {
+    const {key} =event;
+    attachAudio(key)
   });
 */
 ---

src/pages/draw.astro

@@ -2,7 +2,7 @@
 import "@/assets/styles/draw.css";
 import Back from "@/components/Back.astro";
 import ControlsContainer from "@/components/ControllerContainer.astro";
-import Keyboard from "@/components/DrawKeyboard.astro";
+import DrawComponent from "@/components/DrawKeyboard.astro";
 import MobileSplash from "@/components/MobileSplash.astro";
 import BaseLayout from "@/layouts/Base";
 
@@ -19,5 +19,5 @@ const meta = {
   <Fragment slot="header-right">
     <ControlsContainer />
   </Fragment>
-  <Keyboard />
+  <DrawComponent />
 </BaseLayout>

src/pages/varnmala/listen.astro

@@ -5,6 +5,7 @@ import BaseLayout from "@/layouts/Base";
 import BackButton from "@/components/BackButton.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
+import Speaker from "@/components/Speaker.astro";
 
 const meta = {
   title: "Varnmala • Listen",
@@ -16,20 +17,7 @@ const meta = {
 <BaseLayout meta={meta}>
   <BackButton />
   <Fragment slot="header-right">
-    <div class="action">
-      <button type="button" title="click audio" id="mute" class="mute-button mute-button-audio"></button>
-    </div>
-
-    <div class="voices-dropdown">
-      <button type="button" id="voices-btn" class="voices-btn">
-        <span id="selected-voice-text">Choose Voice</span> ▼
-      </button>
-      <div id="voices-options" class="voices-options">
-        <div data-name="" class="voice-option">Choose Voice</div>
-        <div data-name="mudra" class="voice-option">👧 Mudra</div>
-        <div data-name="rutvi" class="voice-option">👧 Rutvi</div>
-      </div>
-    </div>
+    <Speaker />
     <KeyboardTrigger />
     <SharePopover />
     <Help
@@ -52,70 +40,6 @@ const meta = {
   import { getRandomValue } from "@/utils/index";
 
   const mainBlock = document.querySelector("#letter") as HTMLElement;
-  const muteButton = document.querySelector("#mute") as HTMLButtonElement;
-  const audioPlayer = document.querySelector("#audioPlayer") as HTMLAudioElement;
-
-  const voicesButton = document.querySelector("#voices-btn") as HTMLButtonElement;
-  const selectedVoiceText = document.querySelector("#selected-voice-text") as HTMLSpanElement;
-  const voicesOptionsContainer = document.querySelector("#voices-options") as HTMLElement;
-  const voiceOptionElements = Array.from(voicesOptionsContainer.querySelectorAll(".voice-option")) as HTMLElement[];
-
-  let speakerName: string | null = null;
-  let isMuted = false;
-
-  function setSpeaker(name: string | null | undefined, displayText: string) {
-    speakerName = name ?? null;
-    selectedVoiceText.textContent = displayText;
-
-    voiceOptionElements.forEach((opt) => {
-      opt.classList.toggle("active", opt.dataset.name === name);
-    });
-    if (voicesOptionsContainer) {
-      voicesOptionsContainer.classList.remove("show");
-    }
-  }
-
-  // Initially set the active voice (e.g., the first one)
-  if (voiceOptionElements.length > 0) {
-    //setActiveVoice(voiceOptionElements[0].dataset.name);
-  } else {
-    setSpeaker(null, "Choose Voice");
-  }
-
-  if (voicesButton) {
-    voicesButton.addEventListener("click", (e) => {
-      e.stopPropagation();
-      voicesOptionsContainer?.classList.toggle("show");
-    });
-  }
-
-  voiceOptionElements.forEach((option) => {
-    option.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const target = e.currentTarget as HTMLElement;
-      setSpeaker(target.dataset.name, target.textContent || "Voice");
-    });
-  });
-
-  document.addEventListener("click", (e) => {
-    if (
-      voicesButton &&
-      !voicesButton.contains(e.target as Node) &&
-      voicesOptionsContainer &&
-      !voicesOptionsContainer.contains(e.target as Node)
-    ) {
-      voicesOptionsContainer.classList.remove("show");
-    }
-  });
-
-  if (muteButton) {
-    muteButton.addEventListener("click", (e: MouseEvent) => {
-      isMuted = !isMuted;
-      audioPlayer.muted = isMuted;
-      const target = e.target as HTMLButtonElement;
-      target.classList.toggle("mute");
-    });
-  }
 
   const getEmoji = (letter: string): string => {
     type List = { [key: string]: number[] };
@@ -128,65 +52,30 @@ const meta = {
     return "";
   };
 
-  const attachAudio = (key: string, isNumberSound = false) => {
-    if (!speakerName) {
-      console.warn("No speaker selected. Cannot play audio.");
-      return;
-    }
-
-    let keyName;
-    let location = "/assets/media/";
-    if (isNumberSound) {
-      keyName = key.replace("Digit", "");
-      location += "numbers";
-    } else {
-      keyName = key.replace("Key", "").toLowerCase();
-      location += "alphabets";
-    }
-    const source = `${location}/${speakerName}/${keyName}.ogg`;
-
-    if (audioPlayer) {
-      audioPlayer.src = source;
-      audioPlayer.load();
-      audioPlayer.oncanplaythrough = async () => {
-        if (!isMuted) {
-          try {
-            await audioPlayer.play();
-          } catch (playError: unknown) {
-            if (
-              playError instanceof Error &&
-              (playError.name === "NotAllowedError" || playError.name === "NotSupportedError")
-            ) {
-              console.error(`Audio play error for ${source}: ${playError.name}. User interaction might be required.`);
-            } else {
-              console.error(`Audio play error for ${source}:`, playError);
-            }
-          }
-        }
-      };
-      audioPlayer.onerror = () => {
-        console.error(`Error loading audio source: ${source}`, audioPlayer.error);
-      };
-    }
-  };
-
   const isNonPrintingKey = (e: KeyboardEvent): boolean => {
     const { altKey, ctrlKey, metaKey, shiftKey } = e;
     return metaKey || ctrlKey || shiftKey || altKey;
   };
 
+  //for the audio feature
+  const attachAudio = (key: string) => {
+    if (/[A-Z]/i.test(key)) {
+      window?.playLetterSound(key.toLowerCase());
+    }
+  };
+
   document.addEventListener("keydown", (e: KeyboardEvent) => {
-    const { key, code } = e;
+    const { key } = e;
     if (!mainBlock) return;
 
     if (!isNonPrintingKey(e)) {
       if (/^[A-Z]$/i.test(key)) {
         const emoji = getEmoji(key);
         mainBlock.innerHTML = key + emoji;
-        if (muteButton) attachAudio(code);
+        attachAudio(key);
       } else if (/^[0-9]$/.test(key)) {
         mainBlock.innerHTML = key;
-        if (muteButton) attachAudio(code, true);
+        //attachAudio(key);
       } else {
         const x = String.fromCodePoint(112080);
         mainBlock.innerHTML = x;