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.

Video.js 1.8KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import React, { Component } from 'react';
  2. import { styles } from './styles';
  3. /**
  4. * Web version of Audio component.
  5. * @extends Component
  6. */
  7. export class Video extends Component {
  8. /**
  9. * Implements React's {@link Component#render()}.
  10. *
  11. * @inheritdoc
  12. * @returns {ReactElement|null}
  13. */
  14. render() {
  15. const stream = this.props.stream;
  16. if (stream) {
  17. // TODO URL.releaseObjectURL on componentDid/WillUnmount
  18. const src = URL.createObjectURL(stream);
  19. const style
  20. = this.props.mirror ? styles.mirroredVideo : styles.video;
  21. return (
  22. <video
  23. autoPlay = { true }
  24. muted = { this.props.muted }
  25. onPlaying = { this.props.onPlaying }
  26. src = { src }
  27. style = { style } />
  28. );
  29. }
  30. return null;
  31. }
  32. /**
  33. * Implements shouldComponentUpdate of React Component. We don't update
  34. * component if stream has not changed.
  35. *
  36. * @inheritdoc
  37. * @param {Object} nextProps - Props that component is going to receive.
  38. * @returns {boolean}
  39. */
  40. shouldComponentUpdate(nextProps) {
  41. return (nextProps.stream || {}).id !== (this.props.stream || {}).id;
  42. }
  43. }
  44. /**
  45. * Video component's property types.
  46. *
  47. * @static
  48. */
  49. Video.propTypes = {
  50. mirror: React.PropTypes.bool,
  51. muted: React.PropTypes.bool,
  52. onPlaying: React.PropTypes.func,
  53. stream: React.PropTypes.object,
  54. /**
  55. * Not used on Web. Introduced for the benefit of React Native. For more
  56. * details, refer to the zOrder property of the Video class for React
  57. * Native (i.e. ../native/Video.js).
  58. */
  59. zOrder: React.PropTypes.number
  60. };