Set relative sizes for new control buttons and text inputs.

linqs · Nov 17, 2024 · 182ab62 · 182ab62
1 parent 4b07ad9
commit 182ab62
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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');