app.classic.js

@@ -1,27 +0,0 @@
-import 'https://js.boxcast.com/v3.min.js';
-
-const Channels = {
-    Basics: "sfz7ja3rlpoous6usu8a",
-    Sunday: "gzahmhugrzogttfdtbjj",
-    Dev: "r3os2zfdnhlquhuypgtp"
-};
-
-const Player = boxcast("#boxcast");
-Player.loadChannel(Channels.Basics,
-{
-    showTitle: true,
-    showDescription: true,
-    showRelated: true,
-    showDocuments: true,
-    showIndex :true,
-    showDonations: false,
-    showCountdown: true,
-    relatedBroadcastsQuery:
-    {
-        s: "starts_at",
-        l: 100,
-        q: "timeframe:next starts_at:[2022-04-01T00:00:00 TO 2022-06-01T00:00:00]"
-    },
-    autoplay: true,
-    defaultVideo: "next",
-});

app.js

@@ -6,24 +6,10 @@ 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;
@@ -44,13 +30,6 @@ const StyledRoot = styled.div`
         }
     }
 }
-.Boxcast-Active
-{
-    text-align: center;
-    padding:20px;
-    background: white;
-    & > * { margin: 0; }
-}
 .Boxcast-Playlist
 {
     max-width: 550px;
@@ -58,10 +37,7 @@ const StyledRoot = styled.div`
 }
 .Partition
 {
-    margin: 15px 0 0 0;
+    margin: 10px 0 0 0;
-    padding: 0 0 8px 0;
-    border-bottom: 1px solid #dddddd;
-    text-align: center;
 }
 .Broadcast
 {
@@ -69,16 +45,9 @@ 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;
@@ -89,7 +58,6 @@ const StyledRoot = styled.div`
             font-family: sans-serif;
             letter-spacing: 0.1em;
             text-transform: uppercase;
-            text-align: center;
 
             &.Next
             {
@@ -110,71 +78,33 @@ const StyledRoot = styled.div`
     }
     .Time
     {
-        width: 80px;
+        width: 75px;
+        margin-right: 5px;
         font-size: 16px;
         text-align: right;
     }
     .Title
     {
         flex: 1;
-        font-weight: 900;
     }
     .Control
     {
-        width: 80px;
+        button
-
-    }
-
-    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;
+            appearance: none;
-            width: 30%;
+            display: block;
+            width: 80px;
+            padding: 5px 10px 5px 10px;
+            background: black;
+            cursor: pointer;
+            border: none;
+            color: white;
+            font-size: 10px;
+            font-weight: 900;
         }
-        .Title
+        button[disabled]
         {
-            order: 1;
+            background: red;
-            flex: none;
-            width: 60%;
-        }
-        .Pointer
-        {
-            order: 2;
-            width: 30%;
-        }
-        .Control
-        {
-            order: 3;
-            width: 60%;
         }
     }
 }
@@ -184,7 +114,7 @@ const StyledRoot = styled.div`
     right: 20px;
     bottom: -300px;
     width: 300px;
-    padding: 20px 0 40px 0;
+    height: 200px;
     background: #333;
     border-radius: 5px;
     transition: bottom 0.4s;
@@ -196,23 +126,13 @@ 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;
-        border: 3px solid white;
+        top: -15px;
-        top: -20px;
         right: 10px;
         background: #000000;
         cursor: pointer;
@@ -243,7 +163,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);
 
@@ -319,27 +239,12 @@ const App = props =>
         };
 
         Player.current.loadChannel(props.channel, settings);
-
-        document.documentElement.style.scrollBehavior = "smooth";
-        window.location = (`#${PlayerID}`);
     }
     , [SelectedGet]);
 
     return html`
     <${StyledRoot}>
-        <div class="Boxcast-Upper">
+        <div class="Boxcast-Player" id=${PlayerID}></div>
-            <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) =>
@@ -370,9 +275,18 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
 {
     // pointer
     let pointerText;
-    if (priority){ pointerText = html`<div class="Badge Next">Next</div>`; }
+    if (priority)
-    if(item.timeframe == "preroll"){ pointerText = html`<div class="Badge Soon">Soon</div>`; }
+    {
-    if(item.timeframe == "current"){ pointerText = html`<div class="Badge Live">Live</div>`; }
+        pointerText = html`<div class="Badge Next">Next</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;
@@ -385,19 +299,32 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
 
     // button
     let buttonText;
-    if(item.timeframe == "past"){ buttonText = "Rewatch"; }
+    if(item.timeframe == "past")
-    if(item.timeframe == "current" || item.timeframe == "preroll"){ buttonText = "Watch"; }
+    {
-    if(item.timeframe == "future"){ buttonText = "Preview"; }
+        buttonText = "Re-watch";
+    }
+    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="Broadcast" key=${item.id} onClick=${select}>
+        <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>`;
 };
 
@@ -424,8 +351,5 @@ const DateParse = (inDateString) =>
     return obj;
 };
 
-/** @type {(inChannel:string, inSelector:string, inInterval:number)=>void} */
+/** @type {(inChannel:string, inSelector:string)=>void} */
-const Init = (inChannel, inSelector, inInterval) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:inInterval}));
+export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:5000}));
-
-const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
-Init(Channel.Basics, "#boxcast", 5000);

index.html

@@ -8,7 +8,9 @@
 <div style="max-width:1100px; margin: 0 auto;">
     <div id="boxcast"></div>
     <script type="module">
-        import "./app.js";
+        import Init from "./app.js";
+        const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
+        Init(Channel.Basics, "#boxcast");
     </script>
 </div>