jellyfin-web/src/bower_components/emby-webcomponents/backdrop/backdrop.js

define(["browser", "connectionManager", "playbackManager", "dom", "css!./style"], function(browser, connectionManager, playbackManager, dom) {
    "use strict";

    function enableAnimation(elem) {
        return !browser.slow
    }

    function enableRotation() {
        return !browser.tv && !browser.firefox
    }

    function Backdrop() {}

    function getBackdropContainer() {
        return backdropContainer || (backdropContainer = document.querySelector(".backdropContainer")), backdropContainer || (backdropContainer = document.createElement("div"), backdropContainer.classList.add("backdropContainer"), document.body.insertBefore(backdropContainer, document.body.firstChild)), backdropContainer
    }

    function clearBackdrop(clearAll) {
        clearRotation(), currentLoadingBackdrop && (currentLoadingBackdrop.destroy(), currentLoadingBackdrop = null), getBackdropContainer().innerHTML = "", clearAll && (hasExternalBackdrop = !1), internalBackdrop(!1)
    }

    function getBackgroundContainer() {
        return backgroundContainer || (backgroundContainer = document.querySelector(".backgroundContainer")), backgroundContainer
    }

    function setBackgroundContainerBackgroundEnabled() {
        hasInternalBackdrop || hasExternalBackdrop ? getBackgroundContainer().classList.add("withBackdrop") : getBackgroundContainer().classList.remove("withBackdrop")
    }

    function internalBackdrop(enabled) {
        hasInternalBackdrop = enabled, setBackgroundContainerBackgroundEnabled()
    }

    function externalBackdrop(enabled) {
        hasExternalBackdrop = enabled, setBackgroundContainerBackgroundEnabled()
    }

    function setBackdropImage(url) {
        currentLoadingBackdrop && (currentLoadingBackdrop.destroy(), currentLoadingBackdrop = null);
        var elem = getBackdropContainer(),
            existingBackdropImage = elem.querySelector(".displayingBackdropImage");
        if (existingBackdropImage && existingBackdropImage.getAttribute("data-url") === url) {
            if (existingBackdropImage.getAttribute("data-url") === url) return;
            existingBackdropImage.classList.remove("displayingBackdropImage")
        }
        var instance = new Backdrop;
        instance.load(url, elem, existingBackdropImage), currentLoadingBackdrop = instance
    }

    function getBackdropMaxWidth() {
        var width = dom.getWindowSize().innerWidth;
        if (-1 !== standardWidths.indexOf(width)) return width;
        return width = 100 * Math.floor(width / 100), Math.min(width, 1920)
    }

    function getItemImageUrls(item, imageOptions) {
        imageOptions = imageOptions || {};
        var apiClient = connectionManager.getApiClient(item.ServerId);
        return item.BackdropImageTags && item.BackdropImageTags.length > 0 ? item.BackdropImageTags.map(function(imgTag, index) {
            return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
                type: "Backdrop",
                tag: imgTag,
                maxWidth: getBackdropMaxWidth(),
                index: index
            }))
        }) : item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length ? item.ParentBackdropImageTags.map(function(imgTag, index) {
            return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
                type: "Backdrop",
                tag: imgTag,
                maxWidth: getBackdropMaxWidth(),
                index: index
            }))
        }) : []
    }

    function getImageUrls(items, imageOptions) {
        for (var list = [], onImg = function(img) {
                list.push(img)
            }, i = 0, length = items.length; i < length; i++) {
            getItemImageUrls(items[i], imageOptions).forEach(onImg)
        }
        return list
    }

    function arraysEqual(a, b) {
        if (a === b) return !0;
        if (null == a || null == b) return !1;
        if (a.length !== b.length) return !1;
        for (var i = 0; i < a.length; ++i)
            if (a[i] !== b[i]) return !1;
        return !0
    }

    function setBackdrops(items, imageOptions, enableImageRotation) {
        var images = getImageUrls(items, imageOptions);
        images.length ? startRotation(images, enableImageRotation) : clearBackdrop()
    }

    function startRotation(images, enableImageRotation) {
        arraysEqual(images, currentRotatingImages) || (clearRotation(), currentRotatingImages = images, currentRotationIndex = -1, images.length > 1 && !1 !== enableImageRotation && enableRotation() && (rotationInterval = setInterval(onRotationInterval, 24e3)), onRotationInterval())
    }

    function onRotationInterval() {
        if (!playbackManager.isPlayingLocally(["Video"])) {
            var newIndex = currentRotationIndex + 1;
            newIndex >= currentRotatingImages.length && (newIndex = 0), currentRotationIndex = newIndex, setBackdropImage(currentRotatingImages[newIndex])
        }
    }

    function clearRotation() {
        var interval = rotationInterval;
        interval && clearInterval(interval), rotationInterval = null, currentRotatingImages = [], currentRotationIndex = -1
    }

    function setBackdrop(url, imageOptions) {
        url && "string" != typeof url && (url = getImageUrls([url], imageOptions)[0]), url ? (clearRotation(), setBackdropImage(url)) : clearBackdrop()
    }
    Backdrop.prototype.load = function(url, parent, existingBackdropImage) {
        var img = new Image,
            self = this;
        img.onload = function() {
            if (!self.isDestroyed) {
                var backdropImage = document.createElement("div");
                if (backdropImage.classList.add("backdropImage"), backdropImage.classList.add("displayingBackdropImage"), backdropImage.style.backgroundImage = "url('" + url + "')", backdropImage.setAttribute("data-url", url), backdropImage.classList.add("backdropImageFadeIn"), parent.appendChild(backdropImage), !enableAnimation(backdropImage)) return existingBackdropImage && existingBackdropImage.parentNode && existingBackdropImage.parentNode.removeChild(existingBackdropImage), void internalBackdrop(!0);
                var onAnimationComplete = function() {
                    dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
                        once: !0
                    }), backdropImage === self.currentAnimatingElement && (self.currentAnimatingElement = null), existingBackdropImage && existingBackdropImage.parentNode && existingBackdropImage.parentNode.removeChild(existingBackdropImage)
                };
                dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
                    once: !0
                }), internalBackdrop(!0)
            }
        }, img.src = url
    }, Backdrop.prototype.cancelAnimation = function() {
        var elem = this.currentAnimatingElement;
        elem && (elem.classList.remove("backdropImageFadeIn"), this.currentAnimatingElement = null)
    }, Backdrop.prototype.destroy = function() {
        this.isDestroyed = !0, this.cancelAnimation()
    };
    var backdropContainer, backgroundContainer, hasInternalBackdrop, hasExternalBackdrop, currentLoadingBackdrop, rotationInterval, standardWidths = [480, 720, 1280, 1440, 1920],
        currentRotatingImages = [],
        currentRotationIndex = -1;
    return {
        setBackdrops: setBackdrops,
        setBackdrop: setBackdrop,
        clear: clearBackdrop,
        externalBackdrop: externalBackdrop
    }
});