Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement lazy-loading from placeholder to room

Browse source 
In placeholder-rooms.html
This commit is contained in:
Kegan Dougal 2021-11-24 15:12:38 +00:00
parent 080be2554b
commit 6140301d9e
8 changed files with 114 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/domain/session/leftpanel/BaseTileViewModel.js
View file

@ -57,6 +57,10 @@ export class BaseTileViewModel extends ViewModel {
} }
compare(other) { compare(other) {
// don't use KIND_ORDER for placeholder|room kinds as they are comparable
if (this.kind !== "invite" && other.kind !== "invite") {
return 0;
}
if (other.kind !== this.kind) { if (other.kind !== this.kind) {
return KIND_ORDER.indexOf(this.kind) - KIND_ORDER.indexOf(other.kind); return KIND_ORDER.indexOf(this.kind) - KIND_ORDER.indexOf(other.kind);
} }

7
src/domain/session/leftpanel/LeftPanelViewModel.js
View file

@ -43,7 +43,7 @@ export class LeftPanelViewModel extends ViewModel {
if (roomOrInvite.isInvite) { if (roomOrInvite.isInvite) {
vm = new InviteTileViewModel(this.childOptions({invite: roomOrInvite, emitChange})); vm = new InviteTileViewModel(this.childOptions({invite: roomOrInvite, emitChange}));
} else if (roomOrInvite.isPlaceholder) { } else if (roomOrInvite.isPlaceholder) {
vm = new PlaceholderRoomTileViewModel(this.childOptions({emitChange})); vm = new PlaceholderRoomTileViewModel(this.childOptions({room: roomOrInvite, emitChange}));
} else { } else {
vm = new RoomTileViewModel(this.childOptions({room: roomOrInvite, emitChange})); vm = new RoomTileViewModel(this.childOptions({room: roomOrInvite, emitChange}));
} }
@ -140,4 +140,9 @@ export class LeftPanelViewModel extends ViewModel {
return startFiltering; return startFiltering;
} }
} }
// TODO: used in sync v3
loadRoomRange(range) {
}
} }

10
src/domain/session/leftpanel/PlaceholderRoomTileViewModel.js
View file

