Merge remote-tracking branch 'origin/livekit' into hs/emoji-reactions

src/reactions/RaisedHandIndicator.test.tsx

@@ -40,4 +40,16 @@ describe("RaisedHandIndicator", () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+  test("can be clicked", () => {
+    const dateTime = new Date();
+    let wasClicked = false;
+    const { getByRole } = render(
+      <RaisedHandIndicator
+        raisedHandTime={dateTime}
+        onClick={() => (wasClicked = true)}
+      />,
+    );
+    getByRole("button").click();
+    expect(wasClicked).toBe(true);
+  });
 });

src/reactions/RaisedHandIndicator.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useEffect, useState } from "react";
+import {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
 
@@ -22,13 +28,26 @@ export function RaisedHandIndicator({
   raisedHandTime,
   miniature,
   showTimer,
+  onClick,
 }: {
   raisedHandTime?: Date;
   miniature?: boolean;
   showTimer?: boolean;
+  onClick?: () => void;
 }): ReactNode {
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
+  const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      event.preventDefault();
+      onClick();
+    },
+    [onClick],
+  );
+
   // This effect creates a simple timer effect.
   useEffect(() => {
     if (!raisedHandTime || !showTimer) {
@@ -51,13 +70,30 @@ export function RaisedHandIndicator({
     return (): void => clearInterval(to);
   }, [setRaisedHandDuration, raisedHandTime, showTimer]);
 
-  if (raisedHandTime) {
+  if (!raisedHandTime) {
+    return;
+  }
+
+  const content = (
+    <ReactionIndicator emoji="✋" miniature={miniature}>
+      {showTimer && <p>{raisedHandDuration}</p>}
+    </ReactionIndicator>
+  );
+
+  if (onClick) {
     return (
-      <ReactionIndicator emoji="✋" miniature={miniature}>
-        {showTimer && <p>{raisedHandDuration}</p>}
-      </ReactionIndicator>
+      <button
+        aria-label="lower raised hand"
+        style={{
+          display: "contents",
+          background: "none",
+        }}
+        onClick={clickCallback}
+      >
+        {content}
+      </button>
     );
   }
 
-  return null;
+  return content;
 }

src/reactions/ReactionIndicator.module.css

@@ -42,11 +42,11 @@
   height: var(--cpd-space-6x);
   display: inline-block;
   text-align: center;
-  font-size: 16px;
+  font-size: 1.3em;
 }
 
 .reactionLarge > span {
   width: var(--cpd-space-8x);
   height: var(--cpd-space-8x);
-  font-size: 22px;
+  font-size: 1.9em;
 }