admin/35557-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3

Browse Source
This commit is contained in:
Flatlogic Bot 2025-11-07 22:28:51 +00:00
parent 2911c02f8a
commit 3ddc00e28e
3 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/custom.css
View File

@ -36,6 +36,9 @@ body {
position: relative;
overflow: hidden;
transition: background-color 0.3s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.video-panel .panel-label {

41
assets/js/main.js
View File

@ -15,7 +15,12 @@ document.addEventListener('DOMContentLoaded', function () {
const modalSaveBtn = document.getElementById('modal-save-btn');
const sceneNameInput = document.getElementById('scene-name-input');
const sceneTypeSelect = document.getElementById('scene-type-select');
// Source settings elements
const colorSettings = document.getElementById('source-color-group');
const imageSettings = document.getElementById('source-image-group');
const sceneColorInput = document.getElementById('scene-color-input');
const sceneImageUrlInput = document.getElementById('scene-image-url-input');
// Data Store
let scenes = [];
@ -73,11 +78,18 @@ document.addEventListener('DOMContentLoaded', function () {
activePreviewSceneId = scene.id;
// Clear previous styles
previewPanel.style.backgroundColor = '#000';
previewPanel.style.backgroundImage = 'none';
previewContent.textContent = scene.name;
switch (scene.type) {
case 'color':
previewPanel.style.backgroundColor = scene.value;
break;
case 'image':
previewPanel.style.backgroundImage = `url('${scene.value}')`;
break;
default:
previewPanel.style.backgroundColor = '#000';
break;
@ -89,6 +101,7 @@ document.addEventListener('DOMContentLoaded', function () {
activePreviewSceneId = null;
previewContent.textContent = 'Select a Scene';
previewPanel.style.backgroundColor = '#000';
previewPanel.style.backgroundImage = 'none';
renderSceneList();
}
@ -127,6 +140,7 @@ document.addEventListener('DOMContentLoaded', function () {
programContent.textContent = previewScene.name;
programPanel.style.backgroundColor = previewPanel.style.backgroundColor;
programPanel.style.backgroundImage = previewPanel.style.backgroundImage;
clearPreview();
});
@ -139,6 +153,12 @@ document.addEventListener('DOMContentLoaded', function () {
modalCloseBtn.addEventListener('click', hideModal);
modalCancelBtn.addEventListener('click', hideModal);
sceneTypeSelect.addEventListener('change', (e) => {
const type = e.target.value;
colorSettings.style.display = type === 'color' ? 'block' : 'none';
imageSettings.style.display = type === 'image' ? 'block' : 'none';
});
modalSaveBtn.addEventListener('click', () => {
const name = sceneNameInput.value.trim();
if (!name) {
@ -146,7 +166,17 @@ document.addEventListener('DOMContentLoaded', function () {
return;
}
const type = sceneTypeSelect.value;
const value = sceneColorInput.value; // For now, only color
let value;
if (type === 'color') {
value = sceneColorInput.value;
} else if (type === 'image') {
value = sceneImageUrlInput.value.trim();
if (!value) {
alert('Please enter an image URL.');
return;
}
}
const newScene = addScene(name, type, value);
updatePreview(newScene.id);
@ -154,6 +184,10 @@ document.addEventListener('DOMContentLoaded', function () {
// Reset form and hide modal
sceneNameInput.value = '';
sceneColorInput.value = '#1e90ff';
sceneImageUrlInput.value = '';
sceneTypeSelect.value = 'color';
colorSettings.style.display = 'block';
imageSettings.style.display = 'none';
hideModal();
});
@ -161,8 +195,8 @@ document.addEventListener('DOMContentLoaded', function () {
function initialize() {
// Add some default scenes
addScene('Main Camera', 'color', '#003366');
addScene('Starting Soon Screen', 'image', 'https://images.pexels.com/photos/1762851/pexels-photo-1762851.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
addScene('Screen Share', 'color', '#006633');
addScene('Starting Soon', 'color', '#333333');
// Set initial program scene for display
const firstScene = scenes[0];
@ -170,7 +204,8 @@ document.addEventListener('DOMContentLoaded', function () {
activeProgramSceneId = firstScene.id;
programContent.textContent = firstScene.name;
programPanel.style.backgroundColor = firstScene.value;
}
programPanel.style.backgroundImage = 'none';
}
// Select the second scene for preview initially
if (scenes.length > 1) {

10
index.php
View File

@ -94,14 +94,20 @@
<label for="scene-type-select" class="form-label">Source Type</label>
<select class="form-select" id="scene-type-select">
<option value="color">Solid Color</option>
<option value="image" disabled>Image (soon)</option>
<option value="image">Image</option>
<option value="video" disabled>Video (soon)</option>
</select>
</div>
<div id="source-color-group" class="mb-3">
<div id="source-color-group" class="mb-3 source-settings">
<label for="scene-color-input" class="form-label">Background Color</label>
<input type="color" class="form-control form-control-color" id="scene-color-input" value="#1e90ff">
</div>
<div id="source-image-group" class="mb-3 source-settings" style="display: none;">
<label for="scene-image-url-input" class="form-label">Image URL</label>
<input type="url" class="form-control" id="scene-image-url-input" placeholder="https://example.com/image.jpg">
</div>
<!-- Other source type options will go here -->
</form>
</div>