From 5ab145b031f751d4ee6e5454eaa92922a5773399 Mon Sep 17 00:00:00 2001 From: ElementalAlchemist Date: Sat, 9 Nov 2024 21:18:01 -0600 Subject: [PATCH] Add components for keyboard shortcuts --- thrimbletrimmer/src/common/videoData.tsx | 3 ++ .../src/common/videoKeyboardShortcuts.tsx | 45 +++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 thrimbletrimmer/src/common/videoData.tsx create mode 100644 thrimbletrimmer/src/common/videoKeyboardShortcuts.tsx diff --git a/thrimbletrimmer/src/common/videoData.tsx b/thrimbletrimmer/src/common/videoData.tsx new file mode 100644 index 0000000..b75e4a8 --- /dev/null +++ b/thrimbletrimmer/src/common/videoData.tsx @@ -0,0 +1,3 @@ +export const VIDEO_FRAMES_PER_SECOND = 30; + +export const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4, 8]; diff --git a/thrimbletrimmer/src/common/videoKeyboardShortcuts.tsx b/thrimbletrimmer/src/common/videoKeyboardShortcuts.tsx new file mode 100644 index 0000000..c7174c8 --- /dev/null +++ b/thrimbletrimmer/src/common/videoKeyboardShortcuts.tsx @@ -0,0 +1,45 @@ +import { Component, Show } from "solid-js"; + +export interface KeyboardShortcutProps { + includeEditorShortcuts: boolean; +} + +export const KeyboardShortcuts: Component = ( + props: KeyboardShortcutProps, +) => { + return ( +
+ Keyboard Shortcuts +
    +
  • Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)
    • +
  • K or Space: Toggle pause
    • +
  • M: Toggle mute
    • +
  • J: Back 10 seconds
    • +
  • L: Forward 10 seconds
    • +
  • Left arrow: Back 5 seconds
    • +
  • Right arrow: Forward 5 seconds
    • +
  • Shift+J: Back 1 second
    • +
  • Shift+L: Forward 1 second
    • +
  • Comma (,): Back 1 frame
    • +
  • Period (.): Forward 1 frame
    • +
  • Equals (=): Increase playback speed 1 step
    • +
  • Hyphen (-): Decrease playback speed 1 step
    • +
  • Shift+=: 2x or maximum playback speed
    • +
  • Shift+-: Minimum playback speed
    • +
  • Backspace: Reset playback speed to 1x
    • + +
  • + Left bracket ([): Set start point for active range (indicated by arrow) to current video + time +
    • +
  • Right bracket (]): Set end point for active range to current video time
    • +
  • O: Set active range one above current active range
    • +
  • + P: Set active range one below current active range, adding a new range if the current + range is the last one +
    • +     +
+
+ ); +};