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

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