Last List

Bun Init
2025-08-02 12:28:07 -07:00
parent 1033df0303
commit 0c4afa55d8
11 changed files with 303 additions and 157 deletions
--- a/slideshow/css/index.css
+++ b/slideshow/css/index.css
@ -24,4 +24,4 @@ body {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
-}
+}
--- a/slideshow/index.html
+++ b/slideshow/index.html
@ -2,26 +2,26 @@
 <html>

 <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport"
-        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
-    <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
-    <link rel="stylesheet" href="css/bootswatch/slate/bootstrap.min.css">
-    <link rel="stylesheet" type="text/css" href="css/index.css">
-    <title>Slideshow</title>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+  <meta name="msapplication-tap-highlight" content="no">
+  <meta name="viewport"
+    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+  <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
+  <link rel="stylesheet" href="css/bootswatch/slate/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="css/index.css">
+  <title>Slideshow</title>
 </head>

 <body>
-    <div id="deviceReady">
-        <div class="opaque"></div>
-        <div class=""></div>
-        <div class=""></div>
-    </div>
-    <script src="scripts/jquery-1.9.1.min.js"></script>
-    <script src="scripts/bootstrap.min.js"></script>
-    <script src="scripts/jquery.bgswitcher.js"></script>
-    <script type="text/javascript" src="scripts/index.js?nocache=2024-11-23-22-25"></script>
+  <div id="deviceReady">
+    <div class="opaque"></div>
+    <div class=""></div>
+    <div class=""></div>
+  </div>
+  <script src="scripts/jquery-1.9.1.min.js"></script>
+  <script src="scripts/bootstrap.min.js"></script>
+  <script src="scripts/jquery.bgswitcher.js"></script>
+  <script type="text/javascript" src="scripts/index.js?nocache=2025-08-02-11-33"></script>
 </body>

 </html>
