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

83 lines
1.9 KiB
React
Raw Normal View History

import React from 'react';
2019-02-08 01:47:28 +08:00
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import Button from '/imports/ui/components/button/component';
2019-01-15 21:13:55 +08:00
import cx from 'classnames';
2019-02-08 01:47:28 +08:00
import PropTypes from 'prop-types';
import { styles } from './styles';
const intlMessages = defineMessages({
fullscreenButton: {
id: 'app.fullscreenButton.label',
description: 'Fullscreen label',
},
});
2019-02-08 01:47:28 +08:00
const propTypes = {
intl: intlShape.isRequired,
fullscreenRef: PropTypes.instanceOf(Element),
2019-02-08 01:47:28 +08:00
dark: PropTypes.bool,
2019-07-24 06:24:31 +08:00
bottom: PropTypes.bool,
isIphone: PropTypes.bool,
isFullscreen: PropTypes.bool,
2019-02-08 01:47:28 +08:00
elementName: PropTypes.string,
className: PropTypes.string,
handleToggleFullScreen: PropTypes.func.isRequired,
2019-02-08 01:47:28 +08:00
};
const defaultProps = {
dark: false,
2019-07-24 06:24:31 +08:00
bottom: false,
isIphone: false,
isFullscreen: false,
2019-02-08 01:47:28 +08:00
elementName: '',
className: '',
fullscreenRef: null,
2019-02-08 01:47:28 +08:00
};
const FullscreenButtonComponent = ({
2019-03-12 00:21:12 +08:00
intl,
dark,
bottom,
2019-03-12 00:21:12 +08:00
elementName,
className,
fullscreenRef,
handleToggleFullScreen,
2019-06-17 23:55:53 +08:00
isIphone,
isFullscreen,
}) => {
2019-06-17 23:55:53 +08:00
if (isIphone) return null;
const formattedLabel = intl.formatMessage(
intlMessages.fullscreenButton,
({ 0: elementName || '' }),
);
2019-03-12 00:21:12 +08:00
const wrapperClassName = cx({
[styles.wrapper]: true,
[styles.dark]: dark,
[styles.light]: !dark,
[styles.top]: !bottom,
[styles.bottom]: bottom,
2019-03-12 00:21:12 +08:00
});
return (
2019-03-12 00:21:12 +08:00
<div className={wrapperClassName}>
<Button
color="default"
icon={!isFullscreen ? 'fullscreen' : 'exit_fullscreen'}
size="sm"
onClick={() => handleToggleFullScreen(fullscreenRef)}
label={formattedLabel}
hideLabel
className={cx(styles.button, styles.fullScreenButton, className)}
2019-06-22 04:11:05 +08:00
data-test="presentationFullscreenButton"
/>
</div>
);
};
2019-02-08 01:47:28 +08:00
FullscreenButtonComponent.propTypes = propTypes;
FullscreenButtonComponent.defaultProps = defaultProps;
export default injectIntl(FullscreenButtonComponent);