- ${
- ListGet.map(item => html`<${BroadcastItem} item=${item} active=${item.id == SelectedGet} select=${()=>SelectedSet(item.id)} />`)
+ // 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`
+
+
+
+
+
+
+
+ ${
+ ListGet.map( (item, index) => h(
+ BroadcastItem,
+ {
+ item: item,
+ previous: ListGet[index-1],
+ priority: item.id == LiveGet,
+ selected: item.id == SelectedGet,
+ select: ()=>SelectedSet(item.id)
+ }
+ ))
+ }
+
+ <${BroadcastAlert}>/>
`;
}
-/** @type {(props:{item:Boxcast.Broadcast, active:boolean, select:()=>void})=>any} */
-const BroadcastItem = ({item, active, select}) =>
+/** @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`
${item.start.Day}, ${item.start.Month} ${item.start.Date}
`
+ }
+
+ 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`
-
-
${startDate.Month} ${startDate.Date}
+ ${ partition }
+
+
${ pointerText }
+
${item.start.Hours}:${item.start.Minutes} ${item.start.M}
${item.name}
-
${startDate.Hours}:${startDate.Minutes} ${startDate.M}
- ${
- active ? html`
Active` : null
- }
-
${item.id}
-
- `;
+
+
`;
};
+const BroadcastAlert = () =>
+{
+ return html`
+
+ X
+
A new session is starting.
+
+
+ `;
+}
/** @type {(inDate:string)=>Boxcast.Date} */
const DateParse = (inDateString) =>
diff --git a/index.html b/index.html
index 5779e7a..57d0184 100644
--- a/index.html
+++ b/index.html
@@ -3,57 +3,24 @@