retold-remote 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "retold-remote",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "Retold Remote - NAS media browser with gallery views and keyboard navigation",
 	"main": "source/Pict-RetoldRemote-Bundle.js",
 	"bin": {
@@ -37,7 +37,7 @@
 		"pict-section-filebrowser": "^0.0.2",
 		"pict-service-commandlineutility": "^1.0.19",
 		"pict-view": "^1.0.67",
-		"retold-content-system": "^1.0.4",
+		"retold-content-system": "^1.0.8",
 		"yauzl": "^3.2.0"
 	},
 	"optionalDependencies": {

package/source/Pict-Application-RetoldRemote.js

@@ -20,6 +20,7 @@ const libViewMediaViewer = require('./views/PictView-Remote-MediaViewer.js');
 const libViewImageViewer = require('./views/PictView-Remote-ImageViewer.js');
 const libViewVideoExplorer = require('./views/PictView-Remote-VideoExplorer.js');
 const libViewAudioExplorer = require('./views/PictView-Remote-AudioExplorer.js');
+const libViewVLCSetup = require('./views/PictView-Remote-VLCSetup.js');
 
 // Application configuration
 const _DefaultConfiguration = require('./Pict-Application-RetoldRemote-Configuration.json');
@@ -51,6 +52,7 @@ class RetoldRemoteApplication extends libContentEditorApplication
 		this.pict.addView('RetoldRemote-SettingsPanel', libViewSettingsPanel.default_configuration, libViewSettingsPanel);
 		this.pict.addView('RetoldRemote-VideoExplorer', libViewVideoExplorer.default_configuration, libViewVideoExplorer);
 		this.pict.addView('RetoldRemote-AudioExplorer', libViewAudioExplorer.default_configuration, libViewAudioExplorer);
+		this.pict.addView('RetoldRemote-VLCSetup', libViewVLCSetup.default_configuration, libViewVLCSetup);
 
 		// Add new providers
 		this.pict.addProvider('RetoldRemote-Provider', libProviderRetoldRemote.default_configuration, libProviderRetoldRemote);
@@ -357,6 +359,44 @@ class RetoldRemoteApplication extends libContentEditorApplication
 		}
 	}
 
+	/**
+	 * Navigate to a file with an explicit media type override, bypassing
+	 * extension-based detection.
+	 *
+	 * @param {string} pFilePath - Relative file path
+	 * @param {string} pMediaType - 'image', 'video', 'audio', or 'text'
+	 */
+	navigateToFileAs(pFilePath, pMediaType)
+	{
+		if (!pFilePath)
+		{
+			return;
+		}
+
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		// Update the hash
+		let tmpFragProvider = this.pict.providers['RetoldRemote-Provider'];
+		let tmpFragId = tmpFragProvider ? tmpFragProvider.getFragmentIdentifier(pFilePath) : pFilePath;
+		window.location.hash = '#/view/' + tmpFragId;
+
+		// Update parent state for compatibility
+		this.pict.AppData.ContentEditor.CurrentFile = pFilePath;
+		this.pict.AppData.ContentEditor.ActiveEditor = 'binary';
+
+		let tmpViewer = this.pict.views['RetoldRemote-MediaViewer'];
+		if (tmpViewer)
+		{
+			tmpViewer.showMedia(pFilePath, pMediaType);
+		}
+
+		let tmpTopBar = this.pict.views['ContentEditor-TopBar'];
+		if (tmpTopBar)
+		{
+			tmpTopBar.updateInfo();
+		}
+	}
+
 	/**
 	 * Override loadFileList to also populate the gallery and fetch folder summary.
 	 */

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

@@ -1,7 +1,7 @@
 const libPictProvider = require('pict-provider');
 
 const _ImageExtensions = { 'png': true, 'jpg': true, 'jpeg': true, 'gif': true, 'webp': true, 'svg': true, 'bmp': true, 'ico': true, 'avif': true, 'tiff': true, 'tif': true };
-const _VideoExtensions = { 'mp4': true, 'webm': true, 'mov': true, 'mkv': true, 'avi': true, 'wmv': true, 'flv': true, 'm4v': true };
+const _VideoExtensions = { 'mp4': true, 'webm': true, 'mov': true, 'mkv': true, 'avi': true, 'wmv': true, 'flv': true, 'm4v': true, 'ogv': true, 'mpg': true, 'mpeg': true, 'mpe': true, 'mpv': true, 'm2v': true, 'ts': true, 'mts': true, 'm2ts': true, 'vob': true, '3gp': true, '3g2': true, 'f4v': true, 'rm': true, 'rmvb': true, 'divx': true, 'asf': true, 'mxf': true, 'dv': true, 'nsv': true, 'nuv': true, 'y4m': true, 'wtv': true, 'swf': true, 'dat': true };
 const _AudioExtensions = { 'mp3': true, 'wav': true, 'ogg': true, 'flac': true, 'aac': true, 'm4a': true, 'wma': true };
 const _DocumentExtensions = { 'pdf': true, 'epub': true, 'mobi': true };
 

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

