Add end clip shortcuts

frontend/src/pages/LibraryPage.tsx

@@ -15,6 +15,7 @@ import { formatGameTitle, formatMemberName } from "../lib/teamsnapHelpers";
 const MEDIA_ACCEPT =
   ".mp3,.m4a,.aac,.wav,.ogg,.oga,.flac,.mp4,.m4v,.mov,audio/*,video/*,application/octet-stream";
 const DEFAULT_CLIP_LENGTH_MS = 30_000;
+const END_SHORTCUT_LENGTH_MS = 90_000;
 const TRIM_NUDGE_MS = 100;
 const TRIM_STEP_MS = 100;
 const TRIM_ZOOM_WINDOW_MS = 3_000;
@@ -1274,10 +1275,6 @@ function WalkupClipEditorPanel({
     await handleSave();
   }
 
-  function useThirtySecondLength() {
-    setEndMs(startMs + DEFAULT_CLIP_LENGTH_MS);
-  }
-
   function handleStartChange(nextStart: number) {
     setStartMs(nextStart);
     if (nextStart >= endMs) {
@@ -1554,10 +1551,14 @@ function ClipTrimScrubber({
     onStartChange(nextStartMs);
   }
 
-  function nudgeEnd(deltaMs: number) {
+  function setEndToDefaultLength() {
-    const nextEndMs = Math.max(safeStartMs + 1, safeEndMs + deltaMs);
+    onEndChange(Math.min(Math.max(1, durationMs), safeStartMs + END_SHORTCUT_LENGTH_MS));
+    setFocusEdge("end");
+  }
+
+  function setEndToSourceEnd() {
+    onEndChange(Math.max(1, durationMs));
     setFocusEdge("end");
-    onEndChange(nextEndMs);
   }
 
   return (
@@ -1608,12 +1609,12 @@ function ClipTrimScrubber({
           <div className="clip-waveform-control-header">
             <span>End</span>
             <span className="muted">{formatPlaybackPosition(safeEndMs)}</span>
-            <div className="clip-waveform-nudges">
+            <div className="btn-group btn-group-sm" role="group" aria-label="End clip shortcuts">
-              <button type="button" className="btn btn-outline-secondary btn-sm" onClick={() => nudgeEnd(-TRIM_NUDGE_MS)}>
+              <button type="button" className="btn btn-outline-secondary" onClick={setEndToDefaultLength}>
-                -{TRIM_NUDGE_MS}ms
+                1:30
               </button>
-              <button type="button" className="btn btn-outline-secondary btn-sm" onClick={() => nudgeEnd(TRIM_NUDGE_MS)}>
+              <button type="button" className="btn btn-outline-secondary" onClick={setEndToSourceEnd}>
-                +{TRIM_NUDGE_MS}ms
+                EOF
               </button>
             </div>
           </div>