updated code
This commit is contained in:
@@ -83,71 +83,64 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const apiBase = 'http://localhost:1025'; // Update to match your Flask app's port
|
||||
const playlistContainer = document.getElementById('playlist-container');
|
||||
const controlsWrapper = document.getElementById('controls-wrapper');
|
||||
const playPauseButton = document.getElementById('playPauseButton');
|
||||
let playlist = [];
|
||||
let currentIndex = 0;
|
||||
const apiBase = '/api';
|
||||
let appConfig = {}; // Global variable to store app configuration
|
||||
let playlist = []; // Global variable for the playlist
|
||||
let currentIndex = 0; // Current index in the playlist
|
||||
let playbackInterval;
|
||||
let inactivityTimer;
|
||||
let isPaused = false;
|
||||
let isMuted = true; // Start with muted video
|
||||
|
||||
// Function to load the playlist from updated_playlist.json
|
||||
// Load configuration on page load
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const response = await fetch('/static/app_config.json'); // Fetch app_config.json
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load configuration: ${response.statusText}`);
|
||||
}
|
||||
appConfig = await response.json(); // Store configuration in the global variable
|
||||
console.log("App configuration loaded:", appConfig); // Debug log
|
||||
} catch (error) {
|
||||
console.error("Error loading app configuration:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Load playlist from updated_playlist.json
|
||||
async function loadPlaylist() {
|
||||
try {
|
||||
const response = await fetch(`${apiBase}/updated_playlist.json`);
|
||||
const response = await fetch('/updated_playlist.json'); // Fetch updated_playlist.json
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load playlist: ${response.statusText}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
if (JSON.stringify(data) !== JSON.stringify(playlist)) {
|
||||
playlist = data; // Update the playlist only if it has changed
|
||||
console.log("Playlist updated:", playlist); // Debug log
|
||||
currentIndex = 0; // Reset to the first item
|
||||
startPlaylist(); // Restart the playlist
|
||||
}
|
||||
playlist = await response.json(); // Store playlist in the global variable
|
||||
console.log("Updated playlist loaded:", playlist); // Debug log
|
||||
} catch (error) {
|
||||
console.error("Error loading playlist:", error);
|
||||
console.error("Error loading updated playlist:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to start playing the playlist
|
||||
function startPlaylist() {
|
||||
if (playlist.length === 0) {
|
||||
console.error("No items in the playlist.");
|
||||
return;
|
||||
}
|
||||
playCurrentItem();
|
||||
}
|
||||
|
||||
// Function to play the current item in the playlist
|
||||
// Play the current item in the playlist
|
||||
async function playCurrentItem() {
|
||||
if (currentIndex >= playlist.length) {
|
||||
currentIndex = 0; // Loop back to the beginning
|
||||
}
|
||||
|
||||
const currentItem = playlist[currentIndex];
|
||||
console.log("Playing current item:", currentItem); // Debug log
|
||||
const playlistContainer = document.getElementById('playlist-container');
|
||||
playlistContainer.innerHTML = ''; // Clear the container
|
||||
|
||||
if (currentItem.type === 'image') {
|
||||
const img = document.createElement('img');
|
||||
img.src = currentItem.url;
|
||||
|
||||
// Fetch the orientation setting from app_config.json
|
||||
const response = await fetch('/static/app_config.json');
|
||||
const config = await response.json();
|
||||
const playerOrientation = config.player_orientation; // "landscape" or "portrait"
|
||||
|
||||
// Check the orientation of the image and adjust the object-fit property
|
||||
const image = new Image();
|
||||
image.src = currentItem.url;
|
||||
image.onload = () => {
|
||||
const isImageLandscape = image.width > image.height;
|
||||
if (
|
||||
(playerOrientation === 'landscape' && !isImageLandscape) ||
|
||||
(playerOrientation === 'portrait' && isImageLandscape)
|
||||
(appConfig.player_orientation === 'landscape' && !isImageLandscape) ||
|
||||
(appConfig.player_orientation === 'portrait' && isImageLandscape)
|
||||
) {
|
||||
img.style.objectFit = 'contain'; // Show the full image without cropping
|
||||
} else {
|
||||
@@ -163,13 +156,12 @@
|
||||
currentIndex++;
|
||||
playCurrentItem();
|
||||
}
|
||||
}, currentItem.duration * 1000 + (isPaused ? 10000 : 0)); // Add 10 seconds if paused
|
||||
}, currentItem.duration * 1000);
|
||||
} else if (currentItem.type === 'video') {
|
||||
const video = document.createElement('video');
|
||||
video.src = currentItem.url;
|
||||
video.autoplay = true;
|
||||
video.controls = false;
|
||||
video.muted = isMuted; // Start muted if isMuted is true
|
||||
playlistContainer.appendChild(video);
|
||||
|
||||
// Ensure the video starts playing
|
||||
@@ -187,15 +179,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Function to unmute the video
|
||||
function unmuteVideo() {
|
||||
isMuted = false; // Set isMuted to false
|
||||
const video = playlistContainer.querySelector('video');
|
||||
if (video) {
|
||||
video.muted = false; // Unmute the video
|
||||
}
|
||||
}
|
||||
|
||||
// Function to stop playback
|
||||
function stopMedia() {
|
||||
clearTimeout(playbackInterval);
|
||||
@@ -204,7 +187,6 @@
|
||||
|
||||
// Function to play the previous item
|
||||
function previousMedia() {
|
||||
unmuteVideo(); // Unmute the video
|
||||
stopMedia();
|
||||
currentIndex = (currentIndex - 1 + playlist.length) % playlist.length;
|
||||
playCurrentItem();
|
||||
@@ -212,14 +194,13 @@
|
||||
|
||||
// Function to refresh the playlist
|
||||
function refreshPlaylist() {
|
||||
unmuteVideo(); // Unmute the video
|
||||
loadPlaylist(); // Reload the playlist
|
||||
}
|
||||
|
||||
// Function to toggle play/pause
|
||||
function togglePlayPause() {
|
||||
unmuteVideo(); // Unmute the video
|
||||
isPaused = !isPaused;
|
||||
const playPauseButton = document.getElementById('playPauseButton');
|
||||
if (isPaused) {
|
||||
playPauseButton.innerHTML = '<i class="fas fa-pause"></i>'; // Change to pause icon
|
||||
} else {
|
||||
@@ -230,7 +211,6 @@
|
||||
|
||||
// Function to play the next item
|
||||
function nextMedia() {
|
||||
unmuteVideo(); // Unmute the video
|
||||
stopMedia();
|
||||
currentIndex = (currentIndex + 1) % playlist.length;
|
||||
playCurrentItem();
|
||||
@@ -240,27 +220,15 @@
|
||||
window.location.href = '/static/settings.html';
|
||||
}
|
||||
|
||||
// Function to hide controls after inactivity
|
||||
function hideControls() {
|
||||
controlsWrapper.classList.add('hidden');
|
||||
// Initialize the page
|
||||
async function initialize() {
|
||||
await loadConfig(); // Load app configuration
|
||||
await loadPlaylist(); // Load playlist
|
||||
playCurrentItem(); // Start playing the playlist
|
||||
}
|
||||
|
||||
// Function to reset inactivity timer
|
||||
function resetInactivityTimer() {
|
||||
controlsWrapper.classList.remove('hidden'); // Show controls
|
||||
clearTimeout(inactivityTimer); // Clear the previous timer
|
||||
inactivityTimer = setTimeout(hideControls, 10000); // Set a new timer for 10 seconds
|
||||
}
|
||||
|
||||
// Add event listeners for mouse movement
|
||||
document.addEventListener('mousemove', resetInactivityTimer);
|
||||
document.addEventListener('keydown', resetInactivityTimer);
|
||||
|
||||
// Initialize inactivity timer on page load
|
||||
resetInactivityTimer();
|
||||
|
||||
// Load playlist on page load
|
||||
loadPlaylist();
|
||||
// Start initialization when the page loads
|
||||
window.onload = initialize;
|
||||
|
||||
// Start periodic playlist reload
|
||||
setInterval(loadPlaylist, 300000); // Check every 5 minutes (300,000 ms)
|
||||
|
||||
Reference in New Issue
Block a user