From 4ad37547d3996d6730b9bc9d9cbc2e1ff9cd8d49 Mon Sep 17 00:00:00 2001
From: Marwan Ansari <8071158+marwan@users.noreply.github.com>
Date: Wed, 6 Mar 2024 21:37:29 +0530
Subject: [PATCH] audio modal changes, added Tajweed word type

and some more minor changes and fixes.
---
 public/global.css                             |   5 +-
 rollup.config.js                              |   1 -
 src/components/svgs/Logo.svelte               |   4 +-
 src/components/ui/Drawer.svelte               |   7 +-
 src/components/ui/Navbar.svelte               |   2 +-
 src/components/ui/modals/AudioModal.svelte    | 103 ++++++------------
 .../ui/modals/InitialSetupModal.svelte        |   5 +-
 src/components/verses/VersesButtons.svelte    |   4 +-
 src/components/verses/VersesWords.svelte      |  52 +++++++--
 .../verses/displays/WBWDisplay.svelte         |   2 +-
 src/utils/audioController.js                  |  93 +++++++++++++++-
 src/utils/commonStyles.js                     |   2 +-
 src/utils/elementInViewport.js                |   6 +
 src/views/Chapter.svelte                      |  14 +++
 src/views/Home.svelte                         |   2 +-
 15 files changed, 202 insertions(+), 100 deletions(-)
 create mode 100644 src/utils/elementInViewport.js

diff --git a/public/global.css b/public/global.css
index 04b20b31..f04d5565 100644
--- 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
index a070b397..46b8f48c 100644
--- 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
index 66922ebb..3209be54 100644
--- 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
index e1ab9ffa..0c3b782e 100644
--- 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
index f03fb7ab..36d9dbb1 100644
--- 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
index cf5b2062..534b0d9e 100644
--- 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,7 +21,7 @@
         <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">
@@ -64,13 +29,13 @@
             <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,31 +46,31 @@
             <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}
@@ -113,37 +78,35 @@
                 </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
index 49e7b9b6..3247da7b 100644
--- 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>
 
diff --git a/src/components/verses/VersesButtons.svelte b/src/components/verses/VersesButtons.svelte
index 911811ee..25651b55 100644
--- a/src/components/verses/VersesButtons.svelte
+++ b/src/components/verses/VersesButtons.svelte
@@ -18,11 +18,11 @@
   // update userBookmarks whenever the userSettingsStore changes
   $: userBookmarks = JSON.parse($userSettingsStore).userBookmarks;
 
-  const buttonClasses = "inline-flex items-center justify-center w-10 h-10 text-gray-400 transition-colors duration-150 rounded-md focus:shadow-outline bg-[#ebebeb] hover:bg-gray-200 print:hidden";
+  const buttonClasses = "inline-flex items-center justify-center w-10 h-10 text-gray-400 transition-colors duration-150 rounded-lg focus:shadow-outline bg-[#ebebeb] hover:bg-gray-200 print:hidden";
 </script>
 
 <div class="verseButtons flex flex-row space-x-4 text-gray-400 text-xs">
-  <Link to={$currentPageStore === "chapter" ? "#" : `/${chapter}/${verse}`} class={buttonClasses}>{key}</Link>
+  <Link to={$currentPageStore === "chapter" ? "./#" : `/${chapter}/${verse}`} class={buttonClasses}>{key}</Link>
 
   <button on:click={() => updateSettings({ type: "userBookmarks", key })} class={buttonClasses}>
     <svelte:component this={userBookmarks.includes(key) ? Bookmarked : Bookmark} />
diff --git a/src/components/verses/VersesWords.svelte b/src/components/verses/VersesWords.svelte
index d2c274db..7f5390c4 100644
--- a/src/components/verses/VersesWords.svelte
+++ b/src/components/verses/VersesWords.svelte
@@ -4,22 +4,25 @@
   import { displayOptions } from "$data/options";
   import { supplicationsFromQuran } from "$data/quranMeta";
   import { currentPageStore, wordTypeStore, displayTypeStore, userSettingsStore } from "$utils/stores";
-  import { playAudio } from "$utils/audioController";
+  import { wordAudioController } from "$utils/audioController";
 
   const chapter = key.split(":")[0];
   const verse = key.split(":")[1];
 
   const fontSizes = JSON.parse($userSettingsStore).displaySettings.fontSizes;
 
