alert toggling

app.js

@@ -6,6 +6,7 @@ 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 =
 {
@@ -41,6 +42,7 @@ const Styles =
         borderRadius: "5px",
         transition: "all 0.4s",
         color: "#fff",
+        textAlign: "center",
     }
 };
 const PlayerID = "boxcast-player"
@@ -55,7 +57,10 @@ const App = props =>
     const [SelectedGet, SelectedSet] = useState(null);
 
     /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
-    const [LiveGet, LiveSet] = useState(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) => {
@@ -70,21 +75,6 @@ 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} */
@@ -105,40 +95,41 @@ const App = props =>
     // on new list
     useEffect(()=>
     {
-        let live;
+        let leading;
         for(let i=0; i<ListGet.length; i++)
         {
             if(ListGet[i].timeframe != "past")
             {
-                live = ListGet[i];
+                leading = ListGet[i];
-                break;
+                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(LiveGet?.id != live?.id)
+
+        if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
         {
-            console.log("new video starting")
+            LeadingSet(null);
+            SelectedSet(ListGet[0]);
+            AlertSet(false);
         }
-        if(SelectedGet?.id != live?.id)
-        {
-            console.log("would you like to switch?");
-        }
-        LiveSet(live);
     }
     , [ListGet]);
 
-    // on new event started
-    useEffect(()=>
-    {
-        // alert("New session is starting.")
-
-    }
-    , [LiveGet]);
 
     // on new video selected
     useEffect(()=>
     {
-        Player.current.loadChannel(props.channel,
+        const settings = {
-        {
             selectedBroadcastId: SelectedGet?.id,
             showTitle: true,
             showDescription: true,
@@ -146,7 +137,9 @@ const App = props =>
             showRelated: false,
             autoplay: true,
             defaultVideo: "next"
-        });
+        };
+
+        Player.current.loadChannel(props.channel, settings);
     }
     , [SelectedGet])
 
@@ -155,7 +148,8 @@ const App = props =>
         <div id=${PlayerID}></div>
         <div>
             <button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
-            <button onClick=${()=>ListSet(SortStart(State02))}>testdata-01</button>
+            <button onClick=${()=>ListSet(SortStart(State02))}>testdata-02</button>
+            <button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
         </div>
         <div class="Boxcast-Playlist">
         ${
@@ -164,14 +158,19 @@ const App = props =>
                 {
                     item: item,
                     previous: ListGet[index-1],
-                    priority: item.id == LiveGet?.id,
+                    priority: item.id == LeadingGet?.id,
                     selected: item.id == SelectedGet?.id,
                     select: ()=>SelectedSet(item)
                 }
             ))
         }
         </div>
-        <${BroadcastAlert}><//>
+        ${ AlertGet ? h(BroadcastAlert,
+        {
+               broadcast: LeadingGet,
+              clickWatch: ()=>{ SelectedSet(LeadingGet); AlertSet(false); },
+            clickDismiss: ()=>{ AlertSet(false) }
+        }) : null }
     </div>
     `;
 }
@@ -223,13 +222,15 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
     </div>`;
 };
 
-const BroadcastAlert = () =>
+/** @type { (props:{broadcast:Boxcast.Broadcast, clickWatch:()=>void, clickDismiss:()=>void})=>any } */
+const BroadcastAlert = ({broadcast, clickWatch, clickDismiss}) =>
 {
     return html`
     <div style=${Styles.Alert}>
-        <span>X</span>
+        <span onClick=${clickDismiss}>X</span>
-        <h4>A new session is starting.</h4>
+        <h4>A new session is starting:</h4>
-        <button>Watch Now</button>
+        <p>${broadcast.name}</p>
+        <button onClick=${clickWatch}>Watch Now</button>
     </div>
     `;
 }

testdata-03.json

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