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.

PictureInPictureButton.js 2.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. // @flow
  2. import { Platform } from 'react-native';
  3. import { PIP_ENABLED, getFeatureFlag } from '../../../base/flags';
  4. import { translate } from '../../../base/i18n';
  5. import { IconMenuDown } from '../../../base/icons';
  6. import { connect } from '../../../base/redux';
  7. import { AbstractButton } from '../../../base/toolbox';
  8. import type { AbstractButtonProps } from '../../../base/toolbox';
  9. import { enterPictureInPicture } from '../actions';
  10. type Props = AbstractButtonProps & {
  11. /**
  12. * Whether Picture-in-Picture is enabled or not.
  13. */
  14. _enabled: boolean,
  15. /**
  16. * The redux {@code dispatch} function.
  17. */
  18. dispatch: Function
  19. };
  20. /**
  21. * An implementation of a button for entering Picture-in-Picture mode.
  22. */
  23. class PictureInPictureButton extends AbstractButton<Props, *> {
  24. accessibilityLabel = 'toolbar.accessibilityLabel.pip';
  25. icon = IconMenuDown;
  26. label = 'toolbar.pip';
  27. /**
  28. * Handles clicking / pressing the button.
  29. *
  30. * @protected
  31. * @returns {void}
  32. */
  33. _handleClick() {
  34. this.props.dispatch(enterPictureInPicture());
  35. }
  36. /**
  37. * Implements React's {@link Component#render()}.
  38. *
  39. * @inheritdoc
  40. * @returns {React$Node}
  41. */
  42. render() {
  43. return this.props._enabled ? super.render() : null;
  44. }
  45. }
  46. /**
  47. * Maps (parts of) the redux state to the associated props for the
  48. * {@code PictureInPictureButton} component.
  49. *
  50. * @param {Object} state - The Redux state.
  51. * @private
  52. * @returns {{
  53. * _enabled: boolean
  54. * }}
  55. */
  56. function _mapStateToProps(state): Object {
  57. const flag = Boolean(getFeatureFlag(state, PIP_ENABLED));
  58. let enabled = flag;
  59. // Override flag for Android < 26, PiP was introduced in Oreo.
  60. // https://developer.android.com/guide/topics/ui/picture-in-picture
  61. if (Platform.OS === 'android' && Platform.Version < 26) {
  62. enabled = false;
  63. }
  64. return {
  65. _enabled: enabled
  66. };
  67. }
  68. export default translate(connect(_mapStateToProps)(PictureInPictureButton));