Merge pull request #12569 from pedrobmarin/f-v-ds

feat(video): data savings

bigbluebutton-html5/imports/ui/components/media/component.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import deviceInfo from '/imports/utils/deviceInfo';
-import Settings from '/imports/ui/services/settings';
 import WebcamDraggable from './webcam-draggable-overlay/component';
 import { styles } from './styles';
 import Storage from '../../services/storage/session';
@@ -15,7 +14,6 @@ const propTypes = {
   singleWebcam: PropTypes.bool.isRequired,
   hideOverlay: PropTypes.bool,
   swapLayout: PropTypes.bool,
-  disableVideo: PropTypes.bool,
   audioModalIsOpen: PropTypes.bool,
   layoutContextState: PropTypes.instanceOf(Object).isRequired,
 };
@@ -24,7 +22,6 @@ const defaultProps = {
   usersVideo: [],
   hideOverlay: true,
   swapLayout: false,
-  disableVideo: false,
   audioModalIsOpen: false,
 };
 
@@ -40,7 +37,6 @@ export default class Media extends Component {
       swapLayout,
       singleWebcam,
       hideOverlay,
-      disableVideo,
       children,
       audioModalIsOpen,
       usersVideo,
@@ -67,8 +63,8 @@ export default class Media extends Component {
       [styles.containerV]: webcamsPlacement === 'top' || webcamsPlacement === 'bottom' || webcamsPlacement === 'floating',
       [styles.containerH]: webcamsPlacement === 'left' || webcamsPlacement === 'right',
     });
