summaryrefslogtreecommitdiff
path: root/web/css
diff options
context:
space:
mode:
authorPaul Buetow <paul@buetow.org>2026-05-05 23:07:35 +0300
committerPaul Buetow <paul@buetow.org>2026-05-05 23:07:35 +0300
commit69a3a88b85ed0a56bf442af4fec420c871d337fa (patch)
treeb1c01a820454cb43fe5f9ecf8c3af1f250a1b534 /web/css
parentf96c13de4828a3d531f4dc62f63ba571542c3ece (diff)
Add fullscreen crop mode toggle (hotkey c)
- In fullscreen, press 'c' to toggle object-fit between contain (default) and fill (stretches to fill, no aspect ratio preservation). - Adds .player.crop-mode video { object-fit: fill; } in player.css. - Adds toggleCrop() in player.js that toggles a crop-mode class and a small UI indicator (✂️) in the controls, visible only in fullscreen. - Resets crop mode back to contain when exiting fullscreen (via Escape, minimize, or fullscreenchange event). - Wires the 'c' hotkey in keyboard.js and registers toggleCrop in app.js. - Adds crop-indicator to index.html and detach.html controls, and documents the shortcut in the help modal.
Diffstat (limited to 'web/css')
-rw-r--r--web/css/player.css11
1 files changed, 11 insertions, 0 deletions
diff --git a/web/css/player.css b/web/css/player.css
index 0f468f9..7a8b561 100644
--- a/web/css/player.css
+++ b/web/css/player.css
@@ -128,6 +128,17 @@
max-height: 100%;
}
+.player.crop-mode video {
+ object-fit: fill;
+}
+
+.crop-indicator {
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ padding: 0 0.25rem;
+ user-select: none;
+}
+
/* Cover art for audio playback */
.player .cover-art {
width: 100%;