Load the stream on play, add source for non-hls stream.

TurunWappuradio · Apr 20, 2024 · d37c22c · d37c22c
1 parent bddc3b7
commit d37c22c
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -8,7 +8,8 @@ import { ChatWrapper } from '@/components/ShoutBox/shoutbox';
 import VideoPlayer from '@/components/videoPlayer';
 import { ShoutBoxAndVideoProvider } from '@/hooks/useShoutboxAndVideo';
 
-const isHlsLive = process.env.NEXT_PUBLIC_HLS_MODE === 'live';
+const isHlsLive =
+  Hls.isSupported() && process.env.NEXT_PUBLIC_HLS_MODE === 'live';
 
 const AUDIO_STREAM_URL = 'https://player.turunwappuradio.com/wappuradio.mp3';
 const HLS_STREAM_URL = 'https://stream.turunwappuradio.com/twr_chunklist.m3u8';
@@ -22,10 +23,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
   const [playClicked, setPlayClicked] = useState(false);
 
   const loadAudioStream = useCallback(() => {
-    if (Hls.isSupported() && isHlsLive) {
+    if (isHlsLive) {
       hls.current = new Hls();
-      hls.current.loadSource(HLS_STREAM_URL);
       hls.current.attachMedia(audioEl.current);
+      hls.current.loadSource(HLS_STREAM_URL);
     } else if (
       audioEl.current &&
       audioEl.current.canPlayType('application/vnd.apple.mpegurl')
@@ -41,11 +42,11 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
   const handlePlayPause = () => {
     setPlayClicked(true);
 
-    if (audioEl.current.paused) audioEl.current.play();
-    else {
-      // Pause, but then load the stream again ready to start
-      audioEl.current.pause();
+    if (audioEl.current.paused) {
       loadAudioStream();
+      audioEl.current.play();
+    } else {
+      audioEl.current.pause();
     }
     setPlaying(!playing);
   };
@@ -63,7 +64,9 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
   return (
     <ShoutBoxAndVideoProvider>
-      <audio ref={audioEl}></audio>
+      <audio ref={audioEl}>
+        {isHlsLive ? null : <source src={AUDIO_STREAM_URL} type="audio/mpeg" />}
+      </audio>
       <Component
         {...pageProps}
         playing={playing}