enhanced the verse play button with programmable options (closes #177) (

#181)

src/components/display/verses/VerseOptionButtons.svelte

@@ -9,23 +9,41 @@
 	import Notes from '$svgs/Notes.svelte';
 	import DotsHorizontal from '$svgs/DotsHorizontal.svelte';
 	import Tooltip from '$ui/flowbite-svelte/tooltip/Tooltip.svelte';
-	import { playVerseAudio, resetAudioSettings } from '$utils/audioController';
-	import { __currentPage, __userSettings, __audioSettings, __verseKey, __userNotes, __notesModalVisible } from '$utils/stores';
+	import { playVerseAudio, resetAudioSettings, setVersesToPlay, showAudioModal } from '$utils/audioController';
+	import { __currentPage, __userSettings, __audioSettings, __verseKey, __userNotes, __notesModalVisible, __playButtonsFunctionality } from '$utils/stores';
 	import { updateSettings } from '$utils/updateSettings';
 	import { term } from '$utils/terminologies';
+	import { quranMetaData } from '$data/quranMeta';
 
 	const chapter = +key.split(':')[0];
 	const verse = +key.split(':')[1];
+	const versesInChapter = quranMetaData[chapter].verses;
 	const buttonClasses = 'inline-flex items-center justify-center w-10 h-10 transition-colors duration-150 rounded-3xl focus:shadow-outline hover:bg-lightGray print:hidden';
 
 	// update userBookmarks whenever the __userSettings changes
 	$: userBookmarks = JSON.parse($__userSettings).userBookmarks;
 
 	function audioHandler(key) {
-		if ($__audioSettings.isPlaying) {
-			resetAudioSettings({ location: 'end' });
-		} else {
-			playVerseAudio({ key, language: 'arabic', timesToRepeat: 1 });
+		// stop any audio if something is playing
+		if ($__audioSettings.isPlaying) resetAudioSettings({ location: 'end' });
+		// else continue with playing options
+		else {
+			// for chapter & mushaf page, respect the user select play button functionality
+			if (['chapter', 'page'].includes($__currentPage)) {
+				// 1. Play selected Ayah (default)
+				if ($__playButtonsFunctionality.verse === 1) playVerseAudio({ key, language: 'arabic', timesToRepeat: 1 });
+				// 2. Play from here
+				else if ($__playButtonsFunctionality.verse === 2) {
+					setVersesToPlay({ location: 'verseOptionsOrModal', chapter: chapter, startVerse: verse, endVerse: versesInChapter, audioRange: 'playFromHere' });
+					playVerseAudio({ key: `${window.versesToPlayArray[0]}`, timesToRepeat: 1, language: 'arabic' });
+				}
+
+				// 3. Open Advance Play modal
+				else if ($__playButtonsFunctionality.verse === 3) showAudioModal(key);
+			}
+
+			// for any other page, stick to default
+			else playVerseAudio({ key, language: 'arabic', timesToRepeat: 1 });
 		}
 	}
 </script>

src/components/ui/SettingsDrawer/SettingsDrawer.svelte

@@ -10,6 +10,7 @@
 	import VerseRecitorSelector from '$ui/SettingsDrawer/VerseRecitorSelector.svelte';
 	import TranslationRecitorSelector from '$ui/SettingsDrawer/TranslationRecitorSelector.svelte';
 	import PlaybackSpeedSelector from '$ui/SettingsDrawer/PlaybackSpeedSelector.svelte';
+	import VersePlayButtonSelector from '$ui/SettingsDrawer/VersePlayButtonSelector.svelte';
 	import Drawer from '$ui/flowbite-svelte/drawer/Drawer.svelte';
 	import Range from '$ui/flowbite-svelte/forms/Range.svelte';
 	import CloseButton from '$ui/flowbite-svelte/utils/CloseButton.svelte';
@@ -37,9 +38,10 @@
 		__wakeLockEnabled,
 		__englishTerminology,
 		__lastRead,
-		__hideNonDuaPart
+		__hideNonDuaPart,
+		__playButtonsFunctionality
 	} from '$utils/stores';
-	import { selectableDisplays, selectableFontTypes, selectableThemes, selectableWordTranslations, selectableVerseTransliterations, selectableReciters, selectableTranslationReciters, selectablePlaybackSpeeds, selectableTooltipOptions, selectableFontSizes, fontSizePresets } from '$data/options';
+	import { selectableDisplays, selectableFontTypes, selectableThemes, selectableWordTranslations, selectableVerseTransliterations, selectableReciters, selectableTranslationReciters, selectablePlaybackSpeeds, selectableTooltipOptions, selectableFontSizes, fontSizePresets, selectableVersePlayButtonOptions } from '$data/options';
 	import { updateSettings } from '$utils/updateSettings';
 	import { resetSettings } from '$utils/resetSettings';
 	import { disabledClasses, buttonClasses } from '$data/commonClasses';
@@ -60,7 +62,8 @@
 		'verse-tafsir': VerseTafsirSelector,
 		'verse-reciter': VerseRecitorSelector,
 		'translation-reciter': TranslationRecitorSelector,
-		'playback-speed': PlaybackSpeedSelector
+		'playback-speed': PlaybackSpeedSelector,
+		'verse-play-button': VersePlayButtonSelector
 	};
 
 	const transitionParamsRight = {
@@ -399,6 +402,17 @@
 						</div>
 						<p class={settingsDescriptionClasses}>Whether the translation audio should be played after the Arabic audio.</p>
 					</div>
+
+					<div class="border-b border-black/10"></div>
+
+					<!-- verse-play-button-setting -->
+					<div id="verse-play-button-setting" class={settingsBlockClasses}>
+						<div class="flex flex-row justify-between items-center">
+							<div class="block">{term('verse')} Play Button</div>
+							<Button class={selectorClasses} on:click={() => gotoIndividualSetting('verse-play-button')}>{selectableVersePlayButtonOptions[$__playButtonsFunctionality.verse].name}</Button>
+						</div>
+						<p class={settingsDescriptionClasses}>Select what happens when you click on the play button for a {term('verse')}.</p>
+					</div>
 				</div>
 			</div>
 

src/components/ui/SettingsDrawer/VersePlayButtonSelector.svelte

@@ -0,0 +1,22 @@
+<script>
+	import Radio from '$ui/flowbite-svelte/forms/Radio.svelte';
+	import Check from '$svgs/Check.svelte';
+	import { __playButtonsFunctionality } from '$utils/stores';
+	import { selectableVersePlayButtonOptions } from '$data/options';
+	import { updateSettings } from '$utils/updateSettings';
+	import { selectedRadioClasses } from '$data/commonClasses';
+</script>
+
+<div class="grid gap-3 w-full theme-grayscale">
+	{#each Object.entries(selectableVersePlayButtonOptions) as [id, options]}
+		<Radio name="wordTooltip" bind:group={$__playButtonsFunctionality.verse} value={options.id} on:change={(event) => updateSettings({ type: 'versePlayButton', value: +event.target.value })} custom>
+			<div class="inline-flex justify-between items-center p-5 w-full text-gray-500 bg-white rounded-lg border border-gray-200 cursor-pointer peer-checked:border-primary-600 peer-checked:text-primary-600 hover:text-gray-600 hover:bg-gray-100 {$__playButtonsFunctionality.verse === options.id && selectedRadioClasses}">
+				<div class="w-full">{options.name}</div>
+
+				{#if $__playButtonsFunctionality.verse === options.id}
+					<Check size={5} />
+				{/if}
+			</div>
+		</Radio>
+	{/each}
+</div>

src/data/options.js

@@ -406,6 +406,12 @@ export const screenBreakpoints = {
 	lg: 1024
 };
 
+export const selectableVersePlayButtonOptions = {
+	1: { id: 1, name: 'Play Selected Verse' },
+	2: { id: 2, name: 'Play From That Verse' },
+	3: { id: 3, name: 'Show Advance Options' }
+};
+
 export const mushafFontLinks = {
 	// normal word fonts
 	COLRv1: 'https://fonts.quranwbw.com/Hafs/KFGQPC-v4/COLRv1',

src/hooks.client.js

@@ -45,6 +45,7 @@ export function setUserSettings() {
 	if (userSettings.audioSettings.translationReciter === undefined) userSettings.audioSettings.translationReciter = 1; // English - Ibrahim Walk (Sahih International)
 	if (userSettings.audioSettings.playbackSpeed === undefined) userSettings.audioSettings.playbackSpeed = 3; // x1
 	if (userSettings.audioSettings.playTranslation === undefined) userSettings.audioSettings.playTranslation = false; // verse translation
+	if (userSettings.audioSettings.versePlayButton === undefined) userSettings.audioSettings.versePlayButton = 1; // play selected verse
 
 	// quiz settings
 	if (userSettings.quiz === undefined) userSettings.quiz = {}; // parent

src/utils/stores.js

@@ -57,7 +57,8 @@ let __websiteOnline,
 	__timeSpecificChapters,
 	__englishTerminology,
 	__hideNonDuaPart,
-	__wordRoot;
+	__wordRoot,
+	__playButtonsFunctionality;
 
 if (browser) {
 	const userSettings = JSON.parse(localStorage.getItem('userSettings'));
@@ -226,6 +227,12 @@ if (browser) {
 
 	// to store the word root for showing lexicon data
 	__wordRoot = writable(null);
+
+	// functionalities of the play buttons
+	__playButtonsFunctionality = writable({
+		verse: 1, // default is "play this verse"
+		toolbar: 1 // default is "play from start"
+	});
 }
 
 export {
@@ -285,5 +292,6 @@ export {
 	__timeSpecificChapters,
 	__englishTerminology,
 	__hideNonDuaPart,
-	__wordRoot
+	__wordRoot,
+	__playButtonsFunctionality
 };

src/utils/updateSettings.js

@@ -24,7 +24,8 @@ import {
 	__quizCorrectAnswers,
 	__quizWrongAnswers,
 	__englishTerminology,
-	__hideNonDuaPart
+	__hideNonDuaPart,
+	__playButtonsFunctionality
 } from '$utils/stores';
 // import { uploadSettingsToCloud } from '$utils/cloudSettings';
 
@@ -241,6 +242,15 @@ export function updateSettings(props) {
 			userSettings.quiz.wrongAnswers = props.value;
 			break;
 
+		// for verse play button
+		case 'versePlayButton':
+			__playButtonsFunctionality.set({
+				verse: props.value,
+				toolbar: 1
+			});
+			userSettings.audioSettings.versePlayButton = props.value;
+			break;
+
 		// for increasing/decreasing font sizes
 		case 'arabicText': // Arabic words
 		case 'wordTranslationText': // word translations & transliterations