retold-remote 0.0.1 → 0.0.2

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

@@ -16,6 +16,8 @@ class GalleryNavigationProvider extends libPictProvider
 		this._columnsPerRow = 4;
 		this._keydownBound = false;
 		this._helpPanelVisible = false;
+		this._sidebarFocused = false;
+		this._sidebarCursorIndex = 0;
 	}
 
 	/**
@@ -79,6 +81,55 @@ class GalleryNavigationProvider extends libPictProvider
 				return;
 			}
 
+			// F9 toggles sidebar focus from any mode
+			if (pEvent.key === 'F9')
+			{
+				pEvent.preventDefault();
+				if (tmpSelf._sidebarFocused)
+				{
+					tmpSelf._blurSidebar();
+				}
+				else
+				{
+					tmpSelf._focusSidebar();
+				}
+				return;
+			}
+
+			// / toggles filter bar from any context (including when search is focused)
+			if (pEvent.key === '/')
+			{
+				// If the search input is currently focused, / should hide the bar
+				let tmpSearchInput = document.getElementById('RetoldRemote-Gallery-Search');
+				if (pEvent.target === tmpSearchInput)
+				{
+					pEvent.preventDefault();
+					tmpSelf._hideFilterBar();
+					tmpSearchInput.blur();
+					return;
+				}
+
+				// If another input is focused, let it type normally
+				if (pEvent.target.tagName === 'INPUT' || pEvent.target.tagName === 'TEXTAREA' || pEvent.target.isContentEditable)
+				{
+					return;
+				}
+
+				// Otherwise toggle the filter bar
+				pEvent.preventDefault();
+				tmpSelf._toggleFilterBar();
+				return;
+			}
+
+			// Escape from the search input hides the filter bar
+			if (pEvent.key === 'Escape' && pEvent.target.id === 'RetoldRemote-Gallery-Search')
+			{
+				pEvent.preventDefault();
+				pEvent.target.blur();
+				tmpSelf._hideFilterBar();
+				return;
+			}
+
 			// Don't capture keys when an input is focused
 			if (pEvent.target.tagName === 'INPUT' || pEvent.target.tagName === 'TEXTAREA' || pEvent.target.isContentEditable)
 			{
@@ -96,10 +147,22 @@ class GalleryNavigationProvider extends libPictProvider
 			let tmpRemote = tmpSelf.pict.AppData.RetoldRemote;
 			let tmpActiveMode = tmpRemote.ActiveMode;
 
-			if (tmpActiveMode === 'gallery')
+			if (tmpActiveMode === 'gallery' && tmpSelf._sidebarFocused)
+			{
+				tmpSelf._handleSidebarKey(pEvent);
+			}
+			else if (tmpActiveMode === 'gallery')
 			{
 				tmpSelf._handleGalleryKey(pEvent);
 			}
+			else if (tmpActiveMode === 'video-explorer')
+			{
+				tmpSelf._handleVideoExplorerKey(pEvent);
+			}
+			else if (tmpActiveMode === 'audio-explorer')
+			{
+				tmpSelf._handleAudioExplorerKey(pEvent);
+			}
 			else if (tmpActiveMode === 'viewer')
 			{
 				tmpSelf._handleViewerKey(pEvent);
@@ -156,9 +219,9 @@ class GalleryNavigationProvider extends libPictProvider
 				this._toggleViewMode();
 				break;
 
-			case '/':
+			case 'x':
 				pEvent.preventDefault();
-				this._focusSearch();
+				this._clearAllFilters();
 				break;
 
 			case 'Home':
@@ -174,6 +237,8 @@ class GalleryNavigationProvider extends libPictProvider
 			case 'f':
 				pEvent.preventDefault();
 				{
+					// Ensure the filter bar is visible first
+					this._showFilterBar();
 					let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];
 					if (tmpGalleryView)
 					{
@@ -185,11 +250,16 @@ class GalleryNavigationProvider extends libPictProvider
 			case 's':
 				pEvent.preventDefault();
 				{
-					let tmpSortSelect = document.getElementById('RetoldRemote-Gallery-Sort');
-					if (tmpSortSelect)
+					// Ensure the filter bar is visible first
+					this._showFilterBar();
+					setTimeout(() =>
 					{
-						tmpSortSelect.focus();
-					}
+						let tmpSortSelect = document.getElementById('RetoldRemote-Gallery-Sort');
+						if (tmpSortSelect)
+						{
+							tmpSortSelect.focus();
+						}
+					}, 50);
 				}
 				break;
 
@@ -202,6 +272,141 @@ class GalleryNavigationProvider extends libPictProvider
 				pEvent.preventDefault();
 				this._toggleDistractionFree();
 				break;
+
+			}
+	}
+
+	/**
+	 * Handle keyboard events when the sidebar file list has focus.
+	 */
+	_handleSidebarKey(pEvent)
+	{
+		let tmpRows = document.querySelectorAll('#Pict-FileBrowser-DetailRows .pict-fb-detail-row');
+		let tmpCount = tmpRows.length;
+
+		if (tmpCount === 0)
+		{
+			// Nothing in the sidebar, bail back to gallery
+			this._blurSidebar();
+			return;
+		}
+
+		switch (pEvent.key)
+		{
+			case 'ArrowDown':
+				pEvent.preventDefault();
+				this._moveSidebarCursor(Math.min(this._sidebarCursorIndex + 1, tmpCount - 1));
+				break;
+
+			case 'ArrowUp':
+				pEvent.preventDefault();
+				this._moveSidebarCursor(Math.max(this._sidebarCursorIndex - 1, 0));
+				break;
+
+			case 'Home':
+				pEvent.preventDefault();
+				this._moveSidebarCursor(0);
+				break;
+
+			case 'End':
+				pEvent.preventDefault();
+				this._moveSidebarCursor(tmpCount - 1);
+				break;
+
+			case 'Enter':
+				pEvent.preventDefault();
+				{
+					// Click the focused row to open it (folder or file)
+					let tmpRow = tmpRows[this._sidebarCursorIndex];
+					if (tmpRow)
+					{
+						// Fire the dblclick handler which opens folders / selects files
+						let tmpDblClickHandler = tmpRow.getAttribute('ondblclick');
+						if (tmpDblClickHandler)
+						{
+							new Function(tmpDblClickHandler).call(tmpRow);
+						}
+					}
+				}
+				break;
+
+			case 'Escape':
+				pEvent.preventDefault();
+				this._blurSidebar();
+				break;
+		}
+	}
+
+	/**
+	 * Move focus into the sidebar file list.
+	 */
+	_focusSidebar()
+	{
+		let tmpWrap = document.querySelector('.content-editor-sidebar-wrap');
+		if (!tmpWrap || tmpWrap.classList.contains('collapsed'))
+		{
+			return;
+		}
+
+		this._sidebarFocused = true;
+		this._sidebarCursorIndex = 0;
+
+		// Apply visual focus ring on the sidebar
+		let tmpInner = document.querySelector('.content-editor-sidebar-inner');
+		if (tmpInner)
+		{
+			tmpInner.classList.add('keyboard-focused');
+		}
+
+		this._moveSidebarCursor(0);
+	}
+
+	/**
+	 * Return focus from sidebar back to the gallery.
+	 */
+	_blurSidebar()
+	{
+		this._sidebarFocused = false;
+
+		// Remove sidebar focus ring
+		let tmpInner = document.querySelector('.content-editor-sidebar-inner');
+		if (tmpInner)
+		{
+			tmpInner.classList.remove('keyboard-focused');
+		}
+
+		// Remove highlight from all rows
+		let tmpRows = document.querySelectorAll('#Pict-FileBrowser-DetailRows .pict-fb-detail-row');
+		for (let i = 0; i < tmpRows.length; i++)
+		{
+			tmpRows[i].classList.remove('sidebar-focused');
+		}
+	}
+
+	/**
+	 * Move the sidebar cursor to a new index and highlight the row.
+	 */
+	_moveSidebarCursor(pIndex)
+	{
+		let tmpRows = document.querySelectorAll('#Pict-FileBrowser-DetailRows .pict-fb-detail-row');
+		if (tmpRows.length === 0)
+		{
+			return;
+		}
+
+		// Remove old highlight
+		if (this._sidebarCursorIndex < tmpRows.length)
+		{
+			tmpRows[this._sidebarCursorIndex].classList.remove('sidebar-focused');
+		}
+
+		this._sidebarCursorIndex = pIndex;
+
+		// Apply new highlight and scroll into view
+		if (pIndex < tmpRows.length)
+		{
+			tmpRows[pIndex].classList.add('sidebar-focused');
+			tmpRows[pIndex].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
 		}
 	}
 
