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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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. let textKey = `userMedia.${this.browser}GrantPermissions`;
  22. let titleKey = 'startupoverlay.title';
  23. let policyTextKey = 'startupoverlay.policyText';
  24. let policyLogo = '';
  25. let policyLogoSrc = interfaceConfig.POLICY_LOGO;
  26. if (policyLogoSrc) {
  27. policyLogo += (
  28. `<div class="policy__logo">
  29. <img src="${policyLogoSrc}"/>
  30. </div>`
  31. );
  32. }
  33. return (
  34. `<div class="inlay">
  35. <span class="inlay__icon icon-microphone"></span>
  36. <span class="inlay__icon icon-camera"></span>
  37. <h3 class="inlay__title" data-i18n="${titleKey}"></h3>
  38. <span class='inlay__text'data-i18n='[html]${textKey}'></span>
  39. </div>
  40. <div class="policy overlay__policy">
  41. <p class="policy__text" data-i18n="[html]${policyTextKey}"></p>
  42. ${policyLogo}
  43. </div>`
  44. );
  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. };