ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #135 from ReflectsLight/audio/ios

Browse source 
Try to fix audio stream on iOS
This commit is contained in:
Robert 2023-07-12 23:02:15 -03:00 committed by GitHub
commit 2ecac4b96b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/js/components/Stream.tsx
View file

@ -23,8 +23,10 @@ export function Stream({ reciter, surah, stream, locale, slice, endOfStream, isP
{ 'overflowY': 'auto' } :
{ 'overflowY': 'hidden' };
const audioRef = useRef<HTMLAudioElement>(null);
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) => {
const { url: baseUrl } = reciter;
return (
<li key={ayah.id} className="ayah fade">
<span className="surah-id ayah-id">
@ -35,12 +37,10 @@ export function Stream({ reciter, surah, stream, locale, slice, endOfStream, isP
{formatNumber(ayah.id, locale)}
</span>
<p>{ayah.text}</p>
<audio autoPlay ref={audioRef} src={`${baseUrl}/${surah.id}/${ayah.id}.mp3`} />
</li>
);
});
useEffect(() => {
const ul: HTMLElement = document.querySelector('ul.stream')!;
if (slice.coversOneAyah) {
@ -63,9 +63,19 @@ export function Stream({ reciter, surah, stream, locale, slice, endOfStream, isP
}
}, [stream, isPaused, soundOn]);
useEffect(() => {
const audio = audioRef.current;
if (audio) {
audio.addEventListener('ended', () => {
audio.setAttribute('src', src);
});
}
}, [audioRef.current]);
return (
<ul lang={locale} className={className} style={style}>
{ayat}
<audio src={src} ref={audioRef} />
</ul>
);
}