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

39
webroot/index.html
View File

@@ -13,20 +13,10 @@
<link href="./styles/layout.css" rel="stylesheet" /> <link href="./styles/layout.css" rel="stylesheet" />
</head> </head>
<script>
/*
GW TODO:
- off line/ video done mode.
- remove listeners on unload?
- accessilbity
*/
</script>
<body class="bg-gray-300 text-gray-800"> <body class="bg-gray-300 text-gray-800">
<div id="app-container" v-cloak class="flex no-chat">
<div id="app-container" class="flex no-chat">
<div id="top-content"> <div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md"> <header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 v-cloak class="flex text-gray-400"> <h1 v-cloak class="flex text-gray-400">
@@ -69,17 +59,18 @@ GW TODO:
</header> </header>
<main> <main v-bind:class="{ online: isOnline }">
<div id="video-container" class="flex owncast-video-container bg-black"> <div
id="video-container"
class="flex owncast-video-container bg-black"
v-bind:style="{ backgroundImage: 'url(' + logoLarge + ')' }"
>
<video <video
class="video-js" class="video-js vjs-big-play-centered"
id="video" id="video"
preload="auto" preload="auto"
controls controls
autoplay
playsinline playsinline
muted
poster="./img/logo.png"
> >
</video> </video>
</div> </div>
@@ -109,7 +100,6 @@ GW TODO:
</div> </div>
<section id="chat-container-wrap" class="flex"> <section id="chat-container-wrap" class="flex">
<div v-if="layout !== 'desktop'" id="user-content-touch"> <div v-if="layout !== 'desktop'" id="user-content-touch">
@@ -172,17 +162,22 @@ GW TODO:
</section> </section>
</div> </div>
<script src="js/status.js"></script>
<script src="js/usercolors.js"></script> <script src="js/usercolors.js"></script>
<script src="js/config.js"></script>
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
<script src="js/message.js"></script> <script src="js/message.js"></script>
<script src="js/social.js"></script> <script src="js/social.js"></script>
<script src="js/components.js"></script> <script src="js/components.js"></script>
<script src="js/player.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/player/airplay.js"></script> <script>
<script src="js/player/player.js"></script> (function () {
const app = new Owncast();
app.init();
})();
</script>
</body> </body>
</html> </html>

309
webroot/js/app.js
View File

