jellyfish-web/src/components/slideshow/slideshow.js

define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost) {
    'use strict';

    function getImageUrl(item, options, apiClient) {
        options = options || {};
        options.type = options.type || "Primary";

        if (typeof (item) === 'string') {
            return apiClient.getScaledImageUrl(item, options);
        }

        if (item.ImageTags && item.ImageTags[options.type]) {

            options.tag = item.ImageTags[options.type];
            return apiClient.getScaledImageUrl(item.Id, options);
        }

        if (options.type === 'Primary') {
            if (item.AlbumId && item.AlbumPrimaryImageTag) {

                options.tag = item.AlbumPrimaryImageTag;
                return apiClient.getScaledImageUrl(item.AlbumId, options);
            }
        }

        return null;
    }

    function getBackdropImageUrl(item, options, apiClient) {
        options = options || {};
        options.type = options.type || "Backdrop";

        // If not resizing, get the original image
        if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
            options.quality = 100;
        }

        if (item.BackdropImageTags && item.BackdropImageTags.length) {

            options.tag = item.BackdropImageTags[0];
            return apiClient.getScaledImageUrl(item.Id, options);
        }

        return null;
    }

    function getImgUrl(item) {
        var apiClient = connectionManager.getApiClient(item.ServerId);
        var imageOptions = {};

        if (item.BackdropImageTags && item.BackdropImageTags.length) {
            return getBackdropImageUrl(item, imageOptions, apiClient);
        } else {
            if (item.MediaType === 'Photo') {
                return apiClient.getItemDownloadUrl(item.Id);
            }
            imageOptions.type = "Primary";
            return getImageUrl(item, imageOptions, apiClient);
        }
    }

    function getIcon(icon, cssClass, canFocus, autoFocus) {
        var tabIndex = canFocus ? '' : ' tabindex="-1"';
        autoFocus = autoFocus ? ' autofocus' : '';
        return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="material-icons slideshowButtonIcon ' + icon + '"></i></button>';
    }

    function setUserScalable(scalable) {
        try {
            appHost.setUserScalable(scalable);
        } catch (err) {
            console.error('error in appHost.setUserScalable: ' + err);
        }
    }

    return function (options) {

        var self = this;
        var swiperInstance;
        var dlg;
        var currentTimeout;
        var currentOptions;
        var _osdOpen = false;

        // small hack since this is not possible anyway
        if (browser.chromecast) {
            options.interactive = false;
        }

        function createElements(options) {
            currentOptions = options;

            dlg = dialogHelper.createDialog({
                exitAnimationDuration: options.interactive ? 400 : 800,
                size: 'fullscreen',
                autoFocus: false,
                scrollY: false,
                exitAnimation: 'fadeout',
                removeOnClose: true
            });

            dlg.classList.add('slideshowDialog');

            var html = '';

            if (options.interactive) {
                var actionButtonsOnTop = layoutManager.mobile;

                html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';

                html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
                html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);

                html += '<div class="topActionButtons">';
                if (actionButtonsOnTop) {
                    if (appHost.supports('filedownload')) {
                        html += getIcon('file_download', 'btnDownload slideshowButton', true);
                    }
                    if (appHost.supports('sharing')) {
                        html += getIcon('share', 'btnShare slideshowButton', true);
                    }
                }
                html += getIcon('close', 'slideshowButton btnSlideshowExit hide-mouse-idle-tv', false);
                html += '</div>';

                if (!actionButtonsOnTop) {
                    html += '<div class="slideshowBottomBar hide">';

                    html += getIcon('play_arrow', 'btnSlideshowPause slideshowButton', true, true);
                    if (appHost.supports('filedownload')) {
                        html += getIcon('file_download', 'btnDownload slideshowButton', true);
                    }
                    if (appHost.supports('sharing')) {
                        html += getIcon('share', 'btnShare slideshowButton', true);
                    }

                    html += '</div>';
                }

            } else {
                html += '<div class="slideshowImage"></div><h1 class="slideshowImageText"></h1>';
            }

            dlg.innerHTML = html;

            if (options.interactive) {
                dlg.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
                    dialogHelper.close(dlg);
                });

                var btnPause = dlg.querySelector('.btnSlideshowPause');
                if (btnPause) {
                    btnPause.addEventListener('click', playPause);
                }

                var btnDownload = dlg.querySelector('.btnDownload');
                if (btnDownload) {
                    btnDownload.addEventListener('click', download);
                }

                var btnShare = dlg.querySelector('.btnShare');
                if (btnShare) {
                    btnShare.addEventListener('click', share);
                }
            }

            setUserScalable(true);

            dialogHelper.open(dlg).then(function () {

                setUserScalable(false);
                stopInterval();
            });

            inputManager.on(window, onInputCommand);
            document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);

            dlg.addEventListener('close', onDialogClosed);

            if (options.interactive) {
                loadSwiper(dlg);
            }
        }

        function onAutoplayStart() {
            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
            if (btnSlideshowPause) {
                btnSlideshowPause.classList.replace("play_arrow", "pause");
            }
        }

        function onAutoplayStop() {
            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
            if (btnSlideshowPause) {
                btnSlideshowPause.classList.replace("pause", "play_arrow");
            }
        }

        function loadSwiper(dlg) {
            var slides;
            if (currentOptions.slides) {
                slides = currentOptions.slides;
            } else {
                slides = currentOptions.items;
            }

            require(['swiper'], function (Swiper) {

                swiperInstance = new Swiper(dlg.querySelector('.slideshowSwiperContainer'), {
                    // Optional parameters
                    direction: 'horizontal',
                    loop: false,
                    autoplay: false,
                    keyboard: {
                        enabled: true
                    },
                    preloadImages: true,
                    slidesPerView: 1,
                    slidesPerColumn: 1,
                    initialSlide: options.startIndex || 0,
                    speed: 240,
                    navigation: {
                        nextEl: '.btnSlideshowNext',
                        prevEl: '.btnSlideshowPrevious'
                    },
                    virtual: {
                        slides: slides,
                        cache: true,
                        renderSlide: getSwiperSlideHtml,
                        addSlidesBefore: 1,
                        addSlidesAfter: 1
                    }
                });

                swiperInstance.on('autoplayStart', onAutoplayStart);
                swiperInstance.on('autoplayStop', onAutoplayStop);
            });
        }

        function getSwiperSlideHtml(item, index) {
            if (currentOptions.slides) {
                return getSwiperSlideHtmlFromSlide(item);
            } else {
                return getSwiperSlideHtmlFromItem(item);
            }
        }

        function getSwiperSlideHtmlFromItem(item) {
            return getSwiperSlideHtmlFromSlide({
                imageUrl: getImgUrl(item),
                originalImage: getImgUrl(item, true),
                //title: item.Name,
                //description: item.Overview
                Id: item.Id,
                ServerId: item.ServerId
            });
        }

        function getSwiperSlideHtmlFromSlide(item) {
            var html = '';
            html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
            html += '<div class="slider-zoom-container">';
            html += '<img src="' + item.originalImage + '" class="swiper-slide-img">';
            html += '</div>';
            if (item.title || item.subtitle) {
                html += '<div class="slideText">';
                html += '<div class="slideTextInner">';
                if (item.title) {
                    html += '<h1 class="slideTitle">';
                    html += item.title;
                    html += '</h1>';
                }
                if (item.description) {
                    html += '<div class="slideSubtitle">';
                    html += item.description;
                    html += '</div>';
                }
                html += '</div>';
                html += '</div>';
            }
            html += '</div>';

            return html;
        }

        function getCurrentImageInfo() {
            if (swiperInstance) {
                var slide = document.querySelector('.swiper-slide-active');

                if (slide) {
                    return {
                        url: slide.getAttribute('data-original'),
                        shareUrl: slide.getAttribute('data-original'),
                        itemId: slide.getAttribute('data-itemid'),
                        serverId: slide.getAttribute('data-serverid')
                    };
                }
                return null;
            } else {
                return null;
            }
        }

        function download() {
            var imageInfo = getCurrentImageInfo();

            require(['fileDownloader'], function (fileDownloader) {
                fileDownloader.download([imageInfo]);
            });
        }

        function share() {
            var imageInfo = getCurrentImageInfo();

            navigator.share({
                url: imageInfo.shareUrl
            });
        }

        function play() {
            if (swiperInstance.autoplay) {
                swiperInstance.autoplay.start();
            }
        }

        function pause() {
            if (swiperInstance.autoplay) {
                swiperInstance.autoplay.stop();
            }
        }

        function playPause() {
            var paused = !dlg.querySelector('.btnSlideshowPause i').classList.contains("pause");
            if (paused) {
                play();
            } else {
                pause();
            }
        }

        function onDialogClosed() {
            var swiper = swiperInstance;
            if (swiper) {
                swiper.destroy(true, true);
                swiperInstance = null;
            }

            inputManager.off(window, onInputCommand);
            document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
        }

        function getOsdBottom() {
            return dlg.querySelector('.slideshowBottomBar');
        }

        function showOsd() {
            var bottom = getOsdBottom();
            if (bottom) {
                slideUpToShow(bottom);
                startHideTimer();
            }
        }

        function hideOsd() {
            var bottom = getOsdBottom();
            if (bottom) {
                slideDownToHide(bottom);
            }
        }

        var hideTimeout;

        function startHideTimer() {
            stopHideTimer();
            hideTimeout = setTimeout(hideOsd, 4000);
        }

        function stopHideTimer() {
            if (hideTimeout) {
                clearTimeout(hideTimeout);
                hideTimeout = null;
            }
        }

        function slideUpToShow(elem) {
            if (!elem.classList.contains('hide')) {
                return;
            }

            _osdOpen = true;
            elem.classList.remove('hide');

            var onFinish = function () {
                focusManager.focus(elem.querySelector('.btnSlideshowPause'));
            };

            if (!elem.animate) {
                onFinish();
                return;
            }

            requestAnimationFrame(function () {

                var keyframes = [
                    { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
                    { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
                ];
                var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
                elem.animate(keyframes, timing).onfinish = onFinish;
            });
        }

        function slideDownToHide(elem) {
            if (elem.classList.contains('hide')) {
                return;
            }

            var onFinish = function () {
                elem.classList.add('hide');
                _osdOpen = false;
            };

            if (!elem.animate) {
                onFinish();
                return;
            }

            requestAnimationFrame(function () {

                var keyframes = [
                    { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
                    { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
                ];
                var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
                elem.animate(keyframes, timing).onfinish = onFinish;
            });
        }

        var lastMouseMoveData;

        function onPointerMove(e) {

            var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');

            if (pointerType === 'mouse') {
                var eventX = e.screenX || 0;
                var eventY = e.screenY || 0;

                var obj = lastMouseMoveData;
                if (!obj) {
                    lastMouseMoveData = {
                        x: eventX,
                        y: eventY
                    };
                    return;
                }

                // if coord are same, it didn't move
                if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
                    return;
                }

                obj.x = eventX;
                obj.y = eventY;

                showOsd();
            }
        }

        function onInputCommand(e) {
            switch (e.detail.command) {
                case 'up':
                case 'down':
                case 'select':
                case 'menu':
                case 'info':
                case 'play':
                case 'playpause':
                case 'pause':
                    showOsd();
                    break;
                default:
                    break;
            }
        }

        function stopInterval() {
            if (currentTimeout) {
                clearTimeout(currentTimeout);
                currentTimeout = null;
            }
        }

        self.show = function () {
            createElements(options);
        };

        self.hide = function () {
            var dialog = dlg;
            if (dialog) {

                dialogHelper.close(dialog);
            }
        };
    };
});