-  const wordClasses = "rounded-md hover:cursor-pointer hover:bg-[#ebebeb] daaark:hover:bg-slate-800";
+  const wordClasses = "rounded-lg hover:cursor-pointer hover:bg-[#ebebeb] daaark:hover:bg-slate-800";
+
+  const tajweedWordsURL = "https://static.qurancdn.com/images/w/rq-color";
+  const tajweedEndURL = "https://static.qurancdn.com/images/w/common";
 
   // classes for each display types
   const layoutClasses = {
-    1: `arabicText arabic-font-${$wordTypeStore} leading-normal ${fontSizes.arabicText}`,
-    2: `arabicText arabic-font-${$wordTypeStore} leading-normal py-2 pl-2 ${fontSizes.arabicText}`,
-    3: `arabicText arabic-font-${$wordTypeStore} inline-block leading-normal p-2 group-hover:bg-[#ebebeb] ${fontSizes.arabicText}`,
-    4: `arabicText arabic-font-${$wordTypeStore} inline-block leading-normal p-2 group-hover:bg-[#ebebeb] ${fontSizes.arabicText}`,
-    5: `arabicText arabic-font-${$wordTypeStore} leading-normal py-2 pl-2 ${fontSizes.arabicText}`,
+    1: `arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText}`,
+    2: `arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText} p-2`,
+    3: `arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText} inline-block p-2 group-hover:bg-[#ebebeb]`,
+    4: `arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText} inline-block p-2 group-hover:bg-[#ebebeb]`,
+    5: `arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText} p-2`,
   };
 
   const arabicSplit = value.words.arabic.split("|");
