mirror of
https://github.com/owncast/owncast.git
synced 2024-12-23 17:50:38 +03:00
1094 lines
30 KiB
JavaScript
1094 lines
30 KiB
JavaScript
import { h, Component } from '/js/web_modules/preact.js';
|
|
import htm from '/js/web_modules/htm.js';
|
|
const html = htm.bind(h);
|
|
|
|
import { URL_WEBSOCKET } from './utils/constants.js';
|
|
|
|
import { OwncastPlayer } from './components/player.js';
|
|
import SocialIconsList from './components/platform-logos-list.js';
|
|
import VideoPoster from './components/video-poster.js';
|
|
import Followers from './components/federation/followers.js';
|
|
import Chat from './components/chat/chat.js';
|
|
import { ChatMenu } from './components/chat/chat-menu.js';
|
|
import Websocket, {
|
|
CALLBACKS,
|
|
SOCKET_MESSAGE_TYPES,
|
|
} from './utils/websocket.js';
|
|
import { registerChat } from './chat/register.js';
|
|
|
|
import ExternalActionModal, {
|
|
ExternalActionButton,
|
|
} from './components/external-action-modal.js';
|
|
|
|
import FediverseFollowModal, {
|
|
FediverseFollowButton,
|
|
} from './components/fediverse-follow-modal.js';
|
|
|
|
import { NotifyButton, NotifyModal } from './components/notification.js';
|
|
import { isPushNotificationSupported } from './notification/registerWeb.js';
|
|
import ChatSettingsModal from './components/chat-settings-modal.js';
|
|
|
|
import {
|
|
addNewlines,
|
|
checkUrlPathForDisplay,
|
|
classNames,
|
|
debounce,
|
|
getLocalStorage,
|
|
getOrientation,
|
|
hasTouchScreen,
|
|
makeLastOnlineString,
|
|
parseSecondsToDurationString,
|
|
pluralize,
|
|
ROUTE_RECORDINGS,
|
|
setLocalStorage,
|
|
} from './utils/helpers.js';
|
|
import {
|
|
CHAT_MAX_MESSAGE_LENGTH,
|
|
EST_SOCKET_PAYLOAD_BUFFER,
|
|
HEIGHT_SHORT_WIDE,
|
|
KEY_ACCESS_TOKEN,
|
|
KEY_CHAT_DISPLAYED,
|
|
KEY_USERNAME,
|
|
MESSAGE_OFFLINE,
|
|
MESSAGE_ONLINE,
|
|
ORIENTATION_PORTRAIT,
|
|
OWNCAST_LOGO_LOCAL,
|
|
TEMP_IMAGE,
|
|
TIMER_DISABLE_CHAT_AFTER_OFFLINE,
|
|
TIMER_STATUS_UPDATE,
|
|
TIMER_STREAM_DURATION_COUNTER,
|
|
URL_CONFIG,
|
|
URL_OWNCAST,
|
|
URL_STATUS,
|
|
URL_VIEWER_PING,
|
|
WIDTH_SINGLE_COL,
|
|
USER_VISIT_COUNT_KEY,
|
|
} from './utils/constants.js';
|
|
import { checkIsModerator } from './utils/chat.js';
|
|
|
|
import TabBar from './components/tab-bar.js';
|
|
|
|
export default class App extends Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
|
|
const chatStorage = getLocalStorage(KEY_CHAT_DISPLAYED);
|
|
this.hasTouchScreen = hasTouchScreen();
|
|
this.windowBlurred = false;
|
|
|
|
this.state = {
|
|
websocket: null,
|
|
canChat: false, // all of chat functionality (panel + username)
|
|
displayChatPanel: chatStorage === null ? true : chatStorage === 'true', // just the chat panel
|
|
chatInputEnabled: false, // chat input box state
|
|
accessToken: null,
|
|
username: getLocalStorage(KEY_USERNAME),
|
|
isModerator: false,
|
|
|
|
isRegistering: false,
|
|
touchKeyboardActive: false,
|
|
|
|
configData: {
|
|
loading: true,
|
|
},
|
|
extraPageContent: '',
|
|
|
|
playerActive: false, // player object is active
|
|
streamOnline: null, // stream is active/online
|
|
isPlaying: false, // player is actively playing video
|
|
|
|
// status
|
|
streamStatusMessage: MESSAGE_OFFLINE,
|
|
viewerCount: '',
|
|
lastDisconnectTime: null,
|
|
|
|
// dom
|
|
windowWidth: window.innerWidth,
|
|
windowHeight: window.innerHeight,
|
|
orientation: getOrientation(this.hasTouchScreen),
|
|
|
|
// modals
|
|
externalActionModalData: null,
|
|
fediverseModalData: null,
|
|
|
|
// authentication options
|
|
indieAuthEnabled: false,
|
|
|
|
// routing & tabbing
|
|
section: '',
|
|
sectionId: '',
|
|
};
|
|
|
|
// timers
|
|
this.playerRestartTimer = null;
|
|
this.offlineTimer = null;
|
|
this.statusTimer = null;
|
|
this.disableChatInputTimer = null;
|
|
this.streamDurationTimer = null;
|
|
|
|
// misc dom events
|
|
this.handleChatPanelToggle = this.handleChatPanelToggle.bind(this);
|
|
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
|
this.handleFormFocus = this.handleFormFocus.bind(this);
|
|
this.handleFormBlur = this.handleFormBlur.bind(this);
|
|
this.handleWindowBlur = this.handleWindowBlur.bind(this);
|
|
this.handleWindowFocus = this.handleWindowFocus.bind(this);
|
|
this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 250);
|
|
|
|
this.handleOfflineMode = this.handleOfflineMode.bind(this);
|
|
this.handleOnlineMode = this.handleOnlineMode.bind(this);
|
|
this.disableChatInput = this.disableChatInput.bind(this);
|
|
this.setCurrentStreamDuration = this.setCurrentStreamDuration.bind(this);
|
|
|
|
this.handleKeyPressed = this.handleKeyPressed.bind(this);
|
|
this.displayExternalAction = this.displayExternalAction.bind(this);
|
|
this.closeExternalActionModal = this.closeExternalActionModal.bind(this);
|
|
this.displayFediverseFollowModal =
|
|
this.displayFediverseFollowModal.bind(this);
|
|
this.closeFediverseFollowModal = this.closeFediverseFollowModal.bind(this);
|
|
this.displayNotificationModal = this.displayNotificationModal.bind(this);
|
|
this.closeNotificationModal = this.closeNotificationModal.bind(this);
|
|
this.showAuthModal = this.showAuthModal.bind(this);
|
|
this.closeAuthModal = this.closeAuthModal.bind(this);
|
|
|
|
// player events
|
|
this.handlePlayerReady = this.handlePlayerReady.bind(this);
|
|
this.handlePlayerPlaying = this.handlePlayerPlaying.bind(this);
|
|
this.handlePlayerEnded = this.handlePlayerEnded.bind(this);
|
|
this.handlePlayerError = this.handlePlayerError.bind(this);
|
|
|
|
// fetch events
|
|
this.getConfig = this.getConfig.bind(this);
|
|
this.getStreamStatus = this.getStreamStatus.bind(this);
|
|
|
|
// user events
|
|
this.handleWebsocketMessage = this.handleWebsocketMessage.bind(this);
|
|
|
|
// chat
|
|
this.hasConfiguredChat = false;
|
|
this.setupChatAuth = this.setupChatAuth.bind(this);
|
|
this.disableChat = this.disableChat.bind(this);
|
|
this.socketHostOverride = null;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getConfig();
|
|
if (!this.hasTouchScreen) {
|
|
window.addEventListener('resize', this.handleWindowResize);
|
|
}
|
|
window.addEventListener('blur', this.handleWindowBlur);
|
|
window.addEventListener('focus', this.handleWindowFocus);
|
|
if (this.hasTouchScreen) {
|
|
window.addEventListener('orientationchange', this.handleWindowResize);
|
|
}
|
|
window.addEventListener('keypress', this.handleKeyPressed);
|
|
this.player = new OwncastPlayer();
|
|
this.player.setupPlayerCallbacks({
|
|
onReady: this.handlePlayerReady,
|
|
onPlaying: this.handlePlayerPlaying,
|
|
onEnded: this.handlePlayerEnded,
|
|
onError: this.handlePlayerError,
|
|
});
|
|
this.player.init();
|
|
|
|
this.registerServiceWorker();
|
|
|
|
// check routing
|
|
this.getRoute();
|
|
|
|
// Increment the visit counter
|
|
this.incrementVisitCounter();
|
|
}
|
|
|
|
incrementVisitCounter() {
|
|
let visits = parseInt(getLocalStorage(USER_VISIT_COUNT_KEY));
|
|
if (isNaN(visits)) {
|
|
visits = 0;
|
|
}
|
|
|
|
setLocalStorage(USER_VISIT_COUNT_KEY, visits + 1);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
// clear all the timers
|
|
clearInterval(this.playerRestartTimer);
|
|
clearInterval(this.offlineTimer);
|
|
clearInterval(this.statusTimer);
|
|
clearTimeout(this.disableChatInputTimer);
|
|
clearInterval(this.streamDurationTimer);
|
|
window.removeEventListener('resize', this.handleWindowResize);
|
|
window.removeEventListener('blur', this.handleWindowBlur);
|
|
window.removeEventListener('focus', this.handleWindowFocus);
|
|
window.removeEventListener('keypress', this.handleKeyPressed);
|
|
if (this.hasTouchScreen) {
|
|
window.removeEventListener('orientationchange', this.handleWindowResize);
|
|
}
|
|
}
|
|
|
|
getRoute() {
|
|
const routeInfo = checkUrlPathForDisplay();
|
|
this.setState({
|
|
...routeInfo,
|
|
});
|
|
}
|
|
|
|
// 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) => {
|
|
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}`);
|
|
});
|
|
|
|
// 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 = {}) {
|
|
const {
|
|
name,
|
|
summary,
|
|
chatDisabled,
|
|
socketHostOverride,
|
|
notifications,
|
|
authentication,
|
|
} = data;
|
|
window.document.title = name;
|
|
|
|
this.socketHostOverride = socketHostOverride;
|
|
|
|
// If this is the first time setting the config
|
|
// then setup chat if it's enabled.
|
|
if (!this.hasConfiguredChat && !chatDisabled) {
|
|
this.setupChatAuth();
|
|
}
|
|
|
|
this.hasConfiguredChat = true;
|
|
const { indieAuthEnabled } = authentication;
|
|
|
|
this.setState({
|
|
canChat: !chatDisabled,
|
|
notifications,
|
|
indieAuthEnabled,
|
|
configData: {
|
|
...data,
|
|
summary: summary && addNewlines(summary),
|
|
},
|
|
});
|
|
}
|
|
|
|
// handle UI things from stream status result
|
|
updateStreamStatus(status = {}) {
|
|
const { streamOnline: curStreamOnline } = this.state;
|
|
|
|
if (!status) {
|
|
return;
|
|
}
|
|
const {
|
|
viewerCount,
|
|
online,
|
|
lastConnectTime,
|
|
streamTitle,
|
|
lastDisconnectTime,
|
|
serverTime,
|
|
} = status;
|
|
|
|
const clockSkew = new Date(serverTime).getTime() - Date.now();
|
|
this.player.setClockSkew(clockSkew);
|
|
|
|
this.setState({
|
|
viewerCount,
|
|
lastConnectTime,
|
|
streamOnline: online,
|
|
streamTitle,
|
|
lastDisconnectTime,
|
|
});
|
|
|
|
if (status.online !== curStreamOnline) {
|
|
if (status.online) {
|
|
// stream has just come online.
|
|
this.handleOnlineMode();
|
|
} else {
|
|
// stream has just flipped offline or app just got loaded and stream is offline.
|
|
this.handleOfflineMode(lastDisconnectTime);
|
|
}
|
|
}
|
|
}
|
|
|
|
// when videojs player is ready, start polling for stream
|
|
handlePlayerReady() {
|
|
this.getStreamStatus();
|
|
this.statusTimer = setInterval(this.getStreamStatus, TIMER_STATUS_UPDATE);
|
|
}
|
|
|
|
handlePlayerPlaying() {
|
|
this.setState({
|
|
isPlaying: true,
|
|
});
|
|
}
|
|
|
|
// likely called some time after stream status has gone offline.
|
|
// basically hide video and show underlying "poster"
|
|
handlePlayerEnded() {
|
|
this.setState({
|
|
playerActive: false,
|
|
isPlaying: false,
|
|
});
|
|
}
|
|
|
|
handlePlayerError() {
|
|
// do something?
|
|
this.handleOfflineMode();
|
|
this.handlePlayerEnded();
|
|
}
|
|
|
|
// stop status timer and disable chat after some time.
|
|
handleOfflineMode(lastDisconnectTime) {
|
|
clearInterval(this.streamDurationTimer);
|
|
|
|
if (lastDisconnectTime) {
|
|
const remainingChatTime =
|
|
TIMER_DISABLE_CHAT_AFTER_OFFLINE -
|
|
(Date.now() - new Date(lastDisconnectTime));
|
|
const countdown = remainingChatTime < 0 ? 0 : remainingChatTime;
|
|
if (countdown > 0) {
|
|
this.setState({
|
|
chatInputEnabled: true,
|
|
});
|
|
}
|
|
this.disableChatInputTimer = setTimeout(this.disableChatInput, countdown);
|
|
}
|
|
|
|
this.setState({
|
|
streamOnline: false,
|
|
streamStatusMessage: MESSAGE_OFFLINE,
|
|
});
|
|
|
|
if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) {
|
|
this.handlePlayerEnded();
|
|
}
|
|
|
|
if (this.windowBlurred) {
|
|
document.title = ` 🔴 ${
|
|
this.state.configData && this.state.configData.name
|
|
}`;
|
|
}
|
|
}
|
|
|
|
// play video!
|
|
handleOnlineMode() {
|
|
this.player.startPlayer();
|
|
clearTimeout(this.disableChatInputTimer);
|
|
this.disableChatInputTimer = null;
|
|
|
|
this.streamDurationTimer = setInterval(
|
|
this.setCurrentStreamDuration,
|
|
TIMER_STREAM_DURATION_COUNTER
|
|
);
|
|
|
|
this.setState({
|
|
playerActive: true,
|
|
streamOnline: true,
|
|
chatInputEnabled: true,
|
|
streamTitle: '',
|
|
streamStatusMessage: MESSAGE_ONLINE,
|
|
});
|
|
|
|
if (this.windowBlurred) {
|
|
document.title = ` 🟢 ${
|
|
this.state.configData && this.state.configData.name
|
|
}`;
|
|
}
|
|
}
|
|
|
|
setCurrentStreamDuration() {
|
|
let streamDurationString = '';
|
|
if (this.state.lastConnectTime) {
|
|
const diff = (Date.now() - Date.parse(this.state.lastConnectTime)) / 1000;
|
|
streamDurationString = parseSecondsToDurationString(diff);
|
|
}
|
|
this.setState({
|
|
streamStatusMessage: `${MESSAGE_ONLINE} ${streamDurationString}`,
|
|
});
|
|
}
|
|
|
|
handleUsernameChange(newName) {
|
|
this.setState({
|
|
username: newName,
|
|
});
|
|
|
|
this.sendUsernameChange(newName);
|
|
}
|
|
|
|
handleFormFocus() {
|
|
if (this.hasTouchScreen) {
|
|
this.setState({
|
|
touchKeyboardActive: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
handleFormBlur() {
|
|
if (this.hasTouchScreen) {
|
|
this.setState({
|
|
touchKeyboardActive: false,
|
|
});
|
|
}
|
|
}
|
|
|
|
handleChatPanelToggle() {
|
|
const { displayChatPanel: curDisplayed } = this.state;
|
|
|
|
const displayChat = !curDisplayed;
|
|
setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
|
|
this.setState({
|
|
displayChatPanel: displayChat,
|
|
});
|
|
}
|
|
|
|
disableChatInput() {
|
|
this.setState({
|
|
chatInputEnabled: false,
|
|
});
|
|
}
|
|
|
|
handleNetworkingError(error) {
|
|
console.error(`>>> App Error: ${error}`);
|
|
}
|
|
|
|
handleWindowResize() {
|
|
this.setState({
|
|
windowWidth: window.innerWidth,
|
|
windowHeight: window.innerHeight,
|
|
orientation: getOrientation(this.hasTouchScreen),
|
|
});
|
|
}
|
|
|
|
handleWindowBlur() {
|
|
this.windowBlurred = true;
|
|
}
|
|
|
|
handleWindowFocus() {
|
|
this.windowBlurred = false;
|
|
window.document.title = this.state.configData && this.state.configData.name;
|
|
}
|
|
|
|
handleSpaceBarPressed(e) {
|
|
e.preventDefault();
|
|
if (this.state.isPlaying) {
|
|
this.setState({
|
|
isPlaying: false,
|
|
});
|
|
try {
|
|
this.player.vjsPlayer.pause();
|
|
} catch (err) {
|
|
console.warn(err);
|
|
}
|
|
} else {
|
|
this.setState({
|
|
isPlaying: true,
|
|
});
|
|
this.player.vjsPlayer.play();
|
|
}
|
|
}
|
|
|
|
handleMuteKeyPressed() {
|
|
const muted = this.player.vjsPlayer.muted();
|
|
const volume = this.player.vjsPlayer.volume();
|
|
|
|
try {
|
|
if (volume === 0) {
|
|
this.player.vjsPlayer.volume(0.5);
|
|
this.player.vjsPlayer.muted(false);
|
|
} else {
|
|
this.player.vjsPlayer.muted(!muted);
|
|
}
|
|
} catch (err) {
|
|
console.warn(err);
|
|
}
|
|
}
|
|
|
|
handleFullScreenKeyPressed() {
|
|
if (this.player.vjsPlayer.isFullscreen()) {
|
|
this.player.vjsPlayer.exitFullscreen();
|
|
} else {
|
|
this.player.vjsPlayer.requestFullscreen();
|
|
}
|
|
}
|
|
|
|
handleVolumeSet(factor) {
|
|
this.player.vjsPlayer.volume(this.player.vjsPlayer.volume() + factor);
|
|
}
|
|
|
|
handleKeyPressed(e) {
|
|
// Only handle shortcuts if the focus is on the general page body,
|
|
// not a specific input field.
|
|
if (e.target !== document.getElementById('app-body')) {
|
|
return;
|
|
}
|
|
|
|
if (this.state.streamOnline) {
|
|
switch (e.code) {
|
|
case 'MediaPlayPause':
|
|
case 'KeyP':
|
|
case 'Space':
|
|
this.handleSpaceBarPressed(e);
|
|
break;
|
|
case 'KeyM':
|
|
this.handleMuteKeyPressed(e);
|
|
break;
|
|
case 'KeyF':
|
|
this.handleFullScreenKeyPressed(e);
|
|
break;
|
|
case 'KeyC':
|
|
this.handleChatPanelToggle();
|
|
break;
|
|
case 'Digit9':
|
|
this.handleVolumeSet(-0.1);
|
|
break;
|
|
case 'Digit0':
|
|
this.handleVolumeSet(0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
displayExternalAction(action) {
|
|
const { username } = this.state;
|
|
if (!action) {
|
|
return;
|
|
}
|
|
const { url: actionUrl, openExternally } = action || {};
|
|
let url = new URL(actionUrl);
|
|
// Append url and username to params so the link knows where we came from and who we are.
|
|
url.searchParams.append('username', username);
|
|
url.searchParams.append('instance', window.location);
|
|
|
|
const fullUrl = url.toString();
|
|
|
|
if (openExternally) {
|
|
var win = window.open(fullUrl, '_blank');
|
|
win.focus();
|
|
return;
|
|
}
|
|
this.setState({
|
|
externalActionModalData: {
|
|
...action,
|
|
url: fullUrl,
|
|
},
|
|
});
|
|
}
|
|
closeExternalActionModal() {
|
|
this.setState({
|
|
externalActionModalData: null,
|
|
});
|
|
}
|
|
|
|
displayFediverseFollowModal(data) {
|
|
this.setState({ fediverseModalData: data });
|
|
}
|
|
closeFediverseFollowModal() {
|
|
this.setState({ fediverseModalData: null });
|
|
}
|
|
|
|
displayNotificationModal(data) {
|
|
this.setState({ notificationModalData: data });
|
|
}
|
|
closeNotificationModal() {
|
|
this.setState({ notificationModalData: null });
|
|
}
|
|
|
|
async registerServiceWorker() {
|
|
try {
|
|
const reg = await navigator.serviceWorker.register('/serviceWorker.js', {
|
|
scope: '/',
|
|
});
|
|
} catch (err) {
|
|
console.error('Owncast service worker registration failed!', err);
|
|
}
|
|
}
|
|
|
|
showAuthModal() {
|
|
const data = {
|
|
title: 'Authenticate with chat',
|
|
};
|
|
this.setState({ authModalData: data });
|
|
}
|
|
|
|
closeAuthModal() {
|
|
this.setState({ authModalData: null });
|
|
}
|
|
|
|
handleWebsocketMessage(e) {
|
|
if (e.type === SOCKET_MESSAGE_TYPES.ERROR_USER_DISABLED) {
|
|
// User has been actively disabled on the backend. Turn off chat for them.
|
|
this.handleBlockedChat();
|
|
} else if (
|
|
e.type === SOCKET_MESSAGE_TYPES.ERROR_NEEDS_REGISTRATION &&
|
|
!this.isRegistering
|
|
) {
|
|
// User needs an access token, so start the user auth flow.
|
|
this.state.websocket.shutdown();
|
|
this.setState({ websocket: null });
|
|
this.setupChatAuth(true);
|
|
} else if (e.type === SOCKET_MESSAGE_TYPES.ERROR_MAX_CONNECTIONS_EXCEEDED) {
|
|
// Chat server cannot support any more chat clients. Turn off chat for them.
|
|
this.disableChat();
|
|
} else if (e.type === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) {
|
|
// When connected the user will return an event letting us know what our
|
|
// user details are so we can display them properly.
|
|
const { user } = e;
|
|
const { displayName, authenticated } = user;
|
|
|
|
this.setState({
|
|
username: displayName,
|
|
authenticated,
|
|
isModerator: checkIsModerator(e),
|
|
});
|
|
}
|
|
}
|
|
|
|
handleBlockedChat() {
|
|
this.disableChat();
|
|
}
|
|
|
|
disableChat() {
|
|
this.state.websocket.shutdown();
|
|
this.setState({ websocket: null, canChat: false });
|
|
}
|
|
|
|
async setupChatAuth(force) {
|
|
var accessToken = getLocalStorage(KEY_ACCESS_TOKEN);
|
|
var username = getLocalStorage(KEY_USERNAME);
|
|
|
|
if (!accessToken || force) {
|
|
try {
|
|
this.isRegistering = true;
|
|
const registration = await registerChat(this.state.username);
|
|
accessToken = registration.accessToken;
|
|
username = registration.displayName;
|
|
|
|
setLocalStorage(KEY_ACCESS_TOKEN, accessToken);
|
|
setLocalStorage(KEY_USERNAME, username);
|
|
|
|
this.isRegistering = false;
|
|
} catch (e) {
|
|
console.error('registration error:', e);
|
|
}
|
|
}
|
|
|
|
if (this.state.websocket) {
|
|
this.state.websocket.shutdown();
|
|
this.setState({
|
|
websocket: null,
|
|
});
|
|
}
|
|
|
|
// Without a valid access token the websocket connection will be rejected.
|
|
const websocket = new Websocket(
|
|
accessToken,
|
|
this.socketHostOverride || URL_WEBSOCKET
|
|
);
|
|
websocket.addListener(
|
|
CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED,
|
|
this.handleWebsocketMessage
|
|
);
|
|
|
|
this.setState({
|
|
username,
|
|
websocket,
|
|
accessToken,
|
|
});
|
|
}
|
|
|
|
sendUsernameChange(newName) {
|
|
const nameChange = {
|
|
type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
|
|
newName,
|
|
};
|
|
this.state.websocket.send(nameChange);
|
|
}
|
|
|
|
render(props, state) {
|
|
const {
|
|
accessToken,
|
|
chatInputEnabled,
|
|
configData,
|
|
displayChatPanel,
|
|
canChat,
|
|
isModerator,
|
|
|
|
isPlaying,
|
|
orientation,
|
|
playerActive,
|
|
streamOnline,
|
|
streamStatusMessage,
|
|
streamTitle,
|
|
touchKeyboardActive,
|
|
username,
|
|
authenticated,
|
|
viewerCount,
|
|
websocket,
|
|
windowHeight,
|
|
windowWidth,
|
|
fediverseModalData,
|
|
authModalData,
|
|
externalActionModalData,
|
|
notificationModalData,
|
|
notifications,
|
|
lastDisconnectTime,
|
|
section,
|
|
sectionId,
|
|
indieAuthEnabled,
|
|
} = state;
|
|
|
|
const {
|
|
version: appVersion,
|
|
logo = TEMP_IMAGE,
|
|
socialHandles = [],
|
|
summary,
|
|
tags = [],
|
|
name,
|
|
extraPageContent,
|
|
chatDisabled,
|
|
externalActions,
|
|
customStyles,
|
|
maxSocketPayloadSize,
|
|
federation = {},
|
|
} = configData;
|
|
|
|
const bgUserLogo = { backgroundImage: `url(${logo})` };
|
|
|
|
const tagList = tags !== null && tags.length > 0 && tags.join(' #');
|
|
|
|
let viewerCountMessage = '';
|
|
if (streamOnline && viewerCount > 0) {
|
|
viewerCountMessage = html`${viewerCount}
|
|
${pluralize(' viewer', viewerCount)}`;
|
|
} else if (lastDisconnectTime) {
|
|
viewerCountMessage = makeLastOnlineString(lastDisconnectTime);
|
|
}
|
|
|
|
const mainClass = playerActive ? 'online' : '';
|
|
const isPortrait =
|
|
this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
|
|
const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
|
|
const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;
|
|
|
|
const noVideoContent =
|
|
!playerActive || (section === ROUTE_RECORDINGS && sectionId !== '');
|
|
const shouldDisplayChat =
|
|
displayChatPanel && !chatDisabled && chatInputEnabled;
|
|
|
|
const extraAppClasses = classNames({
|
|
'config-loading': configData.loading,
|
|
|
|
chat: shouldDisplayChat,
|
|
'no-chat': !shouldDisplayChat,
|
|
'no-video': noVideoContent,
|
|
'chat-hidden': !displayChatPanel && canChat && !chatDisabled, // hide panel
|
|
'chat-disabled': !canChat || chatDisabled,
|
|
'single-col': singleColMode,
|
|
'bg-gray-800': singleColMode && shouldDisplayChat,
|
|
'short-wide': shortHeight && windowWidth > WIDTH_SINGLE_COL,
|
|
'touch-screen': this.hasTouchScreen,
|
|
'touch-keyboard-active': touchKeyboardActive,
|
|
});
|
|
|
|
const poster = isPlaying
|
|
? null
|
|
: html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;
|
|
|
|
// modal buttons
|
|
const notificationsButton =
|
|
notifications &&
|
|
notifications.browser.enabled &&
|
|
isPushNotificationSupported() &&
|
|
html`<${NotifyButton}
|
|
serverName=${name}
|
|
onClick=${this.displayNotificationModal}
|
|
/>`;
|
|
const externalActionButtons = html`<div
|
|
id="external-actions-container"
|
|
class="flex flex-row flex-wrap justify-end"
|
|
>
|
|
${externalActions &&
|
|
externalActions.map(
|
|
function (action) {
|
|
return html`<${ExternalActionButton}
|
|
onClick=${this.displayExternalAction}
|
|
action=${action}
|
|
/>`;
|
|
}.bind(this)
|
|
)}
|
|
|
|
<!-- fediverse follow button -->
|
|
${federation.enabled &&
|
|
html`<${FediverseFollowButton}
|
|
onClick=${this.displayFediverseFollowModal}
|
|
federationInfo=${federation}
|
|
serverName=${name}
|
|
/>`}
|
|
${notificationsButton}
|
|
</div>`;
|
|
|
|
// modal component
|
|
const externalActionModal =
|
|
externalActionModalData &&
|
|
html`<${ExternalActionModal}
|
|
action=${externalActionModalData}
|
|
onClose=${this.closeExternalActionModal}
|
|
/>`;
|
|
|
|
const fediverseFollowModal =
|
|
fediverseModalData &&
|
|
html`
|
|
<${ExternalActionModal}
|
|
onClose=${this.closeFediverseFollowModal}
|
|
action=${fediverseModalData}
|
|
useIframe=${false}
|
|
customContent=${html`<${FediverseFollowModal}
|
|
name=${name}
|
|
logo=${logo}
|
|
federationInfo=${federation}
|
|
onClose=${this.closeFediverseFollowModal}
|
|
/>`}
|
|
/>
|
|
`;
|
|
|
|
const notificationModal =
|
|
notificationModalData &&
|
|
html` <${ExternalActionModal}
|
|
onClose=${this.closeNotificationModal}
|
|
action=${notificationModalData}
|
|
useIframe=${false}
|
|
customContent=${html`<${NotifyModal}
|
|
notifications=${notifications}
|
|
streamName=${name}
|
|
accessToken=${accessToken}
|
|
/>`}
|
|
/>`;
|
|
|
|
const authModal =
|
|
authModalData &&
|
|
html`
|
|
<${ExternalActionModal}
|
|
onClose=${this.closeAuthModal}
|
|
action=${authModalData}
|
|
useIframe=${false}
|
|
customContent=${html`<${ChatSettingsModal}
|
|
name=${name}
|
|
logo=${logo}
|
|
onUsernameChange=${this.handleUsernameChange}
|
|
username=${username}
|
|
accessToken=${this.state.accessToken}
|
|
authenticated=${authenticated}
|
|
onClose=${this.closeAuthModal}
|
|
indieAuthEnabled=${indieAuthEnabled}
|
|
federationEnabled=${federation.enabled}
|
|
/>`}
|
|
/>
|
|
`;
|
|
|
|
const chat = this.state.websocket
|
|
? html`
|
|
<${Chat}
|
|
websocket=${websocket}
|
|
username=${username}
|
|
authenticated=${authenticated}
|
|
chatInputEnabled=${chatInputEnabled && !chatDisabled}
|
|
instanceTitle=${name}
|
|
accessToken=${accessToken}
|
|
inputMaxBytes=${maxSocketPayloadSize - EST_SOCKET_PAYLOAD_BUFFER ||
|
|
CHAT_MAX_MESSAGE_LENGTH}
|
|
/>
|
|
`
|
|
: null;
|
|
|
|
const TAB_CONTENT = [
|
|
{
|
|
label: 'About',
|
|
content: html`
|
|
<div>
|
|
<div
|
|
id="stream-summary"
|
|
class="stream-summary my-4"
|
|
dangerouslySetInnerHTML=${{ __html: summary }}
|
|
></div>
|
|
<div id="tag-list" class="tag-list text-gray-600 mb-3">
|
|
${tagList && `#${tagList}`}
|
|
</div>
|
|
<div
|
|
id="extra-user-content"
|
|
class="extra-user-content"
|
|
dangerouslySetInnerHTML=${{ __html: extraPageContent }}
|
|
></div>
|
|
</div>
|
|
`,
|
|
},
|
|
];
|
|
|
|
if (federation.enabled) {
|
|
TAB_CONTENT.push({
|
|
label: html`Followers
|
|
${federation.followerCount > 10
|
|
? `${' '}(${federation.followerCount})`
|
|
: null}`,
|
|
content: html`<${Followers} />`,
|
|
});
|
|
}
|
|
|
|
const authIcon = '/img/user-settings.svg';
|
|
|
|
return html`
|
|
<div
|
|
id="app-container"
|
|
class="flex w-full flex-col justify-start relative ${extraAppClasses}"
|
|
>
|
|
<style>
|
|
${customStyles}
|
|
</style>
|
|
|
|
<div id="top-content" class="z-50">
|
|
<header
|
|
class="flex border-b border-gray-900 border-solid shadow-md fixed z-10 w-full top-0 left-0 flex flex-row justify-between flex-no-wrap"
|
|
>
|
|
<h1
|
|
class="flex flex-row items-center justify-start p-2 uppercase text-gray-400 text-xl font-thin tracking-wider overflow-hidden whitespace-no-wrap"
|
|
>
|
|
<span
|
|
id="logo-container"
|
|
class="inline-block rounded-full bg-white w-8 min-w-8 min-h-8 h-8 mr-2 bg-no-repeat bg-center"
|
|
>
|
|
<img
|
|
class="logo visually-hidden"
|
|
src=${OWNCAST_LOGO_LOCAL}
|
|
alt="owncast logo"
|
|
/>
|
|
</span>
|
|
<span class="instance-title overflow-hidden truncate"
|
|
>${streamOnline && streamTitle ? streamTitle : name}</span
|
|
>
|
|
</h1>
|
|
|
|
<${!chatDisabled && ChatMenu}
|
|
username=${username}
|
|
isModerator=${isModerator}
|
|
showAuthModal=${indieAuthEnabled && this.showAuthModal}
|
|
onUsernameChange=${this.handleUsernameChange}
|
|
onFocus=${this.handleFormFocus}
|
|
onBlur=${this.handleFormBlur}
|
|
chatDisabled=${chatDisabled}
|
|
noVideoContent=${noVideoContent}
|
|
handleChatPanelToggle=${this.handleChatPanelToggle}
|
|
/>
|
|
</header>
|
|
</div>
|
|
|
|
<main class=${mainClass}>
|
|
<div
|
|
id="video-container"
|
|
class="flex owncast-video-container bg-black w-full bg-center bg-no-repeat 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-4 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"
|
|
>
|
|
<span class="text-xs">${streamStatusMessage}</span>
|
|
<span id="stream-viewer-count" class="text-xs text-right"
|
|
>${viewerCountMessage}</span
|
|
>
|
|
</section>
|
|
</main>
|
|
|
|
<section
|
|
id="user-content"
|
|
aria-label="Owncast server information"
|
|
class="p-2"
|
|
>
|
|
${externalActionButtons && html`${externalActionButtons}`}
|
|
|
|
<div class="user-content flex flex-row p-8">
|
|
<div
|
|
class="user-logo-icons flex flex-col items-center justify-start mr-8"
|
|
>
|
|
<div
|
|
class="user-image rounded-full bg-white p-4 bg-no-repeat bg-center"
|
|
style=${bgUserLogo}
|
|
>
|
|
<img class="logo visually-hidden" alt="" src=${logo} />
|
|
</div>
|
|
<div class="social-actions">
|
|
<${SocialIconsList} handles=${socialHandles} />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-content-header">
|
|
<h2 class="server-name font-semibold text-5xl">
|
|
<span class="streamer-name text-indigo-600">${name}</span>
|
|
</h2>
|
|
<h3 class="font-semibold text-3xl">
|
|
${streamOnline && streamTitle}
|
|
</h3>
|
|
|
|
<!-- tab bar -->
|
|
<div class="${TAB_CONTENT.length > 1 ? 'my-8' : 'my-3'}">
|
|
<${TabBar} tabs=${TAB_CONTENT} ariaLabel="User Content" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="flex flex-row justify-start p-8 opacity-50 text-xs">
|
|
<span class="mx-1 inline-block">
|
|
<a href="${URL_OWNCAST}" rel="noopener noreferrer" target="_blank"
|
|
>${appVersion}</a
|
|
>
|
|
</span>
|
|
</footer>
|
|
|
|
${chat} ${externalActionModal} ${fediverseFollowModal}
|
|
${notificationModal} ${authModal}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|