From 4b996a56753f3b3b08897c00adef23eddc53165e Mon Sep 17 00:00:00 2001 From: arabcoders Date: Sun, 2 Nov 2025 19:07:14 +0300 Subject: [PATCH 1/3] [FEAT] Add keyboard shortcuts to built-in video player --- .vscode/settings.json | 5 + ui/app/components/VideoPlayer.vue | 253 ++++++++++++++++++++- ui/app/composables/useKeyboardShortcuts.ts | 217 ++++++++++++++++++ ui/app/types/video.d.ts | 4 + ui/app/utils/keyboard.ts | 104 +++++++++ 5 files changed, 576 insertions(+), 7 deletions(-) create mode 100644 ui/app/composables/useKeyboardShortcuts.ts create mode 100644 ui/app/utils/keyboard.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index d5aadcdc..2400c3e0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -18,7 +18,11 @@ "aiocron", "anyio", "Archiver", + "arrowdown", + "arrowleft", "arrowless", + "arrowright", + "arrowup", "asyncio", "attl", "autonumber", @@ -36,6 +40,7 @@ "cifs", "connectionpool", "consoletitle", + "contenteditable", "continuedl", "cookiesfrombrowser", "copyts", diff --git a/ui/app/components/VideoPlayer.vue b/ui/app/components/VideoPlayer.vue index 7539a589..e26407ad 100644 --- a/ui/app/components/VideoPlayer.vue +++ b/ui/app/components/VideoPlayer.vue @@ -6,18 +6,230 @@ height: auto; max-height: 80vh; max-width: 80vw; + position: relative; +} + +.keyboard-help { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.95); + color: var(--bulma-white); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 1000; + border-radius: 4px; + overflow-y: auto; + padding: 2rem; +} + +.shortcuts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + max-width: 1000px; + width: 100%; +} + +.shortcut-section { + text-align: left; +} + +.shortcut-section h3 { + color: var(--bulma-primary); + margin-bottom: 1rem; + font-size: 1.1rem; +} + +.shortcut-item { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; + font-size: 0.95rem; +} + +.shortcut-item span:first-child { + flex: 1; +} + +.shortcut-item .kbd-group { + display: flex; + gap: 0.5rem; + margin-left: auto; +} + +.shortcut-key { + background: rgba(255, 255, 255, 0.1); + padding: 0.25rem 0.5rem; + border-radius: 3px; + margin-right: 1rem; + font-family: monospace; + font-weight: bold; + min-width: 60px; + text-align: center; +} + +.help-close-hint { + margin-top: 2rem; + font-size: 0.9rem; + color: var(--bulma-light); }