diff --git a/app/static/index.html b/app/static/index.html index 0c66e8c..35613e4 100755 --- a/app/static/index.html +++ b/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