retold-remote 0.0.1

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

@@ -0,0 +1,318 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "RetoldRemote-SettingsPanel",
+	DefaultRenderable: "RetoldRemote-SettingsPanel",
+	DefaultDestinationAddress: "#RetoldRemote-Settings-Container",
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.retold-remote-settings
+		{
+			padding: 12px;
+		}
+		.retold-remote-settings-section
+		{
+			margin-bottom: 16px;
+		}
+		.retold-remote-settings-section-title
+		{
+			font-size: 0.7rem;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.5px;
+			color: var(--retold-text-dim);
+			margin-bottom: 8px;
+		}
+		.retold-remote-settings-row
+		{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 4px 0;
+		}
+		.retold-remote-settings-label
+		{
+			font-size: 0.78rem;
+			color: var(--retold-text-secondary);
+		}
+		.retold-remote-settings-select
+		{
+			padding: 3px 8px;
+			border: 1px solid var(--retold-border);
+			border-radius: 3px;
+			background: var(--retold-bg-tertiary);
+			color: var(--retold-text-secondary);
+			font-size: 0.75rem;
+			font-family: inherit;
+		}
+		.retold-remote-settings-checkbox
+		{
+			accent-color: var(--retold-accent);
+		}
+		.retold-remote-settings-capabilities
+		{
+			margin-top: 12px;
+			padding: 8px;
+			background: var(--retold-bg-secondary);
+			border-radius: 4px;
+			font-size: 0.72rem;
+		}
+		.retold-remote-settings-cap-row
+		{
+			display: flex;
+			justify-content: space-between;
+			padding: 2px 0;
+		}
+		.retold-remote-settings-cap-label
+		{
+			color: var(--retold-text-dim);
+		}
+		.retold-remote-settings-cap-yes
+		{
+			color: var(--retold-accent);
+		}
+		.retold-remote-settings-cap-no
+		{
+			color: var(--retold-danger-muted);
+		}
+	`
+};
+
+class RetoldRemoteSettingsPanelView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		super.onAfterRender();
+		this._renderSettingsContent();
+	}
+
+	_renderSettingsContent()
+	{
+		let tmpContainer = document.getElementById('RetoldRemote-Settings-Container');
+		if (!tmpContainer)
+		{
+			return;
+		}
+
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpCapabilities = tmpRemote.ServerCapabilities || {};
+
+		let tmpHTML = '<div class="retold-remote-settings">';
+
+		// Appearance section (theme dropdown)
+		tmpHTML += '<div class="retold-remote-settings-section">';
+		tmpHTML += '<div class="retold-remote-settings-section-title">Appearance</div>';
+
+		tmpHTML += '<div class="retold-remote-settings-row">';
+		tmpHTML += '<span class="retold-remote-settings-label">Theme</span>';
+		tmpHTML += '<select class="retold-remote-settings-select" onchange="pict.views[\'RetoldRemote-SettingsPanel\'].changeTheme(this.value)">';
+
+		let tmpThemeProvider = this.pict.providers['RetoldRemote-Theme'];
+		if (tmpThemeProvider)
+		{
+			let tmpThemes = tmpThemeProvider.getThemeList();
+			let tmpCurrentTheme = tmpThemeProvider.getCurrentTheme();
+			let tmpCurrentCategory = '';
+
+			for (let i = 0; i < tmpThemes.length; i++)
+			{
+				let tmpTheme = tmpThemes[i];
+				if (tmpTheme.category !== tmpCurrentCategory)
+				{
+					if (tmpCurrentCategory)
+					{
+						tmpHTML += '</optgroup>';
+					}
+					tmpHTML += '<optgroup label="' + tmpTheme.category + '">';
+					tmpCurrentCategory = tmpTheme.category;
+				}
+				tmpHTML += '<option value="' + tmpTheme.key + '"'
+					+ (tmpTheme.key === tmpCurrentTheme ? ' selected' : '')
+					+ '>' + tmpTheme.name + '</option>';
+			}
+			if (tmpCurrentCategory)
+			{
+				tmpHTML += '</optgroup>';
+			}
+		}
+
+		tmpHTML += '</select>';
+		tmpHTML += '</div>';
+		tmpHTML += '</div>'; // end appearance section
+
+		// Gallery section
+		tmpHTML += '<div class="retold-remote-settings-section">';
+		tmpHTML += '<div class="retold-remote-settings-section-title">Gallery</div>';
+
+		// Thumbnail size
+		tmpHTML += '<div class="retold-remote-settings-row">';
+		tmpHTML += '<span class="retold-remote-settings-label">Thumbnail size</span>';
+		tmpHTML += '<select class="retold-remote-settings-select" onchange="pict.views[\'RetoldRemote-SettingsPanel\'].changeSetting(\'ThumbnailSize\', this.value)">';
+		tmpHTML += '<option value="small"' + (tmpRemote.ThumbnailSize === 'small' ? ' selected' : '') + '>Small</option>';
+		tmpHTML += '<option value="medium"' + (tmpRemote.ThumbnailSize === 'medium' ? ' selected' : '') + '>Medium</option>';
+		tmpHTML += '<option value="large"' + (tmpRemote.ThumbnailSize === 'large' ? ' selected' : '') + '>Large</option>';
+		tmpHTML += '</select>';
+		tmpHTML += '</div>';
+
+		// Default view mode
+		tmpHTML += '<div class="retold-remote-settings-row">';
+		tmpHTML += '<span class="retold-remote-settings-label">Default view</span>';
+		tmpHTML += '<select class="retold-remote-settings-select" onchange="pict.views[\'RetoldRemote-SettingsPanel\'].changeSetting(\'ViewMode\', this.value)">';
+		tmpHTML += '<option value="gallery"' + (tmpRemote.ViewMode === 'gallery' ? ' selected' : '') + '>Gallery</option>';
+		tmpHTML += '<option value="list"' + (tmpRemote.ViewMode === 'list' ? ' selected' : '') + '>List</option>';
+		tmpHTML += '</select>';
+		tmpHTML += '</div>';
+
+		// Show hidden files
+		tmpHTML += '<div class="retold-remote-settings-row">';
+		tmpHTML += '<span class="retold-remote-settings-label">Show hidden files</span>';
+		tmpHTML += '<input type="checkbox" class="retold-remote-settings-checkbox"'
+			+ (tmpRemote.ShowHiddenFiles ? ' checked' : '')
+			+ ' onchange="pict.views[\'RetoldRemote-SettingsPanel\'].toggleHiddenFiles(this.checked)">';
+		tmpHTML += '</div>';
+
+		// Navigation bar in distraction-free
+		tmpHTML += '<div class="retold-remote-settings-row">';
+		tmpHTML += '<span class="retold-remote-settings-label">Nav bar in distraction-free</span>';
+		tmpHTML += '<input type="checkbox" class="retold-remote-settings-checkbox"'
+			+ (tmpRemote.DistractionFreeShowNav ? ' checked' : '')
+			+ ' onchange="pict.views[\'RetoldRemote-SettingsPanel\'].toggleDistractionFreeNav(this.checked)">';
+		tmpHTML += '</div>';
+
+		tmpHTML += '</div>'; // end gallery section
+
+		// Server capabilities
+		tmpHTML += '<div class="retold-remote-settings-section">';
+		tmpHTML += '<div class="retold-remote-settings-section-title">Server Capabilities</div>';
+		tmpHTML += '<div class="retold-remote-settings-capabilities">';
+
+		let tmpTools = [
+			{ key: 'sharp', label: 'Sharp (image thumbnails)' },
+			{ key: 'imagemagick', label: 'ImageMagick (image fallback)' },
+			{ key: 'ffmpeg', label: 'ffmpeg (video thumbnails)' },
+			{ key: 'ffprobe', label: 'ffprobe (media metadata)' }
+		];
+
+		for (let i = 0; i < tmpTools.length; i++)
+		{
+			let tmpTool = tmpTools[i];
+			let tmpAvailable = tmpCapabilities[tmpTool.key];
+			tmpHTML += '<div class="retold-remote-settings-cap-row">';
+			tmpHTML += '<span class="retold-remote-settings-cap-label">' + tmpTool.label + '</span>';
+			tmpHTML += '<span class="' + (tmpAvailable ? 'retold-remote-settings-cap-yes' : 'retold-remote-settings-cap-no') + '">'
+				+ (tmpAvailable ? 'Available' : 'Not found') + '</span>';
+			tmpHTML += '</div>';
+		}
+
+		// Hashed filenames status
+		tmpHTML += '<div class="retold-remote-settings-cap-row" style="margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--retold-border);">';
+		tmpHTML += '<span class="retold-remote-settings-cap-label">Hashed filenames</span>';
+		tmpHTML += '<span class="' + (tmpRemote.HashedFilenames ? 'retold-remote-settings-cap-yes' : 'retold-remote-settings-cap-no') + '">'
+			+ (tmpRemote.HashedFilenames ? 'Enabled' : 'Disabled') + '</span>';
+		tmpHTML += '</div>';
+
+		tmpHTML += '</div>';
+		tmpHTML += '</div>'; // end capabilities section
+
+		// Keyboard shortcuts
+		tmpHTML += '<div class="retold-remote-settings-section">';
+		tmpHTML += '<div class="retold-remote-settings-section-title">Keyboard Shortcuts</div>';
+
+		let tmpShortcuts = [
+			{ key: 'Arrow keys', desc: 'Navigate gallery' },
+			{ key: 'Enter', desc: 'Open item' },
+			{ key: 'Escape', desc: 'Back / close' },
+			{ key: 'j / k', desc: 'Next / prev in viewer' },
+			{ key: 'f', desc: 'Fullscreen' },
+			{ key: 'i', desc: 'File info' },
+			{ key: 'Space', desc: 'Play / pause' },
+			{ key: '+ / -', desc: 'Zoom in / out' },
+			{ key: '0', desc: 'Reset zoom' },
+			{ key: 'g', desc: 'Toggle grid / list' },
+			{ key: '/', desc: 'Focus search' }
+		];
+
+		for (let i = 0; i < tmpShortcuts.length; i++)
+		{
+			tmpHTML += '<div class="retold-remote-settings-cap-row">';
+			tmpHTML += '<span class="retold-remote-settings-cap-label">' + tmpShortcuts[i].desc + '</span>';
+			tmpHTML += '<span style="color: var(--retold-accent); font-family: var(--retold-font-mono, monospace);">' + tmpShortcuts[i].key + '</span>';
+			tmpHTML += '</div>';
+		}
+
+		tmpHTML += '</div>'; // end shortcuts section
+
+		tmpHTML += '</div>'; // end settings
+
+		tmpContainer.innerHTML = tmpHTML;
+	}
+
+	changeTheme(pThemeKey)
+	{
+		let tmpThemeProvider = this.pict.providers['RetoldRemote-Theme'];
+		if (tmpThemeProvider)
+		{
+			tmpThemeProvider.applyTheme(pThemeKey);
+			this.pict.PictApplication.saveSettings();
+
+			// Re-render settings to update dropdown selection
+			this._renderSettingsContent();
+		}
+	}
+
+	changeSetting(pKey, pValue)
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		tmpRemote[pKey] = pValue;
+		this.pict.PictApplication.saveSettings();
+
+		// Re-render gallery if visible
+		if (tmpRemote.ActiveMode === 'gallery')
+		{
+			let tmpGalleryView = this.pict.views['RetoldRemote-Gallery'];
+			if (tmpGalleryView)
+			{
+				tmpGalleryView.renderGallery();
+			}
+		}
+	}
+
+	toggleHiddenFiles(pChecked)
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		tmpRemote.ShowHiddenFiles = pChecked;
+		this.pict.PictApplication.saveSettings();
+		this.pict.PictApplication.syncHiddenFilesSetting(() =>
+		{
+			this.pict.PictApplication.loadFileList();
+		});
+	}
+
+	toggleDistractionFreeNav(pChecked)
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		tmpRemote.DistractionFreeShowNav = pChecked;
+		this.pict.PictApplication.saveSettings();
+
+		// If currently in distraction-free mode, apply immediately
+		if (tmpRemote._distractionFreeMode)
+		{
+			let tmpViewerHeader = document.querySelector('.retold-remote-viewer-header');
+			if (tmpViewerHeader)
+			{
+				tmpViewerHeader.style.display = pChecked ? '' : 'none';
+			}
+		}
+	}
+}
+
+RetoldRemoteSettingsPanelView.default_configuration = _ViewConfiguration;
+
+module.exports = RetoldRemoteSettingsPanelView;

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

@@ -0,0 +1,206 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "ContentEditor-TopBar",
+
+	DefaultRenderable: "RetoldRemote-TopBar",
+	DefaultDestinationAddress: "#ContentEditor-TopBar-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.retold-remote-topbar
+		{
+			display: flex;
+			align-items: center;
+			height: 40px;
+			padding: 0 16px;
+			background: var(--retold-bg-secondary);
+			border-bottom: 1px solid var(--retold-border);
+			gap: 16px;
+		}
+		.retold-remote-topbar-brand
+		{
+			font-size: 0.85rem;
+			font-weight: 700;
+			color: var(--retold-accent);
+			flex-shrink: 0;
+		}
+		.retold-remote-topbar-location
+		{
+			flex: 1;
+			font-size: 0.82rem;
+			color: var(--retold-text-muted);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			text-align: center;
+		}
+		.retold-remote-topbar-location-crumb
+		{
+			color: var(--retold-accent);
+			cursor: pointer;
+			text-decoration: none;
+		}
+		.retold-remote-topbar-location-crumb:hover
+		{
+			text-decoration: underline;
+		}
+		.retold-remote-topbar-sep
+		{
+			color: var(--retold-text-placeholder);
+			margin: 0 3px;
+		}
+		.retold-remote-topbar-info
+		{
+			flex-shrink: 0;
+			font-size: 0.75rem;
+			color: var(--retold-text-dim);
+		}
+		.retold-remote-topbar-actions
+		{
+			flex-shrink: 0;
+			display: flex;
+			gap: 8px;
+		}
+		.retold-remote-topbar-btn
+		{
+			padding: 4px 10px;
+			border: 1px solid var(--retold-border);
+			border-radius: 3px;
+			background: transparent;
+			color: var(--retold-text-muted);
+			font-size: 0.75rem;
+			cursor: pointer;
+			transition: color 0.15s, border-color 0.15s;
+			font-family: inherit;
+		}
+		.retold-remote-topbar-btn:hover
+		{
+			color: var(--retold-text-primary);
+			border-color: var(--retold-accent);
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "RetoldRemote-TopBar",
+			Template: /*html*/`
+				<div class="retold-remote-topbar">
+					<div class="retold-remote-topbar-brand">Retold Remote</div>
+					<div class="retold-remote-topbar-location" id="RetoldRemote-TopBar-Location"></div>
+					<div class="retold-remote-topbar-info" id="RetoldRemote-TopBar-Info"></div>
+					<div class="retold-remote-topbar-actions">
+						<button class="retold-remote-topbar-btn" onclick="pict.views['ContentEditor-Layout'].toggleSidebar()" title="Toggle Sidebar">&#9776;</button>
+					</div>
+				</div>
+			`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "RetoldRemote-TopBar",
+			TemplateHash: "RetoldRemote-TopBar",
+			DestinationAddress: "#ContentEditor-TopBar-Container"
+		}
+	]
+};
+
+class RetoldRemoteTopBarView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		super.onAfterRender();
+		this.updateLocation();
+		this.updateInfo();
+	}
+
+	/**
+	 * Update the breadcrumb location display.
+	 */
+	updateLocation()
+	{
+		let tmpLocationEl = document.getElementById('RetoldRemote-TopBar-Location');
+		if (!tmpLocationEl)
+		{
+			return;
+		}
+
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpCurrentLocation = (this.pict.AppData.PictFileBrowser && this.pict.AppData.PictFileBrowser.CurrentLocation) || '';
+
+		if (!tmpCurrentLocation)
+		{
+			tmpLocationEl.innerHTML = '<span class="retold-remote-topbar-location-crumb" onclick="pict.PictApplication.loadFileList(\'\')">/</span>';
+			return;
+		}
+
+		let tmpParts = tmpCurrentLocation.split('/').filter((p) => p);
+		let tmpHTML = '<span class="retold-remote-topbar-location-crumb" onclick="pict.PictApplication.loadFileList(\'\')">/</span>';
+
+		for (let i = 0; i < tmpParts.length; i++)
+		{
+			let tmpPath = tmpParts.slice(0, i + 1).join('/');
+			tmpHTML += '<span class="retold-remote-topbar-sep">/</span>';
+			tmpHTML += '<span class="retold-remote-topbar-location-crumb" onclick="pict.PictApplication.loadFileList(\'' + tmpPath + '\')">' + tmpParts[i] + '</span>';
+		}
+
+		tmpLocationEl.innerHTML = tmpHTML;
+	}
+
+	/**
+	 * Update the info display with folder summary.
+	 */
+	updateInfo()
+	{
+		let tmpInfoEl = document.getElementById('RetoldRemote-TopBar-Info');
+		if (!tmpInfoEl)
+		{
+			return;
+		}
+
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpSummary = tmpRemote.FolderSummary;
+
+		if (tmpRemote.ActiveMode === 'viewer')
+		{
+			let tmpItems = tmpRemote.GalleryItems || [];
+			let tmpIndex = tmpRemote.GalleryCursorIndex || 0;
+			let tmpItem = tmpItems[tmpIndex];
+			if (tmpItem)
+			{
+				tmpInfoEl.textContent = tmpItem.Name;
+			}
+			return;
+		}
+
+		if (!tmpSummary)
+		{
+			tmpInfoEl.textContent = '';
+			return;
+		}
+
+		let tmpParts = [];
+		if (tmpSummary.Folders > 0) tmpParts.push(tmpSummary.Folders + ' folders');
+		if (tmpSummary.Images > 0) tmpParts.push(tmpSummary.Images + ' images');
+		if (tmpSummary.Videos > 0) tmpParts.push(tmpSummary.Videos + ' videos');
+		if (tmpSummary.Audio > 0) tmpParts.push(tmpSummary.Audio + ' audio');
+		if (tmpSummary.Documents > 0) tmpParts.push(tmpSummary.Documents + ' docs');
+		if (tmpSummary.Other > 0) tmpParts.push(tmpSummary.Other + ' other');
+
+		tmpInfoEl.textContent = tmpParts.join(' \u00b7 ');
+	}
+}
+
+RetoldRemoteTopBarView.default_configuration = _ViewConfiguration;
+
+module.exports = RetoldRemoteTopBarView;