mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-05 23:18:53 -05:00
ChapterEditor: Add keyboard shortcuts for video playback controls
Implemented keyboard shortcuts for play/pause (Space), jump backward (ArrowLeft), and jump forward (ArrowRight) in the chapters editor. Shortcuts are disabled when typing in input fields to prevent interference with text entry.
This commit is contained in:
parent
b330567955
commit
085e944861
@ -6,6 +6,7 @@ import EditingTools from '@/components/EditingTools';
|
|||||||
import ClipSegments from '@/components/ClipSegments';
|
import ClipSegments from '@/components/ClipSegments';
|
||||||
import MobilePlayPrompt from '@/components/IOSPlayPrompt';
|
import MobilePlayPrompt from '@/components/IOSPlayPrompt';
|
||||||
import useVideoChapters from '@/hooks/useVideoChapters';
|
import useVideoChapters from '@/hooks/useVideoChapters';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const {
|
const {
|
||||||
@ -67,6 +68,46 @@ const App = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Handle keyboard shortcuts
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
// Don't handle keyboard shortcuts if user is typing in an input field
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (event.code) {
|
||||||
|
case 'Space':
|
||||||
|
event.preventDefault(); // Prevent default spacebar behavior (scrolling, button activation)
|
||||||
|
handlePlay();
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
event.preventDefault();
|
||||||
|
if (videoRef.current) {
|
||||||
|
const newTime = Math.max(currentTime - 10, 0);
|
||||||
|
handleMobileSafeSeek(newTime);
|
||||||
|
logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
event.preventDefault();
|
||||||
|
if (videoRef.current) {
|
||||||
|
const newTime = Math.min(currentTime + 10, duration);
|
||||||
|
handleMobileSafeSeek(newTime);
|
||||||
|
logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
};
|
||||||
|
}, [handlePlay, handleMobileSafeSeek, currentTime, duration, videoRef]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-background min-h-screen">
|
<div className="bg-background min-h-screen">
|
||||||
<MobilePlayPrompt videoRef={videoRef} onPlay={handlePlay} />
|
<MobilePlayPrompt videoRef={videoRef} onPlay={handlePlay} />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user