audio modal changes, added Tajweed word type

and some more minor changes and fixes.
marwan · Mar 6, 2024 · 4ad3754 · 4ad3754
1 parent b80ee9f
commit 4ad3754
Show file tree

Hide file tree

Showing 15 changed files with 202 additions and 100 deletions.
diff --git a/public/global.css b/public/global.css
@@ -86,11 +86,12 @@ svg {
 }
 
 .arabic-font-1,
-.arabic-font-2 {
+.arabic-font-2,
+.arabic-font-3 {
   direction: rtl;
 }
 
-.arabic-font-1 {
+.arabic-font-1, .arabic-font-3 {
   font-family: "Uthmani-Hafs";
 }
 

diff --git a/rollup.config.js b/rollup.config.js
@@ -34,7 +34,6 @@ export default {
   plugins: [
     alias({
       entries: {
-        $components: path.resolve(__dirname, "./src/components"),
         $ui: path.resolve(__dirname, "./src/components/ui"),
         $modals: path.resolve(__dirname, "./src/components/ui/modals"),
         $verses: path.resolve(__dirname, "./src/components/verses"),

diff --git a/src/components/svgs/Logo.svelte b/src/components/svgs/Logo.svelte
@@ -1,5 +1,5 @@
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="w-56 md:w-64" viewBox="0 0 5430 1350" preserveAspectRatio="xMidYMid meet">
-  <g id="layer101" fill="#6B7280" stroke="none">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="w-56" viewBox="0 0 5430 1350" preserveAspectRatio="xMidYMid meet">
+  <g id="layer101" fill="currentColor" stroke="none">
     <path d="M510 1130 c0 -93 -2 -170 -5 -170 -3 0 -22 7 -43 16 -54 23 -179 21 -235 -4 -67 -30 -121 -84 -153 -154 -24 -54 -28 -75 -28 -153 0 -77 4 -99 28 -151 53 -118 145 -177 276 -178 56 0 87 5 123 22 40 18 49 19 54 7 4 -11 23 -15 74 -15 l69 0 0 475 0 475 -80 0 -80 0 0 -170z m-76 -275 c19 -9 43 -34 57 -58 20 -36 24 -55 24 -132 0 -77 -4 -96 -24 -132 -29 -50 -71 -73 -134 -73 -57 0 -105 32 -135 90 -20 39 -23 56 -20 127 4 68 9 88 32 123 43 66 128 89 200 55z" />
     <path d="M954 990 c-98 -14 -165 -71 -194 -166 -7 -23 -14 -128 -17 -256 l-5 -218 81 0 81 0 0 206 c0 228 7 262 61 289 41 22 105 19 150 -7 l39 -22 0 -233 0 -233 80 0 80 0 0 320 0 320 -75 0 c-68 0 -75 -2 -75 -20 0 -24 2 -24 -51 -1 -58 24 -93 29 -155 21z" />
     <path d="M1867 990 c-100 -18 -165 -128 -137 -231 14 -52 69 -111 128 -139 39 -19 165 -48 210 -50 21 0 13 -50 -13 -75 -20 -21 -33 -25 -88 -25 -37 0 -87 8 -119 19 l-55 19 -7 -55 c-3 -30 -4 -58 -1 -63 13 -21 142 -52 220 -53 91 -1 139 17 180 65 38 45 46 90 52 273 3 94 10 176 15 183 6 6 22 12 36 12 25 0 25 1 18 62 -3 34 -8 63 -10 66 -3 2 -33 1 -67 -3 -50 -6 -68 -13 -99 -41 -37 -33 -37 -33 -55 -14 -34 38 -137 62 -208 50z m186 -134 c26 -17 27 -22 27 -97 l0 -79 -37 0 c-48 0 -115 31 -137 61 -23 34 -21 94 5 120 17 17 30 20 68 17 26 -3 59 -13 74 -22z" />

diff --git a/src/components/ui/Drawer.svelte b/src/components/ui/Drawer.svelte
@@ -50,8 +50,9 @@
       <div class="flex flex-row justify-between items-center">
         <label for="quran-font-list" class="block text-gray-900 daaark:text-white">Quran Font</label>
         <select id="quran-font-list" on:change={(event) => updateSettings({ type: "wordType", value: +event.target.value })} bind:value={$wordTypeStore} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500">
-          <option value={1}>Uthmani</option>
-          <option value={2}>IndoPak</option>
+          <option value={1}>Uthmani Hafs</option>
+          <option value={2}>Naskh Nastaleeq IndoPak</option>
+          <option value={3}>Uthmani Tajweed</option>
         </select>
       </div>
       <p class="mb-6 text-xs text-gray-500 daaark:text-gray-400">Select the Quranic font type depending on your region.</p>
@@ -131,7 +132,7 @@
         <label for="word-translations-list" class="block text-gray-900 daaark:text-white">Word</label>
         <select id="word-translations-list" onchange="update_settings('translation', ['word'])" class="w-24 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500" />
       </div>
-      <p class="mb-6 text-xs text-gray-500 daaark:text-gray-400">Select the word translation which will be displaced under the arabic word text.</p>
+      <p class="mb-6 text-xs text-gray-500 daaark:text-gray-400 {disabledElement}">Select the word translation which will be displaced under the arabic word text.</p>
 
       <div class="flex flex-row justify-between items-center">
         <label for="verse-translations-list" class="block text-gray-900 daaark:text-white">Verse</label>

diff --git a/src/components/ui/Navbar.svelte b/src/components/ui/Navbar.svelte
@@ -19,7 +19,7 @@
       <span class="text-xs pl-2 hidden sm:block">Home</span>
     </Link>
 
-    <button id="navigationDropdownButton" data-dropdown-toggle="navigationDropdown" class="flex items-center py-2 pl-3 pr-4 text-sm border-gray-200 w-auto p-2 hover:bg-[#ebebeb] rounded-lg">
+    <button id="navigationDropdownButton" data-dropdown-toggle="navigationDropdown" class="flex items-center py-2 px-3 text-sm border-gray-200 w-auto p-2 hover:bg-[#ebebeb] rounded-lg">
       <span id="navbar-top-title">
         {#if $currentPageStore === "chapter"}
           {quranMetaData[$chapterNumberStore].transliteration} ({quranMetaData[$chapterNumberStore].translation})

diff --git a/src/components/ui/modals/AudioModal.svelte b/src/components/ui/modals/AudioModal.svelte
@@ -1,47 +1,12 @@
 <script>
   import { quranMetaData } from "$data/quranMeta";
-  import { chapterNumberStore, audioSettingsStore } from "$utils/stores";
-  import { initializeAudio } from "$utils/audioController";
+  import { currentPageStore, chapterNumberStore, audioSettingsStore } from "$utils/stores";
+  import { initializeAudio, updateAudioSettings } from "$utils/audioController";
   import { toggleModal } from "$utils/toggleModal";
-  import { disabledElement } from "$utils/commonStyles";
+  import { disabledElement, buttonElement } from "$utils/commonStyles";
   import Play from "$svgs/Play.svelte";
 
-  let endVerseStartingIndex = 0;
-
-  $: console.table($audioSettingsStore);
-
-  function updateRange(event) {
-    $audioSettingsStore.audioRange = event.target.id;
-
-    switch (event.target.id) {
-      case "playThisVerse":
-        $audioSettingsStore.startVerse = $audioSettingsStore.playingVerse;
-        $audioSettingsStore.endVerse = $audioSettingsStore.playingVerse;
-        break;
-
-      case "playFromHere":
-        $audioSettingsStore.startVerse = $audioSettingsStore.playingVerse;
-        $audioSettingsStore.endVerse = quranMetaData[$audioSettingsStore.playingChapter].verses;
-        break;
-    }
-  }
-
-  function updateStartVerse(event) {
-    $audioSettingsStore.startVerse = +event.target.value;
-    endVerseStartingIndex = $audioSettingsStore.startVerse - 1;
-    fixEndVerse();
-  }
-
-  function updateEndVerse(event) {
-    $audioSettingsStore.endVerse = +event.target.value;
-    fixEndVerse();
-  }
-
-  function fixEndVerse() {
-    if ($audioSettingsStore.endVerse < $audioSettingsStore.startVerse) {
-      $audioSettingsStore.endVerse = $audioSettingsStore.startVerse;
-    }
-  }
+  $: audioSettingsJSON = JSON.stringify($audioSettingsStore, undefined, 2);
 </script>
 
 <!-- Audio modal -->
@@ -56,21 +21,21 @@
         <span class="sr-only">Close modal</span>
       </button>
       <div class="px-6 py-6 lg:px-8">
-        <h3 id="audioModal-title" class="mb-8 text-xl font-medium text-gray-900 daaark:text-white">{quranMetaData[$audioSettingsStore.playingChapter || 1].transliteration}, {$audioSettingsStore.playingKey}</h3>
+        <h3 id="audioModal-title" class="mb-4 text-xl font-medium text-gray-900 daaark:text-white">{quranMetaData[$audioSettingsStore.playingChapter || 1].transliteration}, {$audioSettingsStore.playingKey}</h3>
         <div class="flex flex-col">
           <!-- verse or words -->
           <div class="flex flex-col space-y-4 py-4">
             <span class="text-xs text-gray-500 daaark:text-gray-400">Select whether you would like to play audio for a verse or a word.</span>
             <div class="flex flex-row space-x-4">
               <!-- play verse -->
               <div class="flex items-center">
-                <input checked id="playVerse" type="radio" value="" onclick="audio_settings_change(this)" name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
+                <input checked id="playVerse" type="radio" value="" on:click={updateAudioSettings} name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
                 <label for="playVerse" class="ml-2 text-sm font-medium text-gray-900 daaark:text-gray-300">Play Verse</label>
               </div>
               <!-- play word -->
               <div class="flex items-center {disabledElement}">
-                <input id="playWord-radio" type="radio" value="" onclick="audio_settings_change(this)" name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
-                <label for="playWord-radio" class="ml-2 text-sm font-medium text-gray-900 daaark:text-gray-300">Play Word</label>
+                <input id="playWord" type="radio" value="" on:click={updateAudioSettings} name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
+                <label for="playWord" class="ml-2 text-sm font-medium text-gray-900 daaark:text-gray-300">Play Word</label>
               </div>
             </div>
           </div>
@@ -81,69 +46,67 @@
             <div class="flex flex-row space-x-4">
               <!-- play this verse -->
               <div class="flex items-center">
-                <input id="playThisVerse" type="radio" value="" on:click={updateRange} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
+                <input checked id="playThisVerse" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
                 <label for="playThisVerse" class="ml-2 text-sm font-medium text-gray-900 daaark:text-gray-300">This Verse</label>
               </div>
               <!-- play from here -->
-              <div class="flex items-center">
-                <input id="playFromHere" type="radio" value="" on:click={updateRange} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
+              <div class="flex items-center {$currentPageStore !== 'chapter' && disabledElement}">
+                <input id="playFromHere" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
                 <label for="playFromHere" class="ml-2 text-sm font-medium text-gray-900 daaark:text-gray-300">From Here</label>
               </div>
               <!-- play range -->
-              <div class="flex items-center {disabledElement}">
-                <input id="playRange" type="radio" value="" on:click={updateRange} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
+              <div class="flex items-center {$currentPageStore !== 'chapter' && disabledElement}">
+                <input id="playRange" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 daaark:focus:ring-blue-600 daaark:ring-offset-gray-800 focus:ring-2 daaark:bg-gray-700 daaark:border-gray-600" />
                 <label for="playRange" class="ml-2 text-sm font-medium text-gray-900 daaark:text-gray-300">Verses Range</label>
               </div>
             </div>
           </div>
 
           <!-- audio range options -->
-          <div id="audio-range-options" class={$audioSettingsStore.audioRange === "playRange" ? "block" : "hidden"}>
+          <div id="audio-range-options" class={$audioSettingsStore.audioRange === "playRange" ? "block" : "block"}>
             <!-- from / till -->
             <div class="flex flex-col space-y-4 py-4 border-t">
               <span class="text-xs text-gray-500 daaark:text-gray-400">Select the range of verses or words to be played.</span>
               <div class="flex flex-row space-x-4">
                 <div class="flex flex-row space-x-2">
                   <!-- <label class="m-auto text-sm font-medium text-gray-900 daaark:text-gray-300">Start <span class="audio-type-text">Verse</span></label> -->
-                  <select id="startVerse-list" bind:value={$audioSettingsStore.startVerse} on:change={updateStartVerse} class="w-18 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500">
+                  <select id="startVerse" on:change={updateAudioSettings} class="w-18 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500">
                     {#each Array.from(Array(quranMetaData[$chapterNumberStore].verses).keys()).slice(0) as verse}
                       <option value={verse + 1}>{verse + 1}</option>
                     {/each}
                   </select>
                 </div>
                 <div class="flex flex-row space-x-2">
                   <!-- <label class="m-auto text-sm font-medium text-gray-900 daaark:text-gray-300">End <span class="audio-type-text">Verse</span></label> -->
-                  <!-- <select id="endVerse-list" on:change={updateEndVerse} class="w-18 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500">
-                    {#each Array.from(Array(quranMetaData[$chapterNumberStore].verses).keys()).slice($audioSettingsStore.startVerse) as verse}
-                      <option value={verse}>{verse}</option>
-                    {/each}
-                  </select> -->
-
-                  <select id="endVerse-list" on:change={updateEndVerse} class="w-18 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500">
-                    {#each Array.from(Array(quranMetaData[$chapterNumberStore].verses).keys()).slice(endVerseStartingIndex) as verse}
+                  <select id="endVerse" on:change={updateAudioSettings} class="w-18 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500">
+                    {#each Array.from(Array(quranMetaData[$chapterNumberStore].verses).keys()).slice(0) as verse}
                       <option value={verse + 1}>{verse + 1}</option>
                     {/each}
                   </select>
                 </div>
               </div>
             </div>
+          </div>
+        </div>
 
-            <!-- repeat times -->
-            <div class="flex flex-col space-y-4 py-4 border-t hidden">
-              <span class="text-xs text-gray-500 daaark:text-gray-400">Select the number of times a verse or word has to be repeated.</span>
-              <div class="flex flex-row space-x-4">
-                <div class="flex flex-row space-x-2">
-                  <span class="m-auto text-sm font-medium text-gray-900 daaark:text-gray-300">Repeat for </span>
-                  <input id="input-audio-repeat" type="number" value="1" min="1" onchange="audio_settings_change(this)" class="w-16 text-xs border border-gray-300 text-gray-900 rounded-lg focus:ring-gray-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-gray-500 daaark:focus:border-blue-500" />
-                  <span class="m-auto text-sm font-medium text-gray-900 daaark:text-gray-300">time(s)</span>
-                </div>
-              </div>
+        <!-- repeat times -->
+        <div class="flex flex-col space-y-4 py-4 border-t">
+          <span class="text-xs text-gray-500 daaark:text-gray-400">Select the number of times a verse or word has to be repeated.</span>
+          <div class="flex flex-row space-x-4">
+            <div class="flex flex-row space-x-2">
+              <span class="m-auto text-sm font-medium text-gray-900 daaark:text-gray-300">Repeat each verse </span>
+              <input id="timesToRepeat" type="number" value="1" min="1" max="20" on:change={updateAudioSettings} class="w-16 text-xs border border-gray-300 text-gray-900 rounded-lg focus:ring-gray-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-gray-500 daaark:focus:border-blue-500" />
+              <span class="m-auto text-sm font-medium text-gray-900 daaark:text-gray-300">{$audioSettingsStore.timesToRepeat < 2 ? "time" : "times"} </span>
             </div>
           </div>
         </div>
 
-        <div class={$audioSettingsStore.audioRange === undefined && disabledElement}>
-          <button on:click={initializeAudio} class="w-full inline-flex items-center justify-center mr-2 border mt-6 py-2 px-4 border-gray-200 bg-gray-50 text-gray-700 space-x-2 transition-colors duration-150 rounded-lg focus:shadow-outline">
+        <div class="text-xs">
+          <pre>{audioSettingsJSON}</pre>
+        </div>
+
+        <div>
+          <button on:click={initializeAudio} class="w-full inline-flex items-center justify-center mr-2 mt-6 space-x-2 {buttonElement}">
             <Play />
 
             <span>Play Verse</span>

diff --git a/src/components/ui/modals/InitialSetupModal.svelte b/src/components/ui/modals/InitialSetupModal.svelte
@@ -49,8 +49,9 @@
           <div class="flex flex-col">
             <label for="quran-font-list" class="block mb-2 text-sm font-medium text-gray-900">Quran Font</label>
             <select id="quran-font-list" on:change={(event) => updateSettings({ type: "wordType", value: +event.target.value })} bind:value={$wordTypeStore} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 daaark:bg-gray-700 daaark:border-gray-600 daaark:placeholder-gray-400 daaark:text-white daaark:focus:ring-blue-500 daaark:focus:border-blue-500">
-              <option value={1}>Uthmani</option>
-              <option value={2}>IndoPak</option>
+              <option value={1}>Uthmani Hafs</option>
+              <option value={2}>Naskh Nastaleeq IndoPak</option>
+              <option value={3}>Uthmani Tajweed</option>
             </select>
           </div>