This PR breaks the large web and player bootstrap files into smaller modules with clearer ownership.
Web changes: Split shared helpers, bootstrap logic, route groups, and upload-sync behavior out of web.js. Kept web.js focused on wiring and server startup. Fixed screen playlist reassignment so changing a screen’s playlist now triggers a refresh. Fixed single-slide playlist refresh behavior so updates do not get stuck behind the current slide. Player changes: Split websocket/runtime handling into runtime.js. Split playlist assembly and revision hashing into playlist.js. Split onboarding and player HTTP routes into dedicated modules. Split render utilities and template loading into render-helpers.js. Kept player.js mostly as startup/orchestration. Validation: Rebuilt both services with Docker Compose. Smoke-checked web and player routes after the refactor. Verified get_errors was clean on the touched modules.
This commit is contained in:
@@ -4,6 +4,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var utils = window.templateDesignerUtils || {};
|
||||
|
||||
var templateData = {};
|
||||
try {
|
||||
templateData = JSON.parse(dataElement.getAttribute('data-json') || dataElement.textContent || '{}') || {};
|
||||
@@ -24,27 +26,26 @@
|
||||
var canvasWidthInput = document.getElementById('canvas-width');
|
||||
var canvasHeightInput = document.getElementById('canvas-height');
|
||||
var backgroundInput = document.getElementById('background-image');
|
||||
var backgroundColorInput = document.getElementById('background-color');
|
||||
var backgroundPreview = document.getElementById('background-preview');
|
||||
var backgroundEmpty = document.getElementById('background-empty');
|
||||
var removeBackgroundButton = document.getElementById('remove-background-image');
|
||||
var removeBackgroundFlag = document.getElementById('remove-background-image-flag');
|
||||
var addTextRegionButton = document.getElementById('add-text-region');
|
||||
var addImageRegionButton = document.getElementById('add-image-region');
|
||||
var addRegionButton = document.getElementById('add-region-button');
|
||||
var regionAddModal = document.getElementById('region-add-modal');
|
||||
var regionCardTemplate = document.getElementById('region-card-template');
|
||||
var regionsJsonInput = document.getElementById('regions-json');
|
||||
var templateForm = document.getElementById('template-form');
|
||||
var draft = null;
|
||||
var selectedIndex = -1;
|
||||
var overlayRenderFrame = 0;
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value === undefined || value === null ? '' : value)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
|
||||
}
|
||||
|
||||
function valueOrDefault(value, fallback) {
|
||||
return value === undefined || value === null || value === '' ? fallback : value;
|
||||
return utils.valueOrDefault ? utils.valueOrDefault(value, fallback) : (value === undefined || value === null || value === '' ? fallback : value);
|
||||
}
|
||||
|
||||
function getCanvasSize() {
|
||||
@@ -55,7 +56,7 @@
|
||||
}
|
||||
|
||||
function clamp(value, min, max) {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
return utils.clamp ? utils.clamp(value, min, max) : Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
function getCards() {
|
||||
@@ -67,21 +68,62 @@
|
||||
}
|
||||
|
||||
function getRegionName(card) {
|
||||
return String(card.querySelector('[name="region_name[]"]').value || '').trim();
|
||||
return utils.getRegionName ? utils.getRegionName(card) : String(card.querySelector('[name="region_name[]"]').value || '').trim();
|
||||
}
|
||||
|
||||
function syncRegionIdentity(card, value) {
|
||||
if (utils.syncRegionIdentity) {
|
||||
utils.syncRegionIdentity(card, value);
|
||||
return;
|
||||
}
|
||||
var next = String(value || '').trim();
|
||||
card.querySelector('[name="region_name[]"]').value = next;
|
||||
card.querySelector('[name="region_key[]"]').value = next;
|
||||
card.querySelector('[name="region_label[]"]').value = next;
|
||||
}
|
||||
|
||||
function validateRegionNames() {
|
||||
var cards = getCards();
|
||||
var names = {};
|
||||
var hasDuplicate = false;
|
||||
|
||||
cards.forEach(function (card) {
|
||||
var input = card.querySelector('[name="region_name[]"]');
|
||||
if (!input) {
|
||||
return;
|
||||
}
|
||||
|
||||
var normalized = String(input.value || '').trim().toLowerCase();
|
||||
if (!normalized) {
|
||||
input.setCustomValidity('Region name is required.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!names[normalized]) {
|
||||
names[normalized] = [];
|
||||
}
|
||||
names[normalized].push(input);
|
||||
});
|
||||
|
||||
Object.keys(names).forEach(function (key) {
|
||||
var inputs = names[key];
|
||||
if (inputs.length > 1) {
|
||||
hasDuplicate = true;
|
||||
inputs.forEach(function (input) {
|
||||
input.setCustomValidity('Region names must be unique on this template.');
|
||||
});
|
||||
} else {
|
||||
inputs[0].setCustomValidity('');
|
||||
}
|
||||
});
|
||||
|
||||
return !hasDuplicate;
|
||||
}
|
||||
|
||||
function readCard(card) {
|
||||
var name = getRegionName(card);
|
||||
return {
|
||||
region_key: name,
|
||||
label: name,
|
||||
return utils.readCard ? utils.readCard(card) : {
|
||||
region_key: getRegionName(card),
|
||||
label: getRegionName(card),
|
||||
region_type: card.querySelector('[name="region_type[]"]').value,
|
||||
font_family: card.querySelector('[name="font_family[]"]').value,
|
||||
x: Number(card.querySelector('[name="region_x[]"]').value || 0),
|
||||
@@ -93,6 +135,10 @@
|
||||
}
|
||||
|
||||
function writeCard(card, values) {
|
||||
if (utils.writeCard) {
|
||||
utils.writeCard(card, values);
|
||||
return;
|
||||
}
|
||||
if (values.region_name !== undefined) {
|
||||
syncRegionIdentity(card, values.region_name);
|
||||
} else if (values.region_key !== undefined) {
|
||||
@@ -101,7 +147,7 @@
|
||||
syncRegionIdentity(card, values.label);
|
||||
}
|
||||
if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
|
||||
if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; updateRegionFieldVisibility(card); }
|
||||
if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; }
|
||||
if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
|
||||
if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
|
||||
if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
|
||||
@@ -110,28 +156,22 @@
|
||||
}
|
||||
|
||||
function getOverlayRect() {
|
||||
return overlay.getBoundingClientRect();
|
||||
return utils.getOverlayRect ? utils.getOverlayRect(overlay) : overlay.getBoundingClientRect();
|
||||
}
|
||||
|
||||
function toCanvasPoint(event) {
|
||||
var rect = getOverlayRect();
|
||||
var size = getCanvasSize();
|
||||
var x = clamp(event.clientX - rect.left, 0, rect.width);
|
||||
var y = clamp(event.clientY - rect.top, 0, rect.height);
|
||||
return {
|
||||
x: Math.round((x / Math.max(rect.width, 1)) * size.width),
|
||||
y: Math.round((y / Math.max(rect.height, 1)) * size.height)
|
||||
return utils.toCanvasPoint ? utils.toCanvasPoint(event, overlay, getCanvasSize()) : {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
}
|
||||
|
||||
function canvasRectToPixels(region) {
|
||||
var rect = getOverlayRect();
|
||||
var size = getCanvasSize();
|
||||
return {
|
||||
left: (region.x / size.width) * rect.width,
|
||||
top: (region.y / size.height) * rect.height,
|
||||
width: (region.width / size.width) * rect.width,
|
||||
height: (region.height / size.height) * rect.height
|
||||
return utils.canvasRectToPixels ? utils.canvasRectToPixels(region, overlay, getCanvasSize()) : {
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
}
|
||||
|
||||
@@ -182,40 +222,84 @@
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function updateRegionFieldVisibility(card) {
|
||||
var typeSelect = card.querySelector('[name="region_type[]"]');
|
||||
var fontField = card.querySelector('[name="font_family[]"]');
|
||||
if (!typeSelect || !fontField) {
|
||||
function updateStageBackgroundColor() {
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
fontField.value = typeSelect.value === 'text' || typeSelect.value === 'html' ? 'Arial' : '';
|
||||
stage.style.backgroundColor = backgroundColorInput && backgroundColorInput.value ? backgroundColorInput.value : '#111111';
|
||||
}
|
||||
|
||||
function getRegionChipLabel(regionType) {
|
||||
return regionType === 'image' ? 'Image' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : 'Text';
|
||||
}
|
||||
|
||||
function populateRegionCard(card, region) {
|
||||
var chip = card.querySelector('[data-region-chip]');
|
||||
var title = card.querySelector('[data-region-title]');
|
||||
var nameInput = card.querySelector('[name="region_name[]"]');
|
||||
var fontFamilyInput = card.querySelector('[name="font_family[]"]');
|
||||
var regionTypeInput = card.querySelector('[name="region_type[]"]');
|
||||
var regionKeyInput = card.querySelector('[name="region_key[]"]');
|
||||
var regionLabelInput = card.querySelector('[name="region_label[]"]');
|
||||
|
||||
if (title) {
|
||||
title.textContent = region.label || region.region_key || 'Region';
|
||||
}
|
||||
if (chip) {
|
||||
chip.textContent = getRegionChipLabel(region.region_type);
|
||||
}
|
||||
if (nameInput) {
|
||||
nameInput.value = region.region_key || region.label || '';
|
||||
}
|
||||
if (fontFamilyInput) {
|
||||
fontFamilyInput.value = region.region_type === 'image' ? '' : (region.font_family || 'Arial');
|
||||
}
|
||||
if (regionTypeInput) {
|
||||
regionTypeInput.value = region.region_type || 'text';
|
||||
}
|
||||
if (regionKeyInput) {
|
||||
regionKeyInput.value = region.region_key || region.label || '';
|
||||
}
|
||||
if (regionLabelInput) {
|
||||
regionLabelInput.value = region.label || region.region_key || '';
|
||||
}
|
||||
card.querySelector('[name="region_x[]"]').value = valueOrDefault(region.x, 80);
|
||||
card.querySelector('[name="region_y[]"]').value = valueOrDefault(region.y, 80);
|
||||
card.querySelector('[name="region_z[]"]').value = valueOrDefault(region.z_index, 1);
|
||||
card.querySelector('[name="region_width[]"]').value = valueOrDefault(region.width, 300);
|
||||
card.querySelector('[name="region_height[]"]').value = valueOrDefault(region.height, 120);
|
||||
}
|
||||
|
||||
function updateRegionLabel(card) {
|
||||
var label = getRegionName(card) || 'Region';
|
||||
var cards = getCards();
|
||||
var index = cards.indexOf(card);
|
||||
var title = card.querySelector('.template-field-head strong');
|
||||
if (title) {
|
||||
title.textContent = label;
|
||||
}
|
||||
if (index >= 0 && regionSelect.options[index]) {
|
||||
regionSelect.options[index].textContent = label;
|
||||
}
|
||||
}
|
||||
|
||||
function makeRegionCard(region) {
|
||||
var card = document.createElement('div');
|
||||
card.className = 'region-item';
|
||||
var chipLabel = region.region_type === 'image' ? 'Image' : region.region_type === 'webpage' ? 'Webpage' : region.region_type === 'html' ? 'HTML' : 'Text';
|
||||
card.innerHTML = '' +
|
||||
'<label>Region<input name="region_name[]" value="' + escapeHtml(region.region_key || region.label || '') + '" placeholder="region_1" required /></label>' +
|
||||
'<label>Type<select name="region_type[]"><option value="text"' + (region.region_type === 'image' || region.region_type === 'webpage' || region.region_type === 'html' ? '' : ' selected') + '>Text</option><option value="html"' + (region.region_type === 'html' ? ' selected' : '') + '>HTML</option><option value="image"' + (region.region_type === 'image' ? ' selected' : '') + '>Image</option><option value="webpage"' + (region.region_type === 'webpage' ? ' selected' : '') + '>Webpage</option></select></label>' +
|
||||
'<input type="hidden" name="font_family[]" value="' + escapeHtml(region.region_type === 'image' ? '' : (region.font_family || 'Arial')) + '" />' +
|
||||
'<input type="hidden" name="region_key[]" value="' + escapeHtml(region.region_key || region.label || '') + '" />' +
|
||||
'<input type="hidden" name="region_label[]" value="' + escapeHtml(region.label || region.region_key || '') + '" />' +
|
||||
'<div class="template-field-head"><strong>' + escapeHtml(region.label || region.region_key || '') + '</strong><span class="chip">' + escapeHtml(chipLabel) + '</span></div>' +
|
||||
'<div class="row"><label style="flex:1">X<input type="number" name="region_x[]" value="' + escapeHtml(valueOrDefault(region.x, 80)) + '" required /></label><label style="flex:1">Y<input type="number" name="region_y[]" value="' + escapeHtml(valueOrDefault(region.y, 80)) + '" required /></label></div>' +
|
||||
'<div class="row"><label style="flex:1">Width<input type="number" name="region_width[]" value="' + escapeHtml(valueOrDefault(region.width, 300)) + '" required /></label><label style="flex:1">Height<input type="number" name="region_height[]" value="' + escapeHtml(valueOrDefault(region.height, 120)) + '" required /></label><label style="flex:1">Z-Index<input type="number" name="region_z[]" value="' + escapeHtml(valueOrDefault(region.z_index, 1)) + '" required /></label></div>' +
|
||||
'<div class="row"><button type="button" class="danger remove-region">Remove</button></div>';
|
||||
var card;
|
||||
if (regionCardTemplate && regionCardTemplate.content) {
|
||||
card = regionCardTemplate.content.firstElementChild.cloneNode(true);
|
||||
} else {
|
||||
card = document.createElement('div');
|
||||
card.className = 'card card-outline card-secondary admin-form-card region-item mb-3';
|
||||
}
|
||||
populateRegionCard(card, region);
|
||||
var nameInput = card.querySelector('[name="region_name[]"]');
|
||||
var typeSelect = card.querySelector('[name="region_type[]"]');
|
||||
nameInput.addEventListener('input', function () {
|
||||
syncRegionIdentity(card, nameInput.value);
|
||||
updateRegionLabel(card);
|
||||
validateRegionNames();
|
||||
renderRegionSidebar();
|
||||
renderOverlay();
|
||||
});
|
||||
typeSelect.addEventListener('change', function () {
|
||||
updateRegionFieldVisibility(card);
|
||||
renderOverlay();
|
||||
});
|
||||
card.addEventListener('click', function (event) {
|
||||
if (event.target && event.target.classList && event.target.classList.contains('remove-region')) {
|
||||
return;
|
||||
@@ -233,7 +317,6 @@
|
||||
renderRegionSidebar();
|
||||
renderOverlay();
|
||||
});
|
||||
updateRegionFieldVisibility(card);
|
||||
return card;
|
||||
}
|
||||
|
||||
@@ -269,6 +352,7 @@
|
||||
});
|
||||
regionSelect.value = String(selectedIndex);
|
||||
updateCanvasSizeLock();
|
||||
validateRegionNames();
|
||||
}
|
||||
|
||||
function renderOverlay() {
|
||||
@@ -290,6 +374,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
function requestOverlayRender() {
|
||||
if (overlayRenderFrame) {
|
||||
return;
|
||||
}
|
||||
|
||||
overlayRenderFrame = window.requestAnimationFrame(function () {
|
||||
overlayRenderFrame = 0;
|
||||
renderOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
updateAspectRatio();
|
||||
renderRegionSidebar();
|
||||
@@ -318,6 +413,13 @@
|
||||
setSelected(getCards().length - 1);
|
||||
}
|
||||
|
||||
function openAddRegionModal() {
|
||||
if (!regionAddModal || !window.bootstrap || !window.bootstrap.Modal) {
|
||||
return;
|
||||
}
|
||||
window.bootstrap.Modal.getOrCreateInstance(regionAddModal).show();
|
||||
}
|
||||
|
||||
function createDefaultRegion(type) {
|
||||
var count = getCards().length + 1;
|
||||
var name = 'region_' + count;
|
||||
@@ -356,7 +458,7 @@
|
||||
renderOverlay();
|
||||
function moveHandler(moveEvent) {
|
||||
draft.end = toCanvasPoint(moveEvent);
|
||||
renderOverlay();
|
||||
requestOverlayRender();
|
||||
}
|
||||
function upHandler(upEvent) {
|
||||
draft.end = toCanvasPoint(upEvent);
|
||||
@@ -367,7 +469,7 @@
|
||||
addRegion({ region_key: 'region_' + (getCards().length + 1), label: 'Region ' + (getCards().length + 1), region_type: 'text', x: region.x, y: region.y, width: region.width, height: region.height, z_index: 1 });
|
||||
}
|
||||
draft = null;
|
||||
renderOverlay();
|
||||
requestOverlayRender();
|
||||
document.removeEventListener('mousemove', moveHandler);
|
||||
document.removeEventListener('mouseup', upHandler);
|
||||
}
|
||||
@@ -384,7 +486,7 @@
|
||||
var dy = currentPoint.y - startPoint.y;
|
||||
var next = clampRegion({ x: startRegion.x + dx, y: startRegion.y + dy, width: startRegion.width, height: startRegion.height });
|
||||
writeCard(cardAt(index), { x: next.x, y: next.y });
|
||||
renderOverlay();
|
||||
requestOverlayRender();
|
||||
}
|
||||
function upHandler() {
|
||||
document.removeEventListener('mousemove', moveHandler);
|
||||
@@ -410,7 +512,7 @@
|
||||
if (next.height < 12) { if (dir.indexOf('n') !== -1) { next.y -= 12 - next.height; } next.height = 12; }
|
||||
next = clampRegion(next);
|
||||
writeCard(cardAt(index), { x: next.x, y: next.y, width: next.width, height: next.height });
|
||||
renderOverlay();
|
||||
requestOverlayRender();
|
||||
}
|
||||
function upHandler() {
|
||||
document.removeEventListener('mousemove', moveHandler);
|
||||
@@ -420,15 +522,20 @@
|
||||
document.addEventListener('mouseup', upHandler);
|
||||
}
|
||||
|
||||
addTextRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('text')); });
|
||||
var addHtmlRegionButton = document.getElementById('add-html-region');
|
||||
if (addHtmlRegionButton) {
|
||||
addHtmlRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('html')); });
|
||||
}
|
||||
addImageRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('image')); });
|
||||
var addWebpageRegionButton = document.getElementById('add-webpage-region');
|
||||
if (addWebpageRegionButton) {
|
||||
addWebpageRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('webpage')); });
|
||||
if (addRegionButton && regionAddModal) {
|
||||
var addRegionTypeButtons = regionAddModal.querySelectorAll('[data-add-region-type]');
|
||||
addRegionButton.addEventListener('click', function () {
|
||||
openAddRegionModal();
|
||||
});
|
||||
Array.prototype.forEach.call(addRegionTypeButtons, function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
var regionType = button.getAttribute('data-add-region-type');
|
||||
addRegion(createDefaultRegion(regionType));
|
||||
if (window.bootstrap && window.bootstrap.Modal) {
|
||||
window.bootstrap.Modal.getOrCreateInstance(regionAddModal).hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
backgroundInput.addEventListener('change', function () {
|
||||
var file = backgroundInput.files && backgroundInput.files[0];
|
||||
@@ -445,6 +552,9 @@
|
||||
backgroundEmpty.style.display = 'block';
|
||||
});
|
||||
}
|
||||
if (backgroundColorInput) {
|
||||
backgroundColorInput.addEventListener('input', updateStageBackgroundColor);
|
||||
}
|
||||
canvasSizeSelect.addEventListener('change', function () { syncCanvasSizeSelection(); render(); });
|
||||
canvasWidthInput.addEventListener('input', render);
|
||||
canvasHeightInput.addEventListener('input', render);
|
||||
@@ -470,12 +580,27 @@
|
||||
setSelected(-1);
|
||||
startDraw(event);
|
||||
});
|
||||
document.getElementById('template-form').addEventListener('submit', function () {
|
||||
syncCanvasSizeSelection();
|
||||
regionsJsonInput.value = JSON.stringify(getCards().map(readCard));
|
||||
});
|
||||
if (templateForm) {
|
||||
templateForm.addEventListener('formdata', function (event) {
|
||||
if (!validateRegionNames()) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
syncCanvasSizeSelection();
|
||||
event.formData.set('regions_json', JSON.stringify(getCards().map(readCard)));
|
||||
});
|
||||
|
||||
templateForm.addEventListener('submit', function () {
|
||||
if (!validateRegionNames()) {
|
||||
return;
|
||||
}
|
||||
syncCanvasSizeSelection();
|
||||
regionsJsonInput.value = JSON.stringify(getCards().map(readCard));
|
||||
});
|
||||
}
|
||||
|
||||
renderRegionList(existingRegions);
|
||||
syncCanvasSizeSelection();
|
||||
updateStageBackgroundColor();
|
||||
render();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user