EvieTicker/index.html at main · Donostio/EvieTicker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rotating URL Display with Preloading</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: #000;
        }
        .url-container {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            visibility: hidden;
        }
        .url-container.visible {
            opacity: 1;
            visibility: visible;
        }
        iframe {
            border: none;
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div id="frame1" class="url-container">
        <iframe id="contentFrame1" src="about:blank"></iframe>
    </div>
    <div id="frame2" class="url-container">
        <iframe id="contentFrame2" src="about:blank"></iframe>
    </div>

    <script>
        const urlsToRotate = [
            { url: "https://www.leddepartureboard.com/singleboard/SRC/to/IMW?hideClock=false&hideMenu=true&showStationName=true", duration: 9000 },
            { url: "https://donostio.github.io/EvieForcast/", duration: 5000 },
            { url: "https://donostio.github.io/DL-W-PG-status/", duration: 5000 },
            { url: "https://www.leddepartureboard.com/singleboard/STE/to/WIM?hideClock=false&hideMenu=true&showStationName=true", duration: 9000 }
        ];

        let currentUrlIndex = 0;
        let visibleFrameDiv = document.getElementById('frame1');
        let hiddenFrameDiv = document.getElementById('frame2');
        let rotationTimer;
        let isPreloadReady = false;

        window.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'page-ready') {
                console.log("Received 'page-ready' signal from a child iframe.");
                isPreloadReady = true;
            }
        });

        function swapFrames() {
            visibleFrameDiv.classList.remove('visible');
            hiddenFrameDiv.classList.add('visible');
            [visibleFrameDiv, hiddenFrameDiv] = [hiddenFrameDiv, visibleFrameDiv];

            currentUrlIndex = (currentUrlIndex + 1) % urlsToRotate.length;

            isPreloadReady = false;
            preloadNextUrl();
        }

        function preloadNextUrl() {
            const nextUrlIndex = (currentUrlIndex + 1) % urlsToRotate.length;
            const nextItem = urlsToRotate[nextUrlIndex];
            const hiddenIframe = hiddenFrameDiv.querySelector('iframe');

            hiddenIframe.src = nextItem.url;
            console.log("Preloading URL: " + nextItem.url);

            if (!nextItem.url.includes("donostio.github.io")) {
                hiddenIframe.onload = () => {
                    setTimeout(() => {
                        isPreloadReady = true;
                        console.log("Third-party page assumed ready.");
                    }, 5000);
                };
            }
        }

        function scheduleRotation() {
            const currentItem = urlsToRotate[currentUrlIndex];

            clearTimeout(rotationTimer);
            rotationTimer = setTimeout(() => {
                // After the current page's duration is over, start checking for the next page's readiness.
                waitForPreloadAndSwap();
            }, currentItem.duration);
        }

        function waitForPreloadAndSwap() {
            if (isPreloadReady) {
                swapFrames();
                scheduleRotation(); // Start the next rotation timer
            } else {
                console.log("Preloaded page not ready, waiting a bit longer...");
                rotationTimer = setTimeout(waitForPreloadAndSwap, 500); // Check again in 500ms
            }
        }

        // Initial setup on page load
        document.addEventListener('DOMContentLoaded', () => {
            const initialIframe = visibleFrameDiv.querySelector('iframe');
            initialIframe.src = urlsToRotate[0].url;
            console.log("Initial load of: " + urlsToRotate[0].url);

            initialIframe.onload = () => {
                console.log("Initial page loaded, displaying.");
                visibleFrameDiv.classList.add('visible');
                preloadNextUrl();
                scheduleRotation();
            };
        });
    </script>
</body>
</html>