Namespace classes, types, etc within "Quran"
This commit is contained in:
parent
51b7a523ce
commit
481ff9274a
7 changed files with 53 additions and 55 deletions
|
@ -1,12 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Select, SelectOption } from 'components/Select';
|
import { Select, SelectOption } from 'components/Select';
|
||||||
import { Surah, Ayat } from 'lib/Quran';
|
import * as Quran from 'lib/Quran';
|
||||||
import { Slice } from 'lib/Quran/Slice';
|
import { Slice } from 'lib/Quran/Slice';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
locale: string
|
locale: string
|
||||||
surah: Surah
|
surah: Quran.Surah
|
||||||
stream: Ayat
|
stream: Quran.Ayat
|
||||||
isPaused: boolean
|
isPaused: boolean
|
||||||
slice: Slice
|
slice: Slice
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import { Surah, Ayat, Ayah, Locale } from 'lib/Quran';
|
import * as Quran from 'lib/Quran';
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { numbers, strings } from 'lib/i18n';
|
import { numbers, strings } from 'lib/i18n';
|
||||||
import { Slice } from 'lib/Quran/Slice';
|
import { Slice } from 'lib/Quran/Slice';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
surah: Surah
|
surah: Quran.Surah
|
||||||
stream: Ayat
|
stream: Quran.Ayat
|
||||||
locale: Locale
|
locale: Quran.Locale
|
||||||
slice: Slice
|
slice: Slice
|
||||||
endOfStream: boolean
|
endOfStream: boolean
|
||||||
isPaused: boolean
|
isPaused: boolean
|
||||||
|
@ -17,7 +17,7 @@ export function Stream({ surah, stream, locale, slice, endOfStream, isPaused }:
|
||||||
const n = numbers(locale);
|
const n = numbers(locale);
|
||||||
const s = strings(locale);
|
const s = strings(locale);
|
||||||
const className = classNames('stream', { 'scroll-y': endOfStream || isPaused });
|
const className = classNames('stream', { 'scroll-y': endOfStream || isPaused });
|
||||||
const ayat = stream.map((ayah: Ayah) => {
|
const ayat = stream.map((ayah: Quran.Ayah) => {
|
||||||
return (
|
return (
|
||||||
<li key={ayah.id.number} className="ayah fade">
|
<li key={ayah.id.number} className="ayah fade">
|
||||||
<span className="surah-id ayah-id">
|
<span className="surah-id ayah-id">
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Surah, Ayat, Locale } from 'lib/Quran';
|
import * as Quran from 'lib/Quran';
|
||||||
import { numberToDecimal } from 'lib/i18n';
|
import { numberToDecimal } from 'lib/i18n';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
surah: Surah
|
surah: Quran.Surah
|
||||||
locale: Locale
|
locale: Quran.Locale
|
||||||
stream: Ayat
|
stream: Quran.Ayat
|
||||||
setStream: (stream: Ayat) => void
|
setStream: (stream: Quran.Ayat) => void
|
||||||
isPaused: boolean
|
isPaused: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,8 @@
|
||||||
import { Surah, Ayah, Ayat } from './Quran/Surah';
|
import * as JSON from "lib/Quran/JSON";
|
||||||
const Quran = { Surah };
|
import { Surah, IDObject } from "lib/Quran/Surah";
|
||||||
|
|
||||||
type Locale = 'ar' | 'en';
|
type Locale = 'ar' | 'en';
|
||||||
export { Quran, Surah, Ayah, Ayat, Locale };
|
type Ayah = {id: IDObject, text: string, readTimeMs: number };
|
||||||
|
type Ayat = Ayah[];
|
||||||
|
|
||||||
|
export { Surah, Ayah, Ayat, Locale, JSON };
|
||||||
|
|
12
src/js/lib/Quran/JSON.ts
Normal file
12
src/js/lib/Quran/JSON.ts
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
type Surah = {
|
||||||
|
id: string
|
||||||
|
place_of_revelation: string
|
||||||
|
transliterated_name: string
|
||||||
|
translated_name: string
|
||||||
|
verse_count: number
|
||||||
|
slug: string
|
||||||
|
codepoints: number[]
|
||||||
|
}
|
||||||
|
type Ayah = [number, string];
|
||||||
|
type Ayat = Ayah[];
|
||||||
|
export { Surah, Ayah, Ayat };
|
|
@ -1,41 +1,23 @@
|
||||||
import { Locale } from 'lib/Quran';
|
import * as Quran from 'lib/Quran';
|
||||||
import { DelayBaseLine, DelayPerWord } from 'lib/i18n';
|
import { DelayBaseLine, DelayPerWord } from 'lib/i18n';
|
||||||
|
|
||||||
export type Ayat = Ayah[];
|
export interface IDObject {
|
||||||
|
|
||||||
interface SurahDetails {
|
|
||||||
id: string
|
|
||||||
place_of_revelation: string
|
|
||||||
transliterated_name: string
|
|
||||||
translated_name: string
|
|
||||||
verse_count: number
|
|
||||||
slug: string
|
|
||||||
codepoints: number[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Ayah {
|
|
||||||
id: IDObject
|
|
||||||
text: string
|
|
||||||
readTimeMs: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IDObject {
|
|
||||||
number: number
|
number: number
|
||||||
localeKey: string[]
|
localeKey: string[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Surah {
|
export class Surah {
|
||||||
#details: SurahDetails;
|
#surah: Quran.JSON.Surah;
|
||||||
ayat: Ayat;
|
ayat: Quran.Ayat;
|
||||||
|
|
||||||
static fromDOMNode(locale: Locale, node: HTMLScriptElement) {
|
static fromDOMNode(locale: Quran.Locale, node: HTMLScriptElement) {
|
||||||
const json = JSON.parse(node.innerText);
|
const json = JSON.parse(node.innerText);
|
||||||
return Surah.fromJSON(locale, json.shift(), json);
|
return Surah.fromJSON(locale, json.shift(), json);
|
||||||
}
|
}
|
||||||
|
|
||||||
static fromJSON(locale: Locale, details: SurahDetails, ayat: Array<[number, string]>): Surah {
|
static fromJSON(locale: Quran.Locale, surah: Quran.JSON.Surah, ayat: Quran.JSON.Ayat) {
|
||||||
return new Surah(
|
return new Surah(
|
||||||
details,
|
surah,
|
||||||
ayat.map(([id, text]) => {
|
ayat.map(([id, text]) => {
|
||||||
return {
|
return {
|
||||||
id: { number: id, localeKey: String(id).split('') },
|
id: { number: id, localeKey: String(id).split('') },
|
||||||
|
@ -46,39 +28,39 @@ export class Surah {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(details: SurahDetails, ayat: Ayat) {
|
constructor(surah: Quran.JSON.Surah, ayat: Quran.Ayat) {
|
||||||
this.#details = details;
|
this.#surah = surah;
|
||||||
this.ayat = ayat;
|
this.ayat = ayat;
|
||||||
}
|
}
|
||||||
|
|
||||||
get id(): IDObject {
|
get id(): IDObject {
|
||||||
return {
|
return {
|
||||||
number: Number(this.#details.id),
|
number: Number(this.#surah.id),
|
||||||
localeKey: this.#details.id.split('')
|
localeKey: this.#surah.id.split('')
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
get name() {
|
get name() {
|
||||||
return String.fromCodePoint(...this.#details.codepoints);
|
return String.fromCodePoint(...this.#surah.codepoints);
|
||||||
}
|
}
|
||||||
|
|
||||||
get transliteratedName() {
|
get transliteratedName() {
|
||||||
return this.#details.transliterated_name;
|
return this.#surah.transliterated_name;
|
||||||
}
|
}
|
||||||
|
|
||||||
get translatedName() {
|
get translatedName() {
|
||||||
return this.#details.translated_name;
|
return this.#surah.translated_name;
|
||||||
}
|
}
|
||||||
|
|
||||||
get placeOfRevelation() {
|
get placeOfRevelation() {
|
||||||
return this.#details.place_of_revelation;
|
return this.#surah.place_of_revelation;
|
||||||
}
|
}
|
||||||
|
|
||||||
get numberOfAyah() {
|
get numberOfAyah() {
|
||||||
return this.#details.verse_count;
|
return this.#surah.verse_count;
|
||||||
}
|
}
|
||||||
|
|
||||||
get slug() {
|
get slug() {
|
||||||
return this.#details.slug;
|
return this.#surah.slug;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,11 +7,11 @@ import { Stream } from 'components/TheSurahPage/Stream';
|
||||||
import { ThemeSelect } from 'components/TheSurahPage/ThemeSelect';
|
import { ThemeSelect } from 'components/TheSurahPage/ThemeSelect';
|
||||||
import { LanguageSelect } from 'components/TheSurahPage/LanguageSelect';
|
import { LanguageSelect } from 'components/TheSurahPage/LanguageSelect';
|
||||||
import { PlayShape, PauseShape } from 'components/TheSurahPage/Shape';
|
import { PlayShape, PauseShape } from 'components/TheSurahPage/Shape';
|
||||||
import { Locale, Surah } from 'lib/Quran';
|
import * as Quran from 'lib/Quran';
|
||||||
import { Slice } from 'lib/Quran/Slice';
|
import { Slice } from 'lib/Quran/Slice';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
locale: Locale
|
locale: Quran.Locale
|
||||||
surahId: number
|
surahId: number
|
||||||
slice: Slice
|
slice: Slice
|
||||||
paused: boolean
|
paused: boolean
|
||||||
|
@ -23,7 +23,7 @@ function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
||||||
const [stream, setStream] = useState([]);
|
const [stream, setStream] = useState([]);
|
||||||
const [isPaused, setIsPaused] = useState<boolean>(paused);
|
const [isPaused, setIsPaused] = useState<boolean>(paused);
|
||||||
const [theme, setTheme] = useState(getCookie('theme') || 'moon');
|
const [theme, setTheme] = useState(getCookie('theme') || 'moon');
|
||||||
const [surah] = useState<Surah>(Surah.fromDOMNode(locale, node));
|
const [surah] = useState<Quran.Surah>(Quran.Surah.fromDOMNode(locale, node));
|
||||||
const readyToRender = stream.length > 0;
|
const readyToRender = stream.length > 0;
|
||||||
const surahName = locale === 'ar' ? surah.name : surah.translatedName;
|
const surahName = locale === 'ar' ? surah.name : surah.translatedName;
|
||||||
const endOfStream = (function() {
|
const endOfStream = (function() {
|
||||||
|
@ -102,7 +102,7 @@ function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
||||||
(function() {
|
(function() {
|
||||||
const toBoolean = (str: string | null): boolean => ['1', 't', 'true', 'yes'].includes(str);
|
const toBoolean = (str: string | null): boolean => ['1', 't', 'true', 'yes'].includes(str);
|
||||||
const root: HTMLElement = document.querySelector('.root');
|
const root: HTMLElement = document.querySelector('.root');
|
||||||
const locale = root.getAttribute('data-locale') as Locale;
|
const locale = root.getAttribute('data-locale') as Quran.Locale;
|
||||||
const surahId = parseInt(root.getAttribute('data-surah-id'));
|
const surahId = parseInt(root.getAttribute('data-surah-id'));
|
||||||
const params = new URLSearchParams(location.search);
|
const params = new URLSearchParams(location.search);
|
||||||
const slice = Slice.fromParam(params.get('ayah'));
|
const slice = Slice.fromParam(params.get('ayah'));
|
||||||
|
|
Loading…
Reference in a new issue