@@ -33,8 +36,15 @@
 {#if displayOptions[`${$displayTypeStore}`].layout === "wbw"}
   {#each { length: value.meta.words } as _, word}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div on:click={() => playAudio({ type: "word", chapter, verse, word: word + 1 })} class="{$displayTypeStore === 1 ? 'text-center flex flex-col p-3' : 'inline-flex flex-col p-3'} {wordClasses}" style={$currentPageStore === "supplications" && word + 1 < supplicationsFromQuran[key] ? "opacity: 30%;" : ""}>
-      <span class={currentLayoutClasses} data-fontSize={fontSizes.arabicText}>{arabicSplit[word]}</span>
+    <div on:click={() => wordAudioController({ chapter, verse, word })} class="{$displayTypeStore === 1 ? 'text-center flex flex-col p-3' : 'inline-flex flex-col p-3'} {wordClasses}" style={$currentPageStore === "supplications" && word + 1 < supplicationsFromQuran[key] ? "opacity: 30%;" : ""}>
+      <span class={currentLayoutClasses} data-fontSize={fontSizes.arabicText}>
+        {#if $wordTypeStore === 3}
+          <img class="mx-auto max-h-16 md:max-h-20" alt={arabicSplit[word]} src="{tajweedWordsURL}/{value.meta.chapter}/{value.meta.verse}/{word + 1}.png?v=1" />
+        {:else}
+          {arabicSplit[word]}
+        {/if}
+      </span>
+
       <div class="wordTranslationText flex flex-col {fontSizes.wordTranslationText}" data-fontSize={fontSizes.wordTranslationText}>
         <span class="leading-normal">{transliterationSplit[word]}</span>
         <span class="leading-normal">{translationSplit[word]}</span>
@@ -44,7 +54,13 @@
 
   <!-- end icon -->
   <div class="{$displayTypeStore === 1 ? 'text-center flex flex-col p-3' : 'inline-flex flex-col p-3'} {wordClasses}">
-    <span class={currentLayoutClasses} data-fontSize={fontSizes.arabicText}>{value.words.end}</span>
+    <span class={currentLayoutClasses} data-fontSize={fontSizes.arabicText}>
+      {#if $wordTypeStore === 3}
+        <img class="mx-auto max-h-16 md:max-h-20" alt={verse} src="{tajweedEndURL}/{verse}.png?v=1" />
+      {:else}
+        {value.words.end}
+      {/if}
+    </span>
   </div>
 
   <!-- normal layout -->
@@ -52,10 +68,22 @@
   <div class={$displayTypeStore === 4 ? "inline" : "flex flex-row-reverse flex-wrap"}>
     {#each { length: value.meta.words } as _, word}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <span on:click={() => playAudio({ type: "word", chapter, verse, word: word + 1 })} class="{currentLayoutClasses} {wordClasses}" data-fontSize={fontSizes.arabicText}>{arabicSplit[word]}</span>
+      <span on:click={() => wordAudioController({ chapter, verse, word })} class="{currentLayoutClasses} {wordClasses}" data-fontSize={fontSizes.arabicText}>
+        {#if $wordTypeStore === 3}
+          <img class="mx-auto max-h-16 md:max-h-20" alt={arabicSplit[word]} src="{tajweedWordsURL}/{value.meta.chapter}/{value.meta.verse}/{word + 1}.png?v=1" />
+        {:else}
+          {arabicSplit[word]}
+        {/if}
+      </span>
     {/each}
 
     <!-- end icon -->
-    <span class="{currentLayoutClasses} {wordClasses}" data-fontSize={fontSizes.arabicText}>{value.words.end}</span>
+    <span class="{currentLayoutClasses} {wordClasses}" data-fontSize={fontSizes.arabicText}>
+      {#if $wordTypeStore === 3}
+        <img class="mx-auto max-h-16 md:max-h-20" alt={verse} src="{tajweedEndURL}/{verse}.png?v=1" />
+      {:else}
+        {value.words.end}
+      {/if}
+    </span>
   </div>
 {/if}
diff --git a/src/components/verses/displays/WBWDisplay.svelte b/src/components/verses/displays/WBWDisplay.svelte
index f5bae405..fe0a7fdc 100644
--- a/src/components/verses/displays/WBWDisplay.svelte
+++ b/src/components/verses/displays/WBWDisplay.svelte
@@ -6,7 +6,7 @@
   import VersesTranslations from "$verses/VersesTranslations.svelte";
 </script>
 
-<div id={key} data-page={value.meta.page} class="flex flex-col py-8 space-y-8 border-b">
+<div id={key} data-page={value.meta.page} class="verse flex flex-col py-8 space-y-8 border-b">
   <VersesButtons {key} />
 
   <!-- words -->
diff --git a/src/utils/audioController.js b/src/utils/audioController.js
index 39b03f27..3b9400e7 100644
--- a/src/utils/audioController.js
+++ b/src/utils/audioController.js
@@ -1,7 +1,9 @@
 import { get } from "svelte/store";
-import { audioSettingsStore } from "$utils/stores";
+import { quranMetaData } from "$data/quranMeta";
+import { displayTypeStore, audioSettingsStore } from "$utils/stores";
 import { toggleModal } from "$utils/toggleModal";
 import { wordsAudioURL } from "$utils/websiteSettings";
+import { displayOptions } from "$data/options";
 
 // getting the audio element
 window.audio = document.querySelector("#player");
@@ -99,7 +101,19 @@ export function playAudio(props) {
 export function initializeAudio() {
   resetAudioSettings();
 
-  console.log(audioSettings);
+  // play this verse
+  if (document.getElementById("playThisVerse").checked === true) {
+    audioSettings.startVerse = audioSettings.playingVerse;
+    audioSettings.endVerse = audioSettings.playingVerse;
+  }
+
+  // play from here
+  if (document.getElementById("playFromHere").checked === true) {
+    audioSettings.startVerse = audioSettings.playingVerse;
+    audioSettings.endVerse = quranMetaData[audioSettings.playingChapter].verses;
+  }
+
+  audioSettingsStore.set(audioSettings);
 
   playAudio({
     type: "verse",
@@ -113,6 +127,66 @@ export function initializeAudio() {
   toggleModal("audioModal", "hide");
 }
 
+export function updateAudioSettings(event) {
+  // 1. update values based on clicked ID
+  try {
+    switch (event.target.id) {
+      case "playVerse":
+        // WIP...
+        break;
+
+      case "playWord":
+        // WIP...
+        break;
+
+      case "playThisVerse":
+        audioSettings.audioRange = event.target.id;
+        audioSettings.startVerse = audioSettings.playingVerse;
+        audioSettings.endVerse = audioSettings.playingVerse;
+        break;
+
+      case "playFromHere":
+        audioSettings.audioRange = event.target.id;
+        audioSettings.startVerse = audioSettings.playingVerse;
+        audioSettings.endVerse = quranMetaData[audioSettings.playingChapter].verses;
+        break;
+
+      case "playRange":
+        audioSettings.audioRange = event.target.id;
+        break;
+
+      case "startVerse":
+        audioSettings.startVerse = +event.target.value;
+        // endVerseStartingIndex = audioSettings.startVerse - 1;
+        break;
+
+      case "endVerse":
+        audioSettings.endVerse = +event.target.value;
+        break;
+
+      case "timesToRepeat":
+        audioSettings.timesToRepeat = event.target.valueAsNumber;
+        break;
+    }
+  } catch (error) {}
+
+  // 2. set default values if nothing was clicked
+  if (audioSettings.endVerse < audioSettings.startVerse || audioSettings.endVerse === undefined) {
+    audioSettings.endVerse = audioSettings.startVerse;
+  }
+
+  // 3. update the global audio settings
+  audioSettingsStore.set(audioSettings);
+
+  // 4. update checked/selected values for all radios/options
+  try {
+    document.getElementById("startVerse").options[audioSettings.startVerse - 1].selected = true;
+    document.getElementById("endVerse").options[audioSettings.endVerse - 1].selected = true;
+  } catch (error) {}
+
+  console.table(audioSettings);
+}
+
 export function resetAudioSettings() {
   audio.pause();
   audio.currentTime = 0;
@@ -130,10 +204,25 @@ export function showAudioModal(key) {
   audioSettings.playingVerse = +audioSettings.playingKey.split(":")[1];
   audioSettingsStore.set(audioSettings);
 
+  // update default settings, if any
+  updateAudioSettings();
+
   // show the modal
   toggleModal("audioModal", "show");
 }
 
+export function wordAudioController(props) {
+  // show audio modal for continuous display types
+  if (displayOptions[`${get(displayTypeStore)}`].continuous === true) {
+    showAudioModal(`${props.chapter}:${props.verse}`);
+  }
+
+  // play word audio directly for non-continuous display types
+  else {
+    playAudio({ chapter: props.chapter, verse: props.verse, word: props.word + 1, type: "word" });
+  }
+}
+
 function convertTime(time) {
   let mins = Math.floor(time / 60);
   let secs = Math.floor(time % 60);
diff --git a/src/utils/commonStyles.js b/src/utils/commonStyles.js
index 07bc04d2..9db800a0 100644
--- a/src/utils/commonStyles.js
+++ b/src/utils/commonStyles.js
@@ -1,3 +1,3 @@
 export const disabledElement = "opacity-30 cursor-not-allowed pointer-events-none select-none";
 
-export const buttonElement = "py-2 px-4 border border-gray-200 bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg";
+export const buttonElement = "py-2 px-4 border border-gray-200 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg transition-colors duration-150";
diff --git a/src/utils/elementInViewport.js b/src/utils/elementInViewport.js
new file mode 100644
index 00000000..57107adf
--- /dev/null
+++ b/src/utils/elementInViewport.js
@@ -0,0 +1,6 @@
+// function to check if an element is within X percentage of the user viewport
+export function elementInViewport(el, percentVisible) {
+  let rect = el.getBoundingClientRect(),
+    windowHeight = document.documentElement.clientHeight;
+  return !(Math.floor(100 - ((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100) < percentVisible || Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible);
+}
diff --git a/src/views/Chapter.svelte b/src/views/Chapter.svelte
index 75ff0a9f..bdbf11ff 100644
--- a/src/views/Chapter.svelte
+++ b/src/views/Chapter.svelte
@@ -10,6 +10,7 @@
   import { websiteTitle, apiEndpoint } from "$utils/websiteSettings";
   import { quranMetaData } from "$data/quranMeta";
   import { currentPageStore, chapterNumberStore, chapterDataStore, wordTypeStore, displayTypeStore, wordTranslationStore, verseTranslationsStore, pageURLStore } from "$utils/stores";
+  import { elementInViewport } from "$utils/elementInViewport";
 
   // max verses to load if total verses in chapter are more than this
   const maxVersesThreshold = 10;
@@ -66,8 +67,21 @@
         if (window.innerHeight + window.pageYOffset >= document.body.scrollHeight - 2000) {
           document.querySelector("#loadNextVersesButton > button").click();
         }
+
+        // let offsetPercentage = 50;
+        // let VersesOnPage = document.getElementsByClassName("verse");
+        // let firstVerseOnPage = VersesOnPage[0].id;
+        // let lastVerseOnPage = VersesOnPage[VersesOnPage.length - 1].id;
+
+        // for (let verse = +firstVerseOnPage.split(":")[1]; verse <= +lastVerseOnPage.split(":")[1]; verse++) {
+        //   if (elementInViewport(document.getElementById(`${firstVerseOnPage.split(":")[0]}:${verse}`), offsetPercentage)) {
+        //     console.log(`${firstVerseOnPage.split(":")[0]}:${verse}`);
+        //     // break;
+        //   }
+        // }
       } catch (error) {
         // we know the error... but can make this better.
+        console.log(error);
       }
     });
   });
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
index 7b37ff09..bbf5d65b 100644
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@@ -16,7 +16,7 @@
 
 <div class="max-w-4xl mx-auto flex flex-col space-y-8 md:px-4">
   <div class="flex flex-col mt-4">
-    <Link to="/" class="flex justify-center">
+    <Link to="/" class="flex justify-center text-gray-500">
       <Logo />
     </Link>
     <div class="text-xs text-center text-gray-400">Word By Word Translation, Transliteration And Corpus</div>