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

experimenting with outlines

Browse Source
This commit is contained in:
TreetopFlyer 2022-04-28 10:00:31 -04:00
parent a62bf7ea4c
commit d7ea84ec95
2 changed files with 281 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
app.js
View File

@ -6,179 +6,201 @@ import { html } from "https://esm.sh/htm/react";
import styled from 'https://esm.sh/styled-components?deps=react@18';
import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18';
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 StyledRoot = styled.div`
.Boxcast-Upper
{
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: 15px 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%;
padding: 5px 10px 5px 10px;
background: black;
cursor: pointer;
border: none;
color: white;
font-size: 14px;
font-weight: 600;
transition: all 0.4s;
&::before
{
content: " ";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0px solid transparent;
outline: 0px solid red;
transition: all 0.4s;
}
}
button[disabled]::before
{
top: -5px;
left: -5px;
border: 5px solid transparent;
outline: 5px solid red;
}
button:hover::before
{
outline: 5px solid red;
}
&.future button
{
background: #aaa;
}
@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,23 +341,29 @@ 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";
window.location = "#"+PlayerID;
};
return html`
<${StyledRoot}>
<div class="Boxcast-Upper">
<div class="Boxcast-Player" 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-Active">
<h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>
</div>
@ -350,16 +378,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
View File

@ -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": []
}
]