Simplify widget detection

Use the exists check for the widget API directly
instead of a feature flag.

src/Avatar.test.tsx

@@ -13,19 +13,14 @@ import { type FC, type PropsWithChildren } from "react";
 import { ClientContextProvider } from "./ClientContext";
 import { Avatar } from "./Avatar";
 import { mockMatrixRoomMember, mockRtcMembership } from "./utils/test";
-import EventEmitter from "events";
 import { widget } from "./widget";
+import { WidgetApi } from "matrix-widget-api";
 
 const TestComponent: FC<
   PropsWithChildren<{
     client: MatrixClient;
-    supportsAuthenticatedMedia?: boolean;
   }>
-> = ({
+> = ({ client, children }) => {
-  client,
-  children,
-  supportsAuthenticatedMedia: supportsAuthenticatedMedia,
-}) => {
   return (
     <ClientContextProvider
       value={{
@@ -33,7 +28,6 @@ const TestComponent: FC<
         disconnected: false,
         supportedFeatures: {
           reactions: true,
-          authenticatedMedia: supportsAuthenticatedMedia ?? true,
         },
         setClient: vi.fn(),
         authenticated: {
@@ -51,7 +45,7 @@ const TestComponent: FC<
 
 vi.mock("./widget", () => ({
   widget: {
-    api: { downloadFile: vi.fn() },
+    api: null, // Ideally we'd only mock this in the as a widget test so the whole module is otherwise null, but just nulling `api` by default works well enough
   },
 }));
 
@@ -88,7 +82,7 @@ test("should just render a placeholder when the user has no avatar", () => {
   expect(client.mxcUrlToHttp).toBeCalledTimes(0);
 });
 
-test("should attempt to fetch authenticated media if supported", async () => {
+test("should attempt to fetch authenticated media from the server", async () => {
   const expectedAuthUrl = "http://example.org/media/alice-avatar";
   const expectedObjectURL = "my-object-url";
   const accessToken = "my-access-token";
@@ -120,7 +114,7 @@ test("should attempt to fetch authenticated media if supported", async () => {
   );
   const displayName = "Alice";
   render(
-    <TestComponent client={client} supportsAuthenticatedMedia={true}>
+    <TestComponent client={client}>
       <Avatar
         id={member.userId}
         name={displayName}
@@ -141,7 +135,7 @@ test("should attempt to fetch authenticated media if supported", async () => {
   });
 });
 
-test("should attempt to use widget API if authenticate media is not supported", async () => {
+test("should attempt to use widget API if running as a widget", async () => {
   const expectedMXCUrl = "mxc://example.org/alice-avatar";
   const expectedObjectURL = "my-object-url";
   const theBlob = new Blob([]);
@@ -157,6 +151,7 @@ test("should attempt to use widget API if authenticate media is not supported",
     getAccessToken: () => undefined,
   } as unknown as MatrixClient);
 
+  widget!.api = { downloadFile: vi.fn() } as unknown as WidgetApi;
   vi.spyOn(widget!.api, "downloadFile").mockResolvedValue({ file: theBlob });
   const member = mockMatrixRoomMember(
     mockRtcMembership("@alice:example.org", "AAAA"),
@@ -166,7 +161,7 @@ test("should attempt to use widget API if authenticate media is not supported",
   );
   const displayName = "Alice";
   render(
-    <TestComponent client={client} supportsAuthenticatedMedia={false}>
+    <TestComponent client={client}>
       <Avatar
         id={member.userId}
         name={displayName}

src/Avatar.tsx

@@ -87,23 +87,23 @@ export const Avatar: FC<Props> = ({
 
   const [avatarUrl, setAvatarUrl] = useState<string | undefined>(undefined);
 
+  // In theory, a change in `clientState` or `sizePx` could run extra getAvatarFromWidgetAPI calls, but in practice they should be stable long before this code runs.
   useEffect(() => {
-    if (!src || clientState?.state !== "valid") {
+    if (!src) {
       setAvatarUrl(undefined);
       return;
     }
 
-    const { authenticated, supportedFeatures } = clientState;
     let blob: Promise<Blob>;
 
-    if (
+    if (widget?.api) {
-      supportedFeatures.authenticatedMedia &&
+      blob = getAvatarFromWidgetAPI(widget.api, src);
-      authenticated?.client &&
+    } else if (
+      clientState?.state === "valid" &&
+      clientState.authenticated?.client &&
       sizePx
     ) {
-      blob = getAvatarFromServer(authenticated.client, src, sizePx);
+      blob = getAvatarFromServer(clientState.authenticated.client, src, sizePx);
-    } else if (widget?.api) {
-      blob = getAvatarFromWidgetAPI(widget.api, src);
     } else {
       setAvatarUrl(undefined);
       return;

src/ClientContext.tsx

@@ -48,7 +48,6 @@ export type ValidClientState = {
   disconnected: boolean;
   supportedFeatures: {
     reactions: boolean;
-    authenticatedMedia: boolean;
   };
   setClient: (client: MatrixClient, session: Session) => void;
 };
@@ -249,8 +248,6 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
   const [isDisconnected, setIsDisconnected] = useState(false);
   const [supportsReactions, setSupportsReactions] = useState(false);
-  const [supportsAuthenticatedMedia, setSupportsAuthenticatedMedia] =
-    useState(false);
 
   const state: ClientState | undefined = useMemo(() => {
     if (alreadyOpenedErr) {
@@ -276,7 +273,6 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       disconnected: isDisconnected,
       supportedFeatures: {
         reactions: supportsReactions,
-        authenticatedMedia: supportsAuthenticatedMedia,
       },
     };
   }, [
@@ -287,7 +283,6 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     setClient,
     isDisconnected,
     supportsReactions,
-    supportsAuthenticatedMedia,
   ]);
 
   const onSync = useCallback(
@@ -313,8 +308,6 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     }
 
     if (initClientState.widgetApi) {
-      // There is currently no way for widgets to request authenticated media directly from the server.
-      setSupportsAuthenticatedMedia(false);
       const reactSend = initClientState.widgetApi.hasCapability(
         "org.matrix.msc2762.send.event:m.reaction",
       );
@@ -336,7 +329,6 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       }
     } else {
       setSupportsReactions(true);
-      setSupportsAuthenticatedMedia(true);
     }
 
     return (): void => {

src/settings/useSubmitRageshake.test.tsx

@@ -78,7 +78,6 @@ function renderWithMockClient(
         disconnected: false,
         supportedFeatures: {
           reactions: true,
-          authenticatedMedia: true,
         },
         setClient: vi.fn(),
         authenticated: {