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