Automated announcement loop switching for Church Online Platform

announcements.html

<div id="video-container" style="padding:56.25% 0 0 0;position:relative;"></div>
<script src="https://player.vimeo.com/api/player.js"></script>

<script>
    //Automated annoucement loop switching for Church Online Platform
    //by Austin Ginn - https://github.com/austinginn/

    //ABOUT//
    //Use this script to automatically run different announcement loops at specific times in your timezone.
    //This can be easily modified to support more than two loops, or to switch at different times.
    //Currently set up to work with Vimeo embeds but could be adapted for other hosting platforms as needed.
    //If you have any questions or need help implementing, feel free to reach out to me on GitHub.

    //USE//
    //Edit the "MODIFY THIS SECTION" to fit your needs.
    //Copy this gist and paste in the Admin Tools -> Setup -> Offline -> Offline Content -> Embed Code -> Video
    //on Church Online

    //TODO//
    //Add support for specificing days of the week for loops

    /////////////////////////////
    /////MODIFY THIS SECTION/////
    /////////////////////////////
    //set your timezone
    const yourTimeZone = 'America/New_York';

    //Default loop to play when not in a specified loop time
    const defaultLoopURL = 'https://vimeo.com/926407179?share=copy'; 

    //loops array - add as many loops as you need
    //start and end times are in hours and minutes
    //url is the public vimeo link to the video (video must be public)
    //name is just for readability
    const loops = [
        { name: 'Contemporary Loop', start: { hours: 8, minutes: 30 }, end: { hours: 9, minutes: 1 }, url: 'https://vimeo.com/845657292?share=copy'},
        { name: 'Traditional Loop', start: { hours: 10, minutes: 30 }, end: { hours: 11, minutes: 1 }, url: 'https://vimeo.com/845692585?share=copy',  },
    ]
    /////////////////////////////
    /////////////////////////////
    /////////////////////////////


    /////////////////////////////
    //////////MAIN///////////////
    /////////////////////////////
    //Global stuff
    const currentTimeZoneTime = getTimeWithTimeZone(yourTimeZone); //Get current time in your timezone
    const currentHour = currentTimeZoneTime.getHours(); //
    const currentMinutes = currentTimeZoneTime.getMinutes();
    const videoContainer = document.getElementById("video-container");
    let currentLoop = ""

    console.log("Current Time:", currentHour, currentMinutes);

    //Run the appropriate loop
    currentLoop = getVideoLoop();
    videoContainer.innerHTML = createIframe(currentLoop);

    //Check for new loop every minute
    setInterval(() => {
        console.log("Checking for new loop");
        const newLoop = getVideoLoop();
        if (newLoop !== currentLoop) {
            currentLoop = newLoop;
            videoContainer.innerHTML = createIframe(currentLoop);
            console.log("New Loop:", currentLoop);
        }
    }, 60000);
    /////////////////////////////
    /////////////////////////////
    /////////////////////////////


    // Function to get current time with provided timezone
    function getTimeWithTimeZone(tz) {
        const now = new Date();
        const time = new Date(now.toLocaleString('en-US', { timeZone: tz }));
        return time;
    }

    // Function to get the appropriate loop or default loop based on current time
    function getVideoLoop() {
        for (let i = 0; i < loops.length; i++) {
            const loop = loops[i];
            const loopStart = loop.start.hours * 60 + loop.start.minutes;
            const loopEnd = loop.end.hours * 60 + loop.end.minutes;
            const currentTime = currentHour * 60 + currentMinutes;

            if (currentTime >= loopStart && currentTime <= loopEnd) {
                return loop.url;
            }
        }

        return defaultLoopURL;
    }

    function createIframe(src) {
        //get the video id from the url
        const videoId = src.split('vimeo.com/')[1].split('?')[0];

        let html = '<iframe src="https://player.vimeo.com/video/' + videoId +  "?badge=0&amp;player_id=0&amp;app_id=58479&amp;autoplay=1&amp;loop=1&amp;autopause=0&amp;muted=true&amp;controls=false" + '" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>';
        console.log(html);
        return html;
    }

</script>