[PB-4938] feature/Update secure meeting component

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": {

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": {

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 = () => (
+    <svg width="17" height="20" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M6.66667 16.6667C4.73611 16.1806 3.14236 15.0729 1.88542 13.3437C0.628472 11.6146 0 9.69444 0 7.58333V2.5L6.66667 0L13.3333 2.5V7.58333C13.3333 9.69444 12.7049 11.6146 11.4479 13.3437C10.191 15.0729 8.59722 16.1806 6.66667 16.6667ZM5 11.6667H8.33333C8.56944 11.6667 8.76736 11.5868 8.92708 11.4271C9.08681 11.2674 9.16667 11.0694 9.16667 10.8333V8.33333C9.16667 8.09722 9.08681 7.89931 8.92708 7.73958C8.76736 7.57986 8.56944 7.5 8.33333 7.5V6.66667C8.33333 6.20833 8.17014 5.81597 7.84375 5.48958C7.51736 5.16319 7.125 5 6.66667 5C6.20833 5 5.81597 5.16319 5.48958 5.48958C5.16319 5.81597 5 6.20833 5 6.66667V7.5C4.76389 7.5 4.56597 7.57986 4.40625 7.73958C4.24653 7.89931 4.16667 8.09722 4.16667 8.33333V10.8333C4.16667 11.0694 4.24653 11.2674 4.40625 11.4271C4.56597 11.5868 4.76389 11.6667 5 11.6667ZM5.83333 7.5V6.66667C5.83333 6.43056 5.91319 6.23264 6.07292 6.07292C6.23264 5.91319 6.43056 5.83333 6.66667 5.83333C6.90278 5.83333 7.10069 5.91319 7.26042 6.07292C7.42014 6.23264 7.5 6.43056 7.5 6.66667V7.5H5.83333Z"
+            fill="#0066FF"
+        />
+    </svg>
+);
+
+interface PrivateMeetingBannerProps {
+    isVisible: boolean;
+    onClose: () => void;
+}
+
+const PrivateMeetingBanner: React.FC<PrivateMeetingBannerProps> = ({ isVisible, onClose }) => {
+    const { t } = useTranslation();
+
+    if (!isVisible) {
+        return null;
+    }
+
+    return (
+        <div className="fixed inset-x-0 top-[72px] min-[920px]:top-4 z-[99] flex justify-center pointer-events-none">
+            <div
+                className="pointer-events-auto flex min-w-[448px] items-center gap-2 bg-[#E5EEFB] border-[#E5EFFF] rounded-lg shadow-lg p-3"
+                role="status"
+            >
+                <div className="flex-shrink-0">
+                    <ShieldLockIcon />
+                </div>
+                <div className="flex flex-grow flex-col">
+                    <span className="text-base font-medium text-[#1C1C1C]">{t("meet.secureMeetingMessage.title")}</span>
+                    <span className="text-sm text-[#737373] ">{t("meet.secureMeetingMessage.description")}</span>
+                </div>
+                <button
+                    onClick={onClose}
+                    className="flex-shrink-0 p-1 rounded-md hover:bg-gray-80 transition-colors"
+                    aria-label={t("dialog.close") ?? "Close"}
+                >
+                    <XIcon size={20} className="text-[#737373]" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default PrivateMeetingBanner;

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<IProps, any> {
     _originalOnMouseMove: Function;
     _originalOnShowToolbar: Function;
+    override state = {
+        isBannerVisible: true,
+    };
 
     _onSetVideoModeClicked = (newMode: Mode) => {
         this.props.dispatch(setConferenceViewMode(newMode));
@@ -192,6 +196,10 @@ class Conference extends AbstractConference<IProps, any> {
                         <Notice />
                         <div onTouchStart={this._onVidespaceTouchStart} className="flex-1 flex flex-col">
                             <Header mode={viewMode} translate={t} onSetModeClicked={this._onSetVideoModeClicked} />
+                            <PrivateMeetingBanner
+                                isVisible={this.state.isBannerVisible}
+                                onClose={() => this.setState({ isBannerVisible: false })}
+                            />
                             <div className="flex-1 flex justify-center items-center">
                                 {/* <LargeVideoWeb /> */}
                                 <VideoGalleryWrapper videoMode={viewMode} />

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<MeetingUser[]>([]);
+    const [isBannerVisible, setIsBannerVisible] = useState(true);
+
     const userData = useUserData();
     const [openLogin, setOpenLogin] = useState<boolean>(true);
 
@@ -345,6 +347,10 @@ const PreMeetingScreen = ({
                     onOpenSettings={() => dispatch(openSettingsDialog(undefined, true))}
                     planName={planName}
                 />
+                <PrivateMeetingBanner
+                    isVisible={isBannerVisible}
+                    onClose={() => setIsBannerVisible(false)}
+                />
                 <PreMeetingModal
                     videoTrack={videoTrack}
                     videoMuted={!!videoMuted}
@@ -378,9 +384,6 @@ const PreMeetingScreen = ({
                     onSignup={(credentials) => dispatch(loginSuccess(credentials))}
                     translate={t}
                 />
-                <div className="flex absolute bottom-7 right-7">
-                    <SecureMeetingMessage />
-                </div>
                 <div className={classes.videoEncodingToggleContainer}>
                     {ConfigService.instance.isDevelopment() && <VideoEncodingToggle />}
                 </div>