Add ability to export from recordings page (#10692)

* Add dialog to export recordings

* Add export dialog functionality

* Add ability to name exports

* Add ability to choose custom time range on timeline

* Add ability to choose custom time range on timeline

* Add custom time selection

* Make hot keys optional for typing name of export

* Tweaks to dialog

* Tweaks to dialog

* round corners more

* Final tweaks

web/src/components/player/HlsVideoPlayer.tsx

@@ -22,6 +22,7 @@ type HlsVideoPlayerProps = {
   videoRef: MutableRefObject<HTMLVideoElement | null>;
   visible: boolean;
   currentSource: string;
+  hotKeys: boolean;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
@@ -33,6 +34,7 @@ export default function HlsVideoPlayer({
   videoRef,
   visible,
   currentSource,
+  hotKeys,
   onClipEnded,
   onPlayerLoaded,
   onTimeUpdate,
@@ -161,6 +163,7 @@ export default function HlsVideoPlayer({
         controlsOpen={controlsOpen}
         setControlsOpen={setControlsOpen}
         playbackRate={videoRef.current?.playbackRate ?? 1}
+        hotKeys={hotKeys}
         onPlayPause={(play) => {
           if (!videoRef.current) {
             return;

web/src/components/player/VideoControls.tsx

@@ -41,6 +41,7 @@ type VideoControlsProps = {
   controlsOpen?: boolean;
   playbackRates?: number[];
   playbackRate: number;
+  hotKeys?: boolean;
   setControlsOpen?: (open: boolean) => void;
   onPlayPause: (play: boolean) => void;
   onSeek: (diff: number) => void;
@@ -55,6 +56,7 @@ export default function VideoControls({
   controlsOpen,
   playbackRates = PLAYBACK_RATE_DEFAULT,
   playbackRate,
+  hotKeys = true,
   setControlsOpen,
   onPlayPause,
   onSeek,
@@ -130,7 +132,7 @@ export default function VideoControls({
     [video, isPlaying, onSeek],
   );
   useKeyboardListener(
-    ["ArrowLeft", "ArrowRight", "m", " "],
+    hotKeys ? ["ArrowLeft", "ArrowRight", "m", " "] : [],
     onKeyboardShortcut,
   );
 

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -20,6 +20,7 @@ type DynamicVideoPlayerProps = {
   cameraPreviews: Preview[];
   startTimestamp?: number;
   isScrubbing: boolean;
+  hotKeys: boolean;
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
@@ -31,6 +32,7 @@ export default function DynamicVideoPlayer({
   cameraPreviews,
   startTimestamp,
   isScrubbing,
+  hotKeys,
   onControllerReady,
   onTimestampUpdate,
   onClipEnded,
@@ -172,6 +174,7 @@ export default function DynamicVideoPlayer({
         videoRef={playerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
+        hotKeys={hotKeys}
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}
         onClipEnded={onClipEnded}