From d233ff4177aca4a723bbdb00f4849a4213650fbe Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Fri, 6 Dec 2024 12:52:05 +0000 Subject: [PATCH 1/6] Simplify settings tabs - Move Analytics to Feedback tab - Rename Developer Settings to Developer Mode and move to Preferences tab - Clean up Preferences tab - Only way to see version number is by enabling Developer Mode --- locales/en/app.json | 4 +- src/settings/DeveloperSettingsTab.tsx | 75 ++++++++++++++ src/settings/FeedbackSettingsTab.tsx | 30 +++++- src/settings/PreferencesSettingsTab.tsx | 21 +++- src/settings/SettingsModal.tsx | 126 ++---------------------- 5 files changed, 134 insertions(+), 122 deletions(-) create mode 100644 src/settings/DeveloperSettingsTab.tsx diff --git a/locales/en/app.json b/locales/en/app.json index e500f66cd..7fe146e44 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -150,8 +150,6 @@ "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play", "effect_volume_label": "Sound effect volume" }, - "developer_settings_label": "Developer Settings", - "developer_settings_label_description": "Expose developer settings in the settings window.", "developer_tab_title": "Developer", "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.", "feedback_tab_description_label": "Your feedback", @@ -162,6 +160,8 @@ "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": { + "developer_mode_label": "Developer Mode", + "developer_mode_label_description": "Enable developer mode and show developer settings tab.", "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.", "reactions_play_sound_label": "Play reaction sounds", "reactions_show_description": "Show an animation when anyone sends a reaction.", diff --git a/src/settings/DeveloperSettingsTab.tsx b/src/settings/DeveloperSettingsTab.tsx new file mode 100644 index 000000000..410cfa6ae --- /dev/null +++ b/src/settings/DeveloperSettingsTab.tsx @@ -0,0 +1,75 @@ +/* +Copyright 2022-2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +import { ChangeEvent, FC, useCallback } from "react"; +import { useTranslation } from "react-i18next"; + +import { FieldRow, InputField } from "../input/Input"; +import { + useSetting, + duplicateTiles as duplicateTilesSetting, +} from "./settings"; +import type { MatrixClient } from "matrix-js-sdk/src/client"; + +interface Props { + client: MatrixClient; +} + +export const DeveloperSettingsTab: FC = ({ client }) => { + const { t } = useTranslation(); + const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting); + + return ( + <> +

+ {t("developer_mode.hostname", { + hostname: window.location.hostname || "unknown", + })} +

+

+ {t("version", { + productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call", + version: import.meta.env.VITE_APP_VERSION || "dev", + })} +

+

+ {t("developer_mode.crypto_version", { + version: client.getCrypto()?.getVersion() || "unknown", + })} +

+

+ {t("developer_mode.matrix_id", { + id: client.getUserId() || "unknown", + })} +

+

+ {t("developer_mode.device_id", { + id: client.getDeviceId() || "unknown", + })} +

+ + ): void => { + const value = event.target.valueAsNumber; + if (value < 0) { + return; + } + setDuplicateTiles(Number.isNaN(value) ? 0 : value); + }, + [setDuplicateTiles], + )} + /> + + + ); +}; diff --git a/src/settings/FeedbackSettingsTab.tsx b/src/settings/FeedbackSettingsTab.tsx index 455995a1b..a2723a2d7 100644 --- a/src/settings/FeedbackSettingsTab.tsx +++ b/src/settings/FeedbackSettingsTab.tsx @@ -5,15 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only Please see LICENSE in the repository root for full details. */ -import { FC, useCallback } from "react"; +import { ChangeEvent, FC, useCallback } from "react"; import { randomString } from "matrix-js-sdk/src/randomstring"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { Button, Text } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/src/logger"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; import { useSubmitRageshake, useRageshakeRequest } from "./submit-rageshake"; import feedbackStyles from "../input/FeedbackInput.module.css"; +import { AnalyticsNotice } from "../analytics/AnalyticsNotice"; +import { useOptInAnalytics } from "./settings"; interface Props { roomId?: string; @@ -52,8 +54,32 @@ export const FeedbackSettingsTab: FC = ({ roomId }) => { [submitRageshake, roomId, sendRageshakeRequest], ); + const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics(); + const optInDescription = ( + + + +
+ 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. + + + ); + return (
+

{t("common.analytics")}

+ + ): void => { + setOptInAnalytics?.(event.target.checked); + }} + /> +

