retold-remote 0.0.1 → 0.0.2

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

@@ -147,6 +147,213 @@ const _ViewConfiguration =
 		.retold-remote-code-viewer-container .pict-code-editor .tag { color: #E06C75; }
 		.retold-remote-code-viewer-container .pict-code-editor .attr-name { color: #D19A66; }
 		.retold-remote-code-viewer-container .pict-code-editor .attr-value { color: #98C379; }
+		/* Video wrap with stats bar */
+		.retold-remote-video-wrap
+		{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			max-width: 100%;
+			max-height: 100%;
+			width: 100%;
+			height: 100%;
+		}
+		.retold-remote-video-wrap video
+		{
+			flex: 1;
+			min-height: 0;
+			max-width: 100%;
+			max-height: calc(100% - 40px);
+			object-fit: contain;
+		}
+		.retold-remote-video-stats
+		{
+			display: flex;
+			align-items: center;
+			gap: 16px;
+			padding: 6px 16px;
+			background: var(--retold-bg-secondary);
+			border-top: 1px solid var(--retold-border);
+			width: 100%;
+			flex-shrink: 0;
+			font-size: 0.75rem;
+			color: var(--retold-text-dim);
+			white-space: nowrap;
+			overflow-x: auto;
+		}
+		.retold-remote-video-stats span
+		{
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+		}
+		.retold-remote-video-stats .retold-remote-video-stat-label
+		{
+			color: var(--retold-text-muted);
+		}
+		.retold-remote-video-stats .retold-remote-video-stat-value
+		{
+			color: var(--retold-text-secondary);
+		}
+		.retold-remote-explore-btn
+		{
+			margin-left: auto;
+			padding: 3px 12px;
+			border: 1px solid var(--retold-accent);
+			border-radius: 3px;
+			background: transparent;
+			color: var(--retold-accent);
+			font-size: 0.75rem;
+			cursor: pointer;
+			transition: background 0.15s, color 0.15s;
+			font-family: inherit;
+			white-space: nowrap;
+		}
+		.retold-remote-explore-btn:hover
+		{
+			background: var(--retold-accent);
+			color: var(--retold-bg-primary);
+		}
+		.retold-remote-vlc-btn
+		{
+			padding: 3px 12px;
+			border: 1px solid var(--retold-accent);
+			border-radius: 3px;
+			background: transparent;
+			color: var(--retold-accent);
+			font-size: 0.75rem;
+			cursor: pointer;
+			transition: background 0.15s, color 0.15s;
+			font-family: inherit;
+			white-space: nowrap;
+		}
+		.retold-remote-vlc-btn:hover
+		{
+			background: var(--retold-accent);
+			color: var(--retold-bg-primary);
+		}
+		/* Ebook reader */
+		.retold-remote-ebook-wrap
+		{
+			display: flex;
+			width: 100%;
+			height: 100%;
+			position: relative;
+		}
+		.retold-remote-ebook-toc
+		{
+			width: 240px;
+			flex-shrink: 0;
+			background: var(--retold-bg-secondary);
+			border-right: 1px solid var(--retold-border);
+			overflow-y: auto;
+			font-size: 0.78rem;
+			padding: 8px 0;
+		}
+		.retold-remote-ebook-toc.collapsed
+		{
+			display: none;
+		}
+		.retold-remote-ebook-toc-item
+		{
+			display: block;
+			padding: 6px 16px;
+			color: var(--retold-text-secondary);
+			text-decoration: none;
+			cursor: pointer;
+			transition: background 0.1s, color 0.1s;
+			border: none;
+			background: none;
+			width: 100%;
+			text-align: left;
+			font-family: inherit;
+			font-size: inherit;
+		}
+		.retold-remote-ebook-toc-item:hover
+		{
+			background: var(--retold-bg-tertiary);
+			color: var(--retold-text-primary);
+		}
+		.retold-remote-ebook-toc-item.indent-1
+		{
+			padding-left: 32px;
+		}
+		.retold-remote-ebook-toc-item.indent-2
+		{
+			padding-left: 48px;
+		}
+		.retold-remote-ebook-reader
+		{
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-width: 0;
+			position: relative;
+		}
+		.retold-remote-ebook-content
+		{
+			flex: 1;
+			position: relative;
+			overflow: hidden;
+		}
+		.retold-remote-ebook-content iframe
+		{
+			border: none;
+		}
+		.retold-remote-ebook-controls
+		{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 16px;
+			padding: 8px 16px;
+			background: var(--retold-bg-secondary);
+			border-top: 1px solid var(--retold-border);
+			flex-shrink: 0;
+		}
+		.retold-remote-ebook-page-btn
+		{
+			padding: 6px 20px;
+			border: 1px solid var(--retold-border);
+			border-radius: 3px;
+			background: transparent;
+			color: var(--retold-text-muted);
+			font-size: 0.82rem;
+			cursor: pointer;
+			transition: color 0.15s, border-color 0.15s;
+			font-family: inherit;
+		}
+		.retold-remote-ebook-page-btn:hover
+		{
+			color: var(--retold-text-primary);
+			border-color: var(--retold-accent);
+		}
+		.retold-remote-ebook-toc-btn
+		{
+			padding: 6px 12px;
+			border: 1px solid var(--retold-border);
+			border-radius: 3px;
+			background: transparent;
+			color: var(--retold-text-muted);
+			font-size: 0.75rem;
+			cursor: pointer;
+			font-family: inherit;
+		}
+		.retold-remote-ebook-toc-btn:hover
+		{
+			color: var(--retold-text-primary);
+			border-color: var(--retold-accent);
+		}
+		.retold-remote-ebook-loading
+		{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			color: var(--retold-text-dim);
+			font-size: 0.85rem;
+		}
 	`
 };
 
@@ -241,6 +448,16 @@ class RetoldRemoteMediaViewerView extends libPictView
 			this._loadCodeViewer(tmpContentURL, pFilePath);
 		}
 
+		// Load ebook viewer for epub/mobi
+		if (pMediaType === 'document')
+		{
+			let tmpExt = pFilePath.replace(/^.*\./, '').toLowerCase();
+			if (tmpExt === 'epub' || tmpExt === 'mobi')
+			{
+				this._loadEbookViewer(tmpContentURL, pFilePath);
+			}
+		}
+
 		// Update topbar
 		let tmpTopBar = this.pict.views['ContentEditor-TopBar'];
 		if (tmpTopBar)
@@ -260,26 +477,74 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 	_buildVideoHTML(pURL, pFileName)
 	{
-		return '<video controls autoplay preload="metadata" '
-			+ 'style="max-width: 100%; max-height: 100%;" '
+		let tmpHTML = '<div class="retold-remote-video-wrap">';
+
+		let tmpAutoplayVideo = this.pict.AppData.RetoldRemote.AutoplayVideo ? ' autoplay' : '';
+		tmpHTML += '<video controls' + tmpAutoplayVideo + ' preload="metadata" '
 			+ 'id="RetoldRemote-VideoPlayer">'
 			+ '<source src="' + pURL + '">'
 			+ 'Your browser does not support the video tag.'
 			+ '</video>';
+
+		// Stats bar below the video
+		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'
+				+ '</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 += '</div>'; // end stats
+		tmpHTML += '</div>'; // end wrap
+
+		return tmpHTML;
 	}
 
 	_buildAudioHTML(pURL, pFileName)
 	{
 		let tmpIconProvider = this.pict.providers['RetoldRemote-Icons'];
 		let tmpIconHTML = tmpIconProvider ? '<span class="retold-remote-icon retold-remote-icon-lg">' + tmpIconProvider.getIcon('music-note', 64) + '</span>' : '&#127925;';
-		return '<div style="text-align: center; padding: 40px;">'
+
+		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>'
-			+ '<audio controls autoplay preload="metadata" id="RetoldRemote-AudioPlayer" style="width: 100%; max-width: 500px;">'
+			+ '<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.'
-			+ '</audio>'
-			+ '</div>';
+			+ '</audio>';
+
+		// 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" '
+				+ 'onclick="pict.views[\'RetoldRemote-AudioExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" '
+				+ 'title="Explore waveform and extract segments from this audio">'
+				+ '&#128202; Explore Audio'
+				+ '</button>'
+				+ '</div>';
+		}
+
+		tmpHTML += '</div>';
+		return tmpHTML;
 	}
 
 	_buildDocumentHTML(pURL, pFileName, pFilePath)
@@ -293,6 +558,11 @@ class RetoldRemoteMediaViewerView extends libPictView
 				+ '</iframe>';
 		}
 
+		if (tmpExtension === 'epub' || tmpExtension === 'mobi')
+		{
+			return this._buildEbookHTML(pURL, pFileName, pFilePath);
+		}
+
 		// For other document types, show a download link
 		let tmpIconProvider = this.pict.providers['RetoldRemote-Icons'];
 		let tmpDocIconHTML = tmpIconProvider ? '<span class="retold-remote-icon retold-remote-icon-lg">' + tmpIconProvider.getIcon('document-large', 64) + '</span>' : '&#128196;';
@@ -440,6 +710,278 @@ class RetoldRemoteMediaViewerView extends libPictView
 			});
 	}
 
+	/**
+	 * Build the HTML shell for the ebook reader.
+	 */
+	_buildEbookHTML(pURL, pFileName, pFilePath)
+	{
+		return '<div class="retold-remote-ebook-wrap">'
+			+ '<div class="retold-remote-ebook-toc collapsed" id="RetoldRemote-EbookTOC"></div>'
+			+ '<div class="retold-remote-ebook-reader">'
+			+ '<div class="retold-remote-ebook-content" id="RetoldRemote-EbookContent">'
+			+ '<div class="retold-remote-ebook-loading">Loading ebook...</div>'
+			+ '</div>'
+			+ '<div class="retold-remote-ebook-controls">'
+			+ '<button class="retold-remote-ebook-toc-btn" onclick="pict.views[\'RetoldRemote-MediaViewer\'].toggleEbookTOC()">&#9776; TOC</button>'
+			+ '<button class="retold-remote-ebook-page-btn" onclick="pict.views[\'RetoldRemote-MediaViewer\'].ebookPrevPage()">&larr; Prev</button>'
+			+ '<button class="retold-remote-ebook-page-btn" onclick="pict.views[\'RetoldRemote-MediaViewer\'].ebookNextPage()">Next &rarr;</button>'
+			+ '</div>'
+			+ '</div>'
+			+ '</div>';
+	}
+
+	/**
+	 * Load and render an ebook using epub.js.
+	 * For EPUB files, fetch directly. For MOBI files, convert server-side first.
+	 *
+	 * @param {string} pContentURL - Content URL for the file
+	 * @param {string} pFilePath   - Relative file path
+	 */
+	_loadEbookViewer(pContentURL, pFilePath)
+	{
+		let tmpSelf = this;
+		let tmpExtension = pFilePath.replace(/^.*\./, '').toLowerCase();
+
+		if (tmpExtension === 'mobi')
+		{
+			// Convert MOBI to EPUB server-side first
+			let tmpCapabilities = this.pict.AppData.RetoldRemote.ServerCapabilities || {};
+			if (!tmpCapabilities.ebook_convert)
+			{
+				let tmpContent = document.getElementById('RetoldRemote-EbookContent');
+				if (tmpContent)
+				{
+					tmpContent.innerHTML = '<div class="retold-remote-ebook-loading">'
+						+ 'MOBI viewing requires Calibre (ebook-convert) on the server.<br>'
+						+ '<a href="' + pContentURL + '" target="_blank" style="color: var(--retold-accent); margin-top: 12px; display: inline-block;">Download file</a>'
+						+ '</div>';
+				}
+				return;
+			}
+
+			let tmpContent = document.getElementById('RetoldRemote-EbookContent');
+			if (tmpContent)
+			{
+				tmpContent.innerHTML = '<div class="retold-remote-ebook-loading">Converting MOBI to EPUB...</div>';
+			}
+
+			let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+			let tmpPathParam = tmpProvider ? tmpProvider._getPathParam(pFilePath) : encodeURIComponent(pFilePath);
+
+			fetch('/api/media/ebook-convert?path=' + tmpPathParam)
+				.then((pResponse) => pResponse.json())
+				.then((pData) =>
+				{
+					if (!pData || !pData.Success)
+					{
+						throw new Error(pData ? pData.Error : 'Conversion failed.');
+					}
+
+					// Fetch the converted EPUB and render
+					let tmpEpubURL = '/api/media/ebook/' + pData.CacheKey + '/' + pData.OutputFilename;
+					tmpSelf._renderEpub(tmpEpubURL);
+				})
+				.catch((pError) =>
+				{
+					let tmpEl = document.getElementById('RetoldRemote-EbookContent');
+					if (tmpEl)
+					{
+						tmpEl.innerHTML = '<div class="retold-remote-ebook-loading">Failed to convert: '
+							+ tmpSelf._escapeHTML(pError.message)
+							+ '<br><a href="' + pContentURL + '" target="_blank" style="color: var(--retold-accent); margin-top: 12px; display: inline-block;">Download file</a>'
+							+ '</div>';
+					}
+				});
+		}
+		else
+		{
+			// EPUB — render directly
+			this._renderEpub(pContentURL);
+		}
+	}
+
+	/**
+	 * Initialize epub.js and render an EPUB into the viewer container.
+	 *
+	 * @param {string} pEpubURL - URL to fetch the EPUB from
+	 */
+	_renderEpub(pEpubURL)
+	{
+		let tmpSelf = this;
+
+		// Check that epub.js is available
+		if (typeof (window) === 'undefined' || typeof (window.ePub) !== 'function')
+		{
+			let tmpEl = document.getElementById('RetoldRemote-EbookContent');
+			if (tmpEl)
+			{
+				tmpEl.innerHTML = '<div class="retold-remote-ebook-loading">epub.js library not loaded.</div>';
+			}
+			return;
+		}
+
+		// Destroy any previous book instance
+		if (this._activeBook)
+		{
+			try { this._activeBook.destroy(); } catch (e) { /* ignore */ }
+			this._activeBook = null;
+			this._activeRendition = null;
+		}
+
+		let tmpContentEl = document.getElementById('RetoldRemote-EbookContent');
+		if (!tmpContentEl)
+		{
+			return;
+		}
+
+		// Clear loading message
+		tmpContentEl.innerHTML = '';
+
+		// Fetch the EPUB as an ArrayBuffer and open with epub.js
+		fetch(pEpubURL)
+			.then((pResponse) =>
+			{
+				if (!pResponse.ok)
+				{
+					throw new Error('HTTP ' + pResponse.status);
+				}
+				return pResponse.arrayBuffer();
+			})
+			.then((pBuffer) =>
+			{
+				let tmpBook = window.ePub(pBuffer);
+				tmpSelf._activeBook = tmpBook;
+
+				let tmpRendition = tmpBook.renderTo(tmpContentEl,
+				{
+					width: '100%',
+					height: '100%',
+					spread: 'none'
+				});
+
+				tmpSelf._activeRendition = tmpRendition;
+
+				tmpRendition.display();
+
+				// Apply theme for dark backgrounds
+				tmpRendition.themes.default(
+				{
+					'body':
+					{
+						'color': 'var(--retold-text-primary, #d4d4d4)',
+						'background': 'var(--retold-bg-primary, #1e1e1e)',
+						'font-family': 'Georgia, "Times New Roman", serif',
+						'line-height': '1.6',
+						'padding': '20px 40px'
+					},
+					'a':
+					{
+						'color': 'var(--retold-accent, #569cd6)'
+					}
+				});
+
+				// Load table of contents
+				tmpBook.loaded.navigation.then((pNav) =>
+				{
+					tmpSelf._renderEbookTOC(pNav.toc);
+				});
+			})
+			.catch((pError) =>
+			{
+				if (tmpContentEl)
+				{
+					tmpContentEl.innerHTML = '<div class="retold-remote-ebook-loading">Failed to load ebook: '
+						+ tmpSelf._escapeHTML(pError.message) + '</div>';
+				}
+			});
+	}
+
+	/**
+	 * Render the table of contents for the ebook.
+	 *
+	 * @param {Array} pToc - epub.js navigation TOC array
+	 */
+	_renderEbookTOC(pToc)
+	{
+		let tmpTocEl = document.getElementById('RetoldRemote-EbookTOC');
+		if (!tmpTocEl || !pToc)
+		{
+			return;
+		}
+
+		let tmpSelf = this;
+		let tmpHTML = '';
+
+		let tmpBuildItems = function (pItems, pDepth)
+		{
+			for (let i = 0; i < pItems.length; i++)
+			{
+				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) + '" '
+					+ 'onclick="pict.views[\'RetoldRemote-MediaViewer\'].ebookGoToChapter(this.getAttribute(\'data-href\'))">'
+					+ tmpSelf._escapeHTML(tmpItem.label.trim())
+					+ '</button>';
+
+				if (tmpItem.subitems && tmpItem.subitems.length > 0)
+				{
+					tmpBuildItems(tmpItem.subitems, pDepth + 1);
+				}
+			}
+		};
+
+		tmpBuildItems(pToc, 0);
+		tmpTocEl.innerHTML = tmpHTML;
+	}
+
+	/**
+	 * Navigate to a chapter in the ebook by href.
+	 *
+	 * @param {string} pHref - Chapter href from the TOC
+	 */
+	ebookGoToChapter(pHref)
+	{
+		if (this._activeRendition && pHref)
+		{
+			this._activeRendition.display(pHref);
+		}
+	}
+
+	/**
+	 * Go to the previous page in the ebook.
+	 */
+	ebookPrevPage()
+	{
+		if (this._activeRendition)
+		{
+			this._activeRendition.prev();
+		}
+	}
+
+	/**
+	 * Go to the next page in the ebook.
+	 */
+	ebookNextPage()
+	{
+		if (this._activeRendition)
+		{
+			this._activeRendition.next();
+		}
+	}
+
+	/**
+	 * Toggle the table of contents sidebar.
+	 */
+	toggleEbookTOC()
+	{
+		let tmpTocEl = document.getElementById('RetoldRemote-EbookTOC');
+		if (tmpTocEl)
+		{
+			tmpTocEl.classList.toggle('collapsed');
+		}
+	}
+
 	_buildFallbackHTML(pURL, pFileName)
 	{
 		let tmpIconProvider = this.pict.providers['RetoldRemote-Icons'];
@@ -452,10 +994,11 @@ class RetoldRemoteMediaViewerView extends libPictView
 	}
 
 	/**
-	 * Fetch file info and populate the overlay.
+	 * Fetch file info and populate the overlay and video stats bar.
 	 */
 	_loadFileInfo(pFilePath)
 	{
+		let tmpSelf = this;
 		let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
 		if (!tmpProvider)
 		{
@@ -465,46 +1008,102 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpProvider.fetchMediaProbe(pFilePath,
 			(pError, pData) =>
 			{
-				let tmpOverlay = document.getElementById('RetoldRemote-FileInfo-Overlay');
-				if (!tmpOverlay || !pData)
+				if (!pData)
 				{
 					return;
 				}
 
-				let tmpHTML = '';
-
-				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">' + this._formatFileSize(pData.Size) + '</span></div>';
-				}
-				if (pData.Width && pData.Height)
-				{
-					tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Dimensions</span><span class="retold-remote-fileinfo-value">' + pData.Width + ' x ' + pData.Height + '</span></div>';
-				}
-				if (pData.Duration)
-				{
-					let tmpMin = Math.floor(pData.Duration / 60);
-					let tmpSec = Math.floor(pData.Duration % 60);
-					tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Duration</span><span class="retold-remote-fileinfo-value">' + tmpMin + ':' + (tmpSec < 10 ? '0' : '') + tmpSec + '</span></div>';
-				}
-				if (pData.Codec)
-				{
-					tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Codec</span><span class="retold-remote-fileinfo-value">' + pData.Codec + '</span></div>';
-				}
-				if (pData.Format)
-				{
-					tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Format</span><span class="retold-remote-fileinfo-value">' + pData.Format + '</span></div>';
-				}
-				if (pData.Modified)
+				// Populate the info overlay
+				let tmpOverlay = document.getElementById('RetoldRemote-FileInfo-Overlay');
+				if (tmpOverlay)
 				{
-					tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Modified</span><span class="retold-remote-fileinfo-value">' + new Date(pData.Modified).toLocaleString() + '</span></div>';
+					let tmpHTML = '';
+
+					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>';
+					}
+					if (pData.Width && pData.Height)
+					{
+						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Dimensions</span><span class="retold-remote-fileinfo-value">' + pData.Width + ' x ' + pData.Height + '</span></div>';
+					}
+					if (pData.Duration)
+					{
+						let tmpMin = Math.floor(pData.Duration / 60);
+						let tmpSec = Math.floor(pData.Duration % 60);
+						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Duration</span><span class="retold-remote-fileinfo-value">' + tmpMin + ':' + (tmpSec < 10 ? '0' : '') + tmpSec + '</span></div>';
+					}
+					if (pData.Codec)
+					{
+						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Codec</span><span class="retold-remote-fileinfo-value">' + pData.Codec + '</span></div>';
+					}
+					if (pData.Format)
+					{
+						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Format</span><span class="retold-remote-fileinfo-value">' + pData.Format + '</span></div>';
+					}
+					if (pData.Modified)
+					{
+						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Modified</span><span class="retold-remote-fileinfo-value">' + new Date(pData.Modified).toLocaleString() + '</span></div>';
+					}
+					if (pData.Path)
+					{
+						tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Path</span><span class="retold-remote-fileinfo-value">' + pData.Path + '</span></div>';
+					}
+
+					tmpOverlay.innerHTML = tmpHTML;
 				}
-				if (pData.Path)
+
+				// Populate the video stats bar (if viewing a video)
+				let tmpStatsBar = document.getElementById('RetoldRemote-VideoStats');
+				if (tmpStatsBar)
 				{
-					tmpHTML += '<div class="retold-remote-fileinfo-row"><span class="retold-remote-fileinfo-label">Path</span><span class="retold-remote-fileinfo-value">' + pData.Path + '</span></div>';
-				}
+					let tmpStatsHTML = '';
+
+					if (pData.Duration)
+					{
+						let tmpMin = Math.floor(pData.Duration / 60);
+						let tmpSec = Math.floor(pData.Duration % 60);
+						tmpStatsHTML += '<span><span class="retold-remote-video-stat-label">Duration</span> <span class="retold-remote-video-stat-value">' + tmpMin + ':' + (tmpSec < 10 ? '0' : '') + tmpSec + '</span></span>';
+					}
+					if (pData.Width && pData.Height)
+					{
+						tmpStatsHTML += '<span><span class="retold-remote-video-stat-label">Resolution</span> <span class="retold-remote-video-stat-value">' + pData.Width + '×' + pData.Height + '</span></span>';
+					}
+					if (pData.Codec)
+					{
+						tmpStatsHTML += '<span><span class="retold-remote-video-stat-label">Codec</span> <span class="retold-remote-video-stat-value">' + pData.Codec + '</span></span>';
+					}
+					if (pData.Bitrate)
+					{
+						let tmpBitrate = pData.Bitrate;
+						let tmpBitrateStr;
+						if (tmpBitrate >= 1000000)
+						{
+							tmpBitrateStr = (tmpBitrate / 1000000).toFixed(1) + ' Mbps';
+						}
+						else if (tmpBitrate >= 1000)
+						{
+							tmpBitrateStr = Math.round(tmpBitrate / 1000) + ' kbps';
+						}
+						else
+						{
+							tmpBitrateStr = tmpBitrate + ' bps';
+						}
+						tmpStatsHTML += '<span><span class="retold-remote-video-stat-label">Bitrate</span> <span class="retold-remote-video-stat-value">' + tmpBitrateStr + '</span></span>';
+					}
+					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>';
+					}
 
-				tmpOverlay.innerHTML = tmpHTML;
+					// Preserve the Explore and VLC buttons if they exist
+					let tmpExploreBtn = tmpStatsBar.querySelector('.retold-remote-explore-btn');
+					let tmpExploreHTML = tmpExploreBtn ? tmpExploreBtn.outerHTML : '';
+					let tmpVLCBtn = tmpStatsBar.querySelector('.retold-remote-vlc-btn');
+					let tmpVLCHTML = tmpVLCBtn ? tmpVLCBtn.outerHTML : '';
+
+					tmpStatsBar.innerHTML = tmpStatsHTML + tmpExploreHTML + tmpVLCHTML;
+				}
 			});
 	}