Merge branch 'custom-emoji-viewer' of https://github.com/ajbura/cinny into custom-emoji-viewer

.github/workflows/build-pull-request.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v3.3.0
+        uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
       - name: Build app

.github/workflows/docker-pr.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Build Docker image
-        uses: docker/build-push-action@v3.0.0
+        uses: docker/build-push-action@v3.1.0
         with:
           context: .
           push: false

.github/workflows/netlify-dev.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v3.3.0
+        uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
       - name: Build and deploy to Netlify

.github/workflows/prod-deploy.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v3.3.0
+        uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
       - name: Build
@@ -50,7 +50,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v3.3.0
+        uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
       - name: Build and deploy to Netlify
@@ -86,7 +86,7 @@ jobs:
         with:
           images: ajbura/cinny
       - name: Build and push Docker image
-        uses: docker/build-push-action@v3.0.0
+        uses: docker/build-push-action@v3.1.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

Dockerfile

@@ -10,7 +10,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.23.0-alpine
+FROM nginx:1.23.1-alpine
 
 COPY --from=builder /src/dist /app
 

package.json

@@ -26,8 +26,8 @@
     "file-saver": "^2.0.5",
     "flux": "^4.0.3",
     "formik": "^2.2.9",
-    "html-react-parser": "^2.0.0",
-    "katex": "^0.15.6",
+    "html-react-parser": "^3.0.1",
+    "katex": "^0.16.0",
     "linkify-html": "^4.0.0-beta.5",
     "linkifyjs": "^4.0.0-beta.5",
     "matrix-js-sdk": "^18.1.0",
@@ -45,13 +45,13 @@
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",
     "react-modal": "^3.15.1",
-    "sanitize-html": "^2.7.0",
+    "sanitize-html": "^2.7.1",
     "tippy.js": "^6.3.7",
     "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "assert": "^2.0.0",
     "babel-loader": "^8.2.5",
@@ -62,25 +62,25 @@
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.19.0",
+    "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "favicons": "^6.2.2",
     "favicons-webpack-plugin": "^5.0.2",
-    "html-loader": "^3.1.2",
+    "html-loader": "^4.1.0",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^2.6.1",
     "path-browserify": "^1.0.1",
-    "sass": "^1.53.0",
+    "sass": "^1.54.1",
     "sass-loader": "^13.0.2",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3",
     "webpack-merge": "^5.7.3"

src/app/atoms/math/Math.jsx

@@ -5,7 +5,6 @@ import katex from 'katex';
 import 'katex/dist/katex.min.css';
 
 import 'katex/dist/contrib/copy-tex';
-import 'katex/dist/contrib/copy-tex.css';
 
 const Math = React.memo(({
   content, throwOnError, errorColor, displayMode,

src/app/molecules/media/Media.jsx

@@ -12,15 +12,19 @@ import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
 import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
 import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
 
-// https://github.com/matrix-org/matrix-react-sdk/blob/a9e28db33058d1893d964ec96cd247ecc3d92fc3/src/utils/blobs.ts#L73
+// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts#L73
 const ALLOWED_BLOB_MIMETYPES = [
   'image/jpeg',
   'image/gif',
   'image/png',
+  'image/apng',
+  'image/webp',
+  'image/avif',
 
   'video/mp4',
   'video/webm',
   'video/ogg',
+  'video/quicktime',
 
   'audio/mp4',
   'audio/webm',
@@ -38,6 +42,10 @@ function getBlobSafeMimeType(mimetype) {
   if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
     return 'application/octet-stream';
   }
+  // Required for Chromium browsers
+  if (mimetype === 'video/quicktime') {
+    return 'video/mp4';
+  }
   return mimetype;
 }
 

src/app/molecules/room-profile/RoomProfile.jsx

@@ -132,7 +132,7 @@ function RoomProfile({ roomId }) {
 
   const renderEditNameAndTopic = () => (
     <form className="room-profile__edit-form" onSubmit={handleOnSubmit}>
-      {canChangeName && <Input value={roomName} name="room-name" disabled={status.type === cons.status.IN_FLIGHT} label="Name" required />}
+      {canChangeName && <Input value={roomName} name="room-name" disabled={status.type === cons.status.IN_FLIGHT} label="Name" />}
       {canChangeTopic && <Input value={roomTopic} name="room-topic" disabled={status.type === cons.status.IN_FLIGHT} minHeight={100} resizable label="Topic" />}
       {(!canChangeName || !canChangeTopic) && <Text variant="b3">{`You have permission to change ${room.isSpaceRoom() ? 'space' : 'room'} ${canChangeName ? 'name' : 'topic'} only.`}</Text>}
       { status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}

src/app/molecules/space-options/SpaceOptions.jsx

@@ -5,6 +5,7 @@ import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 import { openSpaceSettings, openSpaceManage, openInviteUser } from '../../../client/action/navigation';
+import { markAsRead } from '../../../client/action/notifications';
 import { leave } from '../../../client/action/room';
 import {
   createSpaceShortcut,
@@ -17,6 +18,7 @@ import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
 
 import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
 import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
@@ -28,11 +30,21 @@ import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 
 function SpaceOptions({ roomId, afterOptionSelect }) {
   const mx = initMatrix.matrixClient;
+  const { roomList } = initMatrix;
   const room = mx.getRoom(roomId);
   const canInvite = room?.canInvite(mx.getUserId());
   const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
   const isCategorized = initMatrix.accountData.categorizedSpaces.has(roomId);
 
+  const handleMarkAsRead = () => {
+    const spaceChildren = roomList.getCategorizedSpaces([roomId]);
+    spaceChildren?.forEach((childIds, spaceId) => {
+      childIds?.forEach((childId) => {
+        markAsRead(childId);
+      })
+    });
+    afterOptionSelect();
+  };
   const handleInviteClick = () => {
     openInviteUser(roomId);
     afterOptionSelect();
@@ -71,6 +83,7 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
   return (
     <div style={{ maxWidth: 'calc(var(--navigation-drawer-width) - var(--sp-normal))' }}>
       <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
+      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
       <MenuItem
         onClick={handleCategorizeClick}
         iconSrc={isCategorized ? CategoryFilledIC : CategoryIC}

src/client/event/hotkeys.js

@@ -51,9 +51,6 @@ function listenKeyboard(event) {
 
   if (!event.ctrlKey && !event.altKey && !event.metaKey) {
     if (navigation.isRawModalVisible) return;
-    if (['input', 'textarea'].includes(document.activeElement.tagName.toLowerCase())) {
-      return;
-    }
 
     if (event.code === 'Escape') {
       if (navigation.isRoomSettings) {
@@ -66,6 +63,10 @@ function listenKeyboard(event) {
       }
     }
 
+    if (['input', 'textarea'].includes(document.activeElement.tagName.toLowerCase())) {
+      return;
+    }
+
     // focus the text field on most keypresses
     if (shouldFocusMessageField(event.code)) {
       // press any key to focus and type in message field

src/client/state/RoomsInput.js

@@ -35,7 +35,12 @@ function loadVideo(videoFile) {
     reader.onerror = (e) => {
       reject(e);
     };
-    reader.readAsDataURL(videoFile);
+    if (videoFile.type === 'video/quicktime') {
+      const quicktimeVideoFile = new File([videoFile], videoFile.name, { type: 'video/mp4' });
+      reader.readAsDataURL(quicktimeVideoFile);
+    } else {
+      reader.readAsDataURL(videoFile);
+    }
   });
 }
 function getVideoThumbnail(video, width, height, mimeType) {