diff options
| author | Paul Buetow <paul@buetow.org> | 2026-05-05 23:07:35 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-05-05 23:07:35 +0300 |
| commit | 69a3a88b85ed0a56bf442af4fec420c871d337fa (patch) | |
| tree | b1c01a820454cb43fe5f9ecf8c3af1f250a1b534 /web/detach.html | |
| parent | f96c13de4828a3d531f4dc62f63ba571542c3ece (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/detach.html')
| -rw-r--r-- | web/detach.html | 1 |
1 files changed, 1 insertions, 0 deletions
diff --git a/web/detach.html b/web/detach.html index b83ef68..8d6af63 100644 --- a/web/detach.html +++ b/web/detach.html @@ -37,6 +37,7 @@ <input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1" class="volume-slider" aria-label="Volume"> </div> <button id="btn-fullscreen" class="icon-btn" aria-label="Fullscreen">⛺</button> + <span id="crop-indicator" class="crop-indicator hidden" title="Crop mode active (c)">✂️</span> </div> </aside> </body> |