owncast/webroot/js/utils/helpers.js

180 lines
4.8 KiB
JavaScript
Raw Normal View History

import { ORIENTATION_LANDSCAPE, ORIENTATION_PORTRAIT } from './constants.js';
export function getLocalStorage(key) {
2020-06-14 10:24:26 +03:00
try {
return localStorage.getItem(key);
2021-06-20 20:49:54 +03:00
} catch (e) {}
2020-06-14 10:24:26 +03:00
return null;
}
export function setLocalStorage(key, value) {
2020-06-14 10:24:26 +03:00
try {
2021-06-20 20:49:54 +03:00
if (value !== '' && value !== null) {
2020-06-14 11:10:26 +03:00
localStorage.setItem(key, value);
} else {
localStorage.removeItem(key);
}
2020-06-14 10:24:26 +03:00
return true;
} catch (e) {}
return false;
}
export function clearLocalStorage(key) {
2020-06-14 11:10:26 +03:00
localStorage.removeItem(key);
}
// jump down to the max height of a div, with a slight delay
export function jumpToBottom(element) {
if (!element) return;
2021-06-20 20:49:54 +03:00
setTimeout(
() => {
element.scrollTo({
top: element.scrollHeight,
left: 0,
behavior: 'auto',
});
},
50,
element
);
2020-06-14 10:24:26 +03:00
}
// convert newlines to <br>s
export function addNewlines(str) {
return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
2020-06-15 07:14:42 +03:00
}
export function pluralize(string, count) {
2020-06-18 20:24:54 +03:00
if (count === 1) {
return string;
} else {
2021-06-20 20:49:54 +03:00
return string + 's';
2020-06-18 20:24:54 +03:00
}
}
2020-06-16 01:45:55 +03:00
// 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() {
2020-08-21 01:29:15 +03:00
let hasTouch = false;
2021-06-20 20:49:54 +03:00
if ('maxTouchPoints' in navigator) {
2020-08-21 01:29:15 +03:00
hasTouch = navigator.maxTouchPoints > 0;
2021-06-20 20:49:54 +03:00
} else if ('msMaxTouchPoints' in navigator) {
2020-08-21 01:29:15 +03:00
hasTouch = navigator.msMaxTouchPoints > 0;
2020-06-16 01:45:55 +03:00
} else {
2021-06-20 20:49:54 +03:00
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);
}
2020-06-16 01:45:55 +03:00
}
2020-08-21 01:29:15 +03:00
return hasTouch;
2020-06-16 01:45:55 +03:00
}
export function getOrientation(forTouch = false) {
// chrome mobile gives misleading matchMedia result when keyboard is up
if (forTouch && window.screen && window.screen.orientation) {
2021-06-20 20:49:54 +03:00
return window.screen.orientation.type.match('portrait')
? ORIENTATION_PORTRAIT
: ORIENTATION_LANDSCAPE;
} else {
// all other cases
2021-06-20 20:49:54 +03:00
return window.matchMedia('(orientation: portrait)').matches
? ORIENTATION_PORTRAIT
: ORIENTATION_LANDSCAPE;
}
}
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`);
}
export function doesObjectSupportFunction(object, functionName) {
2021-06-20 20:49:54 +03:00
return typeof object[functionName] === 'function';
}
// return a string of css classes
export function classNames(json) {
const classes = [];
2021-06-20 20:49:54 +03:00
Object.entries(json).map(function (item) {
const [key, value] = item;
if (value) {
classes.push(key);
}
return null;
});
return classes.join(' ');
}
2020-08-24 13:30:42 +03:00
// taken from
// https://medium.com/@TCAS3/debounce-deep-dive-javascript-es6-e6f8d983b7a1
export function debounce(fn, time) {
let timeout;
2021-06-20 20:49:54 +03:00
return function () {
2020-08-24 13:30:42 +03:00
const functionCall = () => fn.apply(this, arguments);
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
2021-06-20 20:49:54 +03:00
};
2020-08-24 13:30:42 +03:00
}
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);
2021-07-20 04:51:46 +03:00
const comparisonDate = new Date(time).setHours(0, 0, 0, 0);
if (comparisonDate == new Date().setHours(0, 0, 0, 0)) {
2021-06-20 20:49:54 +03:00
const atTime = time.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
});
string = `Today ${atTime}`;
} else {
string = time.toLocaleDateString();
}
return `Last live: ${string}`;
}