mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
fix: keep caption shortcuts outside component
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import { memo, useState, useCallback, useRef } from "react";
|
import { memo, useState, useCallback, useRef } from "react";
|
||||||
import { useCaptionStore } from "../store";
|
import { useCaptionStore } from "../store";
|
||||||
import { useMountEffect } from "../../hooks/useMountEffect";
|
import { useMountEffect } from "../../hooks/useMountEffect";
|
||||||
|
import { shouldHandleCaptionNudgeKey } from "../keyboard";
|
||||||
|
|
||||||
interface CaptionOverlayProps {
|
interface CaptionOverlayProps {
|
||||||
iframeRef: React.RefObject<HTMLIFrameElement | null>;
|
iframeRef: React.RefObject<HTMLIFrameElement | null>;
|
||||||
@@ -251,14 +252,6 @@ function syncToStore(segmentId: string, el: HTMLElement, iframeWin: Window) {
|
|||||||
|
|
||||||
const HANDLE = 8;
|
const HANDLE = 8;
|
||||||
const ROTATION_OFFSET = 20; // px above the selection box
|
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) {
|
export const CaptionOverlay = memo(function CaptionOverlay({ iframeRef }: CaptionOverlayProps) {
|
||||||
const isEditMode = useCaptionStore((s) => s.isEditMode);
|
const isEditMode = useCaptionStore((s) => s.isEditMode);
|
||||||
|
|||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
import { describe, expect, it } from "vitest";
|
import { describe, expect, it } from "vitest";
|
||||||
import { shouldHandleCaptionNudgeKey } from "./CaptionOverlay";
|
import { shouldHandleCaptionNudgeKey } from "./keyboard";
|
||||||
|
|
||||||
function mockKeyboardEvent(
|
function mockKeyboardEvent(
|
||||||
key: string,
|
key: string,
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user