Updates start silent, turning on startWithAudioMuted and few UI tweaks. (#4314)

* Updates start silent, turning on startWithAudioMuted and few UI tweaks.

Disabled mic unmute button and removes remote participants volume slider.

* Adds analytics for start silent.

* Removes extra semi colon.

* Updates lib-jitsi-meet and updates meeting info text.

conference.js

@@ -16,6 +16,7 @@ import * as JitsiMeetConferenceEvents from './ConferenceEvents';
 
 import {
     createDeviceChangedEvent,
+    createStartSilentEvent,
     createScreenSharingEvent,
     createStreamSwitchDelayEvent,
     createTrackMutedEvent,
@@ -729,6 +730,7 @@ export default {
             // based on preferred devices, loose label matching can be done in
             // cases where the exact ID match is no longer available, such as
             // when the camera device has switched USB ports.
+            // when in startSilent mode we want to start with audio muted
             this._initDeviceList()
                 .catch(error => logger.warn(
                     'initial device list initialization failed', error))
@@ -736,7 +738,7 @@ export default {
                 options.roomName, {
                     startAudioOnly: config.startAudioOnly,
                     startScreenSharing: config.startScreenSharing,
-                    startWithAudioMuted: config.startWithAudioMuted,
+                    startWithAudioMuted: config.startWithAudioMuted || config.startSilent,
                     startWithVideoMuted: config.startWithVideoMuted
                 }))
             .then(([ tracks, con ]) => {
@@ -793,6 +795,7 @@ export default {
                 }
 
                 if (config.startSilent) {
+                    sendAnalytics(createStartSilentEvent());
                     APP.store.dispatch(showNotification({
                         descriptionKey: 'notify.startSilentDescription',
                         titleKey: 'notify.startSilentTitle'

css/_toolbars.scss

@@ -116,9 +116,9 @@
             }
         }
         i.disabled, .disabled i {
-            cursor: initial;
-            color: #fff;
-            background-color: #a4b8d1;
+            cursor: initial !important;
+            color: #fff !important;
+            background-color: #a4b8d1 !important;
         }
 
         .icon-mic-disabled, .icon-microphone, .icon-camera-disabled, .icon-camera {

lang/main.json

@@ -356,12 +356,11 @@
         "dialInTollFree": "Toll Free",
         "genericError": "Whoops, something went wrong.",
         "inviteLiveStream": "To view the live stream of this meeting, click this link: __url__",
-        "invitePhone": "One tap audio Dial In: __number__,,__conferenceID__#",
-        "invitePhoneAlternatives": "Looking for a different dial in number? Please see: __url__",
+        "invitePhone": "To join by phone instead, tap this: __number__,,__conferenceID__#\n",
+        "invitePhoneAlternatives": "Looking for a different dial-in number?\nSee meeting dial-in numbers: __url__\n\n\nIf also dialing-in through a room phone, join without connecting to audio: __silentUrl__",
         "inviteURLFirstPartGeneral": "You are invited to join a meeting.",
-        "inviteURLFirstPartPersonal": "__name__ is inviting you to a meeting.",
-        "inviteURLSecondPart": "\n__moreInfo__\nJoin meeting: __url__\n",
-        "inviteURLMoreInfo": "Meeting ID: __conferenceID__#\n",
+        "inviteURLFirstPartPersonal": "__name__ is inviting you to a meeting.\n",
+        "inviteURLSecondPart": "\nJoin the meeting:\n__url__\n",
         "liveStreamURL": "Live stream:",
         "moreNumbers": "More numbers",
         "noNumbers": "No dial-in numbers.",

modules/UI/videolayout/RemoteVideo.js

@@ -165,7 +165,10 @@ RemoteVideo.prototype._generatePopupContent = function() {
 
     const initialVolumeValue
         = this._audioStreamElement && this._audioStreamElement.volume;
-    const onVolumeChange = this._setAudioVolume;
+
+    // hide volume when in silent mode
+    const onVolumeChange = APP.store.getState()['features/base/config'].startSilent
+        ? undefined : this._setAudioVolume;
     const { isModerator } = APP.conference;
     const participantID = this.id;
 

react/features/analytics/AnalyticsEvents.js

@@ -551,6 +551,18 @@ export function createStartAudioOnlyEvent(audioOnly) {
     };
 }
 
+/**
+ * Creates an event which indicates the "start silent" configuration.
+ *
+ * @returns {Object} The event in a format suitable for sending via
+ * sendAnalytics.
+ */
+export function createStartSilentEvent() {
+    return {
+        action: 'start.silent'
+    };
+}
+
 /**
  * Creates an event which indicates the "start muted" configuration.
  *

react/features/invite/components/info-dialog/web/InfoDialog.js

@@ -309,18 +309,13 @@ class InfoDialog extends Component<Props, State> {
     _getTextToCopy() {
         const { _localParticipant, liveStreamViewURL, t } = this.props;
         const shouldDisplayDialIn = this._shouldDisplayDialIn();
-        const moreInfo
-            = shouldDisplayDialIn
-                ? t('info.inviteURLMoreInfo', { conferenceID: this.props.dialIn.conferenceID })
-                : '';
 
         let invite = _localParticipant && _localParticipant.name
             ? t('info.inviteURLFirstPartPersonal', { name: _localParticipant.name })
             : t('info.inviteURLFirstPartGeneral');
 
         invite += t('info.inviteURLSecondPart', {
-            url: this.props._inviteURL,
-            moreInfo
+            url: this.props._inviteURL
         });
 
         if (liveStreamViewURL) {
@@ -337,7 +332,8 @@ class InfoDialog extends Component<Props, State> {
                 conferenceID: this.props.dialIn.conferenceID
             });
             const moreNumbers = t('info.invitePhoneAlternatives', {
-                url: this._getDialInfoPageURL()
+                url: this._getDialInfoPageURL(),
+                silentUrl: `${this.props._inviteURL}#config.startSilent=true`
             });
 
             invite = `${invite}\n${dial}\n${moreNumbers}`;

react/features/toolbox/components/AudioMuteButton.js

@@ -27,6 +27,11 @@ type Props = AbstractButtonProps & {
      */
     _audioMuted: boolean,
 
+    /**
+     * Whether the button is disabled.
+     */
+    _disabled: boolean,
+
     /**
      * The redux {@code dispatch} function.
      */
@@ -128,6 +133,15 @@ class AudioMuteButton extends AbstractAudioMuteButton<Props, *> {
         typeof APP === 'undefined'
             || APP.UI.emitEvent(UIEvents.AUDIO_MUTED, audioMuted, true);
     }
+
+    /**
+     * Return a boolean value indicating if this button is disabled or not.
+     *
+     * @returns {boolean}
+     */
+    _isDisabled() {
+        return this.props._disabled;
+    }
 }
 
 /**
@@ -144,7 +158,8 @@ function _mapStateToProps(state): Object {
     const tracks = state['features/base/tracks'];
 
     return {
-        _audioMuted: isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO)
+        _audioMuted: isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO),
+        _disabled: state['features/base/config'].startSilent
     };
 }