Compare commits
No commits in common. "be212c3bb0dbe70174707416fdaa6909180e682d" and "d3e7e3152f0707ba1b94b7c0e76ee8105eba3a47" have entirely different histories.
be212c3bb0
...
d3e7e3152f
267
app.js
267
app.js
@ -2,113 +2,48 @@
|
||||
/// <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 { h, html, render } from "https://esm.sh/htm/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 StyledRoot = styled.div`
|
||||
.Partition
|
||||
const Styles =
|
||||
{
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
.Broadcast
|
||||
Broadcast:
|
||||
{
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 5px 0 5px 0;
|
||||
|
||||
.Pointer
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
padding: "5px 0 5px 0",
|
||||
},
|
||||
Time:
|
||||
{
|
||||
width: 75px;
|
||||
.Badge
|
||||
width: "75px",
|
||||
marginRight: "5px",
|
||||
fontSize: "16px",
|
||||
textAlign: "right",
|
||||
},
|
||||
Partition:
|
||||
{
|
||||
display: inline-block;
|
||||
border-radius: 20px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&.Next
|
||||
margin: "10px 0 0 0",
|
||||
},
|
||||
Pointer:
|
||||
{
|
||||
background: yellow;
|
||||
color: black;
|
||||
}
|
||||
&.Live
|
||||
width: "75px",
|
||||
},
|
||||
Alert:
|
||||
{
|
||||
background: limegreen;
|
||||
color: white;
|
||||
position: "fixed",
|
||||
right: "20px",
|
||||
bottom: "20px",
|
||||
width: "300px",
|
||||
height: "200px",
|
||||
background: "#333",
|
||||
borderRadius: "5px",
|
||||
transition: "all 0.4s",
|
||||
color: "#fff",
|
||||
}
|
||||
}
|
||||
}
|
||||
.Time
|
||||
{
|
||||
width: 75px;
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
.Title
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
.Control
|
||||
{
|
||||
button
|
||||
{
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: 80px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
background: black;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
button[disabled]
|
||||
{
|
||||
background: grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Alert
|
||||
{
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: -300px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: #333;
|
||||
border-radius: 5px;
|
||||
transition: bottom 0.4s;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
&.Show
|
||||
{
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.Close
|
||||
{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 5px 10px 5px 10px;
|
||||
border-radius: 20px;
|
||||
top: -15px;
|
||||
right: 10px;
|
||||
background: #000000;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const PlayerID = "boxcast-player";
|
||||
};
|
||||
const PlayerID = "boxcast-player"
|
||||
|
||||
/** @type {(props:{channel:string, interval:number})=>any} */
|
||||
const App = props =>
|
||||
@ -116,14 +51,11 @@ const App = props =>
|
||||
/** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
|
||||
const [ListGet, ListSet] = useState([]);
|
||||
|
||||
/** @type {Boxcast.StateBinding<string|null>} */
|
||||
/** @type {Boxcast.StateBinding<Boxcast.Broadcast|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);
|
||||
const [LiveGet, LiveSet] = useState(null);
|
||||
|
||||
/** @type {(inList:Array<Boxcast.Broadcast>)=>Array<Boxcast.Broadcast>} */
|
||||
const SortStart = (inList) => {
|
||||
@ -138,7 +70,23 @@ const App = props =>
|
||||
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 () =>
|
||||
{
|
||||
@ -157,84 +105,74 @@ const App = props =>
|
||||
// on new list
|
||||
useEffect(()=>
|
||||
{
|
||||
let leading;
|
||||
let live;
|
||||
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
|
||||
live = ListGet[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(LiveGet?.id != live?.id)
|
||||
{
|
||||
AlertSet(true);
|
||||
console.log("new video starting")
|
||||
}
|
||||
|
||||
if(SelectedGet == null) // if nothing is selected select the leading event
|
||||
if(SelectedGet?.id != live?.id)
|
||||
{
|
||||
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);
|
||||
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(()=>
|
||||
{
|
||||
const settings = {
|
||||
selectedBroadcastId: SelectedGet,
|
||||
Player.current.loadChannel(props.channel,
|
||||
{
|
||||
selectedBroadcastId: SelectedGet?.id,
|
||||
showTitle: true,
|
||||
showDescription: true,
|
||||
showCountdown: true,
|
||||
showRelated: false,
|
||||
autoplay: true,
|
||||
defaultVideo: "next"
|
||||
};
|
||||
|
||||
Player.current.loadChannel(props.channel, settings);
|
||||
});
|
||||
}
|
||||
, [SelectedGet]);
|
||||
, [SelectedGet])
|
||||
|
||||
return html`
|
||||
<${StyledRoot}>
|
||||
<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) =>
|
||||
{
|
||||
return h(BroadcastItem,
|
||||
ListGet.map( (item, index) => h(
|
||||
BroadcastItem,
|
||||
{
|
||||
item: item,
|
||||
previous: ListGet[index-1],
|
||||
priority: item.id == LeadingGet?.id,
|
||||
selected: item.id == SelectedGet,
|
||||
select: ()=>SelectedSet(item.id)
|
||||
});
|
||||
})
|
||||
priority: item.id == LiveGet?.id,
|
||||
selected: item.id == SelectedGet?.id,
|
||||
select: ()=>SelectedSet(item)
|
||||
}
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class=${`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=${()=>{ SelectedSet(LeadingGet.id); AlertSet(false); }}>Watch Now</button>
|
||||
<${BroadcastAlert}><//>
|
||||
</div>
|
||||
<//>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -244,19 +182,17 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
let pointerText;
|
||||
if(item.timeframe == "current" || item.timeframe == "preroll")
|
||||
{
|
||||
pointerText = html`<div class="Badge Live">Live</div>`;
|
||||
pointerText = `Live:`;
|
||||
}
|
||||
else if (priority)
|
||||
{
|
||||
pointerText = html`<div class="Badge Next">Next</div>`;
|
||||
pointerText = `Next:`;
|
||||
}
|
||||
|
||||
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>`;
|
||||
partition = html`<h3 key=${item.start.Day} style=${Styles.Partition} >${item.start.Day}, ${item.start.Month} ${item.start.Date}</h3>`
|
||||
}
|
||||
|
||||
let buttonText;
|
||||
@ -279,16 +215,25 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
|
||||
return html`
|
||||
${ partition }
|
||||
<div class="Broadcast" key=${item.id} onClick=${select}>
|
||||
<div class="Pointer">${ pointerText }</div>
|
||||
<div class="Time">${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
|
||||
<div class="Title">${item.name}</strong>
|
||||
<div class="Control">
|
||||
<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>
|
||||
<button onClick=${select} disabled=${selected}>${buttonText}</button>
|
||||
</div>
|
||||
</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) =>
|
||||
{
|
||||
@ -313,4 +258,4 @@ const DateParse = (inDateString) =>
|
||||
};
|
||||
|
||||
/** @type {(inChannel:string, inSelector:string)=>void} */
|
||||
export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:5000}));
|
||||
export default (inChannel, inSelector) => render(h(App, {channel:inChannel, interval:50000}), document.querySelector(inSelector));
|
||||
@ -1,8 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
</head>
|
||||
<head></head>
|
||||
<body>
|
||||
|
||||
<div style="max-width:500px; margin: 0 auto;">
|
||||
@ -10,7 +8,7 @@
|
||||
<script type="module">
|
||||
import Init from "./app.js";
|
||||
const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
|
||||
Init(Channel.Dev, "#boxcast");
|
||||
Init(Channel.Basics, "#boxcast");
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
[
|
||||
{
|
||||
"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": "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": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
|
||||
"tags": []
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user