Prettified Code!

webroot/js/app-video-only.js

@@ -12,10 +12,7 @@ import { OwncastPlayer } from './components/player.js';
 import Websocket from './utils/websocket.js';
 const websocket = new Websocket();
 
-import {
+import { addNewlines, pluralize } from './utils/helpers.js';
-  addNewlines,
-  pluralize,
-} from './utils/helpers.js';
 import {
   URL_CONFIG,
   URL_STATUS,
@@ -88,16 +85,16 @@ export default class VideoOnly extends Component {
   // fetch /config data
   getConfig() {
     fetch(URL_CONFIG)
-    .then(response => {
+      .then((response) => {
         if (!response.ok) {
           throw new Error(`Network response was not ok ${response.ok}`);
         }
         return response.json();
       })
-    .then(json => {
+      .then((json) => {
         this.setConfigData(json);
       })
-    .catch(error => {
+      .catch((error) => {
         this.handleNetworkingError(`Fetch config: ${error}`);
       });
   }
@@ -105,16 +102,16 @@ export default class VideoOnly extends Component {
   // fetch stream status
   getStreamStatus() {
     fetch(URL_STATUS)
-      .then(response => {
+      .then((response) => {
         if (!response.ok) {
           throw new Error(`Network response was not ok ${response.ok}`);
         }
         return response.json();
       })
-      .then(json => {
+      .then((json) => {
         this.updateStreamStatus(json);
       })
-      .catch(error => {
+      .catch((error) => {
         this.handleOfflineMode();
         this.handleNetworkingError(`Stream status: ${error}`);
       });
@@ -144,10 +141,7 @@ export default class VideoOnly extends Component {
     if (!status) {
       return;
     }
-    const {
+    const { viewerCount, online } = status;
-      viewerCount,
-      online,
-    } = status;
 
     this.lastDisconnectTime = status.lastDisconnectTime;
 
@@ -204,8 +198,10 @@ export default class VideoOnly extends Component {
   handleOnlineMode() {
     this.player.startPlayer();
 
-    this.streamDurationTimer =
+    this.streamDurationTimer = setInterval(
-      setInterval(this.setCurrentStreamDuration, TIMER_STREAM_DURATION_COUNTER);
+      this.setCurrentStreamDuration,
+      TIMER_STREAM_DURATION_COUNTER
+    );
 
     this.setState({
       playerActive: true,
@@ -233,11 +229,10 @@ export default class VideoOnly extends Component {
 
     const mainClass = playerActive ? 'online' : '';
 
-    const poster = isPlaying ? null : html`
+    const poster = isPlaying
-      <${VideoPoster} offlineImage=${logo} active=${streamOnline} />
+      ? null
-    `;
+      : html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;
-    return (
+    return html`
-      html`
       <main class=${mainClass}>
         <div
           id="video-container"
@@ -259,9 +254,11 @@ export default class VideoOnly extends Component {
           class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"
         >
           <span>${streamStatusMessage}</span>
-            <span id="stream-viewer-count">${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
+          <span id="stream-viewer-count"
+            >${viewerCount} ${pluralize('viewer', viewerCount)}.</span
+          >
         </section>
       </main>
-    `);
+    `;
   }
 }

webroot/js/utils/constants.js

@@ -8,12 +8,15 @@ export const URL_VIEWER_PING = `/api/ping`;
 
 // TODO: This directory is customizable in the config.  So we should expose this via the config API.
 export const URL_STREAM = `/hls/stream.m3u8`;
-export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
+export const URL_WEBSOCKET = `${
+  location.protocol === 'https:' ? 'wss' : 'ws'
+}://${location.host}/entry`;
 
 export const TIMER_STATUS_UPDATE = 5000; // ms
 export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
 export const TIMER_STREAM_DURATION_COUNTER = 1000;
-export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+export const TEMP_IMAGE =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
 export const OWNCAST_LOGO_LOCAL = '/img/logo.svg';
 
@@ -23,12 +26,12 @@ export const MESSAGE_ONLINE = 'Stream is online.';
 export const URL_OWNCAST = 'https://owncast.online'; // used in footer
 export const PLAYER_VOLUME = 'owncast_volume';
 
-
 export const KEY_USERNAME = 'owncast_username';
-export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set'
+export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set';
 export const KEY_CHAT_DISPLAYED = 'owncast_chat';
 export const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
-export const CHAT_INITIAL_PLACEHOLDER_TEXT = 'Type here to chat, no account necessary.';
+export const CHAT_INITIAL_PLACEHOLDER_TEXT =
+  'Type here to chat, no account necessary.';
 export const CHAT_PLACEHOLDER_TEXT = 'Message';
 export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
 export const CHAT_MAX_MESSAGE_LENGTH = 500;
@@ -44,12 +47,7 @@ export const CHAT_OK_KEYCODES = [
   'Delete',
   'Backspace',
 ];
-export const CHAT_KEY_MODIFIERS = [
+export const CHAT_KEY_MODIFIERS = ['Control', 'Shift', 'Meta', 'Alt'];
-  'Control',
-  'Shift',
-  'Meta',
-  'Alt',
-];
 export const MESSAGE_JUMPTOBOTTOM_BUFFER = 300;
 
 // app styling