@@ -1,98 +1,279 @@
async function setupApp() { class Owncast {
constructor() {
this.player;
this.streamStatus = null;
this.websocket = null;
this.configData;
this.vueApp;
this.messagingInterface = null;
// timers
this.websocketReconnectTimer = null;
this.playerRestartTimer = null;
this.offlineTimer = null;
this.statusTimer = null;
this.disableChatTimer = null;
// misc
this.streamIsOnline = false;
this.lastDisconnectTime = null;
Vue.filter('plural', pluralize); Vue.filter('plural', pluralize);
window.app = new Vue({ // bindings
el: "#app-container", this.vueAppMounted = this.vueAppMounted.bind(this);
this.setConfigData = this.setConfigData.bind(this);
this.setupWebsocket = this.setupWebsocket.bind(this);
this.getStreamStatus = this.getStreamStatus.bind(this);
this.getExtraUserContent = this.getExtraUserContent.bind(this);
this.updateStreamStatus = this.updateStreamStatus.bind(this);
this.handleNetworkingError = this.handleNetworkingError.bind(this);
this.handleOfflineMode = this.handleOfflineMode.bind(this);
this.handleOnlineMode = this.handleOnlineMode.bind(this);
this.handleNetworkingError = this.handleNetworkingError.bind(this);
this.handlePlayerReady = this.handlePlayerReady.bind(this);
this.handlePlayerPlaying = this.handlePlayerPlaying.bind(this);
this.handlePlayerEnded = this.handlePlayerEnded.bind(this);
this.handlePlayerError = this.handlePlayerError.bind(this);
}
init() {
this.messagingInterface = new MessagingInterface();
this.websocket = this.setupWebsocket();
this.vueApp = new Vue({
el: '#app-container',
data: { data: {
isOnline: false,
layout: hasTouchScreen() ? 'touch' : 'desktop',
messages: [],
overallMaxViewerCount: 0,
sessionMaxViewerCount: 0,
streamStatus: MESSAGE_OFFLINE, // Default state. streamStatus: MESSAGE_OFFLINE, // Default state.
viewerCount: 0, viewerCount: 0,
sessionMaxViewerCount: 0,
overallMaxViewerCount: 0,
messages: [],
extraUserContent: "",
isOnline: false,
layout: "desktop",
// from config // from config
logo: null, appVersion: '',
extraUserContent: '',
logo: TEMP_IMAGE,
logoLarge: TEMP_IMAGE,
socialHandles: [], socialHandles: [],
streamerName: "", streamerName: '',
summary: "", summary: '',
tags: [], tags: [],
title: "", title: '',
appVersion: "",
}, },
watch: { watch: {
messages: { messages: {
deep: true, deep: true,
handler: function (newMessages, oldMessages) { handler: this.messagingInterface.onReceivedMessages,
if (newMessages.length !== oldMessages.length) {
// jump to bottom
jumpToBottom(appMessaging.scrollableMessagesContainer);
}
},
}, },
}, },
mounted: this.vueAppMounted,
}); });
}
// do all these things after Vue.js has mounted, else we'll get weird DOM issues.
vueAppMounted() {
this.getConfig();
this.messagingInterface.init();
this.player = new OwncastPlayer();
this.player.setupPlayerCallbacks({
onReady: this.handlePlayerReady,
onPlaying: this.handlePlayerPlaying,
onEnded: this.handlePlayerEnded,
onError: this.handlePlayerError,
});
this.player.init();
};
// init messaging interactions setConfigData(data) {
var appMessaging = new Messaging(); this.vueApp.appVersion = data.version;
appMessaging.init(); this.vueApp.logo = data.logo.small;
this.vueApp.logoLarge = data.logo.large;
this.vueApp.socialHandles = data.socialHandles;
this.vueApp.streamerName = data.name;
this.vueApp.summary = data.summary && addNewlines(data.summary);
this.vueApp.tags = data.tags;
this.vueApp.title = data.title;
const config = await new Config().init(); window.document.title = data.title;
app.logo = config.logo.small;
app.socialHandles = config.socialHandles;
app.streamerName = config.name;
app.summary = config.summary && addNewlines(config.summary);
app.tags = config.tags;
app.appVersion = config.version;
app.title = config.title;
window.document.title = config.title;
getExtraUserContent(`${URL_PREFIX}${config.extraUserInfoFileName}`); this.getExtraUserContent(`${URL_PREFIX}${data.extraUserInfoFileName}`);
this.configData = data;
} }
var websocketReconnectTimer; // websocket for messaging
function setupWebsocket() { setupWebsocket() {
clearTimeout(websocketReconnectTimer);
var ws = new WebSocket(URL_WEBSOCKET); var ws = new WebSocket(URL_WEBSOCKET);
ws.onopen = (e) => {
ws.onmessage = (e) => { if (this.websocketReconnectTimer) {
const model = JSON.parse(e.data); clearTimeout(this.websocketReconnectTimer);
// Ignore non-chat messages (such as keepalive PINGs)
if (model.type !== SOCKET_MESSAGE_TYPES.CHAT) { return; }
const message = new Message(model);
const existing = this.app.messages.filter(function (item) {
return item.id === message.id;
})
if (existing.length === 0 || !existing) {
this.app.messages = [...this.app.messages, message];
} }
} };
ws.onclose = (e) => { ws.onclose = (e) => {
// connection closed, discard old websocket and create a new one in 5s // connection closed, discard old websocket and create a new one in 5s
ws = null; this.websocket = null;
console.log("Websocket closed.") this.messagingInterface.disableChat();
websocketReconnectTimer = setTimeout(setupWebsocket, 5000); this.handleNetworkingError('Websocket closed.');
} this.websocketReconnectTimer = setTimeout(this.setupWebsocket, TIMER_WEBSOCKET_RECONNECT);
};
// On ws error just close the socket and let it re-connect again for now. // On ws error just close the socket and let it re-connect again for now.
ws.onerror = (e) => { ws.onerror = e => {
console.log("Websocket error: ", e); this.handleNetworkingError(`Stream status: ${e}`);
ws.close(); ws.close();
};
ws.onmessage = (e) => {
const model = JSON.parse(e.data);
// Ignore non-chat messages (such as keepalive PINGs)
if (model.type !== SOCKET_MESSAGE_TYPES.CHAT) {
return;
}
const message = new Message(model);
const existing = this.vueApp.messages.filter(function (item) {
return item.id === message.id;
})
if (existing.length === 0 || !existing) {
this.vueApp.messages = [...this.vueApp.messages, message];
}
};
this.websocket = ws;
this.messagingInterface.setWebsocket(this.websocket);
};
// 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}`);
});
} }
window.ws = ws; // 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 => {
this.handleOfflineMode();
this.handleNetworkingError(`Stream status: ${error}`);
});
};
// fetch content.md
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);
this.vueApp.extraUserContent = descriptionHTML;
})
.catch(error => {
this.handleNetworkingError(`Fetch extra content: ${error}`);
});
};
// handle UI things from stream status result
updateStreamStatus(status) {
// update UI
this.vueApp.streamStatus = status.online ? MESSAGE_ONLINE : MESSAGE_OFFLINE;
this.vueApp.viewerCount = status.viewerCount;
this.vueApp.sessionMaxViewerCount = status.sessionMaxViewerCount;
this.vueApp.overallMaxViewerCount = status.overallMaxViewerCount;
this.lastDisconnectTime = status.lastDisconnectTime;
if (status.online && !this.streamIsOnline) {
// stream has just come online.
this.handleOnlineMode();
} else if (!status.online && !this.streamStatus) {
// stream has just gone offline.
// display offline mode the first time we get status, and it's offline.
this.handleOfflineMode();
} }
setupApp(); if (status.online) {
// only do this if video is paused, so no unnecessary img fetches
if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) {
this.player.setPoster();
}
}
setupWebsocket(); this.streamStatus = status;
};
handleNetworkingError(error) {
console.log(`>>> App Error: ${error}`)
};
// basically hide video and show underlying "poster"
handleOfflineMode() {
this.streamIsOnline = false;
this.vueApp.isOnline = false;
this.vueApp.streamStatus = MESSAGE_OFFLINE;
if (this.lastDisconnectTime) {
const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.lastDisconnectTime));
const countdown = (remainingChatTime < 0) ? 0 : remainingChatTime;
this.disableChatTimer = setTimeout(this.messagingInterface.disableChat, countdown);
}
};
// play video!
handleOnlineMode() {
this.streamIsOnline = true;
this.vueApp.isOnline = true;
this.vueApp.streamStatus = MESSAGE_ONLINE;
this.player.startPlayer();
clearTimeout(this.disableChatTimer);
this.disableChatTimer = null;
this.messagingInterface.enableChat();
}
// when videojs player is ready, start polling for stream
handlePlayerReady() {
this.getStreamStatus();
this.statusTimer = setInterval(this.getStreamStatus, TIMER_STATUS_UPDATE);
};
handlePlayerPlaying() {
// do something?
};
handlePlayerEnded() {
// do something?
this.handleOfflineMode();
};
handlePlayerError() {
// do something?
this.handleOfflineMode();
// stop timers?
};
};

