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

Compare commits

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

3 Commits
a62bf7ea4c ... d54da92dd3

Author SHA1 Message Date
TreetopFlyer
d54da92dd3 misc tweaks 2022-04-28 11:32:48 -04:00
TreetopFlyer
d4bbc49260 revert border stuff 2022-04-28 11:02:23 -04:00
TreetopFlyer
d7ea84ec95 experimenting with outlines 2022-04-28 10:00:31 -04:00
2 changed files with 266 additions and 137 deletions
Show Stats Expand all files Collapse all files

291
app.js
View File

@ -17,168 +17,177 @@ 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-well-container
{
display: none;
}
.boxcast-well
{
display:flex;
justify-content: center;
align-items: center;
gap: 10px 10px;
min-height: 10px;
margin: 0;
& > span, .boxcast-linkback .Boxcast-Player
{
.boxcast-well-container
{ {
display:none; display: none;
} }
.boxcast-well
& > *
{ {
display:flex;
justify-content: center;
align-items: center;
gap: 10px 10px;
min-height: 10px;
margin: 0; margin: 0;
& > span, .boxcast-linkback
{
display:none;
}
& > *
{
margin: 0;
}
} }
} }
.Boxcast-Active
{
text-align: center;
padding:20px;
background: white;
& > * { margin: 0; }
}
} }
.Boxcast-Active
{
text-align: center;
padding:20px;
background: white;
& > * { margin: 0; }
}
.Boxcast-Playlist .Boxcast-Playlist
{ {
max-width: 550px; max-width: 550px;
margin: 30px auto; margin: 30px auto;
}
.Partition
{
margin: 15px 0 0 0;
padding: 0 0 8px 0;
border-bottom: 1px solid #dddddd;
text-align: center;
}
.Broadcast
{
position: relative;
display: flex;
padding: 5px 0 5px 0;
& > * .Partition
{ {
box-sizing: border-box; margin: 30px 0 0 0;
padding: 5px; padding: 0 0 8px 0;
border-bottom: 1px solid #dddddd;
text-align: center;
} }
.Broadcast
.Pointer
{ {
width: 75px; position: relative;
text-align: right; display: flex;
.Badge padding: 5px 0 5px 0;
{
display: inline-block;
border-radius: 20px;
padding: 2px 8px;
font-size: 12px;
font-weight: 900;
font-family: sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
&.Next & > *
{
box-sizing: border-box;
padding: 5px;
}
.Pointer
{
width: 75px;
text-align: right;
.Badge
{ {
background: yellow; display: inline-block;
color: black; border-radius: 20px;
} padding: 2px 8px;
&.Soon font-size: 12px;
{ font-weight: 900;
background: orange; font-family: sans-serif;
color: white; letter-spacing: 0.1em;
} text-transform: uppercase;
&.Live text-align: center;
{
background: limegreen; &.Next
color: white; {
background: yellow;
color: black;
}
&.Soon
{
background: orange;
color: white;
}
&.Live
{
background: red;
color: white;
}
} }
} }
}
.Time
{
width: 80px;
font-size: 16px;
text-align: right;
}
.Title
{
flex: 1;
font-weight: 900;
}
.Control
{
width: 80px;
}
button
{
appearance: none;
display: inline-block;
padding: 5px 10px 5px 10px;
background: black;
cursor: pointer;
border: none;
color: white;
font-size: 10px;
font-weight: 900;
transition: all 0.4s;
}
button[disabled]
{
background: red !important;
border-radius: 20px;
}
button:hover
{
border-radius: 20px;
}
&.future button
{
background: #aaa;
}
@media(max-width:500px)
{
flex-wrap: wrap;
.Time .Time
{ {
order: 0; width: 80px;
width: 30%; font-size: 16px;
text-align: right;
} }
.Title .Title
{ {
order: 1; flex: 1;
flex: none; font-weight: 900;
width: 60%;
}
.Pointer
{
order: 2;
width: 30%;
} }
.Control .Control
{ {
order: 3; width: 100px;
width: 60%;
}
button
{
position: relative;
appearance: none;
display: block;
width: 100%;
max-width:150px;
padding: 5px 10px 5px 10px;
background: #0e2a3f;
cursor: pointer;
border: none;
color: white;
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
transition: all 0.4s;
}
button:hover
{
border-radius: 50px;
}
button[disabled]
{
border-radius: 50px;
background: red !important;
}
&.future button
{
background: #c3b7a9;
}
@media(max-width:500px)
{
flex-wrap: wrap;
.Time
{
order: 0;
width: 30%;
}
.Title
{
order: 1;
flex: none;
width: 60%;
}
.Pointer
{
order: 2;
width: 30%;
}
.Control
{
order: 3;
width: 60%;
}
} }
} }
} }
.Alert
.Boxcast-Alert
{ {
position: fixed; position: fixed;
right: 20px; right: 20px;
@ -319,16 +328,23 @@ 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>
@ -336,6 +352,7 @@ 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>
@ -350,16 +367,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: ()=>SelectedSet(item.id) select: () => SelectionTransition(item)
}); });
}) })
} }
</div> </div>
<div class=${`Alert ${ AlertGet ? " Show" : null }`}> <div class=${`Boxcast-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=${()=>{ SelectedSet(LeadingGet.id); AlertSet(false); }}>Watch Now</button> <button onClick=${()=>{ SelectionTransition(LeadingGet); AlertSet(false); }}>Watch Now</button>
</div> </div>
<//> <//>
`; `;

112
testdata-03.json
View File

@ -26,5 +26,117 @@
"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": []
} }
] ]