From 28e4b3d6f5a41409d0feee86062e16b383f2cf1c Mon Sep 17 00:00:00 2001
From: Carl Pearson <srht@carlpearson.net>
Date: Thu, 26 Sep 2024 05:33:08 -0600
Subject: [PATCH] Video page styling

---
 static/style/video.css | 53 +++++++++++++++++++++++--------------
 templates/video.html   | 59 ++++++++++++++++++++++++++----------------
 2 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/static/style/video.css b/static/style/video.css
index 6b41ff4..077f773 100644
--- a/static/style/video.css
+++ b/static/style/video.css
@@ -22,13 +22,20 @@ button {
 .media-card button {
     display: inline-block;
     padding: 10px 15px;
+    margin: 1rem;
     text-decoration: none;
     border-radius: 4px;
 }
 
-.new-transcode button {
-    background-color: green;
+.media-card a {
+    display: inline-block;
+    padding: 10px 15px;
+    margin: 1rem;
+    margin-bottom: 0;
+    background-color: #007bff;
     color: white;
+    text-decoration: none;
+    border-radius: 4px;
 }
 
 .media-card h3 {
@@ -38,6 +45,24 @@ button {
     background-color: #f8f8f8;
 }
 
+.new-transcode form {
+    display: flex;
+    flex-direction: column;
+}
+
+.new-transcode .selects {
+    display: flex;
+    flex-direction: row;
+}
+
+.new-transcode select {
+    padding: 0.5rem;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    flex-grow: 1;
+    margin: 1rem;
+}
+
 .audio-container audio {
     width: 100%;
 }
@@ -49,30 +74,20 @@ button {
     margin: 0 auto;
 }
 
-.media-download {
-    padding: 15px;
+.media-buttons {
     text-align: center;
 }
 
-.media-download a {
-    display: inline-block;
-    padding: 10px 15px;
-    background-color: #007bff;
-    color: white;
-    text-decoration: none;
-    border-radius: 4px;
-}
-
-.media-controls {
-    text-align: center;
-    padding-bottom: 15px;
-}
-
-.media-controls button {
+.delete-button {
     background-color: red;
     color: white;
 }
 
+.transcode-button {
+    background-color: green;
+    color: white;
+}
+
 /* narrower than 600px */
 @media (max-width: 600px) {
     .media-grid {
diff --git a/templates/video.html b/templates/video.html
index dad204c..106d9f2 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -24,29 +24,40 @@
                     Your browser does not support the video tag.
                 </video>
             </div>
-            <div class="media-download">
-                <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}}, {{.StreamRate}})</a>
-            </div>
-            {{if ne .Source "original"}}
-            <div class="media-controls">
+            <div class="media-buttons">
+                <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}},
+                    {{.StreamRate}})</a>
+                {{if ne .Source "original"}}
                 <form action="/delete_video/{{.ID}}" method="post">
-                    <button type="submit">Delete</button>
+                    <button class="delete-button" type="submit">Delete</button>
                 </form>
+                {{end}}
             </div>
-            {{end}}
         </div>
         {{end}}
         <div class="media-card new-transcode">
+            <h3>New Transcode</h3>
             <form action="/transcode_to_video/{{.original.ID}}" method="post">
                 <input type="hidden" name="original_id" value="{{.original.ID}}">
-                <label for="height-select">Height:</label>
-                <select name="height" id="height-select">
-                    <option value="144">144p</option>
-                    <option value="240">240p</option>
-                    <option value="360">360p</option>
-                </select>
+                <div class="selects">
+                    <select name="height" id="height-select">
+                        <option value="144">144p</option>
+                        <option value="240">240p</option>
+                        <option value="360">360p</option>
+                        <option value="480">480p</option>
+                        <option value="720">720p</option>
+                        <option value="1080">1080p</option>
+                        <option value="2160">2160p</option>
+                    </select>
 
-                <button type="submit">Transcode</button>
+                    <select name="fps" id="fps-select">
+                        <option value="24">24 fps</option>
+                        <option value="25">25 fps</option>
+                        <option value="30">30 fps</option>
+                        <option value="60">60 fps</option>
+                    </select>
+                </div>
+                <button class="transcode-button" type="submit">Transcode</button>
             </form>
         </div>
     </div>
@@ -60,28 +71,30 @@
                     Your browser does not support the audio tag.
                 </audio>
             </div>
-            <div class="media-download">
-                <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}}, {{.StreamRate}})</a>
-            </div>
-            {{if ne .Source "original"}}
-            <div class="media-controls">
+            <div class="media-buttons">
+                <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}},
+                    {{.StreamRate}})</a>
+                {{if ne .Source "original"}}
                 <form action="/delete_audio/{{.ID}}" method="post">
-                    <button type="submit">Delete</button>
+                    <button class="delete-button" type="submit">Delete</button>
                 </form>
+                {{end}}
             </div>
-            {{end}}
         </div>
         {{end}}
         <div class="media-card new-transcode">
+            <h3>New Transcode</h3>
             <form action="/transcode_to_audio/{{.original.ID}}" method="post">
                 <input type="hidden" name="original_id" value="{{.original.ID}}">
-                <label for="kbps-select">Kbps:</label>
                 <select name="kbps" id="kbps-select">
                     <option value="64">64 kbps</option>
                     <option value="96">96 kbps</option>
+                    <option value="128">128 kbps</option>
+                    <option value="160">160 kbps</option>
+                    <option value="192">192 kbps</option>
                 </select>
 
-                <button type="submit">Transcode</button>
+                <button class="transcode-button" type="submit">Transcode</button>
             </form>
         </div>
     </div>