revert selecteget to id
This commit is contained in:
parent
c54e398eb1
commit
88516c82b2
102
app.js
102
app.js
@ -7,14 +7,11 @@ import styled, { css, keyframes } from 'https://esm.sh/styled-components';
|
||||
import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react';
|
||||
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 Styles =
|
||||
{
|
||||
|
||||
};
|
||||
*/
|
||||
|
||||
const StyledRoot = styled.div`
|
||||
.Partition
|
||||
@ -26,6 +23,32 @@ const StyledRoot = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 5px 0 5px 0;
|
||||
|
||||
.Pointer
|
||||
{
|
||||
width: 75px;
|
||||
.Badge
|
||||
{
|
||||
display: inline-block;
|
||||
border-radius: 20px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&.Next
|
||||
{
|
||||
background: yellow;
|
||||
color: black;
|
||||
}
|
||||
&.Live
|
||||
{
|
||||
background: limegreen;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Time
|
||||
{
|
||||
width: 75px;
|
||||
@ -33,9 +56,29 @@ const StyledRoot = styled.div`
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
.Pointer
|
||||
.Title
|
||||
{
|
||||
width: 75px;
|
||||
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
|
||||
@ -79,7 +122,7 @@ const App = props =>
|
||||
/** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
|
||||
const [ListGet, ListSet] = useState([]);
|
||||
|
||||
/** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
|
||||
/** @type {Boxcast.StateBinding<string|null>} */
|
||||
const [SelectedGet, SelectedSet] = useState(null);
|
||||
|
||||
/** @type {Boxcast.StateBinding<Boxcast.Broadcast|null>} */
|
||||
@ -102,7 +145,6 @@ const App = props =>
|
||||
{
|
||||
Player.current = boxcast(`#${PlayerID}`);
|
||||
|
||||
return;
|
||||
/** @type {()=>Promise} */
|
||||
const Ping = async () =>
|
||||
{
|
||||
@ -131,9 +173,9 @@ const App = props =>
|
||||
|
||||
if(SelectedGet == null) // if nothing is selected select the leading event
|
||||
{
|
||||
SelectedSet(leading);
|
||||
SelectedSet(leading.id);
|
||||
}
|
||||
else if(SelectedGet?.id != leading?.id) // if something is selected other than the leading event, alert the user
|
||||
else if(SelectedGet != leading?.id) // if something is selected other than the leading event, alert the user
|
||||
{
|
||||
AlertSet(true);
|
||||
}
|
||||
@ -145,7 +187,10 @@ const App = props =>
|
||||
if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
|
||||
{
|
||||
LeadingSet(null);
|
||||
SelectedSet(ListGet[0]);
|
||||
if(SelectedGet == null)
|
||||
{
|
||||
SelectedSet(ListGet[0].id);
|
||||
}
|
||||
AlertSet(false);
|
||||
}
|
||||
}
|
||||
@ -156,7 +201,7 @@ const App = props =>
|
||||
useEffect(()=>
|
||||
{
|
||||
const settings = {
|
||||
selectedBroadcastId: SelectedGet?.id,
|
||||
selectedBroadcastId: SelectedGet,
|
||||
showTitle: true,
|
||||
showDescription: true,
|
||||
showCountdown: true,
|
||||
@ -167,35 +212,38 @@ const App = props =>
|
||||
|
||||
Player.current.loadChannel(props.channel, settings);
|
||||
}
|
||||
, [SelectedGet])
|
||||
, [SelectedGet]);
|
||||
|
||||
return html`
|
||||
<${StyledRoot}>
|
||||
<div 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-Playlist">
|
||||
${
|
||||
ListGet.map( (item, index) => h(
|
||||
BroadcastItem,
|
||||
ListGet.map( (item, index) =>
|
||||
{
|
||||
return h(BroadcastItem,
|
||||
{
|
||||
item: item,
|
||||
previous: ListGet[index-1],
|
||||
priority: item.id == LeadingGet?.id,
|
||||
selected: item.id == SelectedGet?.id,
|
||||
select: ()=>SelectedSet(item)
|
||||
}
|
||||
))
|
||||
selected: item.id == SelectedGet,
|
||||
select: ()=>SelectedSet(item.id)
|
||||
});
|
||||
})
|
||||
}
|
||||
</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); AlertSet(false); }}>Watch Now</button>
|
||||
<button onClick=${()=>{ SelectedSet(LeadingGet.id); AlertSet(false); }}>Watch Now</button>
|
||||
</div>
|
||||
<//>
|
||||
`;
|
||||
@ -207,17 +255,19 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
let pointerText;
|
||||
if(item.timeframe == "current" || item.timeframe == "preroll")
|
||||
{
|
||||
pointerText = `Live:`;
|
||||
pointerText = html`<div class="Badge Live">Live</div>`;
|
||||
}
|
||||
else if (priority)
|
||||
{
|
||||
pointerText = `Next:`;
|
||||
pointerText = html`<div class="Badge Next">Next</div>`;
|
||||
}
|
||||
|
||||
let partition;
|
||||
if(!previous || (previous.start.Date !== item.start.Date))
|
||||
{
|
||||
partition = html`<h3 key=${item.start.Day} class="Partition" >${item.start.Day}, ${item.start.Month} ${item.start.Date}</h3>`
|
||||
partition = html`<h3 class="Partition" key=${item.id+item.start.Day} >
|
||||
${item.start.Day}, ${item.start.Month} ${item.start.Date}
|
||||
</h3>`;
|
||||
}
|
||||
|
||||
let buttonText;
|
||||
@ -240,7 +290,7 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
|
||||
return html`
|
||||
${ partition }
|
||||
<div key=${item.id} onClick=${select} class="Broadcast">
|
||||
<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>
|
||||
@ -274,4 +324,4 @@ const DateParse = (inDateString) =>
|
||||
};
|
||||
|
||||
/** @type {(inChannel:string, inSelector:string)=>void} */
|
||||
export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:50000}));
|
||||
export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:5000}));
|
||||
@ -8,7 +8,7 @@
|
||||
<script type="module">
|
||||
import Init from "./app.js";
|
||||
const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
|
||||
Init(Channel.Basics, "#boxcast");
|
||||
Init(Channel.Dev, "#boxcast");
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user