Add authenticated media support (#1930)

* chore: Bump matrix-js-sdk to 34.4.0 * feat: Authenticated media support * chore: Use Vite PWA for service worker support * fix: Fix Vite PWA SW entry point Forget this. :P * fix: Also add Nginx rewrite for sw.js * fix: Correct Nginx rewrite * fix: Add Netlify redirect for sw.js Otherwise the generic SPA rewrite to index.html would take effect, breaking Service Worker. * fix: Account for subpath when regisering service worker * chore: Correct types
cinnyapp · Sep 7, 2024 · c6a8fb1 · c6a8fb1
1 parent 043012e
commit c6a8fb1
Show file tree

Hide file tree

Showing 46 changed files with 3,603 additions and 528 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1,3 +1,2 @@
 legacy-peer-deps=true
-save-exact=true
-@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/
+save-exact=true
diff --git a/contrib/nginx/cinny.domain.tld.conf b/contrib/nginx/cinny.domain.tld.conf
@@ -24,6 +24,7 @@ server {
     rewrite ^/manifest.json$ /manifest.json break;
 
     rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
     rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
 
     rewrite ^/public/(.*)$ /public/$1 break;

diff --git a/docker-nginx.conf b/docker-nginx.conf
@@ -9,6 +9,7 @@ server {
     rewrite ^/manifest.json$ /manifest.json break;
 
     rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
     rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
 
     rewrite ^/public/(.*)$ /public/$1 break;

diff --git a/netlify.toml b/netlify.toml
@@ -7,7 +7,12 @@
   from = "/manifest.json"
   to = "/manifest.json"
   status = 200
-
+
+[[redirects]]
+  from = "/sw.js"
+  to = "/sw.js"
+  status = 200
+
 [[redirects]]
   from = "*/olm.wasm"
   to = "/olm.wasm"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@matrix-org/olm": "3.2.14",
+    "@matrix-org/olm": "3.2.15",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -56,7 +56,7 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "29.1.0",
+    "matrix-js-sdk": "34.4.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.29.0",
@@ -90,6 +90,7 @@
     "@types/react-dom": "18.2.17",
     "@types/react-google-recaptcha": "2.1.8",
     "@types/sanitize-html": "2.9.0",
+    "@types/serviceworker": "0.0.95",
     "@types/ua-parser-js": "0.7.36",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
@@ -106,6 +107,7 @@
     "sass": "1.56.2",
     "typescript": "4.9.4",
     "vite": "5.0.13",
+    "vite-plugin-pwa": "0.20.5",
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.1"
   }

diff --git a/src/app/components/editor/Elements.tsx b/src/app/components/editor/Elements.tsx
@@ -13,6 +13,8 @@ import { CommandElement, EmoticonElement, LinkElement, MentionElement } from './
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getBeginCommand } from './utils';
 import { BlockType } from './types';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useSpecVersions } from '../../hooks/useSpecVersions';
 
 // Put this at the start and end of an inline component to work around this Chromium bug:
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
@@ -76,6 +78,8 @@ function RenderEmoticonElement({
   children,
 }: { element: EmoticonElement } & RenderElementProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const selected = useSelected();
   const focused = useFocused();
 
@@ -90,7 +94,7 @@ function RenderEmoticonElement({
         {element.key.startsWith('mxc://') ? (
           <img
             className={css.EmoticonImg}
-            src={mx.mxcUrlToHttp(element.key) ?? element.key}
+            src={mxcUrlToHttp(mx, element.key, useAuthentication) ?? element.key}
             alt={element.shortcode}
           />
         ) : (

diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
@@ -18,6 +18,8 @@ import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
 import { IEmoji, emojis } from '../../../plugins/emoji';
 import { ExtendedPackImage, PackUsage } from '../../../plugins/custom-emoji';
 import { useKeyDown } from '../../../hooks/useKeyDown';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
 
 type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
 
@@ -48,6 +50,8 @@ export function EmoticonAutocomplete({
   requestClose,
 }: EmoticonAutocompleteProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
 
   const imagePacks = useRelevantImagePacks(mx, PackUsage.Emoticon, imagePackRooms);
   const recentEmoji = useRecentEmoji(mx, 20);
@@ -103,7 +107,7 @@ export function EmoticonAutocomplete({
                 <Box
                   shrink="No"
                   as="img"
-                  src={mx.mxcUrlToHttp(key) || key}
+                  src={mxcUrlToHttp(mx, key, useAuthentication) || key}
                   alt={emoticon.shortcode}
                   style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
                 />

diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
@@ -18,6 +18,7 @@ import { useKeyDown } from '../../../hooks/useKeyDown';
 import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
 import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
@@ -84,6 +85,8 @@ export function UserMentionAutocomplete({
   requestClose,
 }: UserMentionAutocompleteProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const roomId: string = room.roomId!;
   const roomAliasOrId = room.getCanonicalAlias() || roomId;
   const members = useRoomMembers(mx, roomId);
@@ -143,7 +146,8 @@ export function UserMentionAutocomplete({
         />
       ) : (
         autoCompleteMembers.map((roomMember) => {
-          const avatarUrl = roomMember.getAvatarUrl(mx.baseUrl, 32, 32, 'crop', undefined, false);
+          const avatarMxcUrl = roomMember.getMxcAvatarUrl();
+          const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication) : undefined;
           return (
             <MenuItem
               key={roomMember.userId}

diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx
@@ -42,13 +42,14 @@ import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../hooks/useRecentEmoji';
 import { ExtendedPackImage, ImagePack, PackUsage } from '../../plugins/custom-emoji';
-import { isUserId } from '../../utils/matrix';
+import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
 import { editableActiveElement, isIntersectingScrollView, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
 import { useDebounce } from '../../hooks/useDebounce';
 import { useThrottle } from '../../hooks/useThrottle';
 import { addRecentEmoji } from '../../plugins/recent-emoji';
 import { mobileOrTablet } from '../../utils/user-agent';
+import { useSpecVersions } from '../../hooks/useSpecVersions';
 
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
@@ -354,11 +355,13 @@ function ImagePackSidebarStack({
   packs,
   usage,
   onItemClick,
+  useAuthentication,
 }: {
   mx: MatrixClient;
   packs: ImagePack[];
   usage: PackUsage;
   onItemClick: (id: string) => void;
+  useAuthentication?: boolean;
 }) {
   const activeGroupId = useAtomValue(activeGroupIdAtom);
   return (
@@ -381,7 +384,7 @@ function ImagePackSidebarStack({
                 height: toRem(24),
                 objectFit: 'contain',
               }}
-              src={mx.mxcUrlToHttp(pack.getPackAvatarUrl(usage) ?? '') || pack.avatarUrl}
+              src={mxcUrlToHttp(mx, pack.getPackAvatarUrl(usage) ?? '', useAuthentication) || pack.avatarUrl}
               alt={label || 'Unknown Pack'}
             />
           </SidebarBtn>
@@ -453,68 +456,70 @@ export function SearchEmojiGroup({
   label,
   id,
   emojis: searchResult,
+  useAuthentication,
 }: {
   mx: MatrixClient;
   tab: EmojiBoardTab;
   label: string;
   id: string;
   emojis: Array<ExtendedPackImage | IEmoji>;
+  useAuthentication?: boolean;
 }) {
   return (
     <EmojiGroup key={id} id={id} label={label}>
       {tab === EmojiBoardTab.Emoji
         ? searchResult.map((emoji) =>
-            'unicode' in emoji ? (
-              <EmojiItem
-                key={emoji.unicode}
-                label={emoji.label}
-                type={EmojiType.Emoji}
-                data={emoji.unicode}
-                shortcode={emoji.shortcode}
-              >
-                {emoji.unicode}
-              </EmojiItem>
-            ) : (
-              <EmojiItem
-                key={emoji.shortcode}
-                label={emoji.body || emoji.shortcode}
-                type={EmojiType.CustomEmoji}
-                data={emoji.url}
-                shortcode={emoji.shortcode}
-              >
-                <img
-                  loading="lazy"
-                  className={css.CustomEmojiImg}
-                  alt={emoji.body || emoji.shortcode}
-                  src={mx.mxcUrlToHttp(emoji.url) ?? emoji.url}
-                />
-              </EmojiItem>
-            )
+          'unicode' in emoji ? (
+            <EmojiItem
+              key={emoji.unicode}
+              label={emoji.label}
+              type={EmojiType.Emoji}
+              data={emoji.unicode}
+              shortcode={emoji.shortcode}
+            >
+              {emoji.unicode}
+            </EmojiItem>
+          ) : (
+            <EmojiItem
+              key={emoji.shortcode}
+              label={emoji.body || emoji.shortcode}
+              type={EmojiType.CustomEmoji}
+              data={emoji.url}
+              shortcode={emoji.shortcode}
+            >
+              <img
+                loading="lazy"
+                className={css.CustomEmojiImg}
+                alt={emoji.body || emoji.shortcode}
+                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+              />
+            </EmojiItem>
           )
+        )
         : searchResult.map((emoji) =>
-            'unicode' in emoji ? null : (
-              <StickerItem
-                key={emoji.shortcode}
-                label={emoji.body || emoji.shortcode}
-                type={EmojiType.Sticker}
-                data={emoji.url}
-                shortcode={emoji.shortcode}
-              >
-                <img
-                  loading="lazy"
-                  className={css.StickerImg}
-                  alt={emoji.body || emoji.shortcode}
-                  src={mx.mxcUrlToHttp(emoji.url) ?? emoji.url}
-                />
-              </StickerItem>
-            )
-          )}
+          'unicode' in emoji ? null : (
+            <StickerItem
+              key={emoji.shortcode}
+              label={emoji.body || emoji.shortcode}
+              type={EmojiType.Sticker}
+              data={emoji.url}
+              shortcode={emoji.shortcode}
+            >
+              <img
+                loading="lazy"
+                className={css.StickerImg}
+                alt={emoji.body || emoji.shortcode}
+                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+              />
+            </StickerItem>
+          )
+        )}
     </EmojiGroup>
   );
 }
 
 export const CustomEmojiGroups = memo(
-  ({ mx, groups }: { mx: MatrixClient; groups: ImagePack[] }) => (
+  ({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
     <>
       {groups.map((pack) => (
         <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
@@ -530,7 +535,7 @@ export const CustomEmojiGroups = memo(
                 loading="lazy"
                 className={css.CustomEmojiImg}
                 alt={image.body || image.shortcode}
-                src={mx.mxcUrlToHttp(image.url) ?? image.url}
+                src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
               />
             </EmojiItem>
           ))}
@@ -540,7 +545,7 @@ export const CustomEmojiGroups = memo(
   )
 );
 
-export const StickerGroups = memo(({ mx, groups }: { mx: MatrixClient; groups: ImagePack[] }) => (
+export const StickerGroups = memo(({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
   <>
     {groups.length === 0 && (
       <Box
@@ -573,7 +578,7 @@ export const StickerGroups = memo(({ mx, groups }: { mx: MatrixClient; groups: I
               loading="lazy"
               className={css.StickerImg}
               alt={image.body || image.shortcode}
-              src={mx.mxcUrlToHttp(image.url) ?? image.url}
+              src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
             />
           </StickerItem>
         ))}
@@ -645,6 +650,8 @@ export function EmojiBoard({
 
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const emojiGroupLabels = useEmojiGroupLabels();
   const emojiGroupIcons = useEmojiGroupIcons();
   const imagePacks = useRelevantImagePacks(mx, usage, imagePackRooms);
@@ -729,14 +736,14 @@ export function EmojiBoard({
       } else if (emojiInfo.type === EmojiType.CustomEmoji && emojiPreviewRef.current) {
         const img = document.createElement('img');
         img.className = css.CustomEmojiImg;
-        img.setAttribute('src', mx.mxcUrlToHttp(emojiInfo.data) || emojiInfo.data);
+        img.setAttribute('src', mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data);
         img.setAttribute('alt', emojiInfo.shortcode);
         emojiPreviewRef.current.textContent = '';
         emojiPreviewRef.current.appendChild(img);
       }
       emojiPreviewTextRef.current.textContent = `:${emojiInfo.shortcode}:`;
     },
-    [mx]
+    [mx, useAuthentication]
   );
 
   const throttleEmojiHover = useThrottle(handleEmojiPreview, {
@@ -829,6 +836,7 @@ export function EmojiBoard({
                 usage={usage}
                 packs={imagePacks}
                 onItemClick={handleScrollToGroup}
+                useAuthentication={useAuthentication}
               />
             )}
             {emojiTab && (
@@ -890,13 +898,14 @@ export function EmojiBoard({
                   id={SEARCH_GROUP_ID}
                   label={result.items.length ? 'Search Results' : 'No Results found'}
                   emojis={result.items}
+                  useAuthentication={useAuthentication}
                 />
               )}
               {emojiTab && recentEmojis.length > 0 && (
                 <RecentEmojiGroup id={RECENT_GROUP_ID} label="Recent" emojis={recentEmojis} />
               )}
-              {emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} />}
-              {stickerTab && <StickerGroups mx={mx} groups={imagePacks} />}
+              {emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
+              {stickerTab && <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
               {emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
             </Box>
           </Scroll>