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

misc

Browse Source
This commit is contained in:
TreetopFlyer 2022-04-25 10:36:55 -04:00
parent 1b6842003b
commit 65d50e7cb7
2 changed files with 59 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app.js
View File

@ -12,7 +12,7 @@ const App = props =>
const [ListGet, ListSet] = useState([]);
/** @type {Boxcast.StateBinding<string>} */
const Selected = useState("");
const [SelectedGet, SelectedSet] = useState("");
/** @type {Boxcast.StateBinding<string>} */
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<Boxcast.Broadcast>} */
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<ListGet.length; i++)
{
if(ListGet[i].timeframe != "past")
{
live = ListGet[i].id;
break;
}
}
if(SelectedGet != live)
{
}
LiveSet(live);
}
, [ListGet]);
useEffect(()=>
{
// alert("New session is starting.")
}
, [LiveGet]);
return html`
<div class="Playlist">
${
ListGet.map(item => html`<${BroadcastItem} item=${item} active=${Selected} />`)
ListGet.map(item => html`<${BroadcastItem} item=${item} active=${item.id == SelectedGet} select=${()=>SelectedSet(item.id)} />`)
}
</div>
`;
}
/** @type {(props:{item:Boxcast.Broadcast, active:Boxcast.StateBinding<string>})=>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`
<div key=${item.id} onClick=${()=>active[1](item.id)}>
<div key=${item.id} onClick=${select}>
<span>${startDate.Month} ${startDate.Date}</span>
<strong>${item.name}</strong>
<span>${startDate.Hours}:${startDate.Minutes} ${startDate.M}</span>
${
active[0] == item.id ? html`<dd>Active</dd>` : null
active ? html`<dd>Active</dd>` : null
}
<p>${item.id}</p>
</div>

28
index.html
View File

@ -2,9 +2,10 @@
<html>
<head></head>
<body>
<div id="boxcast-player"></div>
<div id="boxcast-playlist"></div>
<div style="max-width:500px; margin: 0 auto;">
<div id="boxcast-player"></div>
<div id="boxcast-playlist"></div>
</div>
<script type="module">
import 'https://js.boxcast.com/v3.min.js';
@ -15,35 +16,44 @@ const Channel = {
Dev: "r3os2zfdnhlquhuypgtp"
};
/*
const Player = boxcast("#boxcast-player");
Player.loadChannel(Channels.Basics,
Player.loadChannel(Channel.Sunday,
{
showTitle: true,
showDescription: true,
showCountdown: true,
//selectedBroadcastId: "yo8sefnnejvw3cx3vhup",
//showRelated: true,
//relatedBroadcastsQuery: {q: "timeframe:relevant starts_at:[2022-01-01 TO 2022-12-01]"},
showRelated: true,
relatedBroadcastsQuery:{l: 3},
/*
relatedBroadcastsQuery:
{
s: "starts_at",
l: 100,
q: "timeframe:next starts_at:[2022-04-01T00:00:00 TO 2022-06-01T00:00:00]"
},
*/
onLoadBroadcast: console.log,
autoplay: true,
defaultVideo: "next"
});
*/
import { h, html, render } from "https://esm.sh/htm/preact";
import App from "./app.js";
render(
h(App, {channel:Channel.Basics, interval:5000}),
h(App, {player:Player, channel:Channel.Basics, interval:50000}),
document.querySelector("#boxcast-playlist")
);
</script>
</body>
</html>