From 9d3b2aee02740f1f84cbad551ba9136c87ab11cd Mon Sep 17 00:00:00 2001 From: tsareg Date: Tue, 21 Jun 2016 12:08:32 +0300 Subject: [PATCH] Show overlay with guidance for gUM permission prompts --- conference.js | 29 +++++++++--- css/overlay.css | 15 +++++++ lang/main.json | 13 +++++- modules/UI/UI.js | 15 +++++++ .../UserMediaPermissionsGuidanceOverlay.js | 45 +++++++++++++++++++ 5 files changed, 110 insertions(+), 7 deletions(-) create mode 100644 modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js diff --git a/conference.js b/conference.js index eb4bbe04b..188c6c8f9 100644 --- a/conference.js +++ b/conference.js @@ -27,6 +27,8 @@ let room, connection, localAudio, localVideo, roomLocker; import {VIDEO_CONTAINER_TYPE} from "./modules/UI/videolayout/LargeVideo"; +const USER_MEDIA_PERMISSIONS_GUIDANCE_OVERLAY_TIMEOUT = 500; + /** * Known custom conference commands. */ @@ -427,25 +429,42 @@ export default { }; } - let audioAndVideoError, audioOnlyError; + let audioAndVideoError, + audioOnlyError, + tracksCreated; return JitsiMeetJS.init(config).then(() => { - return Promise.all([ + let tryCreateLocalTracks = // try to retrieve audio and video createLocalTracks(['audio', 'video']) - // if failed then try to retrieve only audio + // if failed then try to retrieve only audio .catch(err => { audioAndVideoError = err; return createLocalTracks(['audio']); }) - // if audio also failed then just return empty array + // if audio also failed then just return empty array .catch(err => { audioOnlyError = err; return []; - }), + }) + .then(tracks => { + tracksCreated = true; + return tracks; + }); + + window.setTimeout(() => { + if (!audioAndVideoError && !audioOnlyError && !tracksCreated) { + APP.UI.showUserMediaPermissionsGuidanceOverlay(); + } + }, USER_MEDIA_PERMISSIONS_GUIDANCE_OVERLAY_TIMEOUT); + + return Promise.all([ + tryCreateLocalTracks, connect(options.roomName) ]); }).then(([tracks, con]) => { + APP.UI.hideUserMediaPermissionsGuidanceOverlay(); + if (audioAndVideoError) { if (audioOnlyError) { // If both requests for 'audio' + 'video' and 'audio' only diff --git a/css/overlay.css b/css/overlay.css index feb4200c8..52e922dbe 100644 --- a/css/overlay.css +++ b/css/overlay.css @@ -11,6 +11,10 @@ display: block; } +.overlay_transparent { + background: none; +} + .overlay_container { width: 100%; height: 100%; @@ -49,3 +53,14 @@ margin-top: 20px; float: left; } + +.overlay_text_small { + font-size: 18px; +} + +.overlay_icon { + position: relative; + z-index: 1013; + float: none; + font-size: 100px; +} diff --git a/lang/main.json b/lang/main.json index e947c3f72..0f3735857 100644 --- a/lang/main.json +++ b/lang/main.json @@ -11,6 +11,15 @@ "defaultNickname": "ex. Jane Pink", "defaultLink": "e.g. __url__", "calling": "Calling __name__ ...", + "userMedia": { + "react-nativeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing Allow button", + "chromeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing Allow button", + "firefoxGrantPermissions": "Please grant permissions to use your camera and microphone by pressing Share Selected Device button", + "operaGrantPermissions": "Please grant permissions to use your camera and microphone by pressing Allow button", + "iexplorerGrantPermissions": "Please grant permissions to use your camera and microphone by pressing OK button", + "safariGrantPermissions": "Please grant permissions to use your camera and microphone by pressing OK button", + "nwjsGrantPermissions": "Please grant permissions to use your camera and microphone" + }, "keyboardShortcuts": { "keyboardShortcuts": "Keyboard shortcuts:", "raiseHand": "Raise your hand.", @@ -245,11 +254,11 @@ "cameraErrorPresent": "There was an error connecting to your camera.", "cameraUnsupportedResolutionError": "Your camera does not support required video resolution.", "cameraUnknownError": "Cannot use camera for a unknown reason.", - "cameraPermissionDeniedError": "You have not granted permission to use your camera.", + "cameraPermissionDeniedError": "You have not granted permission to use your camera. You can still join the conference but others won't see you. Use the camera button in the address bar to fix this.", "cameraNotFoundError": "Requested camera was not found.", "cameraConstraintFailedError": "Yor camera does not satisfy some of required constraints.", "micUnknownError": "Cannot use microphone for a unknown reason.", - "micPermissionDeniedError": "You have not granted permission to use your microphone.", + "micPermissionDeniedError": "You have not granted permission to use your microphone. You can still join the conference but others won't hear you. Use the camera button in the address bar to fix this.", "micNotFoundError": "Requested microphone was not found.", "micConstraintFailedError": "Yor microphone does not satisfy some of required constraints." }, diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 300e00a7e..e7619d893 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -15,6 +15,7 @@ import CQEvents from '../../service/connectionquality/CQEvents'; import EtherpadManager from './etherpad/Etherpad'; import SharedVideoManager from './shared_video/SharedVideo'; import Recording from "./recording/Recording"; +import GumPermissionsOverlay from './gum_overlay/UserMediaPermissionsGuidanceOverlay'; import VideoLayout from "./videolayout/VideoLayout"; import FilmStrip from "./videolayout/FilmStrip"; @@ -1385,6 +1386,20 @@ UI.hideRingOverLay = function () { FilmStrip.toggleFilmStrip(true); }; +/** + * Shows browser-specific overlay with guidance how to proceed with gUM prompt. + */ +UI.showUserMediaPermissionsGuidanceOverlay = function () { + GumPermissionsOverlay.show(); +}; + +/** + * Hides browser-specific overlay with guidance how to proceed with gUM prompt. + */ +UI.hideUserMediaPermissionsGuidanceOverlay = function () { + GumPermissionsOverlay.hide(); +}; + /** * Shows or hides the keyboard shortcuts panel.' */ diff --git a/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js b/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js new file mode 100644 index 000000000..8c72a4a7e --- /dev/null +++ b/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js @@ -0,0 +1,45 @@ +/* global $, APP, JitsiMeetJS */ + +let $overlay; + +/** + * Internal function that constructs overlay with guidance how to proceed with + * gUM prompt. + */ +function buildOverlayHtml() { + let browser = JitsiMeetJS.environment.getBrowserType() + .split('rtc_browser.')[1] || 'chrome'; + + $overlay = $(` +
+
+
+ + + +
+
`); + + APP.translation.translateElement($overlay); +} + +export default { + /** + * Shows browser-specific overlay with guidance how to proceed with + * gUM prompt. + */ + show() { + !$overlay && buildOverlayHtml(); + + $overlay && $overlay.appendTo('body'); + }, + + /** + * Hides browser-specific overlay with guidance how to proceed with + * gUM prompt. + */ + hide() { + $overlay && $overlay.detach(); + } +}; \ No newline at end of file