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,
@@ -35,7 +32,7 @@ export default class VideoOnly extends Component {
       configData: {},
 
       playerActive: false, // player object is active
-      streamOnline: false,  // stream is active/online
+      streamOnline: false, // stream is active/online
 
       isPlaying: false,
 
@@ -88,42 +85,42 @@ 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 => {
-      this.setConfigData(json);
-    })
-    .catch(error => {
-      this.handleNetworkingError(`Fetch config: ${error}`);
-    });
-  }
-
-  // fetch stream status
-  getStreamStatus() {
-    fetch(URL_STATUS)
-      .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) => {
+        this.handleNetworkingError(`Fetch config: ${error}`);
+      });
+  }
+
+  // fetch stream status
+  getStreamStatus() {
+    fetch(URL_STATUS)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Network response was not ok ${response.ok}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
         this.updateStreamStatus(json);
       })
-      .catch(error => {
+      .catch((error) => {
         this.handleOfflineMode();
         this.handleNetworkingError(`Stream status: ${error}`);
       });
 
-      // Ping the API to let them know we're an active viewer
+    // Ping the API to let them know we're an active viewer
-      fetch(URL_VIEWER_PING).catch((error) => {
+    fetch(URL_VIEWER_PING).catch((error) => {
-        this.handleOfflineMode();
+      this.handleOfflineMode();
-        this.handleNetworkingError(`Viewer PING error: ${error}`);
+      this.handleNetworkingError(`Viewer PING error: ${error}`);
-      });
+    });
   }
 
   setConfigData(data = {}) {
@@ -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,35 +229,36 @@ 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}>
-        <main class=${mainClass}>
+        <div
-          <div
+          id="video-container"
-            id="video-container"
+          class="flex owncast-video-container bg-black w-full bg-center bg-no-repeat flex flex-col items-center justify-start"
-            class="flex owncast-video-container bg-black w-full bg-center bg-no-repeat flex flex-col items-center justify-start"
+        >
-          >
+          <video
-            <video
+            class="video-js vjs-big-play-centered display-block w-full h-full"
-              class="video-js vjs-big-play-centered display-block w-full h-full"
+            id="video"
-              id="video"
+            preload="auto"
-              preload="auto"
+            controls
-              controls
+            playsinline
-              playsinline
+          ></video>
-            ></video>
+          ${poster}
-            ${poster}
+        </div>
-          </div>
 
-          <section
+        <section
-            id="stream-info"
+          id="stream-info"
-            aria-label="Stream status"
+          aria-label="Stream status"
-            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"
+          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>${streamStatusMessage}</span>
+        </section>
-            <span id="stream-viewer-count">${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
+      </main>
-          </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