misc tweaks

app.js

@@ -17,9 +17,9 @@ const StyledRoot = styled.div`
 {
     background: white;
     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
-}
+
-.Boxcast-Player
+    .Boxcast-Player
-{
+    {
         .boxcast-well-container
         {
             display: none;
@@ -43,28 +43,30 @@ const StyledRoot = styled.div`
                 margin: 0;
             }
         }
-}
+    }
-.Boxcast-Active
+    .Boxcast-Active
-{
+    {
         text-align: center;
         padding:20px;
         background: white;
         & > * { margin: 0; }
+    }
 }
+
 .Boxcast-Playlist
 {
     max-width: 550px;
     margin: 30px auto;
-}
+
-.Partition
+    .Partition
-{
+    {
-    margin: 15px 0 0 0;
+        margin: 30px 0 0 0;
         padding: 0 0 8px 0;
         border-bottom: 1px solid #dddddd;
         text-align: center;
-}
+    }
-.Broadcast
+    .Broadcast
-{
+    {
         position: relative;
         display: flex;
         padding: 5px 0 5px 0;
@@ -103,7 +105,7 @@ const StyledRoot = styled.div`
                 }
                 &.Live
                 {
-                background: limegreen;
+                    background: red;
                     color: white;
                 }
             }
@@ -121,35 +123,40 @@ const StyledRoot = styled.div`
         }
         .Control
         {
-        width: 80px;
+            width: 100px;
 
         }
 
         button
         {
+            position: relative;
             appearance: none;
-        display: inline-block;
+            display: block;
+            width: 100%;
+            max-width:150px;
             padding: 5px 10px 5px 10px;
-        background: black;
+            background: #0e2a3f;
             cursor: pointer;
             border: none;
             color: white;
-        font-size: 10px;
+            font-family: sans-serif;
-        font-weight: 900;
+            font-size: 14px;
+            font-weight: 600;
             transition: all 0.4s;
         }
-    button[disabled]
-    {
-        background: red !important;
-        border-radius: 20px;
-    }
         button:hover
         {
-        border-radius: 20px;
+            border-radius: 50px;
         }
+        button[disabled]
+        {
+            border-radius: 50px;
+            background: red !important;
+        }
+
         &.future button
         {
-        background: #aaa;
+            background: #c3b7a9;
         }
 
         @media(max-width:500px)
@@ -177,8 +184,10 @@ const StyledRoot = styled.div`
                 width: 60%;
             }
         }
+    }
 }
-.Alert
+
+.Boxcast-Alert
 {
     position: fixed;
     right: 20px;
@@ -319,16 +328,23 @@ const App = props =>
         };
 
         Player.current.loadChannel(props.channel, settings);
-
-        document.documentElement.style.scrollBehavior = "smooth";
-        window.location = (`#${PlayerID}`);
     }
     , [SelectedGet]);
 
+
+    /** @type {(inItem:Boxcast.Broadcast)=>void} */
+    const SelectionTransition = (inItem) => 
+    {
+        SelectedSet(inItem.id);
+        document.documentElement.style.scrollBehavior = "smooth";
+        setTimeout(()=>window.location = "#"+PlayerID, 450);
+    };
+
     return html`
     <${StyledRoot}>
         <div class="Boxcast-Upper">
             <div class="Boxcast-Player" id=${PlayerID}></div>
+
             <!--
             <div>
                 <button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
@@ -336,6 +352,7 @@ const App = props =>
                 <button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
             </div>
             -->
+
             <div class="Boxcast-Active">
                 <h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>
             </div>
@@ -350,16 +367,16 @@ const App = props =>
                     previous: ListGet[index-1],
                     priority: item.id == LeadingGet?.id,
                     selected: item.id == SelectedGet,
-                    select: ()=>SelectedSet(item.id)
+                    select: () => SelectionTransition(item)
                 });
             })
         }
         </div>
-        <div class=${`Alert ${ AlertGet ? " Show" : null }`}>
+        <div class=${`Boxcast-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>
+            <button onClick=${()=>{ SelectionTransition(LeadingGet); AlertSet(false); }}>Watch Now</button>
         </div>
     <//>
     `;

testdata-03.json

@@ -26,5 +26,117 @@
         "account_id": "ilkxk5hkn51drmocrv0d",
         "channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
         "tags": []
+    },
+    {
+        "id": "n1w1rbpaaohkrx2aumll",
+        "name": "Main Session 2 -John Woodhouse",
+        "starts_at": "2022-05-02T23:10:00Z",
+        "stops_at": "2022-05-03T00:30:00Z",
+        "timeframe": "current",
+        "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-mnhpqpgyg8kobjgqerpw",
+        "tags": []
+    },
+    {
+        "id": "wwomf8amsgnct6esof3s",
+        "name": "Main Session 3 -Alistair Begg",
+        "starts_at": "2022-05-03T13:10:00Z",
+        "stops_at": "2022-05-03T14:30:00Z",
+        "timeframe": "future",
+        "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": "main-session-2--john-woodhouse-giplu3h3d7rsgays1yyg",
+        "tags": []
+    },
+    {
+        "id": "mjzsudcjjqor4qvpioqx",
+        "name": "Main Session 4 -John Woodhouse",
+        "starts_at": "2022-05-03T14:55:00Z",
+        "stops_at": "2022-05-03T16:15:00Z",
+        "timeframe": "future",
+        "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": "main-session-2--john-woodhouse-odnunx2aaa1ztxqtufaj",
+        "tags": []
+    },
+    {
+        "id": "ybwm92ssmqhshhrfpvfr",
+        "name": "Main Session 5 -John Woodhouse",
+        "starts_at": "2022-05-03T17:25:00Z",
+        "stops_at": "2022-05-03T18:35:00Z",
+        "timeframe": "future",
+        "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": "main-session-2--john-woodhouse-wdyqpnsguolrvjwl4aei",
+        "tags": []
+    },
+    {
+        "id": "jed2ccr6o9vukpavrs7t",
+        "name": "Breakout Session -Tony Merida",
+        "starts_at": "2022-05-03T18:40:00Z",
+        "stops_at": "2022-05-03T20:00:00Z",
+        "timeframe": "future",
+        "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": "main-session-6--tony-merida-xkw75et1zzz48xdq5grz",
+        "tags": []
+    },
+    {
+        "id": "yo8sefnnejvw3cx3vhup",
+        "name": "Q\u0026A with Alistair Begg",
+        "starts_at": "2022-05-04T00:25:00Z",
+        "stops_at": "2022-05-04T01:45:00Z",
+        "timeframe": "future",
+        "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": "main-session-2--john-woodhouse-r7ufs6iabwuch7w9hgmm",
+        "tags": []
+    },
+    {
+        "id": "ht6wddox6ompgbusacle",
+        "name": "Main Session 6 - John Woodhouse",
+        "starts_at": "2022-05-04T13:10:00Z",
+        "stops_at": "2022-05-04T14:30:00Z",
+        "timeframe": "future",
+        "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": "qa-with-alistair-begg-mmyh7oyiecuuqxykafff",
+        "tags": []
+    },
+    {
+        "id": "r9s2oqfl4vhxzfkx1bwf",
+        "name": "Panel Q\u0026A",
+        "starts_at": "2022-05-04T14:55:00Z",
+        "stops_at": "2022-05-04T16:30:00Z",
+        "timeframe": "future",
+        "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": "panel-qa-v7jfkqhc8viidxebcvvk",
+        "tags": []
     }
 ]