retold-remote 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "retold-remote",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "Retold Remote - NAS media browser with gallery views and keyboard navigation",
 	"main": "source/Pict-RetoldRemote-Bundle.js",
 	"bin": {
@@ -30,18 +30,18 @@
 		"fable-serviceproviderbase": "^3.0.19",
 		"orator": "^6.0.3",
 		"orator-serviceserver-restify": "^2.0.9",
-		"pict": "^1.0.355",
+		"pict": "^1.0.356",
 		"pict-application": "^1.0.33",
 		"pict-provider": "^1.0.12",
 		"pict-section-code": "^1.0.3",
 		"pict-section-filebrowser": "^0.0.2",
 		"pict-service-commandlineutility": "^1.0.19",
 		"pict-view": "^1.0.67",
-		"retold-content-system": "^1.0.2",
+		"retold-content-system": "^1.0.4",
 		"yauzl": "^3.2.0"
 	},
 	"optionalDependencies": {
-		"sharp": "^0.33.0"
+		"sharp": "^0.34.5"
 	},
 	"devDependencies": {
 		"quackage": "^1.0.59"

package/source/Pict-Application-RetoldRemote.js

@@ -78,6 +78,7 @@ class RetoldRemoteApplication extends libContentEditorApplication
 			RawFileList: [],                // Unfiltered server response
 			GalleryItems: [],               // Filtered+sorted file list (single source of truth)
 			GalleryCursorIndex: 0,          // Currently highlighted item
+			FolderCursorHistory: {},        // Map of folder path -> last cursor index
 			GalleryFilter: 'all',           // 'all', 'images', 'video', 'audio', 'documents'
 			SearchQuery: '',
 			SearchCaseSensitive: false,
@@ -467,7 +468,8 @@ class RetoldRemoteApplication extends libContentEditorApplication
 				{
 					// Fallback if provider not ready
 					tmpRemote.GalleryItems = pFileList || [];
-					tmpRemote.GalleryCursorIndex = 0;
+					let tmpSavedIndex = tmpRemote.FolderCursorHistory && tmpRemote.FolderCursorHistory[tmpSelf.pict.AppData.PictFileBrowser.CurrentLocation || ''];
+					tmpRemote.GalleryCursorIndex = (typeof tmpSavedIndex === 'number' && tmpSavedIndex < (pFileList || []).length) ? tmpSavedIndex : 0;
 					let tmpGalleryView = tmpSelf.pict.views['RetoldRemote-Gallery'];
 					if (tmpGalleryView)
 					{

package/source/providers/Pict-Provider-GalleryFilterSort.js

@@ -60,7 +60,18 @@ class GalleryFilterSortProvider extends libPictProvider
 
 		// Write result
 		tmpRemote.GalleryItems = tmpItems;
-		tmpRemote.GalleryCursorIndex = 0;
+
+		// Restore cursor position if we have a saved one for this folder
+		let tmpCurrentLocation = (this.pict.AppData.PictFileBrowser && this.pict.AppData.PictFileBrowser.CurrentLocation) || '';
+		let tmpSavedIndex = tmpRemote.FolderCursorHistory && tmpRemote.FolderCursorHistory[tmpCurrentLocation];
+		if (typeof tmpSavedIndex === 'number' && tmpSavedIndex < tmpItems.length)
+		{
+			tmpRemote.GalleryCursorIndex = tmpSavedIndex;
+		}
+		else
+		{
+			tmpRemote.GalleryCursorIndex = 0;
+		}
 
 		// Re-render gallery
 		let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];

package/source/providers/Pict-Provider-GalleryNavigation.js

@@ -415,6 +415,66 @@ class GalleryNavigationProvider extends libPictProvider
 	 */
 	_handleViewerKey(pEvent)
 	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		// Video action menu mode — intercept keys for menu options
+		if (tmpRemote.VideoMenuActive && tmpRemote.CurrentViewerMediaType === 'video')
+		{
+			switch (pEvent.key)
+			{
+				case 'Escape':
+					pEvent.preventDefault();
+					this.closeViewer();
+					return;
+
+				case 'ArrowRight':
+				case 'j':
+					pEvent.preventDefault();
+					this.nextFile();
+					return;
+
+				case 'ArrowLeft':
+				case 'k':
+					pEvent.preventDefault();
+					this.prevFile();
+					return;
+
+				case 'e':
+					pEvent.preventDefault();
+					let tmpVEX = this.pict.views['RetoldRemote-VideoExplorer'];
+					if (tmpVEX)
+					{
+						tmpVEX.showExplorer(tmpRemote.CurrentViewerFile);
+					}
+					return;
+
+				case ' ':
+				case 'Enter':
+					pEvent.preventDefault();
+					let tmpViewer = this.pict.views['RetoldRemote-MediaViewer'];
+					if (tmpViewer)
+					{
+						tmpViewer.playVideo();
+					}
+					return;
+
+				case 't':
+					pEvent.preventDefault();
+					let tmpMediaViewer = this.pict.views['RetoldRemote-MediaViewer'];
+					if (tmpMediaViewer)
+					{
+						tmpMediaViewer.loadVideoMenuFrame();
+					}
+					return;
+
+				case 'v':
+					pEvent.preventDefault();
+					this._openWithVLC();
+					return;
+			}
+			return;
+		}
+
 		switch (pEvent.key)
 		{
 			case 'Escape':
@@ -601,6 +661,10 @@ class GalleryNavigationProvider extends libPictProvider
 
 		if (tmpItem.Type === 'folder' || tmpItem.Type === 'archive')
 		{
+			// Remember cursor position in the current folder before navigating away
+			let tmpCurrentLocation = (this.pict.AppData.PictFileBrowser && this.pict.AppData.PictFileBrowser.CurrentLocation) || '';
+			tmpRemote.FolderCursorHistory[tmpCurrentLocation] = tmpIndex;
+
 			// Navigate into the folder or archive
 			let tmpApp = this.pict.PictApplication;
 			if (tmpApp && tmpApp.loadFileList)
@@ -631,6 +695,10 @@ class GalleryNavigationProvider extends libPictProvider
 			return;
 		}
 
+		// Remember cursor position in the current folder before navigating away
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		tmpRemote.FolderCursorHistory[tmpCurrentLocation] = tmpRemote.GalleryCursorIndex || 0;
+
 		let tmpParent = tmpCurrentLocation.indexOf('/') >= 0
 			? tmpCurrentLocation.replace(/\/[^/]+\/?$/, '')
 			: '';

package/source/server/RetoldRemote-MediaService.js

@@ -475,7 +475,7 @@ class RetoldRemoteMediaService extends libFableServiceProviderBase
 		{
 			let tmpOutputFormat = pFormat === 'webp' ? 'webp' : 'mjpeg';
 			// Extract a frame at 10% into the video
-			let tmpCmd = `ffmpeg -ss 00:00:02 -i "${pFullPath}" -vframes 1 -vf "scale=${pWidth}:${pHeight}:force_original_aspect_ratio=decrease" -f image2 -c:v ${tmpOutputFormat} pipe:1`;
+			let tmpCmd = `ffmpeg -ss 00:00:02 -i "${pFullPath}" -vframes 1 -vf "scale=${pWidth}:${pHeight}:force_original_aspect_ratio=decrease" -f ${tmpOutputFormat} pipe:1`;
 			let tmpBuffer = libChildProcess.execSync(tmpCmd, { maxBuffer: 10 * 1024 * 1024, timeout: 30000 });
 			return fCallback(null, tmpBuffer);
 		}

package/source/server/RetoldRemote-VideoFrameService.js

@@ -147,7 +147,8 @@ class RetoldRemoteVideoFrameService extends libFableServiceProviderBase
 
 			let tmpCodec = (pFormat === 'png') ? 'png' : (pFormat === 'webp') ? 'webp' : 'mjpeg';
 
-			let tmpCmd = `ffmpeg -ss ${tmpTimeStr} -i "${pAbsPath}" -vframes 1 -vf "scale=${pWidth}:${pHeight}:force_original_aspect_ratio=decrease" -c:v ${tmpCodec} -y "${pOutputPath}"`;
+			let tmpMuxer = (pFormat === 'png') ? 'image2' : (pFormat === 'webp') ? 'webp' : 'mjpeg';
+			let tmpCmd = `ffmpeg -ss ${tmpTimeStr} -i "${pAbsPath}" -vframes 1 -vf "scale=${pWidth}:${pHeight}:force_original_aspect_ratio=decrease" -f ${tmpMuxer} -y "${pOutputPath}"`;
 			libChildProcess.execSync(tmpCmd, { stdio: 'ignore', timeout: 30000 });
 			return libFs.existsSync(pOutputPath);
 		}

package/source/views/PictView-Remote-MediaViewer.js

@@ -232,6 +232,85 @@ const _ViewConfiguration =
 			background: var(--retold-accent);
 			color: var(--retold-bg-primary);
 		}
+		/* Video action menu */
+		.retold-remote-video-action-menu
+		{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 12px;
+			width: 100%;
+			height: 100%;
+		}
+		.retold-remote-video-action-menu-title
+		{
+			font-size: 0.85rem;
+			color: var(--retold-text-secondary);
+			margin-bottom: 4px;
+			text-align: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 80%;
+		}
+		.retold-remote-video-action-thumb-wrap
+		{
+			margin-bottom: 4px;
+			text-align: center;
+		}
+		.retold-remote-video-action-thumb-wrap img
+		{
+			max-width: 640px;
+			max-height: 360px;
+			border-radius: 6px;
+			border: 1px solid var(--retold-border);
+			object-fit: contain;
+			background: var(--retold-bg-primary);
+		}
+		.retold-remote-video-action-thumb-wrap .retold-remote-video-action-thumb-loading
+		{
+			color: var(--retold-text-dim);
+			font-size: 0.78rem;
+			font-style: italic;
+			padding: 8px;
+		}
+		.retold-remote-video-action-btn
+		{
+			display: flex;
+			align-items: center;
+			gap: 12px;
+			padding: 12px 24px;
+			min-width: 280px;
+			border: 1px solid var(--retold-border);
+			border-radius: 6px;
+			background: var(--retold-bg-secondary);
+			color: var(--retold-text-secondary);
+			font-size: 0.85rem;
+			cursor: pointer;
+			transition: border-color 0.15s, color 0.15s, background 0.15s;
+			font-family: inherit;
+			text-align: left;
+		}
+		.retold-remote-video-action-btn:hover,
+		.retold-remote-video-action-btn.selected
+		{
+			border-color: var(--retold-accent);
+			color: var(--retold-text-primary);
+			background: var(--retold-bg-tertiary);
+		}
+		.retold-remote-video-action-key
+		{
+			display: inline-block;
+			padding: 2px 8px;
+			border: 1px solid var(--retold-border);
+			border-radius: 3px;
+			background: var(--retold-bg-primary);
+			color: var(--retold-text-dim);
+			font-size: 0.72rem;
+			font-family: var(--retold-font-mono, monospace);
+			min-width: 24px;
+			text-align: center;
+		}
 		/* Ebook reader */
 		.retold-remote-ebook-wrap
 		{
@@ -376,6 +455,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpRemote.ActiveMode = 'viewer';
 		tmpRemote.CurrentViewerFile = pFilePath;
 		tmpRemote.CurrentViewerMediaType = pMediaType;
+		tmpRemote.VideoMenuActive = (pMediaType === 'video');
 
 		// Show viewer, hide gallery
 		let tmpGalleryContainer = document.getElementById('RetoldRemote-Gallery-Container');
@@ -477,12 +557,88 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 	_buildVideoHTML(pURL, pFileName)
 	{
+		let tmpCapabilities = this.pict.AppData.RetoldRemote.ServerCapabilities || {};
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+
+		// Build the action menu (shown by default instead of the player)
+		let tmpHTML = '<div class="retold-remote-video-action-menu" id="RetoldRemote-VideoActionMenu">';
+		tmpHTML += '<div class="retold-remote-video-action-menu-title">' + this._escapeHTML(pFileName) + '</div>';
+
+		// Frame preview container (loaded on demand via t key or automatically)
+		if (tmpCapabilities.ffmpeg)
+		{
+			tmpHTML += '<div id="RetoldRemote-VideoActionThumb" class="retold-remote-video-action-thumb-wrap"></div>';
+			// Kick off frame extraction automatically
+			setTimeout(() => { this.loadVideoMenuFrame(); }, 0);
+		}
+
+		// Explore option (e)
+		if (tmpCapabilities.ffmpeg)
+		{
+			tmpHTML += '<button class="retold-remote-video-action-btn" '
+				+ 'onclick="pict.views[\'RetoldRemote-VideoExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" '
+				+ 'title="Explore frames from this video">'
+				+ '<span class="retold-remote-video-action-key">e</span>'
+				+ 'Explore Video Frames'
+				+ '</button>';
+		}
+
+		// Play option (space/enter)
+		tmpHTML += '<button class="retold-remote-video-action-btn selected" '
+			+ 'onclick="pict.views[\'RetoldRemote-MediaViewer\'].playVideo()" '
+			+ 'title="Play video in browser">'
+			+ '<span class="retold-remote-video-action-key">Space</span>'
+			+ 'Play in Browser'
+			+ '</button>';
+
+		// Thumbnail option (t)
+		if (tmpCapabilities.ffmpeg)
+		{
+			tmpHTML += '<button class="retold-remote-video-action-btn" '
+				+ 'onclick="pict.views[\'RetoldRemote-MediaViewer\'].loadVideoMenuFrame()" '
+				+ 'title="Extract a frame from the midpoint of this video">'
+				+ '<span class="retold-remote-video-action-key">t</span>'
+				+ 'Thumbnail'
+				+ '</button>';
+		}
+
+		// VLC option (v)
+		if (tmpCapabilities.vlc)
+		{
+			tmpHTML += '<button class="retold-remote-video-action-btn" '
+				+ 'onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._openWithVLC()" '
+				+ 'title="Open with VLC media player">'
+				+ '<span class="retold-remote-video-action-key">v</span>'
+				+ 'Open with VLC'
+				+ '</button>';
+		}
+
+		tmpHTML += '</div>';
+
+		return tmpHTML;
+	}
+
+	/**
+	 * Launch the in-browser video player (from the video action menu).
+	 */
+	playVideo()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+		if (!tmpFilePath) return;
+
+		let tmpFileName = tmpFilePath.replace(/^.*\//, '');
+		let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+		let tmpContentURL = tmpProvider ? tmpProvider.getContentURL(tmpFilePath) : ('/content/' + encodeURIComponent(tmpFilePath));
+		let tmpCapabilities = tmpRemote.ServerCapabilities || {};
+
 		let tmpHTML = '<div class="retold-remote-video-wrap">';
 
-		let tmpAutoplayVideo = this.pict.AppData.RetoldRemote.AutoplayVideo ? ' autoplay' : '';
+		let tmpAutoplayVideo = tmpRemote.AutoplayVideo ? ' autoplay' : '';
 		tmpHTML += '<video controls' + tmpAutoplayVideo + ' preload="metadata" '
 			+ 'id="RetoldRemote-VideoPlayer">'
-			+ '<source src="' + pURL + '">'
+			+ '<source src="' + tmpContentURL + '">'
 			+ 'Your browser does not support the video tag.'
 			+ '</video>';
 
@@ -490,31 +646,82 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpHTML += '<div class="retold-remote-video-stats" id="RetoldRemote-VideoStats">';
 		tmpHTML += '<span class="retold-remote-video-stat-label">Loading info...</span>';
 
-		// Explore Video button (only when ffmpeg is available)
-		let tmpCapabilities = this.pict.AppData.RetoldRemote.ServerCapabilities || {};
 		if (tmpCapabilities.ffmpeg)
 		{
 			tmpHTML += '<button class="retold-remote-explore-btn" '
 				+ 'onclick="pict.views[\'RetoldRemote-VideoExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" '
 				+ 'title="Explore frames from this video">'
-				+ '&#128270; Explore Video'
+				+ 'Explore Video'
 				+ '</button>';
 		}
 
-		// VLC button (only shown when VLC capability is available)
 		if (tmpCapabilities.vlc)
 		{
 			tmpHTML += '<button class="retold-remote-vlc-btn" '
 				+ 'onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._openWithVLC()" '
-				+ 'title="Open with VLC (Enter)">'
-				+ '&#9654; Open ' + this._escapeHTML(pFileName) + ' with VLC'
+				+ 'title="Open with VLC">'
+				+ 'Open with VLC'
 				+ '</button>';
 		}
 
 		tmpHTML += '</div>'; // end stats
 		tmpHTML += '</div>'; // end wrap
 
-		return tmpHTML;
+		// Replace the action menu with the player
+		let tmpMenu = document.getElementById('RetoldRemote-VideoActionMenu');
+		if (tmpMenu)
+		{
+			tmpMenu.outerHTML = tmpHTML;
+		}
+
+		// Mark that we are now in player mode (not menu mode)
+		tmpRemote.VideoMenuActive = false;
+	}
+
+	/**
+	 * Extract and display a single full-resolution frame from the midpoint of the current video.
+	 */
+	loadVideoMenuFrame()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+		if (!tmpFilePath) return;
+
+		let tmpThumbWrap = document.getElementById('RetoldRemote-VideoActionThumb');
+		if (!tmpThumbWrap) return;
+
+		tmpThumbWrap.innerHTML = '<div class="retold-remote-video-action-thumb-loading">Extracting frame...</div>';
+
+		let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+		let tmpPathParam = tmpProvider ? tmpProvider._getPathParam(tmpFilePath) : encodeURIComponent(tmpFilePath);
+
+		fetch('/api/media/video-frames?path=' + tmpPathParam + '&count=1')
+			.then((pResponse) => pResponse.json())
+			.then((pData) =>
+			{
+				// Verify we are still on the same file and still in the menu
+				if (tmpRemote.CurrentViewerFile !== tmpFilePath) return;
+				let tmpWrap = document.getElementById('RetoldRemote-VideoActionThumb');
+				if (!tmpWrap) return;
+
+				if (pData && pData.Frames && pData.Frames.length > 0)
+				{
+					let tmpFrame = pData.Frames[0];
+					let tmpFrameURL = '/api/media/video-frame/' + pData.CacheKey + '/' + tmpFrame.Filename;
+					tmpWrap.innerHTML = '<img src="' + tmpFrameURL + '" '
+						+ 'alt="' + this._escapeHTML(tmpFilePath.replace(/^.*\//, '')) + '" '
+						+ 'onerror="this.parentNode.innerHTML=\'\'">';
+				}
+				else
+				{
+					tmpWrap.innerHTML = '';
+				}
+			})
+			.catch(() =>
+			{
+				let tmpWrap = document.getElementById('RetoldRemote-VideoActionThumb');
+				if (tmpWrap) tmpWrap.innerHTML = '';
+			});
 	}
 
 	_buildAudioHTML(pURL, pFileName)

package/source/views/PictView-Remote-SettingsPanel.js

@@ -77,6 +77,44 @@ const _ViewConfiguration =
 		{
 			color: var(--retold-danger-muted);
 		}
+		.retold-remote-settings-shortcut-group
+		{
+			margin-bottom: 10px;
+		}
+		.retold-remote-settings-shortcut-group-title
+		{
+			font-size: 0.68rem;
+			font-weight: 600;
+			color: var(--retold-text-muted);
+			margin-bottom: 4px;
+			padding-bottom: 2px;
+			border-bottom: 1px solid var(--retold-border);
+		}
+		.retold-remote-settings-shortcut-row
+		{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 2px 0;
+		}
+		.retold-remote-settings-shortcut-desc
+		{
+			color: var(--retold-text-dim);
+			font-size: 0.72rem;
+		}
+		.retold-remote-settings-shortcut-key
+		{
+			display: inline-block;
+			padding: 1px 6px;
+			border: 1px solid var(--retold-border);
+			border-radius: 3px;
+			background: var(--retold-bg-primary);
+			color: var(--retold-accent);
+			font-size: 0.68rem;
+			font-family: var(--retold-font-mono, monospace);
+			min-width: 18px;
+			text-align: center;
+		}
 	`
 };
 
@@ -241,27 +279,77 @@ class RetoldRemoteSettingsPanelView extends libPictView
 		tmpHTML += '<div class="retold-remote-settings-section">';
 		tmpHTML += '<div class="retold-remote-settings-section-title">Keyboard Shortcuts</div>';
 
-		let tmpShortcuts = [
-			{ key: 'Arrow keys', desc: 'Navigate gallery' },
+		tmpHTML += this._buildShortcutGroup('Global',
+		[
+			{ key: 'F1', desc: 'Help panel' },
+			{ key: 'F9', desc: 'Focus sidebar' },
+			{ key: '/', desc: 'Search / filter bar' },
+			{ key: 'Esc', desc: 'Close overlay / back' }
+		]);
+
+		tmpHTML += this._buildShortcutGroup('Gallery',
+		[
+			{ key: '\u2190 \u2191 \u2192 \u2193', desc: 'Navigate items' },
 			{ key: 'Enter', desc: 'Open item' },
-			{ key: 'Escape', desc: 'Back / close' },
-			{ key: 'j / k', desc: 'Next / prev in viewer' },
-			{ key: 'f', desc: 'Fullscreen' },
-			{ key: 'i', desc: 'File info' },
+			{ key: 'Esc', desc: 'Go up one folder' },
+			{ key: 'Home', desc: 'Jump to first item' },
+			{ key: 'End', desc: 'Jump to last item' },
+			{ key: 'g', desc: 'Toggle grid / list' },
+			{ key: 'f', desc: 'Advanced filter panel' },
+			{ key: 's', desc: 'Focus sort dropdown' },
+			{ key: 'x', desc: 'Clear all filters' },
+			{ key: 'c', desc: 'Settings panel' },
+			{ key: 'd', desc: 'Distraction-free mode' }
+		]);
+
+		tmpHTML += this._buildShortcutGroup('Sidebar (F9)',
+		[
+			{ key: '\u2191 \u2193', desc: 'Navigate file list' },
+			{ key: 'Home', desc: 'Jump to first' },
+			{ key: 'End', desc: 'Jump to last' },
+			{ key: 'Enter', desc: 'Open item' },
+			{ key: 'Esc', desc: 'Return to gallery' }
+		]);
+
+		tmpHTML += this._buildShortcutGroup('Media Viewer',
+		[
+			{ key: 'Esc', desc: 'Back to gallery' },
+			{ key: '\u2192  j', desc: 'Next file' },
+			{ key: '\u2190  k', desc: 'Previous file' },
 			{ key: 'Space', desc: 'Play / pause' },
-			{ key: '+ / -', desc: 'Zoom in / out' },
+			{ key: 'f', desc: 'Fullscreen' },
+			{ key: 'i', desc: 'File info overlay' },
+			{ key: '+  -', desc: 'Zoom in / out' },
 			{ key: '0', desc: 'Reset zoom' },
-			{ key: 'g', desc: 'Toggle grid / list' },
-			{ key: '/', desc: 'Focus search' }
-		];
-
-		for (let i = 0; i < tmpShortcuts.length; i++)
-		{
-			tmpHTML += '<div class="retold-remote-settings-cap-row">';
-			tmpHTML += '<span class="retold-remote-settings-cap-label">' + tmpShortcuts[i].desc + '</span>';
-			tmpHTML += '<span style="color: var(--retold-accent); font-family: var(--retold-font-mono, monospace);">' + tmpShortcuts[i].key + '</span>';
-			tmpHTML += '</div>';
-		}
+			{ key: 'z', desc: 'Cycle fit mode' },
+			{ key: 'd', desc: 'Distraction-free mode' }
+		]);
+
+		tmpHTML += this._buildShortcutGroup('Video Menu',
+		[
+			{ key: 'Space', desc: 'Play in browser' },
+			{ key: 'Enter', desc: 'Play in browser' },
+			{ key: 'e', desc: 'Explore video frames' },
+			{ key: 't', desc: 'Extract thumbnail' },
+			{ key: 'v', desc: 'Open with VLC' },
+			{ key: '\u2192  j', desc: 'Next file' },
+			{ key: '\u2190  k', desc: 'Previous file' },
+			{ key: 'Esc', desc: 'Back to gallery' }
+		]);
+
+		tmpHTML += this._buildShortcutGroup('Video Explorer',
+		[
+			{ key: 'Esc', desc: 'Back' }
+		]);
+
+		tmpHTML += this._buildShortcutGroup('Audio Explorer',
+		[
+			{ key: 'Space', desc: 'Play selection' },
+			{ key: '+  -', desc: 'Zoom in / out' },
+			{ key: '0', desc: 'Zoom to fit' },
+			{ key: 'z', desc: 'Zoom to selection' },
+			{ key: 'Esc', desc: 'Clear selection / back' }
+		]);
 
 		tmpHTML += '</div>'; // end shortcuts section
 
@@ -270,6 +358,23 @@ class RetoldRemoteSettingsPanelView extends libPictView
 		tmpContainer.innerHTML = tmpHTML;
 	}
 
+	_buildShortcutGroup(pTitle, pShortcuts)
+	{
+		let tmpHTML = '<div class="retold-remote-settings-shortcut-group">';
+		tmpHTML += '<div class="retold-remote-settings-shortcut-group-title">' + pTitle + '</div>';
+
+		for (let i = 0; i < pShortcuts.length; i++)
+		{
+			tmpHTML += '<div class="retold-remote-settings-shortcut-row">';
+			tmpHTML += '<span class="retold-remote-settings-shortcut-desc">' + pShortcuts[i].desc + '</span>';
+			tmpHTML += '<span class="retold-remote-settings-shortcut-key">' + pShortcuts[i].key + '</span>';
+			tmpHTML += '</div>';
+		}
+
+		tmpHTML += '</div>';
+		return tmpHTML;
+	}
+
 	changeTheme(pThemeKey)
 	{
 		let tmpThemeProvider = this.pict.providers['RetoldRemote-Theme'];