Refactor timeline (#1346)

* fix intersection & resize observer

* add binary search util

* add scroll info util

* add virtual paginator hook - WIP

* render timeline using paginator hook

* add continuous pagination to fill timeline

* add doc comments in virtual paginator hook

* add scroll to element func in virtual paginator

* extract timeline pagination login into hook

* add sliding name for timeline messages - testing

* scroll with live event

* change message rending style

* make message timestamp smaller

* remove unused imports

* add random number between util

* add compact message component

* add sanitize html types

* fix sending alias in room mention

* get room member display name util

* add get room with canonical alias util

* add sanitize html util

* render custom html with new styles

* fix linkifying link text

* add reaction component

* display message reactions in timeline

* Change mention color

* show edited message

* add event sent by function factory

* add functions to get emoji shortcode

* add component for reaction msg

* add tooltip for who has reacted

* add message layouts & placeholder

* fix reaction size

* fix dark theme colors

* add code highlight with prismjs

* add options to configure spacing in msgs

* render message reply

* fix trim reply from body regex

* fix crash when loading reply

* fix reply hover style

* decrypt event on timeline paginate

* update custom html code style

* remove console logs

* fix virtual paginator scroll to func

* fix virtual paginator scroll to types

* add stop scroll for in view item options

* fix virtual paginator out of range scroll to index

* scroll to and highlight reply on click

* fix reply hover style

* make message avatar clickable

* fix scrollTo issue in virtual paginator

* load reply from fetch

* import virtual paginator restore scroll

* load timeline for specific event

* Fix back pagination recalibration

* fix reply min height

* revert code block colors to secondary

* stop sanitizing text in code block

* add decrypt file util

* add image media component

* update folds

* fix code block font style

* add msg event type

* add scale dimension util

* strict msg layout type

* add image renderer component

* add message content fallback components

* add message matrix event renderer components

* render matrix event using hooks

* add attachment component

* add attachment content types

* handle error when rendering image in timeline

* add video component

* render video

* include blurhash in thumbnails

* generate thumbnails for image message

* fix reactToDom spoiler opts

* add hooks for HTMLMediaElement

* render audio file in timeline

* add msg image content component

* fix image content props

* add video content component

* render new image/video component in timeline

* remove console.log

* convert seconds to milliseconds in video info

* add load thumbnail prop to video content component

* add file saver types

* add file header component

* add file content component

* render file in timeline

* add media control component

* render audio message in room timeline

* remove moved components

* safely load message reply

* add media loading hook

* update media control layout

* add loading indication in audio component

* fill audio play icon when playing audio

* fix media expanding

* add image viewer - WIP

* add pan and zoom control to image viewer

* add text based file viewer

* add pdf viewer

* add error handling in pdf viewer

* add download btn to pdf viewer

* fix file button spinner fill

* fix file opens on re-render

* add range slider in audio content player

* render location in timeline

* update folds

* display membership event in timeline

* make reactions toggle

* render sticker messages in timeline

* render room name, topic, avatar change and event

* fix typos

* update render state event type style

* add  room intro in start of timeline

* add power levels context

* fix wrong param passing in RoomView

* fix sending typing notification in wrong room

Slate onChange callback was not updating with react re-renders.

* send typing status on key up

* add typing indicator component

* add typing member atom

* display typing status in member drawer

* add room view typing member component

* display typing members in room view

* remove old roomTimeline uses

* add event readers hook

* add latest event hook

* display following members in room view

* fetch event instead of event context for reply

* fix typo in virtual paginator hook

* add scroll to latest btn in timeline

* change scroll to latest chip variant

* destructure paginator object to improve perf

* restore forward dir scroll in virtual paginator

* run scroll to bottom in layout effect

* display unread message indicator in timeline

* make component for room timeline float

* add timeline divider component

* add day divider and format message time

* apply message spacing to dividers

* format date in room intro

* send read receipt on message arrive

* add event readers component

* add reply, read receipt, source delete opt

* bug fixes

* update timeline on delete & show reason

* fix empty reaction container style

* show msg selection effect on msg option open

* add report message options

* add options to send quick reactions

* add emoji board in message options

* add reaction viewer

* fix styles

* show view reaction in msg options menu

* fix spacing between two msg by same person

* add option menu in other rendered event

* handle m.room.encrypted messages

* fix italic reply text overflow cut

* handle encrypted sticker messages

* remove console log

* prevent message context menu with alt key pressed

* make mentions clickable in messages

* add options to show and hidden events in timeline

* add option to disable media autoload

* remove old emojiboard opener

* add options to use system emoji

* refresh timeline on reset

* fix stuck typing member in member drawer

src/app/utils/blurHash.ts

@@ -1,15 +1,15 @@
 import { encode } from 'blurhash';
 
-export const MATRIX_BLUR_HASH_PROPERTY_NAME = 'xyz.amorgan.blurhash';
-
 export const encodeBlurHash = (
   img: HTMLImageElement | HTMLVideoElement,
   width?: number,
   height?: number
 ): string | undefined => {
+  const imgWidth = img instanceof HTMLVideoElement ? img.videoWidth : img.width;
+  const imgHeight = img instanceof HTMLVideoElement ? img.videoHeight : img.height;
   const canvas = document.createElement('canvas');
-  canvas.width = width || img.width;
-  canvas.height = height || img.height;
+  canvas.width = width || imgWidth;
+  canvas.height = height || imgHeight;
   const context = canvas.getContext('2d');
 
   if (!context) return undefined;

src/app/utils/common.ts

@@ -11,6 +11,19 @@ export const bytesToSize = (bytes: number): string => {
   return `${(bytes / 1000 ** sizeIndex).toFixed(1)} ${sizes[sizeIndex]}`;
 };
 
+export const millisecondsToMinutesAndSeconds = (milliseconds: number): string => {
+  const seconds = Math.floor(milliseconds / 1000);
+  const mm = Math.floor(seconds / 60);
+  const ss = Math.round(seconds % 60);
+  return `${mm}:${ss < 10 ? '0' : ''}${ss}`;
+};
+
+export const secondsToMinutesAndSeconds = (seconds: number): string => {
+  const mm = Math.floor(seconds / 60);
+  const ss = Math.round(seconds % 60);
+  return `${mm}:${ss < 10 ? '0' : ''}${ss}`;
+};
+
 export const getFileTypeIcon = (icons: Record<IconName, IconSrc>, fileType: string): IconSrc => {
   const type = fileType.toLowerCase();
   if (type.startsWith('audio')) {
@@ -30,3 +43,37 @@ export const fulfilledPromiseSettledResult = <T>(prs: PromiseSettledResult<T>[])
     if (pr.status === 'fulfilled') values.push(pr.value);
     return values;
   }, []);
+
+export const binarySearch = <T>(items: T[], match: (item: T) => -1 | 0 | 1): T | undefined => {
+  const search = (start: number, end: number): T | undefined => {
+    if (start > end) return undefined;
+
+    const mid = Math.floor((start + end) / 2);
+
+    const result = match(items[mid]);
+    if (result === 0) return items[mid];
+
+    if (result === 1) return search(start, mid - 1);
+    return search(mid + 1, end);
+  };
+
+  return search(0, items.length - 1);
+};
+
+export const randomNumberBetween = (min: number, max: number) =>
+  Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const scaleYDimension = (x: number, scaledX: number, y: number): number => {
+  const scaleFactor = scaledX / x;
+  return scaleFactor * y;
+};
+
+export const parseGeoUri = (location: string) => {
+  const [, data] = location.split(':');
+  const [cords] = data.split(';');
+  const [latitude, longitude] = cords.split(',');
+  return {
+    latitude,
+    longitude,
+  };
+};

src/app/utils/dom.ts

@@ -7,7 +7,7 @@ export const editableActiveElement = (): boolean =>
   !!document.activeElement &&
   /^(input)|(textarea)$/.test(document.activeElement.nodeName.toLowerCase());
 
-export const inVisibleScrollArea = (
+export const isIntersectingScrollView = (
   scrollElement: HTMLElement,
   childElement: HTMLElement
 ): boolean => {
@@ -18,10 +18,25 @@ export const inVisibleScrollArea = (
   const childBottom = childTop + childElement.clientHeight;
 
   if (childTop >= scrollTop && childTop < scrollBottom) return true;
-  if (childTop < scrollTop && childBottom > scrollTop) return true;
+  if (childBottom > scrollTop && childBottom <= scrollBottom) return true;
+  if (childTop < scrollTop && childBottom > scrollBottom) return true;
   return false;
 };
 
+export const isInScrollView = (scrollElement: HTMLElement, childElement: HTMLElement): boolean => {
+  const scrollTop = scrollElement.offsetTop + scrollElement.scrollTop;
+  const scrollBottom = scrollTop + scrollElement.offsetHeight;
+  return (
+    childElement.offsetTop >= scrollTop &&
+    childElement.offsetTop + childElement.offsetHeight <= scrollBottom
+  );
+};
+
+export const canFitInScrollView = (
+  scrollElement: HTMLElement,
+  childElement: HTMLElement
+): boolean => childElement.offsetHeight < scrollElement.offsetHeight;
+
 export type FilesOrFile<T extends boolean | undefined = undefined> = T extends true ? File[] : File;
 
 export const selectFile = <M extends boolean | undefined = undefined>(
@@ -131,3 +146,43 @@ export const getThumbnail = (
       resolve(thumbnail ?? undefined);
     }, thumbnailMimeType ?? 'image/jpeg');
   });
+
+export type ScrollInfo = {
+  offsetTop: number;
+  top: number;
+  height: number;
+  viewHeight: number;
+  scrollable: boolean;
+};
+export const getScrollInfo = (target: HTMLElement): ScrollInfo => ({
+  offsetTop: Math.round(target.offsetTop),
+  top: Math.round(target.scrollTop),
+  height: Math.round(target.scrollHeight),
+  viewHeight: Math.round(target.offsetHeight),
+  scrollable: target.scrollHeight > target.offsetHeight,
+});
+
+export const scrollToBottom = (scrollEl: HTMLElement, behavior?: 'auto' | 'instant' | 'smooth') => {
+  scrollEl.scrollTo({
+    top: Math.round(scrollEl.scrollHeight - scrollEl.offsetHeight),
+    behavior,
+  });
+};
+
+export const copyToClipboard = (text: string) => {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text);
+  } else {
+    const host = document.body;
+    const copyInput = document.createElement('input');
+    copyInput.style.position = 'fixed';
+    copyInput.style.opacity = '0';
+    copyInput.value = text;
+    host.append(copyInput);
+
+    copyInput.select();
+    copyInput.setSelectionRange(0, 99999);
+    document.execCommand('Copy');
+    copyInput.remove();
+  }
+};

