misc tweaks

instead of id strings

app.classic.js

@@ -0,0 +1,27 @@
+import 'https://js.boxcast.com/v3.min.js';
+
+const Channels = {
+    Basics: "sfz7ja3rlpoous6usu8a",
+    Sunday: "gzahmhugrzogttfdtbjj",
+    Dev: "r3os2zfdnhlquhuypgtp"
+};
+
+const Player = boxcast("#boxcast");
+Player.loadChannel(Channels.Basics,
+{
+    showTitle: true,
+    showDescription: true,
+    showRelated: true,
+    showDocuments: true,
+    showIndex :true,
+    showDonations: false,
+    showCountdown: true,
+    relatedBroadcastsQuery:
+    {
+        s: "starts_at",
+        l: 100,
+        q: "timeframe:next starts_at:[2022-04-01T00:00:00 TO 2022-06-01T00:00:00]"
+    },
+    autoplay: true,
+    defaultVideo: "next",
+});

app.js

@@ -1,9 +1,236 @@
 // @ts-check
 /// <reference path="./types.d.ts"/>
 
-import { h, html, render } from "https://esm.sh/htm/preact";
-import { createContext, Fragment } from 'https://esm.sh/preact';
-import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } from 'https://esm.sh/preact/hooks';
+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: 30px 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: red;
+                    color: white;
+                }
+            }
+        }
+        .Time
+        {
+            width: 80px;
+            font-size: 16px;
+            text-align: right;
+        }
+        .Title
+        {
+            flex: 1;
+            font-weight: 900;
+        }
+        .Control
+        {
+            width: 100px;
+
+        }
+
+        button
+        {
+            position: relative;
+            appearance: none;
+            display: block;
+            width: 100%;
+            max-width:150px;
+            padding: 5px 10px 5px 10px;
+            background: #0e2a3f;
+            cursor: pointer;
+            border: none;
+            color: white;
+            font-family: sans-serif;
+            font-size: 14px;
+            font-weight: 600;
+            transition: all 0.4s;
+        }
+        button:hover
+        {
+            border-radius: 50px;
+        }
+        button[disabled]
+        {
+            border-radius: 50px;
+            background: red !important;
+        }
+
+        &.future button
+        {
+            background: #c3b7a9;
+        }
+
+        @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%;
+            }
+        }
+    }
+}
+
+.Boxcast-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 =>
@@ -11,62 +238,186 @@ const App = props =>
     /** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
     const [ListGet, ListSet] = useState([]);
 
-    /** @type {Boxcast.StateBinding<string>} */
-    const Selected = useState("");
+    /** @type {Boxcast.StateBinding<string|null>} */
+    const [SelectedGet, SelectedSet] = useState(null);
 
-    /** @type {Boxcast.StateBinding<string>} */
-    const [LiveGet, LiveSet] = useState("");
+    /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
+    const [LeadingGet, LeadingSet] = useState(null);
 
-    /** @type {(item:Boxcast.Broadcast)=>boolean} */
-    const Iterator = (item) => item.timeframe == "current" || item.timeframe == "preroll";
+    /** @type {Boxcast.StateBinding<boolean>} */
+    const [AlertGet, AlertSet] = useState(false);
 
