document.addEventListener("DOMContentLoaded", function () {
const container = document.getElementById("video-app-container");
if (!container) return;
let videos = [];
let selectedVideo = null;
let isPlaying = false;
function createButton(text, onClick) {
const btn = document.createElement("button");
btn.textContent = text;
btn.onclick = onClick;
btn.style.margin = "5px";
btn.style.padding = "10px";
btn.style.background = "#BE0000";
btn.style.color = "white";
btn.style.border = "none";
btn.style.cursor = "pointer";
return btn;
}
function uploadVideo(event) {
const file = event.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
videos.push(url);
renderQueue();
}
}
function renderQueue() {
queueContainer.innerHTML = "";
videos.forEach((video, index) => {
const btn = createButton(`Video ${index + 1}`, () => selectVideo(video));
queueContainer.appendChild(btn);
});
}
function selectVideo(video) {
selectedVideo = video;
}
function toggleLive() {
if (!selectedVideo) return;
isPlaying = !isPlaying;
if (isPlaying) {
videoElement.src = selectedVideo;
videoElement.style.display = "block";
videoElement.play();
} else {
videoElement.pause();
videoElement.style.display = "none";
}
}
container.innerHTML = `
`;
const uploadInput = document.getElementById("upload");
const queueContainer = document.getElementById("queue");
const liveButton = document.getElementById("liveButton");
const videoElement = document.getElementById("videoPlayer");
uploadInput.addEventListener("change", uploadVideo);
liveButton.addEventListener("click", toggleLive);
});