Hand raise feature (#2542)

* Initial support for Hand Raise feature

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

* Refactored to use reaction and redaction events

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

* Replacing button svg with raised hand emoji

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

* SpotlightTile should not duplicate the raised hand

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

* 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 <miltonmoura@gmail.com>

* 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 <miltonmoura@gmail.com>

* Removing RaiseHand.svg

* Check for reaction & redaction capabilities in widget mode

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

* Fix failing GridTile test

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

* 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.

* lint

---------

Signed-off-by: Milton Moura <miltonmoura@gmail.com>
Co-authored-by: fkwp <fkwp@users.noreply.github.com>
Co-authored-by: Half-Shot <will@half-shot.uk>
Co-authored-by: Will Hunt <github@half-shot.uk>

src/reactions/RaisedHandIndicator.module.css

@@ -0,0 +1,52 @@
+.raisedHandWidget {
+  display: flex;
+  background-color: var(--cpd-color-bg-subtle-primary);
+  border-radius: var(--cpd-radius-pill-effect);
+  color: var(--cpd-color-icon-secondary);
+}
+
+.raisedHandWidget > p {
+  padding: none;
+  margin-top: auto;
+  margin-bottom: auto;
+  width: 4em;
+}
+
+.raisedHandWidgetLarge > p {
+  padding: var(--cpd-space-2x);
+}
+
+.raisedHandLarge {
+  margin: var(--cpd-space-2x);
+  padding: var(--cpd-space-2x);
+  padding-block: var(--cpd-space-2x);
+}
+
+.raisedHand {
+  margin: var(--cpd-space-1x);
+  color: var(--cpd-color-icon-secondary);
+  background-color: var(--cpd-color-icon-secondary);
+  display: flex;
+  align-items: center;
+  border-radius: var(--cpd-radius-pill-effect);
+  user-select: none;
+  overflow: hidden;
+  box-shadow: var(--small-drop-shadow);
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  max-width: fit-content;
+}
+
+.raisedHand > span {
+  width: var(--cpd-space-6x);
+  height: var(--cpd-space-6x);
+  display: inline-block;
+  text-align: center;
+  font-size: 16px;
+}
+
+.raisedHandLarge > span {
+  width: var(--cpd-space-8x);
+  height: var(--cpd-space-8x);
+  font-size: 22px;
+}

src/reactions/RaisedHandIndicator.test.tsx

@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+import { render, configure } from "@testing-library/react";
+
+import { RaisedHandIndicator } from "./RaisedHandIndicator";
+
+configure({
+  defaultHidden: true,
+});
+
+describe("RaisedHandIndicator", () => {
+  test("renders nothing when no hand has been raised", () => {
+    const { container } = render(<RaisedHandIndicator />);
+    expect(container.firstChild).toBeNull();
+  });
+  test("renders an indicator when a hand has been raised", () => {
+    const dateTime = new Date();
+    const { container } = render(
+      <RaisedHandIndicator raisedHandTime={dateTime} showTimer />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test("renders an indicator when a hand has been raised with the expected time", () => {
+    const dateTime = new Date(new Date().getTime() - 60000);
+    const { container } = render(
+      <RaisedHandIndicator raisedHandTime={dateTime} showTimer />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test("renders a smaller indicator when minature is specified", () => {
+    const dateTime = new Date();
+    const { container } = render(
+      <RaisedHandIndicator raisedHandTime={dateTime} minature showTimer />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/reactions/RaisedHandIndicator.tsx

@@ -0,0 +1,77 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { ReactNode, useEffect, useState } from "react";
+import classNames from "classnames";
+import "@formatjs/intl-durationformat/polyfill";
+import { DurationFormat } from "@formatjs/intl-durationformat";
+
+import styles from "./RaisedHandIndicator.module.css";
+
+const durationFormatter = new DurationFormat(undefined, {
+  minutesDisplay: "always",
+  secondsDisplay: "always",
+  hoursDisplay: "auto",
+  style: "digital",
+});
+
+export function RaisedHandIndicator({
+  raisedHandTime,
+  minature,
+  showTimer,
+}: {
+  raisedHandTime?: Date;
+  minature?: boolean;
+  showTimer?: boolean;
+}): ReactNode {
+  const [raisedHandDuration, setRaisedHandDuration] = useState("");
+
+  // This effect creates a simple timer effect.
+  useEffect(() => {
+    if (!raisedHandTime || !showTimer) {
+      return;
+    }
+
+    const calculateTime = (): void => {
+      const totalSeconds = Math.ceil(
+        (new Date().getTime() - raisedHandTime.getTime()) / 1000,
+      );
+      setRaisedHandDuration(
+        durationFormatter.format({
+          seconds: totalSeconds % 60,
+          minutes: Math.floor(totalSeconds / 60),
+        }),
+      );
+    };
+    calculateTime();
+    const to = setInterval(calculateTime, 1000);
+    return (): void => clearInterval(to);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
+
+  if (raisedHandTime) {
+    return (
+      <div
+        className={classNames(styles.raisedHandWidget, {
+          [styles.raisedHandWidgetLarge]: !minature,
+        })}
+      >
+        <div
+          className={classNames(styles.raisedHand, {
+            [styles.raisedHandLarge]: !minature,
+          })}
+        >
+          <span role="img" aria-label="raised hand">
+            ✋
+          </span>
+        </div>
+        {showTimer && <p>{raisedHandDuration}</p>}
+      </div>
+    );
+  }
+
+  return null;
+}

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RaisedHandIndicator > renders a smaller indicator when minature is specified 1`] = `
+<div
+  class="raisedHandWidget"
+>
+  <div
+    class="raisedHand"
+  >
+    <span
+      aria-label="raised hand"
+      role="img"
+    >
+      ✋
+    </span>
+  </div>
+  <p>
+    00:01
+  </p>
+</div>
+`;
+
+exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
+<div
+  class="raisedHandWidget raisedHandWidgetLarge"
+>
+  <div
+    class="raisedHand raisedHandLarge"
+  >
+    <span
+      aria-label="raised hand"
+      role="img"
+    >
+      ✋
+    </span>
+  </div>
+  <p>
+    00:01
+  </p>
+</div>
+`;
+
+exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
+<div
+  class="raisedHandWidget raisedHandWidgetLarge"
+>
+  <div
+    class="raisedHand raisedHandLarge"
+  >
+    <span
+      aria-label="raised hand"
+      role="img"
+    >
+      ✋
+    </span>
+  </div>
+  <p>
+    01:01
+  </p>
+</div>
+`;