www/slideshow/scripts/index.js

(function () {
    'use strict';

    var _UserId;
    var _ImageZero;
    var _ListLength;
    var _DataDirectory;
    var _UniformResourceLocator;

    var _Pause = 0;
    var _Images = [];
    var _ImageIndex = 0;
    var _OpaqueIndex = 0;
    var _hasLast = false;
    var _hasList = false;
    var _hasTime = false;
    var _TickLoadList = null;
    var _DeviceReadyDiv = typeof document == 'undefined' ? undefined : $('#deviceReady div');
    var _TimeElement = typeof document == 'undefined' ? undefined : document.createElement('time');

    function loadData() {
        const currentDate = new Date();
        const dd = currentDate.getDate().toString().padStart(2, '0');
        const mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
        const url = _UniformResourceLocator + '/slideshow/' + _DataDirectory + '/' + mm + '-' + dd + '.json?nocache=2025-08-02-11-33';
        console.log(url);
        fetch(url, { nocache: new Date().getTime() })
            .then((res) => res.text())
            .then((text) => {
                console.log(url + ' downloaded successfully');
                const data = JSON.parse(text);
                console.log('success', data.length);
                _Images = [];
                for (let i = 0; i < data.length; i++) {
                    _Images.push(_UniformResourceLocator + '/slideshow/' + _UserId + data[i]);
                }
            })
            .catch((e) => console.error(e));
        if (_TimeElement != undefined && _hasTime) {
            _TimeElement.innerText = _UniformResourceLocator + ' ' + mm + '-' + dd + '.json';
        }
    }

    function onTickJSON() {
        const currentDate = new Date();
        const currentHours = currentDate.getHours();
        if (currentHours === 0) {
            const currentMinutes = currentDate.getMinutes();
            if (currentMinutes === 0) {
                loadData();
            }
        }
    }

    function GetBackgroundImage() {
        let result = "background-image: url('" + _Images[_ImageIndex] + '?index=' + _ImageIndex + "'), url('" + _ImageZero + "');";
        return result;
    }

    function onTickImage() {
        if (_Images.length > 0 && _Pause === 0) {
            const currentDate = new Date();
            const currentHours = currentDate.getHours();
            if (currentHours >= 23 || currentHours <= 6) {
                _DeviceReadyDiv.attr('style', 'background-color: #191717;');
            }
            else {
                _DeviceReadyDiv.eq(_OpaqueIndex).removeClass('opaque');
                _ImageIndex += 1;
                if (_ImageIndex >= _Images.length) {
                    _ImageIndex = 0;
                }
                let loadIndex;
                switch (_OpaqueIndex) {
                    case 0:
                        loadIndex = 2;
                        _OpaqueIndex = 1;
                        break;
                    case 1:
                        loadIndex = 0;
                        _OpaqueIndex = 2;
                        break;
                    case 2:
                        loadIndex = 1;
                        _OpaqueIndex = 0;
                        break;
                    default:
                }
                const backgroundImage = GetBackgroundImage();
                _DeviceReadyDiv.eq(loadIndex).attr('style', backgroundImage);
                _DeviceReadyDiv.eq(_OpaqueIndex).addClass('opaque');
                if (_TimeElement != undefined && _hasTime) {
                    const mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
                    const dd = currentDate.getDate().toString().padStart(2, '0');
                    _TimeElement.innerText = _UniformResourceLocator + ' ' + mm + '-' + dd + '.json' + ' ' + _Images[_ImageIndex];
                }
            }
        }
    }

    function pause() {
        _Pause = 1;
        _DeviceReadyDiv.innerHTML = '<div></div>';
    }

    function goBack() {
        if (_Pause === 0) {
            pause();
        }
        _ImageIndex -= 1;
        if (_ImageIndex === 0) {
            _ImageIndex = _Images.length - 1;
        }
        const backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

    function goForward() {
        if (_Pause === 0) {
            pause();
        }
        _ImageIndex += 1;
        if (_ImageIndex >= _Images.length) {
            _ImageIndex = 0;
        }
        const backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

    function getInput(e) {
        const which = e.which;
        switch (which) {
            case 13: //Okay
                if (_Pause === 0) {
                    _Pause = 1;
                }
                else {
                    _Pause = 0;
                    _DeviceReadyDiv.innerHTML = '<div class="opaque"></div><div></div><div></div>';
                }
                break;
            case 37: //Left
                goBack();
                break;
            case 38: //Up
                goForward();
                break;
            case 39: //Right
                goForward();
                break;
            case 40: //Down
                goBack();
                break;
            case 173: //Fast Forward
                goForward();
                break;
            case 177: //Rewind
                goBack();
                break;
            default:
        }
    }

    function getUniformResourceLocator() {
        let result;
        if (typeof window == 'undefined') {
            result = 'https://slideshow.phares.duckdns.org';
        }
        else {
            result = window.location.protocol + '//' + window.location.host;
        }
        return result;
    }

    function loadPage() {
        const uniformResourceLocator = getUniformResourceLocator();
        _hasLast = typeof window == 'undefined' ? false : window.location.href.indexOf('last') > 0;
        _hasList = typeof window == 'undefined' ? false : window.location.href.indexOf('list') > 0;
        _hasTime = typeof window == 'undefined' ? false : window.location.href.indexOf('time') > 0;
        const url = uniformResourceLocator + '/slideshow/index.json?nocache=2025-08-02-11-33';
        console.log(url);
        fetch(url, { nocache: new Date().getTime() })
            .then((res) => res.text())
            .then((text) => {
                console.log(url + ' downloaded successfully');
                const data = JSON.parse(text);
                _UserId = data.UserId;
                _ListLength = data.ListLength;
                _DataDirectory = data.DataDirectory;
                _UniformResourceLocator = uniformResourceLocator;
                _ImageZero = uniformResourceLocator + '/slideshow/' + data.ImageZero;
                console.log(url + ' used successfully');
                if (_TimeElement != undefined && _hasTime) {
                    _TimeElement.setAttribute('style', 'position: fixed;');
                    document.body.appendChild(_TimeElement);
                }
                if (_hasLast) {
                    loadLog();
                }
                loadData();
                if (!_hasList && _DeviceReadyDiv != undefined) {
                    setInterval(onTickJSON, data.JsonInterval);
                    setInterval(onTickImage, data.ImageInterval);
                }
                if (_hasList && _hasLast) {
                    _TickLoadList = setInterval(onTickLoadList, 500);
                }
            })
            .catch((e) => console.error(e));
    }

    function onTickLoadList() {
        if (_ImageIndex > 0 && _Images.length > 0) {
            clearInterval(_TickLoadList);
            let innerHTML = '';
            for (let i = 0; i < _ListLength; i++) {
                innerHTML += '<p><a href="' + _Images[_ImageIndex] + '"><img style="max-width: 330px" src="' + _Images[_ImageIndex] + '" title="' + _ImageIndex + '" alt="' + _Images[_ImageIndex] + '"></a></p>\n';
                _ImageIndex -= 1;
                if (_ImageIndex < 0) {
                    _ImageIndex = _Images.length - 1;
                }
            }
            document.getElementById('deviceReady').innerHTML = innerHTML;
        }
    }

    function loadLog() {
        const url = _UniformResourceLocator + '/log-nginx/access.log?nocache=2025-08-02-11-33';
        fetch(url, { nocache: new Date().getTime() })
            .then((res) => res.text())
            .then((text) => {
                console.log(url + ' downloaded successfully');
                let arrayOfUrl = [];
                let arrayOfIndex = [];
                const arrayOfLines = text.match(/[^\r\n]+/g);
                for (let i = arrayOfLines.length - 1; i >= 0; i--) {
                    arrayOfUrl = arrayOfLines[i].split('?index=');
                    if (arrayOfUrl.length !== 2)
                        continue;
                    arrayOfIndex = arrayOfUrl[1].split(' ');
                    if (arrayOfIndex.length < 2)
                        continue;
                    let index = parseInt(arrayOfIndex[0]);
                    console.log('index', index);
                    _ImageIndex = index;
                    break;
                }
            })
            .catch((e) => console.error(e));
    }

    if (typeof document == 'undefined') {
        loadPage();
    } else {
        $(document).ready(function () {
            console.log('onDeviceReady');
            document.addEventListener('keyup', getInput, false);
            loadPage();
        });
    }

})();