modified previous code structure

This commit is contained in:
KDSBrowne 2017-02-13 08:21:53 -08:00
parent 2863377ba7
commit f71f62d19a
4 changed files with 128 additions and 41 deletions

View File

@ -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>
);

View File

@ -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)}
description={intl.formatMessage(intlMessages.fullscreenDesc)}
onClick={toggleFullScreen.bind(this)}
label={fullScreenLabel}
description={fullScreenDesc}
onClick={this.props.handleToggleFullscreen}
/>
<DropdownListItem
icon="more"

View File

@ -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}
/>
);
}
}

View File

@ -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,
};