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

Unify formatting

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-01-05 15:50:23 +01:00
parent 7aa3f96b3f
commit 864aeb86eb
73 changed files with 6436 additions and 6047 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,308 +1,358 @@
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Imgfloat Admin</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body class="admin-body">
<div class="admin-frame">
<header class="admin-topbar">
<div class="topbar-left">
<div class="admin-identity">
<p class="eyebrow subtle">CHANNEL ADMIN</p>
<h1 th:text="${broadcaster}"></h1>
</div>
</div>
<div class="header-actions horizontal">
<a class="icon-button" th:href="@{/}" title="Back to dashboard">
<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
<span class="sr-only">Back to dashboard</span>
</a>
<a class="button ghost" th:href="${'/view/' + broadcaster + '/broadcast'}" target="_blank" rel="noopener"
>Broadcaster view</a
>
</div>
</header>
<div class="admin-workspace">
<aside class="admin-rail">
<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>Upload asset</strong>
<small id="asset-file-name">No file chosen</small>
</span>
</label>
</div>
<div class="rail-body">
<div class="rail-scroll">
<ul id="asset-list" class="asset-list"></ul>
</div>
</div>
<div id="asset-inspector" class="rail-inspector hidden">
<div class="asset-inspector">
<div class="selected-asset-banner">
<div class="selected-asset-main">
<div class="title-row">
<strong id="selected-asset-name">Choose an asset</strong>
<span id="selected-asset-resolution" class="asset-resolution subtle-text hidden"></span>
</div>
<p class="meta-text" id="selected-asset-meta">
Pick an asset in the list to adjust its placement and playback.
</p>
<p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
</div>
</div>
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
<div id="asset-controls" class="hidden asset-settings">
<div class="panel-section" id="layout-section">
<div class="section-header">
<h5>Layout & order</h5>
<head>
<meta charset="UTF-8" />
<title>Imgfloat Admin</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body class="admin-body">
<div class="admin-frame">
<header class="admin-topbar">
<div class="topbar-left">
<div class="admin-identity">
<p class="eyebrow subtle">CHANNEL ADMIN</p>
<h1 th:text="${broadcaster}"></h1>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-label">Width</span>
<input id="asset-width" class="number-input property-control" type="number" min="10" step="5" />
</div>
<div class="property-row">
<span class="property-label">Height</span>
</div>
<div class="header-actions horizontal">
<a class="icon-button" th:href="@{/}" title="Back to dashboard">
<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
<span class="sr-only">Back to dashboard</span>
</a>
<a
class="button ghost"
th:href="${'/view/' + broadcaster + '/broadcast'}"
target="_blank"
rel="noopener"
>Broadcaster view</a
>
</div>
</header>
<div class="admin-workspace">
<aside class="admin-rail">
<div class="upload-row">
<input
id="asset-height"
class="number-input property-control"
type="number"
min="10"
step="5"
id="asset-file"
class="file-input-field"
type="file"
accept="image/*,video/*,audio/*"
onchange="handleFileSelection(this)"
/>
</div>
<div class="property-row">
<span class="property-label">Maintain AR</span>
<label class="checkbox-inline toggle inline-toggle property-control">
<input id="maintain-aspect" type="checkbox" checked />
<span class="toggle-track" aria-hidden="true">
<span class="toggle-thumb"></span>
</span>
<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>Upload asset</strong>
<small id="asset-file-name">No file chosen</small>
</span>
</label>
</div>
<div class="property-row">
<span class="property-label">Layer</span>
<div class="property-control">
<div class="badge-row stacked">
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
</div>
</div>
<div class="rail-body">
<div class="rail-scroll">
<ul id="asset-list" class="asset-list"></ul>
</div>
</div>
</div>
</div>
<div class="panel-section" id="playback-section">
<div class="section-header">
<h5>Playback</h5>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Playback speed</span>
<span class="value-hint" id="asset-speed-label">100%</span>
</div>
<input
id="asset-speed"
class="range-input"
type="range"
min="0"
max="1000"
step="10"
value="100"
/>
<div class="range-meta"><span>0%</span><span>1000%</span></div>
</div>
</div>
<div id="asset-inspector" class="rail-inspector hidden">
<div class="asset-inspector">
<div class="selected-asset-banner">
<div class="selected-asset-main">
<div class="title-row">
<strong id="selected-asset-name">Choose an asset</strong>
<span
id="selected-asset-resolution"
class="asset-resolution subtle-text hidden"
></span>
</div>
<p class="meta-text" id="selected-asset-meta">
Pick an asset in the list to adjust its placement and playback.
</p>
<p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
</div>
</div>
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
<div id="asset-controls" class="hidden asset-settings">
<div class="panel-section" id="layout-section">
<div class="section-header">
<h5>Layout & order</h5>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-label">Width</span>
<input
id="asset-width"
class="number-input property-control"
type="number"
min="10"
step="5"
/>
</div>
<div class="property-row">
<span class="property-label">Height</span>
<input
id="asset-height"
class="number-input property-control"
type="number"
min="10"
step="5"
/>
</div>
<div class="property-row">
<span class="property-label">Maintain AR</span>
<label class="checkbox-inline toggle inline-toggle property-control">
<input id="maintain-aspect" type="checkbox" checked />
<span class="toggle-track" aria-hidden="true">
<span class="toggle-thumb"></span>
</span>
</label>
</div>
<div class="property-row">
<span class="property-label">Layer</span>
<div class="property-control">
<div class="badge-row stacked">
<span class="badge"
>Layer <strong id="asset-z-level">1</strong></span
>
</div>
</div>
</div>
</div>
</div>
<div class="panel-section" id="volume-section">
<div class="section-header">
<h5>Volume</h5>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Playback volume</span>
<span class="value-hint" id="asset-volume-label">100%</span>
</div>
<input
id="asset-volume"
class="range-input"
type="range"
min="0"
max="200"
step="1"
value="100"
/>
<div class="range-meta"><span>0%</span><span>200%</span></div>
</div>
</div>
<div class="panel-section" id="playback-section">
<div class="section-header">
<h5>Playback</h5>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Playback speed</span>
<span class="value-hint" id="asset-speed-label">100%</span>
</div>
<input
id="asset-speed"
class="range-input"
type="range"
min="0"
max="1000"
step="10"
value="100"
/>
<div class="range-meta"><span>0%</span><span>1000%</span></div>
</div>
</div>
<div class="panel-section hidden" id="audio-section">
<div class="section-header">
<h5>Audio</h5>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-label">Loop</span>
<label class="checkbox-inline toggle inline-toggle property-control">
<input id="asset-audio-loop" type="checkbox" />
<span class="toggle-track" aria-hidden="true">
<span class="toggle-thumb"></span>
</span>
</label>
</div>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Delay</span>
<span class="value-hint" id="asset-audio-delay-label">0ms</span>
</div>
<input
id="asset-audio-delay"
class="range-input property-control"
type="range"
min="0"
max="30000"
step="100"
value="0"
/>
<div class="range-meta"><span>0ms</span><span>30s</span></div>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Playback speed</span>
<span class="value-hint" id="asset-audio-speed-label">1.0x</span>
</div>
<input
id="asset-audio-speed"
class="range-input"
type="range"
min="25"
max="400"
step="5"
value="100"
/>
<div class="range-meta"><span>0.25x</span><span>4x</span></div>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Pitch</span>
<span class="value-hint" id="asset-audio-pitch-label">100%</span>
</div>
<input
id="asset-audio-pitch"
class="range-input property-control"
type="range"
min="50"
max="200"
step="5"
value="100"
/>
<div class="range-meta"><span>50%</span><span>200%</span></div>
</div>
</div>
<div class="control-actions compact unified-actions" id="asset-actions">
<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>
<button
id="selected-asset-visibility"
class="secondary"
type="button"
title="Hide asset"
disabled
data-audio-enabled="true"
>
<i class="fa-solid fa-eye-slash"></i>
</button>
<button
id="selected-asset-delete"
class="secondary danger"
type="button"
title="Delete asset"
disabled
data-audio-enabled="true"
>
<i class="fa-solid fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</aside>
<div class="panel-section" id="volume-section">
<div class="section-header">
<h5>Volume</h5>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Playback volume</span>
<span class="value-hint" id="asset-volume-label">100%</span>
</div>
<input
id="asset-volume"
class="range-input"
type="range"
min="0"
max="200"
step="1"
value="100"
/>
<div class="range-meta"><span>0%</span><span>200%</span></div>
</div>
</div>
<section class="canvas-stack">
<div class="canvas-topbar">
<div>
<p class="eyebrow subtle">Canvas</p>
<h3 class="panel-title">Live composition</h3>
<div class="panel-section hidden" id="audio-section">
<div class="section-header">
<h5>Audio</h5>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-label">Loop</span>
<label class="checkbox-inline toggle inline-toggle property-control">
<input id="asset-audio-loop" type="checkbox" />
<span class="toggle-track" aria-hidden="true">
<span class="toggle-thumb"></span>
</span>
</label>
</div>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Delay</span>
<span class="value-hint" id="asset-audio-delay-label">0ms</span>
</div>
<input
id="asset-audio-delay"
class="range-input property-control"
type="range"
min="0"
max="30000"
step="100"
value="0"
/>
<div class="range-meta"><span>0ms</span><span>30s</span></div>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Playback speed</span>
<span class="value-hint" id="asset-audio-speed-label">1.0x</span>
</div>
<input
id="asset-audio-speed"
class="range-input"
type="range"
min="25"
max="400"
step="5"
value="100"
/>
<div class="range-meta"><span>0.25x</span><span>4x</span></div>
</div>
<div class="stacked-field">
<div class="label-row">
<span>Pitch</span>
<span class="value-hint" id="asset-audio-pitch-label">100%</span>
</div>
<input
id="asset-audio-pitch"
class="range-input property-control"
type="range"
min="50"
max="200"
step="5"
value="100"
/>
<div class="range-meta"><span>50%</span><span>200%</span></div>
</div>
</div>
<div class="control-actions compact unified-actions" id="asset-actions">
<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>
<button
id="selected-asset-visibility"
class="secondary"
type="button"
title="Hide asset"
disabled
data-audio-enabled="true"
>
<i class="fa-solid fa-eye-slash"></i>
</button>
<button
id="selected-asset-delete"
class="secondary danger"
type="button"
title="Delete asset"
disabled
data-audio-enabled="true"
>
<i class="fa-solid fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</aside>
<section class="canvas-stack">
<div class="canvas-topbar">
<div>
<p class="eyebrow subtle">Canvas</p>
<h3 class="panel-title">Live composition</h3>
</div>
<div class="canvas-meta">
<span class="badge soft" id="canvas-resolution">1920 x 1080</span>
<span class="badge outline" id="canvas-scale">100%</span>
</div>
</div>
<div class="canvas-surface">
<div class="overlay canvas-boundary" id="admin-overlay">
<div class="canvas-guides"></div>
<canvas id="admin-canvas"></canvas>
</div>
<div class="canvas-footnote">
<p>Edges of the canvas are outlined to match the aspect ratio of the stream.</p>
</div>
</div>
</section>
</div>
<div class="canvas-meta">
<span class="badge soft" id="canvas-resolution">1920 x 1080</span>
<span class="badge outline" id="canvas-scale">100%</span>
</div>
</div>
<div class="canvas-surface">
<div class="overlay canvas-boundary" id="admin-overlay">
<div class="canvas-guides"></div>
<canvas id="admin-canvas"></canvas>
</div>
<div class="canvas-footnote">
<p>Edges of the canvas are outlined to match the aspect ratio of the stream.</p>
</div>
</div>
</section>
</div>
</div>
<script th:inline="javascript">
const broadcaster = /*[[${broadcaster}]]*/ '';
const username = /*[[${username}]]*/ '';
const UPLOAD_LIMIT_BYTES = /*[[${uploadLimitBytes}]]*/ 0;
const SETTINGS = /*[[${settingsJson}]]*/;
</script>
<script src="/js/cookie-consent.js"></script>
<script src="/js/toast.js"></script>
<script src="/js/admin.js"></script>
</body>
</div>
<script th:inline="javascript">
const broadcaster = /*[[${broadcaster}]]*/ '';
const username = /*[[${username}]]*/ '';
const UPLOAD_LIMIT_BYTES = /*[[${uploadLimitBytes}]]*/ 0;
const SETTINGS = /*[[${settingsJson}]]*/;
</script>
<script src="/js/cookie-consent.js"></script>
<script src="/js/toast.js"></script>
<script src="/js/admin.js"></script>
</body>
</html>