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.

LargeVideo.web.js 2.8KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /* @flow */
  2. import React, { Component } from 'react';
  3. import { Watermarks } from '../../base/react';
  4. import { VideoStatusLabel } from '../../video-status-label';
  5. /**
  6. * Implements a React {@link Component} which represents the large video (a.k.a.
  7. * the conference participant who is on the local stage) on Web/React.
  8. *
  9. * @extends Component
  10. */
  11. export default class LargeVideo extends Component {
  12. /**
  13. * Implements React's {@link Component#render()}.
  14. *
  15. * @inheritdoc
  16. * @returns {ReactElement}
  17. */
  18. render() {
  19. return (
  20. <div
  21. className = 'videocontainer'
  22. id = 'largeVideoContainer'>
  23. <div id = 'sharedVideo'>
  24. <div id = 'sharedVideoIFrame' />
  25. </div>
  26. <div id = 'etherpad' />
  27. <Watermarks />
  28. <div id = 'dominantSpeaker'>
  29. <div className = 'dynamic-shadow' />
  30. <img
  31. id = 'dominantSpeakerAvatar'
  32. src = '' />
  33. </div>
  34. <div id = 'remotePresenceMessage' />
  35. <span id = 'remoteConnectionMessage' />
  36. <div>
  37. <div className = 'video_blurred_container'>
  38. <video
  39. autoPlay = { true }
  40. id = 'largeVideoBackground'
  41. muted = 'true' />
  42. </div>
  43. {
  44. /**
  45. * FIXME: the architecture of elements related to the
  46. * large video and the naming. The background is not
  47. * part of largeVideoWrapper because we are controlling
  48. * the size of the video through largeVideoWrapper.
  49. * That's why we need another container for the the
  50. * background and the largeVideoWrapper in order to
  51. * hide/show them.
  52. */
  53. }
  54. <div id = 'largeVideoWrapper'>
  55. <video
  56. autoPlay = { true }
  57. id = 'largeVideo'
  58. muted = { true } />
  59. </div>
  60. </div>
  61. <span id = 'localConnectionMessage' />
  62. <VideoStatusLabel />
  63. <span
  64. className = 'video-state-indicator centeredVideoLabel'
  65. id = 'recordingLabel'>
  66. <span id = 'recordingLabelText' />
  67. <img
  68. className = 'recordingSpinner'
  69. id = 'recordingSpinner'
  70. src = 'images/spin.svg' />
  71. </span>
  72. </div>
  73. );
  74. }
  75. }