fix(video-preview): several fixes +

- Fix deviceId being read from wrong storage (making it not detected as already sharing)
- Remove added by mistake profile filtered by metadata
- Fix background and brightness selector being show when sharing camera that is being presented

bigbluebutton-html5/imports/ui/components/video-preview/component.jsx

@@ -789,16 +789,17 @@ class VideoPreview extends Component {
   renderQualitySelector() {
     const {
       intl,
-      webcamDeviceId,
       cameraAsContent,
     } = this.props
 
-    const { selectedProfile, availableWebcams } = this.state;
+    const {
+      selectedProfile,
+      availableWebcams,
+      webcamDeviceId, 
+    } = this.state;
 
     const shared = this.isAlreadyShared(webcamDeviceId);
 
-    if (cameraAsContent) return;
-
     if (shared) { 
       return (
         <Styled.Label>
@@ -806,19 +807,26 @@ class VideoPreview extends Component {
         </Styled.Label>
       );
     }
+    
+    if (cameraAsContent) return;
+
+    const CAMERA_PROFILES = window.meetingClientSettings.public.kurento.cameraProfiles || [];
+    // Filtered, without hidden profiles
+    const PREVIEW_CAMERA_PROFILES = CAMERA_PROFILES.filter(p => !p.hidden);
+
     return (
       <>
         <Styled.Label htmlFor="setQuality">
           {intl.formatMessage(intlMessages.qualityLabel)}
         </Styled.Label>
-        {PreviewService.handleHiddenCameraProfiles().length > 0
+        {PREVIEW_CAMERA_PROFILES.length > 0
           ? (
             <Styled.Select
               id="setQuality"
               value={selectedProfile || ''}
               onChange={this.handleSelectProfile}
             >
-              {PreviewService.handleHiddenCameraProfiles().map((profile) => {
+              {PREVIEW_CAMERA_PROFILES.map((profile) => {
                 const label = intlMessages[`${profile.id}`]
                   ? intl.formatMessage(intlMessages[`${profile.id}`])
                   : profile.name;
@@ -850,6 +858,7 @@ class VideoPreview extends Component {
   renderBrightnessInput() {
     const {
       cameraAsContent,
+      cameraAsContentDeviceId,
     } = this.props;
     const {
       webcamDeviceId,
@@ -868,7 +877,7 @@ class VideoPreview extends Component {
       ? (brightness * 100) / 200
       : ((200 - brightness) * 100) / 200;
 
-    if(cameraAsContent){ return null }
+    if(cameraAsContent || webcamDeviceId === cameraAsContentDeviceId){ return null }
 
     return (
       <Styled.InternCol>
@@ -1140,10 +1149,11 @@ class VideoPreview extends Component {
       isOpen,
       priority,
       cameraAsContent,
+      cameraAsContentDeviceId,
       isVirtualBackgroundsEnabled,
     } = this.props;
 
-    const { selectedTab } = this.state;
+    const { selectedTab, webcamDeviceId } = this.state;
     
     const BASE_NAME = window.meetingClientSettings.public.app.basename;
     const WebcamSettingsImg = `${BASE_NAME}/resources/images/webcam_settings.svg`;
@@ -1169,6 +1179,10 @@ class VideoPreview extends Component {
     || !PreviewService.getSkipVideoPreview()
     || forceOpen;
 
+    const shouldShowVirtualBackgroundsTab = isVirtualBackgroundsEnabled 
+    && !cameraAsContent
+    && !(webcamDeviceId === cameraAsContentDeviceId)
+
     return (
       <Styled.VideoPreviewModal
         onRequestClose={this.handleProceed}
@@ -1195,10 +1209,10 @@ class VideoPreview extends Component {
                     darkThemeState={darkThemeState}
                   />
                   <span 
-                    id="webcam-settings-title">{intl.formatMessage(intlMessages.webcamSettingsTitle)}
+                    id="webcam-settings-title">{this.getModalTitle()}
                   </span>
                 </Styled.WebcamTabSelector>
-                {(isVirtualBackgroundsEnabled && !cameraAsContent) && (
+                {shouldShowVirtualBackgroundsTab && (
                 <>
                   <Styled.HeaderSeparator />
                   <Styled.WebcamTabSelector selectedClassName="is-selected">

bigbluebutton-html5/imports/ui/components/video-preview/container.jsx

@@ -30,7 +30,8 @@ const VideoPreviewContainer = (props) => {
   const hasVideoStream = useHasVideoStream();
   const camCapReached = useHasCapReached();
   const isCamLocked = useIsUserLocked();
-  const webcamDeviceId = useStorageKey('WebcamDeviceId');
+  const settingsStorage = window.meetingClientSettings.public.app.userSettingsStorage;
+  const webcamDeviceId = useStorageKey('WebcamDeviceId', settingsStorage);
   const isVirtualBackgroundsEnabled = useIsVirtualBackgroundsEnabled();
   const isCustomVirtualBackgroundsEnabled = useIsCustomVirtualBackgroundsEnabled();
   const isCameraAsContentBroadcasting = ScreenShareService.useIsCameraAsContentBroadcasting();

bigbluebutton-html5/imports/ui/components/video-preview/service.js

@@ -3,7 +3,6 @@ import { getStorageSingletonInstance } from '/imports/ui/services/storage';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import MediaStreamUtils from '/imports/utils/media-stream-utils';
 import VideoService from '/imports/ui/components/video-provider/service';
-import getFromMeetingSettings from '/imports/ui/services/meeting-settings';
 import BBBVideoStream from '/imports/ui/services/webrtc-base/bbb-video-stream';
 import browserInfo from '/imports/utils/browserInfo';
 
@@ -12,26 +11,6 @@ const GUM_MAX_RETRIES = 5;
 const GUM_RETRY_DELAY = 200;
 const CAMERA_AS_CONTENT_PROFILE_ID = 'fhd';
 
-const handleHiddenCameraProfiles = () => {
-  const CAMERA_PROFILES = window.meetingClientSettings.public.kurento.cameraProfiles || [];
-  // Get metadata
-  let cameras = getFromMeetingSettings('show-camera-profiles');
-  // Verify if received metadata
-  if (typeof cameras === 'string') {
-    // Turn it into an array of camera ids
-    cameras = cameras.replace(/[ "]/g, '').split(',');
-    // Search the profiles that match with the metadata and change the hidden attribute
-    cameras.forEach((data) => {
-      CAMERA_PROFILES.forEach((profile) => {
-        if (data === profile.id) { profile.hidden = false; }
-      });
-    });
-  }
-  // Filtered, without hidden profiles
-  const newCameraProfiles = CAMERA_PROFILES.filter(p => !p.hidden);
-  return newCameraProfiles;
-}
-
 const getDefaultProfile = () => {
   const BBBStorage = getStorageSingletonInstance();
   // Unfiltered, includes hidden profiles
@@ -271,5 +250,4 @@ export default {
   getCameraProfile,
   doGUM,
   terminateCameraStream,
-  handleHiddenCameraProfiles,
 };