mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-16 01:21:37 +03:00
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:
parent
cecf0ce299
commit
d466d1a7ee
3 changed files with 46 additions and 28 deletions
|
@ -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),
|
|
||||||
}),
|
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue