alert toggling
This commit is contained in:
parent
d3e7e3152f
commit
ec2c8916e0
87
app.js
87
app.js
@ -6,6 +6,7 @@ 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" };
|
||||
import State03 from "./testdata-03.json" assert { type: "json" };
|
||||
|
||||
const Styles =
|
||||
{
|
||||
@ -41,6 +42,7 @@ const Styles =
|
||||
borderRadius: "5px",
|
||||
transition: "all 0.4s",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
}
|
||||
};
|
||||
const PlayerID = "boxcast-player"
|
||||
@ -55,7 +57,10 @@ const App = props =>
|
||||
const [SelectedGet, SelectedSet] = useState(null);
|
||||
|
||||
/** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
|
||||
const [LiveGet, LiveSet] = useState(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) => {
|
||||
@ -70,21 +75,6 @@ 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} */
|
||||
@ -105,40 +95,41 @@ const App = props =>
|
||||
// on new list
|
||||
useEffect(()=>
|
||||
{
|
||||
let live;
|
||||
let leading;
|
||||
for(let i=0; i<ListGet.length; i++)
|
||||
{
|
||||
if(ListGet[i].timeframe != "past")
|
||||
{
|
||||
live = ListGet[i];
|
||||
break;
|
||||
leading = ListGet[i];
|
||||
LeadingSet(leading);
|
||||
|
||||
if(SelectedGet == null) // if nothing is selected select the leading event
|
||||
{
|
||||
SelectedSet(leading);
|
||||
}
|
||||
else if(SelectedGet?.id != leading?.id) // if something is selected other than the leading event, alert the user
|
||||
{
|
||||
AlertSet(true);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
if(LiveGet?.id != live?.id)
|
||||
|
||||
if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
|
||||
{
|
||||
console.log("new video starting")
|
||||
LeadingSet(null);
|
||||
SelectedSet(ListGet[0]);
|
||||
AlertSet(false);
|
||||
}
|
||||
if(SelectedGet?.id != live?.id)
|
||||
{
|
||||
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,
|
||||
{
|
||||
const settings = {
|
||||
selectedBroadcastId: SelectedGet?.id,
|
||||
showTitle: true,
|
||||
showDescription: true,
|
||||
@ -146,7 +137,9 @@ const App = props =>
|
||||
showRelated: false,
|
||||
autoplay: true,
|
||||
defaultVideo: "next"
|
||||
});
|
||||
};
|
||||
|
||||
Player.current.loadChannel(props.channel, settings);
|
||||
}
|
||||
, [SelectedGet])
|
||||
|
||||
@ -155,7 +148,8 @@ const App = props =>
|
||||
<div id=${PlayerID}></div>
|
||||
<div>
|
||||
<button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
|
||||
<button onClick=${()=>ListSet(SortStart(State02))}>testdata-01</button>
|
||||
<button onClick=${()=>ListSet(SortStart(State02))}>testdata-02</button>
|
||||
<button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
|
||||
</div>
|
||||
<div class="Boxcast-Playlist">
|
||||
${
|
||||
@ -164,14 +158,19 @@ const App = props =>
|
||||
{
|
||||
item: item,
|
||||
previous: ListGet[index-1],
|
||||
priority: item.id == LiveGet?.id,
|
||||
priority: item.id == LeadingGet?.id,
|
||||
selected: item.id == SelectedGet?.id,
|
||||
select: ()=>SelectedSet(item)
|
||||
}
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<${BroadcastAlert}><//>
|
||||
${ AlertGet ? h(BroadcastAlert,
|
||||
{
|
||||
broadcast: LeadingGet,
|
||||
clickWatch: ()=>{ SelectedSet(LeadingGet); AlertSet(false); },
|
||||
clickDismiss: ()=>{ AlertSet(false) }
|
||||
}) : null }
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -223,13 +222,15 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
</div>`;
|
||||
};
|
||||
|
||||
const BroadcastAlert = () =>
|
||||
/** @type { (props:{broadcast:Boxcast.Broadcast, clickWatch:()=>void, clickDismiss:()=>void})=>any } */
|
||||
const BroadcastAlert = ({broadcast, clickWatch, clickDismiss}) =>
|
||||
{
|
||||
return html`
|
||||
<div style=${Styles.Alert}>
|
||||
<span>X</span>
|
||||
<h4>A new session is starting.</h4>
|
||||
<button>Watch Now</button>
|
||||
<span onClick=${clickDismiss}>X</span>
|
||||
<h4>A new session is starting:</h4>
|
||||
<p>${broadcast.name}</p>
|
||||
<button onClick=${clickWatch}>Watch Now</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
30
testdata-03.json
Normal file
30
testdata-03.json
Normal file
@ -0,0 +1,30 @@
|
||||
[
|
||||
{
|
||||
"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