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([]); const [ListGet, ListSet] = useState([]);
/** @type {Boxcast.StateBinding<string>} */ /** @type {Boxcast.StateBinding<string>} */
const Selected = useState(""); const [SelectedGet, SelectedSet] = useState("");
/** @type {Boxcast.StateBinding<string>} */ /** @type {Boxcast.StateBinding<string>} */
const [LiveGet, LiveSet] = useState(""); const [LiveGet, LiveSet] = useState("");
@ -20,46 +20,71 @@ const App = props =>
/** @type {(item:Boxcast.Broadcast)=>boolean} */ /** @type {(item:Boxcast.Broadcast)=>boolean} */
const Iterator = (item) => item.timeframe == "current" || item.timeframe == "preroll"; 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(()=>
{ {
/** @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(); Ping();
const timer = setInterval(Ping, props.interval); const timer = setInterval(Ping, props.interval);
return ()=>clearInterval(timer); 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` return html`
<div class="Playlist"> <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> </div>
`; `;
} }
/** @type {(props:{item:Boxcast.Broadcast, active:Boxcast.StateBinding<string>})=>any} */ /** @type {(props:{item:Boxcast.Broadcast, active:boolean, select:()=>void})=>any} */
const BroadcastItem = ({item, active}) => const BroadcastItem = ({item, active, select}) =>
{ {
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.id)}> <div key=${item.id} onClick=${select}>
<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] == item.id ? html`<dd>Active</dd>` : null active ? html`<dd>Active</dd>` : null
} }
<p>${item.id}</p> <p>${item.id}</p>
</div> </div>

28
index.html
View File

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