diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index a5e4b8a3..5ac10254 100644
--- a/public/locales/en-GB/app.json
+++ b/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",
diff --git a/src/reactions/RaisedHandIndicator.test.tsx b/src/reactions/RaisedHandIndicator.test.tsx
index d4b5e93c..22a665a7 100644
--- a/src/reactions/RaisedHandIndicator.test.tsx
+++ b/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(
- ,
+ ,
);
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(
- ,
+ ,
);
expect(container.firstChild).toMatchSnapshot();
});
test("renders a smaller indicator when minature is specified", () => {
const dateTime = new Date();
const { container } = render(
- ,
+ ,
);
expect(container.firstChild).toMatchSnapshot();
});
diff --git a/src/reactions/RaisedHandIndicator.tsx b/src/reactions/RaisedHandIndicator.tsx
index 5ea2d4c5..7375dd06 100644
--- a/src/reactions/RaisedHandIndicator.tsx
+++ b/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({
✋
-
{raisedHandDuration}
+ {showTimer && {raisedHandDuration}
}
);
}
diff --git a/src/settings/settings.ts b/src/settings/settings.ts
index 61471bff..109a882b 100644
--- a/src/settings/settings.ts
+++ b/src/settings/settings.ts
@@ -85,4 +85,9 @@ export const videoInput = new Setting(
undefined,
);
+export const showHandRaisedTimer = new Setting(
+ "hand-raised-show-timer",
+ false,
+);
+
export const alwaysShowSelf = new Setting("always-show-self", true);
diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
index fb87f368..693078b9 100644
--- a/src/tile/MediaView.tsx
+++ b/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 {
className?: string;
@@ -58,6 +59,7 @@ export const MediaView = forwardRef(
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(
{nameTagLeadingIcon}