Merge branch 'develop' into reorganize-preferences

src/components/views/settings/ChangeAvatar.js

@@ -154,7 +154,7 @@ export default class ChangeAvatar extends React.Component {
             const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
             avatarImg = <BaseAvatar width={this.props.width} height={this.props.height} resizeMethod='crop'
-                        name='?' idName={MatrixClientPeg.get().getUserIdLocalpart()} url={this.state.avatarUrl} />;
+                name='?' idName={MatrixClientPeg.get().getUserIdLocalpart()} url={this.state.avatarUrl} />;
         }
 
         let uploadSection;

src/components/views/settings/ChangePassword.js

@@ -206,7 +206,7 @@ export default class ChangePassword extends React.Component {
                 test: ({ value, allowEmpty }) => allowEmpty || !!value,
                 invalid: () => _t("Passwords can't be empty"),
             },
-         ],
+        ],
     });
 
     onChangeNewPassword = (ev) => {
@@ -245,7 +245,7 @@ export default class ChangePassword extends React.Component {
                 },
                 invalid: () => _t("Passwords don't match"),
             },
-         ],
+        ],
     });
 
     onClickChange = async (ev) => {

src/components/views/settings/CrossSigningPanel.js

@@ -259,7 +259,7 @@ export default class CrossSigningPanel extends React.PureComponent {
                             <td>{_t("Homeserver feature support:")}</td>
                             <td>{homeserverSupportsCrossSigning ? _t("exists") : _t("not found")}</td>
                         </tr>
-                   </tbody></table>
+                    </tbody></table>
                 </details>
                 {errorSection}
                 {actionRow}

src/components/views/settings/DevicesPanel.js

@@ -214,7 +214,7 @@ export default class DevicesPanel extends React.Component {
         const deleteButton = this.state.deleting ?
             <Spinner w={22} h={22} /> :
             <AccessibleButton onClick={this._onDeleteClick} kind="danger_sm">
-               { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length}) }
+                { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length})}
             </AccessibleButton>;
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");

src/components/views/settings/EventIndexPanel.tsx

