retold-remote 0.0.5 → 0.0.7

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

@@ -433,6 +433,69 @@ const _ViewConfiguration =
 			color: var(--retold-text-dim);
 			font-size: 0.85rem;
 		}
+		/* Distraction-free toggle */
+		.retold-remote-df-toggle
+		{
+			position: absolute;
+			top: 8px;
+			left: 8px;
+			z-index: 15;
+			padding: 4px 8px;
+			border: 1px solid var(--retold-border);
+			border-radius: 3px;
+			background: rgba(0, 0, 0, 0.5);
+			color: var(--retold-text-muted);
+			font-size: 0.72rem;
+			cursor: pointer;
+			opacity: 0;
+			transition: opacity 0.2s ease, color 0.15s, border-color 0.15s;
+			font-family: inherit;
+			white-space: nowrap;
+		}
+		.retold-remote-viewer-body:hover .retold-remote-df-toggle,
+		.retold-remote-df-toggle:focus
+		{
+			opacity: 1;
+		}
+		.retold-remote-df-toggle:hover
+		{
+			color: var(--retold-text-primary);
+			border-color: var(--retold-accent);
+		}
+		.retold-remote-df-toggle.active
+		{
+			color: var(--retold-accent);
+			border-color: var(--retold-accent);
+		}
+		/* Distraction-free exit hotspot (top-left corner) */
+		.retold-remote-df-exit-hotspot
+		{
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 80px;
+			height: 80px;
+			z-index: 16;
+			cursor: pointer;
+			display: none;
+		}
+		.retold-remote-df-exit-hotspot::after
+		{
+			content: '';
+			position: absolute;
+			top: 12px;
+			left: 12px;
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+			background: var(--retold-accent);
+			opacity: 0;
+			transition: opacity 0.3s ease;
+		}
+		.retold-remote-df-exit-hotspot:hover::after
+		{
+			opacity: 0.6;
+		}
 	`
 };
 
@@ -441,6 +504,12 @@ class RetoldRemoteMediaViewerView extends libPictView
 	constructor(pFable, pOptions, pServiceHash)
 	{
 		super(pFable, pOptions, pServiceHash);
+
+		this._swipeStartX = 0;
+		this._swipeStartY = 0;
+		this._swipeTouchCount = 0;
+		this._swipeHandlers = null;
+		this._dfExitHandlers = null;
 	}
 
 	/**
@@ -475,7 +544,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpHTML += '<div class="retold-remote-viewer-header">';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\'].closeViewer()" title="Back (Esc)">&larr; Back</button>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\'].prevFile()" title="Previous (k)">&lsaquo; Prev</button>';
-		tmpHTML += '<div class="retold-remote-viewer-title">' + this._escapeHTML(tmpFileName) + '</div>';
+		tmpHTML += '<div class="retold-remote-viewer-title">' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(tmpFileName) + '</div>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\'].nextFile()" title="Next (j)">Next &rsaquo;</button>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._toggleFileInfo()" title="Info (i)">&#9432;</button>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._toggleFullscreen()" title="Fullscreen (f)">&#9634;</button>';
@@ -484,6 +553,14 @@ class RetoldRemoteMediaViewerView extends libPictView
 		// Body with media content
 		tmpHTML += '<div class="retold-remote-viewer-body">';
 
+		// Distraction-free toggle (top-left corner)
+		let tmpDFActive = tmpRemote._distractionFreeMode ? ' active' : '';
+		tmpHTML += '<button class="retold-remote-df-toggle' + tmpDFActive + '" id="RetoldRemote-DF-Toggle" onclick="pict.views[\'RetoldRemote-MediaViewer\'].toggleDistractionFree()" title="Distraction-Free (d)">&#9673; DF</button>';
+
+		// Exit hotspot for distraction-free mode (double-click/tap top-left to exit)
+		let tmpDFHotspotDisplay = tmpRemote._distractionFreeMode ? '' : ' style="display:none"';
+		tmpHTML += '<div class="retold-remote-df-exit-hotspot" id="RetoldRemote-DF-ExitHotspot"' + tmpDFHotspotDisplay + '></div>';
+
 		switch (pMediaType)
 		{
 			case 'image':
@@ -538,6 +615,12 @@ class RetoldRemoteMediaViewerView extends libPictView
 			}
 		}
 
+		// Set up swipe navigation for touch devices
+		this._setupSwipeNavigation();
+
+		// Set up distraction-free exit hotspot (double-click/tap top-left)
+		this._setupDFExitHotspot();
+
 		// Update topbar
 		let tmpTopBar = this.pict.views['ContentEditor-TopBar'];
 		if (tmpTopBar)
@@ -546,9 +629,224 @@ class RetoldRemoteMediaViewerView extends libPictView
 		}
 	}
 
+	/**
+	 * Attach touch event listeners to the viewer body for swipe-based
+	 * prev/next navigation.  Only single-finger horizontal swipes are
+	 * recognised; pinch gestures and vertical scrolling are ignored.
+	 * Swipes are also suppressed when the image is zoomed and the
+	 * container is scrollable, so the user can pan freely.
+	 */
+	_setupSwipeNavigation()
+	{
+		// Clean up any previous listeners
+		this._cleanupSwipe();
+
+		let tmpBody = document.querySelector('.retold-remote-viewer-body');
+		if (!tmpBody)
+		{
+			return;
+		}
+
+		let tmpSelf = this;
+		let tmpSwipeThreshold = 50; // minimum px to count as a swipe
+
+		let tmpOnTouchStart = function (pEvent)
+		{
+			tmpSelf._swipeTouchCount = pEvent.touches.length;
+			if (pEvent.touches.length !== 1)
+			{
+				return;
+			}
+			tmpSelf._swipeStartX = pEvent.touches[0].clientX;
+			tmpSelf._swipeStartY = pEvent.touches[0].clientY;
+		};
+
+		let tmpOnTouchEnd = function (pEvent)
+		{
+			// Ignore multi-touch (pinch zoom, etc.)
+			if (tmpSelf._swipeTouchCount !== 1)
+			{
+				return;
+			}
+
+			let tmpEndX = pEvent.changedTouches[0].clientX;
+			let tmpEndY = pEvent.changedTouches[0].clientY;
+			let tmpDeltaX = tmpEndX - tmpSelf._swipeStartX;
+			let tmpDeltaY = tmpEndY - tmpSelf._swipeStartY;
+
+			// Must be primarily horizontal
+			if (Math.abs(tmpDeltaX) < tmpSwipeThreshold || Math.abs(tmpDeltaY) > Math.abs(tmpDeltaX))
+			{
+				return;
+			}
+
+			// If the viewer body is scrollable (zoomed image), don't
+			// swipe — let the user pan instead.
+			let tmpContainer = document.querySelector('.retold-remote-viewer-body');
+			if (tmpContainer && (tmpContainer.scrollWidth > tmpContainer.clientWidth + 2))
+			{
+				return;
+			}
+
+			let tmpNav = tmpSelf.pict.providers['RetoldRemote-GalleryNavigation'];
+			if (!tmpNav)
+			{
+				return;
+			}
+
+			if (tmpDeltaX < 0)
+			{
+				tmpNav.nextFile();
+			}
+			else
+			{
+				tmpNav.prevFile();
+			}
+		};
+
+		tmpBody.addEventListener('touchstart', tmpOnTouchStart, { passive: true });
+		tmpBody.addEventListener('touchend', tmpOnTouchEnd, { passive: true });
+
+		this._swipeHandlers =
+		{
+			element: tmpBody,
+			touchstart: tmpOnTouchStart,
+			touchend: tmpOnTouchEnd
+		};
+	}
+
+	/**
+	 * Remove swipe touch listeners from the viewer body.
+	 */
+	_cleanupSwipe()
+	{
+		if (this._swipeHandlers)
+		{
+			this._swipeHandlers.element.removeEventListener('touchstart', this._swipeHandlers.touchstart);
+			this._swipeHandlers.element.removeEventListener('touchend', this._swipeHandlers.touchend);
+			this._swipeHandlers = null;
+		}
+	}
+
+	/**
+	 * Toggle distraction-free mode from the viewer overlay button.
+	 * Delegates to the gallery navigation provider, then updates
+	 * the toggle button and exit hotspot state.
+	 */
+	toggleDistractionFree()
+	{
+		let tmpNav = this.pict.providers['RetoldRemote-GalleryNavigation'];
+		if (tmpNav)
+		{
+			tmpNav._toggleDistractionFree();
+		}
+		this._updateDFControls();
+	}
+
+	/**
+	 * Sync the distraction-free toggle button and exit hotspot
+	 * with the current mode state.
+	 */
+	_updateDFControls()
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpActive = tmpRemote._distractionFreeMode || false;
+
+		let tmpToggle = document.getElementById('RetoldRemote-DF-Toggle');
+		if (tmpToggle)
+		{
+			if (tmpActive)
+			{
+				tmpToggle.classList.add('active');
+			}
+			else
+			{
+				tmpToggle.classList.remove('active');
+			}
+		}
+
+		let tmpHotspot = document.getElementById('RetoldRemote-DF-ExitHotspot');
+		if (tmpHotspot)
+		{
+			tmpHotspot.style.display = tmpActive ? '' : 'none';
+		}
+	}
+
+	/**
+	 * Set up the double-click / double-tap handler on the
+	 * exit hotspot so the user can leave distraction-free mode
+	 * from the top-left corner of the viewer.
+	 */
+	_setupDFExitHotspot()
+	{
+		this._cleanupDFExitHotspot();
+
+		let tmpHotspot = document.getElementById('RetoldRemote-DF-ExitHotspot');
+		if (!tmpHotspot)
+		{
+			return;
+		}
+
+		let tmpSelf = this;
+
+		// Double-click for mouse
+		let tmpOnDblClick = function ()
+		{
+			let tmpRemote = tmpSelf.pict.AppData.RetoldRemote;
+			if (tmpRemote._distractionFreeMode)
+			{
+				tmpSelf.toggleDistractionFree();
+			}
+		};
+
+		// Double-tap for touch: detect two taps within 300ms
+		let tmpLastTap = 0;
+		let tmpOnTouchEnd = function (pEvent)
+		{
+			let tmpNow = Date.now();
+			if (tmpNow - tmpLastTap < 300)
+			{
+				pEvent.preventDefault();
+				let tmpRemote = tmpSelf.pict.AppData.RetoldRemote;
+				if (tmpRemote._distractionFreeMode)
+				{
+					tmpSelf.toggleDistractionFree();
+				}
+				tmpLastTap = 0;
+			}
+			else
+			{
+				tmpLastTap = tmpNow;
+			}
+		};
+
+		tmpHotspot.addEventListener('dblclick', tmpOnDblClick);
+		tmpHotspot.addEventListener('touchend', tmpOnTouchEnd);
+
+		this._dfExitHandlers =
+		{
+			element: tmpHotspot,
+			dblclick: tmpOnDblClick,
+			touchend: tmpOnTouchEnd
+		};
+	}
+
+	/**
+	 * Remove exit hotspot event listeners.
+	 */
+	_cleanupDFExitHotspot()
+	{
+		if (this._dfExitHandlers)
+		{
+			this._dfExitHandlers.element.removeEventListener('dblclick', this._dfExitHandlers.dblclick);
+			this._dfExitHandlers.element.removeEventListener('touchend', this._dfExitHandlers.touchend);
+			this._dfExitHandlers = null;
+		}
+	}
+
 	_buildImageHTML(pURL, pFileName)
 	{
-		return '<img src="' + pURL + '" alt="' + this._escapeHTML(pFileName) + '" '
+		return '<img src="' + pURL + '" alt="' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(pFileName) + '" '
 			+ 'style="max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in;" '
 			+ 'id="RetoldRemote-ImageViewer-Img" '
 			+ 'onload="pict.views[\'RetoldRemote-ImageViewer\'].initImage()" '
@@ -563,7 +861,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 		// 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>';
+		tmpHTML += '<div class="retold-remote-video-action-menu-title">' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(pFileName) + '</div>';
 
 		// Frame preview container (loaded on demand via t key or automatically)
 		if (tmpCapabilities.ffmpeg)
@@ -703,7 +1001,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 					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(/^.*\//, '')) + '" '
+						+ 'alt="' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(tmpFilePath.replace(/^.*\//, '')) + '" '
 						+ 'onerror="this.parentNode.innerHTML=\'\'">';
 				}
 				else
@@ -725,7 +1023,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 		let tmpHTML = '<div style="text-align: center; padding: 40px;">'
 			+ '<div style="margin-bottom: 24px;">' + tmpIconHTML + '</div>'
-			+ '<div style="font-size: 1.1rem; color: var(--retold-text-secondary); margin-bottom: 24px;">' + this._escapeHTML(pFileName) + '</div>'
+			+ '<div style="font-size: 1.1rem; color: var(--retold-text-secondary); margin-bottom: 24px;">' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(pFileName) + '</div>'
 			+ '<audio controls' + (this.pict.AppData.RetoldRemote.AutoplayAudio ? ' autoplay' : '') + ' preload="metadata" id="RetoldRemote-AudioPlayer" style="width: 100%; max-width: 500px;">'
 			+ '<source src="' + pURL + '">'
 			+ 'Your browser does not support the audio tag.'
@@ -779,7 +1077,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 		let tmpDocIconHTML = tmpIconProvider ? '<span class="retold-remote-icon retold-remote-icon-lg">' + tmpIconProvider.getIcon('document-large', 64) + '</span>' : '&#128196;';
 		return '<div style="text-align: center; padding: 40px;">'
 			+ '<div style="margin-bottom: 24px;">' + tmpDocIconHTML + '</div>'
-			+ '<div style="font-size: 1.1rem; color: var(--retold-text-secondary); margin-bottom: 24px;">' + this._escapeHTML(pFileName) + '</div>'
+			+ '<div style="font-size: 1.1rem; color: var(--retold-text-secondary); margin-bottom: 24px;">' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(pFileName) + '</div>'
 			+ '<a href="' + pURL + '" target="_blank" style="color: var(--retold-accent); font-size: 0.9rem;">Open in new tab</a>'
 			+ '</div>';
 	}
@@ -998,7 +1296,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 					if (tmpEl)
 					{
 						tmpEl.innerHTML = '<div class="retold-remote-ebook-loading">Failed to convert: '
-							+ tmpSelf._escapeHTML(pError.message)
+							+ tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(pError.message)
 							+ '<br><a href="' + pContentURL + '" target="_blank" style="color: var(--retold-accent); margin-top: 12px; display: inline-block;">Download file</a>'
 							+ '</div>';
 					}
@@ -1102,7 +1400,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 				if (tmpContentEl)
 				{
 					tmpContentEl.innerHTML = '<div class="retold-remote-ebook-loading">Failed to load ebook: '
-						+ tmpSelf._escapeHTML(pError.message) + '</div>';
+						+ tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(pError.message) + '</div>';
 				}
 			});
 	}
@@ -1130,9 +1428,9 @@ class RetoldRemoteMediaViewerView extends libPictView
 				let tmpItem = pItems[i];
 				let tmpIndentClass = pDepth > 0 ? ' indent-' + Math.min(pDepth, 2) : '';
 				tmpHTML += '<button class="retold-remote-ebook-toc-item' + tmpIndentClass + '" '
-					+ 'data-href="' + tmpSelf._escapeHTML(tmpItem.href) + '" '
+					+ 'data-href="' + tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(tmpItem.href) + '" '
 					+ 'onclick="pict.views[\'RetoldRemote-MediaViewer\'].ebookGoToChapter(this.getAttribute(\'data-href\'))">'
-					+ tmpSelf._escapeHTML(tmpItem.label.trim())
+					+ tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(tmpItem.label.trim())
 					+ '</button>';
 
 				if (tmpItem.subitems && tmpItem.subitems.length > 0)
@@ -1199,7 +1497,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 		let tmpFallbackIconHTML = tmpIconProvider ? '<span class="retold-remote-icon retold-remote-icon-lg">' + tmpIconProvider.getIcon('document-large', 64) + '</span>' : '&#128196;';
 		return '<div style="text-align: center; padding: 40px;">'
 			+ '<div style="margin-bottom: 24px;">' + tmpFallbackIconHTML + '</div>'
-			+ '<div style="font-size: 1.1rem; color: var(--retold-text-secondary); margin-bottom: 24px;">' + this._escapeHTML(pFileName) + '</div>'
+			+ '<div style="font-size: 1.1rem; color: var(--retold-text-secondary); margin-bottom: 24px;">' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(pFileName) + '</div>'
 			+ '<a href="' + pURL + '" target="_blank" style="color: var(--retold-accent); font-size: 0.9rem;">Download / Open in new tab</a>'
 			+ '</div>';
 	}
@@ -1232,7 +1530,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 					if (pData.Size !== undefined)
 					{
-						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Size</span><span class="retold-remote-fileinfo-value">' + tmpSelf._formatFileSize(pData.Size) + '</span></div>';
+						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Size</span><span class="retold-remote-fileinfo-value">' + tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'].formatFileSize(pData.Size) + '</span></div>';
 					}
 					if (pData.Width && pData.Height)
 					{
@@ -1304,7 +1602,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 					}
 					if (pData.Size !== undefined)
 					{
-						tmpStatsHTML += '<span><span class="retold-remote-video-stat-label">Size</span> <span class="retold-remote-video-stat-value">' + tmpSelf._formatFileSize(pData.Size) + '</span></span>';
+						tmpStatsHTML += '<span><span class="retold-remote-video-stat-label">Size</span> <span class="retold-remote-video-stat-value">' + tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'].formatFileSize(pData.Size) + '</span></span>';
 					}
 
 					// Preserve the Explore and VLC buttons if they exist
@@ -1318,21 +1616,6 @@ class RetoldRemoteMediaViewerView extends libPictView
 			});
 	}
 
-	_formatFileSize(pBytes)
-	{
-		if (!pBytes || pBytes === 0) return '0 B';
-		let tmpUnits = ['B', 'KB', 'MB', 'GB', 'TB'];
-		let tmpIndex = Math.floor(Math.log(pBytes) / Math.log(1024));
-		if (tmpIndex >= tmpUnits.length) tmpIndex = tmpUnits.length - 1;
-		let tmpSize = pBytes / Math.pow(1024, tmpIndex);
-		return tmpSize.toFixed(tmpIndex === 0 ? 0 : 1) + ' ' + tmpUnits[tmpIndex];
-	}
-
-	_escapeHTML(pText)
-	{
-		if (!pText) return '';
-		return pText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-	}
 }
 
 RetoldRemoteMediaViewerView.default_configuration = _ViewConfiguration;