You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

FullscreenButton.js 2.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. // @flow
  2. import { translate } from '../../../base/i18n';
  3. import { IconExitFullScreen, IconFullScreen } from '../../../base/icons';
  4. import { connect } from '../../../base/redux';
  5. import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
  6. type Props = AbstractButtonProps & {
  7. /**
  8. * Whether or not the app is currently in full screen.
  9. */
  10. _fullScreen: boolean,
  11. };
  12. /**
  13. * Implementation of a button for toggling fullscreen state.
  14. */
  15. class FullscreenButton extends AbstractButton<Props, *> {
  16. accessibilityLabel = 'toolbar.accessibilityLabel.fullScreen';
  17. label = 'toolbar.enterFullScreen';
  18. toggledLabel = 'toolbar.exitFullScreen';
  19. /**
  20. * Retrieves icon dynamically.
  21. */
  22. get icon() {
  23. if (this._isToggled()) {
  24. return IconExitFullScreen;
  25. }
  26. return IconFullScreen;
  27. }
  28. /**
  29. * Required by linter due to AbstractButton overwritten prop being writable.
  30. *
  31. * @param {string} _value - The value.
  32. */
  33. set icon(_value) {
  34. // Unused.
  35. }
  36. /**
  37. * Retrieves icon dynamically.
  38. */
  39. get tooltip() {
  40. if (this._isToggled()) {
  41. return 'toolbar.exitFullScreen';
  42. }
  43. return 'toolbar.enterFullScreen';
  44. }
  45. /**
  46. * Required by linter due to AbstractButton overwritten prop being writable.
  47. *
  48. * @param {string} _value - The value.
  49. */
  50. set tooltip(_value) {
  51. // Unused.
  52. }
  53. /**
  54. * Indicates whether this button is in toggled state or not.
  55. *
  56. * @override
  57. * @protected
  58. * @returns {boolean}
  59. */
  60. _isToggled() {
  61. return this.props._fullScreen;
  62. }
  63. }
  64. /**
  65. * Function that maps parts of Redux state tree into component props.
  66. *
  67. * @param {Object} state - Redux state.
  68. * @returns {Object}
  69. */
  70. const mapStateToProps = state => {
  71. return {
  72. _fullScreen: state['features/toolbox'].fullScreen
  73. };
  74. };
  75. export default translate(connect(mapStateToProps)(FullscreenButton));