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]>

Author: 3 people

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",

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",

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;
+  }
+}

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>