pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

App Javascript refactor (#56) 

* 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>
pull/68/head
gingervitis 5 years ago committed by GitHub
parent
2afde7b3f9
commit
42b0b05d78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 502 additions and 324 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      webroot/index.html
  2. 339
      webroot/js/app.js
  3. 16
      webroot/js/config.js
  4. 91
      webroot/js/message.js
  5. 115
      webroot/js/player.js
  6. 23
      webroot/js/player/airplay.js
  7. 75
      webroot/js/player/player.js
  8. 44
      webroot/js/status.js
  9. 59
      webroot/js/utils.js
  10. 25
      webroot/styles/layout.css

39
webroot/index.html
Unescape 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>

339
webroot/js/app.js
Unescape View File

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

16
webroot/js/config.js
Unescape 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.
}
}
}

91
webroot/js/message.js
Unescape 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'); init() {
this.inputChangeUserName = document.querySelector('#username-change-input'); 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.btnUpdateUserName = document.querySelector('#button-update-username'); this.inputMessageAuthor = document.getElementById('self-message-author');
this.btnCancelUpdateUsername = document.querySelector('#button-cancel-change'); this.inputChangeUserName = document.getElementById('username-change-input');
this.btnSubmitMessage = document.querySelector('#button-submit-message');
this.formMessageInput = document.querySelector('#message-body-form'); this.btnUpdateUserName = document.getElementById('button-update-username');
this.btnCancelUpdateUsername = document.getElementById('button-cancel-change');
this.btnSubmitMessage = document.getElementById('button-submit-message');
this.imgUsernameAvatar = document.querySelector('#username-avatar'); this.formMessageInput = document.getElementById('message-body-form');
this.textUserInfoDisplay = document.querySelector('#user-info-display');
this.scrollableMessagesContainer = document.querySelector('#messages-container'); this.imgUsernameAvatar = document.getElementById('username-avatar');
} this.textUserInfoDisplay = document.getElementById('user-info-display');
init() {
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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const URL_OWNCAST = 'https://github.com/gabek/owncast'; 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
Unescape 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;

Write Preview
Loading…
Cancel
Save