@@ -265,6 +470,11 @@ class GalleryNavigationProvider extends libPictProvider
 				this._cycleFitMode();
 				break;
 
+			case 'Enter':
+				pEvent.preventDefault();
+				this._openWithVLC();
+				break;
+
 			case 'd':
 				pEvent.preventDefault();
 				this._toggleDistractionFree();
@@ -272,6 +482,74 @@ class GalleryNavigationProvider extends libPictProvider
 		}
 	}
 
+	/**
+	 * Handle keyboard events in video explorer mode.
+	 */
+	_handleVideoExplorerKey(pEvent)
+	{
+		switch (pEvent.key)
+		{
+			case 'Escape':
+				pEvent.preventDefault();
+				let tmpVEX = this.pict.views['RetoldRemote-VideoExplorer'];
+				if (tmpVEX)
+				{
+					tmpVEX.goBack();
+				}
+				break;
+		}
+	}
+
+	/**
+	 * Handle keyboard events in audio explorer mode.
+	 */
+	_handleAudioExplorerKey(pEvent)
+	{
+		let tmpAEX = this.pict.views['RetoldRemote-AudioExplorer'];
+		if (!tmpAEX)
+		{
+			return;
+		}
+
+		switch (pEvent.key)
+		{
+			case 'Escape':
+				pEvent.preventDefault();
+				if (tmpAEX._selectionStart >= 0)
+				{
+					tmpAEX.clearSelection();
+				}
+				else
+				{
+					tmpAEX.goBack();
+				}
+				break;
+			case '+':
+			case '=':
+				pEvent.preventDefault();
+				tmpAEX.zoomIn();
+				break;
+			case '-':
+			case '_':
+				pEvent.preventDefault();
+				tmpAEX.zoomOut();
+				break;
+			case '0':
+				pEvent.preventDefault();
+				tmpAEX.zoomToFit();
+				break;
+			case 'z':
+			case 'Z':
+				pEvent.preventDefault();
+				tmpAEX.zoomToSelection();
+				break;
+			case ' ':
+				pEvent.preventDefault();
+				tmpAEX.playSelection();
+				break;
+		}
+	}
+
 	/**
 	 * Move the gallery cursor to a new index and update the UI.
 	 *
@@ -321,9 +599,9 @@ class GalleryNavigationProvider extends libPictProvider
 
 		let tmpItem = tmpItems[tmpIndex];
 
-		if (tmpItem.Type === 'folder')
+		if (tmpItem.Type === 'folder' || tmpItem.Type === 'archive')
 		{
-			// Navigate into the folder
+			// Navigate into the folder or archive
 			let tmpApp = this.pict.PictApplication;
 			if (tmpApp && tmpApp.loadFileList)
 			{
@@ -353,7 +631,9 @@ class GalleryNavigationProvider extends libPictProvider
 			return;
 		}
 
-		let tmpParent = tmpCurrentLocation.replace(/\/[^/]+\/?$/, '') || '';
+		let tmpParent = tmpCurrentLocation.indexOf('/') >= 0
+			? tmpCurrentLocation.replace(/\/[^/]+\/?$/, '')
+			: '';
 		let tmpApp = this.pict.PictApplication;
 		if (tmpApp && tmpApp.loadFileList)
 		{
@@ -467,6 +747,95 @@ class GalleryNavigationProvider extends libPictProvider
 		}
 	}
 
+	// ──────────────────────────────────────────────
+	// Filter bar toggle
+	// ──────────────────────────────────────────────
+
+	/**
+	 * Toggle the filter bar visibility.
+	 * If hidden, show it and focus the search input.
+	 * If visible, hide it.
+	 */
+	_toggleFilterBar()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		if (tmpRemote.FilterBarVisible)
+		{
+			this._hideFilterBar();
+		}
+		else
+		{
+			this._showFilterBar();
+		}
+	}
+
+	/**
+	 * Show the filter bar and focus the search input.
+	 */
+	_showFilterBar()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		if (tmpRemote.FilterBarVisible)
+		{
+			// Already visible — just focus search
+			let tmpSearch = document.getElementById('RetoldRemote-Gallery-Search');
+			if (tmpSearch)
+			{
+				tmpSearch.focus();
+			}
+			return;
+		}
+
+		tmpRemote.FilterBarVisible = true;
+
+		let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];
+		if (tmpGalleryView)
+		{
+			tmpGalleryView.renderGallery();
+		}
+
+		// Focus the search input after render
+		setTimeout(() =>
+		{
+			let tmpSearch = document.getElementById('RetoldRemote-Gallery-Search');
+			if (tmpSearch)
+			{
+				tmpSearch.focus();
+			}
+		}, 50);
+	}
+
+	/**
+	 * Hide the filter bar.
+	 */
+	_hideFilterBar()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		tmpRemote.FilterBarVisible = false;
+
+		let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];
+		if (tmpGalleryView)
+		{
+			tmpGalleryView.renderGallery();
+		}
+	}
+
+	/**
+	 * Clear all active filters and update the gallery.
+	 */
+	_clearAllFilters()
+	{
+		let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];
+		if (tmpGalleryView)
+		{
+			tmpGalleryView.clearAllFilters();
+		}
+
+		this._showToast('Filters cleared');
+	}
+
 	// ──────────────────────────────────────────────
 	// Help panel
 	// ──────────────────────────────────────────────
