Merge pull request #13726 from ramonlsouza/23fullscreen

Restore 2.3 fullscreen style

bigbluebutton-html5/imports/startup/client/base.jsx

@@ -56,17 +56,6 @@ const fullscreenChangedEvents = [
 ];
 
 class Base extends Component {
-  static handleFullscreenChange() {
-    if (document.fullscreenElement
-      || document.webkitFullscreenElement
-      || document.mozFullScreenElement
-      || document.msFullscreenElement) {
-      Session.set('isFullscreen', true);
-    } else {
-      Session.set('isFullscreen', false);
-    }
-  }
-
   constructor(props) {
     super(props);
 
@@ -75,6 +64,27 @@ class Base extends Component {
       meetingExisted: false,
     };
     this.updateLoadingState = this.updateLoadingState.bind(this);
+    this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
+  }
+
+  handleFullscreenChange() {
+    const { layoutContextDispatch } = this.props;
+
+    if (document.fullscreenElement
+      || document.webkitFullscreenElement
+      || document.mozFullScreenElement
+      || document.msFullscreenElement) {
+      Session.set('isFullscreen', true);
+    } else {
+      layoutContextDispatch({
+        type: ACTIONS.SET_FULLSCREEN_ELEMENT,
+        value: {
+          element: '',
+          group: '',
+        },
+      });
+      Session.set('isFullscreen', false);
+    }
   }
 
   componentDidMount() {
@@ -93,7 +103,7 @@ class Base extends Component {
     if (!animations) HTML.classList.add('animationsDisabled');
 
     fullscreenChangedEvents.forEach((event) => {
-      document.addEventListener(event, Base.handleFullscreenChange);
+      document.addEventListener(event, this.handleFullscreenChange);
     });
     Session.set('isFullscreen', false);
 
@@ -291,7 +301,7 @@ class Base extends Component {
 
   componentWillUnmount() {
     fullscreenChangedEvents.forEach((event) => {
-      document.removeEventListener(event, Base.handleFullscreenChange);
+      document.removeEventListener(event, this.handleFullscreenChange);
     });
   }
 

bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx

@@ -21,12 +21,14 @@ const propTypes = {
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
+  fullscreenRef: PropTypes.instanceOf(Element),
   dark: PropTypes.bool,
   bottom: PropTypes.bool,
   isIphone: PropTypes.bool,
   isFullscreen: PropTypes.bool,
   elementName: PropTypes.string,
   className: PropTypes.string,
+  handleToggleFullScreen: PropTypes.func.isRequired,
   color: PropTypes.string,
   fullScreenStyle: PropTypes.bool,
 };
@@ -40,6 +42,7 @@ const defaultProps = {
   className: '',
   color: 'default',
   fullScreenStyle: true,
+  fullscreenRef: null,
 };
 
 const FullscreenButtonComponent = ({
@@ -57,6 +60,8 @@ const FullscreenButtonComponent = ({
   currentGroup,
   color,
   fullScreenStyle,
+  fullscreenRef,
+  handleToggleFullScreen,
 }) => {
   if (isIphone) return null;
 
@@ -80,6 +85,7 @@ const FullscreenButtonComponent = ({
   });
 
   const handleClick = () => {
+    handleToggleFullScreen(fullscreenRef);
     const newElement = (elementId === currentElement) ? '' : elementId;
     const newGroup = (elementGroup === currentGroup) ? '' : elementGroup;
 

bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx

@@ -1,22 +1,26 @@
 import React, { useContext } from 'react';
 import FullscreenButtonComponent from './component';
 import LayoutContext from '../layout/context';
+import FullscreenService from './service';
 
 const FullscreenButtonContainer = (props) => <FullscreenButtonComponent {...props} />;
 
 export default (props) => {
+  const handleToggleFullScreen = (ref) => FullscreenService.toggleFullScreen(ref);
+  const { isFullscreen } = props;
+
   const isIphone = !!(navigator.userAgent.match(/iPhone/i));
 
   const layoutContext = useContext(LayoutContext);
   const { layoutContextState, layoutContextDispatch } = layoutContext;
   const { fullscreen } = layoutContextState;
   const { element: currentElement, group: currentGroup } = fullscreen;
-  const isFullscreen = !!currentElement;
 
   return (
     <FullscreenButtonContainer
       {...props}
       {...{
+        handleToggleFullScreen,
         isIphone,
         isFullscreen,
         currentElement,