experimenting with outlines

app.js

@@ -6,20 +6,20 @@ 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";
-/*
+
 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 StyledRoot = styled.div`
 .Boxcast-Upper
 {
     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;
         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,31 +123,49 @@ const StyledRoot = styled.div`
         }
         .Control
         {
-        width: 80px;
+            width: 100px;
 
         }
 
         button
         {
+            position: relative;
             appearance: none;
-        display: inline-block;
+            display: block;
+            width: 100%;
             padding: 5px 10px 5px 10px;
             background: black;
             cursor: pointer;
             border: none;
             color: white;
-        font-size: 10px;
+            font-size: 14px;
-        font-weight: 900;
+            font-weight: 600;
+            transition: all 0.4s;
+
+            &::before
+            {
+                content: " ";
+                display: block;
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                width: 100%;
+                height: 100%;
+                border: 0px solid transparent;
+                outline: 0px solid red;
                 transition: all 0.4s;
             }
-    button[disabled]
-    {
-        background: red !important;
-        border-radius: 20px;
         }
-    button:hover
+        button[disabled]::before
         {
-        border-radius: 20px;
+            top: -5px;
+            left: -5px;
+            border: 5px solid transparent;
+            outline: 5px solid red;
+        }
+        button:hover::before
+        {
+            outline: 5px solid red;
         }
         &.future button
         {
@@ -177,8 +197,10 @@ const StyledRoot = styled.div`
                 width: 60%;
             }
         }
+    }
 }
-.Alert
+
+.Boxcast-Alert
 {
     position: fixed;
     right: 20px;
@@ -319,23 +341,29 @@ 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";
+        window.location = "#"+PlayerID;
+    };
+
     return html`
     <${StyledRoot}>
         <div class="Boxcast-Upper">
             <div class="Boxcast-Player" 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-Active">
                 <h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>
             </div>
@@ -350,16 +378,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": []
     }
 ]