updated code

app/static/settings.html

@@ -80,18 +80,111 @@
 
     <script>
         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 isPaused = false;
 
         // Load configuration on page load
         async function loadConfig() {
-            const response = await fetch('/static/app_config.json'); // Updated path for app_config.json
-            const config = await response.json();
-            document.getElementById('player_orientation').value = config.player_orientation;
-            document.getElementById('player_name').value = config.player_name;
-            document.getElementById('quickconnect_code').value = config.quickconnect_code;
-            document.getElementById('server_address').value = config.server_address;
-            document.getElementById('port').value = config.port;
+            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('/updated_playlist.json'); // Fetch updated_playlist.json
+                if (!response.ok) {
+                    throw new Error(`Failed to load playlist: ${response.statusText}`);
+                }
+                playlist = await response.json(); // Store playlist in the global variable
+                console.log("Updated playlist loaded:", playlist); // Debug log
+            } catch (error) {
+                console.error("Error loading updated playlist:", error);
+            }
+        }
+
+        // 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;
+
+                // 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 (
+                        (appConfig.player_orientation === 'landscape' && !isImageLandscape) ||
+                        (appConfig.player_orientation === 'portrait' && isImageLandscape)
+                    ) {
+                        img.style.objectFit = 'contain'; // Show the full image without cropping
+                    } else {
+                        img.style.objectFit = 'cover'; // Crop to fit the container
+                    }
+                };
+
+                playlistContainer.appendChild(img);
+
+                // Display the image for the specified duration
+                playbackInterval = setTimeout(() => {
+                    if (!isPaused) {
+                        currentIndex++;
+                        playCurrentItem();
+                    }
+                }, currentItem.duration * 1000);
+            } else if (currentItem.type === 'video') {
+                const video = document.createElement('video');
+                video.src = currentItem.url;
+                video.autoplay = true;
+                video.controls = false;
+                playlistContainer.appendChild(video);
+
+                // Ensure the video starts playing
+                video.play().catch(error => {
+                    console.error("Error starting video playback:", error);
+                });
+
+                // Play the video and move to the next item after it ends
+                video.onended = () => {
+                    if (!isPaused) {
+                        currentIndex++;
+                        playCurrentItem();
+                    }
+                };
+            }
+        }
+
+        // Initialize the page
+        async function initialize() {
+            await loadConfig(); // Load app configuration
+            await loadPlaylist(); // Load playlist
+            playCurrentItem(); // Start playing the playlist
+        }
+
+        // Start initialization when the page loads
+        window.onload = initialize;
+
         // Save configuration
         async function saveConfig() {
             const config = {
@@ -115,9 +208,6 @@
         function goHome() {
             window.location.href = '/';
         }
-
-        // Load configuration when the page loads
-        loadConfig();
     </script>
 </body>
 </html>