-    /** @type {()=>Promise} */
-    const Ping = async () =>
-    {
-        const response = await fetch(`https://rest.boxcast.com/channels/${props.channel}/broadcasts?s=starts_at&l=1000`);
-        const json = await response.json();
-        ListSet(json);
-        LiveSet(json.filter(Iterator)[0] || "");
+    /** @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);
     }
     , []);
 
-    useEffect(()=>{alert("New session is starting.")}, [LiveGet]);
+   // 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]);
+
+
+    /** @type {(inItem:Boxcast.Broadcast)=>void} */
+    const SelectionTransition = (inItem) => 
+    {
+        SelectedSet(inItem.id);
+        document.documentElement.style.scrollBehavior = "smooth";
+        setTimeout(()=>window.location = "#"+PlayerID, 450);
+    };
 
     return html`
-    <div class="Playlist">
-    ${
-        ListGet.map(item => html`<${BroadcastItem} item=${item} active=${Selected} />`)
-    }
-    </div>
+    <${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: () => SelectionTransition(item)
+                });
+            })
+        }
+        </div>
+        <div class=${`Boxcast-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=${()=>{ SelectionTransition(LeadingGet); AlertSet(false); }}>Watch Now</button>
+        </div>
+    <//>
     `;
 }
 
-/** @type {(props:{item:Boxcast.Broadcast, active:Boxcast.StateBinding<string>})=>any} */
-const BroadcastItem = ({item, active}) =>
+/** @type {(props:{item:Boxcast.Broadcast, previous: false | Boxcast.Broadcast,  priority:boolean, selected:boolean, select:()=>void})=>any} */
+const BroadcastItem = ({item, previous, priority, selected, select}) =>
 {
-    const startDate = useMemo(()=>DateParse(item.starts_at), [item.starts_at]);
+    // 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`
-    <div key=${item.id} onClick=${()=>active[1](item.id)}>
-        <span>${startDate.Month} ${startDate.Date}</span>
-        <strong>${item.name}</strong>
-        <span>${startDate.Hours}:${startDate.Minutes} ${startDate.M}</span>
-        ${
-            active[0] == item.id ? html`<dd>Active</dd>` : null
-        }
-        <p>${item.id}</p>
-    </div>
-    `;
+    ${ 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) =>
 {
@@ -79,6 +430,7 @@ const DateParse = (inDateString) =>
         Date: date.getDate(),
         Hours: date.getHours(),
         Minutes: date.getMinutes(),
+        Epoch: date.valueOf()
     };
 
     obj.Zone = obj.Zone ? obj.Zone[1] : "local time";
@@ -89,4 +441,8 @@ const DateParse = (inDateString) =>
     return obj;
 };
 
-export default App;
+/** @type {(inChannel:string, inSelector:string, inInterval:number)=>void} */
+const Init = (inChannel, inSelector, inInterval) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:inInterval}));
+
+const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
+Init(Channel.Basics, "#boxcast", 5000);

index.html

@@ -1,49 +1,16 @@
 <!DOCTYPE html>
 <html>
-<head></head>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+</head>
 <body>
 
-<div id="boxcast-player"></div>
-<div id="boxcast-playlist"></div>
-<script type="module">
+<div style="max-width:1100px; margin: 0 auto;">
+    <div id="boxcast"></div>
+    <script type="module">
+        import "./app.js";
+    </script>
+</div>
 
-import 'https://js.boxcast.com/v3.min.js';
-
-const Channel = {
-    Basics: "sfz7ja3rlpoous6usu8a",
-    Sunday: "gzahmhugrzogttfdtbjj",
-    Dev: "r3os2zfdnhlquhuypgtp"
-};
-
-/*
-const Player = boxcast("#boxcast-player");
-Player.loadChannel(Channels.Basics,
-{
-    showTitle: true,
-    showDescription: true,
-    showCountdown: true,
-
-    //selectedBroadcastId: "yo8sefnnejvw3cx3vhup",
-    //showRelated: true,
-    //relatedBroadcastsQuery: {q: "timeframe:relevant starts_at:[2022-01-01 TO 2022-12-01]"},
-    onLoadBroadcast: console.log,
-
-    autoplay: true,
-    defaultVideo: "next"
-});
-*/
-
-
-import { h, html, render } from "https://esm.sh/htm/preact";
-import App from "./app.js";
-
-render(
-    h(App, {channel:Channel.Basics, interval:5000}),
-    document.querySelector("#boxcast-playlist")
-);
-
-
-
-</script>
 </body>
 </html>

testdata-01.json

@@ -0,0 +1,142 @@
+[
+    {
+        "id": "a3fvb7xs5yrl7xr50lyr",
+        "name": "Welcome and Main Session 1",
+        "starts_at": "2022-05-02T18:55:00Z",
+        "stops_at": "2022-05-02T20:20:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "welcome-and-main-session-1-sfry0q5zi5fpjtxzsnih",
+        "tags": []
+    },
+    {
+        "id": "ur7p1uqz6rl3dx7drvgf",
+        "name": "Breakout Session - Alistair Begg",
+        "starts_at": "2022-05-02T20:25:00Z",
+        "stops_at": "2022-05-02T21:45:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
+        "tags": []
+    },
+    {
+        "id": "n1w1rbpaaohkrx2aumll",
+        "name": "Main Session 2 -John Woodhouse",
+        "starts_at": "2022-05-02T23:10:00Z",
+        "stops_at": "2022-05-03T00:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "breakout-session---alistair-begg-mnhpqpgyg8kobjgqerpw",
+        "tags": []
+    },
+    {
+        "id": "wwomf8amsgnct6esof3s",
+        "name": "Main Session 3 -Alistair Begg",
+        "starts_at": "2022-05-03T13:10:00Z",
+        "stops_at": "2022-05-03T14:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-giplu3h3d7rsgays1yyg",
+        "tags": []
+    },
+    {
+        "id": "mjzsudcjjqor4qvpioqx",
+        "name": "Main Session 4 -John Woodhouse",
+        "starts_at": "2022-05-03T14:55:00Z",
+        "stops_at": "2022-05-03T16:15:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-odnunx2aaa1ztxqtufaj",
+        "tags": []
+    },
+    {
+        "id": "ybwm92ssmqhshhrfpvfr",
+        "name": "Main Session 5 -John Woodhouse",
+        "starts_at": "2022-05-03T17:25:00Z",
+        "stops_at": "2022-05-03T18:35:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-wdyqpnsguolrvjwl4aei",
+        "tags": []
+    },
+    {
+        "id": "jed2ccr6o9vukpavrs7t",
+        "name": "Breakout Session -Tony Merida",
+        "starts_at": "2022-05-03T18:40:00Z",
+        "stops_at": "2022-05-03T20:00:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-6--tony-merida-xkw75et1zzz48xdq5grz",
+        "tags": []
+    },
+    {
+        "id": "yo8sefnnejvw3cx3vhup",
+        "name": "Q\u0026A with Alistair Begg",
+        "starts_at": "2022-05-04T00:25:00Z",
+        "stops_at": "2022-05-04T01:45:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-r7ufs6iabwuch7w9hgmm",
+        "tags": []
+    },
+    {
+        "id": "ht6wddox6ompgbusacle",
+        "name": "Main Session 6 - John Woodhouse",
+        "starts_at": "2022-05-04T13:10:00Z",
+        "stops_at": "2022-05-04T14:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "qa-with-alistair-begg-mmyh7oyiecuuqxykafff",
+        "tags": []
+    },
+    {
+        "id": "r9s2oqfl4vhxzfkx1bwf",
+        "name": "Panel Q\u0026A",
+        "starts_at": "2022-05-04T14:55:00Z",
+        "stops_at": "2022-05-04T16:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "panel-qa-v7jfkqhc8viidxebcvvk",
+        "tags": []
+    }
+]

testdata-02.json

@@ -0,0 +1,142 @@
+[
+    {
+        "id": "a3fvb7xs5yrl7xr50lyr",
+        "name": "Welcome and Main Session 1",
+        "starts_at": "2022-05-02T18:55:00Z",
+        "stops_at": "2022-05-02T20:20:00Z",
+        "timeframe": "past",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "welcome-and-main-session-1-sfry0q5zi5fpjtxzsnih",
+        "tags": []
+    },
+    {
+        "id": "ur7p1uqz6rl3dx7drvgf",
+        "name": "Breakout Session - Alistair Begg",
+        "starts_at": "2022-05-02T20:25:00Z",
+        "stops_at": "2022-05-02T21:45:00Z",
+        "timeframe": "preroll",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
+        "tags": []
+    },
+    {
+        "id": "n1w1rbpaaohkrx2aumll",
+        "name": "Main Session 2 -John Woodhouse",
+        "starts_at": "2022-05-02T23:10:00Z",
+        "stops_at": "2022-05-03T00:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "breakout-session---alistair-begg-mnhpqpgyg8kobjgqerpw",
+        "tags": []
+    },
+    {
+        "id": "wwomf8amsgnct6esof3s",
+        "name": "Main Session 3 -Alistair Begg",
+        "starts_at": "2022-05-03T13:10:00Z",
+        "stops_at": "2022-05-03T14:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-giplu3h3d7rsgays1yyg",
+        "tags": []
+    },
+    {
+        "id": "mjzsudcjjqor4qvpioqx",
+        "name": "Main Session 4 -John Woodhouse",
+        "starts_at": "2022-05-03T14:55:00Z",
+        "stops_at": "2022-05-03T16:15:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-odnunx2aaa1ztxqtufaj",
+        "tags": []
+    },
+    {
+        "id": "ybwm92ssmqhshhrfpvfr",
+        "name": "Main Session 5 -John Woodhouse",
+        "starts_at": "2022-05-03T17:25:00Z",
+        "stops_at": "2022-05-03T18:35:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-wdyqpnsguolrvjwl4aei",
+        "tags": []
+    },
+    {
+        "id": "jed2ccr6o9vukpavrs7t",
+        "name": "Breakout Session -Tony Merida",
+        "starts_at": "2022-05-03T18:40:00Z",
+        "stops_at": "2022-05-03T20:00:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-6--tony-merida-xkw75et1zzz48xdq5grz",
+        "tags": []
+    },
+    {
+        "id": "yo8sefnnejvw3cx3vhup",
+        "name": "Q\u0026A with Alistair Begg",
+        "starts_at": "2022-05-04T00:25:00Z",
+        "stops_at": "2022-05-04T01:45:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-r7ufs6iabwuch7w9hgmm",
+        "tags": []
+    },
+    {
+        "id": "ht6wddox6ompgbusacle",
+        "name": "Main Session 6 - John Woodhouse",
+        "starts_at": "2022-05-04T13:10:00Z",
+        "stops_at": "2022-05-04T14:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "qa-with-alistair-begg-mmyh7oyiecuuqxykafff",
+        "tags": []
+    },
+    {
+        "id": "r9s2oqfl4vhxzfkx1bwf",
+        "name": "Panel Q\u0026A",
+        "starts_at": "2022-05-04T14:55:00Z",
+        "stops_at": "2022-05-04T16:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "panel-qa-v7jfkqhc8viidxebcvvk",
+        "tags": []
+    }
+]

testdata-03.json

@@ -0,0 +1,142 @@
+[
+    {
+        "id": "a3fvb7xs5yrl7xr50lyr",
+        "name": "Welcome and Main Session 1",
+        "starts_at": "2022-05-02T18:55:00Z",
+        "stops_at": "2022-05-02T20:20:00Z",
+        "timeframe": "past",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "welcome-and-main-session-1-sfry0q5zi5fpjtxzsnih",
+        "tags": []
+    },
+    {
+        "id": "ur7p1uqz6rl3dx7drvgf",
+        "name": "Breakout Session - Alistair Begg",
+        "starts_at": "2022-05-02T20:25:00Z",
+        "stops_at": "2022-05-02T21:45:00Z",
+        "timeframe": "past",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
+        "tags": []
+    },
+    {
+        "id": "n1w1rbpaaohkrx2aumll",
+        "name": "Main Session 2 -John Woodhouse",
+        "starts_at": "2022-05-02T23:10:00Z",
+        "stops_at": "2022-05-03T00:30:00Z",
+        "timeframe": "current",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "breakout-session---alistair-begg-mnhpqpgyg8kobjgqerpw",
+        "tags": []
+    },
+    {
+        "id": "wwomf8amsgnct6esof3s",
+        "name": "Main Session 3 -Alistair Begg",
+        "starts_at": "2022-05-03T13:10:00Z",
+        "stops_at": "2022-05-03T14:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-giplu3h3d7rsgays1yyg",
+        "tags": []
+    },
+    {
+        "id": "mjzsudcjjqor4qvpioqx",
+        "name": "Main Session 4 -John Woodhouse",
+        "starts_at": "2022-05-03T14:55:00Z",
+        "stops_at": "2022-05-03T16:15:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-odnunx2aaa1ztxqtufaj",
+        "tags": []
+    },
+    {
+        "id": "ybwm92ssmqhshhrfpvfr",
+        "name": "Main Session 5 -John Woodhouse",
+        "starts_at": "2022-05-03T17:25:00Z",
+        "stops_at": "2022-05-03T18:35:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-wdyqpnsguolrvjwl4aei",
+        "tags": []
+    },
+    {
+        "id": "jed2ccr6o9vukpavrs7t",
+        "name": "Breakout Session -Tony Merida",
+        "starts_at": "2022-05-03T18:40:00Z",
+        "stops_at": "2022-05-03T20:00:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-6--tony-merida-xkw75et1zzz48xdq5grz",
+        "tags": []
+    },
+    {
+        "id": "yo8sefnnejvw3cx3vhup",
+        "name": "Q\u0026A with Alistair Begg",
+        "starts_at": "2022-05-04T00:25:00Z",
+        "stops_at": "2022-05-04T01:45:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "main-session-2--john-woodhouse-r7ufs6iabwuch7w9hgmm",
+        "tags": []
+    },
+    {
+        "id": "ht6wddox6ompgbusacle",
+        "name": "Main Session 6 - John Woodhouse",
+        "starts_at": "2022-05-04T13:10:00Z",
+        "stops_at": "2022-05-04T14:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "qa-with-alistair-begg-mmyh7oyiecuuqxykafff",
+        "tags": []
+    },
+    {
+        "id": "r9s2oqfl4vhxzfkx1bwf",
+        "name": "Panel Q\u0026A",
+        "starts_at": "2022-05-04T14:55:00Z",
+        "stops_at": "2022-05-04T16:30:00Z",
+        "timeframe": "future",
+        "description": "",
+        "preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
+        "transcoder_profile": "",
+        "account_id": "ilkxk5hkn51drmocrv0d",
+        "channel_id": "panel-qa-v7jfkqhc8viidxebcvvk",
+        "tags": []
+    }
+]

types.d.ts

@@ -25,7 +25,8 @@ namespace Boxcast
         Date: number
         Hours: number
         Minutes: string | number
-        M?: "AM" | "PM"
+        M?: "AM" | "PM",
+        Epoch: number
     }
 
     type StateBinding<T> = [T, (item:T)=>void];