16
webroot/js/config.js
View File

@@ -1,16 +0,0 @@
// add more to the promises later.
class Config {
async init() {
const configFileLocation = "/config";
try {
const response = await fetch(configFileLocation);
const configData = await response.json();
Object.assign(this, configData);
return this;
} catch(error) {
console.log(error);
// No config file present. That's ok. It's not required.
}
}
}

99
webroot/js/message.js
View File

@@ -25,36 +25,42 @@ class Message {
class Messaging { class MessagingInterface {
constructor() { constructor() {
this.websocket = null;
this.chatDisplayed = false; this.chatDisplayed = false;
this.username = ''; this.username = '';
this.messageCharCount = 0; this.messageCharCount = 0;
this.maxMessageLength = 500; this.maxMessageLength = 500;
this.maxMessageBuffer = 20; this.maxMessageBuffer = 20;
this.tagAppContainer = document.querySelector('#app-container'); this.onReceivedMessages = this.onReceivedMessages.bind(this);
this.tagChatToggle = document.querySelector('#chat-toggle'); this.disableChat = this.disableChat.bind(this);
this.tagUserInfoChanger = document.querySelector('#user-info-change'); this.enableChat = this.enableChat.bind(this);
this.tagUsernameDisplay = document.querySelector('#username-display');
this.tagMessageFormWarning = document.querySelector('#message-form-warning');
this.inputMessageAuthor = document.querySelector('#self-message-author');
this.inputChangeUserName = document.querySelector('#username-change-input');
this.btnUpdateUserName = document.querySelector('#button-update-username');
this.btnCancelUpdateUsername = document.querySelector('#button-cancel-change');
this.btnSubmitMessage = document.querySelector('#button-submit-message');
this.formMessageInput = document.querySelector('#message-body-form');
this.imgUsernameAvatar = document.querySelector('#username-avatar');
this.textUserInfoDisplay = document.querySelector('#user-info-display');
this.scrollableMessagesContainer = document.querySelector('#messages-container');
} }
init() { init() {
this.tagAppContainer = document.getElementById('app-container');
this.tagChatToggle = document.getElementById('chat-toggle');
this.tagUserInfoChanger = document.getElementById('user-info-change');
this.tagUsernameDisplay = document.getElementById('username-display');
this.tagMessageFormWarning = document.getElementById('message-form-warning');
this.inputMessageAuthor = document.getElementById('self-message-author');
this.inputChangeUserName = document.getElementById('username-change-input');
this.btnUpdateUserName = document.getElementById('button-update-username');
this.btnCancelUpdateUsername = document.getElementById('button-cancel-change');
this.btnSubmitMessage = document.getElementById('button-submit-message');
this.formMessageInput = document.getElementById('message-body-form');
this.imgUsernameAvatar = document.getElementById('username-avatar');
this.textUserInfoDisplay = document.getElementById('user-info-display');
this.scrollableMessagesContainer = document.getElementById('messages-container');
// add events
this.tagChatToggle.addEventListener('click', this.handleChatToggle.bind(this)); this.tagChatToggle.addEventListener('click', this.handleChatToggle.bind(this));
this.textUserInfoDisplay.addEventListener('click', this.handleShowChangeNameForm.bind(this)); this.textUserInfoDisplay.addEventListener('click', this.handleShowChangeNameForm.bind(this));
@@ -64,21 +70,23 @@ class Messaging {
this.inputChangeUserName.addEventListener('keydown', this.handleUsernameKeydown.bind(this)); this.inputChangeUserName.addEventListener('keydown', this.handleUsernameKeydown.bind(this));
this.formMessageInput.addEventListener('keydown', this.handleMessageInputKeydown.bind(this)); this.formMessageInput.addEventListener('keydown', this.handleMessageInputKeydown.bind(this));
this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this)); this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this));
this.initLocalStates(); this.initLocalStates();
if (hasTouchScreen()) { if (hasTouchScreen()) {
this.scrollableMessagesContainer = document.body; this.scrollableMessagesContainer = document.body;
this.tagAppContainer.classList.add('touch-screen'); this.tagAppContainer.classList.add('touch-screen');
window.app.layout = 'touch';
window.onorientationchange = this.handleOrientationChange.bind(this); window.onorientationchange = this.handleOrientationChange.bind(this);
this.handleOrientationChange(); this.handleOrientationChange();
} else { } else {
this.tagAppContainer.classList.add('desktop'); this.tagAppContainer.classList.add('desktop');
window.app.layout = 'desktop';
} }
} }
setWebsocket(socket) {
this.websocket = socket;
}
initLocalStates() { initLocalStates() {
this.username = getLocalStorage(KEY_USERNAME) || generateUsername(); this.username = getLocalStorage(KEY_USERNAME) || generateUsername();
this.imgUsernameAvatar.src = this.imgUsernameAvatar.src =
@@ -88,11 +96,13 @@ class Messaging {
this.chatDisplayed = getLocalStorage(KEY_CHAT_DISPLAYED) || false; this.chatDisplayed = getLocalStorage(KEY_CHAT_DISPLAYED) || false;
this.displayChat(); this.displayChat();
} }
updateUsernameFields(username) { updateUsernameFields(username) {
this.tagUsernameDisplay.innerText = username; this.tagUsernameDisplay.innerText = username;
this.inputChangeUserName.value = username; this.inputChangeUserName.value = username;
this.inputMessageAuthor.value = username; this.inputMessageAuthor.value = username;
} }
displayChat() { displayChat() {
if (this.chatDisplayed) { if (this.chatDisplayed) {
this.tagAppContainer.classList.add('chat'); this.tagAppContainer.classList.add('chat');
@@ -106,14 +116,15 @@ class Messaging {
handleOrientationChange() { handleOrientationChange() {
var isPortrait = Math.abs(window.orientation % 180) === 0; var isPortrait = Math.abs(window.orientation % 180) === 0;
if(!isPortrait) { if(!isPortrait) {
if (document.body.clientWidth < 1024) { if (document.body.clientWidth < 1024) {
this.tagAppContainer.classList.add('no-chat'); this.tagAppContainer.classList.add('no-chat');
this.tagAppContainer.classList.add('landscape'); this.tagAppContainer.classList.add('landscape');
} }
} else { } else {
if (this.chatDisplayed) this.tagAppContainer.classList.remove('no-chat'); if (this.chatDisplayed) {
this.tagAppContainer.classList.remove('no-chat');
}
this.tagAppContainer.classList.remove('landscape'); this.tagAppContainer.classList.remove('landscape');
} }
} }
@@ -127,6 +138,7 @@ class Messaging {
} }
this.displayChat(); this.displayChat();
} }
handleShowChangeNameForm() { handleShowChangeNameForm() {
this.textUserInfoDisplay.style.display = 'none'; this.textUserInfoDisplay.style.display = 'none';
this.tagUserInfoChanger.style.display = 'flex'; this.tagUserInfoChanger.style.display = 'flex';
@@ -134,14 +146,15 @@ class Messaging {
this.tagChatToggle.style.display = 'none'; this.tagChatToggle.style.display = 'none';
} }
} }
handleHideChangeNameForm() { handleHideChangeNameForm() {
this.textUserInfoDisplay.style.display = 'flex'; this.textUserInfoDisplay.style.display = 'flex';
this.tagUserInfoChanger.style.display = 'none'; this.tagUserInfoChanger.style.display = 'none';
if (document.body.clientWidth < 640) { if (document.body.clientWidth < 640) {
this.tagChatToggle.style.display = 'inline-block'; this.tagChatToggle.style.display = 'inline-block';
}
}
}
}
handleUpdateUsername() { handleUpdateUsername() {
var newValue = this.inputChangeUserName.value; var newValue = this.inputChangeUserName.value;
newValue = newValue.trim(); newValue = newValue.trim();
@@ -194,6 +207,7 @@ class Messaging {
this.tagMessageFormWarning.innerText = ''; this.tagMessageFormWarning.innerText = '';
} }
} }
handleSubmitChatButton(event) { handleSubmitChatButton(event) {
var value = this.formMessageInput.value.trim(); var value = this.formMessageInput.value.trim();
if (value) { if (value) {
@@ -204,6 +218,7 @@ class Messaging {
event.preventDefault(); event.preventDefault();
return false; return false;
} }
submitChat(content) { submitChat(content) {
if (!content) { if (!content) {
return; return;
@@ -214,12 +229,36 @@ class Messaging {
image: this.imgUsernameAvatar.src, image: this.imgUsernameAvatar.src,
}); });
const messageJSON = JSON.stringify(message); const messageJSON = JSON.stringify(message);
if (window && window.ws) { if (this.websocket) {
window.ws.send(messageJSON); try {
this.websocket.send(messageJSON);
} catch(e) {
console.log('Message send error:', e);
return;
}
} }
// clear out things. // clear out things.
this.formMessageInput.value = ''; this.formMessageInput.value = '';
this.tagMessageFormWarning.innerText = ''; this.tagMessageFormWarning.innerText = '';
} }
disableChat() {
if (this.formMessageInput) {
this.formMessageInput.disabled = true;
}
// also show "disabled" text/message somewhere.
}
enableChat() {
if (this.formMessageInput) {
this.formMessageInput.disabled = false;
}
}
// handle Vue.js message display
onReceivedMessages(newMessages, oldMessages) {
if (newMessages.length !== oldMessages.length) {
// jump to bottom
jumpToBottom(this.scrollableMessagesContainer);
}
}
} }

115
webroot/js/player.js Normal file
View File

@@ -0,0 +1,115 @@
// https://docs.videojs.com/player
class OwncastPlayer {
constructor() {
window.VIDEOJS_NO_DYNAMIC_STYLE = true; // style override
this.vjsPlayer = null;
this.appPlayerReadyCallback = null;
this.appPlayerPlayingCallback = null;
this.appPlayerEndedCallback = null;
// bind all the things because safari
this.startPlayer = this.startPlayer.bind(this);
this.handleReady = this.handleReady.bind(this);
this.handlePlaying = this.handlePlaying.bind(this);
this.handleEnded = this.handleEnded.bind(this);
this.handleError = this.handleError.bind(this);
}
init() {
this.vjsPlayer = videojs(VIDEO_ID, VIDEO_OPTIONS);
this.addAirplay();
this.vjsPlayer.ready(this.handleReady);
}
setupPlayerCallbacks(callbacks) {
const { onReady, onPlaying, onEnded, onError } = callbacks;
this.appPlayerReadyCallback = onReady;
this.appPlayerPlayingCallback = onPlaying;
this.appPlayerEndedCallback = onEnded;
this.appPlayerErrorCallback = onError;
}
// play
startPlayer() {
this.log('Start playing');
this.vjsPlayer.src(VIDEO_SRC);
// this.vjsPlayer.play();
};
handleReady() {
this.log('on Ready');
this.vjsPlayer.on('error', this.handleError);
this.vjsPlayer.on('playing', this.handlePlaying);
this.vjsPlayer.on('ended', this.handleEnded);
if (this.appPlayerReadyCallback) {
// start polling
this.appPlayerReadyCallback();
}
}
handlePlaying() {
this.log('on Playing');
if (this.appPlayerPlayingCallback) {
// start polling
this.appPlayerPlayingCallback();
}
}
handleEnded() {
this.log('on Ended');
if (this.appPlayerEndedCallback) {
this.appPlayerEndedCallback();
}
this.setPoster();
}
handleError(e) {
this.log(`on Error: ${JSON.stringify(e)}`);
if (this.appPlayerEndedCallback) {
this.appPlayerEndedCallback();
}
}
setPoster() {
const cachebuster = Math.round(new Date().getTime() / 1000);
const poster = POSTER_THUMB + "?okhi=" + cachebuster;
this.vjsPlayer.poster(poster);
}
log(message) {
console.log(`>>> Player: ${message}`);
}
addAirplay() {
videojs.hookOnce('setup', function (player) {
if (window.WebKitPlaybackTargetAvailabilityEvent) {
var videoJsButtonClass = videojs.getComponent('Button');
var concreteButtonClass = videojs.extend(videoJsButtonClass, {
// The `init()` method will also work for constructor logic here, but it is
// deprecated. If you provide an `init()` method, it will override the
// `constructor()` method!
constructor: function () {
videoJsButtonClass.call(this, player);
}, // notice the comma
handleClick: function () {
const videoElement = document.getElementsByTagName('video')[0];
videoElement.webkitShowPlaybackTargetPicker();
}
});
var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass());
concreteButtonInstance.addClass("vjs-airplay");
}
});
}
}

