feat: allow user to customize format with configurable space and audi…

…o position

- Added settings to let users choose whether the Quran quote appears
above or below the audio element.
- Enabled option to toggle an empty line between the Quran quote and the
audio element.
- Fixed previously broken callout formatting.
- Updated version to 0.16.0.

src/api/QuranApi.ts

@@ -38,13 +38,29 @@ export class QuranApi {
 			this.fetchData(surah, this.plugin.settings.translationOption, ayah)
 		]);
 
-		return `<audio src="${arabicResponse.ayahs![0].audio}" controls>
-<p> Audio tag not supported </p>
-</audio>
-> [!Quote] ${this.getSurahTitle(arabicResponse)} - [[${arabicResponse.number}:${arabicResponse.ayahs![0].numberInSurah}](https://surahquran.com/english.php?sora=${arabicResponse.number}&aya=${arabicResponse.ayahs![0].numberInSurah})]
+		const qoute = `> [!Quote] ${this.getSurahTitle(arabicResponse)} - [[${arabicResponse.number}:${arabicResponse.ayahs![0].numberInSurah}](https://surahquran.com/english.php?sora=${arabicResponse.number}&aya=${arabicResponse.ayahs![0].numberInSurah})]
 > 
 > ${arabicResponse.ayahs![0].text}${this.getTranslation(translationResponse)}
 `;
+
+		const audio = `<audio src="${arabicResponse.ayahs![0].audio}" controls>
+<p> Audio tag not supported </p>
+</audio>
+`;
+
+		const emptyNewLine = this.plugin.settings.insertEmptyLineBetweenQuoteAudio ? '&nbsp;' : '';
+
+		return this.plugin.settings.audioPosition == "audioAbove"
+			? `${audio}
+
+${emptyNewLine}
+
+${qoute}`
+			: `${qoute}
+
+${emptyNewLine}
+
+${audio}`;
 	}
 
 	private getSurahTitle(arabicResponse: Surah) {

src/settings.ts

@@ -7,6 +7,8 @@ import {languageNames} from "./constants/languages";
 
 export interface NoorPluginSettings {
 	dhikrFilepath: string;
+	audioPosition: string;
+	insertEmptyLineBetweenQuoteAudio: boolean;
 	reciter: string;
 	showTranslation: boolean;
 	translationLanguage: string;
@@ -16,6 +18,8 @@ export interface NoorPluginSettings {
 
 export const DEFAULT_SETTINGS: NoorPluginSettings = {
 	dhikrFilepath: 'dhikr.md',
+	audioPosition: 'audioAbove',
+	insertEmptyLineBetweenQuoteAudio: false,
 	reciter: 'ar.abdulbasitmurattal',
 	showTranslation: true,
 	translationLanguage: 'en',
@@ -70,8 +74,37 @@ export class NoorSettingTab extends PluginSettingTab {
 					})
 			)
 
-		containerEl.createEl('h3', {text: 'Quran Settings'});
+		new Setting(containerEl)
+			.setName('Audio Position Preference')
+			.setDesc('Choose whether audio should appear above or below the quote.')
+			.addDropdown((dropdown) => {
+				dropdown
+					.addOptions({
+						'audioAbove': 'Audio Above Quote',
+						'quoteAbove': 'Quote Above Audio'
+					})
+					.setValue(this.plugin.settings.audioPosition)
+					.onChange(async (value) => {
+						this.plugin.settings.audioPosition = value;
+						await this.plugin.saveSettings();
+						this.display();
+					});
+			});
 
+		new Setting(containerEl)
+			.setName('Space between Quote and Audio')
+			.setDesc('Add an empty line between the Quran quote and the audio element')
+			.addToggle((toggle) => {
+				toggle
+					.setValue(this.plugin.settings.insertEmptyLineBetweenQuoteAudio)
+					.onChange(async (value) => {
+						this.plugin.settings.insertEmptyLineBetweenQuoteAudio = value;
+						await this.plugin.saveSettings();
+						this.display();
+					});
+			});
+
+		containerEl.createEl('h3', {text: 'Quran Settings'});
 		new Setting(containerEl)
 			.setName('Reciter')
 			.setDesc('Which reciter voice to use')

versions.json

@@ -1,3 +1,3 @@
 {
-	"1.0.0": "0.15.0"
+	"1.0.0": "0.16.0"
 }