boxcast-playlist/app.js

// @ts-check
/// <reference path="./types.d.ts"/>

import 'https://js.boxcast.com/v3.min.js';
import { h, html, render } from "https://esm.sh/htm/preact";
import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } from 'https://esm.sh/preact/hooks';
import State01 from "./testdata-01.json" assert { type: "json" };
import State02 from "./testdata-02.json" assert { type: "json" };
import State03 from "./testdata-03.json" assert { type: "json" };

const Styles =
{
    Broadcast:
    {
        position: "relative",
        display: "flex",
        padding: "5px 0 5px 0",
    },
    Time:
    {
        width: "75px",
        marginRight: "5px",
        fontSize: "16px",
        textAlign: "right",
    },
    Partition:
    {
        margin: "10px 0 0 0",
    },
    Pointer:
    {
        width: "75px",
    },
    Alert:
    {
        position: "fixed",
        right: "20px",
        bottom: "20px",
        width: "300px",
        height: "200px",
        background: "#333",
        borderRadius: "5px",
        transition: "all 0.4s",
        color: "#fff",
        textAlign: "center",
    }
};
const PlayerID = "boxcast-player"

/** @type {(props:{channel:string, interval:number})=>any} */
const App = props =>
{
    /** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
    const [ListGet, ListSet] = useState([]);

    /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
    const [SelectedGet, SelectedSet] = useState(null);

    /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
    const [LeadingGet, LeadingSet] = useState(null);

    /** @type {Boxcast.StateBinding<boolean>} */
    const [AlertGet, AlertSet] = useState(false);

    /** @type {(inList:Array<Boxcast.Broadcast>)=>Array<Boxcast.Broadcast>} */
    const SortStart = (inList) => {
        inList.sort((a, b) => a.starts_at > b.starts_at ? 1 : -1);
        inList.forEach( item => item.start = DateParse(item.starts_at));
        return inList;
    }

    const Player = useRef(null);

    // on mount
    useEffect(()=>
    {
        Player.current = boxcast(`#${PlayerID}`);

        return;
        /** @type {()=>Promise} */
        const Ping = async () =>
        {
            const response = await fetch(`https://rest.boxcast.com/channels/${props.channel}/broadcasts?l=50`);
            /** @type {Array<Boxcast.Broadcast>} */
            const json = await response.json();
            ListSet(SortStart(json));
        };

        Ping();
        const timer = setInterval(Ping, props.interval);
        return ()=>clearInterval(timer);
    }
    , []);

    // on new list
    useEffect(()=>
    {
        let leading;
        for(let i=0; i<ListGet.length; i++)
        {
            if(ListGet[i].timeframe != "past")
            {
                leading = ListGet[i];
                LeadingSet(leading);

                if(SelectedGet == null) // if nothing is selected select the leading event
                {
                    SelectedSet(leading);
                }
                else if(SelectedGet?.id != leading?.id) // if something is selected other than the leading event, alert the user
                {
                    AlertSet(true);
                }

                return;
            }
        }

        if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
        {
            LeadingSet(null);
            SelectedSet(ListGet[0]);
            AlertSet(false);
        }
    }
    , [ListGet]);


    // on new video selected
    useEffect(()=>
    {
        const settings = {
            selectedBroadcastId: SelectedGet?.id,
            showTitle: true,
            showDescription: true,
            showCountdown: true,
            showRelated: false,
            autoplay: true,
            defaultVideo: "next"
        };

        Player.current.loadChannel(props.channel, settings);
    }
    , [SelectedGet])

    return html`
    <div>
        <div id=${PlayerID}></div>
        <div>
            <button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
            <button onClick=${()=>ListSet(SortStart(State02))}>testdata-02</button>
            <button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
        </div>
        <div class="Boxcast-Playlist">
        ${
            ListGet.map( (item, index) => h(
                BroadcastItem,
                {
                    item: item,
                    previous: ListGet[index-1],
                    priority: item.id == LeadingGet?.id,
                    selected: item.id == SelectedGet?.id,
                    select: ()=>SelectedSet(item)
                }
            ))
        }
        </div>
        ${ AlertGet ? h(BroadcastAlert,
        {
               broadcast: LeadingGet,
              clickWatch: ()=>{ SelectedSet(LeadingGet); AlertSet(false); },
            clickDismiss: ()=>{ AlertSet(false) }
        }) : null }
    </div>
    `;
}

/** @type {(props:{item:Boxcast.Broadcast, previous: false | Boxcast.Broadcast,  priority:boolean, selected:boolean, select:()=>void})=>any} */
const BroadcastItem = ({item, previous, priority, selected, select}) =>
{
    let pointerText;
    if(item.timeframe == "current" || item.timeframe == "preroll")
    {
        pointerText = `Live:`;
    }
    else if (priority)
    {
        pointerText = `Next:`;
    }

    let partition;
    if(!previous || (previous.start.Date !== item.start.Date))
    {
        partition = html`<h3 key=${item.start.Day} style=${Styles.Partition} >${item.start.Day}, ${item.start.Month} ${item.start.Date}</h3>`
    }

    let buttonText;
    if(item.timeframe == "past")
    {
        buttonText = "Recording";
    }
    if(item.timeframe == "current" || item.timeframe == "preroll")
    {
        buttonText = "Watch";
    }
    if(item.timeframe == "future")
    {
        buttonText = "Preview";
    }
    if(selected)
    {
        buttonText = "(Viewing)";
    }

    return html`
    ${ partition }
    <div key=${item.id} onClick=${select} style=${Styles.Broadcast}>
        <div style=${Styles.Pointer}>${ pointerText }</div>
        <div style=${Styles.Time}>${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
        <strong>${item.name}</strong>
        <button onClick=${select} disabled=${selected}>${buttonText}</button>
    </div>`;
};

/** @type { (props:{broadcast:Boxcast.Broadcast, clickWatch:()=>void, clickDismiss:()=>void})=>any } */
const BroadcastAlert = ({broadcast, clickWatch, clickDismiss}) =>
{
    return html`
    <div style=${Styles.Alert}>
        <span onClick=${clickDismiss}>X</span>
        <h4>A new session is starting:</h4>
        <p>${broadcast.name}</p>
        <button onClick=${clickWatch}>Watch Now</button>
    </div>
    `;
}

/** @type {(inDate:string)=>Boxcast.Date} */
const DateParse = (inDateString) =>
{
    let date = new Date(inDateString);
    /** @type {Boxcast.Date} */
    let obj = {
        Zone: date.toString().match(/\(([A-Za-z\s].*)\)/),
        Day: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][date.getDay()],
        Month: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][date.getMonth()],
        Date: date.getDate(),
        Hours: date.getHours(),
        Minutes: date.getMinutes(),
        Epoch: date.valueOf()
    };

    obj.Zone = obj.Zone ? obj.Zone[1] : "local time";
    obj.M = obj.Hours >= 12 ? "PM" : "AM";
    obj.Hours %= 12;
    if(obj.Hours == 0){ obj.Hours = 12; }
    if(obj.Minutes < 10){ obj.Minutes = "0"+obj.Minutes; }
    return obj;
};

/** @type {(inChannel:string, inSelector:string)=>void} */
export default (inChannel, inSelector) => render(h(App, {channel:inChannel, interval:50000}), document.querySelector(inSelector));