theater modus

includes/styles.css

@@ -271,3 +271,14 @@ td, th {
     margin-top: 0.5rem;
     gap: 0.5rem;
 }
+
+/* Theatre mode styles */
+.video-item.theatre-mode {
+    flex: 1 1 100%;
+    max-width: 100%;
+}
+.video-item.theatre-mode video {
+    width: 100%;
+    height: auto;
+    max-height: none;
+}

includes/styles_mobile.css

@@ -5,6 +5,16 @@ table {
 td, th {
     padding: 8px;
 }
+/* Theatre mode mobile styles */
+.video-item.theatre-mode {
+    flex: 1 1 100%;
+    max-width: 100%;
+}
+.video-item.theatre-mode video {
+    width: 100%;
+    height: auto;
+    max-height: none;
+}
 
 .topnav {
     overflow: hidden;

videos.php

@@ -42,7 +42,6 @@ usort($videoData, function($a, $b) {
                                 Your browser does not support the video tag.
                             </video>
                             <p><?php echo pathinfo($video['filename'], PATHINFO_FILENAME); ?></p>
-                            <p><?php echo date('d-m-Y H:i', $video['ctime']); ?></p>
                             <div class="video-controls">
                                 <button class="btn share-btn">Delen</button>
                                 <button class="btn theatre-btn">Theatermodus</button>
@@ -83,23 +82,8 @@ usort($videoData, function($a, $b) {
         document.querySelectorAll('.theatre-btn').forEach(function(btn) {
             btn.addEventListener('click', function() {
                 var videoItem = btn.closest('.video-item');
-                if (!document.fullscreenElement) {
+                var isActive = videoItem.classList.toggle('theatre-mode');
-                    if (videoItem.requestFullscreen) {
+                btn.innerText = isActive ? 'Sluit theatermodus' : 'Theatermodus';
-                        videoItem.requestFullscreen();
-                    } else if (videoItem.webkitRequestFullscreen) {
-                        videoItem.webkitRequestFullscreen();
-                    } else if (videoItem.msRequestFullscreen) {
-                        videoItem.msRequestFullscreen();
-                    }
-                } else {
-                    if (document.exitFullscreen) {
-                        document.exitFullscreen();
-                    } else if (document.webkitExitFullscreen) {
-                        document.webkitExitFullscreen();
-                    } else if (document.msExitFullscreen) {
-                        document.msExitFullscreen();
-                    }
-                }
             });
         });
     });