mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 05:25:58 +03:00
update offline flow an stream status timer flow
This commit is contained in:
Ginger Wong
parent
a3613612eb
commit
3f594abac8
3 changed files with 55 additions and 57 deletions
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
</header>
|
||||
|
||||
<main v-bind:class="{ online: isOnline }">
|
||||
<main v-bind:class="{ online: playerOn }">
|
||||
<div
|
||||
id="video-container"
|
||||
class="flex owncast-video-container bg-black"
|
||||
|
|
@ -101,24 +101,9 @@
|
|||
</div>
|
||||
|
||||
<section id="chat-container-wrap" class="flex">
|
||||
|
||||
<!-- <div v-if="layout !== 'desktop'" id="user-content-touch">
|
||||
<user-details
|
||||
v-bind:logo="logo"
|
||||
v-bind:platforms="socialHandles"
|
||||
v-bind:summary="summary"
|
||||
v-bind:tags="tags"
|
||||
>{{streamerName}}</user-details>
|
||||
|
||||
<div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div>
|
||||
|
||||
<owncast-footer v-bind:app-version="appVersion"></owncast-footer>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div id="chat-container" class="bg-gray-800">
|
||||
<div id="messages-container">
|
||||
<div v-for="message in messages">
|
||||
<div v-for="message in messages" v-cloak>
|
||||
<div class="message flex">
|
||||
<img
|
||||
v-bind:src="message.image"
|
||||
|
|
@ -153,14 +138,9 @@
|
|||
> Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
class Owncast {
|
||||
constructor() {
|
||||
this.player;
|
||||
this.streamStatus = null;
|
||||
|
||||
this.websocket = null;
|
||||
this.configData;
|
||||
|
|
@ -14,10 +13,10 @@ class Owncast {
|
|||
this.offlineTimer = null;
|
||||
this.statusTimer = null;
|
||||
this.disableChatTimer = null;
|
||||
this.streamDurationTimer = null;
|
||||
|
||||
// misc
|
||||
this.streamIsOnline = false;
|
||||
this.lastDisconnectTime = null;
|
||||
this.streamStatus = null;
|
||||
|
||||
Vue.filter('plural', pluralize);
|
||||
|
||||
|
|
@ -36,6 +35,7 @@ class Owncast {
|
|||
this.handlePlayerPlaying = this.handlePlayerPlaying.bind(this);
|
||||
this.handlePlayerEnded = this.handlePlayerEnded.bind(this);
|
||||
this.handlePlayerError = this.handlePlayerError.bind(this);
|
||||
this.setCurrentStreamDuration = this.setCurrentStreamDuration.bind(this);
|
||||
}
|
||||
|
||||
init() {
|
||||
|
|
@ -45,7 +45,7 @@ class Owncast {
|
|||
this.vueApp = new Vue({
|
||||
el: '#app-container',
|
||||
data: {
|
||||
isOnline: false,
|
||||
playerOn: false,
|
||||
messages: [],
|
||||
overallMaxViewerCount: 0,
|
||||
sessionMaxViewerCount: 0,
|
||||
|
|
@ -86,7 +86,7 @@ class Owncast {
|
|||
});
|
||||
this.player.init();
|
||||
|
||||
this.getChatHistory();
|
||||
// this.getChatHistory();
|
||||
};
|
||||
|
||||
setConfigData(data) {
|
||||
|
|
@ -202,7 +202,10 @@ class Owncast {
|
|||
};
|
||||
|
||||
// handle UI things from stream status result
|
||||
updateStreamStatus(status) {
|
||||
updateStreamStatus(status = {}) {
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
// update UI
|
||||
this.vueApp.streamStatus = status.online ? MESSAGE_ONLINE : MESSAGE_OFFLINE;
|
||||
this.vueApp.viewerCount = status.viewerCount;
|
||||
|
|
@ -211,14 +214,35 @@ class Owncast {
|
|||
|
||||
this.lastDisconnectTime = status.lastDisconnectTime;
|
||||
|
||||
if (status.online && !this.streamIsOnline) {
|
||||
if (!this.streamStatus) {
|
||||
// display offline mode the first time we get status, and it's offline.
|
||||
if (!status.online) {
|
||||
this.handleOfflineMode();
|
||||
} else {
|
||||
this.handleOnlineMode();
|
||||
}
|
||||
} else {
|
||||
if (status.online && !this.streamStatus.online) {
|
||||
// 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.
|
||||
} else if (!status.online && this.streamStatus.online) {
|
||||
// stream has just flipped offline.
|
||||
this.handleOfflineMode();
|
||||
}
|
||||
}
|
||||
|
||||
// if (status.online && !this.streamIsOnline) {
|
||||
|
||||
// } else if (!status.online && !this.streamStatus) {
|
||||
// this.handleOfflineMode();
|
||||
// } else if (!status.online && this.streamIsOnline) {
|
||||
// // we've just flipped from online to offline
|
||||
// clearInterval(this.streamDurationTimer);
|
||||
// this.handleOfflineMode();
|
||||
// }
|
||||
|
||||
// keep a local copy
|
||||
this.streamStatus = status;
|
||||
|
||||
if (status.online) {
|
||||
// only do this if video is paused, so no unnecessary img fetches
|
||||
|
|
@ -226,25 +250,17 @@ class Owncast {
|
|||
this.player.setPoster();
|
||||
}
|
||||
}
|
||||
|
||||
this.streamStatus = status;
|
||||
this.setCurrentStreamDuration();
|
||||
};
|
||||
|
||||
// update vueApp.streamStatus text when online
|
||||
setCurrentStreamDuration() {
|
||||
// If we're offline then don't update any of the UI.
|
||||
if (!this.streamStatus.online) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Default to something
|
||||
let streamDurationString = ""
|
||||
let streamDurationString = '';
|
||||
|
||||
if (this.streamStatus.online && this.streamStatus.lastConnectTime) {
|
||||
if (this.streamStatus.lastConnectTime) {
|
||||
const diff = (Date.now() - Date.parse(this.streamStatus.lastConnectTime)) / 1000;
|
||||
streamDurationString = secondsToHMMSS(diff);
|
||||
}
|
||||
|
||||
this.vueApp.streamStatus = `${MESSAGE_ONLINE} ${streamDurationString}.`
|
||||
}
|
||||
|
||||
|
|
@ -253,13 +269,12 @@ class Owncast {
|
|||
};
|
||||
|
||||
// basically hide video and show underlying "poster"
|
||||
// primarily called when video onEnded was called because some video has been buffered to play after stream has gone offline.
|
||||
handleOfflineMode() {
|
||||
this.streamIsOnline = false;
|
||||
this.vueApp.isOnline = false;
|
||||
clearInterval(this.streamDurationTimer);
|
||||
this.vueApp.streamStatus = MESSAGE_OFFLINE;
|
||||
|
||||
if (this.lastDisconnectTime) {
|
||||
const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.lastDisconnectTime));
|
||||
if (this.streamStatus) {
|
||||
const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.streamStatus.lastDisconnectTime));
|
||||
const countdown = (remainingChatTime < 0) ? 0 : remainingChatTime;
|
||||
this.disableChatTimer = setTimeout(this.messagingInterface.disableChat, countdown);
|
||||
}
|
||||
|
|
@ -267,8 +282,7 @@ class Owncast {
|
|||
|
||||
// play video!
|
||||
handleOnlineMode() {
|
||||
this.streamIsOnline = true;
|
||||
this.vueApp.isOnline = true;
|
||||
this.vueApp.playerOn = true;
|
||||
this.vueApp.streamStatus = MESSAGE_ONLINE;
|
||||
|
||||
this.player.startPlayer();
|
||||
|
|
@ -276,7 +290,8 @@ class Owncast {
|
|||
this.disableChatTimer = null;
|
||||
this.messagingInterface.enableChat();
|
||||
|
||||
setInterval(this.setCurrentStreamDuration.bind(this), 1000);
|
||||
this.streamDurationTimer =
|
||||
setInterval(this.setCurrentStreamDuration, TIMER_STREAM_DURATION_COUNTER);
|
||||
}
|
||||
|
||||
// when videojs player is ready, start polling for stream
|
||||
|
|
@ -291,20 +306,21 @@ class Owncast {
|
|||
};
|
||||
|
||||
|
||||
// likely called some time after stream status has gone offline.
|
||||
// disable chat after some time.
|
||||
handlePlayerEnded() {
|
||||
// do something?
|
||||
this.handleOfflineMode();
|
||||
this.vueApp.playerOn = false;
|
||||
};
|
||||
|
||||
handlePlayerError() {
|
||||
// do something?
|
||||
this.handleOfflineMode();
|
||||
this.handlePlayerEnded();
|
||||
// stop timers?
|
||||
};
|
||||
|
||||
async getChatHistory() {
|
||||
const url = "/chat";
|
||||
const response = await fetch(url);
|
||||
const response = await fetch(URL_CHAT_HISTORY);
|
||||
const data = await response.json();
|
||||
const messages = data.map(function (message) {
|
||||
return new Message(message);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ const LOCAL_TEST = window.location.href.indexOf('localhost:') >= 0;
|
|||
|
||||
const URL_PREFIX = LOCAL_TEST ? 'http://localhost:8080' : '';
|
||||
const URL_STATUS = `${URL_PREFIX}/status`;
|
||||
const URL_CHAT_HISTORY = `${URL_PREFIX}/chat`;
|
||||
const URL_STREAM = `${URL_PREFIX}/hls/stream.m3u8`;
|
||||
const URL_WEBSOCKET = LOCAL_TEST
|
||||
? 'wss://goth.land/entry'
|
||||
|
|
@ -47,6 +48,7 @@ const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
|
|||
const TIMER_STATUS_UPDATE = 5000; // ms
|
||||
const TIMER_WEBSOCKET_RECONNECT = 5000; // ms
|
||||
const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
|
||||
const TIMER_STREAM_DURATION_COUNTER = 1000;
|
||||
|
||||
const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue