diff options
author | gabek <gabek@users.noreply.github.com> | 2022-01-12 21:53:44 +0000 |
---|---|---|
committer | GitHub Action <actions@github.com> | 2022-01-12 21:53:44 +0000 |
commit | 04f4464e5e6d4d08f83ab1e2b96cbcdc3534b4b1 (patch) | |
tree | 0ec2e2b69a586978adea9bbd426588bda2b758ee | |
parent | 045a0a2afd4a215fac63c89ee0f6a8167478b215 (diff) |
Prettified Code!
-rw-r--r-- | webroot/js/TEMP-TODO.md | 22 | ||||
-rw-r--r-- | webroot/js/components/tab-bar.js | 59 | ||||
-rw-r--r-- | webroot/js/utils/helpers.js | 1 |
3 files changed, 42 insertions, 40 deletions
diff --git a/webroot/js/TEMP-TODO.md b/webroot/js/TEMP-TODO.md index ef70c043c..6fb7b72ae 100644 --- a/webroot/js/TEMP-TODO.md +++ b/webroot/js/TEMP-TODO.md @@ -1,7 +1,9 @@ # TEMP TODO FILE # ~~Mockup for Recordings and Scheduling~~ + # Mockup for Fediverse Social, Tabbed User Content + This used to be setting up to display Recordings, but the progress can be used towards Fediverse work. - Rearranges some logic around when to display the chat panel vs when video is playing @@ -17,6 +19,7 @@ This used to be setting up to display Recordings, but the progress can be used t - [ ] style Follow on Fediverse Modal ### Add more local React States + - [ ] add offline / no-video state (? what was this again?) - [ ] add tab states - [ ] **DEFER** add route states @@ -24,54 +27,59 @@ This used to be setting up to display Recordings, but the progress can be used t - [ ] **DEFER** add schedule[] when comes in from config ## Add Tab bar + Tab bar includes: + - `About` - User custom info - `Followers` - display tab if schedule info exists - **DEFER** `Videos` - display if user has Recordings - **DEFER** `Schedule` - display tab if schedule info exists - ## **DEFER?** Routing, Url Handling + - do we need it for Followers? + #### Recording urls + - `server.com/recordings` - `server.com/recordings/id123` #### Schedule urls + - `server.com/schedule` - `server.com/schedule/id123` #### Followers Url? ### Todo + - [ ] modify server side go to just load up index.html/app.js when url routes to /recording or /schedule - [ ] update app js to detect url route and display appropriate tab content - ## **DEFER** Recordings ### `server.com/recordings` + - [ ] don't show chat elements - [ ] list avilable recordings, display list similar to directory.owncast. - [ ] display recording length - [ ] display num views? - ### `server.com/recordings/id123` + - [ ] display video, full size with recording loaded - [ ] display chat - [ ] do not enable chat message input - [ ] render chat messages as they came in relative to video timestamp - ## Schedule + - [ ] don't show chat elements ### `server.com/schedule` -- [ ] list items ASC +- [ ] list items ASC ### `server.com/schedule/id123` -- [ ] display info - +- [ ] display info diff --git a/webroot/js/components/tab-bar.js b/webroot/js/components/tab-bar.js index 742bb9d5c..895d1a75a 100644 --- a/webroot/js/components/tab-bar.js +++ b/webroot/js/components/tab-bar.js @@ -25,44 +25,39 @@ export default class TabBar extends Component { } if (tabs.length === 1) { - return html` - ${tabs[0].content} - `; - + return html` ${tabs[0].content} `; } else { return html` <div class="tab-bar"> <div role="tablist" aria-label=${ariaLabel}> - ${ - tabs.map((tabItem, index) => { - const handleClick = () => this.handleTabClick(index); - return html` - <button - role="tab" - aria-selected=${index === this.state.activeIndex} - aria-controls=${`tabContent${index}`} - id=${`tab-${tabItem.label}`} - onclick=${handleClick} - >${tabItem.label}</button> - `; - }) - } - </div> - ${ - tabs.map((tabItem, index) => { + ${tabs.map((tabItem, index) => { + const handleClick = () => this.handleTabClick(index); return html` - <div - tabindex="0" - role="tabpanel" - id=${`tabContent${index}`} - aria-labelledby=${`tab-${tabItem.label}`} - hidden=${index !== this.state.activeIndex} - > - ${tabItem.content} - </div> + <button + role="tab" + aria-selected=${index === this.state.activeIndex} + aria-controls=${`tabContent${index}`} + id=${`tab-${tabItem.label}`} + onclick=${handleClick} + > + ${tabItem.label} + </button> `; - }) - } + })} + </div> + ${tabs.map((tabItem, index) => { + return html` + <div + tabindex="0" + role="tabpanel" + id=${`tabContent${index}`} + aria-labelledby=${`tab-${tabItem.label}`} + hidden=${index !== this.state.activeIndex} + > + ${tabItem.content} + </div> + `; + })} </div> `; } diff --git a/webroot/js/utils/helpers.js b/webroot/js/utils/helpers.js index cfe653bb0..b4c8779bd 100644 --- a/webroot/js/utils/helpers.js +++ b/webroot/js/utils/helpers.js @@ -178,7 +178,6 @@ export function makeLastOnlineString(timestamp) { return `Last live: ${string}`; } - // Routing & Tabs export const ROUTE_RECORDINGS = 'recordings'; export const ROUTE_SCHEDULE = 'schedule'; |