Prettified Code!

webroot/js/app-video-only.js

@@ -12,7 +12,11 @@ import { OwncastPlayer } from './components/player.js';
 import Websocket from './utils/websocket.js';
 const websocket = new Websocket();
 
-import { addNewlines, makeLastOnlineString, pluralize } from './utils/helpers.js';
+import {
+  addNewlines,
+  makeLastOnlineString,
+  pluralize,
+} from './utils/helpers.js';
 import {
   URL_CONFIG,
   URL_STATUS,
@@ -223,7 +227,8 @@ export default class VideoOnly extends Component {
 
     let viewerCountMessage = '';
     if (streamOnline && viewerCount > 0) {
-      viewerCountMessage = html`${viewerCount} ${pluralize('viewer', viewerCount)}`;
+      viewerCountMessage = html`${viewerCount}
+      ${pluralize('viewer', viewerCount)}`;
     } else if (lastDisconnectTime) {
       viewerCountMessage = makeLastOnlineString(lastDisconnectTime);
     }
@@ -258,7 +263,9 @@ export default class VideoOnly extends Component {
           class="flex flex-row justify-between font-mono py-2 px-4 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"
         >
           <span class="text-xs">${streamStatusMessage}</span>
-          <span id="stream-viewer-count" class="text-xs text-right">${viewerCountMessage}</span>
+          <span id="stream-viewer-count" class="text-xs text-right"
+            >${viewerCountMessage}</span
+          >
         </section>
       </main>
     `;

webroot/js/app.js

@@ -208,7 +208,13 @@ export default class App extends Component {
     if (!status) {
       return;
     }
-    const { viewerCount, online, lastConnectTime, streamTitle, lastDisconnectTime } = status;
+    const {
+      viewerCount,
+      online,
+      lastConnectTime,
+      streamTitle,
+      lastDisconnectTime,
+    } = status;
 
     if (status.online && !curStreamOnline) {
       // stream has just come online.
@@ -522,12 +528,12 @@ export default class App extends Component {
 
     let viewerCountMessage = '';
     if (streamOnline && viewerCount > 0) {
-      viewerCountMessage = html`${viewerCount} ${pluralize('viewer', viewerCount)}`;
+      viewerCountMessage = html`${viewerCount}
+      ${pluralize('viewer', viewerCount)}`;
     } else if (lastDisconnectTime) {
       viewerCountMessage = makeLastOnlineString(lastDisconnectTime);
     }
 
-
     const mainClass = playerActive ? 'online' : '';
     const isPortrait =
       this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
@@ -653,7 +659,9 @@ export default class App extends Component {
             class="flex text-center flex-row justify-between font-mono py-2 px-4 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"
           >
             <span class="text-xs">${streamStatusMessage}</span>
-            <span id="stream-viewer-count" class="text-xs text-right">${viewerCountMessage}</span>
+            <span id="stream-viewer-count" class="text-xs text-right"
+              >${viewerCountMessage}</span
+            >
           </section>
         </main>
 

webroot/js/utils/helpers.js

@@ -3,14 +3,13 @@ import { ORIENTATION_LANDSCAPE, ORIENTATION_PORTRAIT } from './constants.js';
 export function getLocalStorage(key) {
   try {
     return localStorage.getItem(key);
-  } catch (e) {
+  } catch (e) {}
-  }
   return null;
 }
 
 export function setLocalStorage(key, value) {
   try {
-    if (value !== "" && value !== null) {
+    if (value !== '' && value !== null) {
       localStorage.setItem(key, value);
     } else {
       localStorage.removeItem(key);
@@ -28,13 +27,17 @@ export function clearLocalStorage(key) {
 export function jumpToBottom(element) {
   if (!element) return;
 
-  setTimeout(() => {
+  setTimeout(
+    () => {
       element.scrollTo({
         top: element.scrollHeight,
         left: 0,
-      behavior: 'auto'
+        behavior: 'auto',
       });
-  }, 50, element);
+    },
+    50,
+    element
+  );
 }
 
 // convert newlines to <br>s
@@ -46,54 +49,51 @@ export function pluralize(string, count) {
   if (count === 1) {
     return string;
   } else {
-    return string + "s";
+    return string + 's';
   }
 }
 
-
 // Trying to determine if browser is mobile/tablet.
 // Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
 export function hasTouchScreen() {
   let hasTouch = false;
-  if ("maxTouchPoints" in navigator) {
+  if ('maxTouchPoints' in navigator) {
     hasTouch = navigator.maxTouchPoints > 0;
-  } else if ("msMaxTouchPoints" in navigator) {
+  } else if ('msMaxTouchPoints' in navigator) {
     hasTouch = navigator.msMaxTouchPoints > 0;
   } else {
-      var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
+    var mQ = window.matchMedia && matchMedia('(pointer:coarse)');
-      if (mQ && mQ.media === "(pointer:coarse)") {
+    if (mQ && mQ.media === '(pointer:coarse)') {
       hasTouch = !!mQ.matches;
     } else if ('orientation' in window) {
       hasTouch = true; // deprecated, but good fallback
     } else {
       // Only as a last resort, fall back to user agent sniffing
       var UA = navigator.userAgent;
-          hasTouch = (
+      hasTouch =
         /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
-              /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
+        /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
-          );
     }
   }
   return hasTouch;
 }
 
-
 export function getOrientation(forTouch = false) {
   // chrome mobile gives misleading matchMedia result when keyboard is up
   if (forTouch && window.screen && window.screen.orientation) {
-    return window.screen.orientation.type.match('portrait') ?
+    return window.screen.orientation.type.match('portrait')
-      ORIENTATION_PORTRAIT :
+      ? ORIENTATION_PORTRAIT
-      ORIENTATION_LANDSCAPE;
+      : ORIENTATION_LANDSCAPE;
   } else {
     // all other cases
-    return window.matchMedia("(orientation: portrait)").matches ?
+    return window.matchMedia('(orientation: portrait)').matches
-    ORIENTATION_PORTRAIT :
+      ? ORIENTATION_PORTRAIT
-    ORIENTATION_LANDSCAPE;
+      : ORIENTATION_LANDSCAPE;
   }
 }
 
 export function generateUsername() {
-  return `User ${(Math.floor(Math.random() * 42) + 1)}`;
+  return `User ${Math.floor(Math.random() * 42) + 1}`;
 }
 
 export function padLeft(text, pad, size) {
@@ -122,19 +122,19 @@ export function setVHvar() {
   var vh = window.innerHeight * 0.01;
   // Then we set the value in the --vh custom property to the root of the document
   document.documentElement.style.setProperty('--vh', `${vh}px`);
-  console.log("== new vh", vh)
+  console.log('== new vh', vh);
 }
 
 export function doesObjectSupportFunction(object, functionName) {
-  return typeof object[functionName] === "function";
+  return typeof object[functionName] === 'function';
 }
 
 // return a string of css classes
 export function classNames(json) {
   const classes = [];
 
-  Object.entries(json).map(function(item) {
+  Object.entries(json).map(function (item) {
-    const [ key, value ] = item;
+    const [key, value] = item;
     if (value) {
       classes.push(key);
     }
@@ -143,21 +143,19 @@ export function classNames(json) {
   return classes.join(' ');
 }
 
-
 // taken from
 // https://medium.com/@TCAS3/debounce-deep-dive-javascript-es6-e6f8d983b7a1
 export function debounce(fn, time) {
   let timeout;
 
-  return function() {
+  return function () {
     const functionCall = () => fn.apply(this, arguments);
 
     clearTimeout(timeout);
     timeout = setTimeout(functionCall, time);
-  }
+  };
 }
 
-
 export function getDiffInDaysFromNow(timestamp) {
   const time = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
   return (new Date() - time) / (24 * 3600 * 1000);
@@ -174,7 +172,10 @@ export function makeLastOnlineString(timestamp) {
   if (diffInDays > 1) {
     string = time.toLocaleDateString();
   } else {
-    const atTime = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const atTime = time.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
     string = `Today ${atTime}`;
   }
   return `Last live: ${string}`;