Allow timer to be configurable.

public/locales/en-GB/app.json

@@ -53,6 +53,7 @@
     "next": "Next",
     "options": "Options",
     "password": "Password",
+    "preferences": "Preferences",
     "profile": "Profile",
     "raise_hand": "Raise hand",
     "settings": "Settings",
@@ -145,6 +146,10 @@
     "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_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",
+    "preferences_tab_show_hand_raised_timer_label": "Show hand raise duration",
     "speaker_device_selection_label": "Speaker"
   },
   "star_rating_input_label_one": "{{count}} stars",

src/reactions/RaisedHandIndicator.test.tsx

@@ -22,21 +22,21 @@ describe("RaisedHandIndicator", () => {
   test("renders an indicator when a hand has been raised", () => {
     const dateTime = new Date();
     const { container } = render(
-      <RaisedHandIndicator raisedHandTime={dateTime} />,
+      <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} />,
+      <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 />,
+      <RaisedHandIndicator raisedHandTime={dateTime} minature showTimer />,
     );
     expect(container.firstChild).toMatchSnapshot();
   });

src/reactions/RaisedHandIndicator.tsx

@@ -13,14 +13,16 @@ import styles from "./RaisedHandIndicator.module.css";
 export function RaisedHandIndicator({
   raisedHandTime,
   minature,
+  showTimer,
 }: {
   raisedHandTime?: Date;
   minature?: boolean;
+  showTimer?: boolean;
 }): ReactNode {
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
   useEffect(() => {
-    if (!raisedHandTime) {
+    if (!raisedHandTime || !showTimer) {
       return;
     }
     const calculateTime = (): void => {
@@ -36,7 +38,7 @@ export function RaisedHandIndicator({
     calculateTime();
     const to = setInterval(calculateTime, 1000);
     return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
 
   if (raisedHandTime) {
     return (
@@ -54,7 +56,7 @@ export function RaisedHandIndicator({
             ✋
           </span>
         </div>
-        <p>{raisedHandDuration}</p>
+        {showTimer && <p>{raisedHandDuration}</p>}
       </div>
     );
   }

src/settings/settings.ts

@@ -85,4 +85,9 @@ export const videoInput = new Setting<string | undefined>(
   undefined,
 );
 
+export const showHandRaisedTimer = new Setting<boolean>(
+  "hand-raised-show-timer",
+  false,
+);
+
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);

src/tile/MediaView.tsx

@@ -18,6 +18,7 @@ import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
+import { showHandRaisedTimer, useSetting } from "../settings/settings";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -58,6 +59,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
     ref,
   ) => {
     const { t } = useTranslation();
+    const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
 
     const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
@@ -95,6 +97,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           <RaisedHandIndicator
             raisedHandTime={raisedHandTime}
             minature={avatarSize < 96}
+            showTimer={handRaiseTimerVisible}
           />
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}