Source: utils/template/functions/media.js

import { createLightboxImage } from "../../../media/viewer/imagePreview.js";
import { initVideo } from "../../../media/viewer/videoPlayer.js";
import { VideoPlayerShortcuts } from "../../../media/player/VideoPlayerShortcuts.js";
import { VideoPlayerUtils } from "../../../media/player/VideoPlayerUtils.js";
import { guessIFDOKey, getHTMLOfIFDOIcon } from "../../../media/viewer/iFDO.js";

/**
 * 
 * 
 * @param {string} src - Image URL.
 * @param {string} width (optional) - Image width in pixel.
 * @param {string} height (optional) - Image height in pixel.
 * @param {string} [srcset] (optional) - Image srcset attribute with width descriptor.
 * @param {string} [showPlaceholder] - Show "photo is not available" image if src is null.
 * @returns {HTMLElement} div placeholder
 */
export function displayImage(src, width, height, srcset, showPlaceholder = "false") {

    showPlaceholder = (showPlaceholder === 'true');
    if (!showPlaceholder && src == null)
        return

    const target = document.createElement("div");
    target.classList.add("image-wrapper");


    if (src && width == null && height == null) {
        const img = new Image();
        img.onload = () => {
            const container = createLightboxImage(src, img.width, img.height, srcset);
            target.appendChild(container);
        };
        img.src = src;
        if (srcset != null)
            img.srcset = srcset;
    }
    else {
        if (width == null && height == null)
            [width, height] = [400, 300];

        const container = createLightboxImage(src, width, height, srcset);
        target.appendChild(container)
    }

    return target;
}

// static video player instance
let videoPlayerDiv = null;

/**
 * 
 * @param {string} media 
 * @param {string} width 
 * @param {string} height 
 * @param {string} thumbnail (optional)
 * @param {string} cover (optional)
 * @param {string} poster (optional)
 * @returns {HTMLElement} div placeholder
 */
export function displayVideo(media, width, height, thumbnail, cover, poster) {
    if (videoPlayerDiv) {
        videoPlayerDiv.remove();
        videoPlayerDiv = null;
    }

    if (media == null)
        return undefined

    videoPlayerDiv = document.createElement("div");
    videoPlayerDiv.classList.add("video");

    const video = initVideo({
        'media': media,
        'thumbnail': thumbnail,
        'cover': cover,
        'poster': poster || VideoPlayerUtils.getPoster(),
        'initPlayerWithKeyFocus': true
    });
    const videoContainer = document.createElement('div');
    if (width && height) {
        videoContainer.style = `width: 100%; height: 0; padding-bottom: calc(100% * ${height}/${width}); position: relative;`
        video.style = 'position: absolute; width: 100%; height: 100%';
    }
    else {
        console.warn('The video player is initialized without width and height. As a result, the dimensions of the video player are not known until the video is loaded. This can lead to sudden changes in the layout when the video player is displayed.')
    }
    videoContainer.append(video)
    videoPlayerDiv.appendChild(videoContainer)

    return videoPlayerDiv;
}

// static video player keyboard shortcut instance
let shortcutsWindow = null;

/**
 * @returns {HTMLElement} div placeholder
 * 
 */
export function displayVideoPlayerKeys() {
    const target = document.createElement("div");
    const keyboardShortcutLink = document.createElement("a");
    keyboardShortcutLink.style = "display: inline-block; text-decoration: none;";
    keyboardShortcutLink.href = "#";
    keyboardShortcutLink.innerHTML = "<i class='fas fa-keyboard'></i> Keyboard Shortcuts";
    keyboardShortcutLink.onclick = e => {
        e.preventDefault();
        if (!shortcutsWindow)
            shortcutsWindow = new VideoPlayerShortcuts();
        if (!shortcutsWindow.isOpened)
            shortcutsWindow.open();
        else
            shortcutsWindow.close();
    }

    if (!videoPlayerDiv)
        target.style.display = 'None';

    target.appendChild(keyboardShortcutLink);
    return target;
}

/**
 * @param {object} featureProperties
 * @returns {HTMLElement} div placeholder
 * 
 */
export function displayIFDOIcons(featureProperties) {
    const containerElement = document.createElement('div');
    containerElement.classList.add('inline-block-container-ifdo-icon');
    containerElement.setAttribute('data-config-remove-empty-column', false);
    let containerChildrenHTML = "";

    for (const [featurePropertiesKey, featurePropertiesValue] of Object.entries(featureProperties)) {
        const iFDOKey = guessIFDOKey(featurePropertiesKey);
        const iFDOValue = featurePropertiesValue;
        if (iFDOKey && iFDOValue)
            containerChildrenHTML += getHTMLOfIFDOIcon(iFDOKey, iFDOValue);
    }

    containerElement.innerHTML = containerChildrenHTML;
    containerElement.addEventListener("append", e => {
        containerElement.parentNode.parentNode.classList.add("no-copy");
        containerElement.parentNode.parentNode.setAttribute("data-button-expansion", true);
    })

    return containerElement;
}