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

Fix layering and add release ci

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-01-15 14:36:45 +01:00
parent d43bd985c6
commit c481b105c5
12 changed files with 476 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/resources/db/migration/V5__script_asset_layer.sql Normal file
View File

@@ -0,0 +1,5 @@
ALTER TABLE script_assets ADD COLUMN IF NOT EXISTS z_index INTEGER NOT NULL DEFAULT 1;
UPDATE script_assets
SET z_index = 1
WHERE z_index IS NULL;

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

@@ -1740,10 +1740,19 @@ button:disabled:hover {
.asset-list {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
}
.asset-section {
font-size: 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.9);
padding: 4px 10px 0;
}
.asset-item {
display: flex;
flex-direction: column;

364
src/main/resources/static/js/admin/console.js
View File

@@ -5,6 +5,7 @@ import {
ensureLayerPosition as ensureLayerPositionForState,
getLayerOrder as getLayerOrderForState,
getRenderOrder as getRenderOrderForState,
getScriptLayerOrder as getScriptLayerOrderForState,
} from "../broadcast/layers.js";
export function createAdminConsole({
@@ -80,6 +81,7 @@ export function createAdminConsole({
let drawPending = false;
let layerOrder = [];
let scriptLayerOrder = [];
const layerState = {
assets,
get layerOrder() {
@@ -88,6 +90,12 @@ export function createAdminConsole({
set layerOrder(value) {
layerOrder = value;
},
get scriptLayerOrder() {
return scriptLayerOrder;
},
set scriptLayerOrder(value) {
scriptLayerOrder = value;
},
};
let pendingUploads = [];
let selectedAssetId = null;
@@ -178,12 +186,22 @@ export function createAdminConsole({
return getLayerOrderForState(layerState);
}
function getScriptLayerOrder() {
return getScriptLayerOrderForState(layerState);
}
function getAssetsByLayer() {
return getLayerOrder()
.map((id) => assets.get(id))
.filter(Boolean);
}
function getScriptAssetsByLayer() {
return getScriptLayerOrder()
.map((id) => assets.get(id))
.filter(Boolean);
}
function getAudioAssets() {
return Array.from(assets.values())
.filter((asset) => isAudioAsset(asset))
@@ -191,9 +209,7 @@ export function createAdminConsole({
}
function getCodeAssets() {
return Array.from(assets.values())
.filter((asset) => isCodeAsset(asset))
.sort((a, b) => (b.createdAtMs || 0) - (a.createdAtMs || 0));
return getScriptAssetsByLayer();
}
function getRenderOrder() {
@@ -211,6 +227,17 @@ export function createAdminConsole({
return order.length - index;
}
function getScriptLayerValue(assetId) {
const asset = assets.get(assetId);
if (!asset || !isCodeAsset(asset)) {
return 0;
}
const order = getScriptLayerOrder();
const index = order.indexOf(assetId);
if (index === -1) return 1;
return order.length - index;
}
function addPendingUpload(name) {
const pending = {
id: `pending-${Date.now()}-${Math.round(Math.random() * 100000)}`,
@@ -547,6 +574,7 @@ export function createAdminConsole({
function renderAssets(list) {
layerOrder = [];
scriptLayerOrder = [];
list.forEach((item) => storeAsset(item, { placement: "append" }));
drawAndList();
}
@@ -594,6 +622,7 @@ export function createAdminConsole({
if (event.type === "DELETED") {
assets.delete(assetId);
layerOrder = layerOrder.filter((id) => id !== assetId);
scriptLayerOrder = scriptLayerOrder.filter((id) => id !== assetId);
clearMedia(assetId);
renderStates.delete(assetId);
loopPlaybackState.delete(assetId);
@@ -628,6 +657,7 @@ export function createAdminConsole({
}
const merged = { ...existing, ...patch };
const isAudio = isAudioAsset(merged);
const isScript = isCodeAsset(merged);
if (patch.hidden) {
clearMedia(assetId);
loopPlaybackState.delete(assetId);
@@ -641,10 +671,17 @@ export function createAdminConsole({
targetLayer = null;
}
if (!isAudio && Number.isFinite(targetLayer)) {
const currentOrder = getLayerOrder().filter((id) => id !== assetId);
const insertIndex = Math.max(0, currentOrder.length - Math.round(targetLayer));
currentOrder.splice(insertIndex, 0, assetId);
layerOrder = currentOrder;
if (isScript) {
const currentOrder = getScriptLayerOrder().filter((id) => id !== assetId);
const insertIndex = Math.max(0, currentOrder.length - Math.round(targetLayer));
currentOrder.splice(insertIndex, 0, assetId);
scriptLayerOrder = currentOrder;
} else {
const currentOrder = getLayerOrder().filter((id) => id !== assetId);
const insertIndex = Math.max(0, currentOrder.length - Math.round(targetLayer));
currentOrder.splice(insertIndex, 0, assetId);
layerOrder = currentOrder;
}
}
storeAsset(merged);
if (!isAudio) {
@@ -1298,6 +1335,138 @@ export function createAdminConsole({
}
}
function getLayerDetail(asset) {
if (!asset || isAudioAsset(asset)) {
return null;
}
if (isCodeAsset(asset)) {
return `Script layer ${getScriptLayerValue(asset.id)}`;
}
return `Layer ${getLayerValue(asset.id)}`;
}
function createSectionHeader(title) {
const li = document.createElement("li");
li.className = "asset-section";
li.textContent = title;
return li;
}
function appendAssetListItem(list, asset) {
const li = document.createElement("li");
li.className = "asset-item";
if (asset.id === selectedAssetId) {
li.classList.add("selected");
}
li.classList.toggle("is-hidden", !!asset.hidden);
const row = document.createElement("div");
row.className = "asset-row";
const preview = createPreviewElement(asset);
const meta = document.createElement("div");
meta.className = "meta";
const name = document.createElement("strong");
name.textContent = asset.name || `Asset ${asset.id.slice(0, 6)}`;
const details = document.createElement("small");
const layerDetail = getLayerDetail(asset);
details.textContent = layerDetail ? `${getAssetTypeLabel(asset)} · ${layerDetail}` : getAssetTypeLabel(asset);
meta.appendChild(name);
meta.appendChild(details);
const actions = document.createElement("div");
actions.className = "actions";
if (isCodeAsset(asset)) {
const editBtn = document.createElement("button");
editBtn.type = "button";
editBtn.className = "ghost icon-button";
editBtn.innerHTML = '<i class="fa-solid fa-code"></i>';
editBtn.title = "Edit script";
editBtn.addEventListener("click", (e) => {
e.stopPropagation();
customAssetModal?.openEditor?.(asset);
});
actions.appendChild(editBtn);
}
if (!isAudioAsset(asset)) {
const moveUp = document.createElement("button");
moveUp.type = "button";
moveUp.className = "ghost icon-button";
moveUp.innerHTML = '<i class="fa-solid fa-arrow-up"></i>';
moveUp.title = isCodeAsset(asset) ? "Move script up" : "Move layer up";
moveUp.addEventListener("click", (e) => {
e.stopPropagation();
moveLayerItem(asset, "up");
});
const moveDown = document.createElement("button");
moveDown.type = "button";
moveDown.className = "ghost icon-button";
moveDown.innerHTML = '<i class="fa-solid fa-arrow-down"></i>';
moveDown.title = isCodeAsset(asset) ? "Move script down" : "Move layer down";
moveDown.addEventListener("click", (e) => {
e.stopPropagation();
moveLayerItem(asset, "down");
});
actions.appendChild(moveUp);
actions.appendChild(moveDown);
}
if (isAudioAsset(asset)) {
const playBtn = document.createElement("button");
playBtn.type = "button";
playBtn.className = "ghost icon-button";
const isLooping = !!asset.audioLoop;
const isPlayingLoop = getLoopPlaybackState(asset);
updatePlayButtonIcon(playBtn, isLooping, isPlayingLoop);
playBtn.title = isLooping
? isPlayingLoop
? "Pause looping audio"
: "Play looping audio"
: "Play audio";
playBtn.addEventListener("click", (e) => {
e.stopPropagation();
const nextPlay = isLooping ? !(loopPlaybackState.get(asset.id) ?? getLoopPlaybackState(asset)) : true;
if (isLooping) {
loopPlaybackState.set(asset.id, nextPlay);
updatePlayButtonIcon(playBtn, true, nextPlay);
playBtn.title = nextPlay ? "Pause looping audio" : "Play looping audio";
}
triggerAudioPlayback(asset, nextPlay);
});
actions.appendChild(playBtn);
}
if (!isAudioAsset(asset) && !isCodeAsset(asset)) {
const toggleBtn = document.createElement("button");
toggleBtn.type = "button";
toggleBtn.className = "ghost icon-button";
toggleBtn.innerHTML = `<i class="fa-solid ${asset.hidden ? "fa-eye" : "fa-eye-slash"}"></i>`;
toggleBtn.title = asset.hidden ? "Show asset" : "Hide asset";
toggleBtn.addEventListener("click", (e) => {
e.stopPropagation();
selectedAssetId = asset.id;
updateVisibility(asset, !asset.hidden);
});
actions.appendChild(toggleBtn);
}
row.appendChild(preview);
row.appendChild(meta);
row.appendChild(actions);
li.addEventListener("click", () => {
selectedAssetId = asset.id;
updateRenderState(asset);
drawAndList();
});
li.appendChild(row);
list.appendChild(li);
}
function renderAssetList() {
const list = document.getElementById("asset-list");
if (controlsPlaceholder && controlsPanel && controlsPanel.parentElement !== controlsPlaceholder) {
@@ -1334,99 +1503,20 @@ export function createAdminConsole({
const codeAssets = getCodeAssets();
const audioAssets = getAudioAssets();
const sortedAssets = [...codeAssets, ...audioAssets, ...getAssetsByLayer()];
sortedAssets.forEach((asset) => {
const li = document.createElement("li");
li.className = "asset-item";
if (asset.id === selectedAssetId) {
li.classList.add("selected");
}
li.classList.toggle("is-hidden", !!asset.hidden);
const visualAssets = getAssetsByLayer();
const row = document.createElement("div");
row.className = "asset-row";
const preview = createPreviewElement(asset);
const meta = document.createElement("div");
meta.className = "meta";
const name = document.createElement("strong");
name.textContent = asset.name || `Asset ${asset.id.slice(0, 6)}`;
const details = document.createElement("small");
details.textContent = getAssetTypeLabel(asset);
meta.appendChild(name);
meta.appendChild(details);
const actions = document.createElement("div");
actions.className = "actions";
if (isCodeAsset(asset)) {
const editBtn = document.createElement("button");
editBtn.type = "button";
editBtn.className = "ghost icon-button";
editBtn.innerHTML = '<i class="fa-solid fa-code"></i>';
editBtn.title = "Edit script";
editBtn.addEventListener("click", (e) => {
e.stopPropagation();
customAssetModal?.openEditor?.(asset);
});
actions.appendChild(editBtn);
}
if (isAudioAsset(asset)) {
const playBtn = document.createElement("button");
playBtn.type = "button";
playBtn.className = "ghost icon-button";
const isLooping = !!asset.audioLoop;
const isPlayingLoop = getLoopPlaybackState(asset);
updatePlayButtonIcon(playBtn, isLooping, isPlayingLoop);
playBtn.title = isLooping
? isPlayingLoop
? "Pause looping audio"
: "Play looping audio"
: "Play audio";
playBtn.addEventListener("click", (e) => {
e.stopPropagation();
const nextPlay = isLooping
? !(loopPlaybackState.get(asset.id) ?? getLoopPlaybackState(asset))
: true;
if (isLooping) {
loopPlaybackState.set(asset.id, nextPlay);
updatePlayButtonIcon(playBtn, true, nextPlay);
playBtn.title = nextPlay ? "Pause looping audio" : "Play looping audio";
}
triggerAudioPlayback(asset, nextPlay);
});
actions.appendChild(playBtn);
}
if (!isAudioAsset(asset) && !isCodeAsset(asset)) {
const toggleBtn = document.createElement("button");
toggleBtn.type = "button";
toggleBtn.className = "ghost icon-button";
toggleBtn.innerHTML = `<i class="fa-solid ${asset.hidden ? "fa-eye" : "fa-eye-slash"}"></i>`;
toggleBtn.title = asset.hidden ? "Show asset" : "Hide asset";
toggleBtn.addEventListener("click", (e) => {
e.stopPropagation();
selectedAssetId = asset.id;
updateVisibility(asset, !asset.hidden);
});
actions.appendChild(toggleBtn);
}
row.appendChild(preview);
row.appendChild(meta);
row.appendChild(actions);
li.addEventListener("click", () => {
selectedAssetId = asset.id;
updateRenderState(asset);
drawAndList();
});
li.appendChild(row);
list.appendChild(li);
});
if (visualAssets.length) {
list.appendChild(createSectionHeader("Canvas assets"));
visualAssets.forEach((asset) => appendAssetListItem(list, asset));
}
if (audioAssets.length) {
list.appendChild(createSectionHeader("Audio assets"));
audioAssets.forEach((asset) => appendAssetListItem(list, asset));
}
if (codeAssets.length) {
list.appendChild(createSectionHeader("Script assets (always on top)"));
codeAssets.forEach((asset) => appendAssetListItem(list, asset));
}
updateSelectedAssetControls();
}
@@ -1830,6 +1920,11 @@ export function createAdminConsole({
selectedAssetBadges.innerHTML = "";
if (asset) {
selectedAssetBadges.appendChild(createBadge(getDisplayMediaType(asset)));
if (isCodeAsset(asset)) {
selectedAssetBadges.appendChild(createBadge(`Script layer ${getScriptLayerValue(asset.id)}`, "subtle"));
} else if (!isAudioAsset(asset)) {
selectedAssetBadges.appendChild(createBadge(`Layer ${getLayerValue(asset.id)}`, "subtle"));
}
const aspectLabel = !isAudioAsset(asset) && !isCodeAsset(asset) ? formatAspectRatioLabel(asset) : "";
if (aspectLabel) {
selectedAssetBadges.appendChild(createBadge(aspectLabel, "subtle"));
@@ -2028,40 +2123,61 @@ export function createAdminConsole({
drawAndList();
}
function getLayeredAssets(asset) {
if (!asset) {
return [];
}
return isCodeAsset(asset) ? getScriptAssetsByLayer() : getAssetsByLayer();
}
function applyOrderForAsset(asset, ordered) {
if (!asset) return;
if (isCodeAsset(asset)) {
applyScriptLayerOrder(ordered);
} else {
applyLayerOrder(ordered);
}
}
function moveLayerItem(asset, direction) {
if (!asset) return;
const ordered = getLayeredAssets(asset);
const index = ordered.findIndex((item) => item.id === asset.id);
if (index === -1) return;
const nextIndex = direction === "up" ? index - 1 : index + 1;
if (nextIndex < 0 || nextIndex >= ordered.length) {
return;
}
[ordered[index], ordered[nextIndex]] = [ordered[nextIndex], ordered[index]];
applyOrderForAsset(asset, ordered);
}
function bringForward() {
const asset = getSelectedAsset();
if (!asset) return;
const ordered = getAssetsByLayer();
const index = ordered.findIndex((item) => item.id === asset.id);
if (index <= 0) return;
[ordered[index], ordered[index - 1]] = [ordered[index - 1], ordered[index]];
applyLayerOrder(ordered);
if (!asset || isAudioAsset(asset)) return;
moveLayerItem(asset, "up");
}
function bringBackward() {
const asset = getSelectedAsset();
if (!asset) return;
const ordered = getAssetsByLayer();
const index = ordered.findIndex((item) => item.id === asset.id);
if (index === -1 || index === ordered.length - 1) return;
[ordered[index], ordered[index + 1]] = [ordered[index + 1], ordered[index]];
applyLayerOrder(ordered);
if (!asset || isAudioAsset(asset)) return;
moveLayerItem(asset, "down");
}
function bringToFront() {
const asset = getSelectedAsset();
if (!asset) return;
const ordered = getAssetsByLayer().filter((item) => item.id !== asset.id);
if (!asset || isAudioAsset(asset)) return;
const ordered = getLayeredAssets(asset).filter((item) => item.id !== asset.id);
ordered.unshift(asset);
applyLayerOrder(ordered);
applyOrderForAsset(asset, ordered);
}
function sendToBack() {
const asset = getSelectedAsset();
if (!asset) return;
const ordered = getAssetsByLayer().filter((item) => item.id !== asset.id);
if (!asset || isAudioAsset(asset)) return;
const ordered = getLayeredAssets(asset).filter((item) => item.id !== asset.id);
ordered.push(asset);
applyLayerOrder(ordered);
applyOrderForAsset(asset, ordered);
}
globalThis.handleFileSelection = handleFileSelection;
@@ -2081,6 +2197,14 @@ export function createAdminConsole({
drawAndList();
}
function applyScriptLayerOrder(ordered) {
const newOrder = ordered.map((item) => item.id).filter((id) => assets.has(id));
scriptLayerOrder = newOrder;
const changed = ordered.map((item) => assets.get(item.id)).filter(Boolean);
changed.forEach((item) => schedulePersistTransform(item, true));
drawAndList();
}
function getAssetAspectRatio(asset) {
const media = ensureMedia(asset);
if (isVideoElement(media) && media?.videoWidth && media?.videoHeight) {
@@ -2202,6 +2326,7 @@ export function createAdminConsole({
assets.delete(asset.id);
renderStates.delete(asset.id);
layerOrder = layerOrder.filter((id) => id !== asset.id);
scriptLayerOrder = scriptLayerOrder.filter((id) => id !== asset.id);
cancelPendingTransform(asset.id);
if (selectedAssetId === asset.id) {
selectedAssetId = null;
@@ -2319,7 +2444,10 @@ export function createAdminConsole({
audioPitch: asset.audioPitch,
audioVolume: asset.audioVolume,
};
if (!isAudioAsset(asset) && !isCodeAsset(asset)) {
if (isCodeAsset(asset)) {
const layer = getScriptLayerValue(asset.id);
payload.zIndex = layer;
} else if (!isAudioAsset(asset)) {
const layer = getLayerValue(asset.id);
payload.x = asset.x;
payload.y = asset.y;

80
src/main/resources/static/js/broadcast/layers.js
View File

@@ -1,41 +1,83 @@
import { isVisualAsset } from "./assetKinds.js";
import { isCodeAsset, isVisualAsset } from "./assetKinds.js";
function isScriptAsset(asset) {
return isCodeAsset(asset);
}
function isLayerableVisual(asset) {
return isVisualAsset(asset) && !isScriptAsset(asset);
}
function getLayerBucket(state, asset) {
if (isScriptAsset(asset)) {
if (!Array.isArray(state.scriptLayerOrder)) {
state.scriptLayerOrder = [];
}
return state.scriptLayerOrder;
}
if (isLayerableVisual(asset)) {
return state.layerOrder;
}
return null;
}
function normalizeOrder(state, predicate, existing) {
const filtered = existing.filter((id) => {
const asset = state.assets.get(id);
return asset && predicate(asset);
});
state.assets.forEach((asset, id) => {
if (!predicate(asset)) {
return;
}
if (!filtered.includes(id)) {
filtered.push(id);
}
});
return filtered;
}
export function ensureLayerPosition(state, assetId, placement = "keep") {
const asset = state.assets.get(assetId);
if (asset && !isVisualAsset(asset)) {
if (!asset) {
return;
}
const existingIndex = state.layerOrder.indexOf(assetId);
const bucket = getLayerBucket(state, asset);
if (!bucket) {
return;
}
const existingIndex = bucket.indexOf(assetId);
if (existingIndex !== -1 && placement === "keep") {
return;
}
if (existingIndex !== -1) {
state.layerOrder.splice(existingIndex, 1);
bucket.splice(existingIndex, 1);
}
if (placement === "append") {
state.layerOrder.push(assetId);
bucket.push(assetId);
} else {
state.layerOrder.unshift(assetId);
bucket.unshift(assetId);
}
if (bucket === state.layerOrder) {
state.layerOrder = normalizeOrder(state, isLayerableVisual, bucket);
} else {
state.scriptLayerOrder = normalizeOrder(state, isScriptAsset, bucket);
}
state.layerOrder = state.layerOrder.filter((id) => state.assets.has(id));
}
export function getLayerOrder(state) {
state.layerOrder = state.layerOrder.filter((id) => {
const asset = state.assets.get(id);
return asset && isVisualAsset(asset);
});
state.assets.forEach((asset, id) => {
if (!isVisualAsset(asset)) {
return;
}
if (!state.layerOrder.includes(id)) {
state.layerOrder.unshift(id);
}
});
state.layerOrder = normalizeOrder(state, isLayerableVisual, state.layerOrder);
return state.layerOrder;
}
export function getScriptLayerOrder(state) {
if (!Array.isArray(state.scriptLayerOrder)) {
state.scriptLayerOrder = [];
}
state.scriptLayerOrder = normalizeOrder(state, isScriptAsset, state.scriptLayerOrder);
return state.scriptLayerOrder;
}
export function getRenderOrder(state) {
return [...getLayerOrder(state)]
.reverse()

42
src/main/resources/static/js/broadcast/renderer.js
View File

@@ -1,7 +1,7 @@
import { AssetKind, MIN_FRAME_TIME, VISIBILITY_THRESHOLD } from "./constants.js";
import { createBroadcastState } from "./state.js";
import { getAssetKind, isCodeAsset, isModelAsset, isVisualAsset, isVideoElement } from "./assetKinds.js";
import { ensureLayerPosition, getLayerOrder, getRenderOrder } from "./layers.js";
import { ensureLayerPosition, getLayerOrder, getRenderOrder, getScriptLayerOrder } from "./layers.js";
import { getVisibilityState, smoothState } from "./visibility.js";
import { createAudioManager } from "./audioManager.js";
import { createMediaManager } from "./mediaManager.js";
@@ -89,6 +89,7 @@ export class BroadcastRenderer {
renderAssets(list) {
this.state.layerOrder = [];
this.state.scriptLayerOrder = [];
list.forEach((asset) => {
this.storeAsset(asset, "append");
if (isCodeAsset(asset)) {
@@ -119,6 +120,7 @@ export class BroadcastRenderer {
removeAsset(assetId) {
this.state.assets.delete(assetId);
this.state.layerOrder = this.state.layerOrder.filter((id) => id !== assetId);
this.state.scriptLayerOrder = this.state.scriptLayerOrder.filter((id) => id !== assetId);
this.mediaManager.clearMedia(assetId);
this.modelManager.clearModel(assetId);
this.stopUserJavaScriptWorker(assetId);
@@ -284,6 +286,7 @@ export class BroadcastRenderer {
const merged = this.normalizePayload({ ...existing, ...sanitizedPatch });
console.log(merged);
const isVisual = isVisualAsset(merged);
const isScript = isCodeAsset(merged);
if (sanitizedPatch.hidden) {
this.hideAssetWithTransition(merged);
return;
@@ -293,11 +296,19 @@ export class BroadcastRenderer {
: Number.isFinite(patch.zIndex)
? patch.zIndex
: null;
if (isVisual && Number.isFinite(targetLayer)) {
const currentOrder = getLayerOrder(this.state).filter((id) => id !== assetId);
const insertIndex = Math.max(0, currentOrder.length - Math.round(targetLayer));
currentOrder.splice(insertIndex, 0, assetId);
this.state.layerOrder = currentOrder;
if (Number.isFinite(targetLayer)) {
if (isScript) {
const currentOrder = getScriptLayerOrder(this.state).filter((id) => id !== assetId);
const insertIndex = Math.max(0, currentOrder.length - Math.round(targetLayer));
currentOrder.splice(insertIndex, 0, assetId);
this.state.scriptLayerOrder = currentOrder;
this.applyScriptCanvasOrder();
} else if (isVisual) {
const currentOrder = getLayerOrder(this.state).filter((id) => id !== assetId);
const insertIndex = Math.max(0, currentOrder.length - Math.round(targetLayer));
currentOrder.splice(insertIndex, 0, assetId);
this.state.layerOrder = currentOrder;
}
}
this.storeAsset(merged);
this.mediaManager.ensureMedia(merged);
@@ -767,6 +778,7 @@ export class BroadcastRenderer {
}
const existing = this.scriptCanvases.get(assetId);
if (existing) {
this.applyScriptCanvasOrder();
return existing;
}
const canvas = document.createElement("canvas");
@@ -775,6 +787,7 @@ export class BroadcastRenderer {
this.applyScriptCanvasSize(canvas);
this.scriptLayer.appendChild(canvas);
this.scriptCanvases.set(assetId, canvas);
this.applyScriptCanvasOrder();
return canvas;
}
@@ -785,12 +798,14 @@ export class BroadcastRenderer {
}
canvas.remove();
this.scriptCanvases.delete(assetId);
this.applyScriptCanvasOrder();
}
resizeScriptCanvases() {
this.scriptCanvases.forEach((canvas) => {
this.applyScriptCanvasSize(canvas);
});
this.applyScriptCanvasOrder();
}
applyScriptCanvasSize(canvas) {
@@ -807,6 +822,21 @@ export class BroadcastRenderer {
}
}
applyScriptCanvasOrder() {
if (!this.scriptLayer) {
return;
}
const ordered = getScriptLayerOrder(this.state);
ordered.forEach((id, index) => {
const canvas = this.scriptCanvases.get(id);
if (!canvas) {
return;
}
canvas.style.zIndex = `${ordered.length - index}`;
this.scriptLayer.appendChild(canvas);
});
}
async resolveScriptAttachments(attachments) {
if (!Array.isArray(attachments) || attachments.length === 0) {
return [];

1
src/main/resources/static/js/broadcast/state.js
View File

@@ -10,5 +10,6 @@ export function createBroadcastState() {
animationFailures: new Map(),
videoPlaybackStates: new WeakMap(),
layerOrder: [],
scriptLayerOrder: [],
};
}

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

@@ -251,6 +251,7 @@
onclick="sendToBack()"
class="secondary"
title="Send to back"
data-code-enabled="true"
>
<i class="fa-solid fa-angles-down"></i>
</button>
@@ -259,6 +260,7 @@
onclick="bringBackward()"
class="secondary"
title="Move backward"
data-code-enabled="true"
>
<i class="fa-solid fa-arrow-down"></i>
</button>
@@ -267,6 +269,7 @@
onclick="bringForward()"
class="secondary"
title="Move forward"
data-code-enabled="true"
>
<i class="fa-solid fa-arrow-up"></i>
</button>
@@ -275,6 +278,7 @@
onclick="bringToFront()"
class="secondary"
title="Bring to front"
data-code-enabled="true"
>
<i class="fa-solid fa-angles-up"></i>
</button>