fix random styled components error

revert selecteget to id
react + styled-components
2022-04-26 17:10:25 -04:00 · 2022-04-26 16:00:04 -04:00 · 2022-04-26 13:50:21 -04:00 · 2022-04-26 12:04:39 -04:00
3 changed files with 208 additions and 121 deletions
--- a/app.js
+++ b/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 { 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 { 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";

-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",
-        display: "flex",
-        padding: "5px 0 5px 0",
-    },
-    Time:
-    {
-        width: "75px",
-        marginRight: "5px",
-        fontSize: "16px",
-        textAlign: "right",
-    },
-    Partition:
-    {
-        margin: "10px 0 0 0",
-    },
-    Pointer:
-    {
-        width: "75px",
-    },
-    Alert:
-    {
-        position: "fixed",
-        right: "20px",
-        bottom: "20px",
-        width: "300px",
-        height: "200px",
-        background: "#333",
-        borderRadius: "5px",
-        transition: "all 0.4s",
-        color: "#fff",
+        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;
+            }
+        }
    }
-};
-const PlayerID = "boxcast-player"
+    .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 () =>
        {
@ -102,77 +154,87 @@ const App = props =>
    }
    , []);

-    // on new list
-    useEffect(()=>
-    {
-        let live;
-        for(let i=0; i<ListGet.length; i++)
+   // 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
        {
-            if(ListGet[i].timeframe != "past")
+            LeadingSet(null);
+            if(SelectedGet == null)
            {
-                live = ListGet[i];
-                break;
+                SelectedSet(ListGet[0].id);
            }
+            AlertSet(false);
        }
-        if(LiveGet?.id != live?.id)
-        {
-            console.log("new video starting")
-        }
-        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,
-        {
-            selectedBroadcastId: SelectedGet?.id,
+        const settings = {
+            selectedBroadcastId: SelectedGet,
            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(
-                BroadcastItem,
+            ListGet.map( (item, index) =>
+            {
+                return h(BroadcastItem,
                {
                    item: item,
                    previous: ListGet[index-1],
-                    priority: item.id == LiveGet?.id,
-                    selected: item.id == SelectedGet?.id,
-                    select: ()=>SelectedSet(item)
-                }
-            ))
+                    priority: item.id == LeadingGet?.id,
+                    selected: item.id == SelectedGet,
+                    select: ()=>SelectedSet(item.id)
+                });
+            })
        }
        </div>
-        <${BroadcastAlert}><//>
-    </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.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 style=${Styles.Pointer}>${ pointerText }</div>
-        <div style=${Styles.Time}>${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
-        <strong>${item.name}</strong>
-        <button onClick=${select} disabled=${selected}>${buttonText}</button>
+    <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>
+        <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}));
--- a/index.html
+++ b/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>

--- a/testdata-03.json
+++ b/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": []
+    }
+]
Author	SHA1	Message	Date
TreetopFlyer	be212c3bb0	fix random styled components error	2022-04-26 17:10:25 -04:00
TreetopFlyer	88516c82b2	revert selecteget to id	2022-04-26 16:00:04 -04:00
TreetopFlyer	c54e398eb1	react + styled-components	2022-04-26 13:50:21 -04:00
TreetopFlyer	ec2c8916e0	alert toggling	2022-04-26 12:04:39 -04:00