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";
/*
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 StyledRoot = styled.div`
.Boxcast-Upper
{
    background: white;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
.Boxcast-Player
{
    .boxcast-well-container
    {
        display: none;
    }
    .boxcast-well
    {
        display:flex;
        justify-content: center;
        align-items: center;
        gap: 10px 10px;
        min-height: 10px;
        margin: 0;

        & > span, .boxcast-linkback
        {
            display:none;
        }

        & > *
        {
            margin: 0;
        }
    }
}
.Boxcast-Active
{
    text-align: center;
    padding:20px;
    background: white;
    & > * { margin: 0; }
}
.Boxcast-Playlist
{
    max-width: 550px;
    margin: 30px auto;
}
.Partition
{
    margin: 15px 0 0 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #dddddd;
    text-align: center;
}
.Broadcast
{
    position: relative;
    display: flex;
    padding: 5px 0 5px 0;

    & > *
    {
        box-sizing: border-box;
        padding: 5px;
    }

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

            &.Next
            {
                background: yellow;
                color: black;
            }
            &.Soon
            {
                background: orange;
                color: white;
            }
            &.Live
            {
                background: limegreen;
                color: white;
            }
        }
    }
    .Time
    {
        width: 80px;
        font-size: 16px;
        text-align: right;
    }
    .Title
    {
        flex: 1;
        font-weight: 900;
    }
    .Control
    {
        width: 80px;

    }

    button
    {
        appearance: none;
        display: inline-block;
        padding: 5px 10px 5px 10px;
        background: black;
        cursor: pointer;
        border: none;
        color: white;
        font-size: 10px;
        font-weight: 900;
        transition: all 0.4s;
    }
    button[disabled]
    {
        background: red !important;
        border-radius: 20px;
    }
    button:hover
    {
        border-radius: 20px;
    }
    &.future button
    {
        background: #aaa;
    }

    @media(max-width:500px)
    {
        flex-wrap: wrap;
        .Time
        {
            order: 0;
            width: 30%;
        }
        .Title
        {
            order: 1;
            flex: none;
            width: 60%;
        }
        .Pointer
        {
            order: 2;
            width: 30%;
        }
        .Control
        {
            order: 3;
            width: 60%;
        }
    }
}
.Alert
{
    position: fixed;
    right: 20px;
    bottom: -300px;
    width: 300px;
    padding: 20px 0 40px 0;
    background: #333;
    border-radius: 5px;
    transition: bottom 0.4s;
    color: #fff;
    text-align: center;

    &.Show
    {
        bottom: 20px;
    }

    button
    {
        padding: 5px 15px;
        border: none;
        background: white;
        cursor: pointer;
        font-weight: 900;
    }

    .Close
    {
        display: inline-block;
        position: absolute;
        padding: 5px 10px 5px 10px;
        border-radius: 20px;
        border: 3px solid white;
        top: -20px;
        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);

        document.documentElement.style.scrollBehavior = "smooth";
        window.location = (`#${PlayerID}`);
    }
    , [SelectedGet]);

    return html`
    <${StyledRoot}>
        <div class="Boxcast-Upper">
            <div class="Boxcast-Player" 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-Active">
                <h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>
            </div>
        </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}) =>
{
    // pointer
    let pointerText;
    if (priority){ pointerText = html`<div class="Badge Next">Next</div>`; }
    if(item.timeframe == "preroll"){ pointerText = html`<div class="Badge Soon">Soon</div>`; }
    if(item.timeframe == "current"){ pointerText = html`<div class="Badge Live">Live</div>`; }

    // (date) partition
    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>`;
    }

    // button
    let buttonText;
    if(item.timeframe == "past"){ buttonText = "Rewatch"; }
    if(item.timeframe == "current" || item.timeframe == "preroll"){ buttonText = "Watch"; }
    if(item.timeframe == "future"){ buttonText = "Preview"; }

    return html`
    ${ partition }
    <div class=${`Broadcast ${item.timeframe}`} key=${item.id}>
        <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 class="Pointer">${ pointerText }</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}));