-
{`${selectedReviews.length} selected`}
-
{"|"}
-
- Unselect
+ <>
+
setDeleteDialogOpen(!deleteDialogOpen)}
+ >
+
+
+ Confirm Delete
+
+
+ Are you sure you want to delete all recorded video associated with
+ the selected review items?
+
+
+ Hold the Shift key to bypass this dialog in the future.
+
+
+ Cancel
+
+ Delete
+
+
+
+
+
+
+
+
{`${selectedReviews.length} selected`}
+
{"|"}
+
+ Unselect
+
-
-
- {selectedReviews.length == 1 && (
+
+ {selectedReviews.length == 1 && (
+
{
+ onExport(selectedReviews[0]);
+ onClearSelected();
+ }}
+ >
+
+ {isDesktop && Export
}
+
+ )}
{
- onExport(selectedReviews[0]);
- onClearSelected();
- }}
+ onClick={onMarkAsReviewed}
>
-
- {isDesktop && Export
}
+
+ {isDesktop && Mark as reviewed
}
- )}
-
-
- {isDesktop && Mark as reviewed
}
-
-
-
- {isDesktop && Delete
}
-
+
+
+ {isDesktop && (
+
+ {bypassDialog ? "Delete Now" : "Delete"}
+
+ )}
+
+
-
+ >
);
}
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 70d9a4be8..50b2cc045 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -141,7 +141,7 @@ export default function VideoControls({
}, [volume, muted]);
const onKeyboardShortcut = useCallback(
- (key: string, modifiers: KeyModifiers) => {
+ (key: string | null, modifiers: KeyModifiers) => {
if (!modifiers.down) {
return;
}
diff --git a/web/src/hooks/use-keyboard-listener.tsx b/web/src/hooks/use-keyboard-listener.tsx
index f127cf0d8..ad9462a05 100644
--- a/web/src/hooks/use-keyboard-listener.tsx
+++ b/web/src/hooks/use-keyboard-listener.tsx
@@ -4,11 +4,12 @@ export type KeyModifiers = {
down: boolean;
repeat: boolean;
ctrl: boolean;
+ shift: boolean;
};
export default function useKeyboardListener(
keys: string[],
- listener: (key: string, modifiers: KeyModifiers) => void,
+ listener: (key: string | null, modifiers: KeyModifiers) => void,
) {
const keyDownListener = useCallback(
(e: KeyboardEvent) => {
@@ -16,13 +17,18 @@ export default function useKeyboardListener(
return;
}
+ const modifiers = {
+ down: true,
+ repeat: e.repeat,
+ ctrl: e.ctrlKey || e.metaKey,
+ shift: e.shiftKey,
+ };
+
if (keys.includes(e.key)) {
e.preventDefault();
- listener(e.key, {
- down: true,
- repeat: e.repeat,
- ctrl: e.ctrlKey || e.metaKey,
- });
+ listener(e.key, modifiers);
+ } else if (e.key === "Shift" || e.key === "Control" || e.key === "Meta") {
+ listener(null, modifiers);
}
},
[keys, listener],
@@ -34,9 +40,18 @@ export default function useKeyboardListener(
return;
}
+ const modifiers = {
+ down: false,
+ repeat: false,
+ ctrl: false,
+ shift: false,
+ };
+
if (keys.includes(e.key)) {
e.preventDefault();
- listener(e.key, { down: false, repeat: false, ctrl: false });
+ listener(e.key, modifiers);
+ } else if (e.key === "Shift" || e.key === "Control" || e.key === "Meta") {
+ listener(null, modifiers);
}
},
[keys, listener],
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 51f46d2f2..a91afb356 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -31,9 +31,7 @@ import { cn } from "@/lib/utils";
import { LivePlayerError, LivePlayerMode } from "@/types/live";
import { FaCompress, FaExpand } from "react-icons/fa";
import { useResizeObserver } from "@/hooks/resize-observer";
-import useKeyboardListener, {
- KeyModifiers,
-} from "@/hooks/use-keyboard-listener";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
type LiveDashboardViewProps = {
cameras: CameraConfig[];
@@ -250,22 +248,17 @@ export default function LiveDashboardView({
[setPreferredLiveModes],
);
- const onKeyboardShortcut = useCallback(
- (key: string, modifiers: KeyModifiers) => {
- if (!modifiers.down) {
- return;
- }
+ useKeyboardListener(["f"], (key, modifiers) => {
+ if (!modifiers.down) {
+ return;
+ }
- switch (key) {
- case "f":
- toggleFullscreen();
- break;
- }
- },
- [toggleFullscreen],
- );
-
- useKeyboardListener(["f"], onKeyboardShortcut);
+ switch (key) {
+ case "f":
+ toggleFullscreen();
+ break;
+ }
+ });
return (