SethTrowbridge/boxcast-playlist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

misc tweaks

Browse Source
This commit is contained in:
TreetopFlyer 2022-04-26 18:01:57 -04:00
parent be212c3bb0
commit 6bb6019ad5
2 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app.js
View File

@ -8,6 +8,33 @@ import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/
import { createRoot } from "https://esm.sh/react-dom/client"; import { createRoot } from "https://esm.sh/react-dom/client";
const StyledRoot = styled.div` const StyledRoot = styled.div`
.Boxcast-Player
{
.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-Playlist
{
max-width: 550px;
margin: 30px auto;
}
.Partition .Partition
{ {
margin: 10px 0 0 0; margin: 10px 0 0 0;
@ -30,12 +57,18 @@ const StyledRoot = styled.div`
font-weight: 900; font-weight: 900;
font-family: sans-serif; font-family: sans-serif;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase;
&.Next &.Next
{ {
background: yellow; background: yellow;
color: black; color: black;
} }
&.Soon
{
background: orange;
color: white;
}
&.Live &.Live
{ {
background: limegreen; background: limegreen;
@ -71,7 +104,7 @@ const StyledRoot = styled.div`
} }
button[disabled] button[disabled]
{ {
background: grey; background: red;
} }
} }
} }
@ -192,7 +225,6 @@ const App = props =>
} }
, [ListGet]); , [ListGet]);
// on new video selected // on new video selected
useEffect(()=> useEffect(()=>
{ {
@ -212,7 +244,7 @@ const App = props =>
return html` return html`
<${StyledRoot}> <${StyledRoot}>
<div id=${PlayerID}></div> <div class="Boxcast-Player" id=${PlayerID}></div>
<div class="Boxcast-Playlist"> <div class="Boxcast-Playlist">
${ ${
ListGet.map( (item, index) => ListGet.map( (item, index) =>
@ -241,16 +273,22 @@ const App = props =>
/** @type {(props:{item:Boxcast.Broadcast, previous: false | Boxcast.Broadcast, priority:boolean, selected:boolean, select:()=>void})=>any} */ /** @type {(props:{item:Boxcast.Broadcast, previous: false | Boxcast.Broadcast, priority:boolean, selected:boolean, select:()=>void})=>any} */
const BroadcastItem = ({item, previous, priority, selected, select}) => const BroadcastItem = ({item, previous, priority, selected, select}) =>
{ {
// pointer
let pointerText; let pointerText;
if(item.timeframe == "current" || item.timeframe == "preroll") if (priority)
{
pointerText = html`<div class="Badge Live">Live</div>`;
}
else if (priority)
{ {
pointerText = html`<div class="Badge Next">Next</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; let partition;
if(!previous || (previous.start.Date !== item.start.Date)) if(!previous || (previous.start.Date !== item.start.Date))
{ {
@ -259,10 +297,11 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
</h3>`; </h3>`;
} }
// button
let buttonText; let buttonText;
if(item.timeframe == "past") if(item.timeframe == "past")
{ {
buttonText = "Recording"; buttonText = "Re-watch";
} }
if(item.timeframe == "current" || item.timeframe == "preroll") if(item.timeframe == "current" || item.timeframe == "preroll")
{ {

4
index.html
View File

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