import { ORIENTATION_LANDSCAPE, ORIENTATION_PORTRAIT } from './constants.js'; export function getLocalStorage(key) { try { return localStorage.getItem(key); } catch (e) {} return null; } export function setLocalStorage(key, value) { try { if (value !== '' && value !== null) { localStorage.setItem(key, value); } else { localStorage.removeItem(key); } return true; } catch (e) {} return false; } export function clearLocalStorage(key) { localStorage.removeItem(key); } // jump down to the max height of a div, with a slight delay export function jumpToBottom(element) { if (!element) return; setTimeout( () => { element.scrollTo({ top: element.scrollHeight, left: 0, behavior: 'auto', }); }, 50, element ); } // convert newlines to
s export function addNewlines(str) { return str.replace(/(?:\r\n|\r|\n)/g, '
'); } export function pluralize(string, count) { if (count === 1) { return string; } else { 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) { hasTouch = navigator.maxTouchPoints > 0; } 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); } } 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; } else { // all other cases return window.matchMedia('(orientation: portrait)').matches ? ORIENTATION_PORTRAIT : ORIENTATION_LANDSCAPE; } } export function generateUsername() { return `User ${Math.floor(Math.random() * 42) + 1}`; } export function padLeft(text, pad, size) { return String(pad.repeat(size) + text).slice(-size); } export function parseSecondsToDurationString(seconds = 0) { const finiteSeconds = Number.isFinite(+seconds) ? Math.abs(seconds) : 0; const days = Math.floor(finiteSeconds / 86400); const daysString = days > 0 ? `${days} day${days > 1 ? 's' : ''} ` : ''; const hours = Math.floor((finiteSeconds / 3600) % 24); const hoursString = hours || days ? padLeft(`${hours}:`, '0', 3) : ''; const mins = Math.floor((finiteSeconds / 60) % 60); const minString = padLeft(`${mins}:`, '0', 3); const secs = Math.floor(finiteSeconds % 60); const secsString = padLeft(`${secs}`, '0', 2); return daysString + hoursString + minString + secsString; } 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); } export function doesObjectSupportFunction(object, functionName) { 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; if (value) { classes.push(key); } return null; }); return classes.join(' '); } // taken from // https://medium.com/@TCAS3/debounce-deep-dive-javascript-es6-e6f8d983b7a1 export function debounce(fn, time) { let timeout; 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); } // "Last live today at [time]" or "last live [date]" export function makeLastOnlineString(timestamp) { if (!timestamp) { return ''; } let string = ''; const time = new Date(timestamp); let diffInDays = getDiffInDaysFromNow(time); if (diffInDays > 1) { string = time.toLocaleDateString(); } else { const atTime = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', }); string = `Today ${atTime}`; } return `Last live: ${string}`; }