446 lines
12 KiB
JavaScript
446 lines
12 KiB
JavaScript
// @ts-check
|
|
/// <reference path="./types.d.ts"/>
|
|
|
|
import 'https://js.boxcast.com/v3.min.js';
|
|
import { html } from "https://esm.sh/htm/react";
|
|
import styled from 'https://esm.sh/styled-components?deps=react@18';
|
|
import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18';
|
|
import { createRoot } from "https://esm.sh/react-dom/client";
|
|
/*
|
|
import State01 from "./testdata-01.json" assert { type: "json" };
|
|
import State02 from "./testdata-02.json" assert { type: "json" };
|
|
import State03 from "./testdata-03.json" assert { type: "json" };
|
|
*/
|
|
|
|
const StyledRoot = styled.div`
|
|
.Boxcast-Upper
|
|
{
|
|
background: white;
|
|
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
.Boxcast-Player
|
|
{
|
|
.boxcast-well-container
|
|
{
|
|
display: none;
|
|
}
|
|
.boxcast-well
|
|
{
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px 10px;
|
|
min-height: 10px;
|
|
margin: 0;
|
|
|
|
& > span, .boxcast-linkback
|
|
{
|
|
display:none;
|
|
}
|
|
|
|
& > *
|
|
{
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.Boxcast-Active
|
|
{
|
|
text-align: center;
|
|
padding:20px;
|
|
background: white;
|
|
& > * { margin: 0; }
|
|
}
|
|
}
|
|
|
|
.Boxcast-Playlist
|
|
{
|
|
max-width: 550px;
|
|
margin: 30px auto;
|
|
|
|
.Partition
|
|
{
|
|
margin: 15px 0 0 0;
|
|
padding: 0 0 8px 0;
|
|
border-bottom: 1px solid #dddddd;
|
|
text-align: center;
|
|
}
|
|
.Broadcast
|
|
{
|
|
position: relative;
|
|
display: flex;
|
|
padding: 5px 0 5px 0;
|
|
|
|
& > *
|
|
{
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
}
|
|
|
|
.Pointer
|
|
{
|
|
width: 75px;
|
|
text-align: right;
|
|
.Badge
|
|
{
|
|
display: inline-block;
|
|
border-radius: 20px;
|
|
padding: 2px 8px;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
font-family: sans-serif;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
|
|
&.Next
|
|
{
|
|
background: yellow;
|
|
color: black;
|
|
}
|
|
&.Soon
|
|
{
|
|
background: orange;
|
|
color: white;
|
|
}
|
|
&.Live
|
|
{
|
|
background: red;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
.Time
|
|
{
|
|
width: 80px;
|
|
font-size: 16px;
|
|
text-align: right;
|
|
}
|
|
.Title
|
|
{
|
|
flex: 1;
|
|
font-weight: 900;
|
|
}
|
|
.Control
|
|
{
|
|
width: 100px;
|
|
|
|
}
|
|
|
|
button
|
|
{
|
|
position: relative;
|
|
appearance: none;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 5px 10px 5px 10px;
|
|
background: #0e2a3f;
|
|
cursor: pointer;
|
|
border: none;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition: all 0.4s;
|
|
}
|
|
button:hover
|
|
{
|
|
border-radius: 50px;
|
|
}
|
|
button[disabled]
|
|
{
|
|
border-radius: 50px;
|
|
background: red !important;
|
|
}
|
|
|
|
&.future button
|
|
{
|
|
background: #c3b7a9;
|
|
}
|
|
|
|
@media(max-width:500px)
|
|
{
|
|
flex-wrap: wrap;
|
|
.Time
|
|
{
|
|
order: 0;
|
|
width: 30%;
|
|
}
|
|
.Title
|
|
{
|
|
order: 1;
|
|
flex: none;
|
|
width: 60%;
|
|
}
|
|
.Pointer
|
|
{
|
|
order: 2;
|
|
width: 30%;
|
|
}
|
|
.Control
|
|
{
|
|
order: 3;
|
|
width: 60%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.Boxcast-Alert
|
|
{
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: -300px;
|
|
width: 300px;
|
|
padding: 20px 0 40px 0;
|
|
background: #333;
|
|
border-radius: 5px;
|
|
transition: bottom 0.4s;
|
|
color: #fff;
|
|
text-align: center;
|
|
|
|
&.Show
|
|
{
|
|
bottom: 20px;
|
|
}
|
|
|
|
button
|
|
{
|
|
padding: 5px 15px;
|
|
border: none;
|
|
background: white;
|
|
cursor: pointer;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.Close
|
|
{
|
|
display: inline-block;
|
|
position: absolute;
|
|
padding: 5px 10px 5px 10px;
|
|
border-radius: 20px;
|
|
border: 3px solid white;
|
|
top: -20px;
|
|
right: 10px;
|
|
background: #000000;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const PlayerID = "boxcast-player";
|
|
|
|
/** @type {(props:{channel:string, interval:number})=>any} */
|
|
const App = props =>
|
|
{
|
|
/** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
|
|
const [ListGet, ListSet] = useState([]);
|
|
|
|
/** @type {Boxcast.StateBinding<string|null>} */
|
|
const [SelectedGet, SelectedSet] = useState(null);
|
|
|
|
/** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
|
|
const [LeadingGet, LeadingSet] = useState(null);
|
|
|
|
/** @type {Boxcast.StateBinding<boolean>} */
|
|
const [AlertGet, AlertSet] = useState(false);
|
|
|
|
/** @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;
|
|
};
|
|
|
|
const Player = useRef(null);
|
|
|
|
// on mount
|
|
useEffect(()=>
|
|
{
|
|
Player.current = boxcast(`#${PlayerID}`);
|
|
|
|
/** @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);
|
|
}
|
|
, []);
|
|
|
|
// on new list
|
|
useEffect(()=>
|
|
{
|
|
let leading;
|
|
for(let i=0; i<ListGet.length; i++)
|
|
{
|
|
if(ListGet[i].timeframe != "past")
|
|
{
|
|
leading = ListGet[i];
|
|
|
|
if( (leading.timeframe == "current" || leading.timeframe == "preroll") && (leading.id != LeadingGet?.id) && (SelectedGet != leading.id)) // if something is selected other than the leading event, alert the user
|
|
{
|
|
AlertSet(true);
|
|
}
|
|
|
|
if(SelectedGet == null) // if nothing is selected select the leading event
|
|
{
|
|
SelectedSet(leading.id);
|
|
}
|
|
|
|
LeadingSet(leading);
|
|
|
|
return;
|
|
}
|
|
}
|
|
|
|
if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
|
|
{
|
|
LeadingSet(null);
|
|
if(SelectedGet == null)
|
|
{
|
|
SelectedSet(ListGet[0].id);
|
|
}
|
|
AlertSet(false);
|
|
}
|
|
}
|
|
, [ListGet]);
|
|
|
|
// on new video selected
|
|
useEffect(()=>
|
|
{
|
|
const settings = {
|
|
selectedBroadcastId: SelectedGet,
|
|
showTitle: true,
|
|
showDescription: true,
|
|
showCountdown: true,
|
|
showRelated: false,
|
|
autoplay: true,
|
|
defaultVideo: "next"
|
|
};
|
|
|
|
Player.current.loadChannel(props.channel, settings);
|
|
}
|
|
, [SelectedGet]);
|
|
|
|
|
|
/** @type {(inItem:Boxcast.Broadcast)=>void} */
|
|
const SelectionTransition = (inItem) =>
|
|
{
|
|
SelectedSet(inItem.id);
|
|
document.documentElement.style.scrollBehavior = "smooth";
|
|
window.location = "#"+PlayerID;
|
|
};
|
|
|
|
return html`
|
|
<${StyledRoot}>
|
|
<div class="Boxcast-Upper">
|
|
<div class="Boxcast-Player" id=${PlayerID}></div>
|
|
|
|
<!--
|
|
<div>
|
|
<button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
|
|
<button onClick=${()=>ListSet(SortStart(State02))}>testdata-02</button>
|
|
<button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
|
|
</div>
|
|
-->
|
|
|
|
<div class="Boxcast-Active">
|
|
<h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>
|
|
</div>
|
|
</div>
|
|
<div class="Boxcast-Playlist">
|
|
${
|
|
ListGet.map( (item, index) =>
|
|
{
|
|
return h(BroadcastItem,
|
|
{
|
|
item: item,
|
|
previous: ListGet[index-1],
|
|
priority: item.id == LeadingGet?.id,
|
|
selected: item.id == SelectedGet,
|
|
select: () => SelectionTransition(item)
|
|
});
|
|
})
|
|
}
|
|
</div>
|
|
<div class=${`Boxcast-Alert ${ AlertGet ? " Show" : null }`}>
|
|
<span class="Close" onClick=${()=>{ AlertSet(false); }}>Dismiss ✕</span>
|
|
<h4>A new session is starting:</h4>
|
|
<p>${LeadingGet?.name}</p>
|
|
<button onClick=${()=>{ SelectionTransition(LeadingGet); AlertSet(false); }}>Watch Now</button>
|
|
</div>
|
|
<//>
|
|
`;
|
|
}
|
|
|
|
/** @type {(props:{item:Boxcast.Broadcast, previous: false | Boxcast.Broadcast, priority:boolean, selected:boolean, select:()=>void})=>any} */
|
|
const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
|
{
|
|
// pointer
|
|
let pointerText;
|
|
if (priority){ pointerText = html`<div class="Badge Next">Next</div>`; }
|
|
if(item.timeframe == "preroll"){ pointerText = html`<div class="Badge Soon">Soon</div>`; }
|
|
if(item.timeframe == "current"){ pointerText = html`<div class="Badge Live">Live</div>`; }
|
|
|
|
// (date) partition
|
|
let partition;
|
|
if(!previous || (previous.start.Date !== item.start.Date))
|
|
{
|
|
partition = html`<h3 class="Partition" key=${item.id+item.start.Day} >
|
|
${item.start.Day}, ${item.start.Month} ${item.start.Date}
|
|
</h3>`;
|
|
}
|
|
|
|
// button
|
|
let buttonText;
|
|
if(item.timeframe == "past"){ buttonText = "Rewatch"; }
|
|
if(item.timeframe == "current" || item.timeframe == "preroll"){ buttonText = "Watch"; }
|
|
if(item.timeframe == "future"){ buttonText = "Preview"; }
|
|
|
|
return html`
|
|
${ partition }
|
|
<div class=${`Broadcast ${item.timeframe}`} key=${item.id}>
|
|
<div class="Time">${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
|
|
<div class="Title">${item.name}</strong>
|
|
<div class="Control">
|
|
<button onClick=${select} disabled=${selected}>${buttonText}</button>
|
|
</div>
|
|
<div class="Pointer">${ pointerText }</div>
|
|
</div>`;
|
|
};
|
|
|
|
/** @type {(inDate:string)=>Boxcast.Date} */
|
|
const DateParse = (inDateString) =>
|
|
{
|
|
let date = new Date(inDateString);
|
|
/** @type {Boxcast.Date} */
|
|
let obj = {
|
|
Zone: date.toString().match(/\(([A-Za-z\s].*)\)/),
|
|
Day: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][date.getDay()],
|
|
Month: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][date.getMonth()],
|
|
Date: date.getDate(),
|
|
Hours: date.getHours(),
|
|
Minutes: date.getMinutes(),
|
|
Epoch: date.valueOf()
|
|
};
|
|
|
|
obj.Zone = obj.Zone ? obj.Zone[1] : "local time";
|
|
obj.M = obj.Hours >= 12 ? "PM" : "AM";
|
|
obj.Hours %= 12;
|
|
if(obj.Hours == 0){ obj.Hours = 12; }
|
|
if(obj.Minutes < 10){ obj.Minutes = "0"+obj.Minutes; }
|
|
return obj;
|
|
};
|
|
|
|
/** @type {(inChannel:string, inSelector:string, inInterval:number)=>void} */
|
|
const Init = (inChannel, inSelector, inInterval) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:inInterval}));
|
|
|
|
const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
|
|
Init(Channel.Basics, "#boxcast", 5000); |