[PB-3867]:Feat/styles dropdown

lang/main-es.json

@@ -715,6 +715,11 @@
             "copyLink": "Copiar enlace",
             "meetingFull": "La reunión está llena",
             "participants": "participantes"
+        },
+        "settings": {
+            "video": {
+                "videoInput": "Entrada de vídeo"
+            }
         }
     },
     "notify": {
@@ -1417,7 +1422,7 @@
         "grantModerator": "Convertir en moderador",
         "hideSelfView": "Esconder vista propia",
         "kick": "Expulsar",
-        "mirrorVideo": "Espejar mi video",
+        "mirrorVideo": "Espejar mi vídeo",
         "moderator": "Moderador",
         "mute": "Se silenció el participante",
         "muted": "Silenciado",

lang/main.json

@@ -768,6 +768,11 @@
             "copyLink": "Copy Link",
             "meetingFull": "Meeting is full",
             "participants": "participants"
+        },
+        "settings": {
+            "video": {
+                "videoInput": "Video input"
+            }
         }
     },
     "notify": {

package.json

@@ -26,7 +26,7 @@
         "@internxt/css-config": "^1.0.2",
         "@internxt/lib": "^1.2.1",
         "@internxt/sdk": "^1.4.77",
-        "@internxt/ui": "^0.0.21",
+        "@internxt/ui": "^0.0.22",
         "@jitsi/excalidraw": "https://github.com/jitsi/excalidraw/releases/download/v0.0.17/jitsi-excalidraw-0.0.17.tgz",
         "@jitsi/js-utils": "2.2.1",
         "@jitsi/logger": "2.0.2",

react/features/base/meet/general/components/MediaControls.tsx

@@ -1,6 +1,6 @@
 import { CircleButton } from "@internxt/ui";
 import { ExclamationMark, Microphone, MicrophoneSlash, VideoCamera, VideoCameraSlash } from "@phosphor-icons/react";
-import React from "react";
+import React, { useState } from "react";
 
 import MeetAudioSettingsPopUp from "../containers/MeetAudioSettingsPopup";
 import CustomVideoSettingsPopUp from "../containers/MeetVideoSettingsPopUp";
@@ -31,6 +31,8 @@ const MediaControls: React.FC<MediaControlsProps> = ({
 }) => {
     const audioIndicatorProps = !hasAudioPermissions ? indicatorProps : undefined;
     const videoIndicatorProps = !hasVideoPermissions ? indicatorProps : undefined;
+    const [isOpenVideo, setIsOpenVideo] = useState(false);
+    const [isOpenAudio, setIsOpenAudio] = useState(false);
 
     return (
         <div className="flex space-x-2 justify-center items-center">
@@ -41,6 +43,15 @@ const MediaControls: React.FC<MediaControlsProps> = ({
                 onClick={onVideoClick}
                 onClickToggleButton={onVideoOptionsClick}
                 dropdown={<CustomVideoSettingsPopUp />}
+                isOpen={isOpenVideo}
+                handleClose={() => {
+                    setIsOpenVideo(false);
+                    setIsOpenAudio(false);
+                }}
+                handleOpen={() => {
+                    setIsOpenVideo(true);
+                    setIsOpenAudio(false);
+                }}
             >
                 {hasVideoPermissions && !isVideoMuted ? (
                     <VideoCamera size={22} color="black" weight="fill" />
@@ -55,6 +66,15 @@ const MediaControls: React.FC<MediaControlsProps> = ({
                 onClick={onAudioClick}
                 onClickToggleButton={onAudioOptionsClick}
                 dropdown={<MeetAudioSettingsPopUp />}
+                isOpen={isOpenAudio}
+                handleClose={() => {
+                    setIsOpenAudio(false);
+                    setIsOpenVideo(false);
+                }}
+                handleOpen={() => {
+                    setIsOpenAudio(true);
+                    setIsOpenVideo(false);
+                }}
             >
                 {isAudioMuted || !hasAudioPermissions ? (
                     <MicrophoneSlash size={20} color="white" weight="fill" />

react/features/base/meet/general/containers/MeetAudioSettingsPopup.tsx

@@ -26,8 +26,6 @@ interface MeetAudioSettingsPopUpProps {
     audioTrack?: any;
 }
 
-
-
 const MeetAudioSettingsPopUp = ({
     currentMicDeviceId,
     currentOutputDeviceId,
@@ -37,10 +35,8 @@ const MeetAudioSettingsPopUp = ({
     setAudioOutputDevice,
     measureAudioLevels,
 }: MeetAudioSettingsPopUpProps) => {
-
-
     return (
-        <div className="flex p-1 bg-black/50 rounded-xl border border-white/10">
+        <div className="flex p-1 rounded-xl">
             <AudioSettingsContent
                 currentMicDeviceId={currentMicDeviceId}
                 currentOutputDeviceId={currentOutputDeviceId}

react/features/base/meet/general/containers/MeetVideoSettingsPopUp.tsx

@@ -24,7 +24,7 @@ const MeetVideoSettingsPopUp = ({
     onClose,
 }: MeetVideoSettingsPopUpProps) => {
     return (
-        <div className="flex p-1 bg-black/50 rounded-xl border border-white/10">
+        <div className="flex p-1 rounded-xl">
             <VideoSettingsContent
                 currentCameraDeviceId={currentCameraDeviceId}
                 setVideoInputDevice={setVideoInputDevice}
@@ -48,4 +48,4 @@ const mapDispatchToProps = {
     setVideoInputDevice: setVideoInputDeviceAndUpdateSettings,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(MeetVideoSettingsPopUp);
+export default connect(mapStateToProps, mapDispatchToProps)(MeetVideoSettingsPopUp);