From 02431b3c7f39498dfe6a022f374f9b7686354c5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= Date: Tue, 9 Dec 2025 17:26:37 +0100 Subject: [PATCH] Remove redundant info --- src/main/resources/static/css/styles.css | 16 +++++ src/main/resources/static/js/admin.js | 86 +++++++++++++----------- src/main/resources/templates/admin.html | 36 ++-------- 3 files changed, 69 insertions(+), 69 deletions(-) diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css index 21668eb..982db86 100644 --- a/src/main/resources/static/css/styles.css +++ b/src/main/resources/static/css/styles.css @@ -399,6 +399,13 @@ body { background: #0b1220; } +.assets-panel { + margin-top: 16px; + background: #0b1220; + border-top: 1px solid #1f2937; + padding: 18px; +} + .controls ul { list-style: none; padding: 0; @@ -588,6 +595,11 @@ body { box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.6); } +.asset-item.is-hidden { + opacity: 0.72; + border-style: dashed; +} + .asset-row { display: flex; align-items: center; @@ -614,6 +626,10 @@ body { gap: 8px; } +.asset-meta-badges { + margin-top: 4px; +} + .asset-detail { margin-top: 4px; } diff --git a/src/main/resources/static/js/admin.js b/src/main/resources/static/js/admin.js index ceb278d..adf8d0c 100644 --- a/src/main/resources/static/js/admin.js +++ b/src/main/resources/static/js/admin.js @@ -25,35 +25,26 @@ const heightInput = document.getElementById('asset-height'); const aspectLockInput = document.getElementById('maintain-aspect'); const speedInput = document.getElementById('asset-speed'); const muteInput = document.getElementById('asset-muted'); -const selectedAssetName = document.getElementById('selected-asset-name'); const selectedZLabel = document.getElementById('asset-z-level'); -const selectedTypeLabel = document.getElementById('asset-type-label'); -const selectedVisibilityBadge = document.getElementById('selected-asset-visibility'); -const selectedToggleBtn = document.getElementById('selected-asset-toggle'); -const selectedDeleteBtn = document.getElementById('selected-asset-delete'); const playbackSection = document.getElementById('playback-section'); const controlsPlaceholder = document.getElementById('asset-controls-placeholder'); const aspectLockState = new Map(); +const commitSizeChange = debounce(() => applyTransformFromInputs(), 180); + +function debounce(fn, wait = 150) { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => fn(...args), wait); + }; +} if (widthInput) widthInput.addEventListener('input', () => handleSizeInputChange('width')); +if (widthInput) widthInput.addEventListener('change', () => commitSizeChange()); if (heightInput) heightInput.addEventListener('input', () => handleSizeInputChange('height')); +if (heightInput) heightInput.addEventListener('change', () => commitSizeChange()); if (speedInput) speedInput.addEventListener('input', updatePlaybackFromInputs); if (muteInput) muteInput.addEventListener('change', updateMuteFromInput); -if (selectedToggleBtn) selectedToggleBtn.addEventListener('click', (event) => { - event.stopPropagation(); - const asset = getSelectedAsset(); - if (asset) { - updateVisibility(asset, !asset.hidden); - } -}); -if (selectedDeleteBtn) selectedDeleteBtn.addEventListener('click', (event) => { - event.stopPropagation(); - const asset = getSelectedAsset(); - if (asset) { - deleteAsset(asset); - } -}); - function connect() { const socket = new SockJS('/ws'); stompClient = Stomp.over(socket); @@ -642,9 +633,7 @@ function renderAssetList() { if (asset.id === selectedAssetId) { li.classList.add('selected'); } - if (asset.hidden) { - li.classList.add('hidden'); - } + li.classList.toggle('is-hidden', !!asset.hidden); const row = document.createElement('div'); row.className = 'asset-row'; @@ -656,10 +645,21 @@ function renderAssetList() { const name = document.createElement('strong'); name.textContent = asset.name || `Asset ${asset.id.slice(0, 6)}`; const details = document.createElement('small'); - details.textContent = `Z ${asset.zIndex ?? 1} · ${Math.round(asset.width)}x${Math.round(asset.height)} · ${getDisplayMediaType(asset)} · ${asset.hidden ? 'Hidden' : 'Visible'}`; + details.textContent = `${Math.round(asset.width)}x${Math.round(asset.height)}`; meta.appendChild(name); meta.appendChild(details); + const badges = document.createElement('div'); + badges.className = 'badge-row asset-meta-badges'; + badges.appendChild(createBadge(asset.hidden ? 'Hidden' : 'Visible', asset.hidden ? 'danger' : '')); + badges.appendChild(createBadge(getDisplayMediaType(asset))); + badges.appendChild(createBadge(`Z ${asset.zIndex ?? 1}`)); + const aspectLabel = formatAspectRatioLabel(asset); + if (aspectLabel) { + badges.appendChild(createBadge(aspectLabel, 'subtle')); + } + meta.appendChild(badges); + const actions = document.createElement('div'); actions.className = 'actions'; @@ -712,6 +712,13 @@ function renderAssetList() { }); } +function createBadge(label, extraClass = '') { + const badge = document.createElement('span'); + badge.className = `badge ${extraClass}`.trim(); + badge.textContent = label; + return badge; +} + function createPreviewElement(asset) { if (isVideoAsset(asset)) { const video = document.createElement('video'); @@ -744,24 +751,9 @@ function updateSelectedAssetControls(asset = getSelectedAsset()) { controlsPanel.classList.remove('hidden'); lastSizeInputChanged = null; - selectedAssetName.textContent = asset.name || `Asset ${asset.id.slice(0, 6)}`; if (selectedZLabel) { selectedZLabel.textContent = asset.zIndex ?? 1; } - if (selectedTypeLabel) { - selectedTypeLabel.textContent = getDisplayMediaType(asset); - } - if (selectedVisibilityBadge) { - selectedVisibilityBadge.textContent = asset.hidden ? 'Hidden' : 'Visible'; - selectedVisibilityBadge.classList.toggle('danger', !!asset.hidden); - } - if (selectedToggleBtn) { - const icon = selectedToggleBtn.querySelector('i'); - if (icon) { - icon.className = `fa-solid ${asset.hidden ? 'fa-eye' : 'fa-eye-slash'}`; - } - selectedToggleBtn.title = asset.hidden ? 'Show asset' : 'Hide asset'; - } if (widthInput) widthInput.value = Math.round(asset.width); if (heightInput) heightInput.value = Math.round(asset.height); @@ -925,6 +917,15 @@ function getAssetAspectRatio(asset) { return null; } +function formatAspectRatioLabel(asset) { + const ratio = getAssetAspectRatio(asset); + if (!ratio) { + return ''; + } + const normalized = ratio >= 1 ? `${ratio.toFixed(2)}:1` : `1:${(1 / ratio).toFixed(2)}`; + return `AR ${normalized}`; +} + function setAspectLock(assetId, locked) { aspectLockState.set(assetId, locked); } @@ -936,7 +937,11 @@ function isAspectLocked(assetId) { function handleSizeInputChange(type) { lastSizeInputChanged = type; const asset = getSelectedAsset(); - if (!asset || !isAspectLocked(asset.id)) { + if (!asset) { + return; + } + if (!isAspectLocked(asset.id)) { + commitSizeChange(); return; } const ratio = getAssetAspectRatio(asset); @@ -954,6 +959,7 @@ function handleSizeInputChange(type) { widthInput.value = Math.round(height * ratio); } } + commitSizeChange(); } function updateVisibility(asset, hidden) { diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html index 65346be..84af20d 100644 --- a/src/main/resources/templates/admin.html +++ b/src/main/resources/templates/admin.html @@ -19,7 +19,11 @@ -
+
+ + +
+

Overlay assets

Upload overlay visuals and adjust them inline.

@@ -28,24 +32,6 @@
    - -
    - - - -
    -
    - - -