imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 03:39:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove redundant info

Browse Source
This commit is contained in:
Andreas Krühlmann
2025-12-09 17:26:37 +01:00
parent 0aac788eda
commit 02431b3c7f
3 changed files with 69 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/resources/static/css/styles.css
View File

@@ -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;
}

86
src/main/resources/static/js/admin.js
View File

@@ -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) {

36
src/main/resources/templates/admin.html
View File

@@ -19,7 +19,11 @@
</form>
</div>
</header>
<section class="controls">
<section class="overlay" id="admin-overlay">
<iframe th:src="${'https://player.twitch.tv/?channel=' + broadcaster + '&parent=localhost'}" allowfullscreen></iframe>
<canvas id="admin-canvas"></canvas>
</section>
<section class="controls assets-panel">
<div>
<h3>Overlay assets</h3>
<p>Upload overlay visuals and adjust them inline.</p>
@@ -28,24 +32,6 @@
<ul id="asset-list" class="asset-list"></ul>
<div id="asset-controls-placeholder" class="hidden"></div>
<div id="asset-controls" class="panel hidden asset-settings">
<div class="panel-header">
<h4 id="selected-asset-name">Asset settings</h4>
<div class="selected-asset-actions">
<button type="button" id="selected-asset-toggle" class="ghost icon-button" title="Toggle visibility">
<i class="fa-solid fa-eye" aria-hidden="true"></i>
<span class="sr-only">Toggle visibility</span>
</button>
<button type="button" id="selected-asset-delete" class="ghost danger icon-button" title="Delete asset">
<i class="fa-solid fa-trash" aria-hidden="true"></i>
<span class="sr-only">Delete asset</span>
</button>
</div>
</div>
<div class="badge-row stacked">
<span class="badge subtle" id="selected-asset-visibility">Visible</span>
<span class="badge subtle" id="asset-type-label"></span>
</div>
<div class="panel-section">
<div class="section-header">
<h5>Layout & order</h5>
@@ -78,6 +64,8 @@
<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>
@@ -97,19 +85,9 @@
</label>
</div>
</div>
<div class="control-actions filled compact">
<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>
<button type="button" onclick="applyTransformFromInputs()" title="Apply size"><i class="fa-solid fa-floppy-disk"></i><span class="sr-only">Apply size</span></button>
</div>
</div>
</div>
</section>
<section class="overlay" id="admin-overlay">
<iframe th:src="${'https://player.twitch.tv/?channel=' + broadcaster + '&parent=localhost'}" allowfullscreen></iframe>
<canvas id="admin-canvas"></canvas>
</section>
</div>
<script th:inline="javascript">
const broadcaster = /*[[${broadcaster}]]*/ '';