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.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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 titleOptions = '{ "postProcess": "resolveAppName" }';
  24. let policyTextKey = 'startupoverlay.policyText';
  25. let policyLogo = '';
  26. let policyLogoSrc = interfaceConfig.POLICY_LOGO;
  27. if (policyLogoSrc) {
  28. policyLogo += (
  29. `<div class="policy__logo">
  30. <img src="${policyLogoSrc}"/>
  31. </div>`
  32. );
  33. }
  34. return (
  35. `<div class="inlay">
  36. <span class="inlay__icon icon-microphone"></span>
  37. <span class="inlay__icon icon-camera"></span>
  38. <h3 class="inlay__title" data-i18n="${titleKey}"
  39. data-i18n-options='${titleOptions}'></h3>
  40. <span class='inlay__text'data-i18n='[html]${textKey}'></span>
  41. </div>
  42. <div class="policy overlay__policy">
  43. <p class="policy__text" data-i18n="[html]${policyTextKey}"></p>
  44. ${policyLogo}
  45. </div>`
  46. );
  47. }
  48. }
  49. /**
  50. * Stores GUM overlay instance.
  51. * @type {GUMOverlayImpl}
  52. */
  53. let overlay;
  54. export default {
  55. /**
  56. * Checks whether the overlay is currently visible.
  57. * @return {boolean} <tt>true</tt> if the overlay is visible
  58. * or <tt>false</tt> otherwise.
  59. */
  60. isVisible () {
  61. return overlay && overlay.isVisible();
  62. },
  63. /**
  64. * Shows browser-specific overlay with guidance how to proceed with
  65. * gUM prompt.
  66. * @param {string} browser - name of browser for which to show the
  67. * guidance overlay.
  68. */
  69. show(browser) {
  70. if (!overlay) {
  71. overlay = new GUMOverlayImpl(browser);
  72. }
  73. overlay.show();
  74. },
  75. /**
  76. * Hides browser-specific overlay with guidance how to proceed with
  77. * gUM prompt.
  78. */
  79. hide() {
  80. overlay && overlay.hide();
  81. }
  82. };