From 6cb73b7aecc5d2cd69bc5865f52a2ca46947ccb5 Mon Sep 17 00:00:00 2001 From: gabek Date: Fri, 21 May 2021 03:29:32 +0000 Subject: [PATCH] Prettified Code! --- webroot/js/app-video-only.js | 125 +++++++++++++++++----------------- webroot/js/utils/constants.js | 20 +++--- 2 files changed, 70 insertions(+), 75 deletions(-) diff --git a/webroot/js/app-video-only.js b/webroot/js/app-video-only.js index 97545d3fe..2e85a477b 100644 --- a/webroot/js/app-video-only.js +++ b/webroot/js/app-video-only.js @@ -12,10 +12,7 @@ import { OwncastPlayer } from './components/player.js'; import Websocket from './utils/websocket.js'; const websocket = new Websocket(); -import { - addNewlines, - pluralize, -} from './utils/helpers.js'; +import { addNewlines, pluralize } from './utils/helpers.js'; import { URL_CONFIG, URL_STATUS, @@ -35,7 +32,7 @@ export default class VideoOnly extends Component { configData: {}, playerActive: false, // player object is active - streamOnline: false, // stream is active/online + streamOnline: false, // stream is active/online isPlaying: false, @@ -88,42 +85,42 @@ export default class VideoOnly extends Component { // fetch /config data getConfig() { fetch(URL_CONFIG) - .then(response => { - if (!response.ok) { - throw new Error(`Network response was not ok ${response.ok}`); - } - return response.json(); - }) - .then(json => { - this.setConfigData(json); - }) - .catch(error => { - this.handleNetworkingError(`Fetch config: ${error}`); - }); - } - - // fetch stream status - getStreamStatus() { - fetch(URL_STATUS) - .then(response => { + .then((response) => { if (!response.ok) { throw new Error(`Network response was not ok ${response.ok}`); } return response.json(); }) - .then(json => { + .then((json) => { + this.setConfigData(json); + }) + .catch((error) => { + this.handleNetworkingError(`Fetch config: ${error}`); + }); + } + + // fetch stream status + getStreamStatus() { + fetch(URL_STATUS) + .then((response) => { + if (!response.ok) { + throw new Error(`Network response was not ok ${response.ok}`); + } + return response.json(); + }) + .then((json) => { this.updateStreamStatus(json); }) - .catch(error => { + .catch((error) => { this.handleOfflineMode(); this.handleNetworkingError(`Stream status: ${error}`); }); - // Ping the API to let them know we're an active viewer - fetch(URL_VIEWER_PING).catch((error) => { - this.handleOfflineMode(); - this.handleNetworkingError(`Viewer PING error: ${error}`); - }); + // Ping the API to let them know we're an active viewer + fetch(URL_VIEWER_PING).catch((error) => { + this.handleOfflineMode(); + this.handleNetworkingError(`Viewer PING error: ${error}`); + }); } setConfigData(data = {}) { @@ -144,10 +141,7 @@ export default class VideoOnly extends Component { if (!status) { return; } - const { - viewerCount, - online, - } = status; + const { viewerCount, online } = status; this.lastDisconnectTime = status.lastDisconnectTime; @@ -204,8 +198,10 @@ export default class VideoOnly extends Component { handleOnlineMode() { this.player.startPlayer(); - this.streamDurationTimer = - setInterval(this.setCurrentStreamDuration, TIMER_STREAM_DURATION_COUNTER); + this.streamDurationTimer = setInterval( + this.setCurrentStreamDuration, + TIMER_STREAM_DURATION_COUNTER + ); this.setState({ playerActive: true, @@ -233,35 +229,36 @@ export default class VideoOnly extends Component { const mainClass = playerActive ? 'online' : ''; - const poster = isPlaying ? null : html` - <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> - `; - return ( - html` -
-
- - ${poster} -
+ const poster = isPlaying + ? null + : html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `; + return html` +
+
+ + ${poster} +
-
+ ${streamStatusMessage} + ${viewerCount} ${pluralize('viewer', viewerCount)}. - ${streamStatusMessage} - ${viewerCount} ${pluralize('viewer', viewerCount)}. -
-
- `); + +
+ `; } } diff --git a/webroot/js/utils/constants.js b/webroot/js/utils/constants.js index 03bb2ea66..89441aa2b 100644 --- a/webroot/js/utils/constants.js +++ b/webroot/js/utils/constants.js @@ -8,12 +8,15 @@ export const URL_VIEWER_PING = `/api/ping`; // TODO: This directory is customizable in the config. So we should expose this via the config API. export const URL_STREAM = `/hls/stream.m3u8`; -export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`; +export const URL_WEBSOCKET = `${ + location.protocol === 'https:' ? 'wss' : 'ws' +}://${location.host}/entry`; export const TIMER_STATUS_UPDATE = 5000; // ms export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins export const TIMER_STREAM_DURATION_COUNTER = 1000; -export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; +export const TEMP_IMAGE = + 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; export const OWNCAST_LOGO_LOCAL = '/img/logo.svg'; @@ -23,12 +26,12 @@ export const MESSAGE_ONLINE = 'Stream is online.'; export const URL_OWNCAST = 'https://owncast.online'; // used in footer export const PLAYER_VOLUME = 'owncast_volume'; - export const KEY_USERNAME = 'owncast_username'; -export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set' +export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set'; export const KEY_CHAT_DISPLAYED = 'owncast_chat'; export const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent'; -export const CHAT_INITIAL_PLACEHOLDER_TEXT = 'Type here to chat, no account necessary.'; +export const CHAT_INITIAL_PLACEHOLDER_TEXT = + 'Type here to chat, no account necessary.'; export const CHAT_PLACEHOLDER_TEXT = 'Message'; export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.'; export const CHAT_MAX_MESSAGE_LENGTH = 500; @@ -44,12 +47,7 @@ export const CHAT_OK_KEYCODES = [ 'Delete', 'Backspace', ]; -export const CHAT_KEY_MODIFIERS = [ - 'Control', - 'Shift', - 'Meta', - 'Alt', -]; +export const CHAT_KEY_MODIFIERS = ['Control', 'Shift', 'Meta', 'Alt']; export const MESSAGE_JUMPTOBOTTOM_BUFFER = 300; // app styling