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.

AbstractAudio.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. // @flow
  2. import PropTypes from 'prop-types';
  3. import React, { Component } from 'react';
  4. /**
  5. * The React {@link Component} which is similar to Web's
  6. * {@code HTMLAudioElement}.
  7. */
  8. export default class AbstractAudio extends Component<*> {
  9. /**
  10. * The (reference to the) {@link ReactElement} which actually implements
  11. * this {@code AbstractAudio}.
  12. */
  13. _ref: ?Object;
  14. _setRef: Function;
  15. /**
  16. * {@code AbstractAudio} component's property types.
  17. *
  18. * @static
  19. */
  20. static propTypes = {
  21. /**
  22. * The URL of a media resource to use in the element.
  23. *
  24. * @type {string}
  25. */
  26. src: PropTypes.string,
  27. stream: PropTypes.object
  28. };
  29. /**
  30. * Initializes a new {@code AbstractAudio} instance.
  31. *
  32. * @param {Object} props - The read-only properties with which the new
  33. * instance is to be initialized.
  34. */
  35. constructor(props: Object) {
  36. super(props);
  37. // Bind event handlers so they are only bound once for every instance.
  38. this._setRef = this._setRef.bind(this);
  39. }
  40. /**
  41. * Attempts to pause the playback of the media.
  42. *
  43. * @public
  44. * @returns {void}
  45. */
  46. pause() {
  47. this._ref && typeof this._ref.pause === 'function' && this._ref.pause();
  48. }
  49. /**
  50. * Attempts to being the playback of the media.
  51. *
  52. * @public
  53. * @returns {void}
  54. */
  55. play() {
  56. this._ref && typeof this._ref.play === 'function' && this._ref.play();
  57. }
  58. /**
  59. * Renders this {@code AbstractAudio} as a React {@link Component} of a
  60. * specific type.
  61. *
  62. * @param {string|ReactClass} type - The type of the React {@code Component}
  63. * which is to be rendered.
  64. * @param {Object|undefined} props - The read-only React {@code Component}
  65. * properties, if any, to render. If {@code undefined}, the props of this
  66. * instance will be rendered.
  67. * @protected
  68. * @returns {ReactElement}
  69. */
  70. _render(type, props) {
  71. const {
  72. children,
  73. /* eslint-disable no-unused-vars */
  74. // The following properties are consumed by React itself so they are
  75. // to not be propagated.
  76. ref,
  77. /* eslint-enable no-unused-vars */
  78. ...filteredProps
  79. } = props || this.props;
  80. return (
  81. React.createElement(
  82. type,
  83. {
  84. ...filteredProps,
  85. ref: this._setRef
  86. },
  87. children));
  88. }
  89. /**
  90. * Set the (reference to the) {@link ReactElement} which actually implements
  91. * this {@code AbstractAudio}.
  92. *
  93. * @param {Object} ref - The (reference to the) {@code ReactElement} which
  94. * actually implements this {@code AbstractAudio}.
  95. * @private
  96. * @returns {void}
  97. */
  98. _setRef(ref) {
  99. this._ref = ref;
  100. }
  101. }