app.js

@@ -2,113 +2,48 @@
 /// <reference path="./types.d.ts"/>
 
 import 'https://js.boxcast.com/v3.min.js';
-import { html } from "https://esm.sh/htm/react";
+import { h, html, render } from "https://esm.sh/htm/preact";
-import styled from 'https://esm.sh/styled-components?deps=react@18';
+import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } from 'https://esm.sh/preact/hooks';
-import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18';
+import State01 from "./testdata-01.json" assert { type: "json" };
-import { createRoot } from "https://esm.sh/react-dom/client";
+import State02 from "./testdata-02.json" assert { type: "json" };
 
-const StyledRoot = styled.div`
+const Styles =
-.Partition
 {
-    margin: 10px 0 0 0;
+    Broadcast:
-}
-.Broadcast
-{
-    position: relative;
-    display: flex;
-    padding: 5px 0 5px 0;
-
-    .Pointer
     {
-        width: 75px;
+        position: "relative",
-        .Badge
+        display: "flex",
+        padding: "5px 0 5px 0",
+    },
+    Time:
     {
-            display: inline-block;
+        width: "75px",
-            border-radius: 20px;
+        marginRight: "5px",
-            padding: 2px 8px;
+        fontSize: "16px",
-            font-size: 12px;
+        textAlign: "right",
-            font-weight: 900;
+    },
-            font-family: sans-serif;
+    Partition:
-            letter-spacing: 0.1em;
-
-            &.Next
     {
-                background: yellow;
+        margin: "10px 0 0 0",
-                color: black;
+    },
-            }
+    Pointer:
-            &.Live
     {
-                background: limegreen;
+        width: "75px",
-                color: white;
+    },
-            }
+    Alert:
-        }
-    }
-    .Time
     {
-        width: 75px;
+        position: "fixed",
-        margin-right: 5px;
+        right: "20px",
-        font-size: 16px;
+        bottom: "20px",
-        text-align: right;
+        width: "300px",
+        height: "200px",
+        background: "#333",
+        borderRadius: "5px",
+        transition: "all 0.4s",
+        color: "#fff",
     }
-    .Title
+};
-    {
+const PlayerID = "boxcast-player"
-        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 =>
@@ -116,14 +51,11 @@ const App = props =>
     /** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
     const [ListGet, ListSet] = useState([]);
 
-    /** @type {Boxcast.StateBinding<string|null>} */
+    /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
     const [SelectedGet, SelectedSet] = useState(null);
 
     /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
-    const [LeadingGet, LeadingSet] = useState(null);
+    const [LiveGet, LiveSet] = useState(null);
-
-    /** @type {Boxcast.StateBinding<boolean>} */
-    const [AlertGet, AlertSet] = useState(false);
 
     /** @type {(inList:Array<Boxcast.Broadcast>)=>Array<Boxcast.Broadcast>} */
     const SortStart = (inList) => {
@@ -138,7 +70,23 @@ const App = props =>
     useEffect(()=>
     {
         Player.current = boxcast(`#${PlayerID}`);
+        /*
+        Player.current.loadChannel(props.channel,
+        {
+            showTitle: true,
+            showDescription: true,
+            showCountdown: true,
 
+            //selectedBroadcastId: "yo8sefnnejvw3cx3vhup",
+            showRelated: false,
+            onLoadBroadcast: console.log,
+
+            autoplay: true,
+            defaultVideo: "next"
+        });
+        */
+
+        return;
         /** @type {()=>Promise} */
         const Ping = async () =>
         {
@@ -157,84 +105,74 @@ const App = props =>
     // on new list
     useEffect(()=>
     {
-       let leading;
+        let live;
         for(let i=0; i<ListGet.length; i++)
         {
             if(ListGet[i].timeframe != "past")
             {
-               leading = ListGet[i];
+                live = ListGet[i];
-
+                break;
-               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
+            }
+        }
+        if(LiveGet?.id != live?.id)
         {
-                   AlertSet(true);
+            console.log("new video starting")
         }
-
+        if(SelectedGet?.id != live?.id)
-               if(SelectedGet == null) // if nothing is selected select the leading event
         {
-                   SelectedSet(leading.id);
+            console.log("would you like to switch?");
-               }
-
-               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);
         }
+        LiveSet(live);
     }
     , [ListGet]);
 
