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.

PageReloadFilmstripOnlyOverlay.js 1.8KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import React from 'react';
  2. import { translate } from '../../base/i18n';
  3. import AbstractPageReloadOverlay from './AbstractPageReloadOverlay';
  4. import FilmstripOnlyOverlayFrame from './FilmstripOnlyOverlayFrame';
  5. /**
  6. * Implements a React Component for page reload overlay for filmstrip only
  7. * mode. Shown before the conference is reloaded. Shows a warning message and
  8. * counts down towards the reload.
  9. */
  10. class PageReloadFilmstripOnlyOverlay extends AbstractPageReloadOverlay {
  11. /**
  12. * PageReloadFilmstripOnlyOverlay component's property types.
  13. *
  14. * @static
  15. */
  16. static propTypes = {
  17. ...AbstractPageReloadOverlay.propTypes,
  18. /**
  19. * The function to translate human-readable text.
  20. *
  21. * @public
  22. * @type {Function}
  23. */
  24. t: React.PropTypes.func
  25. }
  26. /**
  27. * Implements React's {@link Component#render()}.
  28. *
  29. * @inheritdoc
  30. * @returns {ReactElement|null}
  31. */
  32. render() {
  33. const { t } = this.props;
  34. const { message, timeLeft, title } = this.state;
  35. return (
  36. <FilmstripOnlyOverlayFrame>
  37. <div className = 'inlay-filmstrip-only__container'>
  38. <div className = 'inlay-filmstrip-only__title'>
  39. { t(title) }
  40. </div>
  41. <div className = 'inlay-filmstrip-only__text'>
  42. { t(message, { seconds: timeLeft }) }
  43. </div>
  44. </div>
  45. {
  46. this._renderButton()
  47. }
  48. {
  49. this._renderProgressBar()
  50. }
  51. </FilmstripOnlyOverlayFrame>
  52. );
  53. }
  54. }
  55. export default translate(PageReloadFilmstripOnlyOverlay);