css changes

app.js

@@ -6,10 +6,24 @@ 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;
@@ -30,6 +44,13 @@ const StyledRoot = styled.div`
         }
     }
 }
+.Boxcast-Active
+{
+    text-align: center;
+    padding:20px;
+    background: white;
+    & > * { margin: 0; }
+}
 .Boxcast-Playlist
 {
     max-width: 550px;
@@ -37,7 +58,10 @@ const StyledRoot = styled.div`
 }
 .Partition
 {
-    margin: 10px 0 0 0;
+    margin: 15px 0 0 0;
+    padding: 0 0 8px 0;
+    border-bottom: 1px solid #dddddd;
+    text-align: center;
 }
 .Broadcast
 {
@@ -45,9 +69,16 @@ const StyledRoot = styled.div`
     display: flex;
     padding: 5px 0 5px 0;
 
+    & > *
+    {
+        box-sizing: border-box;
+        padding: 5px;
+    }
+
     .Pointer
     {
         width: 75px;
+        text-align: right;
         .Badge
         {
             display: inline-block;
@@ -58,6 +89,7 @@ const StyledRoot = styled.div`
             font-family: sans-serif;
             letter-spacing: 0.1em;
             text-transform: uppercase;
+            text-align: center;
 
             &.Next
             {
@@ -78,42 +110,71 @@ const StyledRoot = styled.div`
     }
     .Time
     {
-        width: 75px;
+        width: 80px;
-        margin-right: 5px;
         font-size: 16px;
         text-align: right;
     }
     .Title
     {
         flex: 1;
+        font-weight: 900;
     }
     .Control
     {
-        button
+        width: 80px;
-        {
+
-            appearance: none;
+    }
-            display: block;
+
-            width: 80px;
+    button
-            padding: 5px 10px 5px 10px;
+    {
-            background: black;
+        appearance: none;
-            cursor: pointer;
+        display: inline-block;
-            border: none;
+        padding: 5px 10px 5px 10px;
-            color: white;
+        background: black;
-            font-size: 10px;
+        cursor: pointer;
-            font-weight: 900;
+        border: none;
-        }
+        color: white;
-        button[disabled]
+        font-size: 10px;
-        {
+        font-weight: 900;
-            background: red;
+        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: 30%;
+        }
+        .Title
+        {
+            order: 1;
+            flex: none;
+            width: 60%;
+        }
         .Pointer
         {
-            width: 100%;
+            order: 2;
+            width: 30%;
+        }
+        .Control
+        {
+            order: 3;
+            width: 60%;
         }
     }
 }
@@ -123,7 +184,7 @@ const StyledRoot = styled.div`
     right: 20px;
     bottom: -300px;
     width: 300px;
-    height: 200px;
+    padding: 20px 0 40px 0;
     background: #333;
     border-radius: 5px;
     transition: bottom 0.4s;
@@ -135,13 +196,23 @@ const StyledRoot = styled.div`
         bottom: 20px;
     }
 
+    button
+    {
+        padding: 5px 15px;
+        border: none;
+        background: white;
+        cursor: pointer;
+        font-weight: 900;
+    }
+
     .Close
     {
         display: inline-block;
         position: absolute;
         padding: 5px 10px 5px 10px;
         border-radius: 20px;
-        top: -15px;
+        border: 3px solid white;
+        top: -20px;
         right: 10px;
         background: #000000;
         cursor: pointer;
@@ -172,7 +243,7 @@ const App = props =>
         inList.sort((a, b) => a.starts_at > b.starts_at ? 1 : -1);
         inList.forEach( item => item.start = DateParse(item.starts_at));
         return inList;
-    }
+    };
 
     const Player = useRef(null);
 
@@ -248,12 +319,27 @@ const App = props =>
         };
 
         Player.current.loadChannel(props.channel, settings);
+
+        document.documentElement.style.scrollBehavior = "smooth";
+        window.location = (`#${PlayerID}`);
     }
     , [SelectedGet]);
 
     return html`
     <${StyledRoot}>
-        <div class="Boxcast-Player" id=${PlayerID}></div>
+        <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>
+        </div>
         <div class="Boxcast-Playlist">
         ${
             ListGet.map( (item, index) =>
@@ -284,18 +370,9 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
 {
     // pointer
     let pointerText;
-    if (priority)
+    if (priority){ pointerText = html`<div class="Badge Next">Next</div>`; }
-    {
+    if(item.timeframe == "preroll"){ pointerText = html`<div class="Badge Soon">Soon</div>`; }
-        pointerText = html`<div class="Badge Next">Next</div>`;
+    if(item.timeframe == "current"){ pointerText = html`<div class="Badge Live">Live</div>`; }
-    }
-    if(item.timeframe == "current")
-    {
-        pointerText = html`<div class="Badge Live">Live</div>`;
-    }
-    if(item.timeframe == "preroll")
-    {
-        pointerText = html`<div class="Badge Soon">Soon</div>`;
-    }
 
     // (date) partition
     let partition;
@@ -308,32 +385,19 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
 
     // button
     let buttonText;
-    if(item.timeframe == "past")
+    if(item.timeframe == "past"){ buttonText = "Rewatch"; }
-    {
+    if(item.timeframe == "current" || item.timeframe == "preroll"){ buttonText = "Watch"; }
-        buttonText = "Re-watch";
+    if(item.timeframe == "future"){ buttonText = "Preview"; }
-    }
-    if(item.timeframe == "current" || item.timeframe == "preroll")
-    {
-        buttonText = "Watch";
-    }
-    if(item.timeframe == "future")
-    {
-        buttonText = "Preview";
-    }
-    if(selected)
-    {
-        buttonText = "(Viewing)";
-    }
 
     return html`
     ${ partition }
     <div class=${`Broadcast ${item.timeframe}`} key=${item.id}>
-        <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 class="Pointer">${ pointerText }</div>
     </div>`;
 };