authenticate remaining media endpoints

src/app/molecules/image-pack/ImagePack.jsx

@@ -1,6 +1,4 @@
-import React, {
-  useState, useMemo, useReducer, useEffect,
-} from 'react';
+import React, { useState, useMemo, useReducer, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './ImagePack.scss';
 
@@ -19,41 +17,41 @@ import ImagePackProfile from './ImagePackProfile';
 import ImagePackItem from './ImagePackItem';
 import ImagePackUpload from './ImagePackUpload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
-const renameImagePackItem = (shortcode) => new Promise((resolve) => {
-  let isCompleted = false;
+const renameImagePackItem = (shortcode) =>
+  new Promise((resolve) => {
+    let isCompleted = false;
 
-  openReusableDialog(
-    <Text variant="s1" weight="medium">Rename</Text>,
-    (requestClose) => (
-      <div style={{ padding: 'var(--sp-normal)' }}>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            const sc = e.target.shortcode.value;
-            if (sc.trim() === '') return;
-            isCompleted = true;
-            resolve(sc.trim());
-            requestClose();
-          }}
-        >
-          <Input
-            value={shortcode}
-            name="shortcode"
-            label="Shortcode"
-            autoFocus
-            required
-          />
-          <div style={{ height: 'var(--sp-normal)' }} />
-          <Button variant="primary" type="submit">Rename</Button>
-        </form>
-      </div>
-    ),
-    () => {
-      if (!isCompleted) resolve(null);
-    },
-  );
-});
+    openReusableDialog(
+      <Text variant="s1" weight="medium">
+        Rename
+      </Text>,
+      (requestClose) => (
+        <div style={{ padding: 'var(--sp-normal)' }}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              const sc = e.target.shortcode.value;
+              if (sc.trim() === '') return;
+              isCompleted = true;
+              resolve(sc.trim());
+              requestClose();
+            }}
+          >
+            <Input value={shortcode} name="shortcode" label="Shortcode" autoFocus required />
+            <div style={{ height: 'var(--sp-normal)' }} />
+            <Button variant="primary" type="submit">
+              Rename
+            </Button>
+          </form>
+        </div>
+      ),
+      () => {
+        if (!isCompleted) resolve(null);
+      }
+    );
+  });
 
 function getUsage(usage) {
   if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
@@ -79,7 +77,7 @@ function useRoomImagePack(roomId, stateKey) {
 
   const pack = useMemo(() => {
     const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-    return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
+    return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent());
   }, [room, stateKey]);
 
   const sendPackContent = (content) => {
@@ -96,10 +94,13 @@ function useUserImagePack() {
   const mx = useMatrixClient();
   const pack = useMemo(() => {
     const packEvent = mx.getAccountData('im.ponies.user_emotes');
-    return ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
-      pack: { display_name: 'Personal' },
-      images: {},
-    })
+    return ImagePackBuilder.parsePack(
+      mx.getUserId(),
+      packEvent?.getContent() ?? {
+        pack: { display_name: 'Personal' },
+        images: {},
+      }
+    );
   }, [mx]);
 
   const sendPackContent = (content) => {
@@ -119,10 +120,7 @@ function useImagePackHandles(pack, sendPackContent) {
     if (typeof key !== 'string') return undefined;
     let newKey = key?.replace(/\s/g, '_');
     if (pack.getImages().get(newKey)) {
-      newKey = suffixRename(
-        newKey,
-        (suffixedKey) => pack.getImages().get(suffixedKey),
-      );
+      newKey = suffixRename(newKey, (suffixedKey) => pack.getImages().get(suffixedKey));
     }
     return newKey;
   };
@@ -163,7 +161,7 @@ function useImagePackHandles(pack, sendPackContent) {
       'Delete',
       `Are you sure that you want to delete "${key}"?`,
       'Delete',
-      'danger',
+      'danger'
     );
     if (!isConfirmed) return;
     pack.removeImage(key);
@@ -226,6 +224,7 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   const room = mx.getRoom(roomId);
   const [viewMore, setViewMore] = useState(false);
   const [isGlobal, setIsGlobal] = useState(isGlobalPack(mx, roomId, stateKey));
+  const useAuthentication = useMediaAuthentication();
 
   const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
 
@@ -253,7 +252,7 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
       'Delete Pack',
       `Are you sure that you want to delete "${pack.displayName}"?`,
       'Delete',
-      'danger',
+      'danger'
     );
     if (!isConfirmed) return;
     handlePackDelete(stateKey);
@@ -264,7 +263,19 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        avatarUrl={
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(
+                pack.avatarUrl,
+                42,
+                42,
+                'crop',
+                undefined,
+                undefined,
+                useAuthentication
+              )
+            : null
+        }
         displayName={pack.displayName ?? 'Unknown'}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
@@ -272,10 +283,8 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
         onAvatarChange={canChange ? handleAvatarChange : null}
         onEditProfile={canChange ? handleEditProfile : null}
       />
-      { canChange && (
-        <ImagePackUpload onUpload={handleAddItem} />
-      )}
-      { images.length === 0 ? null : (
+      {canChange && <ImagePackUpload onUpload={handleAddItem} />}
+      {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -285,7 +294,15 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
           {images.map(([shortcode, image]) => (
             <ImagePackItem
               key={shortcode}
-              url={mx.mxcUrlToHttp(image.mxc)}
+              url={mx.mxcUrlToHttp(
+                image.mxc,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                useAuthentication
+              )}
               shortcode={shortcode}
               usage={getUsage(image.usage)}
               onUsageChange={canChange ? handleUsageItem : undefined}
@@ -299,14 +316,14 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
         <div className="image-pack__footer">
           {pack.images.size > 2 && (
             <Button onClick={() => setViewMore(!viewMore)}>
-              {
-                viewMore
-                  ? 'View less'
-                  : `View ${pack.images.size - 2} more`
-              }
+              {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
+            </Button>
+          )}
+          {handlePackDelete && (
+            <Button variant="danger" onClick={handleDeletePack}>
+              Delete Pack
             </Button>
           )}
-          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
         </div>
       )}
       <div className="image-pack__global">
@@ -332,6 +349,7 @@ ImagePack.propTypes = {
 function ImagePackUser() {
   const mx = useMatrixClient();
   const [viewMore, setViewMore] = useState(false);
+  const useAuthentication = useMediaAuthentication();
 
   const { pack, sendPackContent } = useUserImagePack();
 
@@ -350,7 +368,19 @@ function ImagePackUser() {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        avatarUrl={
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(
+                pack.avatarUrl,
+                42,
+                42,
+                'crop',
+                undefined,
+                undefined,
+                useAuthentication
+              )
+            : null
+        }
         displayName={pack.displayName ?? 'Personal'}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
@@ -359,7 +389,7 @@ function ImagePackUser() {
         onEditProfile={handleEditProfile}
       />
       <ImagePackUpload onUpload={handleAddItem} />
-      { images.length === 0 ? null : (
+      {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -369,7 +399,15 @@ function ImagePackUser() {
           {images.map(([shortcode, image]) => (
             <ImagePackItem
               key={shortcode}
-              url={mx.mxcUrlToHttp(image.mxc)}
+              url={mx.mxcUrlToHttp(
+                image.mxc,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                useAuthentication
+              )}
               shortcode={shortcode}
               usage={getUsage(image.usage)}
               onUsageChange={handleUsageItem}
@@ -379,14 +417,10 @@ function ImagePackUser() {
           ))}
         </div>
       )}
-      {(pack.images.size > 2) && (
+      {pack.images.size > 2 && (
         <div className="image-pack__footer">
           <Button onClick={() => setViewMore(!viewMore)}>
-            {
-              viewMore
-                ? 'View less'
-                : `View ${pack.images.size - 2} more`
-            }
+            {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
           </Button>
         </div>
       )}
@@ -435,29 +469,33 @@ function ImagePackGlobal() {
     <div className="image-pack-global">
       <MenuHeader>Global packs</MenuHeader>
       <div>
-        {
-          roomIdToStateKeys.size > 0
-            ? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
-              const room = mx.getRoom(roomId);
+        {roomIdToStateKeys.size > 0 ? (
+          [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
+            const room = mx.getRoom(roomId);
+            return stateKeys.map((stateKey) => {
+              const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+              const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
+              if (!pack) return null;
               return (
-                stateKeys.map((stateKey) => {
-                  const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-                  const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
-                  if (!pack) return null;
-                  return (
-                    <div className="image-pack__global" key={pack.id}>
-                      <Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
-                      <div>
-                        <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
-                        <Text variant="b3">{room.name}</Text>
-                      </div>
-                    </div>
-                  );
-                })
+                <div className="image-pack__global" key={pack.id}>
+                  <Checkbox
+                    variant="positive"
+                    onToggle={() => handleChange(roomId, stateKey)}
+                    isActive
+                  />
+                  <div>
+                    <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
+                    <Text variant="b3">{room.name}</Text>
+                  </div>
+                </div>
               );
-            })
-            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
-        }
+            });
+          })
+        ) : (
+          <div className="image-pack-global__empty">
+            <Text>No global packs</Text>
+          </div>
+        )}
       </div>
     </div>
   );

src/app/organisms/invite-user/InviteUser.jsx

@@ -18,11 +18,13 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { getDMRoomFor } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
   const [isSearching, updateIsSearching] = useState(false);
   const [searchQuery, updateSearchQuery] = useState({});
   const [users, updateUsers] = useState([]);
+  const useAuthentication = useMediaAuthentication();
 
   const [procUsers, updateProcUsers] = useState(new Set()); // proc stands for processing.
   const [procUserError, updateUserProcError] = useState(new Map());
@@ -222,7 +224,15 @@ function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
           key={userId}
           avatarSrc={
             typeof user.avatar_url === 'string'
-              ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop')
+              ? mx.mxcUrlToHttp(
+                  user.avatar_url,
+                  42,
+                  42,
+                  'crop',
+                  undefined,
+                  undefined,
+                  useAuthentication
+                )
               : null
           }
           name={name}

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -14,15 +14,19 @@ import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import './ProfileEditor.scss';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function ProfileEditor({ userId }) {
   const [isEditing, setIsEditing] = useState(false);
   const mx = useMatrixClient();
   const user = mx.getUser(mx.getUserId());
+  const useAuthentication = useMediaAuthentication();
 
   const displayNameRef = useRef(null);
   const [avatarSrc, setAvatarSrc] = useState(
-    user.avatarUrl ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop') : null
+    user.avatarUrl
+      ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop', undefined, undefined, useAuthentication)
+      : null
   );
   const [username, setUsername] = useState(user.displayName);
   const [disabled, setDisabled] = useState(true);
@@ -31,13 +35,25 @@ function ProfileEditor({ userId }) {
     let isMounted = true;
     mx.getProfileInfo(mx.getUserId()).then((info) => {
       if (!isMounted) return;
-      setAvatarSrc(info.avatar_url ? mx.mxcUrlToHttp(info.avatar_url, 80, 80, 'crop') : null);
+      setAvatarSrc(
+        info.avatar_url
+          ? mx.mxcUrlToHttp(
+              info.avatar_url,
+              80,
+              80,
+              'crop',
+              undefined,
+              undefined,
+              useAuthentication
+            )
+          : null
+      );
       setUsername(info.displayname);
     });
     return () => {
       isMounted = false;
     };
-  }, [mx, userId]);
+  }, [mx, userId, useAuthentication]);
 
   const handleAvatarUpload = async (url) => {
     if (url === null) {
@@ -54,7 +70,7 @@ function ProfileEditor({ userId }) {
       return;
     }
     mx.setAvatarUrl(url);
-    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
+    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop', undefined, undefined, useAuthentication));
   };
 
   const saveDisplayName = () => {

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -36,6 +36,7 @@ import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { getDMRoomFor } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function ModerationTools({ roomId, userId }) {
   const mx = useMatrixClient();
@@ -329,6 +330,7 @@ function useRerenderOnProfileChange(roomId, userId) {
 function ProfileViewer() {
   const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
   useRerenderOnProfileChange(roomId, userId);
+  const useAuthentication = useMediaAuthentication();
 
   const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
@@ -338,7 +340,9 @@ function ProfileViewer() {
     const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(mx, userId);
     const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
     const avatarUrl =
-      avatarMxc && avatarMxc !== 'null' ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
+      avatarMxc && avatarMxc !== 'null'
+        ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop', undefined, undefined, useAuthentication)
+        : null;
 
     const powerLevel = roomMember?.powerLevel || 0;
     const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;