mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
Separate asset select panel
This commit is contained in:
@@ -408,6 +408,35 @@ body {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.asset-management {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr 1fr;
|
||||
gap: 16px;
|
||||
margin-top: 14px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.asset-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.asset-column.inspector {
|
||||
position: sticky;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.asset-management {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.asset-column.inspector {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.controls ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -503,6 +532,15 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.asset-inspector {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(148, 163, 184, 0.15);
|
||||
}
|
||||
|
||||
.asset-controls-placeholder {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.selected-asset-banner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@@ -680,6 +718,11 @@ body {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.asset-inspector .selected-asset-actions .icon-button,
|
||||
.asset-inspector .selected-asset-actions .icon-button:disabled {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.asset-meta-badges {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@@ -36,6 +36,12 @@ const audioPitchInput = document.getElementById('asset-audio-pitch');
|
||||
const audioVolumeInput = document.getElementById('asset-audio-volume');
|
||||
const controlsPlaceholder = document.getElementById('asset-controls-placeholder');
|
||||
const fileNameLabel = document.getElementById('asset-file-name');
|
||||
const assetInspector = document.getElementById('asset-inspector');
|
||||
const selectedAssetName = document.getElementById('selected-asset-name');
|
||||
const selectedAssetMeta = document.getElementById('selected-asset-meta');
|
||||
const selectedAssetBadges = document.getElementById('selected-asset-badges');
|
||||
const selectedVisibilityBtn = document.getElementById('selected-asset-visibility');
|
||||
const selectedDeleteBtn = document.getElementById('selected-asset-delete');
|
||||
const audioPlaceholder = 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="320" height="80"><rect width="100%" height="100%" fill="#1f2937" rx="8"/><g fill="#fbbf24" transform="translate(20 20)"><circle cx="15" cy="20" r="6"/><rect x="28" y="5" width="12" height="30" rx="2"/><rect x="45" y="10" width="140" height="5" fill="#fef3c7"/><rect x="45" y="23" width="110" height="5" fill="#fef3c7"/></g><text x="20" y="70" fill="#e5e7eb" font-family="sans-serif" font-size="14">Audio</text></svg>');
|
||||
const aspectLockState = new Map();
|
||||
const commitSizeChange = debounce(() => applyTransformFromInputs(), 180);
|
||||
@@ -59,6 +65,20 @@ if (audioDelayInput) audioDelayInput.addEventListener('input', updateAudioSettin
|
||||
if (audioSpeedInput) audioSpeedInput.addEventListener('input', updateAudioSettingsFromInputs);
|
||||
if (audioPitchInput) audioPitchInput.addEventListener('input', updateAudioSettingsFromInputs);
|
||||
if (audioVolumeInput) audioVolumeInput.addEventListener('input', updateAudioSettingsFromInputs);
|
||||
if (selectedVisibilityBtn) {
|
||||
selectedVisibilityBtn.addEventListener('click', () => {
|
||||
const asset = getSelectedAsset();
|
||||
if (!asset) return;
|
||||
updateVisibility(asset, !asset.hidden);
|
||||
});
|
||||
}
|
||||
if (selectedDeleteBtn) {
|
||||
selectedDeleteBtn.addEventListener('click', () => {
|
||||
const asset = getSelectedAsset();
|
||||
if (!asset) return;
|
||||
deleteAsset(asset);
|
||||
});
|
||||
}
|
||||
function connect() {
|
||||
const socket = new SockJS('/ws');
|
||||
stompClient = Stomp.over(socket);
|
||||
@@ -824,6 +844,9 @@ function renderAssetList() {
|
||||
|
||||
if (!assets.size) {
|
||||
selectedAssetId = null;
|
||||
if (assetInspector) {
|
||||
assetInspector.classList.add('hidden');
|
||||
}
|
||||
const empty = document.createElement('li');
|
||||
empty.textContent = 'No assets yet. Upload to get started.';
|
||||
list.appendChild(empty);
|
||||
@@ -831,6 +854,10 @@ function renderAssetList() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (assetInspector) {
|
||||
assetInspector.classList.remove('hidden');
|
||||
}
|
||||
|
||||
const sortedAssets = getChronologicalAssets();
|
||||
sortedAssets.forEach((asset) => {
|
||||
const li = document.createElement('li');
|
||||
@@ -903,18 +930,10 @@ function renderAssetList() {
|
||||
});
|
||||
|
||||
li.appendChild(row);
|
||||
|
||||
if (asset.id === selectedAssetId && controlsPanel) {
|
||||
controlsPanel.classList.remove('hidden');
|
||||
const detail = document.createElement('div');
|
||||
detail.className = 'asset-detail';
|
||||
detail.appendChild(controlsPanel);
|
||||
li.appendChild(detail);
|
||||
updateSelectedAssetControls(asset);
|
||||
}
|
||||
|
||||
list.appendChild(li);
|
||||
});
|
||||
|
||||
updateSelectedAssetControls();
|
||||
}
|
||||
|
||||
function createBadge(label, extraClass = '') {
|
||||
@@ -957,6 +976,12 @@ function getSelectedAsset() {
|
||||
}
|
||||
|
||||
function updateSelectedAssetControls(asset = getSelectedAsset()) {
|
||||
if (controlsPlaceholder && controlsPanel && controlsPanel.parentElement !== controlsPlaceholder) {
|
||||
controlsPlaceholder.appendChild(controlsPanel);
|
||||
}
|
||||
|
||||
updateSelectedAssetSummary(asset);
|
||||
|
||||
if (!controlsPanel || !asset) {
|
||||
if (controlsPanel) controlsPanel.classList.add('hidden');
|
||||
return;
|
||||
@@ -1001,6 +1026,43 @@ function updateSelectedAssetControls(asset = getSelectedAsset()) {
|
||||
}
|
||||
}
|
||||
|
||||
function updateSelectedAssetSummary(asset) {
|
||||
if (assetInspector) {
|
||||
assetInspector.classList.toggle('hidden', !asset && !assets.size);
|
||||
}
|
||||
|
||||
if (selectedAssetName) {
|
||||
selectedAssetName.textContent = asset ? (asset.name || `Asset ${asset.id.slice(0, 6)}`) : 'Choose an asset';
|
||||
}
|
||||
if (selectedAssetMeta) {
|
||||
selectedAssetMeta.textContent = asset
|
||||
? `${Math.round(asset.width)}x${Math.round(asset.height)} · Layer ${asset.zIndex ?? 1}`
|
||||
: 'Pick an asset in the list to adjust its placement and playback.';
|
||||
}
|
||||
if (selectedAssetBadges) {
|
||||
selectedAssetBadges.innerHTML = '';
|
||||
if (asset) {
|
||||
selectedAssetBadges.appendChild(createBadge(asset.hidden ? 'Hidden' : 'Visible', asset.hidden ? 'danger' : ''));
|
||||
selectedAssetBadges.appendChild(createBadge(getDisplayMediaType(asset)));
|
||||
const aspectLabel = formatAspectRatioLabel(asset);
|
||||
if (aspectLabel) {
|
||||
selectedAssetBadges.appendChild(createBadge(aspectLabel, 'subtle'));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (selectedVisibilityBtn) {
|
||||
selectedVisibilityBtn.disabled = !asset;
|
||||
selectedVisibilityBtn.title = asset ? (asset.hidden ? 'Show asset' : 'Hide asset') : 'Toggle visibility';
|
||||
selectedVisibilityBtn.innerHTML = asset
|
||||
? `<i class="fa-solid ${asset.hidden ? 'fa-eye' : 'fa-eye-slash'}"></i>`
|
||||
: '<i class="fa-solid fa-eye-slash"></i>';
|
||||
}
|
||||
if (selectedDeleteBtn) {
|
||||
selectedDeleteBtn.disabled = !asset;
|
||||
selectedDeleteBtn.title = asset ? 'Delete asset' : 'Delete asset';
|
||||
}
|
||||
}
|
||||
|
||||
function applyTransformFromInputs() {
|
||||
const asset = getSelectedAsset();
|
||||
if (!asset) return;
|
||||
|
||||
@@ -27,102 +27,128 @@
|
||||
<div class="controls-full panel">
|
||||
<h3>Overlay assets</h3>
|
||||
<p>Upload overlay visuals and adjust them inline.</p>
|
||||
<div class="upload-row">
|
||||
<input id="asset-file" class="file-input-field" type="file" accept="image/*,video/*,audio/*" onchange="handleFileSelection(this)" />
|
||||
<label for="asset-file" class="file-input-trigger">
|
||||
<span class="file-input-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
|
||||
<span class="file-input-copy">
|
||||
<strong>Select an image, GIF, video, or audio</strong>
|
||||
<small id="asset-file-name">No file chosen</small>
|
||||
</span>
|
||||
</label>
|
||||
<button onclick="uploadAsset()">Upload</button>
|
||||
</div>
|
||||
<ul id="asset-list" class="asset-list"></ul>
|
||||
<div id="asset-controls-placeholder" class="hidden"></div>
|
||||
<div id="asset-controls" class="hidden asset-settings">
|
||||
<div class="panel-section">
|
||||
<div class="section-header">
|
||||
<h5>Layout & order</h5>
|
||||
<div class="asset-management">
|
||||
<div class="asset-column">
|
||||
<div class="upload-row">
|
||||
<input id="asset-file" class="file-input-field" type="file" accept="image/*,video/*,audio/*" onchange="handleFileSelection(this)" />
|
||||
<label for="asset-file" class="file-input-trigger">
|
||||
<span class="file-input-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
|
||||
<span class="file-input-copy">
|
||||
<strong>Select an image, GIF, video, or audio</strong>
|
||||
<small id="asset-file-name">No file chosen</small>
|
||||
</span>
|
||||
</label>
|
||||
<button onclick="uploadAsset()">Upload</button>
|
||||
</div>
|
||||
<div class="control-grid condensed three-col">
|
||||
<label>
|
||||
Width
|
||||
<input id="asset-width" class="number-input" type="number" min="10" step="5" />
|
||||
</label>
|
||||
<label>
|
||||
Height
|
||||
<input id="asset-height" class="number-input" type="number" min="10" step="5" />
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input id="maintain-aspect" type="checkbox" checked />
|
||||
Maintain aspect
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
<label>
|
||||
Layer (Z)
|
||||
<div class="badge-row stacked">
|
||||
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
||||
<ul id="asset-list" class="asset-list"></ul>
|
||||
</div>
|
||||
<div class="asset-column inspector">
|
||||
<div id="asset-inspector" class="asset-inspector panel-section hidden">
|
||||
<div class="selected-asset-banner">
|
||||
<div class="selected-asset-main">
|
||||
<div class="title-row">
|
||||
<strong id="selected-asset-name">Choose an asset</strong>
|
||||
</div>
|
||||
<p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
|
||||
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-actions filled compact">
|
||||
<button type="button" onclick="sendToBack()" class="secondary" title="Send to back"><i class="fa-solid fa-angles-down"></i></button>
|
||||
<button type="button" onclick="bringBackward()" class="secondary" title="Move backward"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
<button type="button" onclick="bringForward()" class="secondary" title="Move forward"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button type="button" onclick="bringToFront()" class="secondary" title="Bring to front"><i class="fa-solid fa-angles-up"></i></button>
|
||||
<button type="button" onclick="recenterSelectedAsset()" class="secondary" title="Center on canvas"><i class="fa-solid fa-bullseye"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(-5)" class="secondary" title="Rotate left"><i class="fa-solid fa-rotate-left"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(5)" class="secondary" title="Rotate right"><i class="fa-solid fa-rotate-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selected-asset-actions">
|
||||
<button type="button" class="ghost icon-button" id="selected-asset-visibility" title="Toggle visibility">
|
||||
<i class="fa-solid fa-eye-slash"></i><span class="sr-only">Toggle visibility</span>
|
||||
</button>
|
||||
<button type="button" class="ghost danger icon-button" id="selected-asset-delete" title="Delete asset">
|
||||
<i class="fa-solid fa-trash"></i><span class="sr-only">Delete asset</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
|
||||
<div id="asset-controls" class="hidden asset-settings">
|
||||
<div class="panel-section">
|
||||
<div class="section-header">
|
||||
<h5>Layout & order</h5>
|
||||
</div>
|
||||
<div class="control-grid condensed three-col">
|
||||
<label>
|
||||
Width
|
||||
<input id="asset-width" class="number-input" type="number" min="10" step="5" />
|
||||
</label>
|
||||
<label>
|
||||
Height
|
||||
<input id="asset-height" class="number-input" type="number" min="10" step="5" />
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input id="maintain-aspect" type="checkbox" checked />
|
||||
Maintain aspect
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
<label>
|
||||
Layer (Z)
|
||||
<div class="badge-row stacked">
|
||||
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-actions filled compact">
|
||||
<button type="button" onclick="sendToBack()" class="secondary" title="Send to back"><i class="fa-solid fa-angles-down"></i></button>
|
||||
<button type="button" onclick="bringBackward()" class="secondary" title="Move backward"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
<button type="button" onclick="bringForward()" class="secondary" title="Move forward"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button type="button" onclick="bringToFront()" class="secondary" title="Bring to front"><i class="fa-solid fa-angles-up"></i></button>
|
||||
<button type="button" onclick="recenterSelectedAsset()" class="secondary" title="Center on canvas"><i class="fa-solid fa-bullseye"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(-5)" class="secondary" title="Rotate left"><i class="fa-solid fa-rotate-left"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(5)" class="secondary" title="Rotate right"><i class="fa-solid fa-rotate-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section" id="playback-section">
|
||||
<div class="section-header">
|
||||
<h5>Playback</h5>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
<label>
|
||||
Animation speed
|
||||
<input id="asset-speed" class="range-input" type="range" min="0" max="1000" step="10" value="100" />
|
||||
</label>
|
||||
<div class="range-meta"><span>0%</span><span>1000%</span></div>
|
||||
<label class="checkbox-inline">
|
||||
<input id="asset-muted" type="checkbox" />
|
||||
Mute
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-section" id="playback-section">
|
||||
<div class="section-header">
|
||||
<h5>Playback</h5>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
<label>
|
||||
Animation speed
|
||||
<input id="asset-speed" class="range-input" type="range" min="0" max="1000" step="10" value="100" />
|
||||
</label>
|
||||
<div class="range-meta"><span>0%</span><span>1000%</span></div>
|
||||
<label class="checkbox-inline">
|
||||
<input id="asset-muted" type="checkbox" />
|
||||
Mute
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section hidden" id="audio-section">
|
||||
<div class="section-header">
|
||||
<h5>Audio</h5>
|
||||
</div>
|
||||
<div class="control-grid condensed three-col">
|
||||
<label class="checkbox-inline">
|
||||
<input id="asset-audio-loop" type="checkbox" />
|
||||
Loop
|
||||
</label>
|
||||
<label>
|
||||
Delay (ms)
|
||||
<input id="asset-audio-delay" class="number-input" type="number" min="0" step="100" />
|
||||
</label>
|
||||
<label>
|
||||
Pitch (%)
|
||||
<input id="asset-audio-pitch" class="range-input" type="range" min="50" max="200" step="5" value="100" />
|
||||
</label>
|
||||
<label>
|
||||
Volume (%)
|
||||
<input id="asset-audio-volume" class="range-input" type="range" min="0" max="100" step="1" value="100" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
<label>
|
||||
Playback speed
|
||||
<input id="asset-audio-speed" class="range-input" type="range" min="25" max="400" step="5" value="100" />
|
||||
</label>
|
||||
<div class="range-meta"><span>0.25x</span><span>4x</span></div>
|
||||
<div class="panel-section hidden" id="audio-section">
|
||||
<div class="section-header">
|
||||
<h5>Audio</h5>
|
||||
</div>
|
||||
<div class="control-grid condensed three-col">
|
||||
<label class="checkbox-inline">
|
||||
<input id="asset-audio-loop" type="checkbox" />
|
||||
Loop
|
||||
</label>
|
||||
<label>
|
||||
Delay (ms)
|
||||
<input id="asset-audio-delay" class="number-input" type="number" min="0" step="100" />
|
||||
</label>
|
||||
<label>
|
||||
Pitch (%)
|
||||
<input id="asset-audio-pitch" class="range-input" type="range" min="50" max="200" step="5" value="100" />
|
||||
</label>
|
||||
<label>
|
||||
Volume (%)
|
||||
<input id="asset-audio-volume" class="range-input" type="range" min="0" max="100" step="1" value="100" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
<label>
|
||||
Playback speed
|
||||
<input id="asset-audio-speed" class="range-input" type="range" min="25" max="400" step="5" value="100" />
|
||||
</label>
|
||||
<div class="range-meta"><span>0.25x</span><span>4x</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user