mirror of
https://github.com/owncast/owncast.git
synced 2024-11-29 03:29:03 +03:00
Prettified Code!
This commit is contained in:
gabek
GitHub Action
parent
c45e43c378
commit
b19fa76cd0
3 changed files with 67 additions and 51 deletions
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <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)");
|
||||
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}`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue