From 6bb6019ad549dee52c5490ce50bf4e147e515a57 Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Tue, 26 Apr 2022 18:01:57 -0400 Subject: [PATCH] misc tweaks --- app.js | 57 +++++++++++++++++++++++++++++++++++++++++++++--------- index.html | 4 ++-- 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/app.js b/app.js index 8647408..239ad49 100644 --- a/app.js +++ b/app.js @@ -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}> -
+
${ 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`
Live
`; - } - else if (priority) + if (priority) { pointerText = html``; } + if(item.timeframe == "current") + { + pointerText = html`
Live
`; + } + if(item.timeframe == "preroll") + { + pointerText = html`
Soon
`; + } + // (date) partition let partition; if(!previous || (previous.start.Date !== item.start.Date)) { @@ -259,10 +297,11 @@ const BroadcastItem = ({item, previous, priority, selected, select}) => `; } + // button let buttonText; if(item.timeframe == "past") { - buttonText = "Recording"; + buttonText = "Re-watch"; } if(item.timeframe == "current" || item.timeframe == "preroll") { diff --git a/index.html b/index.html index 50e7c85..518e180 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,12 @@ -
+