From 182ab62c33d28ab09beaccf285c86bb231c128bf Mon Sep 17 00:00:00 2001
From: Eriq Augustine <eriq.augustine@gmail.com>
Date: Sat, 16 Nov 2024 21:32:51 -0500
Subject: [PATCH] Set relative sizes for new control buttons and text inputs.

---
 static/css/style.css | 7 +++----
 static/js/html.js    | 8 ++++----
 static/js/media.js   | 2 --
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 4669a57..ba09896 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -207,8 +207,10 @@ img.spinner {
 
 .video-controls-row input,
 .video-controls-row button {
-    border-radius: 10px;
     height: 90%;
+    width: 20%;
+    border-radius: 10px;
+    font-size: 1.15vw;
 }
 
 .video-controls-row input,
@@ -256,12 +258,9 @@ img.spinner {
 
 .video-controls-clip input,
 .video-controls-clip button {
-    width: 20%;
 }
 
 .video-controls-seek button {
-    font-size: 30px;
-    width: 20%;
 }
 
 .metadata-area {
diff --git a/static/js/html.js b/static/js/html.js
index 2866d9a..0158ca9 100644
--- a/static/js/html.js
+++ b/static/js/html.js
@@ -28,11 +28,11 @@ function createVideoAreaHTML(videoInfo, path, type, latitude_input_value, longit
                     <button class='clip-end-now' onclick='setClipNow(false)'>Clip End</button>
                 </div>
                 <div class='video-controls-row video-controls-seek'>
-                    <button class='skip-far-back' onclick='videoSeekOffset(-5.0)'>↺</button>
-                    <button class='skip-back' onclick='videoSeekOffset(-0.5)'>↶</button>
+                    <button class='skip-far-back' onclick='videoSeekOffset(-5.0)'>\<\<</button>
+                    <button class='skip-back' onclick='videoSeekOffset(-0.5)'>\<</button>
                     <button class='play-pause' onclick='videoTogglePlay()'>⏵</button>
-                    <button class='skip-far-back' onclick='videoSeekOffset(0.5)'>↷</button>
-                    <button class='skip-far-back' onclick='videoSeekOffset(5.0)'>↻</button>
+                    <button class='skip-far-back' onclick='videoSeekOffset(0.5)'>\></button>
+                    <button class='skip-far-back' onclick='videoSeekOffset(5.0)'>\>\></button>
                 </div>
             </div>
         </div>
diff --git a/static/js/media.js b/static/js/media.js
index dd4173e..f469a2f 100644
--- a/static/js/media.js
+++ b/static/js/media.js
@@ -3,8 +3,6 @@
 window.shark = window.shark || {};
 window.shark.media = window.shark.media || {};
 
-// TODO - Relative font size for icons and inputs.
-
 // Initialize the video controls and block until the video is ready.
 function initVideoControls() {
     let video = document.querySelector('.main-video');