@@ -522,11 +891,13 @@ class GalleryNavigationProvider extends libPictProvider
 			['← → ↑ ↓', 'Navigate tiles'],
 			['Enter', 'Open selected item'],
 			['Escape', 'Go up one folder'],
+			['F9', 'Toggle sidebar focus'],
 			['Home / End', 'Jump to first / last'],
 			['g', 'Toggle gallery / list view'],
-			['/', 'Focus search bar'],
-			['f', 'Toggle filter panel'],
+			['/', 'Toggle filter bar &amp; search'],
+			['f', 'Toggle advanced filter panel'],
 			['s', 'Focus sort dropdown'],
+			['x', 'Clear all filters'],
 			['c', 'Settings / config panel'],
 			['d', 'Distraction-free mode']
 		];
@@ -539,6 +910,26 @@ class GalleryNavigationProvider extends libPictProvider
 		}
 		tmpHTML += '</div>';
 
+		// Sidebar shortcuts
+		tmpHTML += '<div class="retold-remote-help-section">';
+		tmpHTML += '<div class="retold-remote-help-section-title">Sidebar (F9 to focus)</div>';
+
+		let tmpSidebarShortcuts =
+		[
+			['↑ / ↓', 'Navigate file list'],
+			['Enter', 'Open selected item'],
+			['Home / End', 'Jump to first / last'],
+			['Escape / F9', 'Return to gallery']
+		];
+		for (let i = 0; i < tmpSidebarShortcuts.length; i++)
+		{
+			tmpHTML += '<div class="retold-remote-help-row">';
+			tmpHTML += '<kbd class="retold-remote-help-key">' + tmpSidebarShortcuts[i][0] + '</kbd>';
+			tmpHTML += '<span class="retold-remote-help-desc">' + tmpSidebarShortcuts[i][1] + '</span>';
+			tmpHTML += '</div>';
+		}
+		tmpHTML += '</div>';
+
 		// Viewer shortcuts
 		tmpHTML += '<div class="retold-remote-help-section">';
 		tmpHTML += '<div class="retold-remote-help-section-title">Media Viewer</div>';
