From d7ea84ec95392751cd466306b89b278bce6c05ce Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Thu, 28 Apr 2022 10:00:31 -0400 Subject: [PATCH] experimenting with outlines --- app.js | 310 ++++++++++++++++++++++++++--------------------- testdata-03.json | 112 +++++++++++++++++ 2 files changed, 281 insertions(+), 141 deletions(-) diff --git a/app.js b/app.js index 2bc4d29..3b9a4a8 100644 --- a/app.js +++ b/app.js @@ -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}>
- +

${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }

@@ -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) }); }) }
-
+
{ AlertSet(false); }}>Dismiss ✕

A new session is starting:

${LeadingGet?.name}

- +
`; diff --git a/testdata-03.json b/testdata-03.json index 9d79f01..680f4ec 100644 --- a/testdata-03.json +++ b/testdata-03.json @@ -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": [] } ] \ No newline at end of file