retold-remote 0.0.4 → 0.0.6

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

@@ -1,5 +1,11 @@
 const libPictProvider = require('pict-provider');
 
+const libHandleGalleryKey = require('./keyboard-handlers/KeyHandler-Gallery.js');
+const libHandleViewerKey = require('./keyboard-handlers/KeyHandler-Viewer.js');
+const libHandleSidebarKey = require('./keyboard-handlers/KeyHandler-Sidebar.js');
+const libHandleVideoExplorerKey = require('./keyboard-handlers/KeyHandler-VideoExplorer.js');
+const libHandleAudioExplorerKey = require('./keyboard-handlers/KeyHandler-AudioExplorer.js');
+
 const _DefaultProviderConfiguration =
 {
 	ProviderIdentifier: 'RetoldRemote-GalleryNavigation',
@@ -171,109 +177,93 @@ class GalleryNavigationProvider extends libPictProvider
 
 		document.addEventListener('keydown', this._keydownHandler);
 		this._keydownBound = true;
+
+		// Set up edge-swipe gestures for distraction-free mode on touch devices
+		this._setupDFSwipeGestures();
 	}
 
 	/**
-	 * Handle keyboard events in gallery mode.
+	 * Set up touch swipe gestures near the top edge for toggling
+	 * distraction-free mode.
+	 *
+	 * - Swipe UP starting within the top 60px of the viewport → enter DF
+	 * - Swipe DOWN starting within the top 40px of the viewport → exit DF
+	 *
+	 * Only single-finger vertical swipes that exceed the threshold are
+	 * recognised.  Horizontal movement greater than vertical is ignored.
 	 */
-	_handleGalleryKey(pEvent)
+	_setupDFSwipeGestures()
 	{
-		let tmpRemote = this.pict.AppData.RetoldRemote;
-		let tmpItems = tmpRemote.GalleryItems || [];
-		let tmpIndex = tmpRemote.GalleryCursorIndex || 0;
-
-		switch (pEvent.key)
+		if (this._dfSwipeBound)
 		{
-			case 'ArrowRight':
-				pEvent.preventDefault();
-				this.moveCursor(Math.min(tmpIndex + 1, tmpItems.length - 1));
-				break;
-
-			case 'ArrowLeft':
-				pEvent.preventDefault();
-				this.moveCursor(Math.max(tmpIndex - 1, 0));
-				break;
-
-			case 'ArrowDown':
-				pEvent.preventDefault();
-				this.moveCursor(Math.min(tmpIndex + this._columnsPerRow, tmpItems.length - 1));
-				break;
-
-			case 'ArrowUp':
-				pEvent.preventDefault();
-				this.moveCursor(Math.max(tmpIndex - this._columnsPerRow, 0));
-				break;
-
-			case 'Enter':
-				pEvent.preventDefault();
-				this.openCurrent();
-				break;
-
-			case 'Escape':
-				pEvent.preventDefault();
-				this.navigateUp();
-				break;
-
-			case 'g':
-				pEvent.preventDefault();
-				this._toggleViewMode();
-				break;
+			return;
+		}
 
-			case 'x':
-				pEvent.preventDefault();
-				this._clearAllFilters();
-				break;
+		let tmpSelf = this;
+		let tmpSwipeThreshold = 60;
+		let tmpEdgeEnter = 60;
+		let tmpEdgeExit = 40;
+		let tmpStartY = 0;
+		let tmpStartX = 0;
+		let tmpStartClientY = 0;
+		let tmpTouchCount = 0;
+
+		this._dfSwipeTouchStart = function (pEvent)
+		{
+			tmpTouchCount = pEvent.touches.length;
+			if (tmpTouchCount !== 1)
+			{
+				return;
+			}
+			tmpStartX = pEvent.touches[0].clientX;
+			tmpStartY = pEvent.touches[0].clientY;
+			tmpStartClientY = tmpStartY;
+		};
 
-			case 'Home':
-				pEvent.preventDefault();
-				this.moveCursor(0);
-				break;
+		this._dfSwipeTouchEnd = function (pEvent)
+		{
+			if (tmpTouchCount !== 1)
+			{
+				return;
+			}
 
-			case 'End':
-				pEvent.preventDefault();
-				this.moveCursor(tmpItems.length - 1);
-				break;
+			let tmpEndX = pEvent.changedTouches[0].clientX;
+			let tmpEndY = pEvent.changedTouches[0].clientY;
+			let tmpDeltaX = tmpEndX - tmpStartX;
+			let tmpDeltaY = tmpEndY - tmpStartY;
 
-			case 'f':
-				pEvent.preventDefault();
-				{
-					// Ensure the filter bar is visible first
-					this._showFilterBar();
-					let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];
-					if (tmpGalleryView)
-					{
-						tmpGalleryView.toggleFilterPanel();
-					}
-				}
-				break;
+			// Must be primarily vertical
+			if (Math.abs(tmpDeltaY) < tmpSwipeThreshold || Math.abs(tmpDeltaX) > Math.abs(tmpDeltaY))
+			{
+				return;
+			}
 
-			case 's':
-				pEvent.preventDefault();
-				{
-					// Ensure the filter bar is visible first
-					this._showFilterBar();
-					setTimeout(() =>
-					{
-						let tmpSortSelect = document.getElementById('RetoldRemote-Gallery-Sort');
-						if (tmpSortSelect)
-						{
-							tmpSortSelect.focus();
-						}
-					}, 50);
-				}
-				break;
+			let tmpRemote = tmpSelf.pict.AppData.RetoldRemote;
+			let tmpIsDF = tmpRemote._distractionFreeMode || false;
 
-			case 'c':
-				pEvent.preventDefault();
-				this._toggleSettingsPanel();
-				break;
+			if (!tmpIsDF && tmpDeltaY < 0 && tmpStartClientY <= tmpEdgeEnter)
+			{
+				// Swipe up from top edge → enter DF
+				tmpSelf._toggleDistractionFree();
+			}
+			else if (tmpIsDF && tmpDeltaY > 0 && tmpStartClientY <= tmpEdgeExit)
+			{
+				// Swipe down from top edge → exit DF
+				tmpSelf._toggleDistractionFree();
+			}
+		};
 
