mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Packages Projects Releases Wiki Activity

WIP

Browse source
This commit is contained in:
Bruno Windels 2021-09-10 14:47:05 +02:00
parent 98cc1e2715
commit 9411e6f065
4 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/domain/session/room/timeline/TimelineViewModel.js
View file

@ -34,8 +34,6 @@ when loading, it just reads events from a sortkey backwards or forwards...
import {TilesCollection} from "./TilesCollection.js";
import {ViewModel} from "../../../ViewModel.js";
export class TimelineViewModel extends ViewModel {
constructor(options) {
super(options);
@ -45,7 +43,6 @@ export class TimelineViewModel extends ViewModel {
this._startTile = null;
this._endTile = null;
this._topLoadingPromise = null;
this._bottomLoadingPromise = null;
this._requestedStartTile = null;
this._requestedEndTile = null;
this._requestScheduled = false;
@ -56,7 +53,7 @@ export class TimelineViewModel extends ViewModel {
this._requestedStartTile = startTile;
this._requestedEndTile = endTile;
if (!this._requestScheduled) {
Promise.resolve().then(() => {
requestIdleCallback(() => {
this._setVisibleTileRange(this._requestedStartTile, this._requestedEndTile);
this._requestScheduled = false;
});
@ -72,14 +69,15 @@ export class TimelineViewModel extends ViewModel {
this._endTile = endTile;
const startIndex = this._tiles.getTileIndex(this._startTile);
const endIndex = this._tiles.getTileIndex(this._endTile);
for (const tile of this._tiles.sliceIterator(startIndex, endIndex)) {
for (const tile of this._tiles.sliceIterator(startIndex, endIndex + 1)) {
tile.notifyVisible();
}
loadTop = startIndex < 5;
console.log("got tiles", startIndex, endIndex, loadTop);
loadTop = startIndex < 10;
// console.log("got tiles", startIndex, endIndex, loadTop);
} else {
// tiles collection is empty, load more at top
loadTop = true;
console.log("no tiles, load more at top");
// console.log("no tiles, load more at top");
}
if (loadTop && !this._topLoadingPromise) {
@ -91,7 +89,7 @@ export class TimelineViewModel extends ViewModel {
}
});
} else if (loadTop) {
console.log("loadTop is true but already loading");
// console.log("loadTop is true but already loading");
}
}

6
src/matrix/room/timeline/Timeline.js
View file

@ -72,8 +72,10 @@ export class Timeline {
// as they should only populate once the view subscribes to it
// if they are populated already, the sender profile would be empty
// 30 seems to be a good amount to fill the entire screen
const readerRequest = this._disposables.track(this._timelineReader.readFromEnd(30, txn, log));
// choose good amount here between showing messages initially and
// not spending too much time decrypting messages before showing the timeline.
// more messages should be loaded automatically until the viewport is full by the view if needed.
const readerRequest = this._disposables.track(this._timelineReader.readFromEnd(5, txn, log));
try {
const entries = await readerRequest.complete();
this._setupEntries(entries);

2
src/platform/web/ui/css/timeline.css
View file

@ -20,6 +20,8 @@ limitations under the License.
overscroll-behavior: contain;
padding: 0;
margin: 0;
/* need to read the offsetTop of tiles relative to this element in TimelineView */
position: relative;
}
.RoomView_body > .Timeline > ul {

13
src/platform/web/ui/session/room/TimelineView.ts
View file

@ -91,7 +91,7 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
tiles.style.setProperty("margin-top", `${missingTilesHeight}px`);
// we don't have enough tiles to fill the viewport, so set all as visible
const len = this.value.tiles.length;
this.updateVisibleRange(0, len - 1, false);
this.updateVisibleRange(0, len - 1);
} else {
tiles.style.removeProperty("margin-top");
if (this.stickToBottom) {
@ -104,7 +104,7 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
timeline.scrollBy(0, bottomDiff);
this.anchoredBottom = newAnchoredBottom;
} else {
console.log("restore: bottom didn't change, must be below viewport");
// console.log("restore: bottom didn't change, must be below viewport");
}
}
}
@ -122,22 +122,21 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
bottomNodeIndex = len - 1;
} else {
const viewportBottom = scrollTop + clientHeight;
// console.log(`viewportBottom: ${viewportBottom} (${scrollTop} + ${clientHeight})`);
const anchoredNodeIndex = findFirstNodeIndexAtOrBelow(tiles, viewportBottom);
this.anchoredNode = tiles.childNodes[anchoredNodeIndex] as HTMLElement;
this.anchoredBottom = bottom(this.anchoredNode!);
bottomNodeIndex = anchoredNodeIndex;
}
let topNodeIndex = findFirstNodeIndexAtOrBelow(tiles, scrollTop, bottomNodeIndex);
this.updateVisibleRange(topNodeIndex, bottomNodeIndex, true);
this.updateVisibleRange(topNodeIndex, bottomNodeIndex);
}
private updateVisibleRange(startIndex: number, endIndex: number, isViewportFilled: boolean) {
private updateVisibleRange(startIndex: number, endIndex: number) {
// can be undefined, meaning the tiles collection is still empty
const firstVisibleChild = this.tilesView!.getChildInstanceByIndex(startIndex);
const lastVisibleChild = this.tilesView!.getChildInstanceByIndex(endIndex);
//if (firstVisibleChild && lastVisibleChild) {
this.value.setVisibleTileRange(firstVisibleChild?.value, lastVisibleChild?.value, isViewportFilled);
//}
this.value.setVisibleTileRange(firstVisibleChild?.value, lastVisibleChild?.value);
}
}