updated the fit function

app/static/index.html

@@ -134,6 +134,27 @@
             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)
+                    ) {
+                        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