-			case 'd':
-				pEvent.preventDefault();
-				this._toggleDistractionFree();
-				break;
+		document.addEventListener('touchstart', this._dfSwipeTouchStart, { passive: true });
+		document.addEventListener('touchend', this._dfSwipeTouchEnd, { passive: true });
+		this._dfSwipeBound = true;
+	}
 
-			}
+	/**
+	 * Handle keyboard events in gallery mode.
+	 */
+	_handleGalleryKey(pEvent)
+	{
+		libHandleGalleryKey(this, pEvent);
 	}
 
 	/**
@@ -281,60 +271,7 @@ class GalleryNavigationProvider extends libPictProvider
 	 */
 	_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;
-		}
+		libHandleSidebarKey(this, pEvent);
 	}
 
 	/**
@@ -415,131 +352,7 @@ 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':
-				pEvent.preventDefault();
-				this.closeViewer();
-				break;
-
-			case 'ArrowRight':
-			case 'j':
-				pEvent.preventDefault();
-				this.nextFile();
-				break;
-
-			case 'ArrowLeft':
-			case 'k':
-				pEvent.preventDefault();
-				this.prevFile();
-				break;
-
-			case 'f':
-				pEvent.preventDefault();
-				this._toggleFullscreen();
-				break;
-
-			case 'i':
-				pEvent.preventDefault();
-				this._toggleFileInfo();
-				break;
-
-			case ' ':
-				pEvent.preventDefault();
-				this._togglePlayPause();
-				break;
-
-			case '+':
-			case '=':
-				pEvent.preventDefault();
-				this._zoomIn();
-				break;
-
-			case '-':
-				pEvent.preventDefault();
-				this._zoomOut();
-				break;
-
-			case '0':
-				pEvent.preventDefault();
-				this._zoomReset();
-				break;
-
-			case 'z':
-				pEvent.preventDefault();
-				this._cycleFitMode();
-				break;
-
-			case 'Enter':
-				pEvent.preventDefault();
-				this._openWithVLC();
-				break;
-
-			case 'd':
-				pEvent.preventDefault();
-				this._toggleDistractionFree();
-				break;
-		}
+		libHandleViewerKey(this, pEvent);
 	}
 
 	/**
@@ -547,17 +360,7 @@ class GalleryNavigationProvider extends libPictProvider
 	 */
 	_handleVideoExplorerKey(pEvent)
 	{
-		switch (pEvent.key)
-		{
-			case 'Escape':
-				pEvent.preventDefault();
-				let tmpVEX = this.pict.views['RetoldRemote-VideoExplorer'];
-				if (tmpVEX)
-				{
-					tmpVEX.goBack();
-				}
-				break;
-		}
+		libHandleVideoExplorerKey(this, pEvent);
 	}
 
 	/**
@@ -565,49 +368,7 @@ class GalleryNavigationProvider extends libPictProvider
 	 */
 	_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;
