diff --git a/webroot/js/app-video-only.js b/webroot/js/app-video-only.js index a9845ccae..b19b2c6fa 100644 --- a/webroot/js/app-video-only.js +++ b/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" > ${streamStatusMessage} - ${viewerCountMessage} + ${viewerCountMessage} `; diff --git a/webroot/js/app.js b/webroot/js/app.js index 8428672c3..a082b5bd2 100644 --- a/webroot/js/app.js +++ b/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" > ${streamStatusMessage} - ${viewerCountMessage} + ${viewerCountMessage} diff --git a/webroot/js/utils/helpers.js b/webroot/js/utils/helpers.js index d732bba45..c9b0ccc69 100644 --- a/webroot/js/utils/helpers.js +++ b/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(() => { - element.scrollTo({ - top: element.scrollHeight, - left: 0, - behavior: 'auto' - }); - }, 50, element); + setTimeout( + () => { + element.scrollTo({ + top: element.scrollHeight, + left: 0, + behavior: 'auto', + }); + }, + 50, + element + ); } // convert newlines to
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)"); - 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 = ( - /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || - /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA) - ); - } + var mQ = window.matchMedia && matchMedia('(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 = + /\b(BlackBerry|webOS|iPhone|IEMobile)\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') ? - ORIENTATION_PORTRAIT : - ORIENTATION_LANDSCAPE; + return window.screen.orientation.type.match('portrait') + ? ORIENTATION_PORTRAIT + : ORIENTATION_LANDSCAPE; } else { // all other cases - return window.matchMedia("(orientation: portrait)").matches ? - ORIENTATION_PORTRAIT : - ORIENTATION_LANDSCAPE; + return window.matchMedia('(orientation: portrait)').matches + ? ORIENTATION_PORTRAIT + : 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) { - const [ key, value ] = item; + Object.entries(json).map(function (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}`;