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";
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
{
margin: 10px 0 0 0;
@ -30,12 +57,18 @@ const StyledRoot = styled.div`
font-weight: 900;
font-family: sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
&.Next
{
background: yellow;
color: black;
}
&.Soon
{
background: orange;
color: white;
}
&.Live
{
background: limegreen;
@ -71,7 +104,7 @@ const StyledRoot = styled.div`
}
button[disabled]
{
background: grey;
background: red;
}
}
}
@ -192,7 +225,6 @@ const App = props =>
}
, [ListGet]);
// on new video selected
useEffect(()=>
{
@ -212,7 +244,7 @@ const App = props =>
return html`
<${StyledRoot}>
<div id=${PlayerID}></div>
<div class="Boxcast-Player" id=${PlayerID}></div>
<div class="Boxcast-Playlist">
${
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} */
const BroadcastItem = ({item, previous, priority, selected, select}) =>
{
// pointer
let pointerText;
if(item.timeframe == "current" || item.timeframe == "preroll")
{
pointerText = html`<div class="Badge Live">Live</div>`;
}
else if (priority)
if (priority)
{
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;
if(!previous || (previous.start.Date !== item.start.Date))
{
@ -259,10 +297,11 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
</h3>`;
}
// button
let buttonText;
if(item.timeframe == "past")
{
buttonText = "Recording";
buttonText = "Re-watch";
}
if(item.timeframe == "current" || item.timeframe == "preroll")
{

4
index.html
View File

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