@@ -234,6 +234,26 @@ class GalleryNavigationProvider extends libPictProvider
 				this.moveCursor(tmpItems.length - 1);
 				break;
 
+			case '1':
+				pEvent.preventDefault();
+				this.openCurrentAs('image');
+				break;
+
+			case '2':
+				pEvent.preventDefault();
+				this.openCurrentAs('video');
+				break;
+
+			case '3':
+				pEvent.preventDefault();
+				this.openCurrentAs('audio');
+				break;
+
+			case '4':
+				pEvent.preventDefault();
+				this.openCurrentAs('text');
+				break;
+
 			case 'f':
 				pEvent.preventDefault();
 				{
@@ -469,7 +489,7 @@ class GalleryNavigationProvider extends libPictProvider
 
 				case 'v':
 					pEvent.preventDefault();
-					this._openWithVLC();
+					this._streamWithVLC();
 					return;
 			}
 			return;
@@ -532,13 +552,38 @@ class GalleryNavigationProvider extends libPictProvider
 
 			case 'Enter':
 				pEvent.preventDefault();
-				this._openWithVLC();
+				this._streamWithVLC();
+				break;
+
+			case 'v':
+				pEvent.preventDefault();
+				this._streamWithVLC();
 				break;
 
 			case 'd':
 				pEvent.preventDefault();
 				this._toggleDistractionFree();
 				break;
+
+			case '1':
+				pEvent.preventDefault();
+				this.switchViewerType('image');
+				break;
+
+			case '2':
+				pEvent.preventDefault();
+				this.switchViewerType('video');
+				break;
+
+			case '3':
+				pEvent.preventDefault();
+				this.switchViewerType('audio');
+				break;
+
+			case '4':
+				pEvent.preventDefault();
+				this.switchViewerType('text');
+				break;
 		}
 	}
 
@@ -683,6 +728,59 @@ class GalleryNavigationProvider extends libPictProvider
 		}
 	}
 
+	/**
+	 * Open the currently selected gallery item, forcing a specific media type
+	 * regardless of its file extension.
+	 *
+	 * @param {string} pMediaType - 'image', 'video', 'audio', or 'text'
+	 */
+	openCurrentAs(pMediaType)
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpItems = tmpRemote.GalleryItems || [];
+		let tmpIndex = tmpRemote.GalleryCursorIndex || 0;
+
+		if (tmpIndex >= tmpItems.length)
+		{
+			return;
+		}
+
+		let tmpItem = tmpItems[tmpIndex];
+
+		if (tmpItem.Type === 'folder' || tmpItem.Type === 'archive')
+		{
+			return;
+		}
+
+		let tmpApp = this.pict.PictApplication;
+		if (tmpApp && tmpApp.navigateToFileAs)
+		{
+			tmpApp.navigateToFileAs(tmpItem.Path, pMediaType);
+		}
+	}
+
+	/**
+	 * Re-open the currently viewed file with a different media type.
+	 *
+	 * @param {string} pMediaType - 'image', 'video', 'audio', or 'text'
+	 */
+	switchViewerType(pMediaType)
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+
+		if (!tmpFilePath)
+		{
+			return;
+		}
+
+		let tmpViewer = this.pict.views['RetoldRemote-MediaViewer'];
+		if (tmpViewer)
+		{
+			tmpViewer.showMedia(tmpFilePath, pMediaType);
+		}
+	}
+
 	/**
 	 * Navigate up one directory level.
 	 */
@@ -1344,6 +1442,47 @@ class GalleryNavigationProvider extends libPictProvider
 		});
 	}
 
