-
- ${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
deleted file mode 100644
index 244ed5e..0000000
--- a/webroot/js/components/chat/chat.js
+++ /dev/null
@@ -1,508 +0,0 @@
-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 `