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.8KB

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