@@ -551,6 +942,7 @@ class GalleryNavigationProvider extends libPictProvider
 			['f', 'Toggle fullscreen'],
 			['i', 'Toggle file info'],
 			['Space', 'Play / pause media'],
+			['Enter', 'Open video in VLC'],
 			['z', 'Cycle fit mode'],
 			['+ / -', 'Zoom in / out'],
 			['0', 'Reset zoom'],
@@ -572,6 +964,7 @@ class GalleryNavigationProvider extends libPictProvider
 		let tmpGlobalShortcuts =
 		[
 			['F1', 'Toggle this help panel'],
+			['F9', 'Toggle sidebar focus'],
 			['Escape', 'Close help panel']
 		];
 		for (let i = 0; i < tmpGlobalShortcuts.length; i++)
@@ -585,7 +978,11 @@ class GalleryNavigationProvider extends libPictProvider
 
 		// Active mode indicator
 		tmpHTML += '<div class="retold-remote-help-footer">';
-		tmpHTML += 'Current mode: <strong>' + (tmpActiveMode === 'viewer' ? 'Media Viewer' : 'Gallery') + '</strong>';
+		let tmpModeLabel = 'Gallery';
+		if (tmpActiveMode === 'viewer') tmpModeLabel = 'Media Viewer';
+		else if (tmpActiveMode === 'video-explorer') tmpModeLabel = 'Video Explorer';
+		else if (tmpActiveMode === 'audio-explorer') tmpModeLabel = 'Audio Explorer';
+		tmpHTML += 'Current mode: <strong>' + tmpModeLabel + '</strong>';
 		tmpHTML += '</div>';
 
 		tmpHTML += '</div>'; // end flyout
@@ -595,7 +992,7 @@ class GalleryNavigationProvider extends libPictProvider
 	}
 
 	/**
-	 * F2 — Toggle the settings/configuration panel.
+	 * F9 — Toggle the settings/configuration panel.
 	 * Opens the sidebar if collapsed, switches to the Settings tab,
 	 * or toggles back to the Files tab if Settings is already showing.
 	 */
