concat synced events in timeline with pending events for local echo

This commit is contained in:
Bruno Windels 2019-07-29 19:53:58 +02:00
parent 88a7d64091
commit 8665bcb897
5 changed files with 33 additions and 10 deletions

View File

@ -69,4 +69,8 @@ export default class SimpleTile {
get internalId() { get internalId() {
return this._entry.asEventKey().toString(); return this._entry.asEventKey().toString();
} }
get isPending() {
return this._entry.isPending;
}
} }

View File

@ -1,32 +1,39 @@
import { SortedArray } from "../../../observable/index.js"; import { SortedArray, MappedList, ConcatList } from "../../../observable/index.js";
import Direction from "./Direction.js"; import Direction from "./Direction.js";
import GapWriter from "./persistence/GapWriter.js"; import GapWriter from "./persistence/GapWriter.js";
import TimelineReader from "./persistence/TimelineReader.js"; import TimelineReader from "./persistence/TimelineReader.js";
import PendingEventEntry from "./entries/PendingEventEntry.js";
export default class Timeline { export default class Timeline {
constructor({roomId, storage, closeCallback, fragmentIdComparer, hsApi}) { constructor({roomId, storage, closeCallback, fragmentIdComparer, pendingEvents, user, hsApi}) {
this._roomId = roomId; this._roomId = roomId;
this._storage = storage; this._storage = storage;
this._closeCallback = closeCallback; this._closeCallback = closeCallback;
this._fragmentIdComparer = fragmentIdComparer; this._fragmentIdComparer = fragmentIdComparer;
this._hsApi = hsApi; this._hsApi = hsApi;
this._entriesList = new SortedArray((a, b) => a.compare(b)); this._remoteEntries = new SortedArray((a, b) => a.compare(b));
this._timelineReader = new TimelineReader({ this._timelineReader = new TimelineReader({
roomId: this._roomId, roomId: this._roomId,
storage: this._storage, storage: this._storage,
fragmentIdComparer: this._fragmentIdComparer fragmentIdComparer: this._fragmentIdComparer
}); });
const localEntries = new MappedList(pendingEvents, pe => {
return new PendingEventEntry({pendingEvent: pe, user});
}, (pee, params) => {
pee.notifyUpdate(params);
});
this._allEntries = new ConcatList(this._remoteEntries, localEntries);
} }
/** @package */ /** @package */
async load() { async load() {
const entries = await this._timelineReader.readFromEnd(50); const entries = await this._timelineReader.readFromEnd(50);
this._entriesList.setManySorted(entries); this._remoteEntries.setManySorted(entries);
} }
/** @package */ /** @package */
appendLiveEntries(newEntries) { appendLiveEntries(newEntries) {
this._entriesList.setManySorted(newEntries); this._remoteEntries.setManySorted(newEntries);
} }
/** @public */ /** @public */
@ -42,12 +49,12 @@ export default class Timeline {
fragmentIdComparer: this._fragmentIdComparer fragmentIdComparer: this._fragmentIdComparer
}); });
const newEntries = await gapWriter.writeFragmentFill(fragmentEntry, response); const newEntries = await gapWriter.writeFragmentFill(fragmentEntry, response);
this._entriesList.setManySorted(newEntries); this._remoteEntries.setManySorted(newEntries);
} }
// tries to prepend `amount` entries to the `entries` list. // tries to prepend `amount` entries to the `entries` list.
async loadAtTop(amount) { async loadAtTop(amount) {
const firstEventEntry = this._entriesList.array.find(e => !!e.event); const firstEventEntry = this._remoteEntries.array.find(e => !!e.event);
if (!firstEventEntry) { if (!firstEventEntry) {
return; return;
} }
@ -56,12 +63,12 @@ export default class Timeline {
Direction.Backward, Direction.Backward,
amount amount
); );
this._entriesList.setManySorted(entries); this._remoteEntries.setManySorted(entries);
} }
/** @public */ /** @public */
get entries() { get entries() {
return this._entriesList; return this._allEntries;
} }
/** @public */ /** @public */

View File

@ -39,7 +39,15 @@ export default class PendingEventEntry extends BaseEntry {
return null; return null;
} }
get isPending() {
return true;
}
get id() { get id() {
return this._pendingEvent.txnId; return this._pendingEvent.txnId;
} }
notifyUpdate() {
}
} }

View File

@ -53,6 +53,10 @@
background-color: darkgreen; background-color: darkgreen;
} }
.TextMessageView.pending .message-container {
background-color: #333;
}
.message-container p { .message-container p {
margin: 5px 0; margin: 5px 0;
} }

View File

@ -4,7 +4,7 @@ export default class TextMessageView extends TemplateView {
render(t, vm) { render(t, vm) {
// no bindings ... should this be a template view? // no bindings ... should this be a template view?
return t.li( return t.li(
{className: {"TextMessageView": true, own: vm.isOwn}}, {className: {"TextMessageView": true, own: vm.isOwn, pending: vm.isPending}},
t.div({className: "message-container"}, [ t.div({className: "message-container"}, [
t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender), t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender),
t.p([vm.text, t.time(vm.date + " " + vm.time)]), t.p([vm.text, t.time(vm.date + " " + vm.time)]),