23
webroot/js/player/airplay.js
View File

@@ -1,23 +0,0 @@
videojs.hookOnce('setup', function (player) {
if (window.WebKitPlaybackTargetAvailabilityEvent) {
var videoJsButtonClass = videojs.getComponent('Button');
var concreteButtonClass = videojs.extend(videoJsButtonClass, {
// The `init()` method will also work for constructor logic here, but it is
// deprecated. If you provide an `init()` method, it will override the
// `constructor()` method!
constructor: function () {
videoJsButtonClass.call(this, player);
}, // notice the comma
handleClick: function () {
const videoElement = document.getElementsByTagName('video')[0];
videoElement.webkitShowPlaybackTargetPicker();
}
});
var concreteButtonInstance = player.controlBar.addChild(new concreteButtonClass());
concreteButtonInstance.addClass("vjs-airplay");
}
});

75
webroot/js/player/player.js
View File

@@ -1,75 +0,0 @@
// const streamURL = '/hls/stream.m3u8';
const streamURL = '/hls/stream.m3u8'; // Uncomment me to point to remote video
// style hackings
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
// Create the player for the first time
const player = videojs(VIDEO_ID, null, function () {
getStatus();
setInterval(getStatus, 5000);
setupPlayerEventHandlers();
})
player.ready(function () {
console.log('Player ready.')
resetPlayer(player);
});
function resetPlayer(player) {
player.reset();
player.src({ type: 'application/x-mpegURL', src: URL_STREAM });
setVideoPoster(app.isOnline);
}
function setupPlayerEventHandlers() {
const player = videojs(VIDEO_ID);
player.on('error', function (e) {
console.log("Player error: ", e);
})
// player.on('loadeddata', function (e) {
// console.log("loadeddata");
// })
player.on('ended', function (e) {
console.log("ended");
resetPlayer(player);
})
//
// player.on('abort', function (e) {
// console.log("abort");
// })
//
// player.on('durationchange', function (e) {
// console.log("durationchange");
// })
//
// player.on('stalled', function (e) {
// console.log("stalled");
// })
//
player.on('playing', function (e) {
if (playerRestartTimer) {
clearTimeout(playerRestartTimer);
}
})
//
// player.on('waiting', function (e) {
// // console.log("waiting");
// })
}
function restartPlayer() {
try {
const player = videojs(VIDEO_ID);
player.pause();
player.src(player.src()); // Reload the same video
player.load();
player.play();
} catch (e) {
console.log(e)
}
}

