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

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -86,6 +86,8 @@ import { openInviteUser, openSpaceSettings } from '../../../../client/action/nav
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
+import { getRoomAvatarUrl } from '../../../utils/room';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
 
 type SpaceMenuProps = {
   room: Room;
@@ -225,18 +227,18 @@ const useDraggableItem = (
     return !target
       ? undefined
       : draggable({
-          element: target,
-          dragHandle,
-          getInitialData: () => ({ item }),
-          onDragStart: () => {
-            setDragging(true);
-            onDragging?.(item);
-          },
-          onDrop: () => {
-            setDragging(false);
-            onDragging?.(undefined);
-          },
-        });
+        element: target,
+        dragHandle,
+        getInitialData: () => ({ item }),
+        onDragStart: () => {
+          setDragging(true);
+          onDragging?.(item);
+        },
+        onDrop: () => {
+          setDragging(false);
+          onDragging?.(undefined);
+        },
+      });
   }, [targetRef, dragHandleRef, item, onDragging]);
 
   return dragging;
@@ -379,15 +381,17 @@ function SpaceTab({
   onUnpin,
 }: SpaceTabProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const targetRef = useRef<HTMLDivElement>(null);
 
   const spaceDraggable: SidebarDraggable = useMemo(
     () =>
       folder
         ? {
-            folder,
-            spaceId: space.roomId,
-          }
+          folder,
+          spaceId: space.roomId,
+        }
         : space.roomId,
     [folder, space]
   );
@@ -431,7 +435,7 @@ function SpaceTab({
               >
                 <RoomAvatar
                   roomId={space.roomId}
-                  src={space.getAvatarUrl(mx.baseUrl, 96, 96, 'crop') ?? undefined}
+                  src={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? undefined}
                   alt={space.name}
                   renderFallback={() => (
                     <Text size={folder ? 'H6' : 'H4'}>{nameInitials(space.name, 2)}</Text>
@@ -524,6 +528,8 @@ function ClosedSpaceFolder({
   disabled,
 }: ClosedSpaceFolderProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const handlerRef = useRef<HTMLDivElement>(null);
 
   const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]);
@@ -556,7 +562,7 @@ function ClosedSpaceFolder({
                     <SidebarAvatar key={sId} size="200" radii="300">
                       <RoomAvatar
                         roomId={space.roomId}
-                        src={space.getAvatarUrl(mx.baseUrl, 96, 96, 'crop') ?? undefined}
+                        src={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? undefined}
                         alt={space.name}
                         renderFallback={() => (
                           <Text size="Inherit">

src/app/pages/client/sidebar/UserTab.tsx

@@ -5,8 +5,9 @@ import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../compone
 import { openSettings } from '../../../../client/action/navigation';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getMxIdLocalPart } from '../../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
 import { nameInitials } from '../../../utils/common';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
 
 type UserProfile = {
   avatar_url?: string;
@@ -14,12 +15,14 @@ type UserProfile = {
 };
 export function UserTab() {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const userId = mx.getUserId()!;
 
   const [profile, setProfile] = useState<UserProfile>({});
   const displayName = profile.displayname ?? getMxIdLocalPart(userId) ?? userId;
   const avatarUrl = profile.avatar_url
-    ? mx.mxcUrlToHttp(profile.avatar_url, 96, 96, 'crop') ?? undefined
+    ? mxcUrlToHttp(mx, profile.avatar_url, useAuthentication, 96, 96, 'crop') ?? undefined
     : undefined;
 
   useEffect(() => {