Compare commits
No commits in common. "a62bf7ea4c19c264f06fed5c3e3073da5ffb251d" and "6bb6019ad549dee52c5490ce50bf4e147e515a57" have entirely different histories.
a62bf7ea4c
...
6bb6019ad5
@ -1,27 +0,0 @@
|
||||
import 'https://js.boxcast.com/v3.min.js';
|
||||
|
||||
const Channels = {
|
||||
Basics: "sfz7ja3rlpoous6usu8a",
|
||||
Sunday: "gzahmhugrzogttfdtbjj",
|
||||
Dev: "r3os2zfdnhlquhuypgtp"
|
||||
};
|
||||
|
||||
const Player = boxcast("#boxcast");
|
||||
Player.loadChannel(Channels.Basics,
|
||||
{
|
||||
showTitle: true,
|
||||
showDescription: true,
|
||||
showRelated: true,
|
||||
showDocuments: true,
|
||||
showIndex :true,
|
||||
showDonations: false,
|
||||
showCountdown: true,
|
||||
relatedBroadcastsQuery:
|
||||
{
|
||||
s: "starts_at",
|
||||
l: 100,
|
||||
q: "timeframe:next starts_at:[2022-04-01T00:00:00 TO 2022-06-01T00:00:00]"
|
||||
},
|
||||
autoplay: true,
|
||||
defaultVideo: "next",
|
||||
});
|
||||
158
app.js
158
app.js
@ -6,24 +6,10 @@ 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;
|
||||
@ -44,13 +30,6 @@ const StyledRoot = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
.Boxcast-Active
|
||||
{
|
||||
text-align: center;
|
||||
padding:20px;
|
||||
background: white;
|
||||
& > * { margin: 0; }
|
||||
}
|
||||
.Boxcast-Playlist
|
||||
{
|
||||
max-width: 550px;
|
||||
@ -58,10 +37,7 @@ const StyledRoot = styled.div`
|
||||
}
|
||||
.Partition
|
||||
{
|
||||
margin: 15px 0 0 0;
|
||||
padding: 0 0 8px 0;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
text-align: center;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
.Broadcast
|
||||
{
|
||||
@ -69,16 +45,9 @@ 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;
|
||||
@ -89,7 +58,6 @@ const StyledRoot = styled.div`
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
&.Next
|
||||
{
|
||||
@ -110,25 +78,22 @@ const StyledRoot = styled.div`
|
||||
}
|
||||
.Time
|
||||
{
|
||||
width: 80px;
|
||||
width: 75px;
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
.Title
|
||||
{
|
||||
flex: 1;
|
||||
font-weight: 900;
|
||||
}
|
||||
.Control
|
||||
{
|
||||
width: 80px;
|
||||
|
||||
}
|
||||
|
||||
button
|
||||
{
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: 80px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
background: black;
|
||||
cursor: pointer;
|
||||
@ -136,45 +101,10 @@ const StyledRoot = styled.div`
|
||||
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
|
||||
{
|
||||
order: 2;
|
||||
width: 30%;
|
||||
}
|
||||
.Control
|
||||
{
|
||||
order: 3;
|
||||
width: 60%;
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -184,7 +114,7 @@ const StyledRoot = styled.div`
|
||||
right: 20px;
|
||||
bottom: -300px;
|
||||
width: 300px;
|
||||
padding: 20px 0 40px 0;
|
||||
height: 200px;
|
||||
background: #333;
|
||||
border-radius: 5px;
|
||||
transition: bottom 0.4s;
|
||||
@ -196,23 +126,13 @@ 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;
|
||||
border: 3px solid white;
|
||||
top: -20px;
|
||||
top: -15px;
|
||||
right: 10px;
|
||||
background: #000000;
|
||||
cursor: pointer;
|
||||
@ -243,7 +163,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);
|
||||
|
||||
@ -319,27 +239,12 @@ const App = props =>
|
||||
};
|
||||
|
||||
Player.current.loadChannel(props.channel, settings);
|
||||
|
||||
document.documentElement.style.scrollBehavior = "smooth";
|
||||
window.location = (`#${PlayerID}`);
|
||||
}
|
||||
, [SelectedGet]);
|
||||
|
||||
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>
|
||||
</div>
|
||||
<div class="Boxcast-Playlist">
|
||||
${
|
||||
ListGet.map( (item, index) =>
|
||||
@ -370,9 +275,18 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
{
|
||||
// pointer
|
||||
let pointerText;
|
||||
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>`; }
|
||||
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>`;
|
||||
}
|
||||
|
||||
// (date) partition
|
||||
let partition;
|
||||
@ -385,19 +299,32 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
|
||||
|
||||
// button
|
||||
let buttonText;
|
||||
if(item.timeframe == "past"){ buttonText = "Rewatch"; }
|
||||
if(item.timeframe == "current" || item.timeframe == "preroll"){ buttonText = "Watch"; }
|
||||
if(item.timeframe == "future"){ buttonText = "Preview"; }
|
||||
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)";
|
||||
}
|
||||
|
||||
return html`
|
||||
${ partition }
|
||||
<div class=${`Broadcast ${item.timeframe}`} key=${item.id}>
|
||||
<div class="Broadcast" key=${item.id} onClick=${select}>
|
||||
<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>`;
|
||||
};
|
||||
|
||||
@ -424,8 +351,5 @@ const DateParse = (inDateString) =>
|
||||
return obj;
|
||||
};
|
||||
|
||||
/** @type {(inChannel:string, inSelector:string, inInterval:number)=>void} */
|
||||
const Init = (inChannel, inSelector, inInterval) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:inInterval}));
|
||||
|
||||
const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
|
||||
Init(Channel.Basics, "#boxcast", 5000);
|
||||
/** @type {(inChannel:string, inSelector:string)=>void} */
|
||||
export default (inChannel, inSelector) => createRoot(document.querySelector(inSelector)).render(h(App, {channel:inChannel, interval:5000}));
|
||||
@ -8,7 +8,9 @@
|
||||
<div style="max-width:1100px; margin: 0 auto;">
|
||||
<div id="boxcast"></div>
|
||||
<script type="module">
|
||||
import "./app.js";
|
||||
import Init from "./app.js";
|
||||
const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
|
||||
Init(Channel.Basics, "#boxcast");
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user