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

fix random styled components error

Browse Source
This commit is contained in:
TreetopFlyer 2022-04-26 17:10:25 -04:00
parent 88516c82b2
commit be212c3bb0
2 changed files with 28 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app.js
View File

@ -3,16 +3,10 @@
import 'https://js.boxcast.com/v3.min.js'; import 'https://js.boxcast.com/v3.min.js';
import { html } from "https://esm.sh/htm/react"; import { html } from "https://esm.sh/htm/react";
import styled, { css, keyframes } from 'https://esm.sh/styled-components'; import styled from 'https://esm.sh/styled-components?deps=react@18';
import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react'; import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18';
import { createRoot } from "https://esm.sh/react-dom/client"; 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` const StyledRoot = styled.div`
.Partition .Partition
{ {
@ -160,29 +154,31 @@ const App = props =>
} }
, []); , []);
// on new list // on new list
useEffect(()=> useEffect(()=>
{ {
let leading; let leading;
for(let i=0; i<ListGet.length; i++) for(let i=0; i<ListGet.length; i++)
{ {
if(ListGet[i].timeframe != "past") if(ListGet[i].timeframe != "past")
{ {
leading = ListGet[i]; leading = ListGet[i];
LeadingSet(leading);
if(SelectedGet == null) // if nothing is selected select the leading event if( (leading.timeframe == "current" || leading.timeframe == "preroll") && (leading.id != LeadingGet?.id) && (SelectedGet != leading.id)) // if something is selected other than the leading event, alert the user
{ {
SelectedSet(leading.id); AlertSet(true);
} }
else if(SelectedGet != leading?.id) // if something is selected other than the leading event, alert the user
{
AlertSet(true);
}
return; if(SelectedGet == null) // if nothing is selected select the leading event
} {
} SelectedSet(leading.id);
}
LeadingSet(leading);
return;
}
}
if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
{ {
@ -217,13 +213,6 @@ const App = props =>
return html` return html`
<${StyledRoot}> <${StyledRoot}>
<div id=${PlayerID}></div> <div 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-Playlist"> <div class="Boxcast-Playlist">
${ ${
ListGet.map( (item, index) => ListGet.map( (item, index) =>

4
index.html
View File

@ -1,6 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head></head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body> <body>
<div style="max-width:500px; margin: 0 auto;"> <div style="max-width:500px; margin: 0 auto;">