error message

frontend/app.js

@@ -6,6 +6,7 @@ let hasNextPage = true;
 let isLoading = false;
 let hlsPlayer = null;
 let currentLoadController = null;
+let errorToastTimer = null;
 
 // 2. Observer Definition (Must be defined before initApp uses it)
 const observer = new IntersectionObserver((entries) => {
@@ -198,6 +199,14 @@ async function initApp() {
         };
     }
 
+    const errorToastClose = document.getElementById('error-toast-close');
+    if (errorToastClose) {
+        errorToastClose.onclick = () => {
+            const toast = document.getElementById('error-toast');
+            if (toast) toast.classList.remove('show');
+        };
+    }
+
     window.addEventListener('resize', () => {
         ensureViewportFilled();
     });
@@ -212,6 +221,20 @@ function applyTheme() {
     if (select) select.value = theme;
 }
 
+function showError(message) {
+    const toast = document.getElementById('error-toast');
+    const text = document.getElementById('error-toast-text');
+    if (!toast || !text) return;
+    text.textContent = message;
+    toast.classList.add('show');
+    if (errorToastTimer) {
+        clearTimeout(errorToastTimer);
+    }
+    errorToastTimer = setTimeout(() => {
+        toast.classList.remove('show');
+    }, 4000);
+}
+
 async function openPlayer(url) {
     const modal = document.getElementById('video-modal');
     const video = document.getElementById('player');
@@ -253,16 +276,28 @@ async function openPlayer(url) {
             hlsPlayer.on(window.Hls.Events.MANIFEST_PARSED, function() {
                 video.play();
             });
+            hlsPlayer.on(window.Hls.Events.ERROR, function(event, data) {
+                if (data && data.fatal) {
+                    showError('Unable to play this stream.');
+                    closePlayer();
+                }
+            });
         } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
             video.src = streamUrl;
         } else {
             console.error("HLS not supported in this browser.");
+            showError('HLS is not supported in this browser.');
             return;
         }
     } else {
         video.src = streamUrl;
     }
 
+    video.onerror = () => {
+        showError('Video failed to load.');
+        closePlayer();
+    };
+
     modal.style.display = 'flex';
     document.body.style.overflow = 'hidden';
 }
@@ -274,6 +309,7 @@ function closePlayer() {
         hlsPlayer.destroy();
         hlsPlayer = null;
     }
+    video.onerror = null;
     video.pause();
     video.src = '';
     modal.style.display = 'none';