boxcast-playlist/app.js

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

import 'https://js.boxcast.com/v3.min.js';
import { html } from "https://esm.sh/htm/react";
import styled from 'https://esm.sh/styled-components?deps=react@18';
import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18';
import { createRoot } from "https://esm.sh/react-dom/client";

const StyledRoot = styled.div`
.Partition
{
    margin: 10px 0 0 0;
}
.Broadcast
{
    position: relative;
    display: flex;
    padding: 5px 0 5px 0;

    .Pointer
    {
        width: 75px;
        .Badge
        {
            display: inline-block;
            border-radius: 20px;
            padding: 2px 8px;
            font-size: 12px;
            font-weight: 900;
            font-family: sans-serif;
            letter-spacing: 0.1em;

            &.Next
            {
                background: yellow;
                color: black;
            }
            &.Live
            {
                background: limegreen;
                color: white;
            }
        }
    }
    .Time
    {
        width: 75px;
        margin-right: 5px;
        font-size: 16px;
        text-align: right;
    }
    .Title
    {
        flex: 1;
    }
    .Control
    {
        button
        {
            appearance: none;
            display: block;
            width: 80px;
            padding: 5px 10px 5px 10px;
            background: black;
            cursor: pointer;
            border: none;
            color: white;
            font-size: 10px;
            font-weight: 900;
        }
        button[disabled]
        {
            background: grey;
        }
    }
}
.Alert
{
    position: fixed;
    right: 20px;
    bottom: -300px;
    width: 300px;
    height: 200px;
    background: #333;
    border-radius: 5px;
    transition: bottom 0.4s;
    color: #fff;
    text-align: center;

    &.Show
    {
        bottom: 20px;
    }

    .Close
    {
        display: inline-block;
        position: absolute;
        padding: 5px 10px 5px 10px;
        border-radius: 20px;
        top: -15px;
        right: 10px;
        background: #000000;
        cursor: pointer;
        color: #fff;
    }
}
`;

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<string|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}`);

        /** @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];

               if( (leading.timeframe == "current" || leading.timeframe == "preroll") && (leading.id != LeadingGet?.id) && (SelectedGet != leading.id)) // if something is selected other than the leading event, alert the user
               {
                   AlertSet(true);
               }

               if(SelectedGet == null) // if nothing is selected select the leading event
               {
                   SelectedSet(leading.id);
               }

               LeadingSet(leading);

               return;
           }
       }

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


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

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

    return html`
    <${StyledRoot}>
        <div id=${PlayerID}></div>
        <div class="Boxcast-Playlist">
        ${
            ListGet.map( (item, index) =>
            {
                return h(BroadcastItem,
                {
                    item: item,
                    previous: ListGet[index-1],
                    priority: item.id == LeadingGet?.id,
                    selected: item.id == SelectedGet,
                    select: ()=>SelectedSet(item.id)
                });
            })
        }
        </div>
        <div class=${`Alert ${ AlertGet ? " Show" : null }`}>
            <span class="Close" onClick=${()=>{ AlertSet(false); }}>Dismiss ✕</span>
            <h4>A new session is starting:</h4>
            <p>${LeadingGet?.name}</p>
            <button onClick=${()=>{ SelectedSet(LeadingGet.id); AlertSet(false); }}>Watch Now</button>
        </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 = html`<div class="Badge Live">Live</div>`;
    }
    else if (priority)
    {
        pointerText = html`<div class="Badge Next">Next</div>`;
    }

    let partition;
    if(!previous || (previous.start.Date !== item.start.Date))
    {
        partition = html`<h3 class="Partition" key=${item.id+item.start.Day} >
            ${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 class="Broadcast" key=${item.id} onClick=${select}>
        <div class="Pointer">${ pointerText }</div>
        <div class="Time">${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
        <div class="Title">${item.name}</strong>
        <div class="Control">
            <button onClick=${select} disabled=${selected}>${buttonText}</button>
        </div>
    </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) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:5000}));