fix random styled components error

app.js

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

index.html

@@ -1,6 +1,8 @@
 <!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;">
@@ -8,7 +10,7 @@
     <script type="module">
         import Init from "./app.js";
         const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
-        Init(Channel.Basics, "#boxcast");
+        Init(Channel.Dev, "#boxcast");
     </script>
 </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": []
+    }
+]