From 9fc51145eb987e6bc1dd69243c21d9fc27d20d93 Mon Sep 17 00:00:00 2001
From: Leopere <colin@nixc.us>
Date: Mon, 10 Mar 2025 12:28:24 -0400
Subject: [PATCH] Replace VideoJS with native HTML5 video player for dedicated
 video pages

---
 docker/showerloop/public/videos/video1.html | 23 +++++----------------
 docker/showerloop/public/videos/video2.html | 23 +++++----------------
 docker/showerloop/public/videos/video3.html | 23 +++++----------------
 3 files changed, 15 insertions(+), 54 deletions(-)

diff --git a/docker/showerloop/public/videos/video1.html b/docker/showerloop/public/videos/video1.html
index 518958b..030090c 100644
--- a/docker/showerloop/public/videos/video1.html
+++ b/docker/showerloop/public/videos/video1.html
@@ -22,13 +22,7 @@
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     
     <!-- Video.js CSS and JS -->
-    <link rel="stylesheet" href="/static/css/video-js.min.css">
     <link rel="stylesheet" href="/static/css/custom-video.css">
-    <link rel="stylesheet" href="/static/css/chrome-video-fallback.css">
-    <script src="/static/js/vendor/video.min.js"></script>
-    <script src="/static/js/vendor/videojs-http-streaming.min.js"></script>
-    <script src="/static/js/videojs-player.min.js"></script>
-    <script src="/static/js/chrome-video-fallback.min.js"></script>
     
     <style>
         .video-container {
@@ -37,17 +31,11 @@
             padding: 20px;
             position: relative;
         }
-        .video-js {
+        video {
             width: 100%;
-            height: 0 !important;
-            padding-top: 56.25% !important; /* 16:9 aspect ratio */
-        }
-        .video-js .vjs-tech {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            height: auto;
+            max-height: 80vh;
+            background-color: #000;
         }
         .video-title {
             text-align: center;
@@ -103,8 +91,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video1" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video1.webp">
-                        <source src="/static/videos/hls/video1/master.m3u8" type="application/x-mpegurl">
+                    <video id="video1" controls preload="auto" width="100%" poster="/static/videos/posters/video1.webp">
                         <source src="/static/videos/video1.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
                     </video>
diff --git a/docker/showerloop/public/videos/video2.html b/docker/showerloop/public/videos/video2.html
index cbcacfa..96b9198 100644
--- a/docker/showerloop/public/videos/video2.html
+++ b/docker/showerloop/public/videos/video2.html
@@ -22,13 +22,7 @@
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     
     <!-- Video.js CSS and JS -->
-    <link rel="stylesheet" href="/static/css/video-js.min.css">
     <link rel="stylesheet" href="/static/css/custom-video.css">
-    <link rel="stylesheet" href="/static/css/chrome-video-fallback.css">
-    <script src="/static/js/vendor/video.min.js"></script>
-    <script src="/static/js/vendor/videojs-http-streaming.min.js"></script>
-    <script src="/static/js/videojs-player.min.js"></script>
-    <script src="/static/js/chrome-video-fallback.min.js"></script>
     
     <style>
         .video-container {
@@ -37,17 +31,11 @@
             padding: 20px;
             position: relative;
         }
-        .video-js {
+        video {
             width: 100%;
-            height: 0 !important;
-            padding-top: 56.25% !important; /* 16:9 aspect ratio */
-        }
-        .video-js .vjs-tech {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            height: auto;
+            max-height: 80vh;
+            background-color: #000;
         }
         .video-title {
             text-align: center;
@@ -103,8 +91,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video2.webp">
-                        <source src="/static/videos/hls/video2/master.m3u8" type="application/x-mpegurl">
+                    <video id="video2" controls preload="auto" width="100%" poster="/static/videos/posters/video2.webp">
                         <source src="/static/videos/video2.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
                     </video>
diff --git a/docker/showerloop/public/videos/video3.html b/docker/showerloop/public/videos/video3.html
index dab79d5..6678d41 100644
--- a/docker/showerloop/public/videos/video3.html
+++ b/docker/showerloop/public/videos/video3.html
@@ -22,13 +22,7 @@
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     
     <!-- Video.js CSS and JS -->
-    <link rel="stylesheet" href="/static/css/video-js.min.css">
     <link rel="stylesheet" href="/static/css/custom-video.css">
-    <link rel="stylesheet" href="/static/css/chrome-video-fallback.css">
-    <script src="/static/js/vendor/video.min.js"></script>
-    <script src="/static/js/vendor/videojs-http-streaming.min.js"></script>
-    <script src="/static/js/videojs-player.min.js"></script>
-    <script src="/static/js/chrome-video-fallback.min.js"></script>
     
     <style>
         .video-container {
@@ -37,17 +31,11 @@
             padding: 20px;
             position: relative;
         }
-        .video-js {
+        video {
             width: 100%;
-            height: 0 !important;
-            padding-top: 56.25% !important; /* 16:9 aspect ratio */
-        }
-        .video-js .vjs-tech {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            height: auto;
+            max-height: 80vh;
+            background-color: #000;
         }
         .video-title {
             text-align: center;
@@ -103,8 +91,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video3" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video3.webp">
-                        <source src="/static/videos/hls/video3/master.m3u8" type="application/x-mpegurl">
+                    <video id="video3" controls preload="auto" width="100%" poster="/static/videos/posters/video3.webp">
                         <source src="/static/videos/video3.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
                     </video>