-    const { viewParticipantsWebcams } = Settings.dataSaving;
-    const showVideo = usersVideo.length > 0 && viewParticipantsWebcams && isMeteorConnected;
+
+    const showVideo = usersVideo.length > 0 && isMeteorConnected;
 
     return (
       <div
@@ -114,7 +110,6 @@ export default class Media extends Component {
             singleWebcam={singleWebcam}
             usersVideoLenght={usersVideo.length}
             hideOverlay={hideOverlay}
-            disableVideo={disableVideo}
             audioModalIsOpen={audioModalIsOpen}
             usersVideo={usersVideo}
           />

bigbluebutton-html5/imports/ui/components/media/container.jsx

@@ -65,7 +65,7 @@ let userWasInBreakout = false;
 
 export default withLayoutConsumer(withModalMounter(withTracker(() => {
   const { dataSaving } = Settings;
-  const { viewParticipantsWebcams, viewScreenshare } = dataSaving;
+  const { viewScreenshare } = dataSaving;
   const hidePresentation = getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation);
   const autoSwapLayout = getFromUserSettings('bbb_auto_swap_layout', LAYOUT_CONFIG.autoSwapLayout);
   const { current_presentation: hasPresentation } = MediaService.getPresentationInfo();
@@ -112,7 +112,7 @@ export default withLayoutConsumer(withModalMounter(withTracker(() => {
   const { streams: usersVideo } = VideoService.getVideoStreams();
   data.usersVideo = usersVideo;
 
-  if (MediaService.shouldShowOverlay() && usersVideo.length && viewParticipantsWebcams) {
+  if (MediaService.shouldShowOverlay() && usersVideo.length) {
     data.floatingOverlay = usersVideo.length < 2;
     data.hideOverlay = usersVideo.length === 0;
   }
@@ -121,7 +121,6 @@ export default withLayoutConsumer(withModalMounter(withTracker(() => {
 
   data.isScreensharing = MediaService.isVideoBroadcasting();
   data.swapLayout = (getSwapLayout() || !hasPresentation) && shouldEnableSwapLayout();
-  data.disableVideo = !viewParticipantsWebcams;
 
   if (data.swapLayout) {
     data.floatingOverlay = true;

bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx

@@ -14,7 +14,6 @@ import { WEBCAMSAREA_MIN_PERCENT, PRESENTATIONAREA_MIN_WIDTH } from '/imports/ui
 const propTypes = {
   swapLayout: PropTypes.bool,
   hideOverlay: PropTypes.bool,
-  disableVideo: PropTypes.bool,
   audioModalIsOpen: PropTypes.bool,
   webcamDraggableState: PropTypes.objectOf(Object).isRequired,
   webcamDraggableDispatch: PropTypes.func.isRequired,
@@ -26,7 +25,6 @@ const propTypes = {
 const defaultProps = {
   swapLayout: false,
   hideOverlay: false,
-  disableVideo: false,
   audioModalIsOpen: false,
   refMediaContainer: null,
 };
@@ -280,7 +278,6 @@ class WebcamDraggable extends PureComponent {
       webcamDraggableState,
       swapLayout,
       hideOverlay,
-      disableVideo,
       audioModalIsOpen,
     } = this.props;
 
@@ -494,8 +491,7 @@ class WebcamDraggable extends PureComponent {
             }}
           >
             {
-              !disableVideo
-                && !audioModalIsOpen
+              !audioModalIsOpen
                 ? (
                   <VideoProviderContainer
                     swapLayout={swapLayout}

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

@@ -400,6 +400,10 @@ class VideoService {
       { fields: neededDataTypes },
     ).fetch();
 
+    // Data savings enabled will only show local streams
+    const { viewParticipantsWebcams } = Settings.dataSaving;
+    if (!viewParticipantsWebcams) streams = this.filterLocalOnly(streams);
+
     const moderatorOnly = this.webcamsOnlyForModerator();
     if (moderatorOnly) streams = this.filterModeratorOnly(streams);
     const connectingStream = this.getConnectingStream(streams);
@@ -521,6 +525,10 @@ class VideoService {
     return streams;
   }
 
+  filterLocalOnly(streams) {
+    return streams.filter(stream => stream.userId === Auth.userID);
+  }
+
   disableCam() {
     const m = Meetings.findOne({ meetingId: Auth.meetingID },
       { fields: { 'lockSettingsProps.disableCam': 1 } });
@@ -637,7 +645,6 @@ class VideoService {
     const locks = {
       videoLocked: this.isUserLocked(),
       videoConnecting: this.isConnecting,
-      dataSaving: !viewParticipantsWebcams,
       meteorDisconnected: !Meteor.status().connected
     };
     const locksKeys = Object.keys(locks);

bigbluebutton-html5/imports/ui/components/video-provider/video-button/component.jsx

@@ -25,10 +25,6 @@ const intlMessages = defineMessages({
     id: 'app.video.connecting',
     description: 'video connecting label',
   },
-  dataSaving: {
-    id: 'app.video.dataSaving',
-    description: 'video data saving label',
-  },
   meteorDisconnected: {
     id: 'app.video.clientDisconnected',
     description: 'Meteor disconnected label',

bigbluebutton-html5/public/locales/en.json

@@ -373,7 +373,7 @@
     "app.settings.main.save.label": "Save",
     "app.settings.main.save.label.description": "Saves the changes and closes the settings menu",
     "app.settings.dataSavingTab.label": "Data savings",
-    "app.settings.dataSavingTab.webcam": "Enable webcams",
+    "app.settings.dataSavingTab.webcam": "Enable other participants webcams",
     "app.settings.dataSavingTab.screenShare": "Enable desktop sharing",
     "app.settings.dataSavingTab.description": "To save your bandwidth adjust what's currently being displayed.",
     "app.settings.save-notification.label": "Settings have been saved",
@@ -672,7 +672,6 @@
     "app.videoPreview.profileNotFoundLabel": "No supported camera profile",
     "app.video.joinVideo": "Share webcam",
     "app.video.connecting": "Webcam sharing is starting ...",
-    "app.video.dataSaving": "Webcam sharing is disabled in Data Saving",
     "app.video.leaveVideo": "Stop sharing webcam",
     "app.video.iceCandidateError": "Error on adding ICE candidate",
     "app.video.iceConnectionStateError": "Connection failure (ICE error 1107)",