Hand raise feature

public/locales/en-GB/app.json

@@ -54,6 +54,7 @@
     "options": "Options",
     "password": "Password",
     "profile": "Profile",
+    "raise_hand": "Raise hand",
     "settings": "Settings",
     "unencrypted": "Not encrypted",
     "username": "Username",

src/App.tsx

@@ -28,6 +28,7 @@
 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 @@
           <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 { 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 { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
 import { Config } from "./config/Config";
+import { useReactions } from "./useReactions";
 
 declare global {
   interface Window {
@@ -144,6 +146,7 @@
 }
 
 export const ClientProvider: FC<Props> = ({ children }) => {
+  const { setSupportsReactions } = useReactions();
   const history = useHistory();
 
   // null = signed out, undefined = loading
@@ -188,11 +191,11 @@
       saveSession({ ...session, passwordlessUser: false });
 
       setInitClientState({
-        client: initClientState.client,
+        ...initClientState,
         passwordlessUser: false,
       });
     },
-    [initClientState?.client],
+    [initClientState],
   );
 
   const setClient = useCallback(
@@ -206,6 +209,7 @@
       if (clientParams) {
         saveSession(clientParams.session);
         setInitClientState({
+          widgetApi: null,
           client: clientParams.client,
           passwordlessUser: clientParams.session.passwordlessUser,
         });
@@ -309,12 +313,40 @@
       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 @@
 };
 
 type InitResult = {
+  widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
 };
@@ -336,6 +369,7 @@
     logger.log("Using a matryoshka client");
     const client = await widget.client;
     return {
+      widgetApi: widget.api,
       client,
       passwordlessUser: false,
     };
@@ -364,6 +398,7 @@
       try {
         const client = await initClient(initClientParams, true);
         return {
+          widgetApi: null,
           client,
           passwordlessUser,
         };

src/button/Button.tsx

@@ -91,6 +91,39 @@
   );
 };
 
+interface RaiseHandButtonProps extends ComponentPropsWithoutRef<"button"> {
+  raised: boolean;
+}
+export const RaiseHandButton: FC<RaiseHandButtonProps> = ({
+  raised,
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={t("common.raise_hand")}>
+      <CpdButton
+        kind={raised ? "primary" : "secondary"}
+        {...props}
+        style={{ paddingLeft: 8, paddingRight: 8 }}
+      >
+        <p
+          role="img"
+          aria-label="raised hand"
+          style={{
+            width: "30px",
+            height: "0px",
+            display: "inline-block",
+            fontSize: "22px",
+          }}
+        >
+          ✋
+        </p>
+      </CpdButton>
+    </Tooltip>
+  );
+};
+
 export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
   className,
   ...props