Compare commits
3 Commits
a62bf7ea4c
...
d54da92dd3
| Author | SHA1 | Date | |
|---|---|---|---|
| d54da92dd3 | |||
| d4bbc49260 | |||
| d7ea84ec95 |
291
app.js
291
app.js
@ -17,168 +17,177 @@ const StyledRoot = styled.div`
|
||||
{
|
||||
background: white;
|
||||
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;
|
||||
|
||||
& > 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
|
||||
{
|
||||
max-width: 550px;
|
||||
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;
|
||||
padding: 5px;
|
||||
margin: 30px 0 0 0;
|
||||
padding: 0 0 8px 0;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Pointer
|
||||
.Broadcast
|
||||
{
|
||||
width: 75px;
|
||||
text-align: right;
|
||||
.Badge
|
||||
{
|
||||
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;
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 5px 0 5px 0;
|
||||
|
||||
&.Next
|
||||
& > *
|
||||
{
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.Pointer
|
||||
{
|
||||
width: 75px;
|
||||
text-align: right;
|
||||
.Badge
|
||||
{
|
||||
background: yellow;
|
||||
color: black;
|
||||
}
|
||||
&.Soon
|
||||
{
|
||||
background: orange;
|
||||
color: white;
|
||||
}
|
||||
&.Live
|
||||
{
|
||||
background: limegreen;
|
||||
color: white;
|
||||
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
|
||||
{
|
||||
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
|
||||
{
|
||||
order: 0;
|
||||
width: 30%;
|
||||
width: 80px;
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
.Title
|
||||
{
|
||||
order: 1;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.Pointer
|
||||
{
|
||||
order: 2;
|
||||
width: 30%;
|
||||
flex: 1;
|
||||
font-weight: 900;
|
||||
}
|
||||
.Control
|
||||
{
|
||||
order: 3;
|
||||
width: 60%;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
right: 20px;
|
||||
@ -319,16 +328,23 @@ const App = props =>
|
||||
};
|
||||
|
||||
Player.current.loadChannel(props.channel, settings);
|
||||
|
||||
document.documentElement.style.scrollBehavior = "smooth";
|
||||
window.location = (`#${PlayerID}`);
|
||||
}
|
||||
, [SelectedGet]);
|
||||
|
||||
|
||||
/** @type {(inItem:Boxcast.Broadcast)=>void} */
|
||||
const SelectionTransition = (inItem) =>
|
||||
{
|
||||
SelectedSet(inItem.id);
|
||||
document.documentElement.style.scrollBehavior = "smooth";
|
||||
setTimeout(()=>window.location = "#"+PlayerID, 450);
|
||||
};
|
||||
|
||||
return html`
|
||||
<${StyledRoot}>
|
||||
<div class="Boxcast-Upper">
|
||||
<div class="Boxcast-Player" id=${PlayerID}></div>
|
||||
|
||||
<!--
|
||||
<div>
|
||||
<button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
|
||||
@ -336,6 +352,7 @@ const App = props =>
|
||||
<button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="Boxcast-Active">
|
||||
<h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>
|
||||
</div>
|
||||
@ -350,16 +367,16 @@ const App = props =>
|
||||
previous: ListGet[index-1],
|
||||
priority: item.id == LeadingGet?.id,
|
||||
selected: item.id == SelectedGet,
|
||||
select: ()=>SelectedSet(item.id)
|
||||
select: () => SelectionTransition(item)
|
||||
});
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div class=${`Alert ${ AlertGet ? " Show" : null }`}>
|
||||
<div class=${`Boxcast-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.id); AlertSet(false); }}>Watch Now</button>
|
||||
<button onClick=${()=>{ SelectionTransition(LeadingGet); AlertSet(false); }}>Watch Now</button>
|
||||
</div>
|
||||
<//>
|
||||
`;
|
||||
|
||||
112
testdata-03.json
112
testdata-03.json
@ -26,5 +26,117 @@
|
||||
"account_id": "ilkxk5hkn51drmocrv0d",
|
||||
"channel_id": "breakout-session---alistair-begg-gkkr1jga58geasofpnmd",
|
||||
"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": []
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user