document.addEventListener("DOMContentLoaded", function () {
const tvList = document.getElementById("tvList");
const popup = document.getElementById("tvPopup");
const video = document.getElementById("tvVideo");
const placeholder = document.getElementById("videoPlaceholder");
const fallback = document.getElementById("videoFallback");
const closeBtn = document.getElementById("closeBtn");
const retryBtn = document.getElementById("retryBtn");
const fullscreenBtn = document.getElementById("fullscreenBtn");
let hls;
function playStream(url) {
placeholder.style.display = "flex";
fallback.style.display = "none";
video.style.display = "none";
if (hls) {
hls.destroy();
}
if (Hls.isSupported()) {
hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
placeholder.style.display = "none";
video.style.display = "block";
video.play();
});
hls.on(Hls.Events.ERROR, function (event, data) {
placeholder.style.display = "none";
fallback.style.display = "block";
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('loadedmetadata', function () {
placeholder.style.display = "none";
video.style.display = "block";
video.play();
});
} else {
placeholder.style.display = "none";
fallback.style.display = "block";
}
}
tvList.querySelectorAll(".tv-card").forEach(card => {
card.addEventListener("click", () => {
const url = card.dataset.url;
popup.setAttribute("aria-hidden", "false");
popup.style.display = "block";
playStream(url);
});
});
document.getElementById("tvScrollList").querySelectorAll(".tv-scroll-item").forEach(item => {
item.addEventListener("click", () => {
const url = item.dataset.url;
playStream(url);
});
});
closeBtn.addEventListener("click", () => {
popup.setAttribute("aria-hidden", "true");
popup.style.display = "none";
if (hls) hls.destroy();
video.pause();
video.removeAttribute("src");
video.load();
});
retryBtn.addEventListener("click", () => {
if (hls && hls.url) {
playStream(hls.url);
}
});
fullscreenBtn.addEventListener("click", () => {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
});
});