Add routes for 'SurahStream'
This commit is contained in:
parent
926e551ad9
commit
bd04a26a4a
4 changed files with 9 additions and 4 deletions
|
@ -17,7 +17,7 @@ export function Head({ title, locale, children }: Props) {
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<a
|
<a
|
||||||
data-testid="h1"
|
data-testid="h1"
|
||||||
href={`/${locale.name}/index.html`}
|
href={`/${locale.name}/`}
|
||||||
className="flex rounded justify-center p-3 m-0 mb-4 w-full no-underline"
|
className="flex rounded justify-center p-3 m-0 mb-4 w-full no-underline"
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
|
|
|
@ -70,7 +70,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
className="flex items-center color-primary no-underline rounded w-11/12 h-8"
|
className="flex items-center color-primary no-underline rounded w-11/12 h-8"
|
||||||
href={`/${locale.name}/${surah.urlName}/index.html`}
|
href={`/${locale.name}/${surah.id}/`}
|
||||||
>
|
>
|
||||||
<span className="background-secondary color-white rounded flex w-8 font-extrabold w-5 mr-3 justify-center text-center">
|
<span className="background-secondary color-white rounded flex w-8 font-extrabold w-5 mr-3 justify-center text-center">
|
||||||
{formatNumber(locale, surah.id)}
|
{formatNumber(locale, surah.id)}
|
||||||
|
|
|
@ -23,7 +23,7 @@ type Props = {
|
||||||
t: TFunction;
|
t: TFunction;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function SurahStream({ surah, locale, t }: Props) {
|
export function SurahStream({ surahId, localeId, t }: Props) {
|
||||||
const [stream, setStream] = useState<TAyat>([]);
|
const [stream, setStream] = useState<TAyat>([]);
|
||||||
const [isPaused, setIsPaused] = useState<boolean>(false);
|
const [isPaused, setIsPaused] = useState<boolean>(false);
|
||||||
const [audioEnabled, setAudioEnabled] = useState<boolean>(false);
|
const [audioEnabled, setAudioEnabled] = useState<boolean>(false);
|
||||||
|
@ -32,6 +32,9 @@ export function SurahStream({ surah, locale, t }: Props) {
|
||||||
const [showLangDropdown, setShowLangDropdown] = useState<boolean>(false);
|
const [showLangDropdown, setShowLangDropdown] = useState<boolean>(false);
|
||||||
const [showThemeDropdown, setShowThemeDropdown] = useState<boolean>(false);
|
const [showThemeDropdown, setShowThemeDropdown] = useState<boolean>(false);
|
||||||
const [theme, setTheme] = useTheme();
|
const [theme, setTheme] = useTheme();
|
||||||
|
|
||||||
|
const locale = Quran.locales[localeId];
|
||||||
|
const surah = Quran.surahs[localeId][parseInt(surahId) - 1]
|
||||||
const rootRef = useRef<HTMLElement>(null);
|
const rootRef = useRef<HTMLElement>(null);
|
||||||
const audio = useMemo(() => new Audio(), []);
|
const audio = useMemo(() => new Audio(), []);
|
||||||
const readyToRender = stream.length > 0;
|
const readyToRender = stream.length > 0;
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { Quran } from "Quran";
|
import { Quran } from "Quran";
|
||||||
import { T } from "~/lib/t";
|
import { T } from "~/lib/t";
|
||||||
import { SurahIndex } from "~/components/SurahIndex";
|
import { SurahIndex } from "~/components/SurahIndex";
|
||||||
|
import { SurahStream } from "~/components/SurahStream";
|
||||||
import { render } from "preact";
|
import { render } from "preact";
|
||||||
import { useState, useEffect, useMemo, useRef } from "preact/hooks";
|
import { useState, useEffect, useMemo, useRef } from "preact/hooks";
|
||||||
import * as React from "preact/compat";
|
import * as React from "preact/compat";
|
||||||
|
@ -9,6 +10,7 @@ import { Router } from "preact-router";
|
||||||
import "core-js";
|
import "core-js";
|
||||||
|
|
||||||
const exports = {
|
const exports = {
|
||||||
|
Quran,
|
||||||
React,
|
React,
|
||||||
render,
|
render,
|
||||||
useState,
|
useState,
|
||||||
|
@ -20,7 +22,6 @@ const exports = {
|
||||||
Object.assign(window, exports);
|
Object.assign(window, exports);
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
console.log(Quran.surahs["en"][0].ayat)
|
|
||||||
const Main = (function () {
|
const Main = (function () {
|
||||||
const t = T(require("@json/t.json"));
|
const t = T(require("@json/t.json"));
|
||||||
return () => {
|
return () => {
|
||||||
|
@ -29,6 +30,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
<SurahIndex path="/" locale={Quran.locales["en"]} surahs={Quran.surahs["en"]} t={t} />
|
<SurahIndex path="/" locale={Quran.locales["en"]} surahs={Quran.surahs["en"]} t={t} />
|
||||||
<SurahIndex path="/en" locale={Quran.locales["en"]} surahs={Quran.surahs["en"]} t={t} />
|
<SurahIndex path="/en" locale={Quran.locales["en"]} surahs={Quran.surahs["en"]} t={t} />
|
||||||
<SurahIndex path="/ar" locale={Quran.locales["ar"]} surahs={Quran.surahs["ar"]} t={t} />
|
<SurahIndex path="/ar" locale={Quran.locales["ar"]} surahs={Quran.surahs["ar"]} t={t} />
|
||||||
|
<SurahStream path="/:localeId/:surahId" t={t} />
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue