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">
|
||||
<a
|
||||
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"
|
||||
>
|
||||
{title}
|
||||
|
|
|
@ -70,7 +70,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
|
|||
>
|
||||
<a
|
||||
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">
|
||||
{formatNumber(locale, surah.id)}
|
||||
|
|
|
@ -23,7 +23,7 @@ type Props = {
|
|||
t: TFunction;
|
||||
};
|
||||
|
||||
export function SurahStream({ surah, locale, t }: Props) {
|
||||
export function SurahStream({ surahId, localeId, t }: Props) {
|
||||
const [stream, setStream] = useState<TAyat>([]);
|
||||
const [isPaused, setIsPaused] = 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 [showThemeDropdown, setShowThemeDropdown] = useState<boolean>(false);
|
||||
const [theme, setTheme] = useTheme();
|
||||
|
||||
const locale = Quran.locales[localeId];
|
||||
const surah = Quran.surahs[localeId][parseInt(surahId) - 1]
|
||||
const rootRef = useRef<HTMLElement>(null);
|
||||
const audio = useMemo(() => new Audio(), []);
|
||||
const readyToRender = stream.length > 0;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { Quran } from "Quran";
|
||||
import { T } from "~/lib/t";
|
||||
import { SurahIndex } from "~/components/SurahIndex";
|
||||
import { SurahStream } from "~/components/SurahStream";
|
||||
import { render } from "preact";
|
||||
import { useState, useEffect, useMemo, useRef } from "preact/hooks";
|
||||
import * as React from "preact/compat";
|
||||
|
@ -9,6 +10,7 @@ import { Router } from "preact-router";
|
|||
import "core-js";
|
||||
|
||||
const exports = {
|
||||
Quran,
|
||||
React,
|
||||
render,
|
||||
useState,
|
||||
|
@ -20,7 +22,6 @@ const exports = {
|
|||
Object.assign(window, exports);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
console.log(Quran.surahs["en"][0].ayat)
|
||||
const Main = (function () {
|
||||
const t = T(require("@json/t.json"));
|
||||
return () => {
|
||||
|
@ -29,6 +30,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
<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="/ar" locale={Quran.locales["ar"]} surahs={Quran.surahs["ar"]} t={t} />
|
||||
<SurahStream path="/:localeId/:surahId" t={t} />
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue