misc tweaks

revert border stuff
experimenting with outlines
2022-04-28 11:32:48 -04:00 · 2022-04-28 11:02:23 -04:00 · 2022-04-28 10:00:31 -04:00
2 changed files with 266 additions and 137 deletions
--- a/app.js
+++ b/app.js
@ -17,7 +17,7 @@ const StyledRoot = styled.div`
 {
    background: white;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
-}
+
    .Boxcast-Player
    {
        .boxcast-well-container
@ -51,14 +51,16 @@ const StyledRoot = styled.div`
        background: white;
        & > * { margin: 0; }
    }
+}
+
 .Boxcast-Playlist
 {
    max-width: 550px;
    margin: 30px auto;
-}
+
    .Partition
    {
-    margin: 15px 0 0 0;
+        margin: 30px 0 0 0;
        padding: 0 0 8px 0;
        border-bottom: 1px solid #dddddd;
        text-align: center;
@ -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-weight: 900;
+            font-family: sans-serif;
+            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)
@ -178,7 +185,9 @@ const StyledRoot = styled.div`
            }
        }
    }
-.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>
    <//>
    `;
--- a/testdata-03.json
+++ b/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": []
    }
 ]
Author	SHA1	Message	Date
TreetopFlyer	d54da92dd3	misc tweaks	2022-04-28 11:32:48 -04:00
TreetopFlyer	d4bbc49260	revert border stuff	2022-04-28 11:02:23 -04:00
TreetopFlyer	d7ea84ec95	experimenting with outlines	2022-04-28 10:00:31 -04:00