diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index d5a6f8523b..4d2e66724e 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -35,7 +35,6 @@ import ContextMenu, { } from "../../structures/ContextMenu"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ReplyPreview from "./ReplyPreview"; -import { UIFeature } from "../../../settings/UIFeature"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import VoiceRecordComposerTile from "./VoiceRecordComposerTile"; @@ -56,6 +55,7 @@ import RoomContext from '../../../contexts/RoomContext'; import { POLL_START_EVENT_TYPE } from "../../../polls/consts"; import ErrorDialog from "../dialogs/ErrorDialog"; import PollCreateDialog from "../elements/PollCreateDialog"; +import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdatedPayload"; let instanceCount = 0; const NARROW_MODE_BREAKPOINT = 500; @@ -249,6 +249,8 @@ interface IState { narrowMode?: boolean; isMenuOpen: boolean; showStickers: boolean; + showStickersButton: boolean; + showPollsButton: boolean; } @replaceableComponent("views.rooms.MessageComposer") @@ -278,9 +280,14 @@ export default class MessageComposer extends React.Component { recordingTimeLeftSeconds: null, // when set to a number, shows a toast isMenuOpen: false, showStickers: false, + showStickersButton: SettingsStore.getValue("MessageComposerInput.showStickersButton"), + showPollsButton: SettingsStore.getValue("feature_polls"), }; this.instanceId = instanceCount++; + + SettingsStore.monitorSetting("MessageComposerInput.showStickersButton", null); + SettingsStore.monitorSetting("feature_polls", null); } componentDidMount() { @@ -303,14 +310,39 @@ export default class MessageComposer extends React.Component { }; private onAction = (payload: ActionPayload) => { - if (payload.action === 'reply_to_event' && payload.context === this.context.timelineRenderingType) { - // add a timeout for the reply preview to be rendered, so - // that the ScrollPanel listening to the resizeNotifier can - // correctly measure it's new height and scroll down to keep - // at the bottom if it already is - setTimeout(() => { - this.props.resizeNotifier.notifyTimelineHeightChanged(); - }, 100); + switch (payload.action) { + case "reply_to_event": + if (payload.context === this.context.timelineRenderingType) { + // add a timeout for the reply preview to be rendered, so + // that the ScrollPanel listening to the resizeNotifier can + // correctly measure it's new height and scroll down to keep + // at the bottom if it already is + setTimeout(() => { + this.props.resizeNotifier.notifyTimelineHeightChanged(); + }, 100); + } + break; + + case Action.SettingUpdated: { + const settingUpdatedPayload = payload as SettingUpdatedPayload; + switch (settingUpdatedPayload.settingName) { + case "MessageComposerInput.showStickersButton": { + const showStickersButton = SettingsStore.getValue("MessageComposerInput.showStickersButton"); + if (this.state.showStickersButton !== showStickersButton) { + this.setState({ showStickersButton }); + } + break; + } + + case "feature_polls": { + const showPollsButton = SettingsStore.getValue("feature_polls"); + if (this.state.showPollsButton !== showPollsButton) { + this.setState({ showPollsButton }); + } + break; + } + } + } } }; @@ -452,9 +484,7 @@ export default class MessageComposer extends React.Component { }; private shouldShowStickerPicker = (): boolean => { - return SettingsStore.getValue(UIFeature.Widgets) - && SettingsStore.getValue("MessageComposerInput.showStickersButton") - && !this.state.haveRecording; + return this.state.showStickersButton && !this.state.haveRecording; }; private showStickers = (showStickers: boolean) => { @@ -471,7 +501,7 @@ export default class MessageComposer extends React.Component { let uploadButtonIndex = 0; const buttons: JSX.Element[] = []; if (!this.state.haveRecording) { - if (SettingsStore.getValue("feature_polls")) { + if (this.state.showPollsButton) { buttons.push( , ); diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 2e008eaf3d..346af1c766 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -392,6 +392,7 @@ export const SETTINGS: {[setting: string]: ISetting} = { supportedLevels: LEVELS_ACCOUNT_SETTINGS, displayName: _td('Show stickers button'), default: true, + controller: new UIFeatureController(UIFeature.Widgets, false), }, // TODO: Wire up appropriately to UI (FTUE notifications) "Notifications.alwaysShowBadgeCounts": {