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..aa609757ef72 --- /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;