@@ -232,7 +232,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                     <p>
                         {this.state.enabling
                             ? <InlineSpinner />
-                            : _t("Message search initilisation failed")
+                            : _t("Message search initialisation failed")
                         }
                     </p>
                     {EventIndexPeg.error && (

src/components/views/settings/Notifications.js

@@ -100,7 +100,7 @@ export default class Notifications extends React.Component {
         MatrixClientPeg.get().setPushRuleEnabled(
             'global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !checked,
         ).then(function() {
-           self._refreshFromServer();
+            self._refreshFromServer();
         });
     };
 
@@ -580,12 +580,12 @@ export default class Notifications extends React.Component {
                         "vectorRuleId": "_keywords",
                         "description": (
                             <span>
-                            { _t('Messages containing <span>keywords</span>',
-                                {},
-                                { 'span': (sub) =>
-                                    <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>,
-                                },
-                            )}
+                                { _t('Messages containing <span>keywords</span>',
+                                    {},
+                                    { 'span': (sub) =>
+                                        <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>,
+                                    },
+                                )}
                             </span>
                         ),
                         "vectorState": self.state.vectorContentRules.vectorState,
@@ -743,8 +743,8 @@ export default class Notifications extends React.Component {
 
     emailNotificationsRow(address, label) {
         return <LabelledToggleSwitch value={this.hasEmailPusher(this.state.pushers, address)}
-                                     onChange={this.onEnableEmailNotificationsChange.bind(this, address)}
-                                     label={label} key={`emailNotif_${label}`} />;
+            onChange={this.onEnableEmailNotificationsChange.bind(this, address)}
+            label={label} key={`emailNotif_${label}`} />;
     }
 
     render() {
@@ -757,8 +757,8 @@ export default class Notifications extends React.Component {
         let masterPushRuleDiv;
         if (this.state.masterPushRule) {
             masterPushRuleDiv = <LabelledToggleSwitch value={!this.state.masterPushRule.enabled}
-                                                      onChange={this.onEnableNotificationsChange}
-                                                      label={_t('Enable notifications for this account')} />;
+                onChange={this.onEnableNotificationsChange}
+                label={_t('Enable notifications for this account')} />;
         }
 
         let clearNotificationsButton;
@@ -874,16 +874,16 @@ export default class Notifications extends React.Component {
                     { spinner }
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("notificationsEnabled")}
-                                          onChange={this.onEnableDesktopNotificationsChange}
-                                          label={_t('Enable desktop notifications for this session')} />
+                        onChange={this.onEnableDesktopNotificationsChange}
+                        label={_t('Enable desktop notifications for this session')} />
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("notificationBodyEnabled")}
-                                          onChange={this.onEnableDesktopNotificationBodyChange}
-                                          label={_t('Show message in desktop notification')} />
+                        onChange={this.onEnableDesktopNotificationBodyChange}
+                        label={_t('Show message in desktop notification')} />
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("audioNotificationsEnabled")}
-                                          onChange={this.onEnableAudioNotificationsChange}
-                                          label={_t('Enable audible notifications for this session')} />
+                        onChange={this.onEnableAudioNotificationsChange}
+                        label={_t('Enable audible notifications for this session')} />
 
                     { emailNotificationsRows }
 

src/components/views/settings/ProfileSettings.js

@@ -170,8 +170,12 @@ export default class ProfileSettings extends React.Component {
                 noValidate={true}
                 className="mx_ProfileSettings_profileForm"
             >
-                <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
-                       onChange={this._onAvatarChanged} accept="image/*" />
+                <input
+                    type="file"
+                    ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
+                    onChange={this._onAvatarChanged}
+                    accept="image/*"
+                />
                 <div className="mx_ProfileSettings_profile">
                     <div className="mx_ProfileSettings_controls">
                         <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>

src/components/views/settings/account/EmailAddresses.js

@@ -90,12 +90,18 @@ export class ExistingEmailAddress extends React.Component {
                     <span className="mx_ExistingEmailAddress_promptText">
                         {_t("Remove %(email)s?", {email: this.props.email.address} )}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
-                                      className="mx_ExistingEmailAddress_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onActuallyRemove}
+                        kind="danger_sm"
+                        className="mx_ExistingEmailAddress_confirmBtn"
+                    >
                         {_t("Remove")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="link_sm"
-                                      className="mx_ExistingEmailAddress_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onDontRemove}
+                        kind="link_sm"
+                        className="mx_ExistingEmailAddress_confirmBtn"
+                    >
                         {_t("Cancel")}
                     </AccessibleButton>
                 </div>
@@ -228,21 +234,28 @@ export default class EmailAddresses extends React.Component {
         );
         if (this.state.verifying) {
             addButton = (
-              <div>
-                  <div>{_t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.")}</div>
-                  <AccessibleButton onClick={this._onContinueClick} kind="primary"
-                                    disabled={this.state.continueDisabled}>
-                      {_t("Continue")}
-                  </AccessibleButton>
-              </div>
+                <div>
+                    <div>{_t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.")}</div>
+                    <AccessibleButton
+                        onClick={this._onContinueClick}
+                        kind="primary"
+                        disabled={this.state.continueDisabled}
+                    >
+                        {_t("Continue")}
+                    </AccessibleButton>
+                </div>
             );
         }
 
         return (
             <div className="mx_EmailAddresses">
                 {existingEmailElements}
-                <form onSubmit={this._onAddClick} autoComplete="off"
-                      noValidate={true} className="mx_EmailAddresses_new">
+                <form
+                    onSubmit={this._onAddClick}
+                    autoComplete="off"
+                    noValidate={true}
+                    className="mx_EmailAddresses_new"
+                >
                     <Field
                         type="text"
                         label={_t("Email Address")}

src/components/views/settings/account/PhoneNumbers.js

@@ -85,12 +85,18 @@ export class ExistingPhoneNumber extends React.Component {
                     <span className="mx_ExistingPhoneNumber_promptText">
                         {_t("Remove %(phone)s?", {phone: this.props.msisdn.address})}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
-                                      className="mx_ExistingPhoneNumber_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onActuallyRemove}
+                        kind="danger_sm"
+                        className="mx_ExistingPhoneNumber_confirmBtn"
+                    >
                         {_t("Remove")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="link_sm"
-                                      className="mx_ExistingPhoneNumber_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onDontRemove}
+                        kind="link_sm"
+                        className="mx_ExistingPhoneNumber_confirmBtn"
+                    >
                         {_t("Cancel")}
                     </AccessibleButton>
                 </div>
@@ -246,8 +252,11 @@ export default class PhoneNumbers extends React.Component {
                             value={this.state.newPhoneNumberCode}
                             onChange={this._onChangeNewPhoneNumberCode}
                         />
-                        <AccessibleButton onClick={this._onContinueClick} kind="primary"
-                                          disabled={this.state.continueDisabled}>
+                        <AccessibleButton
+                            onClick={this._onContinueClick}
+                            kind="primary"
+                            disabled={this.state.continueDisabled}
+                        >
                             {_t("Continue")}
                         </AccessibleButton>
                     </form>

src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js

@@ -80,9 +80,11 @@ export default class GeneralRoomSettingsTab extends React.Component {
             flairSection = <>
                 <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <RelatedGroupSettings roomId={room.roomId}
-                                          canSetRelatedGroups={canChangeGroups}
-                                          relatedGroupsEvent={groupsEvent} />
+                    <RelatedGroupSettings
+                        roomId={room.roomId}
+                        canSetRelatedGroups={canChangeGroups}
+                        relatedGroupsEvent={groupsEvent}
+                    />
                 </div>
             </>;
         }
@@ -97,8 +99,8 @@ export default class GeneralRoomSettingsTab extends React.Component {
                 <div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <AliasSettings roomId={this.props.roomId}
-                                   canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
-                                   canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
+                        canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
+                        canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
                 </div>
                 <div className="mx_SettingsTab_heading">{_t("Other")}</div>
                 { flairSection }

src/components/views/settings/tabs/room/NotificationSettingsTab.js

@@ -155,7 +155,7 @@ export default class NotificationsSettingsTab extends React.Component {
                     <div>
                         <span>{_t("Notification sound")}: <code>{this.state.currentSound}</code></span><br />
                         <AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this._clearSound.bind(this)} kind="primary">
-                                {_t("Reset")}
+                            {_t("Reset")}
                         </AccessibleButton>
                     </div>
                     <div>
@@ -167,11 +167,11 @@ export default class NotificationsSettingsTab extends React.Component {
                         {currentUploadedFile}
 
                         <AccessibleButton className="mx_NotificationSound_browse" onClick={this._triggerUploader.bind(this)} kind="primary">
-                                {_t("Browse")}
+                            {_t("Browse")}
                         </AccessibleButton>
 
                         <AccessibleButton className="mx_NotificationSound_save" disabled={this.state.uploadedFile == null} onClick={this._onClickSaveSound.bind(this)} kind="primary">
-                                {_t("Save")}
+                            {_t("Save")}
                         </AccessibleButton>
                         <br />
                     </div>

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -323,8 +323,11 @@ export default class GeneralUserSettingsTab extends React.Component {
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
-                <LanguageDropdown className="mx_GeneralUserSettingsTab_languageInput"
-                                  onOptionChange={this._onLanguageChange} value={this.state.language} />
+                <LanguageDropdown
+                    className="mx_GeneralUserSettingsTab_languageInput"
+                    onOptionChange={this._onLanguageChange}
+                    value={this.state.language}
+                />
             </div>
         );
     }
@@ -333,8 +336,10 @@ export default class GeneralUserSettingsTab extends React.Component {
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Spell check dictionaries")}</span>
-                <SpellCheckSettings languages={this.state.spellCheckLanguages}
-                                    onLanguagesChange={this._onSpellCheckLanguagesChange} />
+                <SpellCheckSettings
+                    languages={this.state.spellCheckLanguages}
+                    onLanguagesChange={this._onSpellCheckLanguagesChange}
+                />
             </div>
         );
     }

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import {_t, getCurrentLanguage} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
+import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
 import Modal from "../../../../../Modal";
@@ -26,6 +27,9 @@ import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import UpdateCheckButton from "../../UpdateCheckButton";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { copyPlaintext } from "../../../../../utils/strings";
+import * as ContextMenu from "../../../../structures/ContextMenu";
+import { toRightOf } from "../../../../structures/ContextMenu";
 
 interface IProps {
     closeSettingsFn: () => {};
@@ -38,6 +42,8 @@ interface IState {
 
 @replaceableComponent("views.settings.tabs.user.HelpUserSettingsTab")
 export default class HelpUserSettingsTab extends React.Component<IProps, IState> {
+    protected closeCopiedTooltip: () => void;
+
     constructor(props) {
         super(props);
 
@@ -56,6 +62,12 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         });
     }
 
+    componentWillUnmount() {
+        // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
+        // the tooltip otherwise, such as pressing Escape
+        if (this.closeCopiedTooltip) this.closeCopiedTooltip();
+    }
+
     private onClearCacheAndReload = (e) => {
         if (!PlatformPeg.get()) return;
 
@@ -153,6 +165,20 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         );
     }
 
+    onAccessTokenCopyClick = async (e) => {
+        e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
+
+        const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
+        const buttonRect = target.getBoundingClientRect();
+        const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
+        const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+            ...toRightOf(buttonRect, 2),
+            message: successful ? _t('Copied!') : _t('Failed to copy'),
+        });
+        this.closeCopiedTooltip = target.onmouseleave = close;
+    }
+
     render() {
         const brand = SdkConfig.get().brand;
 
@@ -269,12 +295,20 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                     <div className='mx_SettingsTab_subsectionText'>
                         {_t("Homeserver is")} <code>{MatrixClientPeg.get().getHomeserverUrl()}</code><br />
                         {_t("Identity Server is")} <code>{MatrixClientPeg.get().getIdentityServerUrl()}</code><br />
-                        {_t("Access Token:") + ' '}
-                        <AccessibleButton element="span" onClick={this.showSpoiler}
-                            data-spoiler={MatrixClientPeg.get().getAccessToken()}
-                        >
-                            &lt;{ _t("click to reveal") }&gt;
-                        </AccessibleButton>
+                        <br />
+                        <details>
+                            <summary>{_t("Access Token")}</summary><br />
+                            <b>{_t("Your access token gives full access to your account."
+                               + " Do not share it with anyone." )}</b>
+                            <div className="mx_HelpUserSettingsTab_accessToken">
+                                <code>{MatrixClientPeg.get().getAccessToken()}</code>
+                                <AccessibleTooltipButton
+                                    title={_t("Copy")}
+                                    onClick={this.onAccessTokenCopyClick}
+                                    className="mx_HelpUserSettingsTab_accessToken_copy"
+                                />
+                            </div>
+                        </details><br />
                         <div className='mx_HelpUserSettingsTab_debugButton'>
                             <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
                                 {_t("Clear cache and reload")}

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -22,6 +22,8 @@ import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as sdk from "../../../../../index";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import SdkConfig from "../../../../../SdkConfig";
+import BetaCard from "../../../beta/BetaCard";
 
 export class LabsSettingToggle extends React.Component {
     static propTypes = {
@@ -48,14 +50,40 @@ export default class LabsUserSettingsTab extends React.Component {
     }
 
     render() {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const flags = SettingsStore.getFeatureSettingNames().map(f => <LabsSettingToggle featureId={f} key={f} />);
+        const features = SettingsStore.getFeatureSettingNames();
+        const [labs, betas] = features.reduce((arr, f) => {
+            arr[SettingsStore.getBetaInfo(f) ? 1 : 0].push(f);
+            return arr;
+        }, [[], []]);
+
+        let betaSection;
+        if (betas.length) {
+            betaSection = <div className="mx_SettingsTab_section">
+                { betas.map(f => <BetaCard key={f} featureId={f} /> ) }
+            </div>;
+        }
+
+        let labsSection;
+        if (SdkConfig.get()['showLabsSettings']) {
+            const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+            const flags = labs.map(f => <LabsSettingToggle featureId={f} key={f} />);
+
+            labsSection = <div className="mx_SettingsTab_section">
+                {flags}
+                <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
+                <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
+                <SettingsFlag name="lowBandwidth" level={SettingLevel.DEVICE} />
+                <SettingsFlag name="advancedRoomListLogging" level={SettingLevel.DEVICE} />
+            </div>;
+        }
+
         return (
-            <div className="mx_SettingsTab">
+            <div className="mx_SettingsTab mx_LabsUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Labs")}</div>
                 <div className='mx_SettingsTab_subsectionText'>
                     {
-                        _t('Customise your experience with experimental labs features. ' +
+                        _t('Feeling experimental? Labs are the best way to get things early, ' +
+                            'test out new features and help shape them before they actually launch. ' +
                             '<a>Learn more</a>.', {}, {
                             'a': (sub) => {
                                 return <a href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
@@ -64,13 +92,8 @@ export default class LabsUserSettingsTab extends React.Component {
                         })
                     }
                 </div>
-                <div className="mx_SettingsTab_section">
-                    {flags}
-                    <SettingsFlag name={"enableWidgetScreenshots"} level={SettingLevel.ACCOUNT} />
-                    <SettingsFlag name={"showHiddenEventsInTimeline"} level={SettingLevel.DEVICE} />
-                    <SettingsFlag name={"lowBandwidth"} level={SettingLevel.DEVICE} />
-                    <SettingsFlag name={"advancedRoomListLogging"} level={SettingLevel.DEVICE} />
-                </div>
+                { betaSection }
+                { labsSection }
             </div>
         );
     }

src/components/views/settings/tabs/user/SecurityUserSettingsTab.js

@@ -257,12 +257,16 @@ export default class SecurityUserSettingsTab extends React.Component {
 
         const userIds = !ignoredUserIds?.length
             ? _t('You have no ignored users.')
-            : ignoredUserIds.map((u) => <IgnoredUser
-             userId={u}
-             onUnignored={this._onUserUnignored}
-             key={u}
-             inProgress={waitingUnignored.includes(u)}
-             />);
+            : ignoredUserIds.map((u) => {
+                return (
+                    <IgnoredUser
+                        userId={u}
+                        onUnignored={this._onUserUnignored}
+                        key={u}
+                        inProgress={waitingUnignored.includes(u)}
+                    />
+                );
+            });
 
         return (
             <div className='mx_SettingsTab_section'>

src/components/views/settings/tabs/user/VoiceUserSettingsTab.js

@@ -176,8 +176,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(audioOutputs);
                 speakerDropdown = (
                     <Field element="select" label={_t("Audio Output")}
-                           value={this.state.activeAudioOutput || defaultDevice}
-                           onChange={this._setAudioOutput}>
+                        value={this.state.activeAudioOutput || defaultDevice}
+                        onChange={this._setAudioOutput}>
                         {this._renderDeviceOptions(audioOutputs, 'audioOutput')}
                     </Field>
                 );
@@ -188,8 +188,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(audioInputs);
                 microphoneDropdown = (
                     <Field element="select" label={_t("Microphone")}
-                           value={this.state.activeAudioInput || defaultDevice}
-                           onChange={this._setAudioInput}>
+                        value={this.state.activeAudioInput || defaultDevice}
+                        onChange={this._setAudioInput}>
                         {this._renderDeviceOptions(audioInputs, 'audioInput')}
                     </Field>
                 );
@@ -200,8 +200,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(videoInputs);
                 webcamDropdown = (
                     <Field element="select" label={_t("Camera")}
-                           value={this.state.activeVideoInput || defaultDevice}
-                           onChange={this._setVideoInput}>
+                        value={this.state.activeVideoInput || defaultDevice}
+                        onChange={this._setVideoInput}>
                         {this._renderDeviceOptions(videoInputs, 'videoInput')}
                     </Field>
                 );