{t("settings.feedback_tab_h4")}

{t("settings.feedback_tab_body")}
diff --git a/src/settings/PreferencesSettingsTab.tsx b/src/settings/PreferencesSettingsTab.tsx index bc98d181a..00e5af8b2 100644 --- a/src/settings/PreferencesSettingsTab.tsx +++ b/src/settings/PreferencesSettingsTab.tsx @@ -14,6 +14,7 @@ import { showHandRaisedTimer as showHandRaisedTimerSetting, showReactions as showReactionsSetting, playReactionsSound as playReactionsSoundSetting, + developerSettingsTab as developerSettingsTabSetting, useSetting, } from "./settings"; @@ -36,9 +37,12 @@ export const PreferencesSettingsTab: FC = () => { fn(e.target.checked); }; + const [developerSettingsTab, setDeveloperSettingsTab] = useSetting( + developerSettingsTabSetting, + ); + return (
-

{t("settings.preferences_tab_h4")}

{t("settings.preferences_tab_body")} { onChange={(e) => onChangeSetting(e, setShowHandRaisedTimer)} /> -
{t("settings.preferences_tab.reactions_title")}
{ onChange={(e) => onChangeSetting(e, setPlayReactionSound)} /> + + ): void => + setDeveloperSettingsTab(event.target.checked) + } + /> +
); }; diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 4ffcecf5d..34d65b998 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -5,16 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only Please see LICENSE in the repository root for full details. */ -import { ChangeEvent, FC, useCallback } from "react"; -import { Trans, useTranslation } from "react-i18next"; +import { FC, useMemo } from "react"; +import { useTranslation } from "react-i18next"; import { MatrixClient } from "matrix-js-sdk/src/matrix"; -import { Root as Form, Text } from "@vector-im/compound-web"; +import { Root as Form } from "@vector-im/compound-web"; import { Modal } from "../Modal"; import styles from "./SettingsModal.module.css"; import { Tab, TabContainer } from "../tabs/Tabs"; -import { FieldRow, InputField } from "../input/Input"; -import { AnalyticsNotice } from "../analytics/AnalyticsNotice"; import { ProfileSettingsTab } from "./ProfileSettingsTab"; import { FeedbackSettingsTab } from "./FeedbackSettingsTab"; import { @@ -24,15 +22,14 @@ import { import { widget } from "../widget"; import { useSetting, - developerSettingsTab as developerSettingsTabSetting, - duplicateTiles as duplicateTilesSetting, - useOptInAnalytics, soundEffectVolumeSetting, + developerSettingsTab, } from "./settings"; import { isFirefox } from "../Platform"; import { PreferencesSettingsTab } from "./PreferencesSettingsTab"; import { Slider } from "../Slider"; import { DeviceSelection } from "./DeviceSelection"; +import { DeveloperSettingsTab } from "./DeveloperSettingsTab"; type SettingsTab = | "audio" @@ -64,28 +61,13 @@ export const SettingsModal: FC = ({ }) => { const { t } = useTranslation(); - const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics(); - const [developerSettingsTab, setDeveloperSettingsTab] = useSetting( - developerSettingsTabSetting, - ); - const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting); - - const optInDescription = ( - - - -
- 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. - - - ); - const devices = useMediaDevices(); useMediaDeviceNames(devices, open); const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting); + const [showDeveloperSettingsTab] = useSetting(developerSettingsTab); + const audioTab: Tab = { key: "audio", name: t("common.audio"), @@ -150,104 +132,16 @@ export const SettingsModal: FC = ({ content: , }; - const moreTab: Tab = { - key: "more", - name: t("settings.more_tab_title"), - content: ( - <> -

{t("settings.developer_tab_title")}

-

- {t("version", { - productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call", - version: import.meta.env.VITE_APP_VERSION || "dev", - })} -

- - ): void => - setDeveloperSettingsTab(event.target.checked) - } - /> - -

{t("common.analytics")}

- - ): void => { - setOptInAnalytics?.(event.target.checked); - }} - /> - - - ), - }; - const developerTab: Tab = { key: "developer", name: t("settings.developer_tab_title"), - content: ( - <> -

- {t("developer_mode.hostname", { - hostname: window.location.hostname || "unknown", - })} -

-

- {t("version", { - productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call", - version: import.meta.env.VITE_APP_VERSION || "dev", - })} -

-

- {t("developer_mode.crypto_version", { - version: client.getCrypto()?.getVersion() || "unknown", - })} -

-

- {t("developer_mode.matrix_id", { - id: client.getUserId() || "unknown", - })} -

-

- {t("developer_mode.device_id", { - id: client.getDeviceId() || "unknown", - })} -

- - ): void => { - const value = event.target.valueAsNumber; - if (value < 0) { - return; - } - setDuplicateTiles(Number.isNaN(value) ? 0 : value); - }, - [setDuplicateTiles], - )} - /> - - - ), + content: , }; const tabs = [audioTab, videoTab]; if (widget === null) tabs.push(profileTab); - tabs.push(preferencesTab, feedbackTab, moreTab); - if (developerSettingsTab) tabs.push(developerTab); + tabs.push(preferencesTab, feedbackTab); + if (showDeveloperSettingsTab) tabs.push(developerTab); return ( Date: Fri, 6 Dec 2024 12:55:28 +0000 Subject: [PATCH 2/6] Remove extra label --- locales/en/app.json | 1 - 1 file changed, 1 deletion(-) diff --git a/locales/en/app.json b/locales/en/app.json index 7fe146e44..4d88b5982 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -157,7 +157,6 @@ "feedback_tab_send_logs_label": "Include debug logs", "feedback_tab_thank_you": "Thanks, we received your feedback!", "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": { "developer_mode_label": "Developer Mode", From 5b2bbae7da81914e504573581ebdc8265b48e4e0 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Fri, 6 Dec 2024 15:08:21 +0000 Subject: [PATCH 3/6] Lint --- locales/en/app.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/locales/en/app.json b/locales/en/app.json index 4d88b5982..1e3192544 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -164,11 +164,9 @@ "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.", "reactions_play_sound_label": "Play reaction sounds", "reactions_show_description": "Show an animation when anyone sends a reaction.", - "reactions_show_label": "Show reactions", - "reactions_title": "Reactions" + "reactions_show_label": "Show reactions" }, "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" From 92d0f411ab3cb5f944bfcd6f4b2cee7a509eef75 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Fri, 6 Dec 2024 15:10:07 +0000 Subject: [PATCH 4/6] Lint --- src/settings/SettingsModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 34d65b998..7ef626531 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only Please see LICENSE in the repository root for full details. */ -import { FC, useMemo } from "react"; +import { FC } from "react"; import { useTranslation } from "react-i18next"; import { MatrixClient } from "matrix-js-sdk/src/matrix"; import { Root as Form } from "@vector-im/compound-web"; From 508ad93c436776fbb982ea3f2e5e9d626948299d Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Wed, 11 Dec 2024 09:21:24 +0000 Subject: [PATCH 5/6] Update locales/en/app.json Co-authored-by: Robin --- locales/en/app.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/en/app.json b/locales/en/app.json index d6c728859..893bbc3e1 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -159,7 +159,7 @@ "feedback_tab_title": "Feedback", "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": { - "developer_mode_label": "Developer Mode", + "developer_mode_label": "Developer mode", "developer_mode_label_description": "Enable developer mode and show developer settings tab.", "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.", "reactions_play_sound_label": "Play reaction sounds", From cd0568b1284bb36b188f023db8805d385dc238b5 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Wed, 11 Dec 2024 09:35:41 +0000 Subject: [PATCH 6/6] Lint --- src/settings/DeveloperSettingsTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/DeveloperSettingsTab.tsx b/src/settings/DeveloperSettingsTab.tsx index 410cfa6ae..0a33d52f2 100644 --- a/src/settings/DeveloperSettingsTab.tsx +++ b/src/settings/DeveloperSettingsTab.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only Please see LICENSE in the repository root for full details. */ -import { ChangeEvent, FC, useCallback } from "react"; +import { type ChangeEvent, type FC, useCallback } from "react"; import { useTranslation } from "react-i18next"; import { FieldRow, InputField } from "../input/Input";