revert selecteget to id

app.js

@@ -7,14 +7,11 @@ import styled, { css, keyframes } from 'https://esm.sh/styled-components';
 import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react';
 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 Styles =
-{
-
-};
 
 const StyledRoot = styled.div`
 .Partition
@@ -26,6 +23,32 @@ const StyledRoot = styled.div`
     position: relative;
     display: flex;
     padding: 5px 0 5px 0;
+
+    .Pointer
+    {
+        width: 75px;
+        .Badge
+        {
+            display: inline-block;
+            border-radius: 20px;
+            padding: 2px 8px;
+            font-size: 12px;
+            font-weight: 900;
+            font-family: sans-serif;
+            letter-spacing: 0.1em;
+
+            &.Next
+            {
+                background: yellow;
+                color: black;
+            }
+            &.Live
+            {
+                background: limegreen;
+                color: white;
+            }
+        }
+    }
     .Time
     {
         width: 75px;
@@ -33,9 +56,29 @@ const StyledRoot = styled.div`
         font-size: 16px;
         text-align: right;
     }
-    .Pointer
+    .Title
     {
-        width: 75px;
+        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
@@ -79,7 +122,7 @@ 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>} */
@@ -102,7 +145,6 @@ const App = props =>
     {
         Player.current = boxcast(`#${PlayerID}`);
 
-        return;
         /** @type {()=>Promise} */
         const Ping = async () =>
         {
@@ -131,9 +173,9 @@ const App = props =>
 
                 if(SelectedGet == null) // if nothing is selected select the leading event
                 {
-                    SelectedSet(leading);
+                    SelectedSet(leading.id);
                 }
-                else if(SelectedGet?.id != leading?.id) // if something is selected other than the leading event, alert the user
+                else if(SelectedGet != leading?.id) // if something is selected other than the leading event, alert the user
                 {
                     AlertSet(true);
                 }
@@ -145,7 +187,10 @@ const App = props =>
         if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
         {
             LeadingSet(null);
-            SelectedSet(ListGet[0]);
+            if(SelectedGet == null)
+            {
+                SelectedSet(ListGet[0].id);
+            }
             AlertSet(false);
         }
     }
@@ -156,7 +201,7 @@ const App = props =>
     useEffect(()=>
     {
         const settings = {
-            selectedBroadcastId: SelectedGet?.id,
+            selectedBroadcastId: SelectedGet,
             showTitle: true,
             showDescription: true,
             showCountdown: true,
@@ -167,35 +212,38 @@ const App = props =>
 
         Player.current.loadChannel(props.channel, settings);
     }
-    , [SelectedGet])
+    , [SelectedGet]);
 
     return html`
     <${StyledRoot}>
         <div 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-Playlist">
         ${
-            ListGet.map( (item, index) => h(
+            ListGet.map( (item, index) =>
-                BroadcastItem,
+            {
+                return h(BroadcastItem,
                 {
                     item: item,
                     previous: ListGet[index-1],
                     priority: item.id == LeadingGet?.id,
-                    selected: item.id == SelectedGet?.id,
+                    selected: item.id == SelectedGet,
-                    select: ()=>SelectedSet(item)
+                    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); AlertSet(false); }}>Watch Now</button>
+            <button onClick=${()=>{ SelectedSet(LeadingGet.id); AlertSet(false); }}>Watch Now</button>
         </div>
     <//>
     `;
@@ -207,17 +255,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} class="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;
@@ -240,7 +290,7 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
 
     return html`
     ${ partition }
-    <div key=${item.id} onClick=${select} class="Broadcast">
+    <div class="Broadcast" key=${item.id} onClick=${select}>
         <div class="Pointer">${ pointerText }</div>
         <div class="Time">${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
         <div class="Title">${item.name}</strong>
@@ -274,4 +324,4 @@ const DateParse = (inDateString) =>
 };
 
 /** @type {(inChannel:string, inSelector:string)=>void} */
-export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:50000}));
+export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:5000}));

index.html

@@ -8,7 +8,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>