44
webroot/js/status.js
View File

@@ -1,44 +0,0 @@
var playerRestartTimer;
function handleStatus(status) {
clearTimeout(playerRestartTimer);
if (!app.isOnline && status.online) {
// The stream was offline, but now it's online. Force start of playback after an arbitrary delay to make sure the stream has actual data ready to go.
playerRestartTimer = setTimeout(restartPlayer, 3000);
}
app.streamStatus = status.online ? MESSAGE_ONLINE : MESSAGE_OFFLINE;
app.viewerCount = status.viewerCount;
app.sessionMaxViewerCount = status.sessionMaxViewerCount;
app.overallMaxViewerCount = status.overallMaxViewerCount;
app.isOnline = status.online;
// setVideoPoster(app.isOnline);
}
function handleOffline() {
const player = videojs(VIDEO_ID);
player.poster(POSTER_DEFAULT);
app.streamStatus = MESSAGE_OFFLINE;
app.viewerCount = 0;
}
function getStatus() {
const options = {
// mode: 'no-cors',
}
fetch(URL_STATUS, options)
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok ${response.ok}`);
}
return response.json();
})
.then(json => {
handleStatus(json);
})
.catch(error => {
handleOffline();
});
}

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 URL_PREFIX = LOCAL_TEST ? 'http://localhost:8080' : '';
const MESSAGE_ONLINE = 'Stream is online.';
const URL_PREFIX = LOCAL_TEST ? 'https://goth.land' : '';
const URL_STATUS = `${URL_PREFIX}/status`; const URL_STATUS = `${URL_PREFIX}/status`;
const URL_STREAM = `${URL_PREFIX}/hls/stream.m3u8`; const URL_STREAM = `${URL_PREFIX}/hls/stream.m3u8`;
const URL_WEBSOCKET = LOCAL_TEST const URL_WEBSOCKET = LOCAL_TEST
? 'wss://goth.land/entry' ? 'wss://goth.land/entry'
: `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/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_DEFAULT = `${URL_PREFIX}/img/logo.png`;
const POSTER_THUMB = `${URL_PREFIX}/thumbnail.jpg`; 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 = { const SOCKET_MESSAGE_TYPES = {
CHAT: 'CHAT', CHAT: 'CHAT',
PING: 'PING' 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_USERNAME = 'owncast_username';
const KEY_AVATAR = 'owncast_avatar'; const KEY_AVATAR = 'owncast_avatar';
const KEY_CHAT_DISPLAYED = 'owncast_chat'; 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) { function getLocalStorage(key) {
@@ -121,26 +141,3 @@ function generateUsername() {
return `User ${(Math.floor(Math.random() * 42) + 1)}`; 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);
});
}

25
webroot/styles/layout.css
View File

@@ -243,8 +243,8 @@ h2 {
} }
#username-avatar { #username-avatar {
height: 1.75em; height: 2.1em;
width: 1.75em; width: 2.1em;
margin-right: .5em; margin-right: .5em;
} }
#username-display { #username-display {
@@ -290,6 +290,10 @@ h2 {
height: calc(var(--video-container-height)); height: calc(var(--video-container-height));
width: 100%; width: 100%;
margin-top: var(--header-height); margin-top: var(--header-height);
background-position: center center;
background-repeat: no-repeat;
background-size: 30%;
} }
.owncast-video-container { .owncast-video-container {
@@ -310,18 +314,19 @@ h2 {
min-height: 100% min-height: 100%
} }
.video-js .vjs-big-play-button {
left: 50%;
top: 50%;
margin-left: -1.5em;
margin-top: -0.75em;
}
.vjs-airplay .vjs-icon-placeholder::before { .vjs-airplay .vjs-icon-placeholder::before {
/* content: 'AP'; */ /* content: 'AP'; */
content: url("../img/airplay.png"); content: url("../img/airplay.png");
} }
#video {
transition: opacity .5s;
opacity: 0;
}
.online #video {
opacity: 1;
}
/* ************************************************8 */ /* ************************************************8 */
@@ -360,6 +365,7 @@ h2 {
justify-content: flex-end; justify-content: flex-end;
} }
#messages-container { #messages-container {
overflow: auto; overflow: auto;
padding: 1em 0; padding: 1em 0;
@@ -378,6 +384,9 @@ h2 {
#message-body-form { #message-body-form {
font-size: 1em; font-size: 1em;
} }
#message-body-form:disabled{
opacity: .5;
}
#message-form-actions { #message-form-actions {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;