diff --git a/src/js/components/TheQuran/AboutSurah.tsx b/src/js/components/TheQuran/AboutSurah.tsx
new file mode 100644
index 000000000..85d2a24f0
--- /dev/null
+++ b/src/js/components/TheQuran/AboutSurah.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Surah } from "lib/Quran";
+
+export function AboutSurah({surah}: {surah: Surah}) {
+ return (
+
+
+ {surah.translatedName}
+
+
+ {surah.transliteratedName}
+
+
+ );
+}
diff --git a/src/js/components/TheQuran/Stream.tsx b/src/js/components/TheQuran/Stream.tsx
index 91145ce3e..aa2d5f933 100644
--- a/src/js/components/TheQuran/Stream.tsx
+++ b/src/js/components/TheQuran/Stream.tsx
@@ -9,11 +9,10 @@ type StreamProps = {
export function Stream({surah, stream}: StreamProps) {
const endOfStream = stream.length === surah.ayat.length;
- const surahInfo = surah.getInfo();
const ayat = stream.map((ayah: Ayah) => {
return (
- Surah {surahInfo.id}, Ayah {ayah.id}
+ Surah {surah.id}, Ayah {ayah.id}
{ayah.text}
);
diff --git a/src/js/lib/Quran/Surah.ts b/src/js/lib/Quran/Surah.ts
index aa70c0371..0c6c21b52 100644
--- a/src/js/lib/Quran/Surah.ts
+++ b/src/js/lib/Quran/Surah.ts
@@ -1,4 +1,4 @@
-type SurahInfo = {
+type SurahDetails = {
id: string,
place_of_revelation: string,
transliterated_name: string,
@@ -11,10 +11,10 @@ export type Ayah = {id: number, text: string, readingTime: number};
export type Ayat = Array;
export class Surah {
- #details: SurahInfo;
+ #details: SurahDetails;
ayat: Ayat;
- static fromJSON(details: SurahInfo, ayat: Array<[number, string]>): Surah {
+ static fromJSON(details: SurahDetails, ayat: Array<[number, string]>): Surah {
return new Surah(
details,
ayat.map(([id, text]) => {
@@ -26,19 +26,32 @@ export class Surah {
);
}
- constructor(details: SurahInfo, ayat: Ayat) {
+ constructor(details: SurahDetails, ayat: Ayat) {
this.#details = details;
this.ayat = ayat;
}
- getInfo() {
- return {
- id: this.#details.id,
- placeOfRevelation: this.#details.place_of_revelation,
- transliteratedName: this.#details.transliterated_name,
- translatedName: this.#details.translated_name,
- ayahCount: this.#details.verse_count,
- arabicCodePoints: this.#details.codepoints
- }
+ get id() {
+ return this.#details.id;
+ }
+
+ get name() {
+ return String.fromCodePoint(...this.#details.codepoints)
+ }
+
+ get transliteratedName() {
+ return this.#details.transliterated_name;
+ }
+
+ get translatedName() {
+ return this.#details.translated_name;
+ }
+
+ get placeOfRevelation() {
+ return this.#details.place_of_revelation;
+ }
+
+ get numberOfAyah() {
+ return this.#details.verse_count;
}
}
diff --git a/src/js/pages/TheSurahPage.tsx b/src/js/pages/TheSurahPage.tsx
index 322f43a71..a237831aa 100644
--- a/src/js/pages/TheSurahPage.tsx
+++ b/src/js/pages/TheSurahPage.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
import useSurah from "hooks/useSurah";
import { Timer } from "components/TheQuran/Timer";
import { Stream } from "components/TheQuran/Stream";
+import { AboutSurah } from "components/TheQuran/AboutSurah";
import classNames from "classnames";
type PageProps = {
@@ -42,6 +43,7 @@ function TheSurahPage({locale, surahId}: PageProps) {
/>
}
+ {streamIsLoaded && }
{streamIsLoaded && }
);