Add alwaysShowTimestamps and others to RoomView setting watchers

to allow them to update on the fly. This also modifies the setting
watchers to avoid an unnecessary settings lookup.

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend 2021-06-24 11:28:16 -04:00
parent cecf0ce299
commit d466d1a7ee
3 changed files with 46 additions and 28 deletions

View file

@ -177,6 +177,10 @@ export interface IState {
canReply: boolean; canReply: boolean;
layout: Layout; layout: Layout;
lowBandwidth: boolean; lowBandwidth: boolean;
alwaysShowTimestamps: boolean;
showTwelveHourTimestamps: boolean;
readMarkerInViewThresholdMs: number;
readMarkerOutOfViewThresholdMs: number;
showReadReceipts: boolean; showReadReceipts: boolean;
showRedactions: boolean; showRedactions: boolean;
showJoinLeaves: boolean; showJoinLeaves: boolean;
@ -240,6 +244,10 @@ export default class RoomView extends React.Component<IProps, IState> {
canReply: false, canReply: false,
layout: SettingsStore.getValue("layout"), layout: SettingsStore.getValue("layout"),
lowBandwidth: SettingsStore.getValue("lowBandwidth"), lowBandwidth: SettingsStore.getValue("lowBandwidth"),
alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"),
showTwelveHourTimestamps: SettingsStore.getValue("showTwelveHourTimestamps"),
readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"),
readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"),
showReadReceipts: true, showReadReceipts: true,
showRedactions: true, showRedactions: true,
showJoinLeaves: true, showJoinLeaves: true,
@ -272,11 +280,23 @@ export default class RoomView extends React.Component<IProps, IState> {
WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate); WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
this.settingWatchers = [ this.settingWatchers = [
SettingsStore.watchSetting("layout", null, () => SettingsStore.watchSetting("layout", null, (...[,,, value]) =>
this.setState({ layout: SettingsStore.getValue("layout") }), this.setState({ layout: value as Layout }),
), ),
SettingsStore.watchSetting("lowBandwidth", null, () => SettingsStore.watchSetting("lowBandwidth", null, (...[,,, value]) =>
this.setState({ lowBandwidth: SettingsStore.getValue("lowBandwidth") }), this.setState({ lowBandwidth: value as boolean }),
),
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 }),
), ),
]; ];
} }
@ -343,30 +363,20 @@ export default class RoomView extends React.Component<IProps, IState> {
// Add watchers for each of the settings we just looked up // Add watchers for each of the settings we just looked up
this.settingWatchers = this.settingWatchers.concat([ this.settingWatchers = this.settingWatchers.concat([
SettingsStore.watchSetting("showReadReceipts", null, () => SettingsStore.watchSetting("showReadReceipts", roomId, (...[,,, value]) =>
this.setState({ this.setState({ showReadReceipts: value as boolean }),
showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
}),
), ),
SettingsStore.watchSetting("showRedactions", null, () => SettingsStore.watchSetting("showRedactions", roomId, (...[,,, value]) =>
this.setState({ this.setState({ showRedactions: value as boolean }),
showRedactions: SettingsStore.getValue("showRedactions", roomId),
}),
), ),
SettingsStore.watchSetting("showJoinLeaves", null, () => SettingsStore.watchSetting("showJoinLeaves", roomId, (...[,,, value]) =>
this.setState({ this.setState({ showJoinLeaves: value as boolean }),
showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId),
}),
), ),
SettingsStore.watchSetting("showAvatarChanges", null, () => SettingsStore.watchSetting("showAvatarChanges", roomId, (...[,,, value]) =>
this.setState({ this.setState({ showAvatarChanges: value as boolean }),
showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId),
}),
), ),
SettingsStore.watchSetting("showDisplaynameChanges", null, () => SettingsStore.watchSetting("showDisplaynameChanges", roomId, (...[,,, value]) =>
this.setState({ this.setState({ showDisplaynameChanges: value as boolean }),
showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
}),
), ),
]); ]);

View file

@ -699,8 +699,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
private readMarkerTimeout(readMarkerPosition: number): number { private readMarkerTimeout(readMarkerPosition: number): number {
return readMarkerPosition === 0 ? return readMarkerPosition === 0 ?
this.state.readMarkerInViewThresholdMs : this.context?.readMarkerInViewThresholdMs ?? this.state.readMarkerInViewThresholdMs :
this.state.readMarkerOutOfViewThresholdMs; this.context?.readMarkerOutOfViewThresholdMs ?? this.state.readMarkerOutOfViewThresholdMs;
} }
private async updateReadMarkerOnUserActivity(): Promise<void> { private async updateReadMarkerOnUserActivity(): Promise<void> {
@ -1520,8 +1520,12 @@ class TimelinePanel extends React.Component<IProps, IState> {
onUserScroll={this.props.onUserScroll} onUserScroll={this.props.onUserScroll}
onFillRequest={this.onMessageListFillRequest} onFillRequest={this.onMessageListFillRequest}
onUnfillRequest={this.onMessageListUnfillRequest} onUnfillRequest={this.onMessageListUnfillRequest}
isTwelveHour={this.state.isTwelveHour} isTwelveHour={this.context?.showTwelveHourTimestamps ?? this.state.isTwelveHour}
alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.alwaysShowTimestamps} alwaysShowTimestamps={
this.props.alwaysShowTimestamps ??
this.context?.alwaysShowTimestamps ??
this.state.alwaysShowTimestamps
}
className={this.props.className} className={this.props.className}
tileShape={this.props.tileShape} tileShape={this.props.tileShape}
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.props.resizeNotifier}

View file

@ -41,6 +41,10 @@ const RoomContext = createContext<IState>({
canReply: false, canReply: false,
layout: Layout.Group, layout: Layout.Group,
lowBandwidth: false, lowBandwidth: false,
alwaysShowTimestamps: false,
showTwelveHourTimestamps: false,
readMarkerInViewThresholdMs: 3000,
readMarkerOutOfViewThresholdMs: 30000,
showReadReceipts: true, showReadReceipts: true,
showRedactions: true, showRedactions: true,
showJoinLeaves: true, showJoinLeaves: true,