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

Compare commits

base: SethTrowbridge:d54da92dd3cbb87cfb90eda106597e827fd4640e
Branches Tags
SethTrowbridge:master
SethTrowbridge:preact-list
..
compare: SethTrowbridge:a62bf7ea4c19c264f06fed5c3e3073da5ffb251d
Branches Tags
SethTrowbridge:preact-list
SethTrowbridge:master

No commits in common. "d54da92dd3cbb87cfb90eda106597e827fd4640e" and "a62bf7ea4c19c264f06fed5c3e3073da5ffb251d" have entirely different histories.
d54da92dd3 ... a62bf7ea4c

2 changed files with 139 additions and 268 deletions
Show Stats Expand all files Collapse all files

81
app.js
View File

@ -17,9 +17,9 @@ const StyledRoot = styled.div`
{ {
background: white; background: white;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
.Boxcast-Player .Boxcast-Player
{ {
.boxcast-well-container .boxcast-well-container
{ {
display: none; display: none;
@ -43,30 +43,28 @@ const StyledRoot = styled.div`
margin: 0; margin: 0;
} }
} }
} }
.Boxcast-Active .Boxcast-Active
{ {
text-align: center; text-align: center;
padding:20px; padding:20px;
background: white; background: white;
& > * { margin: 0; } & > * { margin: 0; }
}
} }
.Boxcast-Playlist .Boxcast-Playlist
{ {
max-width: 550px; max-width: 550px;
margin: 30px auto; margin: 30px auto;
}
.Partition .Partition
{ {
margin: 30px 0 0 0; margin: 15px 0 0 0;
padding: 0 0 8px 0; padding: 0 0 8px 0;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
text-align: center; text-align: center;
} }
.Broadcast .Broadcast
{ {
position: relative; position: relative;
display: flex; display: flex;
padding: 5px 0 5px 0; padding: 5px 0 5px 0;
@ -105,7 +103,7 @@ const StyledRoot = styled.div`
} }
&.Live &.Live
{ {
background: red; background: limegreen;
color: white; color: white;
} }
} }
@ -123,40 +121,35 @@ const StyledRoot = styled.div`
} }
.Control .Control
{ {
width: 100px; width: 80px;
} }
button button
{ {
position: relative;
appearance: none; appearance: none;
display: block; display: inline-block;
width: 100%;
max-width:150px;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
background: #0e2a3f; background: black;
cursor: pointer; cursor: pointer;
border: none; border: none;
color: white; color: white;
font-family: sans-serif; font-size: 10px;
font-size: 14px; font-weight: 900;
font-weight: 600;
transition: all 0.4s; transition: all 0.4s;
} }
button:hover
{
border-radius: 50px;
}
button[disabled] button[disabled]
{ {
border-radius: 50px;
background: red !important; background: red !important;
border-radius: 20px;
}
button:hover
{
border-radius: 20px;
} }
&.future button &.future button
{ {
background: #c3b7a9; background: #aaa;
} }
@media(max-width:500px) @media(max-width:500px)
@ -184,10 +177,8 @@ const StyledRoot = styled.div`
width: 60%; width: 60%;
} }
} }
}
} }
.Alert
.Boxcast-Alert
{ {
position: fixed; position: fixed;
right: 20px; right: 20px;
@ -328,23 +319,16 @@ const App = props =>
}; };
Player.current.loadChannel(props.channel, settings); Player.current.loadChannel(props.channel, settings);
document.documentElement.style.scrollBehavior = "smooth";
window.location = (`#${PlayerID}`);
} }
, [SelectedGet]); , [SelectedGet]);
/** @type {(inItem:Boxcast.Broadcast)=>void} */
const SelectionTransition = (inItem) =>
{
SelectedSet(inItem.id);
document.documentElement.style.scrollBehavior = "smooth";
setTimeout(()=>window.location = "#"+PlayerID, 450);
};
return html` return html`
<${StyledRoot}> <${StyledRoot}>
<div class="Boxcast-Upper"> <div class="Boxcast-Upper">
<div class="Boxcast-Player" id=${PlayerID}></div> <div class="Boxcast-Player" id=${PlayerID}></div>
<!-- <!--
<div> <div>
<button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button> <button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
@ -352,7 +336,6 @@ const App = props =>
<button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button> <button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
</div> </div>
--> -->
<div class="Boxcast-Active"> <div class="Boxcast-Active">
<h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2> <h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>
</div> </div>
@ -367,16 +350,16 @@ const App = props =>
previous: ListGet[index-1], previous: ListGet[index-1],
priority: item.id == LeadingGet?.id, priority: item.id == LeadingGet?.id,
selected: item.id == SelectedGet, selected: item.id == SelectedGet,
select: () => SelectionTransition(item) select: ()=>SelectedSet(item.id)
}); });
}) })
} }
</div> </div>
<div class=${`Boxcast-Alert ${ AlertGet ? " Show" : null }`}> <div class=${`Alert ${ AlertGet ? " Show" : null }`}>
<span class="Close" onClick=${()=>{ AlertSet(false); }}>Dismiss ✕</span> <span class="Close" onClick=${()=>{ AlertSet(false); }}>Dismiss ✕</span>
<h4>A new session is starting:</h4> <h4>A new session is starting:</h4>
<p>${LeadingGet?.name}</p> <p>${LeadingGet?.name}</p>
<button onClick=${()=>{ SelectionTransition(LeadingGet); AlertSet(false); }}>Watch Now</button> <button onClick=${()=>{ SelectedSet(LeadingGet.id); AlertSet(false); }}>Watch Now</button>
</div> </div>
<//> <//>
`; `;

