Test offline page

pages/live.html

@@ -6,29 +6,55 @@ permalink: /live.html
 <script src="/assets/js/dash.all.min.js"></script>
 
 
-	<div>
+<div class="player-container">
     <video
         class="player"
         data-dashjs-player
         autoplay
         controls
         muted 
-            />
+    ></video>
     
     <div class="player-off">
         <h1>Offline</h1>
     </div>
-
 </div>
 
 <style>
+    .player-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
 
-	video {
-	/* width: 100%; */
-	/* border: 2px solid #ccc; */
+    .player {
+        width: 100%;
+        height: 100%;
         border-radius: 15px;
     }
 
+    .player-off {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.6); /* Cor de fundo semitransparente */
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 15px;
+        z-index: 10; /* Garante que a mensagem "Offline" apareça em cima do vídeo */
+        
+    }
+
+    .player-info {
+        border-radius: 15px;
+        background-color: #0b1a33;
+    }
+
+    /* Estilos específicos para o player, se necessário */
     video::-webkit-media-controls {
         background-color: hsl(0, 0%, 14%);
     }
@@ -36,15 +62,6 @@ permalink: /live.html
     video::-webkit-media-controls-play-button {
         color: #fff;
     }
-	.player{
-		width: 100%;
-		height: 100%;
-		/* background-color: aqua; */
-	}
-	.player-info{
-		border-radius: 15px;
-		background-color: #0b1a33;
-	}
 </style>
 
 
@@ -61,6 +78,7 @@ permalink: /live.html
       // Exemplo de como usar o valor
       console.log(user); // Isso vai exibir o valor do parâmetro 'user'
       const videoElement = document.querySelector('video');
+      const playerOffElement = document.querySelector('.player-off');
       const url = `https://cast.alice.ufsj.edu.br/dash/${user}.mpd`;
       videoElement.src = url;
 
@@ -70,16 +88,14 @@ permalink: /live.html
         .then(response => {
             if (response.ok) {
                 console.log("Arquivo existe.");
+                playerOffElement.style.display = "none";
+
                 
             } else {
                 console.log("Arquivo não encontrado.");
                 // Coloque o código para ocultar o vídeo aqui
                 videoElement.style.display = "none";
+                
             }
         })
-        .catch(error => {
-            console.error("Erro ao verificar o arquivo:", error);
-            // Coloque o código para ocultar o vídeo aqui
-            videoElement.style.display = "none";
-        });
 </script>