From 69a3a88b85ed0a56bf442af4fec420c871d337fa Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Tue, 5 May 2026 23:07:35 +0300 Subject: Add fullscreen crop mode toggle (hotkey c) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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. --- web/js/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'web/js/app.js') diff --git a/web/js/app.js b/web/js/app.js index 9c769c9..13cc824 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -1,7 +1,7 @@ import { API } from './api.js'; import { initKeyboard } from './keyboard.js'; import { initSelection, clearSelection, select, selectByElement, next, prev, currentIndex, currentElement, navUp, navDown, navLeft, navRight } from './selection.js'; -import { initPlayer, togglePlay, toggleFullscreen, toggleMinimize, toggleDetach, exitFullscreenIfNeeded, currentMediaId, currentMediaInfo, hasLoadedMedia, isPlaybackActive, seekRelative, selectAndPlay, zoomIn as playerZoomIn, zoomOut as playerZoomOut, toggleSlideshow as playerToggleSlideshow, isImageMode as playerIsImageMode } from './player.js'; +import { initPlayer, togglePlay, toggleFullscreen, toggleMinimize, toggleDetach, exitFullscreenIfNeeded, toggleCrop, currentMediaId, currentMediaInfo, hasLoadedMedia, isPlaybackActive, seekRelative, selectAndPlay, zoomIn as playerZoomIn, zoomOut as playerZoomOut, toggleSlideshow as playerToggleSlideshow, isImageMode as playerIsImageMode } from './player.js'; import { initSearch, focusSearch, trigger as triggerSearch, parseQuery } from './search.js'; import { initShuffle, toggle as toggleShuffle, isOn as isShuffle } from './shuffle.js'; import { initThemes } from './themes.js'; @@ -134,6 +134,7 @@ async function initApp() { mediaInfo: () => toggleMediaInfo(), fullscreen: () => toggleFullscreen(), toggleMinimize: () => toggleMinimize(), + toggleCrop: () => toggleCrop(), escape: () => { exitFullscreenIfNeeded(); closeLightbox(); const el = currentElement(); if (el) el.classList.remove('selected'); closeAllModals(); }, shuffle: () => { toggleShuffle(); loadMedia(); }, share: () => shareSelected(), -- cgit v1.2.3