Disable draggable when webcam is fullscreen

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

@@ -65,6 +65,7 @@ export default class Media extends Component {
       children,
       audioModalIsOpen,
       usersVideo,
+      isFullscreen,
     } = this.props;
 
     const contentClassName = cx({
@@ -100,6 +101,7 @@ export default class Media extends Component {
           disableVideo={disableVideo}
           audioModalIsOpen={audioModalIsOpen}
           usersVideo={usersVideo}
+          isFullscreen={isFullscreen}
         />
       </div>
     );

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

@@ -122,8 +122,12 @@ export default withModalMounter(withTracker(() => {
     data.children = <ScreenshareContainer />;
   }
 
+  const isFullscreen = Session.get('isFullscreen');
+  data.isFullscreen = isFullscreen;
+
   const usersVideo = VideoService.getAllUsersVideo();
   data.usersVideo = usersVideo;
+
   if (MediaService.shouldShowOverlay() && usersVideo.length && viewParticipantsWebcams) {
     data.floatingOverlay = usersVideo.length < 2;
     data.hideOverlay = usersVideo.length === 0;

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

@@ -21,6 +21,7 @@ const propTypes = {
   webcamDraggableState: PropTypes.objectOf(Object).isRequired,
   webcamDraggableDispatch: PropTypes.func.isRequired,
   refMediaContainer: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  isFullscreen: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -30,6 +31,7 @@ const defaultProps = {
   disableVideo: false,
   audioModalIsOpen: false,
   refMediaContainer: null,
+  isFullscreen: false,
 };
 
 class WebcamDraggable extends Component {
@@ -181,9 +183,10 @@ class WebcamDraggable extends Component {
       hideOverlay,
       disableVideo,
       audioModalIsOpen,
+      isFullscreen,
     } = this.props;
 
-    const { dragging, isFullscreen } = webcamDraggableState;
+    const { dragging } = webcamDraggableState;
     let placement = Storage.getItem('webcamPlacement');
     const lastPosition = Storage.getItem('webcamLastPosition') || { x: 0, y: 0 };
     let position = lastPosition;
@@ -251,14 +254,14 @@ class WebcamDraggable extends Component {
       [styles.dropZoneTop]: true,
       [styles.show]: dragging,
       [styles.hide]: !dragging,
-      [styles.cursorGrabbing]: dragging,
+      [styles.cursorGrabbing]: dragging && !isFullscreen,
     });
 
     const dropZoneBottomClassName = cx({
       [styles.dropZoneBottom]: true,
       [styles.show]: dragging,
       [styles.hide]: !dragging,
-      [styles.cursorGrabbing]: dragging,
+      [styles.cursorGrabbing]: dragging && !isFullscreen,
     });
 
     const dropZoneBgTopClassName = cx({

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

@@ -24,7 +24,6 @@ const initialState = {
   dragging: false,
   videoRef: null,
   videoListRef: null,
-  isFullscreen: false,
 };
 
 const reducer = (state, action) => {
@@ -113,18 +112,6 @@ const reducer = (state, action) => {
         dragging: false,
       };
     }
-    case 'onFullscreen': {
-      return {
-        ...state,
-        isFullscreen: true,
-      };
-    }
-    case 'offFullscreen': {
-      return {
-        ...state,
-        isFullscreen: false,
-      };
-    }
     default: {
       throw new Error('Unexpected action');
     }

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

@@ -149,6 +149,7 @@ class VideoListItem extends Component {
       user,
       numOfUsers,
       webcamDraggableState,
+      isFullscreen,
     } = this.props;
     const availableActions = this.getAvailableActions();
     const enableVideoMenu = Meteor.settings.public.kurento.enableVideoMenu || false;
@@ -174,8 +175,8 @@ class VideoListItem extends Component {
             muted
             className={cx({
               [styles.media]: true,
-              [styles.cursorGrab]: !webcamDraggableState.dragging,
-              [styles.cursorGrabbing]: webcamDraggableState.dragging,
+              [styles.cursorGrab]: !webcamDraggableState.dragging && !isFullscreen,
+              [styles.cursorGrabbing]: webcamDraggableState.dragging && !isFullscreen,
             })}
             ref={(ref) => { this.videoTag = ref; }}
             autoPlay