From 65d50e7cb75b94cc2f5473d251d22a07074dec3c Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Mon, 25 Apr 2022 10:36:55 -0400 Subject: [PATCH] misc --- app.js | 55 +++++++++++++++++++++++++++++++++++++++--------------- index.html | 28 ++++++++++++++++++--------- 2 files changed, 59 insertions(+), 24 deletions(-) diff --git a/app.js b/app.js index 8d510c6..f107a25 100644 --- a/app.js +++ b/app.js @@ -12,7 +12,7 @@ const App = props => const [ListGet, ListSet] = useState([]); /** @type {Boxcast.StateBinding} */ - const Selected = useState(""); + const [SelectedGet, SelectedSet] = useState(""); /** @type {Boxcast.StateBinding} */ const [LiveGet, LiveSet] = useState(""); @@ -20,46 +20,71 @@ const App = props => /** @type {(item:Boxcast.Broadcast)=>boolean} */ const Iterator = (item) => item.timeframe == "current" || item.timeframe == "preroll"; - /** @type {()=>Promise} */ - const Ping = async () => - { - const response = await fetch(`https://rest.boxcast.com/channels/${props.channel}/broadcasts?s=starts_at&l=1000`); - const json = await response.json(); - ListSet(json); - LiveSet(json.filter(Iterator)[0] || ""); - }; useEffect(()=> { + /** @type {()=>Promise} */ + const Ping = async () => + { + const response = await fetch(`https://rest.boxcast.com/channels/${props.channel}/broadcasts?l=50`); + /** @type {Array} */ + const json = await response.json(); + json.sort((a, b) => a.starts_at > b.starts_at ? 1 : -1); + ListSet(json); + }; + Ping(); const timer = setInterval(Ping, props.interval); return ()=>clearInterval(timer); } , []); - useEffect(()=>{alert("New session is starting.")}, [LiveGet]); + useEffect(()=> + { + let live = ""; + for(let i=0; i + { + // alert("New session is starting.") + } + , [LiveGet]); return html`
${ - ListGet.map(item => html`<${BroadcastItem} item=${item} active=${Selected} />`) + ListGet.map(item => html`<${BroadcastItem} item=${item} active=${item.id == SelectedGet} select=${()=>SelectedSet(item.id)} />`) }
`; } -/** @type {(props:{item:Boxcast.Broadcast, active:Boxcast.StateBinding})=>any} */ -const BroadcastItem = ({item, active}) => +/** @type {(props:{item:Boxcast.Broadcast, active:boolean, select:()=>void})=>any} */ +const BroadcastItem = ({item, active, select}) => { const startDate = useMemo(()=>DateParse(item.starts_at), [item.starts_at]); return html` -
active[1](item.id)}> +
${startDate.Month} ${startDate.Date} ${item.name} ${startDate.Hours}:${startDate.Minutes} ${startDate.M} ${ - active[0] == item.id ? html`
Active
` : null + active ? html`
Active
` : null }

${item.id}

diff --git a/index.html b/index.html index 6447ec9..5779e7a 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,10 @@ - -
-
+
+
+
+
\ No newline at end of file