From fd190d2636e9c02c8d08590ab0850822a4429810 Mon Sep 17 00:00:00 2001
From: Lanta <thijs@opzeker.it>
Date: Tue, 17 Jun 2025 18:35:42 +0200
Subject: [PATCH 1/5] video dingen

---
 includes/styles.css        |  9 +++++++
 includes/styles_mobile.css |  8 ++++++
 videos.php                 | 50 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+)

diff --git a/includes/styles.css b/includes/styles.css
index cf3919d..d5cb071 100644
--- a/includes/styles.css
+++ b/includes/styles.css
@@ -262,3 +262,12 @@ 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;
+}
diff --git a/includes/styles_mobile.css b/includes/styles_mobile.css
index e6aaff5..e0d22bc 100644
--- a/includes/styles_mobile.css
+++ b/includes/styles_mobile.css
@@ -100,4 +100,12 @@ 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;
 }
\ No newline at end of file
diff --git a/videos.php b/videos.php
index 80805ef..f995be9 100644
--- a/videos.php
+++ b/videos.php
@@ -43,6 +43,10 @@ usort($videoData, function($a, $b) {
                             </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>
+                            </div>
                         </div>
                     <?php endforeach; ?>
                 </div>
@@ -54,5 +58,51 @@ 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 videoItem = btn.closest('.video-item');
+                if (!document.fullscreenElement) {
+                    if (videoItem.requestFullscreen) {
+                        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();
+                    }
+                }
+            });
+        });
+    });
+    </script>
 </body>
 </html>
\ No newline at end of file
-- 
2.49.1


From 7ef1ade9e02713833e8b3aea4753941811e48598 Mon Sep 17 00:00:00 2001
From: Lanta <thijs@opzeker.it>
Date: Tue, 17 Jun 2025 18:48:52 +0200
Subject: [PATCH 2/5] theater modus

---
 includes/styles.css        | 11 +++++++++++
 includes/styles_mobile.css | 10 ++++++++++
 videos.php                 | 20 ++------------------
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/includes/styles.css b/includes/styles.css
index d5cb071..ac7ca5e 100644
--- a/includes/styles.css
+++ b/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;
+}
diff --git a/includes/styles_mobile.css b/includes/styles_mobile.css
index e0d22bc..da632b7 100644
--- a/includes/styles_mobile.css
+++ b/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;
diff --git a/videos.php b/videos.php
index f995be9..1d5e1c1 100644
--- a/videos.php
+++ b/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) {
-                    if (videoItem.requestFullscreen) {
-                        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();
-                    }
-                }
+                var isActive = videoItem.classList.toggle('theatre-mode');
+                btn.innerText = isActive ? 'Sluit theatermodus' : 'Theatermodus';
             });
         });
     });
-- 
2.49.1


From af8c9ff61aaf5d05ad07c877a3dee4b7bf754a67 Mon Sep 17 00:00:00 2001
From: Lanta <thijs@opzeker.it>
Date: Tue, 17 Jun 2025 19:11:09 +0200
Subject: [PATCH 3/5] video format

---
 includes/styles.css        | 8 ++++++++
 includes/styles_mobile.css | 7 +++++++
 videos.php                 | 2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/includes/styles.css b/includes/styles.css
index ac7ca5e..7bd91d7 100644
--- a/includes/styles.css
+++ b/includes/styles.css
@@ -282,3 +282,11 @@ td, th {
     height: auto;
     max-height: none;
 }
+
+.video-title {
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
diff --git a/includes/styles_mobile.css b/includes/styles_mobile.css
index da632b7..f4cda5f 100644
--- a/includes/styles_mobile.css
+++ b/includes/styles_mobile.css
@@ -118,4 +118,11 @@ section h2 {
     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;
 }
\ No newline at end of file
diff --git a/videos.php b/videos.php
index 1d5e1c1..6ef7b33 100644
--- a/videos.php
+++ b/videos.php
@@ -41,7 +41,7 @@ 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 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>
-- 
2.49.1


From ff327d1886492c81cb9b89feed7585fc5b54a0fb Mon Sep 17 00:00:00 2001
From: Lanta <thijs@opzeker.it>
Date: Tue, 17 Jun 2025 19:25:00 +0200
Subject: [PATCH 4/5] theathermode

---
 includes/styles.css        | 34 ++++++++++++++++++++++++++++++++++
 includes/styles_mobile.css | 12 ++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/includes/styles.css b/includes/styles.css
index 7bd91d7..e022ed1 100644
--- a/includes/styles.css
+++ b/includes/styles.css
@@ -290,3 +290,37 @@ td, th {
     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;
+}
diff --git a/includes/styles_mobile.css b/includes/styles_mobile.css
index f4cda5f..dbea823 100644
--- a/includes/styles_mobile.css
+++ b/includes/styles_mobile.css
@@ -125,4 +125,16 @@ section h2 {
     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;
 }
\ No newline at end of file
-- 
2.49.1


From f72fb0bb7d1fe59e8205627ae70b714c28b9d4b5 Mon Sep 17 00:00:00 2001
From: Lanta <thijs@opzeker.it>
Date: Tue, 17 Jun 2025 19:46:03 +0200
Subject: [PATCH 5/5] theather modus

---
 videos.php | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/videos.php b/videos.php
index 6ef7b33..113215e 100644
--- a/videos.php
+++ b/videos.php
@@ -81,8 +81,18 @@ usort($videoData, function($a, $b) {
 
         document.querySelectorAll('.theatre-btn').forEach(function(btn) {
             btn.addEventListener('click', function() {
-                var videoItem = btn.closest('.video-item');
-                var isActive = videoItem.classList.toggle('theatre-mode');
+                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';
             });
         });
-- 
2.49.1