Render timeline separator for late event groups (#11739)
* Use Compound tooltips on MessageTimestamp to improve UX of date time discovery Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Show io.element.late_event in MessageTimestamp when known Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Avoid needing new Compound changes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Move groupers into their own directory Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Refactor date separator code to be more generic Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Render timeline separator for late event groups Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix date used in copy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Move groupers into their own directory Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update copy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update copy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
parent
dfdb613673
commit
5ff965106a
18 changed files with 198 additions and 66 deletions
|
@ -25,6 +25,7 @@ import { _t } from "../../../languageHandler";
|
|||
import DateSeparator from "../../views/messages/DateSeparator";
|
||||
import NewRoomIntro from "../../views/rooms/NewRoomIntro";
|
||||
import GenericEventListSummary from "../../views/elements/GenericEventListSummary";
|
||||
import { SeparatorKind } from "../../views/messages/TimelineSeparator";
|
||||
|
||||
// Wrap initial room creation events into a GenericEventListSummary
|
||||
// Grouping only events sent by the same user that sent the `m.room.create` and only until
|
||||
|
@ -41,7 +42,7 @@ export class CreationGrouper extends BaseGrouper {
|
|||
if (!shouldShow) {
|
||||
return true;
|
||||
}
|
||||
if (panel.wantsDateSeparator(this.firstEventAndShouldShow.event, event.getDate())) {
|
||||
if (panel.wantsSeparator(this.firstEventAndShouldShow.event, event) === SeparatorKind.Date) {
|
||||
return false;
|
||||
}
|
||||
const eventType = event.getType();
|
||||
|
@ -96,7 +97,7 @@ export class CreationGrouper extends BaseGrouper {
|
|||
const createEvent = this.firstEventAndShouldShow;
|
||||
const lastShownEvent = this.lastShownEvent;
|
||||
|
||||
if (panel.wantsDateSeparator(this.prevEvent, createEvent.event.getDate())) {
|
||||
if (panel.wantsSeparator(this.prevEvent, createEvent.event) === SeparatorKind.Date) {
|
||||
const ts = createEvent.event.getTs();
|
||||
ret.push(
|
||||
<li key={ts + "~"}>
|
||||
|
|
43
src/components/structures/grouper/LateEventGrouper.ts
Normal file
43
src/components/structures/grouper/LateEventGrouper.ts
Normal file
|
@ -0,0 +1,43 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
const UNSIGNED_KEY = "io.element.late_event";
|
||||
|
||||
/**
|
||||
* This metadata describes when events arrive late after a net-split to offer improved UX.
|
||||
*/
|
||||
interface UnsignedLateEventInfo {
|
||||
/**
|
||||
* Milliseconds since epoch representing the time the event was received by the server
|
||||
*/
|
||||
received_at: number;
|
||||
/**
|
||||
* An opaque identifier representing the group the server has put the late arriving event into
|
||||
*/
|
||||
group_id: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get io.element.late_event metadata from unsigned as sent by the server.
|
||||
*
|
||||
* @experimental this is not in the Matrix spec and needs special server support
|
||||
* @param mxEvent the Matrix Event to get UnsignedLateEventInfo on
|
||||
*/
|
||||
export function getLateEventInfo(mxEvent: MatrixEvent): UnsignedLateEventInfo | undefined {
|
||||
return mxEvent.getUnsigned()[UNSIGNED_KEY];
|
||||
}
|
|
@ -25,6 +25,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
|||
import DateSeparator from "../../views/messages/DateSeparator";
|
||||
import HistoryTile from "../../views/rooms/HistoryTile";
|
||||
import EventListSummary from "../../views/elements/EventListSummary";
|
||||
import { SeparatorKind } from "../../views/messages/TimelineSeparator";
|
||||
|
||||
const groupedStateEvents = [
|
||||
EventType.RoomMember,
|
||||
|
@ -70,7 +71,7 @@ export class MainGrouper extends BaseGrouper {
|
|||
// absorb hidden events so that they do not break up streams of messages & redaction events being grouped
|
||||
return true;
|
||||
}
|
||||
if (this.panel.wantsDateSeparator(this.events[0].event, ev.getDate())) {
|
||||
if (this.panel.wantsSeparator(this.events[0].event, ev) === SeparatorKind.Date) {
|
||||
return false;
|
||||
}
|
||||
if (ev.isState() && groupedStateEvents.includes(ev.getType() as EventType)) {
|
||||
|
@ -114,7 +115,7 @@ export class MainGrouper extends BaseGrouper {
|
|||
const lastShownEvent = this.lastShownEvent;
|
||||
const ret: ReactNode[] = [];
|
||||
|
||||
if (panel.wantsDateSeparator(this.prevEvent, this.events[0].event.getDate())) {
|
||||
if (panel.wantsSeparator(this.prevEvent, this.events[0].event) === SeparatorKind.Date) {
|
||||
const ts = this.events[0].event.getTs();
|
||||
ret.push(
|
||||
<li key={ts + "~"}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue