modified previous code structure
This commit is contained in:
parent
2863377ba7
commit
f71f62d19a
@ -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>
|
||||
);
|
||||
|
@ -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"
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@ -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,
|
||||
};
|
Loading…
Reference in New Issue
Block a user