retold-remote 0.0.3 → 0.0.5

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,85 @@ 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 streaming option (v) — always available, streams from server to client VLC
+		tmpHTML += '<button class="retold-remote-video-action-btn" '
+			+ 'onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._streamWithVLC()" '
+			+ 'title="Stream to VLC on this device">'
+			+ '<span class="retold-remote-video-action-key">v</span>'
+			+ 'Stream 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 +643,79 @@ 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'
-				+ '</button>';
-		}
+		tmpHTML += '<button class="retold-remote-vlc-btn" '
+			+ 'onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._streamWithVLC()" '
+			+ 'title="Stream to VLC on this device">'
+			+ 'Stream 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)
@@ -530,19 +731,29 @@ class RetoldRemoteMediaViewerView extends libPictView
 			+ 'Your browser does not support the audio tag.'
 			+ '</audio>';
 
+		// Action buttons below the player
+		tmpHTML += '<div style="margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">';
+
 		// Explore Audio button (available when ffprobe is present)
 		let tmpCapabilities = this.pict.AppData.RetoldRemote.ServerCapabilities || {};
 		if (tmpCapabilities.ffprobe || tmpCapabilities.ffmpeg)
 		{
-			tmpHTML += '<div style="margin-top: 20px;">'
-				+ '<button class="retold-remote-explore-btn" '
+			tmpHTML += '<button class="retold-remote-explore-btn" '
 				+ 'onclick="pict.views[\'RetoldRemote-AudioExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" '
 				+ 'title="Explore waveform and extract segments from this audio">'
-				+ '&#128202; Explore Audio'
-				+ '</button>'
-				+ '</div>';
+				+ 'Explore Audio'
+				+ '</button>';
 		}
 
+		// Stream with VLC
+		tmpHTML += '<button class="retold-remote-vlc-btn" '
+			+ 'onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._streamWithVLC()" '
+			+ 'title="Stream to VLC on this device (v)">'
+			+ 'Stream with VLC'
+			+ '</button>';
+
+		tmpHTML += '</div>';
+
 		tmpHTML += '</div>';
 		return tmpHTML;
 	}

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

@@ -77,6 +77,64 @@ const _ViewConfiguration =
 		{
 			color: var(--retold-danger-muted);
 		}
+		.retold-remote-settings-vlc-btn
+		{
+			display: block;
+			width: 100%;
+			padding: 8px 12px;
+			border: 1px solid var(--retold-border);
+			border-radius: 4px;
+			background: var(--retold-bg-secondary);
+			color: var(--retold-text-secondary);
+			font-size: 0.75rem;
+			font-family: inherit;
+			cursor: pointer;
+			text-align: left;
+			transition: background 0.15s, color 0.15s;
+		}
+		.retold-remote-settings-vlc-btn:hover
+		{
+			background: var(--retold-bg-hover);
+			color: var(--retold-text-primary);
+		}
+		.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;
+		}
 	`
 };
 
@@ -237,31 +295,92 @@ class RetoldRemoteSettingsPanelView extends libPictView
 		tmpHTML += '</div>';
 		tmpHTML += '</div>'; // end capabilities section
 
+		// VLC Setup
+		tmpHTML += '<div class="retold-remote-settings-section">';
+		tmpHTML += '<div class="retold-remote-settings-section-title">VLC Streaming</div>';
+		tmpHTML += '<button class="retold-remote-settings-vlc-btn" onclick="pict.views[\'RetoldRemote-VLCSetup\'].openModal()">';
+		tmpHTML += 'VLC Protocol Setup';
+		tmpHTML += '</button>';
+		tmpHTML += '</div>';
+
 		// Keyboard shortcuts
 		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: '1  2  3  4', desc: 'Open as image / video / audio / text' },
+			{ 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: '1  2  3  4', desc: 'View as image / video / audio / text' },
 			{ key: 'Space', desc: 'Play / pause' },
-			{ key: '+ / -', desc: 'Zoom in / out' },
+			{ key: 'f', desc: 'Fullscreen' },
+			{ key: 'i', desc: 'File info overlay' },
+			{ key: 'v', desc: 'Stream with VLC' },
+			{ 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: 'Stream 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 +389,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'];