diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 7860e65362..1eb958fa6c 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -166,6 +166,10 @@ export interface IState { canReply: boolean; layout: Layout; lowBandwidth: boolean; + alwaysShowTimestamps: boolean; + showTwelveHourTimestamps: boolean; + readMarkerInViewThresholdMs: number; + readMarkerOutOfViewThresholdMs: number; showHiddenEventsInTimeline: boolean; showReadReceipts: boolean; showRedactions: boolean; @@ -231,6 +235,10 @@ export default class RoomView extends React.Component { canReply: false, layout: SettingsStore.getValue("layout"), lowBandwidth: SettingsStore.getValue("lowBandwidth"), + alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"), + showTwelveHourTimestamps: SettingsStore.getValue("showTwelveHourTimestamps"), + readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"), + readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"), showHiddenEventsInTimeline: SettingsStore.getValue("showHiddenEventsInTimeline"), showReadReceipts: true, showRedactions: true, @@ -263,14 +271,26 @@ export default class RoomView extends React.Component { WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate); this.settingWatchers = [ - SettingsStore.watchSetting("layout", null, () => - this.setState({ layout: SettingsStore.getValue("layout") }), + SettingsStore.watchSetting("layout", null, (...[,,, value]) => + this.setState({ layout: value as Layout }), ), - SettingsStore.watchSetting("lowBandwidth", null, () => - this.setState({ lowBandwidth: SettingsStore.getValue("lowBandwidth") }), + SettingsStore.watchSetting("lowBandwidth", null, (...[,,, value]) => + this.setState({ lowBandwidth: value as boolean }), ), - SettingsStore.watchSetting("showHiddenEventsInTimeline", null, () => - this.setState({ showHiddenEventsInTimeline: SettingsStore.getValue("showHiddenEventsInTimeline") }), + SettingsStore.watchSetting("alwaysShowTimestamps", null, (...[,,, value]) => + this.setState({ alwaysShowTimestamps: value as boolean }), + ), + SettingsStore.watchSetting("showTwelveHourTimestamps", null, (...[,,, value]) => + this.setState({ showTwelveHourTimestamps: value as boolean }), + ), + SettingsStore.watchSetting("readMarkerInViewThresholdMs", null, (...[,,, value]) => + this.setState({ readMarkerInViewThresholdMs: value as number }), + ), + SettingsStore.watchSetting("readMarkerOutOfViewThresholdMs", null, (...[,,, value]) => + this.setState({ readMarkerOutOfViewThresholdMs: value as number }), + ), + SettingsStore.watchSetting("showHiddenEventsInTimeline", null, (...[,,, value]) => + this.setState({ showHiddenEventsInTimeline: value as boolean }), ), ]; } @@ -337,30 +357,20 @@ export default class RoomView extends React.Component { // Add watchers for each of the settings we just looked up this.settingWatchers = this.settingWatchers.concat([ - SettingsStore.watchSetting("showReadReceipts", null, () => - this.setState({ - showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId), - }), + SettingsStore.watchSetting("showReadReceipts", roomId, (...[,,, value]) => + this.setState({ showReadReceipts: value as boolean }), ), - SettingsStore.watchSetting("showRedactions", null, () => - this.setState({ - showRedactions: SettingsStore.getValue("showRedactions", roomId), - }), + SettingsStore.watchSetting("showRedactions", roomId, (...[,,, value]) => + this.setState({ showRedactions: value as boolean }), ), - SettingsStore.watchSetting("showJoinLeaves", null, () => - this.setState({ - showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId), - }), + SettingsStore.watchSetting("showJoinLeaves", roomId, (...[,,, value]) => + this.setState({ showJoinLeaves: value as boolean }), ), - SettingsStore.watchSetting("showAvatarChanges", null, () => - this.setState({ - showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId), - }), + SettingsStore.watchSetting("showAvatarChanges", roomId, (...[,,, value]) => + this.setState({ showAvatarChanges: value as boolean }), ), - SettingsStore.watchSetting("showDisplaynameChanges", null, () => - this.setState({ - showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId), - }), + SettingsStore.watchSetting("showDisplaynameChanges", roomId, (...[,,, value]) => + this.setState({ showDisplaynameChanges: value as boolean }), ), ]); diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index c4210c68a8..0899b1c72a 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -665,8 +665,8 @@ class TimelinePanel extends React.Component { private readMarkerTimeout(readMarkerPosition: number): number { return readMarkerPosition === 0 ? - this.state.readMarkerInViewThresholdMs : - this.state.readMarkerOutOfViewThresholdMs; + this.context?.readMarkerInViewThresholdMs ?? this.state.readMarkerInViewThresholdMs : + this.context?.readMarkerOutOfViewThresholdMs ?? this.state.readMarkerOutOfViewThresholdMs; } private async updateReadMarkerOnUserActivity(): Promise { @@ -1493,8 +1493,12 @@ class TimelinePanel extends React.Component { onUserScroll={this.props.onUserScroll} onFillRequest={this.onMessageListFillRequest} onUnfillRequest={this.onMessageListUnfillRequest} - isTwelveHour={this.state.isTwelveHour} - alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.alwaysShowTimestamps} + isTwelveHour={this.context?.showTwelveHourTimestamps ?? this.state.isTwelveHour} + alwaysShowTimestamps={ + this.props.alwaysShowTimestamps ?? + this.context?.alwaysShowTimestamps ?? + this.state.alwaysShowTimestamps + } className={this.props.className} tileShape={this.props.tileShape} resizeNotifier={this.props.resizeNotifier} diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts index 2a84c1f110..0507a3e252 100644 --- a/src/contexts/RoomContext.ts +++ b/src/contexts/RoomContext.ts @@ -41,6 +41,10 @@ const RoomContext = createContext({ canReply: false, layout: Layout.Group, lowBandwidth: false, + alwaysShowTimestamps: false, + showTwelveHourTimestamps: false, + readMarkerInViewThresholdMs: 3000, + readMarkerOutOfViewThresholdMs: 30000, showHiddenEventsInTimeline: false, showReadReceipts: true, showRedactions: true,