Support for generic reactions (#2708)

* Initial support for Hand Raise feature Signed-off-by: Milton Moura <[email protected]> * Refactored to use reaction and redaction events Signed-off-by: Milton Moura <[email protected]> * Replacing button svg with raised hand emoji Signed-off-by: Milton Moura <[email protected]> * SpotlightTile should not duplicate the raised hand Signed-off-by: Milton Moura <[email protected]> * Update src/room/useRaisedHands.tsx Element Call recently changed to AGPL-3.0 * Use relations to load existing reactions when joining the call Signed-off-by: Milton Moura <[email protected]> * Links to sha commit of matrix-js-sdk that exposes the call membership event id and refactors some async code Signed-off-by: Milton Moura <[email protected]> * Removing RaiseHand.svg * Check for reaction & redaction capabilities in widget mode Signed-off-by: Milton Moura <[email protected]> * Fix failing GridTile test Signed-off-by: Milton Moura <[email protected]> * Center align hand raise. * Add support for displaying the duration of a raised hand. * Add a sound for when a hand is raised. * Refactor raised hand indicator and add tests. * lint * Refactor into own files. * Redact the right thing. * Tidy up useEffect * Lint tests * Remove extra layer * Add better sound. (woosh) * Add a small mode for spotlight * Fix timestamp calculation on relaod. * Fix call border resizing video * lint * Fix and update tests * Allow timer to be configurable. * Add preferences tab for choosing to enable timer. * Drop border from raised hand icon * Handle cases when a new member event happens. * Prevent infinite loop * Major refactor to support various state problems. * Tidy up and finish test rewrites * Add some explanation comments. * Even more comments. * Use proper duration formatter * Remove rerender * Fix redactions not working because they pick up events in transit. * More tidying * Use deferred value * linting * Add tests for cases where we got a reaction from someone else. * Be even less brittle. * Transpose border to GridTile. * First PoC for reactions * hide menu by default * Add lightbulb. * Add reaction indicator. * Add sounds. * Tidy up + add support for floating emoji. * Linting and general stability improvements. * Subscribe to the ecall reaction event type. * fix import * Center emoji picker * Overflow buttons when screen is too narrow * lint * Add settings for disabling animations / sounds. * Make vertical divider more visually distinct. * Make event listener more resillient. * lint * Fix some tests. * Remove old raised hand component * Add new icon * Update text * Update compound hand raised icon. * Add deer. * Fix case where you could send larger strings as emoji * Const the active time. * Document time in css. * Add rock emoji * Add licence file. * Add type def for custom reaction type. * better reaction description * Factor out reactions test structure to utils file. * Add tests for ReactionToggleButton * Add keyboard shortcuts for reaction sending. * type tidyups * lint * Add tests for ReactionAudioRenderer * lint * prettier * i18n sort * final lint? * Preload reaction sounds to prevent delays. * Update rock sounds * add onclick back * Fix test * lint * simplify * Tweak line height * modal impl * Modal refactor attempts. * Remove closed menu test since we're using Modal. * Swap icon, make mobile view better. * Fix mobile view for emoji picker. * Use Intl.Segmenter * Clear timeouts on component close. * Remove useless useCallback * Use prefers-reduced-motion * Add toggle for raise hand. * Add lower hand text * Add lower motion mode. * Decomplicate className system for Modal * Add error for failured to send reaction. * i18n * Spacing for emoji buttons search * Remove unrequired media query * Fix generic sound not playing. * Clear reactions if we're clearing timeouts. * Fix tests * Relabel lower hand * More translations * Add comments on reaction interface * Move polyfill. * lint * Replace deer sound * Another attempt to fix the sizing of the reactions * cleanup * fix button * fix --------- Signed-off-by: Milton Moura <[email protected]> Co-authored-by: Milton Moura <[email protected]> Co-authored-by: fkwp <[email protected]>
element-hq · Nov 8, 2024 · 5d88c52 · 5d88c52
1 parent 5b94dd6
commit 5d88c52
Show file tree

Hide file tree

Showing 48 changed files with 2,000 additions and 387 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
     "@formatjs/intl-durationformat": "^0.6.1",
+    "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.0",
     "@opentelemetry/api": "^1.4.0",
@@ -57,7 +58,7 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^1.0.0",
+    "@vector-im/compound-design-tokens": "^1.9.1",
     "@vector-im/compound-web": "^6.0.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",

diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
@@ -4,11 +4,17 @@
   },
   "action": {
     "close": "Close",
+    "close_search": "Close search",
     "copy_link": "Copy link",
     "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
+    "lower_hand": "Lower hand",
     "no": "No",
+    "open_search": "Open search",
+    "pick_reaction": "Pick reaction",
+    "raise_hand": "Raise hand",
+    "raise_hand_or_send_reaction": "Raise hand or send reaction",
     "register": "Register",
     "remove": "Remove",
     "sign_in": "Sign in",
@@ -55,8 +61,10 @@
     "password": "Password",
     "preferences": "Preferences",
     "profile": "Profile",
-    "raise_hand": "Raise hand",
+    "reaction": "Reaction",
+    "search": "Search",
     "settings": "Settings",
+    "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",
     "username": "Username",
     "video": "Video"
@@ -120,6 +128,7 @@
   "rageshake_sending": "Sending…",
   "rageshake_sending_logs": "Sending debug logs…",
   "rageshake_sent": "Thanks!",
+  "reaction_search": "Search reactions…",
   "recaptcha_caption": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
   "recaptcha_dismissed": "Recaptcha dismissed",
   "recaptcha_not_loaded": "Recaptcha not loaded",
@@ -147,6 +156,13 @@
     "feedback_tab_title": "Feedback",
     "more_tab_title": "More",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
+    "preferences_tab": {
+      "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
+      "reactions_play_sound_label": "Play reaction sounds",
+      "reactions_show_description": "Show reactions",
+      "reactions_show_label": "Show an animation when anyone sends a reaction.",
+      "reactions_title": "Reactions"
+    },
     "preferences_tab_body": "Here you can configure extra options for an improved experience",
     "preferences_tab_h4": "Preferences",
     "preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",

diff --git a/src/@types/matrix-js-sdk.d.ts b/src/@types/matrix-js-sdk.d.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ElementCallReactionEventType,
+  ECallReactionEventContent,
+} from "../reactions";
+
+// Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
+declare module "matrix-js-sdk/src/types" {
+  export interface TimelineEvents {
+    [ElementCallReactionEventType]: ECallReactionEventContent;
+  }
+}
diff --git a/src/Modal.tsx b/src/Modal.tsx
@@ -27,8 +27,21 @@ import { useMediaQuery } from "./useMediaQuery";
 
 export interface Props {
   title: string;
+  /**
+   * Hide the modal header. Used for smaller popups where the context is readily apparent.
+   * A title should still be specified for users using assistive technology.
+   */
+  hideHeader?: boolean;
   children: ReactNode;
   className?: string;
+  /**
+   * Class name to be used when in drawer mode (touchscreen).
+   */
+  classNameDrawer?: string;
+  /**
+   * Class name to be used when in modal mode (desktop).
+   */
+  classNameModal?: string;
   /**
    * The controlled open state of the modal.
    */
@@ -54,8 +67,11 @@ export interface Props {
  */
 export const Modal: FC<Props> = ({
   title,
+  hideHeader,
   children,
   className,
+  classNameDrawer,
+  classNameModal,
   open,
   onDismiss,
   tabbed,
@@ -84,6 +100,7 @@ export const Modal: FC<Props> = ({
           <Drawer.Content
             className={classNames(
               className,
+              classNameDrawer,
               overlayStyles.overlay,
               styles.modal,
               styles.drawer,
@@ -109,6 +126,28 @@ export const Modal: FC<Props> = ({
       </Drawer.Root>
     );
   } else {
+    const titleNode = (
+      <DialogTitle asChild>
+        <Heading as="h2" weight="semibold" size="md">
+          {title}
+        </Heading>
+      </DialogTitle>
+    );
+    const header = (
+      <div className={styles.header}>
+        {titleNode}
+        {onDismiss !== undefined && (
+          <DialogClose
+            className={styles.close}
+            data-testid="modal_close"
+            aria-label={t("action.close")}
+          >
+            <CloseIcon width={20} height={20} />
+          </DialogClose>
+        )}
+      </div>
+    );
+
     return (
       <DialogRoot open={open} onOpenChange={onOpenChange}>
         <DialogPortal>
@@ -126,6 +165,7 @@ export const Modal: FC<Props> = ({
             <Glass
               className={classNames(
                 className,
+                classNameModal,
                 overlayStyles.overlay,
                 overlayStyles.animate,
                 styles.modal,
@@ -134,22 +174,10 @@ export const Modal: FC<Props> = ({
               )}
             >
               <div className={styles.content}>
-                <div className={styles.header}>
-                  <DialogTitle asChild>
-                    <Heading as="h2" weight="semibold" size="md">
-                      {title}
-                    </Heading>
-                  </DialogTitle>
-                  {onDismiss !== undefined && (
-                    <DialogClose
-                      className={styles.close}
-                      data-testid="modal_close"
-                      aria-label={t("action.close")}
-                    >
-                      <CloseIcon width={20} height={20} />
-                    </DialogClose>
-                  )}
-                </div>
+                {!hideHeader ? header : null}
+                {hideHeader ? (
+                  <VisuallyHidden asChild>{titleNode}</VisuallyHidden>
+                ) : null}
                 <div className={styles.body}>{children}</div>
               </div>
             </Glass>

diff --git a/src/button/RaisedHandToggleButton.tsx b/src/button/RaisedHandToggleButton.tsx