src/app/utils/matrix.ts

@@ -1,5 +1,16 @@
-import { EncryptedAttachmentInfo, encryptAttachment } from 'browser-encrypt-attachment';
-import { MatrixClient, MatrixError, UploadProgress, UploadResponse } from 'matrix-js-sdk';
+import {
+  EncryptedAttachmentInfo,
+  decryptAttachment,
+  encryptAttachment,
+} from 'browser-encrypt-attachment';
+import {
+  MatrixClient,
+  MatrixError,
+  MatrixEvent,
+  Room,
+  UploadProgress,
+  UploadResponse,
+} from 'matrix-js-sdk';
 import { IImageInfo, IThumbnailContent, IVideoInfo } from '../../types/matrix/common';
 
 export const matchMxId = (id: string): RegExpMatchArray | null =>
@@ -13,6 +24,13 @@ export const getMxIdLocalPart = (userId: string): string | undefined => matchMxI
 
 export const isUserId = (id: string): boolean => validMxId(id) && id.startsWith('@');
 
+export const isRoomId = (id: string): boolean => validMxId(id) && id.startsWith('!');
+
+export const isRoomAlias = (id: string): boolean => validMxId(id) && id.startsWith('#');
+
+export const getRoomWithCanonicalAlias = (mx: MatrixClient, alias: string): Room | undefined =>
+  mx.getRooms()?.find((room) => room.getCanonicalAlias() === alias);
+
 export const getImageInfo = (img: HTMLImageElement, fileOrBlob: File | Blob): IImageInfo => {
   const info: IImageInfo = {};
   info.w = img.width;
@@ -24,7 +42,7 @@ export const getImageInfo = (img: HTMLImageElement, fileOrBlob: File | Blob): II
 
 export const getVideoInfo = (video: HTMLVideoElement, fileOrBlob: File | Blob): IVideoInfo => {
   const info: IVideoInfo = {};
-  info.duration = Number.isNaN(video.duration) ? undefined : video.duration;
+  info.duration = Number.isNaN(video.duration) ? undefined : Math.floor(video.duration * 1000);
   info.w = video.videoWidth;
   info.h = video.videoHeight;
   info.mimetype = fileOrBlob.type;
@@ -79,6 +97,16 @@ export const encryptFile = async (
   };
 };
 
+export const decryptFile = async (
+  dataBuffer: ArrayBuffer,
+  type: string,
+  encInfo: EncryptedAttachmentInfo
+): Promise<Blob> => {
+  const dataArray = await decryptAttachment(dataBuffer, encInfo);
+  const blob = new Blob([dataArray], { type });
+  return blob;
+};
+
 export type TUploadContent = File | Blob;
 
 export type ContentUploadOptions = {
@@ -116,3 +144,19 @@ export const uploadContent = async (
     onError(new MatrixError({ error, errcode }));
   }
 };
+
+export const matrixEventByRecency = (m1: MatrixEvent, m2: MatrixEvent) => m2.getTs() - m1.getTs();
+
+export const factoryEventSentBy = (senderId: string) => (ev: MatrixEvent) =>
+  ev.getSender() === senderId;
+
+export const eventWithShortcode = (ev: MatrixEvent) =>
+  typeof ev.getContent().shortcode === 'string';
+
+export const trimReplyFromBody = (body: string): string => {
+  if (body.match(/^> <.+>/) === null) return body;
+
+  const trimmedBody = body.slice(body.indexOf('\n\n') + 2);
+
+  return trimmedBody || body;
+};

src/app/utils/mimeTypes.ts

@@ -1,17 +1,15 @@
-// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts
-export const ALLOWED_BLOB_MIMETYPES = [
+export const IMAGE_MIME_TYPES = [
   'image/jpeg',
   'image/gif',
   'image/png',
   'image/apng',
   'image/webp',
   'image/avif',
+];
 
-  'video/mp4',
-  'video/webm',
-  'video/ogg',
-  'video/quicktime',
+export const VIDEO_MIME_TYPES = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime'];
 
+export const AUDIO_MIME_TYPES = [
   'audio/mp4',
   'audio/webm',
   'audio/aac',
@@ -25,11 +23,55 @@ export const ALLOWED_BLOB_MIMETYPES = [
   'audio/x-flac',
 ];
 
+export const APPLICATION_MIME_TYPES = [
+  'application/pdf',
+  'application/json',
+  'application/x-sh',
+  'application/ecmascript',
+  'application/javascript',
+  'application/xhtml+xml',
+  'application/xml',
+];
+
+export const TEXT_MIME_TYPE = [
+  'text/plain',
+  'text/html',
+  'text/css',
+  'text/javascript',
+  'text/x-c',
+  'text/csv',
+  'text/tab-separated-values',
+  'text/yaml',
+  'text/x-java-source,java',
+  'text/markdown',
+];
+
+export const READABLE_TEXT_MIME_TYPES = [
+  'application/json',
+  'application/x-sh',
+  'application/ecmascript',
+  'application/javascript',
+  'application/xhtml+xml',
+  'application/xml',
+
+  ...TEXT_MIME_TYPE,
+];
+
+export const ALLOWED_BLOB_MIME_TYPES = [
+  ...IMAGE_MIME_TYPES,
+  ...VIDEO_MIME_TYPES,
+  ...AUDIO_MIME_TYPES,
+  ...APPLICATION_MIME_TYPES,
+  ...TEXT_MIME_TYPE,
+];
+
+export const FALLBACK_MIMETYPE = 'application/octet-stream';
+
 export const getBlobSafeMimeType = (mimeType: string) => {
-  if (typeof mimeType !== 'string') return 'application/octet-stream';
+  if (typeof mimeType !== 'string') return FALLBACK_MIMETYPE;
   const [type] = mimeType.split(';');
-  if (!ALLOWED_BLOB_MIMETYPES.includes(type)) {
-    return 'application/octet-stream';
+  if (!ALLOWED_BLOB_MIME_TYPES.includes(type)) {
+    return FALLBACK_MIMETYPE;
   }
   // Required for Chromium browsers
   if (type === 'video/quicktime') {
@@ -45,3 +87,8 @@ export const safeFile = (f: File) => {
   }
   return f;
 };
+
+export const mimeTypeToExt = (mimeType: string): string => {
+  const extStart = mimeType.lastIndexOf('/') + 1;
+  return mimeType.slice(extStart);
+};

src/app/utils/room.ts

@@ -1,6 +1,7 @@
 import { IconName, IconSrc } from 'folds';
 
 import {
+  EventTimeline,
   IPushRule,
   IPushRules,
   JoinRule,
@@ -9,6 +10,7 @@ import {
   NotificationCountType,
   Room,
 } from 'matrix-js-sdk';
+import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import { AccountDataEvent } from '../../types/matrix/accountData';
 import {
   NotificationType,
@@ -263,3 +265,35 @@ export const parseReplyFormattedBody = (
 
   return `<mx-reply><blockquote>${replyToLink}${userLink}<br />${formattedBody}</blockquote></mx-reply>`;
 };
+
+export const getMemberDisplayName = (room: Room, userId: string): string | undefined => {
+  const member = room.getMember(userId);
+  const name = member?.rawDisplayName;
+  if (name === userId) return undefined;
+  return name;
+};
+
+export const getMemberAvatarMxc = (room: Room, userId: string): string | undefined => {
+  const member = room.getMember(userId);
+  return member?.getMxcAvatarUrl();
+};
+
+export const decryptAllTimelineEvent = async (mx: MatrixClient, timeline: EventTimeline) => {
+  const crypto = mx.getCrypto();
+  if (!crypto) return;
+  const decryptionPromises = timeline
+    .getEvents()
+    .filter((event) => event.isEncrypted())
+    .reverse()
+    .map((event) => event.attemptDecryption(crypto as CryptoBackend, { isRetry: true }));
+  await Promise.allSettled(decryptionPromises);
+};
+
+export const getReactionContent = (eventId: string, key: string, shortcode?: string) => ({
+  'm.relates_to': {
+    event_id: eventId,
+    key,
+    rel_type: 'm.annotation',
+  },
+  shortcode,
+});

src/app/utils/sanitize.ts

@@ -1,3 +1,145 @@
+import sanitizeHtml, { Transformer } from 'sanitize-html';
+
+const MAX_TAG_NESTING = 100;
+
+const permittedHtmlTags = [
+  'font',
+  'del',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'blockquote',
+  'p',
+  'a',
+  'ul',
+  'ol',
+  'sup',
+  'sub',
+  'li',
+  'b',
+  'i',
+  'u',
+  'strong',
+  'em',
+  'strike',
+  's',
+  'code',
+  'hr',
+  'br',
+  'div',
+  'table',
+  'thead',
+  'tbody',
+  'tr',
+  'th',
+  'td',
+  'caption',
+  'pre',
+  'span',
+  'img',
+  'details',
+  'summary',
+];
+
+const urlSchemes = ['https', 'http', 'ftp', 'mailto', 'magnet'];
+
+const permittedTagToAttributes = {
+  font: ['style', 'data-mx-bg-color', 'data-mx-color', 'color'],
+  span: [
+    'style',
+    'data-mx-bg-color',
+    'data-mx-color',
+    'data-mx-spoiler',
+    'data-mx-maths',
+    'data-mx-pill',
+    'data-mx-ping',
+  ],
+  div: ['data-mx-maths'],
+  a: ['name', 'target', 'href', 'rel'],
+  img: ['width', 'height', 'alt', 'title', 'src', 'data-mx-emoticon'],
+  ol: ['start'],
+  code: ['class'],
+};
+
+const transformFontTag: Transformer = (tagName, attribs) => ({
+  tagName,
+  attribs: {
+    ...attribs,
+    style: `background-color: ${attribs['data-mx-bg-color']}; color: ${attribs['data-mx-color']}`,
+  },
+});
+
+const transformSpanTag: Transformer = (tagName, attribs) => ({
+  tagName,
+  attribs: {
+    ...attribs,
+    style: `background-color: ${attribs['data-mx-bg-color']}; color: ${attribs['data-mx-color']}`,
+  },
+});
+
+const transformATag: Transformer = (tagName, attribs) => ({
+  tagName,
+  attribs: {
+    ...attribs,
+    rel: 'noopener',
+    target: '_blank',
+  },
+});
+
+const transformImgTag: Transformer = (tagName, attribs) => {
+  const { src } = attribs;
+  if (src.startsWith('mxc://') === false) {
+    return {
+      tagName: 'a',
+      attribs: {
+        href: src,
+        rel: 'noopener',
+        target: '_blank',
+      },
+      text: attribs.alt || src,
+    };
+  }
+  return {
+    tagName,
+    attribs: {
+      ...attribs,
+    },
+  };
+};
+
+export const sanitizeCustomHtml = (customHtml: string): string =>
+  sanitizeHtml(customHtml, {
+    allowedTags: permittedHtmlTags,
+    allowedAttributes: permittedTagToAttributes,
+    disallowedTagsMode: 'discard',
+    allowedSchemes: urlSchemes,
+    allowedSchemesByTag: {
+      a: urlSchemes,
+    },
+    allowedSchemesAppliedToAttributes: ['href'],
+    allowProtocolRelative: false,
+    allowedClasses: {
+      code: ['language-*'],
+    },
+    allowedStyles: {
+      '*': {
+        color: [/^#(?:[0-9a-fA-F]{3}){1,2}$/],
+        'background-color': [/^#(?:[0-9a-fA-F]{3}){1,2}$/],
+      },
+    },
+    transformTags: {
+      font: transformFontTag,
+      span: transformSpanTag,
+      a: transformATag,
+      img: transformImgTag,
+    },
+    nonTextTags: ['style', 'script', 'textarea', 'option', 'noscript', 'mx-reply'],
+    nestingLimit: MAX_TAG_NESTING,
+  });
+
 export const sanitizeText = (body: string) => {
   const tagsToReplace: Record<string, string> = {
     '&': '&amp;',

src/app/utils/time.ts

@@ -0,0 +1,35 @@
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+
+export const today = (ts: number): boolean => dayjs(ts).isToday();
+
+export const yesterday = (ts: number): boolean => dayjs(ts).isYesterday();
+
+export const timeHourMinute = (ts: number): string => dayjs(ts).format('hh:mm A');
+
+export const timeDayMonYear = (ts: number): string => dayjs(ts).format('D MMM YYYY');
+
+export const timeDayMonthYear = (ts: number): string => dayjs(ts).format('D MMMM YYYY');
+
+export const inSameDay = (ts1: number, ts2: number): boolean => {
+  const dt1 = new Date(ts1);
+  const dt2 = new Date(ts2);
+  return (
+    dt2.getFullYear() === dt1.getFullYear() &&
+    dt2.getMonth() === dt1.getMonth() &&
+    dt2.getDate() === dt1.getDate()
+  );
+};
+
+export const minuteDifference = (ts1: number, ts2: number): number => {
+  const dt1 = new Date(ts1);
+  const dt2 = new Date(ts2);
+
+  let diff = (dt2.getTime() - dt1.getTime()) / 1000;
+  diff /= 60;
+  return Math.abs(Math.round(diff));
+};