-		}
+		libHandleAudioExplorerKey(this, pEvent);
 	}
 
 	/**
@@ -641,6 +402,13 @@ class GalleryNavigationProvider extends libPictProvider
 			// Scroll the tile into view if needed
 			tmpNewTile.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
 		}
+
+		// Update the top bar info to reflect the new cursor position
+		let tmpTopBar = this.pict.views['ContentEditor-TopBar'];
+		if (tmpTopBar)
+		{
+			tmpTopBar.updateInfo();
+		}
 	}
 
 	/**
@@ -683,6 +451,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.
 	 */
@@ -717,12 +538,30 @@ class GalleryNavigationProvider extends libPictProvider
 		let tmpRemote = this.pict.AppData.RetoldRemote;
 		tmpRemote.ActiveMode = 'gallery';
 
+		// Exit collection browsing mode
+		tmpRemote.BrowsingCollection = false;
+		tmpRemote.BrowsingCollectionIndex = -1;
+
 		let tmpGalleryContainer = document.getElementById('RetoldRemote-Gallery-Container');
 		let tmpViewerContainer = document.getElementById('RetoldRemote-Viewer-Container');
 
 		if (tmpGalleryContainer) tmpGalleryContainer.style.display = '';
 		if (tmpViewerContainer) tmpViewerContainer.style.display = 'none';
 
+		// Clean up swipe and DF exit listeners
+		let tmpMediaViewer = this.pict.views['RetoldRemote-MediaViewer'];
+		if (tmpMediaViewer)
+		{
+			if (tmpMediaViewer._cleanupSwipe)
+			{
+				tmpMediaViewer._cleanupSwipe();
+			}
+			if (tmpMediaViewer._cleanupDFExitHotspot)
+			{
+				tmpMediaViewer._cleanupDFExitHotspot();
+			}
+		}
+
 		// Restore the hash to the browse route (use hashed identifier when available)
 		let tmpCurrentLocation = (this.pict.AppData.PictFileBrowser && this.pict.AppData.PictFileBrowser.CurrentLocation) || '';
 		let tmpFragProvider = this.pict.providers['RetoldRemote-Provider'];
