Try to fix audio stream on iOS
This commit is contained in:
parent
a088a9ec51
commit
465e3bf224
1 changed files with 13 additions and 3 deletions
|
@ -23,8 +23,10 @@ export function Stream({ reciter, surah, stream, locale, slice, endOfStream, isP
|
||||||
{ 'overflowY': 'auto' } :
|
{ 'overflowY': 'auto' } :
|
||||||
{ 'overflowY': 'hidden' };
|
{ 'overflowY': 'hidden' };
|
||||||
const audioRef = useRef<HTMLAudioElement>(null);
|
const audioRef = useRef<HTMLAudioElement>(null);
|
||||||
const ayat = stream.map((ayah: Quran.Ayah) => {
|
|
||||||
const { url: baseUrl } = reciter;
|
const { url: baseUrl } = reciter;
|
||||||
|
const ayah = stream[stream.length-1];
|
||||||
|
const src = `${baseUrl}/${surah.id}/${ayah.id}.mp3`;
|
||||||
|
const ayat = stream.map((ayah: Quran.Ayah) => {
|
||||||
return (
|
return (
|
||||||
<li key={ayah.id} className="ayah fade">
|
<li key={ayah.id} className="ayah fade">
|
||||||
<span className="surah-id ayah-id">
|
<span className="surah-id ayah-id">
|
||||||
|
@ -35,12 +37,10 @@ export function Stream({ reciter, surah, stream, locale, slice, endOfStream, isP
|
||||||
{formatNumber(ayah.id, locale)}
|
{formatNumber(ayah.id, locale)}
|
||||||
</span>
|
</span>
|
||||||
<p>{ayah.text}</p>
|
<p>{ayah.text}</p>
|
||||||
<audio autoPlay ref={audioRef} src={`${baseUrl}/${surah.id}/${ayah.id}.mp3`} />
|
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const ul: HTMLElement = document.querySelector('ul.stream')!;
|
const ul: HTMLElement = document.querySelector('ul.stream')!;
|
||||||
if (slice.coversOneAyah) {
|
if (slice.coversOneAyah) {
|
||||||
|
@ -63,9 +63,19 @@ export function Stream({ reciter, surah, stream, locale, slice, endOfStream, isP
|
||||||
}
|
}
|
||||||
}, [stream, isPaused, soundOn]);
|
}, [stream, isPaused, soundOn]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const audio = audioRef.current;
|
||||||
|
if (audio) {
|
||||||
|
audio.addEventListener('ended', () => {
|
||||||
|
audio.setAttribute('src', src);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [audioRef.current]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul lang={locale} className={className} style={style}>
|
<ul lang={locale} className={className} style={style}>
|
||||||
{ayat}
|
{ayat}
|
||||||
|
<audio src={src} ref={audioRef} />
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue