experimenting with outlines

app.js

@@ -6,179 +6,201 @@ 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-well-container
-    {
-        display: none;
-    }
-    .boxcast-well
-    {
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        gap: 10px 10px;
-        min-height: 10px;
-        margin: 0;
 
-        & > span, .boxcast-linkback
+    .Boxcast-Player
+    {
+        .boxcast-well-container
         {
-            display:none;
+            display: none;
         }
-
+        .boxcast-well
-        & > *
         {
+            display:flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px 10px;
+            min-height: 10px;
             margin: 0;
+
+            & > span, .boxcast-linkback
+            {
+                display:none;
+            }
+
+            & > *
+            {
+                margin: 0;
+            }
         }
     }
+    .Boxcast-Active
+    {
+        text-align: center;
+        padding:20px;
+        background: white;
+        & > * { margin: 0; }
+    }
 }
-.Boxcast-Active
+
-{
-    text-align: center;
-    padding:20px;
-    background: white;
-    & > * { margin: 0; }
-}
 .Boxcast-Playlist
 {
     max-width: 550px;
     margin: 30px auto;
-}
-.Partition
-{
-    margin: 15px 0 0 0;
-    padding: 0 0 8px 0;
-    border-bottom: 1px solid #dddddd;
-    text-align: center;
-}
-.Broadcast
-{
-    position: relative;
-    display: flex;
-    padding: 5px 0 5px 0;
 
-    & > *
+    .Partition
     {
-        box-sizing: border-box;
+        margin: 15px 0 0 0;
-        padding: 5px;
+        padding: 0 0 8px 0;
+        border-bottom: 1px solid #dddddd;
+        text-align: center;
     }
-
+    .Broadcast
-    .Pointer
     {
-        width: 75px;
+        position: relative;
-        text-align: right;
+        display: flex;
-        .Badge
+        padding: 5px 0 5px 0;
-        {
-            display: inline-block;
-            border-radius: 20px;
-            padding: 2px 8px;
-            font-size: 12px;
-            font-weight: 900;
-            font-family: sans-serif;
-            letter-spacing: 0.1em;
-            text-transform: uppercase;
-            text-align: center;
 
-            &.Next
+        & > *
+        {
+            box-sizing: border-box;
+            padding: 5px;
+        }
+
+        .Pointer
+        {
+            width: 75px;
+            text-align: right;
+            .Badge
             {
-                background: yellow;
+                display: inline-block;
-                color: black;
+                border-radius: 20px;
-            }
+                padding: 2px 8px;
-            &.Soon
+                font-size: 12px;
-            {
+                font-weight: 900;
-                background: orange;
+                font-family: sans-serif;
-                color: white;
+                letter-spacing: 0.1em;
-            }
+                text-transform: uppercase;
-            &.Live
+                text-align: center;
-            {
+
-                background: limegreen;
+                &.Next
-                color: white;
+                {
+                    background: yellow;
+                    color: black;
+                }
+                &.Soon
+                {
+                    background: orange;
+                    color: white;
+                }
+                &.Live
+                {
+                    background: red;
+                    color: white;
+                }
             }
         }
-    }
-    .Time
-    {
-        width: 80px;
-        font-size: 16px;
-        text-align: right;
-    }
-    .Title
-    {
-        flex: 1;
-        font-weight: 900;
-    }
-    .Control
-    {
-        width: 80px;
-
-    }
-
-    button
-    {
-        appearance: none;
-        display: inline-block;
-        padding: 5px 10px 5px 10px;
-        background: black;
-        cursor: pointer;
-        border: none;
-        color: white;
-        font-size: 10px;
-        font-weight: 900;
-        transition: all 0.4s;
-    }
-    button[disabled]
-    {
-        background: red !important;
-        border-radius: 20px;
-    }
-    button:hover
-    {
-        border-radius: 20px;
-    }
-    &.future button
-    {
-        background: #aaa;
-    }
-
-    @media(max-width:500px)
-    {
-        flex-wrap: wrap;
         .Time
         {
-            order: 0;
+            width: 80px;
-            width: 30%;
+            font-size: 16px;
+            text-align: right;
         }
         .Title
         {
-            order: 1;
+            flex: 1;
-            flex: none;
+            font-weight: 900;
-            width: 60%;
-        }
-        .Pointer
-        {
-            order: 2;
-            width: 30%;
         }
         .Control
         {
-            order: 3;
+            width: 100px;
-            width: 60%;
+
+        }
+
+        button
+        {
+            position: relative;
+            appearance: none;
+            display: block;
+            width: 100%;
+            padding: 5px 10px 5px 10px;
+            background: black;
+            cursor: pointer;
+            border: none;
+            color: white;
+            font-size: 14px;
+            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]::before
+        {
+            top: -5px;
+            left: -5px;
+            border: 5px solid transparent;
+            outline: 5px solid red;
+        }
+        button:hover::before
+        {
+            outline: 5px solid red;
+        }
+        &.future button
+        {
+            background: #aaa;
+        }
+
+        @media(max-width:500px)
+        {
+            flex-wrap: wrap;
+            .Time
+            {
+                order: 0;
+                width: 30%;
+            }
+            .Title
+            {
+                order: 1;
+                flex: none;
+                width: 60%;
+            }
+            .Pointer
+            {
+                order: 2;
+                width: 30%;
+            }
+            .Control
+            {
+                order: 3;
+                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": []
     }
 ]