@@ -739,10 +578,37 @@ class GalleryNavigationProvider extends libPictProvider
 
 	/**
 	 * Navigate to the next file in the gallery list.
+	 * When browsing a collection, navigates through collection items instead.
 	 */
 	nextFile()
 	{
 		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		// Collection browsing mode — navigate through ActiveCollection.Items
+		if (tmpRemote.BrowsingCollection && tmpRemote.ActiveCollection)
+		{
+			let tmpCollItems = tmpRemote.ActiveCollection.Items || [];
+			let tmpCollIndex = tmpRemote.BrowsingCollectionIndex;
+
+			for (let i = tmpCollIndex + 1; i < tmpCollItems.length; i++)
+			{
+				let tmpItem = tmpCollItems[i];
+				if (tmpItem.Type === 'file' || tmpItem.Type === 'subfile' ||
+					tmpItem.Type === 'image-crop' || tmpItem.Type === 'video-clip' ||
+					tmpItem.Type === 'video-frame')
+				{
+					tmpRemote.BrowsingCollectionIndex = i;
+					let tmpApp = this.pict.PictApplication;
+					if (tmpApp && tmpApp.navigateToFile)
+					{
+						tmpApp.navigateToFile(tmpItem.Path);
+					}
+					return;
+				}
+			}
+			return;
+		}
+
 		let tmpItems = tmpRemote.GalleryItems || [];
 		let tmpIndex = tmpRemote.GalleryCursorIndex || 0;
 
@@ -764,10 +630,37 @@ class GalleryNavigationProvider extends libPictProvider
 
 	/**
 	 * Navigate to the previous file in the gallery list.
+	 * When browsing a collection, navigates through collection items instead.
 	 */
 	prevFile()
 	{
 		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		// Collection browsing mode — navigate through ActiveCollection.Items
+		if (tmpRemote.BrowsingCollection && tmpRemote.ActiveCollection)
+		{
+			let tmpCollItems = tmpRemote.ActiveCollection.Items || [];
+			let tmpCollIndex = tmpRemote.BrowsingCollectionIndex;
+
+			for (let i = tmpCollIndex - 1; i >= 0; i--)
+			{
+				let tmpItem = tmpCollItems[i];
+				if (tmpItem.Type === 'file' || tmpItem.Type === 'subfile' ||
+					tmpItem.Type === 'image-crop' || tmpItem.Type === 'video-clip' ||
+					tmpItem.Type === 'video-frame')
+				{
+					tmpRemote.BrowsingCollectionIndex = i;
+					let tmpApp = this.pict.PictApplication;
+					if (tmpApp && tmpApp.navigateToFile)
+					{
+						tmpApp.navigateToFile(tmpItem.Path);
+					}
+					return;
+				}
+			}
+			return;
+		}
+
 		let tmpItems = tmpRemote.GalleryItems || [];
 		let tmpIndex = tmpRemote.GalleryCursorIndex || 0;
 
@@ -882,6 +775,7 @@ class GalleryNavigationProvider extends libPictProvider
 	{
 		let tmpRemote = this.pict.AppData.RetoldRemote;
 		tmpRemote.FilterBarVisible = false;
+		tmpRemote.FilterPanelOpen = false;
 
 		let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];
 		if (tmpGalleryView)
@@ -901,7 +795,7 @@ class GalleryNavigationProvider extends libPictProvider
 			tmpGalleryView.clearAllFilters();
 		}
 
-		this._showToast('Filters cleared');
+		this.pict.providers['RetoldRemote-ToastNotification'].showOverlayIndicator('Filters cleared');
 	}
 
 	// ──────────────────────────────────────────────
@@ -967,7 +861,8 @@ class GalleryNavigationProvider extends libPictProvider
 			['s', 'Focus sort dropdown'],
 			['x', 'Clear all filters'],
 			['c', 'Settings / config panel'],
-			['d', 'Distraction-free mode']
+			['d', 'Distraction-free mode'],
+			['e', 'Video explorer (on video files)']
 		];
 		for (let i = 0; i < tmpGalleryShortcuts.length; i++)
 		{
@@ -1044,6 +939,14 @@ class GalleryNavigationProvider extends libPictProvider
 		}
 		tmpHTML += '</div>';
 
+		// Documentation link
+		tmpHTML += '<div class="retold-remote-help-section">';
+		tmpHTML += '<div class="retold-remote-help-row" style="justify-content: center; padding: 8px 0;">';
+		tmpHTML += '<a href="docs.html" target="_blank" style="color: var(--retold-accent, #569cd6); text-decoration: none; font-size: 0.9rem; cursor: pointer;">';
+		tmpHTML += 'View Documentation &#x2197;</a>';
+		tmpHTML += '</div>';
+		tmpHTML += '</div>';
+
 		// Active mode indicator
 		tmpHTML += '<div class="retold-remote-help-footer">';
 		let tmpModeLabel = 'Gallery';
