Check for reaction & redaction capabilities in widget mode

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

src/App.tsx

@@ -28,6 +28,7 @@ import { Initializer } from "./initializer";
 import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
 import { widget } from "./widget";
 import { useTheme } from "./useTheme";
+import { ReactionsProvider } from "./useReactions";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -82,27 +83,29 @@ export const App: FC<AppProps> = ({ history }) => {
           <TooltipProvider>
             {loaded ? (
               <Suspense fallback={null}>
-                <ClientProvider>
-                  <MediaDevicesProvider>
-                    <Sentry.ErrorBoundary fallback={errorPage}>
-                      <DisconnectedBanner />
-                      <Switch>
-                        <SentryRoute exact path="/">
-                          <HomePage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/login">
-                          <LoginPage />
-                        </SentryRoute>
-                        <SentryRoute exact path="/register">
-                          <RegisterPage />
-                        </SentryRoute>
-                        <SentryRoute path="*">
-                          <RoomPage />
-                        </SentryRoute>
-                      </Switch>
-                    </Sentry.ErrorBoundary>
-                  </MediaDevicesProvider>
-                </ClientProvider>
+                <ReactionsProvider>
+                  <ClientProvider>
+                    <MediaDevicesProvider>
+                      <Sentry.ErrorBoundary fallback={errorPage}>
+                        <DisconnectedBanner />
+                        <Switch>
+                          <SentryRoute exact path="/">
+                            <HomePage />
+                          </SentryRoute>
+                          <SentryRoute exact path="/login">
+                            <LoginPage />
+                          </SentryRoute>
+                          <SentryRoute exact path="/register">
+                            <RegisterPage />
+                          </SentryRoute>
+                          <SentryRoute path="*">
+                            <RoomPage />
+                          </SentryRoute>
+                        </Switch>
+                      </Sentry.ErrorBoundary>
+                    </MediaDevicesProvider>
+                  </ClientProvider>
+                </ReactionsProvider>
               </Suspense>
             ) : (
               <LoadingView />

src/ClientContext.tsx

@@ -25,6 +25,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { WidgetApi } from "matrix-widget-api";
 
 import { ErrorView } from "./FullScreenView";
 import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
@@ -36,6 +37,7 @@ import {
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
 import { Config } from "./config/Config";
+import { useReactions } from "./useReactions";
 
 declare global {
   interface Window {
@@ -144,6 +146,7 @@ interface Props {
 }
 
 export const ClientProvider: FC<Props> = ({ children }) => {
+  const { setSupportsReactions } = useReactions();
   const history = useHistory();
 
   // null = signed out, undefined = loading
@@ -188,11 +191,11 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       saveSession({ ...session, passwordlessUser: false });
 
       setInitClientState({
-        client: initClientState.client,
+        ...initClientState,
         passwordlessUser: false,
       });
     },
-    [initClientState?.client],
+    [initClientState],
   );
 
   const setClient = useCallback(
@@ -206,6 +209,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       if (clientParams) {
         saveSession(clientParams.session);
         setInitClientState({
+          widgetApi: null,
           client: clientParams.client,
           passwordlessUser: clientParams.session.passwordlessUser,
         });
@@ -309,12 +313,40 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       initClientState.client.on(ClientEvent.Sync, onSync);
     }
 
+    if (initClientState.widgetApi) {
+      let supportsReactions = true;
+
+      const reactSend = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.send.event:m.reaction",
+      );
+      const redactSend = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.send.event:m.room.redaction",
+      );
+      const reactRcv = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.receive.event:m.reaction",
+      );
+      const redactRcv = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.receive.event:m.room.redaction",
+      );
+
+      if (!reactSend || !reactRcv || !redactSend || !redactRcv) {
+        supportsReactions = false;
+      }
+
+      setSupportsReactions(supportsReactions);
+      if (!supportsReactions) {
+        logger.warn("Widget does not support reactions");
+      } else {
+        logger.warn("Widget does support reactions");
+      }
+    }
+
     return (): void => {
       if (initClientState.client) {
         initClientState.client.removeListener(ClientEvent.Sync, onSync);
       }
     };
-  }, [initClientState, onSync]);
+  }, [initClientState, onSync, setSupportsReactions]);
 
   if (alreadyOpenedErr) {
     return <ErrorView error={alreadyOpenedErr} />;
@@ -326,6 +358,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 };
 
 type InitResult = {
+  widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
 };