+    // on new event started
+    useEffect(()=>
+    {
+        // alert("New session is starting.")
+
+    }
+    , [LiveGet]);
 
     // on new video selected
     useEffect(()=>
     {
-        const settings = {
+        Player.current.loadChannel(props.channel,
-            selectedBroadcastId: SelectedGet,
+        {
+            selectedBroadcastId: SelectedGet?.id,
             showTitle: true,
             showDescription: true,
             showCountdown: true,
             showRelated: false,
             autoplay: true,
             defaultVideo: "next"
-        };
+        });
-
-        Player.current.loadChannel(props.channel, settings);
     }
-    , [SelectedGet]);
+    , [SelectedGet])
 
     return html`
-    <${StyledRoot}>
+    <div>
         <div id=${PlayerID}></div>
+        <div>
+            <button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
+            <button onClick=${()=>ListSet(SortStart(State02))}>testdata-01</button>
+        </div>
         <div class="Boxcast-Playlist">
         ${
-            ListGet.map( (item, index) =>
+            ListGet.map( (item, index) => h(
-            {
+                BroadcastItem,
-                return h(BroadcastItem,
                 {
                     item: item,
                     previous: ListGet[index-1],
-                    priority: item.id == LeadingGet?.id,
+                    priority: item.id == LiveGet?.id,
-                    selected: item.id == SelectedGet,
+                    selected: item.id == SelectedGet?.id,
-                    select: ()=>SelectedSet(item.id)
+                    select: ()=>SelectedSet(item)
-                });
+                }
-            })
+            ))
         }
         </div>
-        <div class=${`Alert ${ AlertGet ? " Show" : null }`}>
+        <${BroadcastAlert}><//>
-            <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>
-    <//>
     `;
 }
 
@@ -244,19 +182,17 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
     let pointerText;
     if(item.timeframe == "current" || item.timeframe == "preroll")
     {
-        pointerText = html`<div class="Badge Live">Live</div>`;
+        pointerText = `Live:`;
     }
     else if (priority)
     {
-        pointerText = html`<div class="Badge Next">Next</div>`;
+        pointerText = `Next:`;
     }
 
     let partition;
     if(!previous || (previous.start.Date !== item.start.Date))
     {
-        partition = html`<h3 class="Partition" key=${item.id+item.start.Day} >
+        partition = html`<h3 key=${item.start.Day} style=${Styles.Partition} >${item.start.Day}, ${item.start.Month} ${item.start.Date}</h3>`
-            ${item.start.Day}, ${item.start.Month} ${item.start.Date}
-        </h3>`;
     }
 
     let buttonText;
@@ -279,16 +215,25 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
 
     return html`
     ${ partition }
-    <div class="Broadcast" key=${item.id} onClick=${select}>
+    <div key=${item.id} onClick=${select} style=${Styles.Broadcast}>
-        <div class="Pointer">${ pointerText }</div>
+        <div style=${Styles.Pointer}>${ pointerText }</div>
-        <div class="Time">${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
+        <div style=${Styles.Time}>${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
-        <div class="Title">${item.name}</strong>
+        <strong>${item.name}</strong>
-        <div class="Control">
         <button onClick=${select} disabled=${selected}>${buttonText}</button>
-        </div>
     </div>`;
 };
 
+const BroadcastAlert = () =>
+{
+    return html`
+    <div style=${Styles.Alert}>
+        <span>X</span>
+        <h4>A new session is starting.</h4>
+        <button>Watch Now</button>
+    </div>
+    `;
+}
+
 /** @type {(inDate:string)=>Boxcast.Date} */
 const DateParse = (inDateString) =>
 {
@@ -313,4 +258,4 @@ const DateParse = (inDateString) =>
 };
 
 /** @type {(inChannel:string, inSelector:string)=>void} */
-export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:5000}));
+export default (inChannel, inSelector) => render(h(App, {channel:inChannel, interval:50000}), document.querySelector(inSelector));

index.html

@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>
+<head></head>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-</head>
 <body>
 
 <div style="max-width:500px; margin: 0 auto;">
@@ -10,7 +8,7 @@
     <script type="module">
         import Init from "./app.js";
         const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
-        Init(Channel.Dev, "#boxcast");
+        Init(Channel.Basics, "#boxcast");
     </script>
 </div>
 

testdata-03.json

@@ -1,30 +0,0 @@
-[
-    {
-        "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": []
-    }
-]