From f913eb938578a572abadd28f130a59fff6ec10ed Mon Sep 17 00:00:00 2001
From: deflax <daniel@deflax.net>
Date: Sat, 20 Jan 2024 00:56:11 +0200
Subject: [PATCH] apply bootstrap

---
 src/scheduler/templates/watch.html | 37 +++++++++++++++++-------------
 1 file changed, 21 insertions(+), 16 deletions(-)
diff --git a/src/scheduler/templates/watch.html b/src/scheduler/templates/watch.html
index b696548..118dcd6 100644
--- a/src/scheduler/templates/watch.html
+++ b/src/scheduler/templates/watch.html
@@ -19,17 +19,12 @@
     <meta name='twitter:image' content={{ url_for('thumb_route', file_name=thumb_file) }}>
     <meta name='twitter:image:alt' content="{{ video_file[:-4] }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
     <style>
         body {
 	        background-color: #212529;
         }
 
-        #player-container {
-            width: 100%;
-            height: 100vh; /* 100% of the viewport height */
-            object-fit: cover; /* This ensures the video covers the entire container, maintaining its aspect ratio */
-        }
-
         .video-container {
             position: absolute;
             top: 0;
@@ -56,16 +51,29 @@
         }
     </style>
     <title>DeflaxTV Video Player</title>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.js" crossorigin="anonymous"></script>
 </head>
 <body>
-
-<div class="video-container">
-    <video playsinline controls>
-        <source src="{{ url_for('video_route', file_name=video_file) }}" type="video/mp4">
-    </video>
+    
+<div class="content-container bg-dark text-white">
+    <div id="stream" class="container-fluid p-3 bg-dark text-white">
+    <div class="row">
+        <div class="col-xs-12 col-md-1">
+        </div>
+        <div class="col-xs-12 col-md-10">
+            <div class="video-container" poster="{{ url_for('thumb_route', file_name=thumb_file) }}">
+                <video id="player" controls crossorigin playsinline >
+                    <source src="{{ url_for('video_route', file_name=video_file) }}" type="video/mp4">
+                </video>
+            </div>
+        </div>
+        <div class="col-xs-12 col-md-1">
+        </div>
+    </div>
+    </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.js" crossorigin="anonymous"></script>
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         const player = new Plyr('#player');
@@ -73,7 +81,4 @@
 </script>
 
 </body>
-</html>
-
-</body>
-</html>
+</html>
\ No newline at end of file
