+
+ ${poster}
+
+
+
+ 
+
+ 
`
+ : null;
+
+ return html`
+
+ `;
+ }
+}
+
+export async function formatMessageText(message, username) {
+ let formattedText = getMessageWithEmbeds(message);
+ formattedText = convertToMarkup(formattedText);
+ return await highlightUsername(formattedText, username);
+}
+
+function highlightUsername(message, username) {
+ // https://github.com/julmot/mark.js/issues/115
+ const node = document.createElement('span');
+ node.innerHTML = message;
+ return new Promise((res) => {
+ new Mark(node).mark(username, {
+ element: 'span',
+ className: 'highlighted px-1 rounded font-bold bg-orange-500',
+ separateWordSearch: false,
+ accuracy: {
+ value: 'exactly',
+ limiters: [',', '.', "'", '?', '@'],
+ },
+ done() {
+ res(node.innerHTML);
+ },
+ });
+ });
+}
+
+function getMessageWithEmbeds(message) {
+ var embedText = '';
+ // Make a temporary element so we can actually parse the html and pull anchor tags from it.
+ // This is a better approach than regex.
+ var container = document.createElement('p');
+ container.innerHTML = message;
+
+ var anchors = container.getElementsByTagName('a');
+ for (var i = 0; i < anchors.length; i++) {
+ const url = anchors[i].href;
+ if (url.indexOf('instagram.com/p/') > -1) {
+ embedText += getInstagramEmbedFromURL(url);
+ }
+ }
+
+ // If this message only consists of a single embeddable link
+ // then only return the embed and strip the link url from the text.
+ if (
+ embedText !== '' &&
+ anchors.length == 1 &&
+ isMessageJustAnchor(message, anchors[0])
+ ) {
+ return embedText;
+ }
+ return message + embedText;
+}
+
+function getInstagramEmbedFromURL(url) {
+ const urlObject = new URL(url.replace(/\/$/, ''));
+ urlObject.pathname += '/embed';
+ return ``;
+}
+
+function isMessageJustAnchor(message, anchor) {
+ return stripTags(message) === stripTags(anchor.innerHTML);
+}
+
+function formatTimestamp(sentAt) {
+ sentAt = new Date(sentAt);
+ if (isNaN(sentAt)) {
+ return '';
+ }
+
+ let diffInDays = getDiffInDaysFromNow(sentAt);
+ if (diffInDays >= 1) {
+ return (
+ `at ${sentAt.toLocaleDateString('en-US', {
+ dateStyle: 'medium',
+ })} at ` + sentAt.toLocaleTimeString()
+ );
+ }
+
+ return `${sentAt.toLocaleTimeString()}`;
+}
+
+/*
+ You would call this when receiving a plain text
+ value back from an API, and before inserting the
+ text into the `contenteditable` area on a page.
+*/
+function convertToMarkup(str = '') {
+ return convertToText(str).replace(/\n/g, '');
+}
+
+function stripTags(str) {
+ return str.replace(/<\/?[^>]+(>|$)/g, '');
+}
diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
new file mode 100644
index 0000000..244ed5e
--- /dev/null
+++ b/webroot/js/components/chat/chat.js
@@ -0,0 +1,508 @@
+import { h, Component, createRef } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+import Message from './message.js';
+import ChatInput from './chat-input.js';
+import { CALLBACKS, SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
+import { jumpToBottom, debounce } from '../../utils/helpers.js';
+import {
+ extraUserNamesFromMessageHistory,
+ checkIsModerator,
+} from '../../utils/chat.js';
+import {
+ URL_CHAT_HISTORY,
+ MESSAGE_JUMPTOBOTTOM_BUFFER,
+} from '../../utils/constants.js';
+
+const MAX_RENDER_BACKLOG = 300;
+
+// Add message types that should be displayed in chat to this array.
+const renderableChatStyleMessages = [
+ SOCKET_MESSAGE_TYPES.NAME_CHANGE,
+ SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO,
+ SOCKET_MESSAGE_TYPES.USER_JOINED,
+ SOCKET_MESSAGE_TYPES.CHAT_ACTION,
+ SOCKET_MESSAGE_TYPES.SYSTEM,
+ SOCKET_MESSAGE_TYPES.CHAT,
+ SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_FOLLOW,
+ SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_LIKE,
+ SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_REPOST,
+];
+export default class Chat extends Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ chatUserNames: [],
+ // Ordered array of messages sorted by timestamp.
+ sortedMessages: [],
+
+ newMessagesReceived: false,
+ webSocketConnected: true,
+ isModerator: false,
+ };
+
+ this.scrollableMessagesContainer = createRef();
+
+ this.websocket = null;
+ this.receivedFirstMessages = false;
+ this.receivedMessageUpdate = false;
+ this.hasFetchedHistory = false;
+
+ // Unordered dictionary of messages keyed by ID.
+ this.messages = {};
+
+ this.windowBlurred = false;
+ this.numMessagesSinceBlur = 0;
+
+ this.getChatHistory = this.getChatHistory.bind(this);
+ this.handleNetworkingError = this.handleNetworkingError.bind(this);
+ this.handleWindowBlur = this.handleWindowBlur.bind(this);
+ this.handleWindowFocus = this.handleWindowFocus.bind(this);
+ this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 500);
+ this.messageListCallback = this.messageListCallback.bind(this);
+ this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
+ this.scrollToBottom = this.scrollToBottom.bind(this);
+ this.submitChat = this.submitChat.bind(this);
+ this.websocketConnected = this.websocketConnected.bind(this);
+ this.websocketDisconnected = this.websocketDisconnected.bind(this);
+ }
+
+ componentDidMount() {
+ this.setupWebSocketCallbacks();
+
+ window.addEventListener('resize', this.handleWindowResize);
+
+ if (!this.props.readonly) {
+ window.addEventListener('blur', this.handleWindowBlur);
+ window.addEventListener('focus', this.handleWindowFocus);
+ }
+
+ this.messageListObserver = new MutationObserver(this.messageListCallback);
+ this.messageListObserver.observe(this.scrollableMessagesContainer.current, {
+ childList: true,
+ });
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ const { username, chatInputEnabled } = this.props;
+ const { username: nextUserName, chatInputEnabled: nextChatEnabled } =
+ nextProps;
+
+ const {
+ webSocketConnected,
+ chatUserNames,
+ newMessagesReceived,
+ sortedMessages,
+ } = this.state;
+
+ const {
+ webSocketConnected: nextSocket,
+ chatUserNames: nextUserNames,
+ newMessagesReceived: nextMessagesReceived,
+ } = nextState;
+
+ // If there are an updated number of sorted message then a render pass
+ // needs to take place to render these new messages.
+ if (
+ Object.keys(sortedMessages).length !==
+ Object.keys(nextState.sortedMessages).length
+ ) {
+ return true;
+ }
+
+ if (newMessagesReceived) {
+ return true;
+ }
+
+ return (
+ username !== nextUserName ||
+ chatInputEnabled !== nextChatEnabled ||
+ webSocketConnected !== nextSocket ||
+ chatUserNames.length !== nextUserNames.length ||
+ newMessagesReceived !== nextMessagesReceived
+ );
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ const { accessToken } = this.props;
+
+ // Fetch chat history
+ if (!this.hasFetchedHistory && accessToken) {
+ this.hasFetchedHistory = true;
+ this.getChatHistory(accessToken);
+ }
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.handleWindowResize);
+ if (!this.props.readonly) {
+ window.removeEventListener('blur', this.handleWindowBlur);
+ window.removeEventListener('focus', this.handleWindowFocus);
+ }
+ this.messageListObserver.disconnect();
+ }
+
+ setupWebSocketCallbacks() {
+ this.websocket = this.props.websocket;
+ if (this.websocket) {
+ this.websocket.addListener(
+ CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED,
+ this.receivedWebsocketMessage
+ );
+ this.websocket.addListener(
+ CALLBACKS.WEBSOCKET_CONNECTED,
+ this.websocketConnected
+ );
+ this.websocket.addListener(
+ CALLBACKS.WEBSOCKET_DISCONNECTED,
+ this.websocketDisconnected
+ );
+ }
+ }
+
+ // fetch chat history
+ async getChatHistory(accessToken) {
+ const { username } = this.props;
+ try {
+ const response = await fetch(
+ URL_CHAT_HISTORY + `?accessToken=${accessToken}`
+ );
+ const data = await response.json();
+
+ // Backlog of usernames from history
+ const allChatUserNames = extraUserNamesFromMessageHistory(data);
+ const chatUserNames = allChatUserNames.filter((name) => name != username);
+
+ this.addNewRenderableMessages(data);
+
+ this.setState((previousState) => {
+ return {
+ ...previousState,
+ chatUserNames,
+ };
+ });
+ } catch (error) {
+ this.handleNetworkingError(`Fetch getChatHistory: ${error}`);
+ }
+
+ this.scrollToBottom();
+ }
+
+ receivedWebsocketMessage(message) {
+ this.handleMessage(message);
+ }
+
+ handleNetworkingError(error) {
+ // todo: something more useful
+ console.error('chat error', error);
+ }
+
+ // Give a list of message IDs and the visibility state they should change to.
+ updateMessagesVisibility(idsToUpdate, visible) {
+ let messageList = { ...this.messages };
+
+ // Iterate through each ID and mark the associated ID in our messages
+ // dictionary with the new visibility.
+ for (const id of idsToUpdate) {
+ const message = messageList[id];
+ if (message) {
+ message.visible = visible;
+ messageList[id] = message;
+ }
+ }
+
+ const updatedMessagesList = {
+ ...this.messages,
+ ...messageList,
+ };
+
+ this.messages = updatedMessagesList;
+
+ this.resortAndRenderMessages();
+ }
+
+ handleChangeModeratorStatus(isModerator) {
+ if (isModerator !== this.state.isModerator) {
+ this.setState((previousState) => {
+ return { ...previousState, isModerator: isModerator };
+ });
+ }
+ }
+
+ handleWindowFocusNotificationCount(readonly, messageType) {
+ // if window is blurred and we get a new message, add 1 to title
+ if (
+ !readonly &&
+ messageType === SOCKET_MESSAGE_TYPES.CHAT &&
+ this.windowBlurred
+ ) {
+ this.numMessagesSinceBlur += 1;
+ }
+ }
+
+ addNewRenderableMessages(messagesArray) {
+ // Convert the array of chat history messages into an object
+ // to be merged with the existing chat messages.
+ const newMessages = messagesArray.reduce(
+ (o, message) => ({ ...o, [message.id]: message }),
+ {}
+ );
+
+ // Keep our unsorted collection of messages keyed by ID.
+ const updatedMessagesList = {
+ ...newMessages,
+ ...this.messages,
+ };
+ this.messages = updatedMessagesList;
+
+ this.resortAndRenderMessages();
+ }
+
+ resortAndRenderMessages() {
+ // Convert the unordered dictionary of messages to an ordered array.
+ // NOTE: This sorts the entire collection of messages on every new message
+ // because the order a message comes in cannot be trusted that it's the order
+ // it was sent, you need to sort by timestamp. I don't know if there
+ // is a performance problem waiting to occur here for larger chat feeds.
+ var sortedMessages = Object.values(this.messages)
+ // Filter out messages set to not be visible
+ .filter((message) => message.visible !== false)
+ .sort((a, b) => {
+ return Date.parse(a.timestamp) - Date.parse(b.timestamp);
+ });
+
+ // Cap this list to 300 items to improve browser performance.
+ if (sortedMessages.length >= MAX_RENDER_BACKLOG) {
+ sortedMessages = sortedMessages.slice(
+ sortedMessages.length - MAX_RENDER_BACKLOG
+ );
+ }
+
+ this.setState((previousState) => {
+ return {
+ ...previousState,
+ newMessagesReceived: true,
+ sortedMessages,
+ };
+ });
+ }
+
+ // handle any incoming message
+ handleMessage(message) {
+ const { type: messageType } = message;
+ const { readonly, username } = this.props;
+
+ // Allow non-user chat messages to be visible by default.
+ const messageVisible =
+ message.visible || messageType !== SOCKET_MESSAGE_TYPES.CHAT;
+
+ // Show moderator status
+ if (messageType === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) {
+ const modStatusUpdate = checkIsModerator(message);
+ this.handleChangeModeratorStatus(modStatusUpdate);
+ }
+
+ // Change the visibility of messages by ID.
+ if (messageType === SOCKET_MESSAGE_TYPES.VISIBILITY_UPDATE) {
+ const idsToUpdate = message.ids;
+ const visible = message.visible;
+ this.updateMessagesVisibility(idsToUpdate, visible);
+ } else if (
+ renderableChatStyleMessages.includes(messageType) &&
+ messageVisible
+ ) {
+ // Add new message to the chat feed.
+ this.addNewRenderableMessages([message]);
+
+ // Update the usernames list, filtering out our own name.
+ const updatedAllChatUserNames = this.updateAuthorList(message);
+ if (updatedAllChatUserNames.length) {
+ const updatedChatUserNames = updatedAllChatUserNames.filter(
+ (name) => name != username
+ );
+ this.setState((previousState) => {
+ return {
+ ...previousState,
+ chatUserNames: [...updatedChatUserNames],
+ };
+ });
+ }
+ }
+
+ // Update the window title if needed.
+ this.handleWindowFocusNotificationCount(readonly, messageType);
+ }
+
+ websocketConnected() {
+ this.setState((previousState) => {
+ return {
+ ...previousState,
+ webSocketConnected: true,
+ };
+ });
+ }
+
+ websocketDisconnected() {
+ this.setState((previousState) => {
+ return {
+ ...previousState,
+ webSocketConnected: false,
+ };
+ });
+ }
+
+ submitChat(content) {
+ if (!content) {
+ return;
+ }
+ const message = {
+ body: content,
+ type: SOCKET_MESSAGE_TYPES.CHAT,
+ };
+ this.websocket.send(message);
+ }
+
+ updateAuthorList(message) {
+ const { type } = message;
+ let nameList = this.state.chatUserNames;
+
+ if (
+ type === SOCKET_MESSAGE_TYPES.CHAT &&
+ !nameList.includes(message.user.displayName)
+ ) {
+ nameList.push(message.user.displayName);
+ return nameList;
+ } else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
+ const { oldName, user } = message;
+ const oldNameIndex = nameList.indexOf(oldName);
+ nameList.splice(oldNameIndex, 1, user.displayName);
+ return nameList;
+ }
+
+ return [];
+ }
+
+ scrollToBottom() {
+ jumpToBottom(this.scrollableMessagesContainer.current);
+ }
+
+ checkShouldScroll() {
+ const { scrollTop, scrollHeight, clientHeight } =
+ this.scrollableMessagesContainer.current;
+ const fullyScrolled = scrollHeight - clientHeight;
+ const shouldScroll =
+ scrollHeight >= clientHeight &&
+ fullyScrolled - scrollTop < MESSAGE_JUMPTOBOTTOM_BUFFER;
+
+ return shouldScroll;
+ }
+
+ handleWindowResize() {
+ this.scrollToBottom();
+ }
+
+ handleWindowBlur() {
+ this.windowBlurred = true;
+ }
+
+ handleWindowFocus() {
+ this.windowBlurred = false;
+ this.numMessagesSinceBlur = 0;
+ window.document.title = this.props.instanceTitle;
+ }
+
+ // if the messages list grows in number of child message nodes due to new messages received, scroll to bottom.
+ messageListCallback(mutations) {
+ const numMutations = mutations.length;
+
+ if (numMutations) {
+ const item = mutations[numMutations - 1];
+ if (item.type === 'childList' && item.addedNodes.length) {
+ if (this.state.newMessagesReceived) {
+ if (!this.receivedFirstMessages) {
+ this.scrollToBottom();
+ this.receivedFirstMessages = true;
+ } else if (this.checkShouldScroll()) {
+ this.scrollToBottom();
+ }
+
+ this.setState((previousState) => {
+ return {
+ ...previousState,
+ newMessagesReceived: false,
+ };
+ });
+ }
+ }
+ // update document title if window blurred
+ if (
+ this.numMessagesSinceBlur &&
+ !this.props.readonly &&
+ this.windowBlurred
+ ) {
+ this.updateDocumentTitle();
+ }
+ }
+ }
+
+ updateDocumentTitle() {
+ const num =
+ this.numMessagesSinceBlur > 10 ? '10+' : this.numMessagesSinceBlur;
+ window.document.title = `${num} 💬 :: ${this.props.instanceTitle}`;
+ }
+
+ render(props, state) {
+ const { username, readonly, chatInputEnabled, inputMaxBytes, accessToken } =
+ props;
+ const { sortedMessages, chatUserNames, webSocketConnected, isModerator } =
+ state;
+
+ const messageList = sortedMessages.map(
+ (message) =>
+ html`<${Message}
+ message=${message}
+ username=${username}
+ key=${message.id}
+ isModerator=${isModerator}
+ accessToken=${accessToken}
+ />`
+ );
+
+ if (readonly) {
+ return html`
+
+ `;
+ }
+
+ return html`
+ 
+
+ `
+ : null;
+ const contents = html`
You are now a
+ moderator.
+ + Sent at ${sentDate.toLocaleTimeString()} +
+ +Sent by:
++ ${displayName} +
+ ++ First joined: ${createDate.toLocaleString()} +
+ + ${previousNames.length > 1 && + html` ++ Previously known as: ${' '} + ${previousNames.join(', ')} +
+ `} +
+ `;
+ const userIcon = html`
+ 
+ `;
+
+ return html`
+ Be the first to follow this live stream.
++ By following this stream you'll get updates when it goes live, receive + posts from the streamer, and be featured here as a follower. +
++ Learn more about ${' '} + The Fediverse, where you can follow this server as well as so much more. +
+ {
+ currentTarget.onerror = null;
+ currentTarget.src = '/img/logo.svg';
+ }}
+ />
+ ${displayName}
+${displayUsername}
++ By following this stream you'll get posts and notifications such as + when it goes live. +
+ +
+ ${name}
+
+ ${account}
+
+ You'll be redirected to your Fediverse server and asked to confirm + this action. ${' '} + Join the Fediverse if you haven't. +
+ + + +
+ Contacting your server.
+Please wait...
+` (from IE). + value = value.replace(/
/gi, '\n'); + + // Cleanup the emoji titles. + value = value.replace(/\u200C{2}/gi, ''); + + // Trim each line. + value = value + .split('\n') + .map((line = '') => { + return line.trim(); + }) + .join('\n'); + + // No more than 2x newline, per "paragraph". + value = value.replace(/\n\n+/g, '\n\n'); + + // Clean up spaces. + value = value.replace(/[ ]+/g, ' '); + value = value.trim(); + + // Expose string. + return value; +} + +/* + You would call this when a user pastes from + the clipboard into a `contenteditable` area. +*/ +export function convertOnPaste(event = { preventDefault() {} }, emojiList) { + // Prevent paste. + event.preventDefault(); + + // Set later. + let value = ''; + + // Does method exist? + const hasEventClipboard = !!( + event.clipboardData && + typeof event.clipboardData === 'object' && + typeof event.clipboardData.getData === 'function' + ); + + // Get clipboard data? + if (hasEventClipboard) { + value = event.clipboardData.getData('text/plain'); + } + + // Insert into temp `