Travel_Ticker_LMS/index.html at main · Donostio/Travel_Ticker_LMS · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rotating URL Display</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* Ensures no scrollbars for content overflowing viewport */
            background-color: #000;
        }
        iframe {
            border: none;
            width: 100%;  /* Takes 100% of parent width */
            height: 100%; /* Takes 100% of parent height */
            display: none; /* The frame is now hidden by default */
        }
    </style>
</head>
<body>
    <iframe id="contentFrame" src="about:blank"
            allowfullscreen="true"
            mozallowfullscreen="true"
            webkitallowfullscreen="true">
    </iframe>

    <script>
        // Array of URLs to rotate, now including custom durations
        const urlsToRotate = [
            { url: "https://www.leddepartureboard.com/singleboard/SRC/to/IMW?hideClock=false&hideMenu=true&showStationName=true", duration: 8000 }, // 8 seconds
            { url: "https://donostio.github.io/EvieForcast/", duration: 5000 }, // 5 seconds
            { url: "https://donostio.github.io/DL-W-PG-status/", duration: 5000 }, // 5 seconds
            { url: "https://www.leddepartureboard.com/singleboard/STE/to/WIM?hideClock=false&hideMenu=true&showStationName=true", duration: 8000 } // 8 seconds
        ];

        const initialDelay = 2000; // 2 seconds before the first URL from the list is loaded
        const fallbackTimeout = 7000; // 7-second fallback timeout for pages that don't signal ready

        let currentUrlIndex = 0;
        const contentFrame = document.getElementById('contentFrame');
        let rotationTimer; // Variable to hold the main rotation timeout ID
        let loadTimeout; // Variable to hold the fallback loading timeout ID

        // Function to start or continue the rotation
        function startRotation() {
            // Hide the iframe before loading the next page to prevent the "loading" view
            contentFrame.style.display = 'none';

            // Get the current item (URL and its duration) from the array
            const currentItem = urlsToRotate[currentUrlIndex];

            // Load the URL into the iframe
            contentFrame.src = currentItem.url;
            console.log("Loading URL: " + currentItem.url + " for " + currentItem.duration / 1000 + " seconds.");

            // Check if the current URL is one of the live departure boards
            if (currentItem.url.includes('leddepartureboard.com')) {
                // For live departure boards, assume they don't send a ready signal and show them immediately
                contentFrame.style.display = 'block';
                console.log("Live board detected. Displaying immediately.");

                // Move to the next URL for the next cycle, looping back to the start if at the end
                currentUrlIndex = (currentUrlIndex + 1) % urlsToRotate.length;

                // Schedule the next rotation based on the duration of the URL that was just loaded
                rotationTimer = setTimeout(startRotation, currentItem.duration);
            } else {
                // For other URLs, use the existing logic of waiting for a "page-ready" signal or a fallback timeout
                loadTimeout = setTimeout(() => {
                    console.warn(`Timeout for ${currentItem.url}. Forcing next rotation.`);
                    handlePageReady();
                }, fallbackTimeout);
            }
        }

        // This function is called when a page is ready or the timeout is reached
        function handlePageReady() {
            // Clear the fallback timeout to prevent it from firing after the page is ready
            clearTimeout(loadTimeout);

            // Show the iframe now that its content has loaded (or the timeout was reached)
            contentFrame.style.display = 'block';

            // Clear any existing rotation timer to prevent overlapping rotations
            if (rotationTimer) {
                clearTimeout(rotationTimer);
            }

            // Get the current item to use its duration
            const currentItem = urlsToRotate[currentUrlIndex];

            // Move to the next URL for the next cycle, looping back to the start if at the end
            currentUrlIndex = (currentUrlIndex + 1) % urlsToRotate.length;

            // Schedule the next rotation based on the duration of the URL that was just loaded
            rotationTimer = setTimeout(startRotation, currentItem.duration);
        }

        // Listen for messages from the iframed pages
        window.addEventListener('message', (event) => {
            // Check if the message is the "page-ready" signal
            if (event.data && event.data.type === 'page-ready') {
                handlePageReady();
            }
        });

        // Initial delay before the first URL from the list is loaded
        setTimeout(() => {
            startRotation(); // Begin the rotation cycle after the initial delay
        }, initialDelay);
    </script>
</body>
</html>