@ -20,6 +20,11 @@ import {BaseTileViewModel} from "./BaseTileViewModel.js";
export class PlaceholderRoomTileViewModel extends BaseTileViewModel { export class PlaceholderRoomTileViewModel extends BaseTileViewModel {
constructor(options) { constructor(options) {
super(options); super(options);
// Placeholder tiles can be sorted with Room tiles, so we need to ensure we have the same
// fields else the comparison needs to take into account the kind().
// We need a fake room so we can do compare(other) with RoomTileViewModels
const {room} = options;
this._room = room;
} }
get busy() { get busy() {
@ -31,11 +36,14 @@ export class PlaceholderRoomTileViewModel extends BaseTileViewModel {
} }
compare(other) { compare(other) {
if (other._room.index !== undefined) {
return this._room.index > other._room.index ? 1 : -1;
}
return super.compare(other); return super.compare(other);
} }
get name() { get name() {
return "Placeholder"; return "Placeholder " + this._room.index;
} }
get avatarLetter() { get avatarLetter() {

6
src/domain/session/leftpanel/RoomTileViewModel.js
View file

@ -38,6 +38,12 @@ export class RoomTileViewModel extends BaseTileViewModel {
if (parentComparison !== 0) { if (parentComparison !== 0) {
return parentComparison; return parentComparison;
} }
// sync v3 has its own ordering, use it if we have an index
if (this._room.index !== undefined && other._room.index !== undefined) {
return this._room.index > other._room.index ? 1 : -1;;
}
/* /*
put unread rooms first put unread rooms first
then put rooms with a timestamp first, and sort by name then put rooms with a timestamp first, and sort by name

2
src/matrix/Session.js
View file

@ -401,8 +401,6 @@ export class Session {
room.setInvite(invite); room.setInvite(invite);
} }
} }
const room = this.createRoom("!temp:localhost");
room.isPlaceholder = true;
this._rooms.add(room.id, room); this._rooms.add(room.id, room);
} }

70
src/placeholder-rooms.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="platform/web/ui/css/main.css">
<link rel="stylesheet" type="text/css" href="platform/web/ui/css/themes/element/theme.css">
<style type="text/css">
.LeftPanel{
height: 100%;
}
</style>
</head>
<body class="not-ie11">
<div id="session-status" class="hydrogen" style="height: 500px;"></div>
<script id="main" type="module">
import {LeftPanelView} from "./platform/web/ui/session/leftpanel/LeftPanelView.js";
import {LeftPanelViewModel} from "./domain/session/leftpanel/LeftPanelViewModel";
import {Navigation} from "./domain/navigation/Navigation.js";
import {URLRouter} from "./domain/navigation/URLRouter.js";
import {parseUrlPath, stringifyPath} from "./domain/navigation/index.js";
import {ObservableMap} from "./observable/index.js";
import {History} from "./platform/web/dom/History.js";
const navigation = new Navigation(() => false);
const rooms = new ObservableMap();
for (let i = 0; i < 1000; i++) {
let r = {
id: "!placeholder-" + i,
isPlaceholder: true,
index: i,
};
rooms.add(r.id, r);
}
const leftPanel = new LeftPanelViewModel({
invites: new ObservableMap(),
rooms: rooms,
navigation: navigation,
urlCreator: new URLRouter({
navigation: navigation,
history: new History(),
stringifyPath: stringifyPath,
parseUrlPath: parseUrlPath,
}),
platform: null,
});
const sleep = (ms) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
leftPanel.loadRoomRange = async (range) => {
// pretend to load something
await sleep(200);
for (let i = range.start; i <= range.end; i++) {
const fakeRoomId = "!placeholder-" + i;
let room = rooms.get(fakeRoomId);
if (room && room.isPlaceholder) {
rooms.remove(fakeRoomId);
}
const actualRoomId = "!" + i + ":localhost";
room = room || {};
room.isPlaceholder = false;
room.id = actualRoomId;
room.avatarColorId = 1;
room.name = "Room " + i;
rooms.set(room.id, room);
}
};
const view = new LeftPanelView(leftPanel);
document.getElementById("session-status").appendChild(view.mount());
</script>
</body>
</html>

27
src/platform/web/ui/general/LazyListView.ts
View file

@ -14,15 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import {tag} from "./html"; import { tag } from "./html";
import {removeChildren, mountView} from "./utils"; import { removeChildren, mountView } from "./utils";
import {ListRange, ResultType, AddRemoveResult} from "./ListRange"; import { ListRange, ResultType, AddRemoveResult } from "./ListRange";
import {ListView, IOptions as IParentOptions} from "./ListView"; import { ListView, IOptions as IParentOptions } from "./ListView";
import {IView} from "./types"; import { IView } from "./types";
export interface IOptions<T, V> extends IParentOptions<T, V> { export interface IOptions<T, V> extends IParentOptions<T, V> {
itemHeight: number; itemHeight: number;
overflowItems?: number; overflowItems?: number;
onRangeVisible?: (range: ListRange) => void;
} }
export class LazyListView<T, V extends IView> extends ListView<T, V> { export class LazyListView<T, V extends IView> extends ListView<T, V> {
@ -31,14 +32,16 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
private itemHeight: number; private itemHeight: number;
private overflowItems: number; private overflowItems: number;
private scrollContainer?: HTMLElement; private scrollContainer?: HTMLElement;
private onRangeVisible?: (range: ListRange) => void;
constructor( constructor(
{itemHeight, overflowItems = 20, ...options}: IOptions<T, V>, { itemHeight, onRangeVisible, overflowItems = 20, ...options }: IOptions<T, V>,
childCreator: (value: T) => V childCreator: (value: T) => V
) { ) {
super(options, childCreator); super(options, childCreator);
this.itemHeight = itemHeight; this.itemHeight = itemHeight;
this.overflowItems = overflowItems; this.overflowItems = overflowItems;
this.onRangeVisible = onRangeVisible; // function(ItemRange)
} }
handleEvent(e: Event) { handleEvent(e: Event) {
@ -60,7 +63,7 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
this.renderUpdate(prevRenderRange, this.renderRange); this.renderUpdate(prevRenderRange, this.renderRange);
} }
} }
// override // override
async loadList() { async loadList() {
/* /*
@ -82,7 +85,7 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
} }
private _getVisibleRange() { private _getVisibleRange() {
const {clientHeight, scrollTop} = this.root()!; const { clientHeight, scrollTop } = this.root()!;
if (clientHeight === 0) { if (clientHeight === 0) {
throw new Error("LazyListView height is 0"); throw new Error("LazyListView height is 0");
} }
@ -101,6 +104,9 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
}); });
this._listElement!.appendChild(fragment); this._listElement!.appendChild(fragment);
this.adjustPadding(range); this.adjustPadding(range);
if (this.onRangeVisible) {
this.onRangeVisible(range);
}
} }
private renderUpdate(prevRange: ListRange, newRange: ListRange) { private renderUpdate(prevRange: ListRange, newRange: ListRange) {
@ -121,6 +127,9 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
} }
}); });
this.adjustPadding(newRange); this.adjustPadding(newRange);
if (this.onRangeVisible) {
this.onRangeVisible(newRange);
}
} else { } else {
this.reRenderFullRange(newRange); this.reRenderFullRange(newRange);
} }
@ -136,7 +145,7 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
mount() { mount() {
const listElement = super.mount(); const listElement = super.mount();
this.scrollContainer = tag.div({className: "LazyListParent"}, listElement) as HTMLElement; this.scrollContainer = tag.div({ className: "LazyListParent" }, listElement) as HTMLElement;
this.scrollContainer.addEventListener("scroll", this); this.scrollContainer.addEventListener("scroll", this);
return this.scrollContainer; return this.scrollContainer;
} }

2
src/platform/web/ui/session/leftpanel/LeftPanelView.js
View file

@ -65,7 +65,7 @@ export class LeftPanelView extends TemplateView {
itemHeight: 44, itemHeight: 44,
list: vm.tileViewModels, list: vm.tileViewModels,
onRangeVisible: (range) => { onRangeVisible: (range) => {
console.log(range); vm.loadRoomRange(range);
}, },
}, },
tileVM => { tileVM => {