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

live hooks

This commit is contained in:
TreetopFlyer 2022-04-22 17:19:25 -04:00
parent 6825123206
commit 1b6842003b
1 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app.js
View File

@ -5,15 +5,29 @@ import { h, html, render } from "https://esm.sh/htm/preact";
import { createContext, Fragment } from 'https://esm.sh/preact';
import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } from 'https://esm.sh/preact/hooks';
/** @type {(props:{channel:string, interval:number})=>any} */
const App = props =>
{
/** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
const [ListGet, ListSet] = useState([]);
/** @type {Boxcast.StateBinding<Boxcast.Broadcast>} */
const Selected = useState(false);
/** @type {Boxcast.StateBinding<string>} */
const Selected = useState("");
/** @type {Boxcast.StateBinding<string>} */
const [LiveGet, LiveSet] = useState("");
/** @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(()=>
{
@ -23,13 +37,7 @@ const App = props =>
}
, []);
/** @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);
};
useEffect(()=>{alert("New session is starting.")}, [LiveGet]);
return html`
<div class="Playlist">
@ -40,19 +48,20 @@ const App = props =>
`;
}
/** @type {(props:{item:Boxcast.Broadcast, active:Boxcast.StateBinding<Boxcast.Broadcast>})=>any} */
/** @type {(props:{item:Boxcast.Broadcast, active:Boxcast.StateBinding<string>})=>any} */
const BroadcastItem = ({item, active}) =>
{
const startDate = useMemo(()=>DateParse(item.starts_at), [item.starts_at]);
return html`
<div key=${item.id} onClick=${()=>active[1](item)}>
<div key=${item.id} onClick=${()=>active[1](item.id)}>
<span>${startDate.Month} ${startDate.Date}</span>
<strong>${item.name}</strong>
<span>${startDate.Hours}:${startDate.Minutes} ${startDate.M}</span>
${
active[0]?.id == item.id ? html`<dd>Active</dd>` : null
active[0] == item.id ? html`<dd>Active</dd>` : null
}
<p>${item.id}</p>
</div>
`;
};