Merge pull request #234 from OpzekerIT/dev

Theater modus

includes/styles.css

@@ -262,3 +262,65 @@ td, th {
     display: block;
     margin: 0 auto;
 }
+
+/* Share and theatre button styles */
+.video-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    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;
+}
+
+.video-title {
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.video-item.theatre-mode {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.9);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.video-item.theatre-mode video {
+    max-width: 90%;
+    max-height: 80vh;
+    width: auto;
+    height: auto;
+}
+
+.video-item.theatre-mode .video-title {
+    color: #fff;
+    order: -1; /* Display title above the video */
+}
+
+.video-item.theatre-mode .video-controls {
+    position: relative;
+    bottom: auto;
+    margin-top: 15px;
+}

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;
@@ -100,4 +110,31 @@ section h2 {
     height: auto;
     display: block;
     margin: 0 auto;
+}
+/* Share and theatre button mobile styles */
+.video-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.5rem;
+    gap: 0.5rem;
+}
+.video-title {
+    text-align: center;
+    font-size: 1.1em;
+    font-weight: bold;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+.video-item.theatre-mode {
+    padding: 10px;
+}
+
+.video-item.theatre-mode video {
+    max-width: 100%;
+    max-height: 70vh;
+}
+
+.video-item.theatre-mode .video-controls {
+    margin-top: 10px;
 }

videos.php

@@ -41,8 +41,11 @@ usort($videoData, function($a, $b) {
                                 <source src="media/videos/<?php echo htmlspecialchars($video['filename']); ?>" type="video/mp4">
                                 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>
+                            <p class="video-title"><?php echo pathinfo($video['filename'], PATHINFO_FILENAME); ?></p>
+                            <div class="video-controls">
+                                <button class="btn share-btn">Delen</button>
+                                <button class="btn theatre-btn">Theatermodus</button>
+                            </div>
                         </div>
                     <?php endforeach; ?>
                 </div>
@@ -54,5 +57,46 @@ usort($videoData, function($a, $b) {
     </main>
 
     <?php include './includes/footer.php'; ?>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        document.querySelectorAll('.share-btn').forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                var videoItem = btn.closest('.video-item');
+                var src = videoItem.querySelector('video source').src;
+                if (navigator.share) {
+                    navigator.share({ title: videoItem.querySelector('p').innerText, url: src })
+                    .catch(function(error) { console.error('Error sharing', error); });
+                } else if (navigator.clipboard) {
+                    navigator.clipboard.writeText(src).then(function() {
+                        alert('Videolink gekopieerd naar klembord');
+                    }, function(err) {
+                        alert('Kon link niet kopiëren: ' + err);
+                    });
+                } else {
+                    prompt('Kopieer deze link:', src);
+                }
+            });
+        });
+
+        document.querySelectorAll('.theatre-btn').forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                var clickedVideoItem = btn.closest('.video-item');
+
+                // Remove theatre mode from all other videos
+                document.querySelectorAll('.video-item.theatre-mode').forEach(function(item) {
+                    if (item !== clickedVideoItem) {
+                        item.classList.remove('theatre-mode');
+                        item.querySelector('.theatre-btn').innerText = 'Theatermodus';
+                    }
+                });
+
+                // Toggle theatre mode for the clicked video
+                var isActive = clickedVideoItem.classList.toggle('theatre-mode');
+                btn.innerText = isActive ? 'Sluit theatermodus' : 'Theatermodus';
+            });
+        });
+    });
+    </script>
 </body>
 </html>