retold-remote 0.0.23 → 0.0.26

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

@@ -68,11 +68,11 @@ class RetoldRemoteImageViewerView extends libPictView
 	}
 
 	/**
-	 * Show the explore button for opening the deep-zoom explorer.
+	 * Show the explore button in the header nav bar.
 	 */
 	_showExploreButton()
 	{
-		let tmpBtn = document.getElementById('RetoldRemote-ImageExploreBtn');
+		let tmpBtn = document.getElementById('RetoldRemote-HeaderExploreBtn');
 		if (tmpBtn)
 		{
 			tmpBtn.style.display = '';

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

@@ -24,6 +24,7 @@ const _ViewConfiguration =
 								<button class="content-editor-sidebar-tab active" data-tab="files" onclick="pict.views['ContentEditor-Layout'].switchSidebarTab('files')">Files</button>
 								<button class="content-editor-sidebar-tab" data-tab="favorites" onclick="pict.views['ContentEditor-Layout'].switchSidebarTab('favorites')">Favorites</button>
 								<button class="content-editor-sidebar-tab" data-tab="info" onclick="pict.views['ContentEditor-Layout'].switchSidebarTab('info')">Info</button>
+								<button class="content-editor-sidebar-tab" data-tab="subimages" onclick="pict.views['ContentEditor-Layout'].switchSidebarTab('subimages')">Regions</button>
 								<button class="content-editor-sidebar-tab" data-tab="settings" onclick="pict.views['ContentEditor-Layout'].switchSidebarTab('settings')">Settings</button>
 								<button class="content-editor-sidebar-tab content-editor-sidebar-tab-collections" data-tab="collections" onclick="pict.views['ContentEditor-Layout'].switchSidebarTab('collections')" style="display:none;">Collections</button>
 							</div>
@@ -32,6 +33,7 @@ const _ViewConfiguration =
 								<div id="RetoldRemote-Favorites-Body"></div>
 							</div>
 							<div class="content-editor-sidebar-pane" data-pane="info" id="RetoldRemote-Info-Container" style="display:none"></div>
+							<div class="content-editor-sidebar-pane" data-pane="subimages" id="RetoldRemote-Subimages-Container" style="display:none"></div>
 							<div class="content-editor-sidebar-pane" data-pane="settings" id="RetoldRemote-Settings-Container" style="display:none"></div>
 							<div class="content-editor-sidebar-pane" data-pane="collections" id="RetoldRemote-Collections-MobilePane" style="display:none"></div>
 						</div>
@@ -48,6 +50,7 @@ const _ViewConfiguration =
 						</div>
 					</div>
 				</div>
+				<div class="retold-remote-operation-status" id="RetoldRemote-OperationStatus-Container"></div>
 			`
 		}
 	],
@@ -196,6 +199,16 @@ class RetoldRemoteLayoutView extends libPictView
 			pEl.style.display = (pEl.getAttribute('data-pane') === pTab) ? '' : 'none';
 		});
 
+		// Subimages tab: render the subimages panel
+		if (pTab === 'subimages')
+		{
+			let tmpSubimagesView = this.pict.views['RetoldRemote-SubimagesPanel'];
+			if (tmpSubimagesView)
+			{
+				tmpSubimagesView.render();
+			}
+		}
+
 		// Render settings panel on demand
 		if (pTab === 'settings')
 		{
@@ -256,6 +269,51 @@ class RetoldRemoteLayoutView extends libPictView
 
 	}
 
+	/**
+	 * Notify the layout that the currently-viewed file has changed (or been
+	 * cleared). This re-renders whichever sidebar panel is currently visible
+	 * so stale file-scoped content (Info metadata, Regions list, etc.) gets
+	 * refreshed without the user having to click the tab again.
+	 *
+	 * Call this from every viewer that mutates tmpRemote.CurrentViewerFile,
+	 * and from the gallery clear path. Do NOT call it on intra-file navigation
+	 * (PDF page changes, EPUB chapter changes) — those don't change the file.
+	 *
+	 * @param {string} pFilePath - The new current file path (or '' when clearing)
+	 */
+	notifyCurrentFileChanged(pFilePath)
+	{
+		// Find the currently-active sidebar tab
+		let tmpActiveTab = document.querySelector('.content-editor-sidebar-tab.active');
+		if (!tmpActiveTab)
+		{
+			return;
+		}
+		let tmpTab = tmpActiveTab.getAttribute('data-tab');
+
+		// Re-render whichever panel owns file-scoped state. The panel's own
+		// render() already detects whether the file actually changed (via its
+		// internal _currentPath comparison) and re-fetches only when needed.
+		if (tmpTab === 'subimages')
+		{
+			let tmpSubimagesView = this.pict.views['RetoldRemote-SubimagesPanel'];
+			if (tmpSubimagesView)
+			{
+				tmpSubimagesView.render();
+			}
+		}
+		else if (tmpTab === 'info')
+		{
+			let tmpInfoView = this.pict.views['RetoldRemote-FileInfoPanel'];
+			if (tmpInfoView)
+			{
+				tmpInfoView.render();
+			}
+		}
+		// Other tabs (files, favorites, settings, collections) are not
+		// file-scoped, so there's nothing to refresh on file change.
+	}
+
 	_setupResizeHandle()
 	{
 		let tmpSelf = this;

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

@@ -2,6 +2,7 @@ const libPictView = require('pict-view');
 
 const _MediaViewerEbookViewer = require('./MediaViewer-EbookViewer');
 const _MediaViewerCodeViewer = require('./MediaViewer-CodeViewer');
+const _MediaViewerPdfViewer = require('./MediaViewer-PdfViewer');
 
 const _ViewConfiguration =
 {
@@ -40,6 +41,14 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpRemote.CurrentViewerMediaType = pMediaType;
 		tmpRemote.VideoMenuActive = (pMediaType === 'video');
 
+		// Notify the layout so active sidebar panels (Info, Regions, etc.)
+		// refresh to the new file instead of keeping stale content.
+		let tmpLayout = this.pict.views['ContentEditor-Layout'];
+		if (tmpLayout && typeof tmpLayout.notifyCurrentFileChanged === 'function')
+		{
+			tmpLayout.notifyCurrentFileChanged(pFilePath);
+		}
+
 		// Show viewer, hide gallery
 		let tmpGalleryContainer = document.getElementById('RetoldRemote-Gallery-Container');
 		let tmpViewerContainer = document.getElementById('RetoldRemote-Viewer-Container');
@@ -59,6 +68,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 		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.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(tmpFileName) + '</div>';
+		tmpHTML += '<button class="retold-remote-viewer-nav-btn" id="RetoldRemote-HeaderExploreBtn" onclick="pict.views[\'RetoldRemote-ImageExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" title="Explore image (e)" style="display:none;">&#128269; Explore</button>';
 		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.views[\'RetoldRemote-MediaViewer\'].toggleDistractionFree()" title="Distraction-Free (d)">&#9634;</button>';
@@ -127,7 +137,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 			this._loadCodeViewer(tmpContentURL, pFilePath);
 		}
 
-		// Load ebook viewer for epub/mobi
+		// Load document viewers: ebook for epub/mobi, PDF for pdf, convert-then-PDF for others
 		if (pMediaType === 'document')
 		{
 			let tmpExt = pFilePath.replace(/^.*\./, '').toLowerCase();
@@ -135,7 +145,15 @@ class RetoldRemoteMediaViewerView extends libPictView
 			{
 				this._loadEbookViewer(tmpContentURL, pFilePath);
 			}
-
+			else if (tmpExt === 'pdf')
+			{
+				this._loadPdfViewer(tmpContentURL, pFilePath);
+			}
+			else
+			{
+				// Convertible document types — convert to PDF first, then load PDF viewer
+				this._loadConvertedDocumentViewer(pFilePath);
+			}
 		}
 
 		// Set up swipe navigation for touch devices
@@ -169,6 +187,15 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpRemote.CurrentViewerMediaType = 'image';
 		tmpRemote.VideoMenuActive = false;
 
+		// Notify the layout so active sidebar panels (Info, Regions, etc.)
+		// refresh. This is especially important when switching between
+		// collection items via the direct-image path.
+		let tmpLayout = this.pict.views['ContentEditor-Layout'];
+		if (tmpLayout && typeof tmpLayout.notifyCurrentFileChanged === 'function')
+		{
+			tmpLayout.notifyCurrentFileChanged(pFilePath || '');
+		}
+
 		// Show viewer, hide gallery
 		let tmpGalleryContainer = document.getElementById('RetoldRemote-Gallery-Container');
 		let tmpViewerContainer = document.getElementById('RetoldRemote-Viewer-Container');
@@ -533,19 +560,12 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpImg.onclick = function () { pict.views['RetoldRemote-ImageViewer'].toggleZoom(); };
 		tmpFragment.appendChild(tmpImg);
 
-		// Explore button (always present, initially hidden unless pShowExplore)
-		let tmpBtn = document.createElement('button');
-		tmpBtn.className = 'retold-remote-image-explore-btn';
-		tmpBtn.id = 'RetoldRemote-ImageExploreBtn';
-		tmpBtn.style.display = pShowExplore ? '' : 'none';
-		tmpBtn.title = 'Open in deep-zoom explorer (e)';
-		tmpBtn.innerHTML = '&#128269; Explore';
-		tmpBtn.onclick = function ()
-		{
-			pict.views['RetoldRemote-ImageExplorer'].showExplorer(
-				pict.AppData.RetoldRemote.CurrentViewerFile);
-		};
-		tmpFragment.appendChild(tmpBtn);
+		// Always show the Explore button in the header nav bar for images
+		let tmpHeaderExploreBtn = document.getElementById('RetoldRemote-HeaderExploreBtn');
+		if (tmpHeaderExploreBtn)
+		{
+			tmpHeaderExploreBtn.style.display = '';
+		}
 
 		// Dimension badge for large images
 		if (pShowExplore && pOrigWidth && pOrigHeight)
@@ -568,12 +588,6 @@ class RetoldRemoteMediaViewerView extends libPictView
 			+ 'id="RetoldRemote-ImageViewer-Img" '
 			+ 'onload="pict.views[\'RetoldRemote-ImageViewer\'].initImage()" '
 			+ 'onclick="pict.views[\'RetoldRemote-ImageViewer\'].toggleZoom()">';
-		// Explore button (hidden by default, shown by ImageViewer for large images)
-		tmpHTML += '<button class="retold-remote-image-explore-btn" id="RetoldRemote-ImageExploreBtn" '
-			+ 'style="display:none" '
-			+ 'onclick="pict.views[\'RetoldRemote-ImageExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" '
-			+ 'title="Open in deep-zoom explorer (e)">'
-			+ '&#128269; Explore</button>';
 		return tmpHTML;
 	}
 
@@ -786,9 +800,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 		if (tmpExtension === 'pdf')
 		{
-			return '<iframe src="' + pURL + '" '
-				+ 'style="width: 100%; height: 100%; border: none;">'
-				+ '</iframe>';
+			return this._buildPdfHTML(pURL, pFileName, pFilePath);
 		}
 
 		if (tmpExtension === 'epub' || tmpExtension === 'mobi')
@@ -796,7 +808,15 @@ class RetoldRemoteMediaViewerView extends libPictView
 			return this._buildEbookHTML(pURL, pFileName, pFilePath);
 		}
 
-		// For other document types, show a download link
+		// For convertible document types (doc, docx, rtf, odt, wpd, etc.),
+		// show the PDF viewer shell — conversion happens async in _loadDocumentViewer
+		let tmpConvertibleExts = { 'doc': true, 'docx': true, 'rtf': true, 'odt': true, 'wpd': true, 'wps': true, 'pages': true, 'odp': true, 'ppt': true, 'pptx': true, 'ods': true, 'xls': true, 'xlsx': true };
+		if (tmpConvertibleExts[tmpExtension])
+		{
+			return this._buildPdfHTML(pURL, pFileName, pFilePath);
+		}
+
+		// Unknown 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;';
 		return '<div style="text-align: center; padding: 40px;">'
@@ -813,6 +833,60 @@ class RetoldRemoteMediaViewerView extends libPictView
 	// ebookGoToChapter, ebookPrevPage, ebookNextPage, toggleEbookTOC
 	// are in MediaViewer-EbookViewer.js (mixed in below).
 
+	/**
+	 * Convert a document (doc, docx, rtf, odt, wpd, etc.) to PDF and load in the PDF viewer.
+	 * Shows a converting message in the PDF content area while waiting.
+	 *
+	 * @param {string} pFilePath - Relative file path
+	 */
+	_loadConvertedDocumentViewer(pFilePath)
+	{
+		let tmpSelf = this;
+		let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+		let tmpPathParam = tmpProvider ? tmpProvider._getPathParam(pFilePath) : encodeURIComponent(pFilePath);
+
+		// Show converting message in the PDF content area
+		let tmpContent = document.getElementById('RetoldRemote-PdfContent');
+		if (tmpContent)
+		{
+			tmpContent.innerHTML = '<div style="text-align:center;padding:40px;color:var(--retold-text-dim);">'
+				+ '<div style="font-size:1.5rem;margin-bottom:12px;">&#9881;</div>'
+				+ 'Converting document to PDF\u2026'
+				+ '</div>';
+		}
+
+		fetch('/api/media/doc-convert?path=' + tmpPathParam)
+			.then((pResponse) => pResponse.json())
+			.then((pData) =>
+			{
+				if (!pData || !pData.Success)
+				{
+					throw new Error(pData ? pData.Error : 'Conversion failed.');
+				}
+
+				// Build the PDF URL from the ebook cache (same serving endpoint)
+				let tmpPdfURL = '/api/media/ebook/' + pData.CacheKey + '/' + pData.OutputFilename;
+
+				// Load the PDF viewer with the converted file
+				tmpSelf._loadPdfViewer(tmpPdfURL, pFilePath);
+			})
+			.catch((pError) =>
+			{
+				if (tmpContent)
+				{
+					let tmpFmt = tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'];
+					tmpContent.innerHTML = '<div style="text-align:center;padding:40px;color:var(--retold-text-dim);">'
+						+ '<div style="margin-bottom:12px;color:#e06c75;">Conversion failed</div>'
+						+ '<div style="font-size:0.85rem;">' + tmpFmt.escapeHTML(pError.message) + '</div>'
+						+ '<div style="margin-top:16px;">'
+						+ '<a href="' + (tmpProvider ? tmpProvider.getContentURL(pFilePath) : '/content/' + encodeURIComponent(pFilePath))
+						+ '" target="_blank" style="color:var(--retold-accent);font-size:0.85rem;">Download original file</a>'
+						+ '</div>'
+						+ '</div>';
+				}
+			});
+	}
+
 	_buildFallbackHTML(pURL, pFileName)
 	{
 		let tmpIconProvider = this.pict.providers['RetoldRemote-Icons'];
@@ -942,6 +1016,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 Object.assign(RetoldRemoteMediaViewerView.prototype, _MediaViewerEbookViewer);
 Object.assign(RetoldRemoteMediaViewerView.prototype, _MediaViewerCodeViewer);
+Object.assign(RetoldRemoteMediaViewerView.prototype, _MediaViewerPdfViewer);
 
 RetoldRemoteMediaViewerView.default_configuration = _ViewConfiguration;