Added clipping functionality to the UI (not the backend).

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

Hide file tree

Showing 3 changed files with 194 additions and 75 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -199,41 +199,69 @@ img.spinner {
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+    gap: 1%;
 
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 1%;
+    padding-right: 1%;
 }
 
 .video-controls-row input,
-.video-controls-row button,
-.video-controls-row progress {
+.video-controls-row button {
     border-radius: 10px;
-    flex-grow: 1;
     height: 90%;
 }
 
 .video-controls-row input,
 .video-controls-row button {
+    padding: 0;
     text-align: center;
 }
 
 .video-controls-row input {
-    padding: 0;
     border: 0;
 }
 
 .video-controls-row button {
-    padding: 0;
-    font-size: 30px;
 }
 
-.video-controls-row progress {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+.video-controls-progress {
+    position: relative;
+}
 
+.video-controls-progress input {
+    border-radius: 10px;
+    height: 90%;
     width: 100%;
+    z-index: 10;
+}
+
+.video-controls-progress .clip-highlight-container {
+    position: absolute;
+    width: 98%;
+    height: 100%;
+    z-index: 5;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.video-controls-progress .clip-highlight {
+    position: absolute;
+    width: 100%;
+    height: 50%;
+    border-radius: 5px;
+    background-color: #6cbbea;
+}
+
+.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
@@ -12,7 +12,20 @@ function createVideoAreaHTML(videoInfo, path, type, latitude_input_value, longit
             </div>
             <div class='video-controls'>
                 <div class='video-controls-row video-controls-progress'>
-                    <progress value='0.0' min='0.0' onclick='videoSeekProgress(this, event)'></progress>
+                    <input type='range'
+                            class='progress-bar'
+                            value='0.0' min='0.0' max='1.0' step='0.01'
+                            onchange='videoSeekProportional(this)' />
+                    <div class='clip-highlight-container'>
+                        <div class='clip-highlight'></div>
+                    </div>
+                </div>
+                <div class='video-controls-row video-controls-clip'>
+                    <button class='clip-start-now' onclick='setClipNow(true)'>Clip Start</button>
+                    <input type='text' class='clip-start' onchange='setClipAbsolute(this, true)' value='-' />
+                    <input type='text' class='current-time' onchange='videoSeek(this)' value='-' />
+                    <input type='text' class='clip-end' onchange='setClipAbsolute(this, false)' value='-' />
+                    <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>
@@ -21,11 +34,6 @@ function createVideoAreaHTML(videoInfo, path, type, latitude_input_value, longit
                     <button class='skip-far-back' onclick='videoSeekOffset(0.5)'>↷</button>
                     <button class='skip-far-back' onclick='videoSeekOffset(5.0)'>↻</button>
                 </div>
-                <div class='video-controls-row video-controls-clip'>
-                    <input type='text' class='clip-start' onchange='setClip(this, true)' />
-                    <input type='text' class='current-time' onchange='videoSeek(this)' />
-                    <input type='text' class='clip-end' onchange='setClip(this, false)' />
-                </div>
             </div>
         </div>
         <div class='metadata-area'>