LogalDeveloper/owncast
0
Fork 0
Code Activity

App Javascript refactor (#56)

Browse Source 
* objectify app away from window. wip

* fix messaging obj binding; put logo behind video; fix /null issue with temp logo image

* first pass at js refactor

* remove unused files that had been consolidated during refactor

* set up vue before getting config

* add a few comments

* dont use big arrow function, just bind, for safari

* add airplay after instantiating video; check if input exists before disabling it;:

* only set poster on pause during playback, and onEnded; take out sample videoJS tech options

* disable chat after 5mins after going offline

* move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources

* disable chat based on lastdisconnecttime

* fix typo; do offline mode onEnded instead of status offline

* move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden

* fixes'

* don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button

* clean up console logs

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
gingervitis
2020-07-16 12:17:05 -07:00
committed by GitHub
parent 2afde7b3f9
commit 42b0b05d78
10 changed files with 504 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
webroot/js/utils.js
View File

@@ -1,14 +1,10 @@
const LOCAL_TEST = false;
const LOCAL_TEST = window.location.href.indexOf('localhost:') >= 0;
const MESSAGE_OFFLINE = 'Stream is offline.';
const MESSAGE_ONLINE = 'Stream is online.';
const URL_PREFIX = LOCAL_TEST ? 'https://goth.land' : '';
const URL_PREFIX = LOCAL_TEST ? 'http://localhost:8080' : '';
const URL_STATUS = `${URL_PREFIX}/status`;
const URL_STREAM = `${URL_PREFIX}/hls/stream.m3u8`;
const URL_WEBSOCKET = LOCAL_TEST
? 'wss://goth.land/entry'
: `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
@@ -16,18 +12,42 @@ const URL_WEBSOCKET = LOCAL_TEST
const POSTER_DEFAULT = `${URL_PREFIX}/img/logo.png`;
const POSTER_THUMB = `${URL_PREFIX}/thumbnail.jpg`;
const URL_CONFIG = `${URL_PREFIX}/config`;
const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer
// Webscoket setup
const SOCKET_MESSAGE_TYPES = {
CHAT: 'CHAT',
PING: 'PING'
}
// Video setup
const VIDEO_ID = 'video';
const VIDEO_SRC = {
src: URL_STREAM,
type: 'application/x-mpegURL',
};
const VIDEO_OPTIONS = {
autoplay: false,
liveui: true, // try this
sources: [VIDEO_SRC],
};
// local storage keys for chat
const KEY_USERNAME = 'owncast_username';
const KEY_AVATAR = 'owncast_avatar';
const KEY_CHAT_DISPLAYED = 'owncast_chat';
const VIDEO_ID = 'video';
const TIMER_STATUS_UPDATE = 5000; // ms
const TIMER_WEBSOCKET_RECONNECT = 5000; // ms
const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
const URL_OWNCAST = 'https://github.com/gabek/owncast';
const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const MESSAGE_OFFLINE = 'Stream is offline.';
const MESSAGE_ONLINE = 'Stream is online.';
function getLocalStorage(key) {
@@ -121,26 +141,3 @@ function generateUsername() {
return `User ${(Math.floor(Math.random() * 42) + 1)}`;
}
function setVideoPoster(online) {
const player = videojs(VIDEO_ID);
var cachebuster = Math.round(new Date().getTime() / 1000);
const poster = online ? POSTER_THUMB + "?okhi=" + cachebuster : POSTER_DEFAULT;
player.poster(poster);
}
function getExtraUserContent(path) {
fetch(path)
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok ${response.ok}`);
}
return response.text();
})
.then(text => {
const descriptionHTML = new showdown.Converter().makeHtml(text);
app.extraUserContent = descriptionHTML;
})
.catch(error => {
console.log("Error", error);
});
}