css changes
This commit is contained in:
parent
21e0e0dd9c
commit
eb5a1c189f
172
app.js
172
app.js
@ -6,10 +6,24 @@ 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;
|
||||
@ -30,6 +44,13 @@ const StyledRoot = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
.Boxcast-Active
|
||||
{
|
||||
text-align: center;
|
||||
padding:20px;
|
||||
background: white;
|
||||
& > * { margin: 0; }
|
||||
}
|
||||
.Boxcast-Playlist
|
||||
{
|
||||
max-width: 550px;
|
||||
@ -37,7 +58,10 @@ const StyledRoot = styled.div`
|
||||
}
|
||||
.Partition
|
||||
{
|
||||
margin: 10px 0 0 0;
|
||||
margin: 15px 0 0 0;
|
||||
padding: 0 0 8px 0;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
text-align: center;
|
||||
}
|
||||
.Broadcast
|
||||
{
|
||||
@ -45,9 +69,16 @@ const StyledRoot = styled.div`
|
||||
display: flex;
|
||||
padding: 5px 0 5px 0;
|
||||
|
||||
& > *
|
||||
{
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.Pointer
|
||||
{
|
||||
width: 75px;
|
||||
text-align: right;
|
||||
.Badge
|
||||
{
|
||||
display: inline-block;
|
||||
@ -58,6 +89,7 @@ const StyledRoot = styled.div`
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
&.Next
|
||||
{
|
||||
@ -78,42 +110,71 @@ const StyledRoot = styled.div`
|
||||
}
|
||||
.Time
|
||||
{
|
||||
width: 75px;
|
||||
margin-right: 5px;
|
||||
width: 80px;
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
.Title
|
||||
{
|
||||
flex: 1;
|
||||
font-weight: 900;
|
||||
}
|
||||
.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: red;
|
||||
}
|
||||
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%;
|
||||
}
|
||||
.Title
|
||||
{
|
||||
order: 1;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.Pointer
|
||||
{
|
||||
width: 100%;
|
||||
order: 2;
|
||||
width: 30%;
|
||||
}
|
||||
.Control
|
||||
{
|
||||
order: 3;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -123,7 +184,7 @@ const StyledRoot = styled.div`
|
||||
right: 20px;
|
||||
bottom: -300px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
padding: 20px 0 40px 0;
|
||||
background: #333;
|
||||
border-radius: 5px;
|
||||
transition: bottom 0.4s;
|
||||
@ -135,13 +196,23 @@ const StyledRoot = styled.div`
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
button
|
||||
{
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.Close
|
||||
{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 5px 10px 5px 10px;
|
||||
border-radius: 20px;
|
||||
top: -15px;
|
||||
border: 3px solid white;
|
||||
top: -20px;
|
||||
right: 10px;
|
||||
background: #000000;
|
||||
cursor: pointer;
|
||||
@ -172,7 +243,7 @@ const App = props =>
|
||||
inList.sort((a, b) => a.starts_at > b.starts_at ? 1 : -1);
|
||||
inList.forEach( item => item.start = DateParse(item.starts_at));
|
||||
return inList;
|
||||
}
|
||||
};
|
||||
|
||||
const Player = useRef(null);
|
||||
|
||||
@ -248,12 +319,27 @@ const App = props =>
|
||||
};
|
||||
|
||||
Player.current.loadChannel(props.channel, settings);
|
||||
|
||||
document.documentElement.style.scrollBehavior = "smooth";
|
||||
window.location = (`#${PlayerID}`);
|
||||
}
|
||||
, [SelectedGet]);
|
||||
|
||||
return html`
|
||||
<${StyledRoot}>
|
||||
<div class="Boxcast-Player" id=${PlayerID}></div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="Boxcast-Playlist">
|
||||
${
|
||||
ListGet.map( (item, index) =>
|
||||
@ -284,18 +370,9 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
{
|
||||
// pointer
|
||||
let pointerText;
|
||||
if (priority)
|
||||
{
|
||||
pointerText = html`<div class="Badge Next">Next</div>`;
|
||||
}
|
||||
if(item.timeframe == "current")
|
||||
{
|
||||
pointerText = html`<div class="Badge Live">Live</div>`;
|
||||
}
|
||||
if(item.timeframe == "preroll")
|
||||
{
|
||||
pointerText = html`<div class="Badge Soon">Soon</div>`;
|
||||
}
|
||||
if (priority){ pointerText = html`<div class="Badge Next">Next</div>`; }
|
||||
if(item.timeframe == "preroll"){ pointerText = html`<div class="Badge Soon">Soon</div>`; }
|
||||
if(item.timeframe == "current"){ pointerText = html`<div class="Badge Live">Live</div>`; }
|
||||
|
||||
// (date) partition
|
||||
let partition;
|
||||
@ -308,32 +385,19 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
|
||||
// button
|
||||
let buttonText;
|
||||
if(item.timeframe == "past")
|
||||
{
|
||||
buttonText = "Re-watch";
|
||||
}
|
||||
if(item.timeframe == "current" || item.timeframe == "preroll")
|
||||
{
|
||||
buttonText = "Watch";
|
||||
}
|
||||
if(item.timeframe == "future")
|
||||
{
|
||||
buttonText = "Preview";
|
||||
}
|
||||
if(selected)
|
||||
{
|
||||
buttonText = "(Viewing)";
|
||||
}
|
||||
if(item.timeframe == "past"){ buttonText = "Rewatch"; }
|
||||
if(item.timeframe == "current" || item.timeframe == "preroll"){ buttonText = "Watch"; }
|
||||
if(item.timeframe == "future"){ buttonText = "Preview"; }
|
||||
|
||||
return html`
|
||||
${ partition }
|
||||
<div class=${`Broadcast ${item.timeframe}`} key=${item.id}>
|
||||
<div class="Pointer">${ pointerText }</div>
|
||||
<div class="Time">${item.start.Hours}:${item.start.Minutes} ${item.start.M}</div>
|
||||
<div class="Title">${item.name}</strong>
|
||||
<div class="Control">
|
||||
<button onClick=${select} disabled=${selected}>${buttonText}</button>
|
||||
</div>
|
||||
<div class="Pointer">${ pointerText }</div>
|
||||
</div>`;
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user