LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Prettified Code!

Browse Source
This commit is contained in:
gabek 2021-05-21 03:29:32 +00:00 committed by GitHub Action
parent 91f6dcd0f6
commit 6cb73b7aec
2 changed files with 70 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
webroot/js/app-video-only.js
View File

@ -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`
<main class=${mainClass}>
<div
id="video-container"
class="flex owncast-video-container bg-black w-full bg-center bg-no-repeat flex flex-col items-center justify-start"
>
<video
class="video-js vjs-big-play-centered display-block w-full h-full"
id="video"
preload="auto"
controls
playsinline
></video>
${poster}
</div>
const poster = isPlaying
? null
: html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;
return html`
<main class=${mainClass}>
<div
id="video-container"
class="flex owncast-video-container bg-black w-full bg-center bg-no-repeat flex flex-col items-center justify-start"
>
<video
class="video-js vjs-big-play-centered display-block w-full h-full"
id="video"
preload="auto"
controls
playsinline
></video>
${poster}
</div>
<section
id="stream-info"
aria-label="Stream status"
class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"
<section
id="stream-info"
aria-label="Stream status"
class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"
>
<span>${streamStatusMessage}</span>
<span id="stream-viewer-count"
>${viewerCount} ${pluralize('viewer', viewerCount)}.</span
>
<span>${streamStatusMessage}</span>
<span id="stream-viewer-count">${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
</section>
</main>
`);
</section>
</main>
`;
}
}

20
webroot/js/utils/constants.js
View File

@ -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