@@ -1195,6 +1098,13 @@ class GalleryNavigationProvider extends libPictProvider
 			}
 		}
 
+		// Sync DF toggle/hotspot in the media viewer
+		let tmpMediaViewer = this.pict.views['RetoldRemote-MediaViewer'];
+		if (tmpMediaViewer && tmpMediaViewer._updateDFControls)
+		{
+			tmpMediaViewer._updateDFControls();
+		}
+
 		// Recalculate gallery columns after layout change
 		setTimeout(() => this.recalculateColumns(), 100);
 	}
@@ -1232,7 +1142,8 @@ class GalleryNavigationProvider extends libPictProvider
 		let tmpInfoOverlay = document.getElementById('RetoldRemote-FileInfo-Overlay');
 		if (tmpInfoOverlay)
 		{
-			tmpInfoOverlay.style.display = (tmpInfoOverlay.style.display === 'none') ? '' : 'none';
+			let tmpIsHidden = window.getComputedStyle(tmpInfoOverlay).display === 'none';
+			tmpInfoOverlay.style.display = tmpIsHidden ? 'block' : 'none';
 		}
 	}
 
@@ -1318,7 +1229,7 @@ class GalleryNavigationProvider extends libPictProvider
 		}
 
 		// Show a brief toast
-		this._showToast('Opening in VLC...');
+		this.pict.providers['RetoldRemote-ToastNotification'].showOverlayIndicator('Opening in VLC...');
 
 		// POST to the server to open the file
 		fetch('/api/media/open',
@@ -1335,50 +1246,56 @@ class GalleryNavigationProvider extends libPictProvider
 		{
 			if (!pData.Success)
 			{
-				this._showToast('Failed to open: ' + (pData.Error || 'Unknown error'));
+				this.pict.providers['RetoldRemote-ToastNotification'].showOverlayIndicator('Failed to open: ' + (pData.Error || 'Unknown error'));
 			}
 		})
 		.catch((pError) =>
 		{
-			this._showToast('Failed to open: ' + pError.message);
+			this.pict.providers['RetoldRemote-ToastNotification'].showOverlayIndicator('Failed to open: ' + pError.message);
 		});
 	}
 
 	/**
-	 * Show a brief toast notification in the viewer.
-	 *
-	 * @param {string} pMessage - Text to display
+	 * Stream the current media file to VLC on the client device via vlc:// protocol link.
 	 */
-	_showToast(pMessage)
+	_streamWithVLC()
 	{
-		let tmpIndicator = document.getElementById('RetoldRemote-FitIndicator');
-		if (!tmpIndicator)
-		{
-			tmpIndicator = document.createElement('div');
-			tmpIndicator.id = 'RetoldRemote-FitIndicator';
-			tmpIndicator.className = 'retold-remote-fit-indicator';
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpMediaType = tmpRemote.CurrentViewerMediaType;
 
-			let tmpContainer = document.querySelector('.retold-remote-viewer-body');
-			if (tmpContainer)
-			{
-				tmpContainer.appendChild(tmpIndicator);
-			}
+		if (tmpMediaType !== 'video' && tmpMediaType !== 'audio')
+		{
+			return;
 		}
 
-		tmpIndicator.textContent = pMessage;
-		tmpIndicator.classList.add('visible');
-
-		if (this._toastTimeout)
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+		if (!tmpFilePath)
 		{
-			clearTimeout(this._toastTimeout);
+			return;
 		}
 
-		let tmpSelf = this;
-		this._toastTimeout = setTimeout(function ()
-		{
-			tmpIndicator.classList.remove('visible');
-		}, 1500);
+		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.pict.providers['RetoldRemote-ToastNotification'].showOverlayIndicator('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);
 	}
+
 }
 
 GalleryNavigationProvider.default_configuration = _DefaultProviderConfiguration;