From 048b14689aec6da31c24bd162a9e560efdff02e9 Mon Sep 17 00:00:00 2001 From: Ramon Candel Segura Date: Thu, 29 Jan 2026 12:15:48 +0100 Subject: [PATCH 1/3] Update secure meeting component --- lang/main-es.json | 2 +- lang/main.json | 2 +- .../components/PrivateMeetingBanner.tsx | 51 +++++++++++++++++++ .../Conference/containers/JoinConference.tsx | 8 +++ .../views/PreMeeting/PreMeetingScreen.tsx | 11 ++-- .../components/SecureMeetingMessage.tsx | 39 -------------- 6 files changed, 68 insertions(+), 45 deletions(-) create mode 100644 react/features/base/meet/general/components/PrivateMeetingBanner.tsx delete mode 100644 react/features/base/meet/views/PreMeeting/components/SecureMeetingMessage.tsx diff --git a/lang/main-es.json b/lang/main-es.json index deaf52d65984..e210ce10d913 100644 --- a/lang/main-es.json +++ b/lang/main-es.json @@ -841,7 +841,7 @@ }, "secureMeetingMessage": { "title": "Tu reunión es privada", - "description": "Sólo pueden participar los participantes invitados o aprobados" + "description": "Sólo pueden participar los participantes invitados" }, "settings": { "video": { diff --git a/lang/main.json b/lang/main.json index f50b89066b19..f1eede82e1a6 100644 --- a/lang/main.json +++ b/lang/main.json @@ -952,7 +952,7 @@ }, "secureMeetingMessage": { "title": "Your meeting is private", - "description": "Only invited or approved participants can join" + "description": "Only invited participants can join" }, "settings": { "video": { diff --git a/react/features/base/meet/general/components/PrivateMeetingBanner.tsx b/react/features/base/meet/general/components/PrivateMeetingBanner.tsx new file mode 100644 index 000000000000..381a94ee4e67 --- /dev/null +++ b/react/features/base/meet/general/components/PrivateMeetingBanner.tsx @@ -0,0 +1,51 @@ +import { XIcon } from "@phosphor-icons/react"; +import React from "react"; +import { useTranslation } from "react-i18next"; + +const ShieldLockIcon = () => ( + + + +); + +interface PrivateMeetingBannerProps { + isVisible: boolean; + onClose: () => void; +} + +const PrivateMeetingBanner: React.FC = ({ isVisible, onClose }) => { + const { t } = useTranslation(); + + if (!isVisible) { + return null; + } + + return ( +
+
+
+ +
+
+ {t("meet.secureMeetingMessage.title")} + {t("meet.secureMeetingMessage.description")} +
+ +
+
+ ); +}; + +export default PrivateMeetingBanner; diff --git a/react/features/base/meet/views/Conference/containers/JoinConference.tsx b/react/features/base/meet/views/Conference/containers/JoinConference.tsx index ea8adeeb3e1d..29529dac3e75 100644 --- a/react/features/base/meet/views/Conference/containers/JoinConference.tsx +++ b/react/features/base/meet/views/Conference/containers/JoinConference.tsx @@ -38,6 +38,7 @@ import { DEFAULT_STATE } from "../../../../known-domains/reducer"; import PersistenceRegistry from "../../../../redux/PersistenceRegistry"; import { setCreateRoomError, setJoinRoomError } from "../../../general/store/errors/actions"; import { isNewMeetingFlow } from "../../../services/sessionStorage.service"; +import PrivateMeetingBanner from "../../../general/components/PrivateMeetingBanner"; import ConferenceControlsWrapper from "./ConferenceControlsWrapper"; import VideoGalleryWrapper from "./VideoGalleryWrapper"; @@ -102,6 +103,9 @@ interface IProps extends AbstractProps, WithTranslation { class Conference extends AbstractConference { _originalOnMouseMove: Function; _originalOnShowToolbar: Function; + override state = { + isBannerVisible: true, + }; _onSetVideoModeClicked = (newMode: Mode) => { this.props.dispatch(setConferenceViewMode(newMode)); @@ -192,6 +196,10 @@ class Conference extends AbstractConference {
+ this.setState({ isBannerVisible: false })} + />
{/* */} diff --git a/react/features/base/meet/views/PreMeeting/PreMeetingScreen.tsx b/react/features/base/meet/views/PreMeeting/PreMeetingScreen.tsx index cb758154542c..ab7407afe236 100644 --- a/react/features/base/meet/views/PreMeeting/PreMeetingScreen.tsx +++ b/react/features/base/meet/views/PreMeeting/PreMeetingScreen.tsx @@ -19,6 +19,7 @@ import UnsafeRoomWarning from "../../../premeeting/components/web/UnsafeRoomWarn import { updateSettings } from "../../../settings/actions"; import { getDisplayName } from "../../../settings/functions.web"; import { withPixelLineHeight } from "../../../styles/functions.web"; +import PrivateMeetingBanner from "../../general/components/PrivateMeetingBanner"; import MeetingButton from "../../general/containers/MeetingButton"; import { loginSuccess, logout } from "../../general/store/auth/actions"; import { setCreateRoomError } from "../../general/store/errors/actions"; @@ -30,7 +31,6 @@ import { MeetingUser } from "../../services/types/meeting.types"; import AuthModal from "../Home/containers/AuthModal"; import Header from "./components/Header"; import PreMeetingModal from "./components/PreMeetingModal"; -import SecureMeetingMessage from "./components/SecureMeetingMessage"; import VideoEncodingToggle from "./containers/VideoEncodingToggle"; import { useUserData } from "./hooks/useUserData"; @@ -209,6 +209,8 @@ const PreMeetingScreen = ({ const [isNameInputFocused, setIsNameInputFocused] = useState(false); const [isCreatingMeeting, setIsCreatingMeeting] = useState(false); const [meetingUsersData, setMeetingUsersData] = useState([]); + const [isBannerVisible, setIsBannerVisible] = useState(true); + const userData = useUserData(); const [openLogin, setOpenLogin] = useState(true); @@ -345,6 +347,10 @@ const PreMeetingScreen = ({ onOpenSettings={() => dispatch(openSettingsDialog(undefined, true))} planName={planName} /> + setIsBannerVisible(false)} + /> dispatch(loginSuccess(credentials))} translate={t} /> -
- -
{ConfigService.instance.isDevelopment() && }
diff --git a/react/features/base/meet/views/PreMeeting/components/SecureMeetingMessage.tsx b/react/features/base/meet/views/PreMeeting/components/SecureMeetingMessage.tsx deleted file mode 100644 index dc1b1e8fd157..000000000000 --- a/react/features/base/meet/views/PreMeeting/components/SecureMeetingMessage.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; - -const Shield = () => ( - - - - - -); - -const SecureMeetingMessage = () => { - const { t } = useTranslation(); - return ( -
-
- -
- -
-

{t("meet.secureMeetingMessage.title")}

-

{t("meet.secureMeetingMessage.description")}

-
-
- ); -}; - -export default SecureMeetingMessage; From 5fbb5873cf33b7ab91bab65999ecca410f33c2ad Mon Sep 17 00:00:00 2001 From: Ramon Candel Segura Date: Mon, 2 Feb 2026 14:24:08 +0100 Subject: [PATCH 2/3] Changed PrivateMeetingBanner styles --- .../base/meet/general/components/PrivateMeetingBanner.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/features/base/meet/general/components/PrivateMeetingBanner.tsx b/react/features/base/meet/general/components/PrivateMeetingBanner.tsx index 381a94ee4e67..182d31d2be7d 100644 --- a/react/features/base/meet/general/components/PrivateMeetingBanner.tsx +++ b/react/features/base/meet/general/components/PrivateMeetingBanner.tsx @@ -26,13 +26,13 @@ const PrivateMeetingBanner: React.FC = ({ isVisible, return (
-
+
{t("meet.secureMeetingMessage.title")} {t("meet.secureMeetingMessage.description")}
From 1a41a99157ff64906038c30163ab847fc8467284 Mon Sep 17 00:00:00 2001 From: Ramon Candel Segura Date: Mon, 2 Feb 2026 14:27:29 +0100 Subject: [PATCH 3/3] Changed text style and cross icon size to fit design --- .../base/meet/general/components/PrivateMeetingBanner.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/features/base/meet/general/components/PrivateMeetingBanner.tsx b/react/features/base/meet/general/components/PrivateMeetingBanner.tsx index 182d31d2be7d..aa609757ef72 100644 --- a/react/features/base/meet/general/components/PrivateMeetingBanner.tsx +++ b/react/features/base/meet/general/components/PrivateMeetingBanner.tsx @@ -34,14 +34,14 @@ const PrivateMeetingBanner: React.FC = ({ isVisible,
{t("meet.secureMeetingMessage.title")} - {t("meet.secureMeetingMessage.description")} + {t("meet.secureMeetingMessage.description")}