+	/**
+	 * Stream the current media file to VLC on the client device via vlc:// protocol link.
+	 */
+	_streamWithVLC()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpMediaType = tmpRemote.CurrentViewerMediaType;
+
+		if (tmpMediaType !== 'video' && tmpMediaType !== 'audio')
+		{
+			return;
+		}
+
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+		if (!tmpFilePath)
+		{
+			return;
+		}
+
+		let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+		let tmpContentPath = tmpProvider ? tmpProvider.getContentURL(tmpFilePath) : ('/content/' + encodeURIComponent(tmpFilePath));
+		let tmpStreamURL = window.location.origin + tmpContentPath;
+		// On Windows, VLC's native handler expects the raw URL.
+		// On macOS/Linux our custom handlers URL-decode, so we encode.
+		let tmpIsWindows = /Windows/.test(navigator.userAgent);
+		let tmpVLCURL = tmpIsWindows
+			? ('vlc://' + tmpStreamURL)
+			: ('vlc://' + encodeURIComponent(tmpStreamURL));
+
+		this._showToast('Opening VLC...');
+
+		// Use a temporary anchor element to trigger the protocol handler
+		// without navigating the current page away
+		let tmpLink = document.createElement('a');
+		tmpLink.href = tmpVLCURL;
+		tmpLink.style.display = 'none';
+		document.body.appendChild(tmpLink);
+		tmpLink.click();
+		document.body.removeChild(tmpLink);
+	}
+
 	/**
 	 * Show a brief toast notification in the viewer.
 	 *

package/source/server/RetoldRemote-MediaService.js

@@ -19,7 +19,7 @@ const libToolDetector = require('./RetoldRemote-ToolDetector.js');
 const libThumbnailCache = require('./RetoldRemote-ThumbnailCache.js');
 
 const _ImageExtensions = { 'png': true, 'jpg': true, 'jpeg': true, 'gif': true, 'webp': true, 'svg': true, 'bmp': true, 'ico': true, 'avif': true, 'tiff': true, 'tif': true, 'heic': true, 'heif': true };
-const _VideoExtensions = { 'mp4': true, 'webm': true, 'mov': true, 'mkv': true, 'avi': true, 'wmv': true, 'flv': true, 'm4v': true, 'ogv': true };
+const _VideoExtensions = { 'mp4': true, 'webm': true, 'mov': true, 'mkv': true, 'avi': true, 'wmv': true, 'flv': true, 'm4v': true, 'ogv': true, 'mpg': true, 'mpeg': true, 'mpe': true, 'mpv': true, 'm2v': true, 'ts': true, 'mts': true, 'm2ts': true, 'vob': true, '3gp': true, '3g2': true, 'f4v': true, 'rm': true, 'rmvb': true, 'divx': true, 'asf': true, 'mxf': true, 'dv': true, 'nsv': true, 'nuv': true, 'y4m': true, 'wtv': true, 'swf': true, 'dat': true };
 const _AudioExtensions = { 'mp3': true, 'wav': true, 'ogg': true, 'flac': true, 'aac': true, 'm4a': true, 'wma': true, 'oga': true };
 const _DocumentExtensions = { 'pdf': true, 'epub': true, 'mobi': true, 'doc': true, 'docx': true };
 

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

@@ -340,6 +340,7 @@ class RetoldRemoteLayoutView extends libPictView
 				tmpSettingsView.render();
 			}
 		}
+
 	}
 
 	_setupResizeHandle()

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

@@ -603,16 +603,13 @@ class RetoldRemoteMediaViewerView extends libPictView
 				+ '</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>';
-		}
+		// 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>';
 
@@ -655,14 +652,11 @@ class RetoldRemoteMediaViewerView extends libPictView
 				+ '</button>';
 		}
 
-		if (tmpCapabilities.vlc)
-		{
-			tmpHTML += '<button class="retold-remote-vlc-btn" '
-				+ 'onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._openWithVLC()" '
-				+ 'title="Open with VLC">'
-				+ 'Open 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
@@ -737,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,26 @@ 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;
@@ -275,6 +295,14 @@ 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>';
@@ -291,6 +319,7 @@ class RetoldRemoteSettingsPanelView extends libPictView
 		[
 			{ key: '\u2190 \u2191 \u2192 \u2193', desc: 'Navigate items' },
 			{ key: 'Enter', desc: 'Open item' },
+			{ 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' },
@@ -316,9 +345,11 @@ class RetoldRemoteSettingsPanelView extends libPictView
 			{ 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: '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: 'z', desc: 'Cycle fit mode' },
@@ -331,7 +362,7 @@ class RetoldRemoteSettingsPanelView extends libPictView
 			{ key: 'Enter', desc: 'Play in browser' },
 			{ key: 'e', desc: 'Explore video frames' },
 			{ key: 't', desc: 'Extract thumbnail' },
-			{ key: 'v', desc: 'Open with VLC' },
+			{ key: 'v', desc: 'Stream with VLC' },
 			{ key: '\u2192  j', desc: 'Next file' },
 			{ key: '\u2190  k', desc: 'Previous file' },
 			{ key: 'Esc', desc: 'Back to gallery' }