ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: keep caption shortcuts outside component

Browse Source
This commit is contained in:
Miguel Ángel
2026-04-28 22:44:23 -04:00
parent 9dc17ae30d
commit 5fe53a0f9c
3 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/captions/components/CaptionOverlay.test.ts
-38
View File
@@ -1,38 +0,0 @@
import { describe, expect, it } from "vitest";
import { shouldHandleCaptionNudgeKey } from "./CaptionOverlay";
function mockKeyboardEvent(
key: string,
overrides: Partial<Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey">> = {},
): Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "key"> {
return {
altKey: false,
ctrlKey: false,
metaKey: false,
key,
...overrides,
};
}
describe("shouldHandleCaptionNudgeKey", () => {
it("handles plain and Shift-modified arrow keys for caption nudging", () => {
expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowLeft"))).toBe(true);
expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowRight"))).toBe(true);
});
it("ignores browser and app shortcut chords", () => {
expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowLeft", { altKey: true }))).toBe(
false,
);
expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowRight", { ctrlKey: true }))).toBe(
false,
);
expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowRight", { metaKey: true }))).toBe(
false,
);
});
it("ignores non-arrow keys", () => {
expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("KeyL"))).toBe(false);
});
});
packages/studio/src/captions/components/CaptionOverlay.tsx
+1 -8
View File
@@ -1,6 +1,7 @@
import { memo, useState, useCallback, useRef } from "react";
import { useCaptionStore } from "../store";
import { useMountEffect } from "../../hooks/useMountEffect";
import { shouldHandleCaptionNudgeKey } from "../keyboard";
interface CaptionOverlayProps {
iframeRef: React.RefObject<HTMLIFrameElement | null>;
@@ -251,14 +252,6 @@ function syncToStore(segmentId: string, el: HTMLElement, iframeWin: Window) {
const HANDLE = 8;
const ROTATION_OFFSET = 20; // px above the selection box
const CAPTION_NUDGE_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
type CaptionNudgeKeyEvent = Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "key">;
export function shouldHandleCaptionNudgeKey(event: CaptionNudgeKeyEvent): boolean {
if (event.metaKey || event.ctrlKey || event.altKey) return false;
return CAPTION_NUDGE_KEYS.has(event.key);
}
export const CaptionOverlay = memo(function CaptionOverlay({ iframeRef }: CaptionOverlayProps) {
const isEditMode = useCaptionStore((s) => s.isEditMode);