SethTrowbridge/boxcast-playlist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: SethTrowbridge:18a02d74908e937d1a16097750cccebba527612c
Branches Tags
SethTrowbridge:master
SethTrowbridge:preact-list
..
compare: SethTrowbridge:d3e7e3152f0707ba1b94b7c0e76ee8105eba3a47
Branches Tags
SethTrowbridge:preact-list
SethTrowbridge:master

2 Commits
18a02d7490 ... d3e7e3152f

Author SHA1 Message Date
TreetopFlyer
d3e7e3152f use objects in states 
instead of id strings
 2022-04-26 10:47:45 -04:00
TreetopFlyer
034067f796 misc 2022-04-26 10:39:25 -04:00
3 changed files with 25 additions and 31 deletions
Show Stats Expand all files Collapse all files

31
app.js
View File

@ -7,7 +7,8 @@ import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } fro
import State01 from "./testdata-01.json" assert { type: "json" }; import State01 from "./testdata-01.json" assert { type: "json" };
import State02 from "./testdata-02.json" assert { type: "json" }; import State02 from "./testdata-02.json" assert { type: "json" };
const Styles = { const Styles =
{
Broadcast: Broadcast:
{ {
position: "relative", position: "relative",
@ -50,11 +51,11 @@ const App = props =>
/** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */ /** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
const [ListGet, ListSet] = useState([]); const [ListGet, ListSet] = useState([]);
/** @type {Boxcast.StateBinding<string>} */ /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
const [SelectedGet, SelectedSet] = useState(""); const [SelectedGet, SelectedSet] = useState(null);
/** @type {Boxcast.StateBinding<string>} */ /** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
const [LiveGet, LiveSet] = useState(""); const [LiveGet, LiveSet] = useState(null);
/** @type {(inList:Array<Boxcast.Broadcast>)=>Array<Boxcast.Broadcast>} */ /** @type {(inList:Array<Boxcast.Broadcast>)=>Array<Boxcast.Broadcast>} */
const SortStart = (inList) => { const SortStart = (inList) => {
@ -104,20 +105,20 @@ const App = props =>
// on new list // on new list
useEffect(()=> useEffect(()=>
{ {
let live = ""; let live;
for(let i=0; i<ListGet.length; i++) for(let i=0; i<ListGet.length; i++)
{ {
if(ListGet[i].timeframe != "past") if(ListGet[i].timeframe != "past")
{ {
live = ListGet[i].id; live = ListGet[i];
break; break;
} }
} }
if(LiveGet != live) if(LiveGet?.id != live?.id)
{ {
console.log("new video starting") console.log("new video starting")
} }
if(SelectedGet != live) if(SelectedGet?.id != live?.id)
{ {
console.log("would you like to switch?"); console.log("would you like to switch?");
} }
@ -138,7 +139,7 @@ const App = props =>
{ {
Player.current.loadChannel(props.channel, Player.current.loadChannel(props.channel,
{ {
selectedBroadcastId: SelectedGet, selectedBroadcastId: SelectedGet?.id,
showTitle: true, showTitle: true,
showDescription: true, showDescription: true,
showCountdown: true, showCountdown: true,
@ -163,9 +164,9 @@ const App = props =>
{ {
item: item, item: item,
previous: ListGet[index-1], previous: ListGet[index-1],
priority: item.id == LiveGet, priority: item.id == LiveGet?.id,
selected: item.id == SelectedGet, selected: item.id == SelectedGet?.id,
select: ()=>SelectedSet(item.id) select: ()=>SelectedSet(item)
} }
)) ))
} }
@ -245,6 +246,7 @@ const DateParse = (inDateString) =>
Date: date.getDate(), Date: date.getDate(),
Hours: date.getHours(), Hours: date.getHours(),
Minutes: date.getMinutes(), Minutes: date.getMinutes(),
Epoch: date.valueOf()
}; };
obj.Zone = obj.Zone ? obj.Zone[1] : "local time"; obj.Zone = obj.Zone ? obj.Zone[1] : "local time";
@ -255,4 +257,5 @@ const DateParse = (inDateString) =>
return obj; return obj;
}; };
export default App; /** @type {(inChannel:string, inSelector:string)=>void} */
export default (inChannel, inSelector) => render(h(App, {channel:inChannel, interval:50000}), document.querySelector(inSelector));

22
index.html
View File

@ -2,25 +2,15 @@
<html> <html>
<head></head> <head></head>
<body> <body>
<div style="max-width:500px; margin: 0 auto;"> <div style="max-width:500px; margin: 0 auto;">
<div id="boxcast"></div> <div id="boxcast"></div>
</div>
<script type="module"> <script type="module">
import Init from "./app.js";
const Channel = { const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
Basics: "sfz7ja3rlpoous6usu8a", Init(Channel.Basics, "#boxcast");
Sunday: "gzahmhugrzogttfdtbjj",
Dev: "r3os2zfdnhlquhuypgtp"
};
import { h, render } from "https://esm.sh/preact";
import App from "./app.js";
render(
h(App, {channel:Channel.Basics, interval:50000}),
document.querySelector("#boxcast")
);
</script> </script>
</div>
</body> </body>
</html> </html>

3
types.d.ts vendored
View File

@ -25,7 +25,8 @@ namespace Boxcast
Date: number Date: number
Hours: number Hours: number
Minutes: string | number Minutes: string | number
M?: "AM" | "PM" M?: "AM" | "PM",
Epoch: number
} }
type StateBinding<T> = [T, (item:T)=>void]; type StateBinding<T> = [T, (item:T)=>void];