Prettified Code!

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

webroot/js/components/tab-bar.js

@@ -25,44 +25,39 @@ export default class TabBar extends Component {
     }
 
     if (tabs.length === 1) {
-      return html`
+      return html` ${tabs[0].content} `;
-        ${tabs[0].content}
-      `;
-
     } else {
       return html`
         <div class="tab-bar">
           <div role="tablist" aria-label=${ariaLabel}>
-            ${
+            ${tabs.map((tabItem, index) => {
-              tabs.map((tabItem, index) => {
+              const handleClick = () => this.handleTabClick(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) => {
               return html`
-                  <div
+                <button
-                    tabindex="0"
+                  role="tab"
-                    role="tabpanel"
+                  aria-selected=${index === this.state.activeIndex}
-                    id=${`tabContent${index}`}
+                  aria-controls=${`tabContent${index}`}
-                    aria-labelledby=${`tab-${tabItem.label}`}
+                  id=${`tab-${tabItem.label}`}
-                    hidden=${index !== this.state.activeIndex}
+                  onclick=${handleClick}
-                  >
+                >
-                    ${tabItem.content}
+                  ${tabItem.label}
-                  </div>
+                </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>
       `;
     }

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';