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

live hooks

Browse Source
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 { createContext, Fragment } from 'https://esm.sh/preact';
import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } from 'https://esm.sh/preact/hooks'; import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } from 'https://esm.sh/preact/hooks';
/** @type {(props:{channel:string, interval:number})=>any} */ /** @type {(props:{channel:string, interval:number})=>any} */
const App = props => const App = props =>
{ {
/** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */ /** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
const [ListGet, ListSet] = useState([]); const [ListGet, ListSet] = useState([]);
/** @type {Boxcast.StateBinding<Boxcast.Broadcast>} */ /** @type {Boxcast.StateBinding<string>} */
const Selected = useState(false); 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(()=> useEffect(()=>
{ {
@ -23,13 +37,7 @@ const App = props =>
} }
, []); , []);
/** @type {()=>Promise} */ useEffect(()=>{alert("New session is starting.")}, [LiveGet]);
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);
};
return html` return html`
<div class="Playlist"> <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 BroadcastItem = ({item, active}) =>
{ {
const startDate = useMemo(()=>DateParse(item.starts_at), [item.starts_at]); const startDate = useMemo(()=>DateParse(item.starts_at), [item.starts_at]);
return html` 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> <span>${startDate.Month} ${startDate.Date}</span>
<strong>${item.name}</strong> <strong>${item.name}</strong>
<span>${startDate.Hours}:${startDate.Minutes} ${startDate.M}</span> <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> </div>
`; `;
}; };