@@ -736,14 +1133,27 @@ class GalleryNavigationProvider extends libPictProvider
 
 	_toggleFullscreen()
 	{
-		let tmpViewer = document.getElementById('RetoldRemote-Viewer-Container');
-		if (!tmpViewer) return;
-
 		if (document.fullscreenElement)
 		{
 			document.exitFullscreen();
+			return;
 		}
-		else
+
+		// When viewing a video, fullscreen the video element itself
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		if (tmpRemote.CurrentViewerMediaType === 'video')
+		{
+			let tmpVideo = document.getElementById('RetoldRemote-VideoPlayer');
+			if (tmpVideo)
+			{
+				tmpVideo.requestFullscreen();
+				return;
+			}
+		}
+
+		// For other media types, fullscreen the viewer container
+		let tmpViewer = document.getElementById('RetoldRemote-Viewer-Container');
+		if (tmpViewer)
 		{
 			tmpViewer.requestFullscreen();
 		}
@@ -812,6 +1222,95 @@ class GalleryNavigationProvider extends libPictProvider
 			tmpImageViewer.cycleFitMode();
 		}
 	}
+
+	/**
+	 * Open the current video file with VLC via the server endpoint.
+	 */
+	_openWithVLC()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		// Only works for video files
+		if (tmpRemote.CurrentViewerMediaType !== 'video')
+		{
+			return;
+		}
+
+		// Check if VLC is available
+		let tmpCapabilities = tmpRemote.ServerCapabilities || {};
+		if (!tmpCapabilities.vlc)
+		{
+			return;
+		}
+
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+		if (!tmpFilePath)
+		{
+			return;
+		}
+
+		// Show a brief toast
+		this._showToast('Opening in VLC...');
+
+		// POST to the server to open the file
+		fetch('/api/media/open',
+		{
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ path: tmpFilePath })
+		})
+		.then((pResponse) =>
+		{
+			return pResponse.json();
+		})
+		.then((pData) =>
+		{
+			if (!pData.Success)
+			{
+				this._showToast('Failed to open: ' + (pData.Error || 'Unknown error'));
+			}
+		})
+		.catch((pError) =>
+		{
+			this._showToast('Failed to open: ' + pError.message);
+		});
+	}
+
+	/**
+	 * Show a brief toast notification in the viewer.
+	 *
+	 * @param {string} pMessage - Text to display
+	 */
+	_showToast(pMessage)
+	{
+		let tmpIndicator = document.getElementById('RetoldRemote-FitIndicator');
+		if (!tmpIndicator)
+		{
+			tmpIndicator = document.createElement('div');
+			tmpIndicator.id = 'RetoldRemote-FitIndicator';
+			tmpIndicator.className = 'retold-remote-fit-indicator';
+
+			let tmpContainer = document.querySelector('.retold-remote-viewer-body');
+			if (tmpContainer)
+			{
+				tmpContainer.appendChild(tmpIndicator);
+			}
+		}
+
+		tmpIndicator.textContent = pMessage;
+		tmpIndicator.classList.add('visible');
+
+		if (this._toastTimeout)
+		{
+			clearTimeout(this._toastTimeout);
+		}
+
+		let tmpSelf = this;
+		this._toastTimeout = setTimeout(function ()
+		{
+			tmpIndicator.classList.remove('visible');
+		}, 1500);
+	}
 }
 
 GalleryNavigationProvider.default_configuration = _DefaultProviderConfiguration;

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

@@ -174,8 +174,17 @@ class RetoldRemoteProvider extends libPictProvider
 	 */
 	getContentURL(pPath)
 	{
-		// Always use the /content/ static route for actual file serving.
-		// Encode each path segment individually to preserve directory separators.
+		// When hashed filenames is enabled, use the /content-hashed/<hash> route
+		// so the real file path is never exposed to the browser.
+		if (this.pict.AppData.RetoldRemote.HashedFilenames)
+		{
+			let tmpHash = this.getHashForPath(pPath);
+			if (tmpHash)
+			{
+				return '/content-hashed/' + tmpHash;
+			}
+		}
+		// Fallback: encode each path segment individually to preserve directory separators.
 		let tmpSegments = pPath.split('/').map((pSeg) => encodeURIComponent(pSeg));
 		return '/content/' + tmpSegments.join('/');
 	}

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

@@ -91,6 +91,7 @@ const _FallbackExtensionMap =
 	'.zip': 'file-archive', '.tar': 'file-archive', '.gz': 'file-archive',
 	'.rar': 'file-archive', '.7z': 'file-archive', '.bz2': 'file-archive',
 	'.xz': 'file-archive', '.tgz': 'file-archive',
+	'.cbz': 'file-archive', '.cbr': 'file-archive',
 
 	// Audio
 	'.mp3': 'file-audio', '.wav': 'file-audio', '.flac': 'file-audio',