--- a/slideshow/index.json
+++ b/slideshow/index.json
@ -1,17 +1,10 @@
 {
+    "DataDirectory": "random-results",
+    "ImageInterval": 15123,
    "ImageIntervalX": 9123,
    "ImageIntervalXX": 21234,
-    "ImageInterval": 15123,
-    "JsonInterval": 59000,
    "ImageZero": "images/1x1_00000000.png",
-    "DataDirectoryX": "../.random",
-    "DataDirectoryXX": "../Images-c9dbce3b-Results/F)Random/c9dbce3b/[]",
-    "DataDirectory": "random-results",
-    "ImmichUrlX": "http://192.168.11.2:3001/api/assets/",
-    "ImmichUrlXX": "https://immich.phares.duckdns.org/api/assets/",
-    "RandomPathsUrlX": "http://192.168.11.2:5009/api/v1/assets/5f0b1052-466d-44de-a554-226d7256850d/random-paths/",
-    "RandomPathsUrlXX": "https://immichtoslideshow.phares.duckdns.org/api/v1/assets/5f0b1052-466d-44de-a554-226d7256850d/random-paths/",
-    "RootX": "../.original",
-    "RootXX": "../Images-c9dbce3b-Results/thumbs",
-    "Root": "5f0b1052-466d-44de-a554-226d7256850d/"
-}
+    "JsonInterval": 59000,
+    "ListLength": 15,
+    "UserId": "93f51ef4-f1f8-48af-ab00-e00436d790ef"
+}
--- a/slideshow/scripts/index.js
+++ b/slideshow/scripts/index.js
@ -1,50 +1,51 @@
 (function () {
-    "use strict";
+    'use strict';

-    var _Root;
-    var _RootAlt;
+    var _UserId;
    var _ImageZero;
+    var _ListLength;
    var _DataDirectory;
-    var _RandomPathsUrl;
+    var _UniformResourceLocator;

    var _Pause = 0;
    var _Images = [];
-    var _JsonInterval;
-    var _ImageInterval;
    var _ImageIndex = 0;
    var _OpaqueIndex = 0;
-    var _DeviceReadyDiv = $('#deviceReady div');
-
-    var time = document.createElement('time');
-    time.setAttribute('style', 'position: fixed;');
+    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() {
-        var currentDate = new Date();
-        var mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
-        var dd = currentDate.getDate().toString().padStart(2, '0');
-        if (window.location.href.indexOf('time') > 0) {
-            time.innerText = mm + '-' + dd + '.json';
-        }
-        var url = _DataDirectory + '/' + mm + '-' + dd + '.json?nocache=2024-11-23-22-25';
+        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);
-        $.getJSON(url, function (data) {
-            console.log('success', data.length);
-            _Images = [];
-            $.each(data, function (_, value) {
-                // _Images.push(value.replaceAll("\\", "/"));
-                _Images.push(value);
-            });
-        })
-            .done(function () { console.log('second success'); })
-            .fail(function (er) { console.log('error', er); })
-            .always(function () { console.log('complete'); });
+        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() {
-        var currentDate = new Date();
-        var currentHours = currentDate.getHours();
+        const currentDate = new Date();
+        const currentHours = currentDate.getHours();
        if (currentHours === 0) {
-            var currentMinutes = currentDate.getMinutes();
+            const currentMinutes = currentDate.getMinutes();
            if (currentMinutes === 0) {
                loadData();
            }
@ -52,18 +53,14 @@
    }

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

    function onTickImage() {
        if (_Images.length > 0 && _Pause === 0) {
-            var currentDate = new Date();
-            var currentHours = currentDate.getHours();
+            const currentDate = new Date();
+            const currentHours = currentDate.getHours();
            if (currentHours >= 23 || currentHours <= 6) {
                _DeviceReadyDiv.attr('style', 'background-color: #191717;');
            }
@ -73,7 +70,7 @@
                if (_ImageIndex >= _Images.length) {
                    _ImageIndex = 0;
                }
-                var loadIndex;
+                let loadIndex;
                switch (_OpaqueIndex) {
                    case 0:
                        loadIndex = 2;
@ -89,13 +86,13 @@
                        break;
                    default:
                }
-                var backgroundImage = GetBackgroundImage();
+                const backgroundImage = GetBackgroundImage();
                _DeviceReadyDiv.eq(loadIndex).attr('style', backgroundImage);
                _DeviceReadyDiv.eq(_OpaqueIndex).addClass('opaque');
-                if (window.location.href.indexOf('time') > 0) {
-                    var mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
-                    var dd = currentDate.getDate().toString().padStart(2, '0');
-                    time.innerText = mm + '-' + dd + '.json' + ' ' + _Images[_ImageIndex];
+                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];
                }
            }
        }
@ -103,7 +100,7 @@

    function pause() {
        _Pause = 1;
-        $('#deviceReady').innerHTML = '<div></div>';
+        _DeviceReadyDiv.innerHTML = '<div></div>';
    }

    function goBack() {
@ -114,7 +111,7 @@
        if (_ImageIndex === 0) {
            _ImageIndex = _Images.length - 1;
        }
-        var backgroundImage = GetBackgroundImage();
+        const backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

@ -126,12 +123,12 @@
        if (_ImageIndex >= _Images.length) {
            _ImageIndex = 0;
        }
-        var backgroundImage = GetBackgroundImage();
+        const backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

    function getInput(e) {
-        var which = e.which;
+        const which = e.which;
        switch (which) {
            case 13: //Okay
                if (_Pause === 0) {
@ -139,7 +136,7 @@
                }
                else {
                    _Pause = 0;
-                    $('#deviceReady').innerHTML = '<div class="opaque"></div><div></div><div></div>';
+                    _DeviceReadyDiv.innerHTML = '<div class="opaque"></div><div></div><div></div>';
                }
                break;
            case 37: //Left
@ -164,59 +161,102 @@
        }
    }

-    if (window.location.href.indexOf('time') > 0) {
-        document.body.appendChild(time);
+    function getUniformResourceLocator() {
+        let result;
+        if (typeof window == 'undefined') {
+            result = 'https://slideshow.phares.duckdns.org';
+        }
+        else {
+            result = window.location.protocol + '//' + window.location.host;
+        }
+        return result;
    }

-    if (window.location.href.indexOf('last') > 0) {
-        var url = '../log-nginx/access.log?nocache=2024-11-23-22-25';
-        $.get(url, function (data) {
-            var arrayOfUrl = [];
-            var arrayOfIndex = [];
-            var arrayOfLines = data.match(/[^\r\n]+/g);
-            for (var 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;
-                var index = parseInt(arrayOfIndex[0]);
-                console.log('index', index);
-                _ImageIndex = index;
-                break;
-            }
-        })
-            .fail(function (err) {
-                console.error(err);
-            });
-    }
-
-    $(document).ready(function () {
-
-        console.log('onDeviceReady');
-
-        document.addEventListener('keyup', getInput, false);
-
-        var url = '../slideshow/index.json?nocache=2024-11-23-22-25';
+    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);
-        var _ = $.getJSON(url, function (data) {
-            console.log(url + ' downloaded successfully');
-            _RootAlt = null;
-            _Root = data.Root;
-            _ImageZero = data.ImageZero;
-            _JsonInterval = data.JsonInterval;
-            _ImageInterval = data.ImageInterval;
-            _DataDirectory = data.DataDirectory;
-            console.log(url + ' used successfully');
-        })
-            .done(function () {
+        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();
-                _ = setInterval(onTickJSON, _JsonInterval);
-                _ = setInterval(onTickImage, _ImageInterval);
+                if (!_hasList && _DeviceReadyDiv != undefined) {
+                    setInterval(onTickJSON, data.JsonInterval);
+                    setInterval(onTickImage, data.ImageInterval);
+                }
+                if (_hasList && _hasLast) {
+                    _TickLoadList = setInterval(onTickLoadList, 500);
+                }
            })
-            .fail(function (er) { console.log('error', er); })
-            .always(function () { console.log('complete'); });
-    });
+            .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();
+        });
+    }

 })();