Compare commits

...

2 Commits

Author SHA1 Message Date
18a02d7490 buncha stuff 2022-04-25 17:23:23 -04:00
65d50e7cb7 misc 2022-04-25 10:36:55 -04:00
4 changed files with 485 additions and 58 deletions

224
app.js
View File

@ -1,9 +1,48 @@
// @ts-check
/// <reference path="./types.d.ts"/>
import 'https://js.boxcast.com/v3.min.js';
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';
import State01 from "./testdata-01.json" assert { type: "json" };
import State02 from "./testdata-02.json" assert { type: "json" };
const Styles = {
Broadcast:
{
position: "relative",
display: "flex",
padding: "5px 0 5px 0",
},
Time:
{
width: "75px",
marginRight: "5px",
fontSize: "16px",
textAlign: "right",
},
Partition:
{
margin: "10px 0 0 0",
},
Pointer:
{
width: "75px",
},
Alert:
{
position: "fixed",
right: "20px",
bottom: "20px",
width: "300px",
height: "200px",
background: "#333",
borderRadius: "5px",
transition: "all 0.4s",
color: "#fff",
}
};
const PlayerID = "boxcast-player"
/** @type {(props:{channel:string, interval:number})=>any} */
const App = props =>
@ -12,60 +51,187 @@ 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("");
/** @type {(item:Boxcast.Broadcast)=>boolean} */
const Iterator = (item) => item.timeframe == "current" || item.timeframe == "preroll";
/** @type {(inList:Array<Boxcast.Broadcast>)=>Array<Boxcast.Broadcast>} */
const SortStart = (inList) => {
inList.sort((a, b) => a.starts_at > b.starts_at ? 1 : -1);
inList.forEach( item => item.start = DateParse(item.starts_at));
return inList;
}
/** @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] || "");
};
const Player = useRef(null);
// on mount
useEffect(()=>
{
Player.current = boxcast(`#${PlayerID}`);
/*
Player.current.loadChannel(props.channel,
{
showTitle: true,
showDescription: true,
showCountdown: true,
//selectedBroadcastId: "yo8sefnnejvw3cx3vhup",
showRelated: false,
onLoadBroadcast: console.log,
autoplay: true,
defaultVideo: "next"
});
*/
return;
/** @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();
ListSet(SortStart(json));
};
Ping();
const timer = setInterval(Ping, props.interval);
return ()=>clearInterval(timer);
}
, []);
useEffect(()=>{alert("New session is starting.")}, [LiveGet]);
// on new list
useEffect(()=>
{
let live = "";
for(let i=0; i<ListGet.length; i++)
{
if(ListGet[i].timeframe != "past")
{
live = ListGet[i].id;
break;
}
}
if(LiveGet != live)
{
console.log("new video starting")
}
if(SelectedGet != live)
{
console.log("would you like to switch?");
}
LiveSet(live);
}
, [ListGet]);
// on new event started
useEffect(()=>
{
// alert("New session is starting.")
}
, [LiveGet]);
// on new video selected
useEffect(()=>
{
Player.current.loadChannel(props.channel,
{
selectedBroadcastId: SelectedGet,
showTitle: true,
showDescription: true,
showCountdown: true,
showRelated: false,
autoplay: true,
defaultVideo: "next"
});
}
, [SelectedGet])
return html`
<div class="Playlist">
${
ListGet.map(item => html`<${BroadcastItem} item=${item} active=${Selected} />`)
}
<div>
<div id=${PlayerID}></div>
<div>
<button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
<button onClick=${()=>ListSet(SortStart(State02))}>testdata-01</button>
</div>
<div class="Boxcast-Playlist">
${
ListGet.map( (item, index) => h(
BroadcastItem,
{
item: item,
previous: ListGet[index-1],
priority: item.id == LiveGet,
selected: item.id == SelectedGet,
select: ()=>SelectedSet(item.id)
}
))
}
</div>
<${BroadcastAlert}><//>
</div>
`;
}
/** @type {(props:{item:Boxcast.Broadcast, active:Boxcast.StateBinding<string>})=>any} */
const BroadcastItem = ({item, active}) =>
/** @type {(props:{item:Boxcast.Broadcast, previous: false | Boxcast.Broadcast, priority:boolean, selected:boolean, select:()=>void})=>any} */
const BroadcastItem = ({item, previous, priority, selected, select}) =>
{
const startDate = useMemo(()=>DateParse(item.starts_at), [item.starts_at]);
let pointerText;
if(item.timeframe == "current" || item.timeframe == "preroll")
{
pointerText = `Live:`;
}
else if (priority)
{
pointerText = `Next:`;
}
let partition;
if(!previous || (previous.start.Date !== item.start.Date))
{
partition = html`<h3 key=${item.start.Day} style=${Styles.Partition} >${item.start.Day}, ${item.start.Month} ${item.start.Date}</h3>`
}
let buttonText;
if(item.timeframe == "past")
{
buttonText = "Recording";
}
if(item.timeframe == "current" || item.timeframe == "preroll")
{
buttonText = "Watch";
}
if(item.timeframe == "future")
{
buttonText = "Preview";
}
if(selected)
{
buttonText = "(Viewing)";
}
return html`
<div key=${item.id} onClick=${()=>active[1](item.id)}>
<span>${startDate.Month} ${startDate.Date}</span>
${ partition }
<div key=${item.id} onClick=${select} style=${Styles.Broadcast}>
<div style=${Styles.Pointer}>${ pointerText }</div>
<div style=${Styles.Time}>${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
<strong>${item.name}</strong>
<span>${startDate.Hours}:${startDate.Minutes} ${startDate.M}</span>
${
active[0] == item.id ? html`<dd>Active</dd>` : null
}
<p>${item.id}</p>
</div>
`;
<button onClick=${select} disabled=${selected}>${buttonText}</button>
</div>`;
};
const BroadcastAlert = () =>
{
return html`
<div style=${Styles.Alert}>
<span>X</span>
<h4>A new session is starting.</h4>
<button>Watch Now</button>
</div>
`;
}
/** @type {(inDate:string)=>Boxcast.Date} */
const DateParse = (inDateString) =>

View File

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

142
testdata-01.json Normal file
View File

@ -0,0 +1,142 @@
[
{
"id": "a3fvb7xs5yrl7xr50lyr",
"name": "Welcome and Main Session 1",
"starts_at": "2022-05-02T18:55:00Z",
"stops_at": "2022-05-02T20:20:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "welcome-and-main-session-1-sfry0q5zi5fpjtxzsnih",
"tags": []
},
{
"id": "ur7p1uqz6rl3dx7drvgf",
"name": "Breakout Session - Alistair Begg",
"starts_at": "2022-05-02T20:25:00Z",
"stops_at": "2022-05-02T21:45:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
"tags": []
},
{
"id": "n1w1rbpaaohkrx2aumll",
"name": "Main Session 2 -John Woodhouse",
"starts_at": "2022-05-02T23:10:00Z",
"stops_at": "2022-05-03T00:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "breakout-session---alistair-begg-mnhpqpgyg8kobjgqerpw",
"tags": []
},
{
"id": "wwomf8amsgnct6esof3s",
"name": "Main Session 3 -Alistair Begg",
"starts_at": "2022-05-03T13:10:00Z",
"stops_at": "2022-05-03T14:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-giplu3h3d7rsgays1yyg",
"tags": []
},
{
"id": "mjzsudcjjqor4qvpioqx",
"name": "Main Session 4 -John Woodhouse",
"starts_at": "2022-05-03T14:55:00Z",
"stops_at": "2022-05-03T16:15:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-odnunx2aaa1ztxqtufaj",
"tags": []
},
{
"id": "ybwm92ssmqhshhrfpvfr",
"name": "Main Session 5 -John Woodhouse",
"starts_at": "2022-05-03T17:25:00Z",
"stops_at": "2022-05-03T18:35:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-wdyqpnsguolrvjwl4aei",
"tags": []
},
{
"id": "jed2ccr6o9vukpavrs7t",
"name": "Breakout Session -Tony Merida",
"starts_at": "2022-05-03T18:40:00Z",
"stops_at": "2022-05-03T20:00:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-6--tony-merida-xkw75et1zzz48xdq5grz",
"tags": []
},
{
"id": "yo8sefnnejvw3cx3vhup",
"name": "Q\u0026A with Alistair Begg",
"starts_at": "2022-05-04T00:25:00Z",
"stops_at": "2022-05-04T01:45:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-r7ufs6iabwuch7w9hgmm",
"tags": []
},
{
"id": "ht6wddox6ompgbusacle",
"name": "Main Session 6 - John Woodhouse",
"starts_at": "2022-05-04T13:10:00Z",
"stops_at": "2022-05-04T14:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "qa-with-alistair-begg-mmyh7oyiecuuqxykafff",
"tags": []
},
{
"id": "r9s2oqfl4vhxzfkx1bwf",
"name": "Panel Q\u0026A",
"starts_at": "2022-05-04T14:55:00Z",
"stops_at": "2022-05-04T16:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "panel-qa-v7jfkqhc8viidxebcvvk",
"tags": []
}
]

142
testdata-02.json Normal file
View File

@ -0,0 +1,142 @@
[
{
"id": "a3fvb7xs5yrl7xr50lyr",
"name": "Welcome and Main Session 1",
"starts_at": "2022-05-02T18:55:00Z",
"stops_at": "2022-05-02T20:20:00Z",
"timeframe": "past",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "welcome-and-main-session-1-sfry0q5zi5fpjtxzsnih",
"tags": []
},
{
"id": "ur7p1uqz6rl3dx7drvgf",
"name": "Breakout Session - Alistair Begg",
"starts_at": "2022-05-02T20:25:00Z",
"stops_at": "2022-05-02T21:45:00Z",
"timeframe": "preroll",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
"tags": []
},
{
"id": "n1w1rbpaaohkrx2aumll",
"name": "Main Session 2 -John Woodhouse",
"starts_at": "2022-05-02T23:10:00Z",
"stops_at": "2022-05-03T00:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "breakout-session---alistair-begg-mnhpqpgyg8kobjgqerpw",
"tags": []
},
{
"id": "wwomf8amsgnct6esof3s",
"name": "Main Session 3 -Alistair Begg",
"starts_at": "2022-05-03T13:10:00Z",
"stops_at": "2022-05-03T14:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-giplu3h3d7rsgays1yyg",
"tags": []
},
{
"id": "mjzsudcjjqor4qvpioqx",
"name": "Main Session 4 -John Woodhouse",
"starts_at": "2022-05-03T14:55:00Z",
"stops_at": "2022-05-03T16:15:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-odnunx2aaa1ztxqtufaj",
"tags": []
},
{
"id": "ybwm92ssmqhshhrfpvfr",
"name": "Main Session 5 -John Woodhouse",
"starts_at": "2022-05-03T17:25:00Z",
"stops_at": "2022-05-03T18:35:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-wdyqpnsguolrvjwl4aei",
"tags": []
},
{
"id": "jed2ccr6o9vukpavrs7t",
"name": "Breakout Session -Tony Merida",
"starts_at": "2022-05-03T18:40:00Z",
"stops_at": "2022-05-03T20:00:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-6--tony-merida-xkw75et1zzz48xdq5grz",
"tags": []
},
{
"id": "yo8sefnnejvw3cx3vhup",
"name": "Q\u0026A with Alistair Begg",
"starts_at": "2022-05-04T00:25:00Z",
"stops_at": "2022-05-04T01:45:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "main-session-2--john-woodhouse-r7ufs6iabwuch7w9hgmm",
"tags": []
},
{
"id": "ht6wddox6ompgbusacle",
"name": "Main Session 6 - John Woodhouse",
"starts_at": "2022-05-04T13:10:00Z",
"stops_at": "2022-05-04T14:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "qa-with-alistair-begg-mmyh7oyiecuuqxykafff",
"tags": []
},
{
"id": "r9s2oqfl4vhxzfkx1bwf",
"name": "Panel Q\u0026A",
"starts_at": "2022-05-04T14:55:00Z",
"stops_at": "2022-05-04T16:30:00Z",
"timeframe": "future",
"description": "",
"preview": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"poster": "https://uploads.boxcast.com/ilkxk5hkn51drmocrv0d/2022-03/ahf78osidyvoujyhhq8r/BoxcastImage.jpg",
"transcoder_profile": "",
"account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "panel-qa-v7jfkqhc8viidxebcvvk",
"tags": []
}
]