parent
f62b3df8c5
commit
18d84fa90c
2 changed files with 14 additions and 23 deletions
|
@ -5,25 +5,12 @@ import { Slice } from 'lib/Quran/Slice';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
locale: string
|
locale: string
|
||||||
surah: Quran.Surah
|
onChange: (o: SelectOption) => void
|
||||||
stream: Quran.Ayat
|
|
||||||
isPaused: boolean
|
|
||||||
slice: Slice
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function LanguageSelect({ locale, surah, stream, isPaused, slice }: Props) {
|
export function LanguageSelect({ locale, onChange }: Props) {
|
||||||
const changeLanguage = (o: SelectOption) => {
|
|
||||||
const locale = o.value;
|
|
||||||
const params = [
|
|
||||||
['ayah', slice.toParam() || stream.length],
|
|
||||||
['paused', isPaused ? 't' : null]
|
|
||||||
];
|
|
||||||
const query = params.filter(([, v]) => v).flatMap(([k,v]) => `${k}=${v}`).join('&');
|
|
||||||
location.replace(`/${locale}/${surah.slug}/?${query}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Select value={locale} className="language" onChange={changeLanguage}>
|
<Select value={locale} className="language" onChange={onChange}>
|
||||||
<option value="ar">عربي</option>
|
<option value="ar">عربي</option>
|
||||||
<option value="en">English</option>
|
<option value="en">English</option>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
|
@ -4,6 +4,7 @@ import classNames from 'classnames';
|
||||||
import { get as getCookie } from 'es-cookie';
|
import { get as getCookie } from 'es-cookie';
|
||||||
import { Timer } from 'components/TheSurahPage/Timer';
|
import { Timer } from 'components/TheSurahPage/Timer';
|
||||||
import { Stream } from 'components/TheSurahPage/Stream';
|
import { Stream } from 'components/TheSurahPage/Stream';
|
||||||
|
import { SelectOption } from 'components/Select';
|
||||||
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';
|
||||||
|
@ -26,6 +27,15 @@ function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
||||||
const [surah] = useState<Quran.Surah>(Quran.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 onLanguageChange = (o: SelectOption) => {
|
||||||
|
const locale = o.value;
|
||||||
|
const params = [
|
||||||
|
['ayah', slice.toParam() || stream.length],
|
||||||
|
['paused', isPaused ? 't' : null]
|
||||||
|
];
|
||||||
|
const query = params.filter(([, v]) => v).flatMap(([k,v]) => `${k}=${v}`).join('&');
|
||||||
|
location.replace(`/${locale}/${surah.slug}/?${query}`);
|
||||||
|
};
|
||||||
const endOfStream = (function() {
|
const endOfStream = (function() {
|
||||||
if (slice.coversOneAyah || slice.coversOneSurah) {
|
if (slice.coversOneAyah || slice.coversOneSurah) {
|
||||||
return stream.length === surah.ayat.length;
|
return stream.length === surah.ayat.length;
|
||||||
|
@ -55,13 +65,7 @@ function TheSurahPage({ locale, surahId, slice, paused }: Props) {
|
||||||
{readyToRender && (
|
{readyToRender && (
|
||||||
<div className="row dropdown-row">
|
<div className="row dropdown-row">
|
||||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||||
<LanguageSelect
|
<LanguageSelect locale={locale} onChange={onLanguageChange} />
|
||||||
locale={locale}
|
|
||||||
surah={surah}
|
|
||||||
stream={stream}
|
|
||||||
isPaused={isPaused}
|
|
||||||
slice={slice}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{readyToRender && (
|
{readyToRender && (
|
||||||
|
|
Loading…
Reference in a new issue