@@ -336,6 +369,7 @@ async function loadClient(): Promise<InitResult | null> {
     logger.log("Using a matryoshka client");
     const client = await widget.client;
     return {
+      widgetApi: widget.api,
       client,
       passwordlessUser: false,
     };
@@ -364,6 +398,7 @@ async function loadClient(): Promise<InitResult | null> {
       try {
         const client = await initClient(initClientParams, true);
         return {
+          widgetApi: null,
           client,
           passwordlessUser,
         };

src/room/InCallView.tsx

@@ -85,8 +85,8 @@ import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
-import { RaisedHandsProvider, useRaisedHands } from "./useRaisedHands";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
+import { useReactions } from "../useReactions";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -139,14 +139,12 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
 
   return (
     <RoomContext.Provider value={livekitRoom}>
-      <RaisedHandsProvider>
-        <InCallView
-          {...props}
-          vm={vm}
-          livekitRoom={livekitRoom}
-          connState={connState}
-        />
-      </RaisedHandsProvider>
+      <InCallView
+        {...props}
+        vm={vm}
+        livekitRoom={livekitRoom}
+        connState={connState}
+      />
     </RoomContext.Provider>
   );
 };
@@ -179,6 +177,8 @@ export const InCallView: FC<InCallViewProps> = ({
   connState,
   onShareClick,
 }) => {
+  const { supportsReactions } = useReactions();
+
   useWakeLock();
 
   useEffect(() => {
@@ -310,10 +310,9 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
-  const { raisedHands, setRaisedHands } = useRaisedHands();
+  const { raisedHands, setRaisedHands } = useReactions();
   const [reactionId, setReactionId] = useState<string | null>(null);
-  const [username, localpart] = localParticipant.identity.split(":");
-  const userId = `${username}:${localpart}`;
+  const userId = client.getUserId()!;
   const isHandRaised = raisedHands.includes(userId);
 
   useEffect(() => {
@@ -638,13 +637,15 @@ export const InCallView: FC<InCallViewProps> = ({
           />,
         );
       }
-      buttons.push(
-        <RaiseHandButton
-          key="4"
-          onClick={toggleRaisedHand}
-          raised={isHandRaised}
-        />,
-      );
+      if (supportsReactions) {
+        buttons.push(
+          <RaiseHandButton
+            key="4"
+            onClick={toggleRaisedHand}
+            raised={isHandRaised}
+          />,
+        );
+      }
       buttons.push(<SettingsButton key="5" onClick={openSettings} />);
     }
 

src/room/useRaisedHands.tsx

@@ -1,38 +0,0 @@
-/*
-Copyright 2024 Milton Moura <miltonmoura@gmail.com>
-
-SPDX-License-Identifier: AGPL-3.0-only
-Please see LICENSE in the repository root for full details.
-*/
-
-import React, { createContext, useContext, useState, ReactNode } from "react";
-
-interface RaisedHandsContextType {
-  raisedHands: string[];
-  setRaisedHands: React.Dispatch<React.SetStateAction<string[]>>;
-}
-
-const RaisedHandsContext = createContext<RaisedHandsContextType | undefined>(
-  undefined,
-);
-
-export const useRaisedHands = (): RaisedHandsContextType => {
-  const context = useContext(RaisedHandsContext);
-  if (!context) {
-    throw new Error("useRaisedHands must be used within a RaisedHandsProvider");
-  }
-  return context;
-};
-
-export const RaisedHandsProvider = ({
-  children,
-}: {
-  children: ReactNode;
-}): JSX.Element => {
-  const [raisedHands, setRaisedHands] = useState<string[]>([]);
-  return (
-    <RaisedHandsContext.Provider value={{ raisedHands, setRaisedHands }}>
-      {children}
-    </RaisedHandsContext.Provider>
-  );
-};

src/tile/GridTile.tsx

@@ -44,7 +44,7 @@ import {
 import { Slider } from "../Slider";
 import { MediaView } from "./MediaView";
 import { useLatest } from "../useLatest";
-import { useRaisedHands } from "../room/useRaisedHands";
+import { useReactions } from "../useReactions";
 
 interface TileProps {
   className?: string;
@@ -91,7 +91,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
-    const { raisedHands } = useRaisedHands();
+    const { raisedHands } = useReactions();
     const raisedHand = raisedHands.includes(vm.member?.userId ?? "");
 
     const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;

src/useReactions.tsx

@@ -0,0 +1,49 @@
+/*
+Copyright 2024 Milton Moura <miltonmoura@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+interface ReactionsContextType {
+  raisedHands: string[];
+  setRaisedHands: React.Dispatch<React.SetStateAction<string[]>>;
+  supportsReactions: boolean;
+  setSupportsReactions: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ReactionsContext = createContext<ReactionsContextType | undefined>(
+  undefined,
+);
+
+export const useReactions = (): ReactionsContextType => {
+  const context = useContext(ReactionsContext);
+  if (!context) {
+    throw new Error("useReactions must be used within a ReactionsProvider");
+  }
+  return context;
+};
+
+export const ReactionsProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const [raisedHands, setRaisedHands] = useState<string[]>([]);
+  const [supportsReactions, setSupportsReactions] = useState<boolean>(true);
+
+  return (
+    <ReactionsContext.Provider
+      value={{
+        raisedHands,
+        setRaisedHands,
+        supportsReactions,
+        setSupportsReactions,
+      }}
+    >
+      {children}
+    </ReactionsContext.Provider>
+  );
+};