fix random styled components error

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

61
app.js
View File

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

View File

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