90 lines
2.3 KiB
JavaScript
90 lines
2.3 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 Chat from './components/chat/chat.js';
|
|
import Websocket from './utils/websocket.js';
|
|
import { getLocalStorage, setLocalStorage } from './utils/helpers.js';
|
|
import { KEY_EMBED_CHAT_ACCESS_TOKEN } from './utils/constants.js';
|
|
import { registerChat } from './chat/register.js';
|
|
|
|
export default class StandaloneChat extends Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
|
|
this.state = {
|
|
chatEnabled: true, // always true for standalone chat
|
|
username: null,
|
|
};
|
|
|
|
this.isRegistering = false;
|
|
this.hasConfiguredChat = false;
|
|
this.websocket = null;
|
|
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
|
|
|
// If this is the first time setting the config
|
|
// then setup chat if it's enabled.
|
|
const chatBlocked = getLocalStorage('owncast_chat_blocked');
|
|
if (!chatBlocked && !this.hasConfiguredChat) {
|
|
this.setupChatAuth();
|
|
}
|
|
|
|
this.hasConfiguredChat = true;
|
|
}
|
|
|
|
handleUsernameChange(newName) {
|
|
this.setState({
|
|
username: newName,
|
|
});
|
|
}
|
|
|
|
async setupChatAuth(force) {
|
|
var accessToken = getLocalStorage(KEY_EMBED_CHAT_ACCESS_TOKEN);
|
|
const randomInt = Math.floor(Math.random() * 100) + 1;
|
|
var username = 'chat-embed-' + randomInt;
|
|
|
|
if (!accessToken || force) {
|
|
try {
|
|
this.isRegistering = true;
|
|
const registration = await registerChat(username);
|
|
accessToken = registration.accessToken;
|
|
username = registration.displayName;
|
|
|
|
setLocalStorage(KEY_EMBED_CHAT_ACCESS_TOKEN, accessToken);
|
|
|
|
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 he websocket connection will be rejected.
|
|
const websocket = new Websocket(accessToken);
|
|
|
|
this.setState({
|
|
username,
|
|
websocket,
|
|
accessToken,
|
|
});
|
|
}
|
|
|
|
render(props, state) {
|
|
const { username, websocket, accessToken } = state;
|
|
return html`
|
|
<${Chat}
|
|
websocket=${websocket}
|
|
username=${username}
|
|
accessToken=${accessToken}
|
|
messagesOnly
|
|
/>
|
|
`;
|
|
}
|
|
}
|