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.

UserMediaPermissionsGuidanceOverlay.js 2.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. /* global interfaceConfig */
  2. import Overlay from '../overlay/Overlay';
  3. /**
  4. * An overlay with guidance how to proceed with gUM prompt.
  5. */
  6. class GUMOverlayImpl extends Overlay {
  7. /**
  8. * Constructs overlay with guidance how to proceed with gUM prompt.
  9. * @param {string} browser - name of browser for which to construct the
  10. * guidance overlay.
  11. * @override
  12. */
  13. constructor(browser) {
  14. super();
  15. this.browser = browser;
  16. }
  17. /**
  18. * @inheritDoc
  19. */
  20. _buildOverlayContent() {
  21. // `<span data-i18n='[html]userMedia.${this.browser}GrantPermissions'
  22. // class='inlay__text'></span>`
  23. let title = 'HipChat Video needs to use your microphone and camera.';
  24. let text;
  25. text = 'Select "Allow" when your browser asks for these permissions.';
  26. let content = (
  27. `<div class="inlay">
  28. <span class="inlay__icon icon-microphone"></span>
  29. <span class="inlay__icon icon-camera"></span>
  30. <h3 class="inlay__title">${title}</h3>
  31. <span class='inlay__text'>${text}</span>
  32. </div>`
  33. );
  34. if (interfaceConfig.HAS_POLICY) {
  35. content += (
  36. `<div class="policy overlay__policy">
  37. <p class="policy__text" data-i18n="policyText"></p>
  38. <div class="policy__logo">
  39. <img src=""/>
  40. </div>
  41. </div>`
  42. );
  43. }
  44. return content;
  45. }
  46. }
  47. /**
  48. * Stores GUM overlay instance.
  49. * @type {GUMOverlayImpl}
  50. */
  51. let overlay;
  52. export default {
  53. /**
  54. * Checks whether the overlay is currently visible.
  55. * @return {boolean} <tt>true</tt> if the overlay is visible
  56. * or <tt>false</tt> otherwise.
  57. */
  58. isVisible () {
  59. return overlay && overlay.isVisible();
  60. },
  61. /**
  62. * Shows browser-specific overlay with guidance how to proceed with
  63. * gUM prompt.
  64. * @param {string} browser - name of browser for which to show the
  65. * guidance overlay.
  66. */
  67. show(browser) {
  68. if (!overlay) {
  69. overlay = new GUMOverlayImpl(browser);
  70. }
  71. overlay.show();
  72. },
  73. /**
  74. * Hides browser-specific overlay with guidance how to proceed with
  75. * gUM prompt.
  76. */
  77. hide() {
  78. overlay && overlay.hide();
  79. }
  80. };