112
testdata-03.json
View File

@ -26,117 +26,5 @@
"account_id": "ilkxk5hkn51drmocrv0d", "account_id": "ilkxk5hkn51drmocrv0d",
"channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd", "channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
"tags": [] "tags": []
},
{
"id": "n1w1rbpaaohkrx2aumll",
"name": "Main Session 2 -John Woodhouse",
"starts_at": "2022-05-02T23:10:00Z",
"stops_at": "2022-05-03T00:30:00Z",
"timeframe": "current",
"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-mnhpqpgyg8kobjgqerpw",
"tags": []
},
{
"id": "wwomf8amsgnct6esof3s",
"name": "Main Session 3 -Alistair Begg",
"starts_at": "2022-05-03T13:10:00Z",
"stops_at": "2022-05-03T14:30:00Z",
"timeframe": "future",
"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": "main-session-2--john-woodhouse-giplu3h3d7rsgays1yyg",
"tags": []
},
{
"id": "mjzsudcjjqor4qvpioqx",
"name": "Main Session 4 -John Woodhouse",
"starts_at": "2022-05-03T14:55:00Z",
"stops_at": "2022-05-03T16:15:00Z",
"timeframe": "future",
"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": "main-session-2--john-woodhouse-odnunx2aaa1ztxqtufaj",
"tags": []
},
{
"id": "ybwm92ssmqhshhrfpvfr",
"name": "Main Session 5 -John Woodhouse",
"starts_at": "2022-05-03T17:25:00Z",
"stops_at": "2022-05-03T18:35:00Z",
"timeframe": "future",
"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": "main-session-2--john-woodhouse-wdyqpnsguolrvjwl4aei",
"tags": []
},
{
"id": "jed2ccr6o9vukpavrs7t",
"name": "Breakout Session -Tony Merida",
"starts_at": "2022-05-03T18:40:00Z",
"stops_at": "2022-05-03T20:00:00Z",
"timeframe": "future",
"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": "main-session-6--tony-merida-xkw75et1zzz48xdq5grz",
"tags": []
},
{
"id": "yo8sefnnejvw3cx3vhup",
"name": "Q\u0026A with Alistair Begg",
"starts_at": "2022-05-04T00:25:00Z",
"stops_at": "2022-05-04T01:45:00Z",
"timeframe": "future",
"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": "main-session-2--john-woodhouse-r7ufs6iabwuch7w9hgmm",
"tags": []
},
{
"id": "ht6wddox6ompgbusacle",
"name": "Main Session 6 - John Woodhouse",
"starts_at": "2022-05-04T13:10:00Z",
"stops_at": "2022-05-04T14:30:00Z",
"timeframe": "future",
"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": "qa-with-alistair-begg-mmyh7oyiecuuqxykafff",
"tags": []
},
{
"id": "r9s2oqfl4vhxzfkx1bwf",
"name": "Panel Q\u0026A",
"starts_at": "2022-05-04T14:55:00Z",
"stops_at": "2022-05-04T16:30:00Z",
"timeframe": "future",
"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": "panel-qa-v7jfkqhc8viidxebcvvk",
"tags": []
} }
] ]