modified previous code structure

bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx

@@ -7,7 +7,7 @@ import { showModal } from '/imports/ui/components/app/service';
 
 import Button from '../button/component';
 import RecordingIndicator from './recording-indicator/component';
-import SettingsDropdown from './settings-dropdown/component';
+import SettingsDropdownContainer from './settings-dropdown/container';
 import Icon from '/imports/ui/components/icon/component';
 import BreakoutJoinConfirmation from '/imports/ui/components/breakout-join-confirmation/component';
 import Dropdown from '/imports/ui/components/dropdown/component';
@@ -85,7 +85,7 @@ class NavBar extends Component {
           <RecordingIndicator beingRecorded={beingRecorded}/>
         </div>
         <div className={styles.right}>
-          <SettingsDropdown />
+          <SettingsDropdownContainer />
         </div>
       </div>
     );

bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx

@@ -53,44 +53,16 @@ const intlMessages = defineMessages({
     id: 'app.navBar.settingsDropdown.leaveSessionDesc',
     defaultMessage: 'Leave the meeting',
   },
+  exitFullScreenDesc: {
+    id: 'app.navBar.settingsDropdown.exitFullScreenDesc',
+    defaultMessage: 'minimize the window',
+  },
+  exitFullScreenLabel: {
+    id: 'app.navBar.settingsDropdown.exitFullScreenLabel',
+    defaultMessage: 'Exit fullscreen',
+  },
 });
 
-const toggleFullScreen = () => {
-  let element = document.documentElement;
-
-  if (document.fullscreenEnabled
-    || document.mozFullScreenEnabled
-    || document.webkitFullscreenEnabled) {
-
-    // If the page is already fullscreen, exit fullscreen
-    if (document.fullscreenElement
-      || document.webkitFullscreenElement
-      || document.mozFullScreenElement
-      || document.msFullscreenElement) {
-
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      }
-
-    // If the page is not currently fullscreen, make fullscreen
-    } else {
-      if (element.requestFullscreen) {
-        element.requestFullscreen();
-      } else if (element.mozRequestFullScreen) {
-        element.mozRequestFullScreen();
-      } else if (element.webkitRequestFullscreen) {
-        element.webkitRequestFullscreen();
-      } else if (element.msRequestFullscreen) {
-        element.msRequestFullscreen();
-      }
-    }
-  }
-};
-
 const openSettings = () => showModal(<SettingsMenuContainer  />);
 
 const openAbout = () => showModal(<AboutContainer />);
@@ -103,7 +75,19 @@ class SettingsDropdown extends Component {
   }
 
   render() {
+
     const { intl } = this.props;
+
+    let fullScreenLabel; let fullScreenDesc;
+
+    if(!this.props.isFullScreen){
+      fullScreenLabel = intl.formatMessage(intlMessages.fullscreenLabel);
+      fullScreenDesc = intl.formatMessage(intlMessages.fullscreenDesc);
+    }else{
+      fullScreenLabel = intl.formatMessage(intlMessages.exitFullScreenLabel);
+      fullScreenDesc = intl.formatMessage(intlMessages.exitFullScreenDesc);
+    }
+
     return (
       <Dropdown ref="dropdown">
         <DropdownTrigger>
@@ -124,9 +108,9 @@ class SettingsDropdown extends Component {
           <DropdownList>
             <DropdownListItem
               icon="fullscreen"
-              label={intl.formatMessage(intlMessages.fullscreenLabel)}
+              label={fullScreenLabel}
-              description={intl.formatMessage(intlMessages.fullscreenDesc)}
+              description={fullScreenDesc}
-              onClick={toggleFullScreen.bind(this)}
+              onClick={this.props.handleToggleFullscreen}
             />
             <DropdownListItem
               icon="more"

bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx

@@ -0,0 +1,48 @@
+import { Meteor } from 'meteor/meteor';
+import { createContainer } from 'meteor/react-meteor-data';
+import React, { Component, PropTypes } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import SettingsDropdown from './component';
+import Service from './service';
+
+export default class SettingsDropdownContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFullScreen: false,
+    }
+
+    this.handleMinimize = this.handleMinimize.bind(this);
+    this.handleMaximize = this.handleMaximize.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener("bbb.maximizeScreen", this.handleMaximize);
+    window.addEventListener("bbb.minimizeScreen", this.handleMinimize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("bbb.maximizeScreen", this.handleMaximize);
+    window.removeEventListener("bbb.minimizeScreen", this.handleMinimize);
+  }
+
+  handleMaximize() {
+    this.setState({isFullScreen: true});
+  }
+
+  handleMinimize() {
+    this.setState({isFullScreen: false});
+  }
+
+  render() {
+    const handleToggleFullscreen = Service.toggleFullScreen;
+    const isFullScreen = this.state.isFullScreen;
+    return(
+      <SettingsDropdown
+        handleToggleFullscreen={handleToggleFullscreen}
+        isFullScreen={isFullScreen}
+      />
+    );
+  }
+}

bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/service.js

@@ -0,0 +1,55 @@
+import LocalStorage from '/imports/ui/services/storage/local.js';
+
+toggleFullScreen = () => {
+ let element = document.documentElement;
+
+ if (document.fullscreenEnabled
+   || document.mozFullScreenEnabled
+   || document.webkitFullscreenEnabled) {
+
+   // If the page is already fullscreen, exit fullscreen
+   if (document.fullscreenElement
+     || document.webkitFullscreenElement
+     || document.mozFullScreenElement
+     || document.msFullscreenElement) {
+
+     if (document.exitFullscreen) {
+       document.exitFullscreen();
+     } else if (document.mozCancelFullScreen) {
+       document.mozCancelFullScreen();
+     } else if (document.webkitExitFullscreen) {
+       document.webkitExitFullscreen();
+     }
+     minimize();
+
+   // If the page is not currently fullscreen, make fullscreen
+   } else {
+     if (element.requestFullscreen) {
+       element.requestFullscreen();
+     } else if (element.mozRequestFullScreen) {
+       element.mozRequestFullScreen();
+     } else if (element.webkitRequestFullscreen) {
+       element.webkitRequestFullscreen();
+     } else if (element.msRequestFullscreen) {
+       element.msRequestFullscreen();
+     }
+     maximize();
+   }
+ }
+};
+
+maximize = () => {
+  let maximizeScreen = new CustomEvent('bbb.maximizeScreen', {
+    status: 'maximized' });
+  window.dispatchEvent(maximizeScreen);
+};
+
+minimize = () => {
+  let minimizeScreen = new CustomEvent('bbb.minimizeScreen', {
+    status: 'minimized' });
+  window.dispatchEvent(minimizeScreen);
+};
+
+export {
+  toggleFullScreen,
+};