WIP

fix unit test
update TODO
2022-05-10 09:58:31 +02:00 · 2022-05-09 14:50:52 +02:00 · 2022-05-09 14:31:19 +02:00 · 2022-05-09 14:23:57 +02:00 · 2022-05-06 17:23:07 +02:00 · 2022-05-06 17:06:56 +02:00
86 changed files with 5140 additions and 462 deletions
--- a/package.json
+++ b/package.json
@ -46,7 +46,7 @@
    "postcss-value-parser": "^4.2.0",
    "regenerator-runtime": "^0.13.7",
    "text-encoding": "^0.7.0",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4",
    "vite": "^2.6.14",
    "xxhashjs": "^0.2.2"
  },
--- a/scripts/logviewer/index.html
+++ b/scripts/logviewer/index.html
@ -162,6 +162,10 @@
                --hue: 30deg;
            }

+            .timeline .item.type-call {
+                --hue: 50deg;
+            }
+
            .timeline .item.type-navigation {
                --hue: 200deg;
            }
@ -188,19 +192,28 @@
            nav form {
                display: inline;
            }
+
+            #filename {
+                margin: 0;
+                font-size: 1rem;
+                padding: 4px 0;
+            }
        </style>
    </head>
    <body>
        <nav>
-            <button id="openFile">Open log file</button>
-            <button id="collapseAll">Collapse all</button>
-            <button id="hideCollapsed">Hide collapsed root items</button>
-            <button id="hideHighlightedSiblings" title="Hide collapsed siblings of highlighted">Hide non-highlighted</button>
-            <button id="showAll">Show all</button>
-            <form id="highlightForm">
-                <input type="text" id="highlight" name="highlight" placeholder="Highlight a search term" autocomplete="on">
-                <output id="highlightMatches"></output>
-            </form>
+            <div>
+                <button id="openFile">Open log file</button>
+                <button id="collapseAll">Collapse all</button>
+                <button id="hideCollapsed">Hide collapsed root items</button>
+                <button id="hideHighlightedSiblings" title="Hide collapsed siblings of highlighted">Hide non-highlighted</button>
+                <button id="showAll">Show all</button>
+                <form id="highlightForm">
+                    <input type="text" id="highlight" name="highlight" placeholder="Highlight a search term" autocomplete="on">
+                    <output id="highlightMatches"></output>
+                </form>
+            </div>
+            <h2 id="filename"></h2>
        </nav>
        <main></main>
        <aside></aside>
--- a/scripts/logviewer/main.js
+++ b/scripts/logviewer/main.js
@ -22,6 +22,7 @@ const main = document.querySelector("main");
 let selectedItemNode;
 let rootItem;
 let itemByRef;
+let itemsRefFrom;

 const logLevels = [undefined, "All", "Debug", "Detail", "Info", "Warn", "Error", "Fatal", "Off"];

@ -49,6 +50,7 @@ window.addEventListener("hashchange", () => {
    const id = window.location.hash.substr(1);
    const itemNode = document.getElementById(id);
    if (itemNode && itemNode.closest("main")) {
+        ensureParentsExpanded(itemNode);
        selectNode(itemNode);
        itemNode.scrollIntoView({behavior: "smooth", block: "nearest"});
    }
@ -70,6 +72,14 @@ function selectNode(itemNode) {
    showItemDetails(item, parent, selectedItemNode);
 }

+function ensureParentsExpanded(itemNode) {
+    let li = itemNode.parentElement.parentElement;
+    while (li.tagName === "LI") {
+        li.classList.add("expanded");
+        li = li.parentElement.parentElement;
+    }
+}
+
 function stringifyItemValue(value) {
    if (typeof value === "object" && value !== null) {
        return JSON.stringify(value, undefined, 2);
@ -102,6 +112,11 @@ function showItemDetails(item, parent, itemNode) {
                } else {
                    valueNode = `unknown ref ${value}`;
                }
+            } else if (key === "refId") {
+                const refSources = itemsRefFrom.get(value) ?? [];
+                valueNode = t.div([t.p([`${value}`, t.br(),`Found these references:`]),t.ul(refSources.map(item => {
+                    return t.li(t.a({href: `#${item.id}`}, itemCaption(item)));
+                }))]);
            } else {
                valueNode = stringifyItemValue(value);
            }
@ -148,12 +163,14 @@ function getRootItemHeader(prevItem, item) {

 async function loadFile() {
    const file = await openFile();
+    document.getElementById("filename").innerText = file.name;
    const json = await readFileAsText(file);
    const logs = JSON.parse(json);
    logs.items.sort((a, b) => itemStart(a) - itemStart(b));
    rootItem = {c: logs.items};
    itemByRef = new Map();
-    preprocessRecursively(rootItem, null, itemByRef, []);
+    itemsRefFrom = new Map();
+    preprocessRecursively(rootItem, null, itemByRef, itemsRefFrom, []);

    const fragment = logs.items.reduce((fragment, item, i, items) => {
        const prevItem = i === 0 ? null : items[i - 1];
@ -167,18 +184,26 @@ async function loadFile() {
 }

 // TODO: make this use processRecursively
-function preprocessRecursively(item, parentElement, refsMap, path) {
+function preprocessRecursively(item, parentElement, refsMap, refsFromMap, path) {
    item.s = (parentElement?.s || 0) + item.s;
    if (itemRefSource(item)) {
        refsMap.set(itemRefSource(item), item);
    }
+    if (itemRef(item)) {
+        let refs = refsFromMap.get(itemRef(item));
+        if (!refs) {
+            refs = [];
+            refsFromMap.set(itemRef(item), refs);
+        }
+        refs.push(item);
+    }
    if (itemChildren(item)) {
        for (let i = 0; i < itemChildren(item).length; i += 1) {
            // do it in advance for a child as we don't want to do it for the rootItem
            const child = itemChildren(item)[i];
            const childPath = path.concat(i);
            child.id = childPath.join("/");
-            preprocessRecursively(child, item, refsMap, childPath);
+            preprocessRecursively(child, item, refsMap, refsFromMap, childPath);
        }
    }
 }
@ -233,14 +258,16 @@ function itemShortErrorMessage(item) {
 }

 function itemCaption(item) {
-    if (itemType(item) === "network") {
+     if (itemLabel(item) && itemError(item)) {
+        return `${itemLabel(item)} (${itemShortErrorMessage(item)})`;
+    } if (itemType(item) === "network") {
        return `${itemValues(item)?.method} ${itemValues(item)?.url}`;
    } else if (itemLabel(item) && itemValues(item)?.id) {
        return `${itemLabel(item)} ${itemValues(item).id}`;
    } else if (itemLabel(item) && itemValues(item)?.status) {
        return `${itemLabel(item)} (${itemValues(item).status})`;
-    } else if (itemLabel(item) && itemError(item)) {
-        return `${itemLabel(item)} (${itemShortErrorMessage(item)})`;
+    } else if (itemLabel(item) && itemValues(item)?.type) {
+        return `${itemLabel(item)} (${itemValues(item)?.type})`;
    } else if (itemRef(item)) {
        const refItem = itemByRef.get(itemRef(item));
        if (refItem) {
@ -395,4 +422,4 @@ document.getElementById("showAll").addEventListener("click", () => {
    for (const node of document.querySelectorAll(".hidden")) {
        node.classList.remove("hidden");
    }
-});
+});
--- a/src/domain/AvatarSource.ts
+++ b/src/domain/AvatarSource.ts
@ -0,0 +1,23 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020, 2021 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.
+*/
+
+export interface AvatarSource {
+    get avatarLetter(): string;
+    get avatarColorNumber(): number;
+    avatarUrl(size: number): string | undefined;
+    get avatarTitle(): string;
+}
--- a/src/domain/SessionPickerViewModel.js
+++ b/src/domain/SessionPickerViewModel.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {SortedArray} from "../observable/index.js";
+import {SortedArray} from "../observable/index";
 import {ViewModel} from "./ViewModel";
 import {avatarInitials, getIdentifierColorNumber} from "./avatar";

--- a/src/domain/avatar.ts
+++ b/src/domain/avatar.ts
@ -51,10 +51,10 @@ export function getIdentifierColorNumber(id: string): number {
    return (hashCode(id) % 8) + 1;
 }

-export function getAvatarHttpUrl(avatarUrl: string, cssSize: number, platform: Platform, mediaRepository: MediaRepository): string | null {
+export function getAvatarHttpUrl(avatarUrl: string | undefined, cssSize: number, platform: Platform, mediaRepository: MediaRepository): string | undefined {
    if (avatarUrl) {
        const imageSize = cssSize * platform.devicePixelRatio;
        return mediaRepository.mxcUrlThumbnail(avatarUrl, imageSize, imageSize, "crop");
    }
-    return null;
+    return undefined;
 }
--- a/src/domain/navigation/Navigation.js
+++ b/src/domain/navigation/Navigation.js
@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableValue, ObservableValue} from "../../observable/ObservableValue";
+import {ObservableValue} from "../../observable/value/ObservableValue";
+import {BaseObservableValue} from "../../observable/value/BaseObservableValue";

 export class Navigation {
    constructor(allowsChild) {
--- a/src/domain/session/RoomGridViewModel.js
+++ b/src/domain/session/RoomGridViewModel.js
@ -186,7 +186,7 @@ export class RoomGridViewModel extends ViewModel {
 }

 import {createNavigation} from "../navigation/index.js";
-import {ObservableValue} from "../../observable/ObservableValue";
+import {ObservableValue} from "../../observable/value/ObservableValue";

 export function tests() { 
    class RoomVMMock {
--- a/src/domain/session/RoomViewModelObservable.js
+++ b/src/domain/session/RoomViewModelObservable.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ObservableValue} from "../../observable/ObservableValue";
+import {ObservableValue} from "../../observable/value/ObservableValue";
 import {RoomStatus} from "../../matrix/room/common";

 /**
--- a/src/domain/session/SessionViewModel.js
+++ b/src/domain/session/SessionViewModel.js
@ -99,6 +99,9 @@ export class SessionViewModel extends ViewModel {

    start() {
        this._sessionStatusViewModel.start();
+        this._client.session.callHandler.loadCalls("m.ring");
+        // TODO: only do this when opening the room
+        this._client.session.callHandler.loadCalls("m.prompt");
    }

    get activeMiddleViewModel() {
@ -174,7 +177,7 @@ export class SessionViewModel extends ViewModel {
    _createRoomViewModelInstance(roomId) {
        const room = this._client.session.rooms.get(roomId);
        if (room) {
-            const roomVM = new RoomViewModel(this.childOptions({room}));
+            const roomVM = new RoomViewModel(this.childOptions({room, session: this._client.session}));
            roomVM.load();
            return roomVM;
        }
@ -191,7 +194,7 @@ export class SessionViewModel extends ViewModel {
    async _createArchivedRoomViewModel(roomId) {
        const room = await this._client.session.loadArchivedRoom(roomId);
        if (room) {
-            const roomVM = new RoomViewModel(this.childOptions({room}));
+            const roomVM = new RoomViewModel(this.childOptions({room, session: this._client.session}));
            roomVM.load();
            return roomVM;
        }
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@ -16,10 +16,13 @@ limitations under the License.
 */

 import {TimelineViewModel} from "./timeline/TimelineViewModel.js";
-import {ComposerViewModel} from "./ComposerViewModel.js"
+import {ComposerViewModel} from "./ComposerViewModel.js";
+import {CallViewModel} from "./call/CallViewModel";
+import {PickMapObservableValue} from "../../../observable/value/PickMapObservableValue";
 import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
 import {ViewModel} from "../../ViewModel";
 import {imageToInfo} from "../common.js";
+import {LocalMedia} from "../../../matrix/calls/LocalMedia";
 // TODO: remove fallback so default isn't included in bundle for SDK users that have their custom tileClassForEntry
 // this is a breaking SDK change though to make this option mandatory
 import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index";
@ -43,6 +46,30 @@ export class RoomViewModel extends ViewModel {
        }
        this._clearUnreadTimout = null;
        this._closeUrl = this.urlCreator.urlUntilSegment("session");
+        this._setupCallViewModel();
+    }
+
+    _setupCallViewModel() {
+        // pick call for this room with lowest key
+        const calls = this.getOption("session").callHandler.calls;
+        this._callObservable = new PickMapObservableValue(calls.filterValues(c => {
+            return c.roomId === this._room.id && c.hasJoined;
+        }));
+        this._callViewModel = undefined;
+        this.track(this._callObservable.subscribe(call => {
+            if (call && this._callViewModel && call.id === this._callViewModel.id) {
+                return;
+            }
+            this._callViewModel = this.disposeTracked(this._callViewModel);
+            if (call) {
+                this._callViewModel = this.track(new CallViewModel(this.childOptions({call, mediaRepository: this._room.mediaRepository})));
+            }
+            this.emitChange("callViewModel");
+        }));
+        const call = this._callObservable.get();
+        if (call) {
+            this._callViewModel = new CallViewModel(this.childOptions({call}));
+        }
    }

    async load() {
@ -50,6 +77,7 @@ export class RoomViewModel extends ViewModel {
        try {
            const timeline = await this._room.openTimeline();
            this._tileOptions = this.childOptions({
+                session: this.getOption("session"),
                roomVM: this,
                timeline,
                tileClassForEntry: this._tileClassForEntry,
@ -317,6 +345,10 @@ export class RoomViewModel extends ViewModel {
        return this._composerVM;
    }

+    get callViewModel() {
+        return this._callViewModel;
+    }
+
    openDetailsPanel() {
        let path = this.navigation.path.until("room");
        path = path.with(this.navigation.segment("right-panel", true));
@ -329,6 +361,19 @@ export class RoomViewModel extends ViewModel {
            this._composerVM.setReplyingTo(entry);
        }
    }
+
+    async startCall() {
+        try {
+            const session = this.getOption("session");
+            const stream = await this.platform.mediaDevices.getMediaTracks(false, true);
+            const localMedia = new LocalMedia().withUserMedia(stream);
+            // this will set the callViewModel above as a call will be added to callHandler.calls
+            const call = await session.callHandler.createCall(this._room.id, "m.video", "A call " + Math.round(this.platform.random() * 100));
+            await call.join(localMedia);
+        } catch (err) {
+            console.error(err.stack);
+        }
+    }
 }

 function videoToInfo(video) {
--- a/src/domain/session/room/call/CallViewModel.ts
+++ b/src/domain/session/room/call/CallViewModel.ts
@ -0,0 +1,181 @@
+/*
+Copyright 2022 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 {AvatarSource} from "../../../AvatarSource";
+import {ViewModel, Options as BaseOptions} from "../../../ViewModel";
+import {getStreamVideoTrack, getStreamAudioTrack} from "../../../../matrix/calls/common";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../../avatar";
+import {EventObservableValue} from "../../../../observable/value/EventObservableValue";
+import {ObservableValueMap} from "../../../../observable/map/ObservableValueMap";
+import type {GroupCall} from "../../../../matrix/calls/group/GroupCall";
+import type {Member} from "../../../../matrix/calls/group/Member";
+import type {BaseObservableList} from "../../../../observable/list/BaseObservableList";
+import type {Stream} from "../../../../platform/types/MediaDevices";
+import type {MediaRepository} from "../../../../matrix/net/MediaRepository";
+
+export type Options = BaseOptions & {
+    call: GroupCall,
+    mediaRepository: MediaRepository
+};
+
+export class CallViewModel extends ViewModel<Options> {
+    public readonly memberViewModels: BaseObservableList<IStreamViewModel>;
+
+    constructor(options: Options) {
+        super(options);
+        const ownMemberViewModelMap = new ObservableValueMap("self", new EventObservableValue(this.call, "change"))
+            .mapValues(call => new OwnMemberViewModel(this.childOptions({call: this.call, mediaRepository: this.getOption("mediaRepository")})), () => {});
+        this.memberViewModels = this.call.members
+            .filterValues(member => member.isConnected)
+            .mapValues(member => new CallMemberViewModel(this.childOptions({member, mediaRepository: this.getOption("mediaRepository")})))
+            .join(ownMemberViewModelMap)
+            .sortValues((a, b) => a.compare(b));
+    }
+
+    private get call(): GroupCall {
+        return this.getOption("call");
+    }
+
+    get name(): string {
+        return this.call.name;
+    }
+
+    get id(): string {
+        return this.call.id;
+    }
+
+    get stream(): Stream | undefined {
+        return this.call.localMedia?.userMedia;
+    }
+
+    leave() {
+        if (this.call.hasJoined) {
+            this.call.leave();
+        }
+    }
+
+    async toggleVideo() {
+        if (this.call.muteSettings) {
+            this.call.setMuted(this.call.muteSettings.toggleCamera());
+        }
+    }
+}
+
+type OwnMemberOptions = BaseOptions & {
+    call: GroupCall,
+    mediaRepository: MediaRepository
+}
+
+class OwnMemberViewModel extends ViewModel<OwnMemberOptions> implements IStreamViewModel {
+    get stream(): Stream | undefined {
+        return this.call.localMedia?.userMedia;
+    }
+
+    private get call(): GroupCall {
+        return this.getOption("call");
+    }
+
+    get isCameraMuted(): boolean {
+        return isMuted(this.call.muteSettings?.camera, !!getStreamVideoTrack(this.stream));
+    }
+
+    get isMicrophoneMuted(): boolean {
+        return isMuted(this.call.muteSettings?.microphone, !!getStreamAudioTrack(this.stream));
+    }
+
+    get avatarLetter(): string {
+        return "I";
+    }
+
+    get avatarColorNumber(): number {
+        return 3;
+    }
+
+    avatarUrl(size: number): string | undefined {
+        return undefined;
+    }
+
+    get avatarTitle(): string {
+        return "Me";
+    }
+
+    compare(other: OwnMemberViewModel | CallMemberViewModel): number {
+        return -1;
+    }
+}
+
+type MemberOptions = BaseOptions & {member: Member, mediaRepository: MediaRepository};
+
+export class CallMemberViewModel extends ViewModel<MemberOptions> implements IStreamViewModel {
+    get stream(): Stream | undefined {
+        return this.member.remoteMedia?.userMedia;
+    }
+
+    private get member(): Member {
+        return this.getOption("member");
+    }
+
+    get isCameraMuted(): boolean {
+        return isMuted(this.member.remoteMuteSettings?.camera, !!getStreamVideoTrack(this.stream));
+    }
+
+    get isMicrophoneMuted(): boolean {
+        return isMuted(this.member.remoteMuteSettings?.microphone, !!getStreamAudioTrack(this.stream));
+    }
+
+    get avatarLetter(): string {
+        return avatarInitials(this.member.member.name);
+    }
+
+    get avatarColorNumber(): number {
+        return getIdentifierColorNumber(this.member.userId);
+    }
+
+    avatarUrl(size: number): string | undefined {
+        const {avatarUrl} = this.member.member;
+        return getAvatarHttpUrl(avatarUrl, size, this.platform, this.options.mediaRepository);
+    }
+
+    get avatarTitle(): string {
+        return this.member.member.name;
+    }
+
+    compare(other: OwnMemberViewModel | CallMemberViewModel): number {
+        if (other instanceof OwnMemberViewModel) {
+            return -other.compare(this);
+        }
+        const myUserId = this.member.member.userId;
+        const otherUserId = other.member.member.userId;
+        if(myUserId === otherUserId) {
+            return 0;
+        }
+        return myUserId < otherUserId ? -1 : 1;
+    }
+}
+
+export interface IStreamViewModel extends AvatarSource, ViewModel {
+    get stream(): Stream | undefined;
+    get isCameraMuted(): boolean;
+    get isMicrophoneMuted(): boolean;
+}
+
+function isMuted(muted: boolean | undefined, hasTrack: boolean) {
+    if (muted) {
+        return true;
+    } else {
+        return !hasTrack;
+    }
+}
--- a/src/domain/session/room/call/PrepareCallViewModel.ts
+++ b/src/domain/session/room/call/PrepareCallViewModel.ts
@ -0,0 +1,128 @@
+/*
+Copyright 2022 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 {AvatarSource} from "../../../AvatarSource";
+import {ViewModel, Options as BaseOptions} from "../../../ViewModel";
+import {getStreamVideoTrack, getStreamAudioTrack} from "../../../../matrix/calls/common";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../../avatar";
+import {EventObservableValue} from "../../../../observable/value/EventObservableValue";
+import {ObservableValueMap} from "../../../../observable/map/ObservableValueMap";
+import type {GroupCall} from "../../../../matrix/calls/group/GroupCall";
+import type {Member} from "../../../../matrix/calls/group/Member";
+import type {BaseObservableList} from "../../../../observable/list/BaseObservableList";
+import type {BaseObservableMap} from "../../../../observable/map/BaseObservableMap";
+import type {Stream, VolumeMeasurer, MediaDevices} from "../../../../platform/types/MediaDevices";
+import type {MediaRepository} from "../../../../matrix/net/MediaRepository";
+import type {Options as CallViewModelOptions} from "./CallViewModel";
+
+type Options = Omit<CallViewModelOptions, "call"> & {
+    call?: GroupCall
+};
+
+export class PrepareCallViewModel extends ViewModel<Options> {
+    private _availableVideoDevices?: BaseObservableList<VideoDeviceViewModel>;
+    private _availableAudioDevices?: BaseObservableList<AudioDeviceViewModel>;
+    private _audioDevice?: AudioDeviceViewModel;
+    private _videoDevice?: VideoDeviceViewModel;
+
+    async init() {
+        const devices = await (this.platform.mediaDevices as MediaDevices).observeDevices();
+        const sortByNameAndId = (a: BaseDeviceViewModel, b: BaseDeviceViewModel) => {
+            const labelCmp = a.label.localeCompare(b.label);
+            if (labelCmp === 0) {
+                return a.deviceId.localeCompare(b.deviceId);
+            } else {
+                return labelCmp;
+            }
+        };
+        this._availableAudioDevices = devices
+            .filterValues(v => v.kind === "videoinput")
+            .mapValues((device, emitChange) => {
+                const vm = new VideoDeviceViewModel(this.childOptions({device, emitChange}));
+                vm.init();
+                return vm;
+            }).sortValues(sortByNameAndId);
+        this._availableAudioDevices = devices
+            .filterValues(v => v.kind === "audioinput")
+            .mapValues((device, emitChange) => {
+                const vm = new AudioDeviceViewModel(this.childOptions({device, emitChange}));
+                vm.init();
+                return vm;
+            }).sortValues(sortByNameAndId);
+    }
+
+    get availableVideoDevices(): BaseObservableList<VideoDeviceViewModel> | undefined {
+        return this._availableVideoDevices;
+    }
+
+    get availableAudioDevices(): BaseObservableList<AudioDeviceViewModel> | undefined {
+        return this._availableAudioDevices;
+    }
+
+    get videoDevice() : DeviceViewModel | undefined {
+
+    }
+
+    setVideoDeviceId(deviceId: string) {
+        this.videoDevice = this._availableVideoDevices.get(deviceId);
+    }
+
+    get audioDevice() : DeviceViewModel | undefined {
+
+    }
+}
+
+type DeviceOptions = BaseOptions & {
+    device: MediaDeviceInfo,
+}
+
+class BaseDeviceViewModel extends ViewModel<DeviceOptions> {
+    get label(): string { return this.options.device.label; }
+    get deviceId(): string { return this.options.device.deviceId; }
+}
+
+class VideoDeviceViewModel extends BaseDeviceViewModel {
+    private _stream: Stream;
+
+    async init() {
+        try {
+            this._stream = await (this.platform.mediaDevices as MediaDevices).getMediaTracks(false, {deviceId: this.deviceId});
+            this.track(() => getStreamVideoTrack(this._stream)?.stop());
+        } catch (err) {}
+    }
+
+    get stream(): Stream {
+        return this._stream;
+    }
+}
+
+class AudioDeviceViewModel extends BaseDeviceViewModel {
+    private volumeMeasurer?: VolumeMeasurer;
+
+    async init() {
+        try {
+            const stream = await (this.platform.mediaDevices as MediaDevices).getMediaTracks({deviceId: this.deviceId}, false);
+            this.track(() => getStreamAudioTrack(stream)?.stop());
+            this.volumeMeasurer = this.track((this.platform.mediaDevices as MediaDevices).createVolumeMeasurer(stream, () => {
+                this.emitChange("volume");
+            }));
+        } catch (err) {}
+    }
+
+    get volume(): number {
+        return this.volumeMeasurer?.volume ?? 0;
+    }
+}
--- a/src/domain/session/room/timeline/ReactionsViewModel.js
+++ b/src/domain/session/room/timeline/ReactionsViewModel.js
@ -189,7 +189,7 @@ import {HomeServer as MockHomeServer} from "../../../../mocks/HomeServer.js";
 // other imports
 import {BaseMessageTile} from "./tiles/BaseMessageTile.js";
 import {MappedList} from "../../../../observable/list/MappedList";
-import {ObservableValue} from "../../../../observable/ObservableValue";
+import {ObservableValue} from "../../../../observable/value/ObservableValue";
 import {PowerLevels} from "../../../../matrix/room/PowerLevels.js";

 export function tests() {
--- a/src/domain/session/room/timeline/tiles/BaseMessageTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseMessageTile.js
@ -49,14 +49,6 @@ export class BaseMessageTile extends SimpleTile {
        return `https://matrix.to/#/${encodeURIComponent(this.sender)}`;
    }

-    get displayName() {
-        return this._entry.displayName || this.sender;
-    }
-
-    get sender() {
-        return this._entry.sender;
-    }
-
    get memberPanelLink() {
        return `${this.urlCreator.urlUntilSegment("room")}/member/${this.sender}`;
    }
--- a/src/domain/session/room/timeline/tiles/CallTile.js
+++ b/src/domain/session/room/timeline/tiles/CallTile.js
@ -0,0 +1,94 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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 {SimpleTile} from "./SimpleTile.js";
+import {LocalMedia} from "../../../../../matrix/calls/LocalMedia";
+
+// TODO: timeline entries for state events with the same state key and type
+// should also update previous entries in the timeline, so we can update the name of the call, whether it is terminated, etc ...
+
+// alternatively, we could just subscribe to the GroupCall and spontanously emit an update when it updates
+
+export class CallTile extends SimpleTile {
+    constructor(entry, options) {
+        super(entry, options);
+        const calls = this.getOption("session").callHandler.calls;
+        this._call = calls.get(this._entry.stateKey);
+        this._callSubscription = undefined;
+        if (this._call) {
+            this._callSubscription = this._call.disposableOn("change", () => {
+                // unsubscribe when terminated
+                if (this._call.isTerminated) {
+                    this._callSubscription = this._callSubscription();
+                    this._call = undefined;
+                }
+                this.emitChange();
+            });
+        }
+    }
+
+    get confId() {
+        return this._entry.stateKey;
+    }
+    
+    get shape() {
+        return "call";
+    }
+
+    get name() {
+        return this._entry.content["m.name"];
+    }
+
+    get canJoin() {
+        return this._call && !this._call.hasJoined;
+    }
+
+    get canLeave() {
+        return this._call && this._call.hasJoined;
+    }
+
+    get label() {
+        if (this._call) {
+            if (this._call.hasJoined) {
+                return `Ongoing call (${this.name}, ${this.confId})`;
+            } else {
+                return `${this.displayName} started a call (${this.name}, ${this.confId})`;
+            }
+        } else {
+            return `Call finished, started by ${this.displayName} (${this.name}, ${this.confId})`;
+        }
+    }
+
+    async join() {
+        if (this.canJoin) {
+            const stream = await this.platform.mediaDevices.getMediaTracks(false, true);
+            const localMedia = new LocalMedia().withUserMedia(stream);
+            await this._call.join(localMedia);
+        }
+    }
+
+    async leave() {
+        if (this.canLeave) {
+            this._call.leave();
+        }
+    }
+
+    dispose() {
+        if (this._callSubscription) {
+            this._callSubscription = this._callSubscription();
+        }
+    }
+}
--- a/src/domain/session/room/timeline/tiles/SimpleTile.js
+++ b/src/domain/session/room/timeline/tiles/SimpleTile.js
@ -154,4 +154,12 @@ export class SimpleTile extends ViewModel {
    get _ownMember() {
        return this._options.timeline.me;
    }
+
+    get displayName() {
+        return this._entry.displayName || this.sender;
+    }
+
+    get sender() {
+        return this._entry.sender;
+    }
 }
--- a/src/domain/session/room/timeline/tiles/index.ts
+++ b/src/domain/session/room/timeline/tiles/index.ts
@ -26,9 +26,11 @@ import {RoomMemberTile} from "./RoomMemberTile.js";
 import {EncryptedEventTile} from "./EncryptedEventTile.js";
 import {EncryptionEnabledTile} from "./EncryptionEnabledTile.js";
 import {MissingAttachmentTile} from "./MissingAttachmentTile.js";
+import {CallTile} from "./CallTile.js";

 import type {SimpleTile} from "./SimpleTile.js";
 import type {Room} from "../../../../../matrix/room/Room";
+import type {Session} from "../../../../../matrix/Session";
 import type {Timeline} from "../../../../../matrix/room/timeline/Timeline";
 import type {FragmentBoundaryEntry} from "../../../../../matrix/room/timeline/entries/FragmentBoundaryEntry";
 import type {EventEntry} from "../../../../../matrix/room/timeline/entries/EventEntry";
@ -38,6 +40,7 @@ import type {Options as ViewModelOptions} from "../../../../ViewModel";
 export type TimelineEntry = FragmentBoundaryEntry | EventEntry | PendingEventEntry;
 export type TileClassForEntryFn = (entry: TimelineEntry) => TileConstructor | undefined;
 export type Options = ViewModelOptions & {
+    session: Session,
    room: Room,
    timeline: Timeline
    tileClassForEntry: TileClassForEntryFn;
@ -86,6 +89,14 @@ export function tileClassForEntry(entry: TimelineEntry): TileConstructor | undef
                return EncryptedEventTile;
            case "m.room.encryption":
                return EncryptionEnabledTile;
+            case "org.matrix.msc3401.call": {
+                // if prevContent is present, it's an update to a call event, which we don't render
+                // as the original event is updated through the call object which receive state event updates
+                if (entry.stateKey && !entry.prevContent) {
+                    return CallTile;
+                }
+                return undefined;
+            }
            default:
                // unknown type not rendered
                return undefined;
--- a/src/domain/session/settings/KeyBackupViewModel.js
+++ b/src/domain/session/settings/KeyBackupViewModel.js
@ -17,6 +17,7 @@ limitations under the License.
 import {ViewModel} from "../../ViewModel";
 import {KeyType} from "../../../matrix/ssss/index";
 import {createEnum} from "../../../utils/enum";
+import {FlatMapObservableValue} from "../../../observable/value/FlatMapObservableValue";

 export const Status = createEnum("Enabled", "SetupKey", "SetupPhrase", "Pending", "NewVersionAvailable"); 
 export const BackupWriteStatus = createEnum("Writing", "Stopped", "Done", "Pending"); 
@ -29,8 +30,8 @@ export class KeyBackupViewModel extends ViewModel {
        this._isBusy = false;
        this._dehydratedDeviceId = undefined;
        this._status = undefined;
-        this._backupOperation = this._session.keyBackup.flatMap(keyBackup => keyBackup.operationInProgress);
-        this._progress = this._backupOperation.flatMap(op => op.progress);
+        this._backupOperation = new FlatMapObservableValue(this._session.keyBackup, keyBackup => keyBackup.operationInProgress);
+        this._progress = new FlatMapObservableValue(this._backupOperation, op => op.progress);
        this.track(this._backupOperation.subscribe(() => {
            // see if needsNewKey might be set
            this._reevaluateStatus();
--- a/src/domain/session/settings/SettingsViewModel.js
+++ b/src/domain/session/settings/SettingsViewModel.js
@ -136,7 +136,8 @@ export class SettingsViewModel extends ViewModel {
    }

    async exportLogs() {
-        const logExport = await this.logger.export();
+        const persister = this.logger.reporters.find(r => typeof r.export === "function");
+        const logExport = await persister.export();
        this.platform.saveFileAs(logExport.asBlob(), `hydrogen-logs-${this.platform.clock.now()}.json`);
    }

--- a/src/lib.ts
+++ b/src/lib.ts
@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+export {Logger} from "./logging/Logger";
+export {IDBLogPersister} from "./logging/IDBLogPersister";
+export {ConsoleReporter} from "./logging/ConsoleReporter";
 export {Platform} from "./platform/web/Platform.js";
 export {Client, LoadStatus} from "./matrix/Client.js";
 export {RoomStatus} from "./matrix/room/common";
@ -71,6 +74,7 @@ export {AvatarView} from "./platform/web/ui/AvatarView.js";
 export {RoomType} from "./matrix/room/common";
 export {EventEmitter} from "./utils/EventEmitter";
 export {Disposables} from "./utils/Disposables";
+export {LocalMedia} from "./matrix/calls/LocalMedia";
 // these should eventually be moved to another library
 export {
    ObservableArray,
@ -80,8 +84,6 @@ export {
    ConcatList,
    ObservableMap
 } from "./observable/index";
-export {
-    BaseObservableValue,
-    ObservableValue,
-    RetainedObservableValue
-} from "./observable/ObservableValue";
+export {BaseObservableValue} from "./observable/value/BaseObservableValue";
+export {ObservableValue} from "./observable/value/ObservableValue";
+export {RetainedObservableValue} from "./observable/value/RetainedObservableValue";
--- a/src/logging/ConsoleReporter.ts
+++ b/src/logging/ConsoleReporter.ts
@ -13,17 +13,28 @@ 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 {BaseLogger} from "./BaseLogger";
-import {LogItem} from "./LogItem";
-import type {ILogItem, LogItemValues, ILogExport} from "./types";

-export class ConsoleLogger extends BaseLogger {
-    _persistItem(item: LogItem): void {
-        printToConsole(item);
+import type {ILogger, ILogItem, LogItemValues, ILogReporter} from "./types";
+import type {LogItem} from "./LogItem";
+
+export class ConsoleReporter implements ILogReporter {
+    private logger?: ILogger;
+
+    reportItem(item: ILogItem): void {
+        printToConsole(item as LogItem);
    }

-    async export(): Promise<ILogExport | undefined> {
-        return undefined;
+    setLogger(logger: ILogger) {
+        this.logger = logger;
+    }
+
+    printOpenItems(): void {
+        if (!this.logger) {
+            return;
+        }
+        for (const item of this.logger.getOpenRootItems()) {
+            this.reportItem(item);
+        }
    }
 }

@ -39,7 +50,7 @@ function filterValues(values: LogItemValues): LogItemValues | null {
 }

 function printToConsole(item: LogItem): void {
-    const label = `${itemCaption(item)} (${item.duration}ms)`;
+    const label = `${itemCaption(item)} (@${item.start}ms, duration: ${item.duration}ms)`;
    const filteredValues = filterValues(item.values);
    const shouldGroup = item.children || filteredValues;
    if (shouldGroup) {
@ -78,6 +89,8 @@ function itemCaption(item: ILogItem): string {
        return `${item.values.l} ${item.values.id}`;
    } else if (item.values.l && typeof item.values.status !== "undefined") {
        return `${item.values.l} (${item.values.status})`;
+    } else if (item.values.l && typeof item.values.type !== "undefined") {
+        return `${item.values.l} (${item.values.type})`;
    } else if (item.values.l && item.error) {
        return `${item.values.l} failed`;
    } else if (typeof item.values.ref !== "undefined") {
--- a/src/logging/IDBLogPersister.ts
+++ b/src/logging/IDBLogPersister.ts
@ -22,36 +22,69 @@ import {
    iterateCursor,
    fetchResults,
 } from "../matrix/storage/idb/utils";
-import {BaseLogger} from "./BaseLogger";
 import type {Interval} from "../platform/web/dom/Clock";
 import type {Platform} from "../platform/web/Platform.js";
 import type {BlobHandle} from "../platform/web/dom/BlobHandle.js";
-import type {ILogItem, ILogExport, ISerializedItem} from "./types";
-import type {LogFilter} from "./LogFilter";
+import type {ILogItem, ILogger, ILogReporter, ISerializedItem} from "./types";
+import {LogFilter} from "./LogFilter";

 type QueuedItem = {
    json: string;
    id?: number;
 }

-export class IDBLogger extends BaseLogger {
-    private readonly _name: string;
-    private readonly _limit: number;
+type Options = {
+    name: string,
+    flushInterval?: number,
+    limit?: number,
+    platform: Platform,
+    serializedTransformer?: (item: ISerializedItem) => ISerializedItem
+}
+
+export class IDBLogPersister implements ILogReporter {
    private readonly _flushInterval: Interval;
    private _queuedItems: QueuedItem[];
+    private readonly options: Options;
+    private logger?: ILogger;

-    constructor(options: {name: string, flushInterval?: number, limit?: number, platform: Platform, serializedTransformer?: (item: ISerializedItem) => ISerializedItem}) {
-        super(options);
-        const {name, flushInterval = 60 * 1000, limit = 3000} = options;
-        this._name = name;
-        this._limit = limit;
+    constructor(options: Options) {
+        this.options = options;
        this._queuedItems = this._loadQueuedItems();
        // TODO: also listen for unload just in case sync keeps on running after pagehide is fired?
        window.addEventListener("pagehide", this, false);
-        this._flushInterval = this._platform.clock.createInterval(() => this._tryFlush(), flushInterval);
+        this._flushInterval = this.options.platform.clock.createInterval(
+            () => this._tryFlush(),
+            this.options.flushInterval ?? 60 * 1000
+        );
    }

-    // TODO: move dispose to ILogger, listen to pagehide elsewhere and call dispose from there, which calls _finishAllAndFlush
+    setLogger(logger: ILogger): void {
+        this.logger = logger;
+    }
+
+    reportItem(logItem: ILogItem, filter: LogFilter, forced: boolean): void {
+        const queuedItem = this.prepareItemForQueue(logItem, filter, forced);
+        if (queuedItem) {
+            this._queuedItems.push(queuedItem);
+        }
+    }
+
+    async export(): Promise<IDBLogExport> {
+        const db = await this._openDB();
+        try {
+            const txn = db.transaction(["logs"], "readonly");
+            const logs = txn.objectStore("logs");
+            const storedItems: QueuedItem[] = await fetchResults(logs.openCursor(), () => false);
+            const openItems = this.getSerializedOpenItems();
+            const allItems = storedItems.concat(this._queuedItems).concat(openItems);
+            return new IDBLogExport(allItems, this, this.options.platform);
+        } finally {
+            try {
+                db.close();
+            } catch (e) {}
+        }
+    }
+    
    dispose(): void {
        window.removeEventListener("pagehide", this, false);
        this._flushInterval.dispose();
@ -63,7 +96,7 @@ export class IDBLogger extends BaseLogger {
        }
    }

-    async _tryFlush(): Promise<void> {
+    private async _tryFlush(): Promise<void> {
        const db = await this._openDB();
        try {
            const txn = db.transaction(["logs"], "readwrite");
@ -73,9 +106,10 @@ export class IDBLogger extends BaseLogger {
                logs.add(i);
            }
            const itemCount = await reqAsPromise(logs.count());
-            if (itemCount > this._limit) {
+            const limit = this.options.limit ?? 3000;
+            if (itemCount > limit) {
                // delete an extra 10% so we don't need to delete every time we flush
-                let deleteAmount = (itemCount - this._limit) + Math.round(0.1 * this._limit);
+                let deleteAmount = (itemCount - limit) + Math.round(0.1 * limit);
                await iterateCursor(logs.openCursor(), (_, __, cursor) => {
                    cursor.delete();
                    deleteAmount -= 1;
@ -93,14 +127,16 @@ export class IDBLogger extends BaseLogger {
        }
    }

-    _finishAllAndFlush(): void {
-        this._finishOpenItems();
-        this.log({l: "pagehide, closing logs", t: "navigation"});
+    private _finishAllAndFlush(): void {
+        if (this.logger) {
+            this.logger.log({l: "pagehide, closing logs", t: "navigation"});
+            this.logger.forceFinish();
+        }
        this._persistQueuedItems(this._queuedItems);
    }

-    _loadQueuedItems(): QueuedItem[] {
-        const key = `${this._name}_queuedItems`;
+    private _loadQueuedItems(): QueuedItem[] {
+        const key = `${this.options.name}_queuedItems`;
        try {
            const json = window.localStorage.getItem(key);
            if (json) {
@ -113,44 +149,32 @@ export class IDBLogger extends BaseLogger {
        return [];
    }

-    _openDB(): Promise<IDBDatabase> {
-        return openDatabase(this._name, db => db.createObjectStore("logs", {keyPath: "id", autoIncrement: true}), 1);
+    private _openDB(): Promise<IDBDatabase> {
+        return openDatabase(this.options.name, db => db.createObjectStore("logs", {keyPath: "id", autoIncrement: true}), 1);
    }
-    
-    _persistItem(logItem: ILogItem, filter: LogFilter, forced: boolean): void {
-        const serializedItem = logItem.serialize(filter, undefined, forced);
+
+    private prepareItemForQueue(logItem: ILogItem, filter: LogFilter, forced: boolean): QueuedItem | undefined {
+        let serializedItem = logItem.serialize(filter, undefined, forced);
        if (serializedItem) {
-            const transformedSerializedItem = this._serializedTransformer(serializedItem);
-            this._queuedItems.push({
-                json: JSON.stringify(transformedSerializedItem)
-            });
+            if (this.options.serializedTransformer) {
+                serializedItem = this.options.serializedTransformer(serializedItem);
+            }
+            return {
+                json: JSON.stringify(serializedItem)
+            };
        }
    }

-    _persistQueuedItems(items: QueuedItem[]): void {
+    private _persistQueuedItems(items: QueuedItem[]): void {
        try {
-            window.localStorage.setItem(`${this._name}_queuedItems`, JSON.stringify(items));
+            window.localStorage.setItem(`${this.options.name}_queuedItems`, JSON.stringify(items));
        } catch (e) {
            console.error("Could not persist queued log items in localStorage, they will likely be lost", e);
        }
    }

-    async export(): Promise<ILogExport> {
-        const db = await this._openDB();
-        try {
-            const txn = db.transaction(["logs"], "readonly");
-            const logs = txn.objectStore("logs");
-            const storedItems: QueuedItem[] = await fetchResults(logs.openCursor(), () => false);
-            const allItems = storedItems.concat(this._queuedItems);
-            return new IDBLogExport(allItems, this, this._platform);
-        } finally {
-            try {
-                db.close();
-            } catch (e) {}
-        }
-    }
-
-    async _removeItems(items: QueuedItem[]): Promise<void> {
+    /** @internal called by ILogExport.removeFromStore */
+    async removeItems(items: QueuedItem[]): Promise<void> {
        const db = await this._openDB();
        try {
            const txn = db.transaction(["logs"], "readwrite");
@ -173,14 +197,29 @@ export class IDBLogger extends BaseLogger {
            } catch (e) {}
        }
    }
+
+    private getSerializedOpenItems(): QueuedItem[] {
+        const openItems: QueuedItem[] = [];
+        if (!this.logger) {
+            return openItems;
+        }
+        const filter = new LogFilter();
+        for(const item of this.logger!.getOpenRootItems()) {
+            const openItem = this.prepareItemForQueue(item, filter, false);
+            if (openItem) {
+                openItems.push(openItem);
+            }
+        }
+        return openItems;
+    }
 }

-class IDBLogExport implements ILogExport {
+export class IDBLogExport {
    private readonly _items: QueuedItem[];
-    private readonly _logger: IDBLogger;
+    private readonly _logger: IDBLogPersister;
    private readonly _platform: Platform;

-    constructor(items: QueuedItem[], logger: IDBLogger, platform: Platform) {
+    constructor(items: QueuedItem[], logger: IDBLogPersister, platform: Platform) {
        this._items = items;
        this._logger = logger;
        this._platform = platform;
@ -194,18 +233,23 @@ class IDBLogExport implements ILogExport {
     * @return {Promise}
     */
    removeFromStore(): Promise<void> {
-        return this._logger._removeItems(this._items);
+        return this._logger.removeItems(this._items);
    }

    asBlob(): BlobHandle {
+        const json = this.toJSON();
+        const buffer: Uint8Array = this._platform.encoding.utf8.encode(json);
+        const blob: BlobHandle = this._platform.createBlob(buffer, "application/json");
+        return blob;
+    }
+
+    toJSON(): string {
        const log = {
            formatVersion: 1,
            appVersion: this._platform.updateService?.version,
            items: this._items.map(i => JSON.parse(i.json))
        };
        const json = JSON.stringify(log);
-        const buffer: Uint8Array = this._platform.encoding.utf8.encode(json);
-        const blob: BlobHandle = this._platform.createBlob(buffer, "application/json");
-        return blob;
+        return json;
    }
 }
--- a/src/logging/LogItem.ts
+++ b/src/logging/LogItem.ts
@ -16,7 +16,7 @@ limitations under the License.
 */

 import {LogLevel, LogFilter} from "./LogFilter";
-import type {BaseLogger} from "./BaseLogger";
+import type {Logger} from "./Logger";
 import type {ISerializedItem, ILogItem, LogItemValues, LabelOrValues, FilterCreator, LogCallback} from "./types";

 export class LogItem implements ILogItem {
@ -25,11 +25,11 @@ export class LogItem implements ILogItem {
    public error?: Error;
    public end?: number;
    private _values: LogItemValues;
-    private _logger: BaseLogger;
+    protected _logger: Logger;
    private _filterCreator?: FilterCreator;
    private _children?: Array<LogItem>;

-    constructor(labelOrValues: LabelOrValues, logLevel: LogLevel, logger: BaseLogger, filterCreator?: FilterCreator) {
+    constructor(labelOrValues: LabelOrValues, logLevel: LogLevel, logger: Logger, filterCreator?: FilterCreator) {
        this._logger = logger;
        this.start = logger._now();
        // (l)abel
@ -38,7 +38,7 @@ export class LogItem implements ILogItem {
        this._filterCreator = filterCreator;
    }

-    /** start a new root log item and run it detached mode, see BaseLogger.runDetached */
+    /** start a new root log item and run it detached mode, see Logger.runDetached */
    runDetached(labelOrValues: LabelOrValues, callback: LogCallback<unknown>, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem {
        return this._logger.runDetached(labelOrValues, callback, logLevel, filterCreator);
    }
@ -221,6 +221,11 @@ export class LogItem implements ILogItem {
        }
    }

+    /** @internal */
+    forceFinish(): void {
+        this.finish();
+    }
+
    // expose log level without needing import everywhere
    get level(): typeof LogLevel {
        return LogLevel;
@ -235,7 +240,7 @@ export class LogItem implements ILogItem {

    child(labelOrValues: LabelOrValues, logLevel?: LogLevel, filterCreator?: FilterCreator): LogItem {
        if (this.end) {
-            console.trace("log item is finished, additional logs will likely not be recorded");
+            console.trace(`log item ${this.values.l} finished, additional log ${JSON.stringify(labelOrValues)} will likely not be recorded`);
        }
        if (!logLevel) {
            logLevel = this.logLevel || LogLevel.Info;
@ -248,7 +253,7 @@ export class LogItem implements ILogItem {
        return item;
    }

-    get logger(): BaseLogger {
+    get logger(): Logger {
        return this._logger;
    }

--- a/src/logging/BaseLogger.ts
+++ b/src/logging/BaseLogger.ts
@ -17,17 +17,17 @@ limitations under the License.

 import {LogItem} from "./LogItem";
 import {LogLevel, LogFilter} from "./LogFilter";
-import type {ILogger, ILogExport, FilterCreator, LabelOrValues, LogCallback, ILogItem, ISerializedItem} from "./types";
+import type {ILogger, ILogReporter, FilterCreator, LabelOrValues, LogCallback, ILogItem, ISerializedItem} from "./types";
 import type {Platform} from "../platform/web/Platform.js";

-export abstract class BaseLogger implements ILogger {
+export class Logger implements ILogger {
    protected _openItems: Set<LogItem> = new Set();
    protected _platform: Platform;
    protected _serializedTransformer: (item: ISerializedItem) => ISerializedItem;
+    public readonly reporters: ILogReporter[] = [];

-    constructor({platform, serializedTransformer = (item: ISerializedItem) => item}) {
+    constructor({platform}) {
        this._platform = platform;
-        this._serializedTransformer = serializedTransformer;
    }

    log(labelOrValues: LabelOrValues, logLevel: LogLevel = LogLevel.Info): void {
@ -36,6 +36,15 @@ export abstract class BaseLogger implements ILogger {
        this._persistItem(item, undefined, false);
    }

+    /** Prefer `run()` or `log()` above this method; only use it if you have a long-running operation
+     *  *without* a single call stack that should be logged into one sub-tree.
+     *  You need to call `finish()` on the returned item or it will stay open until the app unloads. */
+    child(labelOrValues: LabelOrValues, logLevel: LogLevel = LogLevel.Info, filterCreator?: FilterCreator): ILogItem {
+        const item = new DeferredPersistRootLogItem(labelOrValues, logLevel, this, filterCreator);
+        this._openItems.add(item);
+        return item;
+    }
+
    /** if item is a log item, wrap the callback in a child of it, otherwise start a new root log item. */
    wrapOrRun<T>(item: ILogItem | undefined, labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T {
        if (item) {
@ -70,10 +79,10 @@ export abstract class BaseLogger implements ILogger {
        return this._run(item, callback, logLevel, true, filterCreator);
    }

-    _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: true, filterCreator?: FilterCreator): T;
+    private _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: true, filterCreator?: FilterCreator): T;
    // we don't return if we don't throw, as we don't have anything to return when an error is caught but swallowed for the fire-and-forget case.
-    _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: false, filterCreator?: FilterCreator): void;
-    _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: boolean, filterCreator?: FilterCreator): T | void {
+    private _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: false, filterCreator?: FilterCreator): void;
+    private _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: boolean, filterCreator?: FilterCreator): T | void {
        this._openItems.add(item);

        const finishItem = () => {
@ -125,9 +134,18 @@ export abstract class BaseLogger implements ILogger {
        }
    }

-    _finishOpenItems() {
+    addReporter(reporter: ILogReporter): void {
+        reporter.setLogger(this);
+        this.reporters.push(reporter);
+    }
+
+    getOpenRootItems(): Iterable<ILogItem> {
+        return this._openItems;
+    }
+
+    forceFinish() {
        for (const openItem of this._openItems) {
-            openItem.finish();
+            openItem.forceFinish();
            try {
                // for now, serialize with an all-permitting filter
                // as the createFilter function would get a distorted image anyway
@ -141,20 +159,37 @@ export abstract class BaseLogger implements ILogger {
        this._openItems.clear();
    }

-    abstract _persistItem(item: LogItem, filter?: LogFilter, forced?: boolean): void;
-
-    abstract export(): Promise<ILogExport | undefined>;
+    /** @internal */
+    _persistItem(item: LogItem, filter?: LogFilter, forced?: boolean): void {
+        for (var i = 0; i < this.reporters.length; i += 1) {
+            this.reporters[i].reportItem(item, filter, forced);
+        }
+    }

    // expose log level without needing 
    get level(): typeof LogLevel {
        return LogLevel;
    }

+    /** @internal */
    _now(): number {
        return this._platform.clock.now();
    }

+    /** @internal */
    _createRefId(): number {
        return Math.round(this._platform.random() * Number.MAX_SAFE_INTEGER);
    }
 }
+
+class DeferredPersistRootLogItem extends LogItem {
+    finish() {
+        super.finish();
+        (this._logger as Logger)._persistItem(this, undefined, false);
+    }
+
+    forceFinish() {
+        super.finish();
+        /// no need to persist when force-finishing as _finishOpenItems above will do it
+    }
+}
--- a/src/logging/NullLogger.ts
+++ b/src/logging/NullLogger.ts
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import {LogLevel} from "./LogFilter";
-import type {ILogger, ILogExport, ILogItem, LabelOrValues, LogCallback, LogItemValues} from "./types";
+import type {ILogger, ILogItem, ILogReporter, LabelOrValues, LogCallback, LogItemValues} from "./types";

 function noop (): void {}

@ -23,6 +23,22 @@ export class NullLogger implements ILogger {

    log(): void {}

+    addReporter() {}
+
+    get reporters(): ReadonlyArray<ILogReporter> {
+        return [];
+    }
+
+    getOpenRootItems(): Iterable<ILogItem> {
+        return [];
+    }
+
+    forceFinish(): void {}
+
+    child(): ILogItem  {
+        return this.item;
+    }
+
    run<T>(_, callback: LogCallback<T>): T {
        return callback(this.item);    
    }
@ -39,11 +55,7 @@ export class NullLogger implements ILogger {
        new Promise(r => r(callback(this.item))).then(noop, noop);
        return this.item;
    }
-
-    async export(): Promise<ILogExport | undefined> {
-        return undefined;
-    }
-
+    
    get level(): typeof LogLevel {
        return LogLevel;
    }
@ -61,12 +73,18 @@ export class NullLogItem implements ILogItem {
    }

    wrap<T>(_: LabelOrValues, callback: LogCallback<T>): T {
+        return this.run(callback);
+    }
+
+    run<T>(callback: LogCallback<T>): T {
        return callback(this);
    }

+
    log(): ILogItem {
        return this;
    }
+    
    set(): ILogItem { return this; }

    runDetached(_: LabelOrValues, callback: LogCallback<unknown>): ILogItem {
@ -99,6 +117,7 @@ export class NullLogItem implements ILogItem {
    }

    finish(): void {}
+    forceFinish(): void {}

    serialize(): undefined {
        return undefined;
--- a/src/logging/types.ts
+++ b/src/logging/types.ts
@ -16,7 +16,6 @@ limitations under the License.
 */

 import {LogLevel, LogFilter} from "./LogFilter";
-import type {BaseLogger} from "./BaseLogger";
 import type {BlobHandle} from "../platform/web/dom/BlobHandle.js";

 export interface ISerializedItem {
@ -40,8 +39,10 @@ export interface ILogItem {
    readonly level: typeof LogLevel;
    readonly end?: number;
    readonly start?: number;
-    readonly values: LogItemValues;
+    readonly values: Readonly<LogItemValues>;
    wrap<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T;
+    /*** This is sort of low-level, you probably want to use wrap. If you do use it, it should only be called once. */
+    run<T>(callback: LogCallback<T>): T;
    log(labelOrValues: LabelOrValues, logLevel?: LogLevel): ILogItem;
    set(key: string | object, value: unknown): ILogItem;
    runDetached(labelOrValues: LabelOrValues, callback: LogCallback<unknown>, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem;
@ -51,22 +52,41 @@ export interface ILogItem {
    catch(err: Error): Error;
    serialize(filter: LogFilter, parentStartTime: number | undefined, forced: boolean): ISerializedItem | undefined;
    finish(): void;
+    forceFinish(): void;
    child(labelOrValues: LabelOrValues, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem;
 }
+/*
+extend both ILogger and ILogItem from this interface, but need to rename ILogger.run => wrap then. Or both to `span`?
+
+export interface ILogItemCreator {
+    child(labelOrValues: LabelOrValues, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem;
+    refDetached(logItem: ILogItem, logLevel?: LogLevel): void;
+    log(labelOrValues: LabelOrValues, logLevel?: LogLevel): ILogItem;
+    wrap<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T;
+    get level(): typeof LogLevel;
+}
+*/

 export interface ILogger {
    log(labelOrValues: LabelOrValues, logLevel?: LogLevel): void;
+    child(labelOrValues: LabelOrValues, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem;
    wrapOrRun<T>(item: ILogItem | undefined, labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T;
    runDetached<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem;
    run<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T;
-    export(): Promise<ILogExport | undefined>;
    get level(): typeof LogLevel;
+    getOpenRootItems(): Iterable<ILogItem>;
+    addReporter(reporter: ILogReporter): void;
+    get reporters(): ReadonlyArray<ILogReporter>;
+    /**
+     * force-finishes any open items and passes them to the reporter, with the forced flag set.
+     * Good think to do when the page is being closed to not lose any logs.
+     **/
+    forceFinish(): void;
 }

-export interface ILogExport {
-    get count(): number;
-    removeFromStore(): Promise<void>;
-    asBlob(): BlobHandle;
+export interface ILogReporter {
+    setLogger(logger: ILogger): void;
+    reportItem(item: ILogItem, filter?: LogFilter, forced?: boolean): void;
 }

 export type LogItemValues = {
--- a/src/matrix/Client.js
+++ b/src/matrix/Client.js
@ -18,7 +18,7 @@ limitations under the License.
 import {createEnum} from "../utils/enum";
 import {lookupHomeserver} from "./well-known.js";
 import {AbortableOperation} from "../utils/AbortableOperation";
-import {ObservableValue} from "../observable/ObservableValue";
+import {ObservableValue} from "../observable/value/ObservableValue";
 import {HomeServerApi} from "./net/HomeServerApi";
 import {Reconnector, ConnectionStatus} from "./net/Reconnector";
 import {ExponentialRetryDelay} from "./net/ExponentialRetryDelay";
--- a/src/matrix/DeviceMessageHandler.js
+++ b/src/matrix/DeviceMessageHandler.js
@ -16,12 +16,15 @@ limitations under the License.

 import {OLM_ALGORITHM} from "./e2ee/common.js";
 import {countBy, groupBy} from "../utils/groupBy";
+import {LRUCache} from "../utils/LRUCache";

 export class DeviceMessageHandler {
-    constructor({storage}) {
+    constructor({storage, callHandler}) {
        this._storage = storage;
        this._olmDecryption = null;
        this._megolmDecryption = null;
+        this._callHandler = callHandler;
+        this._senderDeviceCache = new LRUCache(10, di => di.curve25519Key);
    }

    enableEncryption({olmDecryption, megolmDecryption}) {
@ -35,6 +38,7 @@ export class DeviceMessageHandler {

    async prepareSync(toDeviceEvents, lock, txn, log) {
        log.set("messageTypes", countBy(toDeviceEvents, e => e.type));
+        this._handleUnencryptedCallEvents(toDeviceEvents, log);
        const encryptedEvents = toDeviceEvents.filter(e => e.type === "m.room.encrypted");
        if (!this._olmDecryption) {
            log.log("can't decrypt, encryption not enabled", log.level.Warn);
@ -49,10 +53,38 @@ export class DeviceMessageHandler {
                log.child("decrypt_error").catch(err);
            }
            const newRoomKeys = this._megolmDecryption.roomKeysFromDeviceMessages(olmDecryptChanges.results, log);
+            
+            // const callMessages = olmDecryptChanges.results.filter(dr => this._callHandler.handlesDeviceMessageEventType(dr.event?.type));
+            // // load devices by sender key
+            // await Promise.all(callMessages.map(async dr => {
+            //     dr.setDevice(await this._getDevice(dr.senderCurve25519Key, txn));
+            // }));
+            // // TODO: pass this in the prep and run it in afterSync or afterSyncComplete (as callHandler can send events as well)?
+            // for (const dr of callMessages) {
+            //     if (dr.device) {
+            //         this._callHandler.handleDeviceMessage(dr.event, dr.device.userId, dr.device.deviceId, log);
+            //     } else {
+            //         console.error("could not deliver message because don't have device for sender key", dr.event);
+            //     }
+            // }
+            
+            // TODO: somehow include rooms that received a call to_device message in the sync state?
+            // or have updates flow through event emitter?
+            // well, we don't really need to update the room other then when a call starts or stops
+            // any changes within the call will be emitted on the call object?
            return new SyncPreparation(olmDecryptChanges, newRoomKeys);
        }
    }

+    _handleUnencryptedCallEvents(toDeviceEvents, log) {
+        const callMessages = toDeviceEvents.filter(e => this._callHandler.handlesDeviceMessageEventType(e.type));
+        for (const event of callMessages) {
+            const userId = event.sender;
+            const deviceId = event.content.device_id;
+            this._callHandler.handleDeviceMessage(event, userId, deviceId, log);
+        }
+    }
+
    /** check that prep is not undefined before calling this */
    async writeSync(prep, txn) {
        // write olm changes
@ -60,6 +92,18 @@ export class DeviceMessageHandler {
        const didWriteValues = await Promise.all(prep.newRoomKeys.map(key => this._megolmDecryption.writeRoomKey(key, txn)));
        return didWriteValues.some(didWrite => !!didWrite);
    }
+
+
+    async _getDevice(senderKey, txn) {
+        let device = this._senderDeviceCache.get(senderKey);
+        if (!device) {
+            device = await txn.deviceIdentities.getByCurve25519Key(senderKey);
+            if (device) {
+                this._senderDeviceCache.set(device);
+            }
+        }
+        return device;
+    }
 }

 class SyncPreparation {
--- a/src/matrix/Session.js
+++ b/src/matrix/Session.js
@ -21,7 +21,7 @@ import {RoomStatus} from "./room/common";
 import {RoomBeingCreated} from "./room/RoomBeingCreated";
 import {Invite} from "./room/Invite.js";
 import {Pusher} from "./push/Pusher";
-import { ObservableMap } from "../observable/index.js";
+import { ObservableMap } from "../observable/index";
 import {User} from "./User.js";
 import {DeviceMessageHandler} from "./DeviceMessageHandler.js";
 import {Account as E2EEAccount} from "./e2ee/Account.js";
@ -45,7 +45,9 @@ import {
    keyFromDehydratedDeviceKey as createSSSSKeyFromDehydratedDeviceKey
 } from "./ssss/index";
 import {SecretStorage} from "./ssss/SecretStorage";
-import {ObservableValue, RetainedObservableValue} from "../observable/ObservableValue";
+import {ObservableValue} from "../observable/value/ObservableValue";
+import {RetainedObservableValue} from "../observable/value/RetainedObservableValue";
+import {CallHandler} from "./calls/CallHandler";

 const PICKLE_KEY = "DEFAULT_KEY";
 const PUSHER_KEY = "pusher";
@ -73,7 +75,33 @@ export class Session {
        };
        this._roomsBeingCreated = new ObservableMap();
        this._user = new User(sessionInfo.userId);
-        this._deviceMessageHandler = new DeviceMessageHandler({storage});
+        this._callHandler = new CallHandler({
+            clock: this._platform.clock,
+            hsApi: this._hsApi,
+            encryptDeviceMessage: async (roomId, userId, message, log) => {
+                if (!this._deviceTracker || !this._olmEncryption) {
+                    throw new Error("encryption is not enabled");
+                }
+                // TODO: just get the devices we're sending the message to, not all the room devices
+                // although we probably already fetched all devices to send messages in the likely e2ee room
+                const devices = await log.wrap("get device keys", async log => {
+                    await this._deviceTracker.trackRoom(this.rooms.get(roomId), log);
+                    return this._deviceTracker.devicesForRoomMembers(roomId, [userId], this._hsApi, log);
+                });
+                const encryptedMessage = await this._olmEncryption.encrypt(message.type, message.content, devices, this._hsApi, log);
+                return encryptedMessage;
+            },
+            storage: this._storage,
+            webRTC: this._platform.webRTC,
+            ownDeviceId: sessionInfo.deviceId,
+            ownUserId: sessionInfo.userId,
+            logger: this._platform.logger,
+            turnServers: [{
+                urls: ["stun:turn.matrix.org"],
+            }],
+            forceTURN: false,
+        });
+        this._deviceMessageHandler = new DeviceMessageHandler({storage, callHandler: this._callHandler});
        this._olm = olm;
        this._olmUtil = null;
        this._e2eeAccount = null;
@ -118,6 +146,10 @@ export class Session {
        return this._sessionInfo.userId;
    }

+    get callHandler() {
+        return this._callHandler;
+    }
+
    // called once this._e2eeAccount is assigned
    _setupEncryption() {
        // TODO: this should all go in a wrapper in e2ee/ that is bootstrapped by passing in the account
@ -562,7 +594,8 @@ export class Session {
            pendingEvents,
            user: this._user,
            createRoomEncryption: this._createRoomEncryption,
-            platform: this._platform
+            platform: this._platform,
+            callHandler: this._callHandler
        });
    }

@ -983,9 +1016,18 @@ export function tests() {

    return {
        "session data is not modified until after sync": async (assert) => {
-            const session = new Session({storage: createStorageMock({
+            const storage = createStorageMock({
                sync: {token: "a", filterId: 5}
-            }), sessionInfo: {userId: ""}});
+            });
+            const session = new Session({
+                storage,
+                sessionInfo: {userId: ""},
+                platform: {
+                    clock: {
+                        createTimeout: () => undefined
+                    }
+                }
+            });
            await session.load();
            let syncSet = false;
            const syncTxn = {
--- a/src/matrix/Sync.js
+++ b/src/matrix/Sync.js
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ObservableValue} from "../observable/ObservableValue";
+import {ObservableValue} from "../observable/value/ObservableValue";
 import {createEnum} from "../utils/enum";

 const INCREMENTAL_TIMEOUT = 30000;
@ -224,6 +224,7 @@ export class Sync {
    _openPrepareSyncTxn() {
        const storeNames = this._storage.storeNames;
        return this._storage.readTxn([
+            storeNames.deviceIdentities, // to read device from olm messages
            storeNames.olmSessions,
            storeNames.inboundGroupSessions,
            // to read fragments when loading sync writer when rejoining archived room
@ -343,6 +344,7 @@ export class Sync {
            // to decrypt and store new room keys
            storeNames.olmSessions,
            storeNames.inboundGroupSessions,
+            storeNames.calls,
        ]);
    }
    
--- a/src/matrix/calls/CallHandler.ts
+++ b/src/matrix/calls/CallHandler.ts
@ -0,0 +1,224 @@
+/*
+Copyright 2022 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 {ObservableMap} from "../../observable/map/ObservableMap";
+import {WebRTC, PeerConnection} from "../../platform/types/WebRTC";
+import {MediaDevices, Track} from "../../platform/types/MediaDevices";
+import {handlesEventType} from "./PeerCall";
+import {EventType, CallIntent} from "./callEventTypes";
+import {GroupCall} from "./group/GroupCall";
+import {makeId} from "../common";
+import {CALL_LOG_TYPE} from "./common";
+
+import type {LocalMedia} from "./LocalMedia";
+import type {Room} from "../room/Room";
+import type {MemberChange} from "../room/members/RoomMember";
+import type {StateEvent} from "../storage/types";
+import type {ILogItem, ILogger} from "../../logging/types";
+import type {Platform} from "../../platform/web/Platform";
+import type {BaseObservableMap} from "../../observable/map/BaseObservableMap";
+import type {SignallingMessage, MGroupCallBase} from "./callEventTypes";
+import type {Options as GroupCallOptions} from "./group/GroupCall";
+import type {Transaction} from "../storage/idb/Transaction";
+import type {CallEntry} from "../storage/idb/stores/CallStore";
+import type {Clock} from "../../platform/web/dom/Clock";
+
+export type Options = Omit<GroupCallOptions, "emitUpdate" | "createTimeout"> & {
+    clock: Clock
+};
+
+export class CallHandler {
+    // group calls by call id
+    private readonly _calls: ObservableMap<string, GroupCall> = new ObservableMap<string, GroupCall>();
+    // map of userId to set of conf_id's they are in
+    private memberToCallIds: Map<string, Set<string>> = new Map();
+    private groupCallOptions: GroupCallOptions;
+    private sessionId = makeId("s");
+
+    constructor(private readonly options: Options) {
+        this.groupCallOptions = Object.assign({}, this.options, {
+            emitUpdate: (groupCall, params) => this._calls.update(groupCall.id, params),
+            createTimeout: this.options.clock.createTimeout,
+            sessionId: this.sessionId
+        });
+    }
+
+    async loadCalls(intent: CallIntent = CallIntent.Ring) {
+        const txn = await this._getLoadTxn();
+        const callEntries = await txn.calls.getByIntent(intent);
+        this._loadCallEntries(callEntries, txn);
+    }
+
+    async loadCallsForRoom(intent: CallIntent, roomId: string) {
+        const txn = await this._getLoadTxn();
+        const callEntries = await txn.calls.getByIntentAndRoom(intent, roomId);
+        this._loadCallEntries(callEntries, txn);
+    }
+
+    private async _getLoadTxn(): Promise<Transaction> {
+        const names = this.options.storage.storeNames;
+        const txn = await this.options.storage.readTxn([
+            names.calls,
+            names.roomState
+        ]);
+        return txn;
+    }
+
+    private async _loadCallEntries(callEntries: CallEntry[], txn: Transaction): Promise<void> {
+        return this.options.logger.run({l: "loading calls", t: CALL_LOG_TYPE}, async log => {
+            log.set("entries", callEntries.length);
+            await Promise.all(callEntries.map(async callEntry => {
+                if (this._calls.get(callEntry.callId)) {
+                    return;
+                }
+                const event = await txn.roomState.get(callEntry.roomId, EventType.GroupCall, callEntry.callId);
+                if (event) {
+                    const call = new GroupCall(event.event.state_key, false, event.event.content, event.roomId, this.groupCallOptions);
+                    this._calls.set(call.id, call);
+                }
+            }));
+            const roomIds = Array.from(new Set(callEntries.map(e => e.roomId)));
+            await Promise.all(roomIds.map(async roomId => {
+                // const ownCallsMemberEvent = await txn.roomState.get(roomId, EventType.GroupCallMember, this.options.ownUserId);
+                // if (ownCallsMemberEvent) {
+                //     this.handleCallMemberEvent(ownCallsMemberEvent.event, log);
+                // }
+                const callsMemberEvents = await txn.roomState.getAllForType(roomId, EventType.GroupCallMember);
+                for (const entry of callsMemberEvents) {
+                    this.handleCallMemberEvent(entry.event, log);
+                }
+                // TODO: we should be loading the other members as well at some point
+            }));
+            log.set("newSize", this._calls.size);
+        });
+    }
+
+    async createCall(roomId: string, type: "m.video" | "m.voice", name: string, intent: CallIntent = CallIntent.Ring): Promise<GroupCall> {
+        const call = new GroupCall(makeId("conf-"), true, { 
+            "m.name": name,
+            "m.intent": intent
+        }, roomId, this.groupCallOptions);
+        this._calls.set(call.id, call);
+
+        try {
+            await call.create(type);
+            // store call info so it will ring again when reopening the app
+            const txn = await this.options.storage.readWriteTxn([this.options.storage.storeNames.calls]);
+            txn.calls.add({
+                intent: call.intent,
+                callId: call.id,
+                timestamp: this.options.clock.now(),
+                roomId: roomId
+            });
+            await txn.complete();
+        } catch (err) {
+            //if (err.name === "ConnectionError") {
+                // if we're offline, give up and remove the call again
+                this._calls.remove(call.id);
+            //}
+            throw err;
+        }
+        return call;
+    }
+
+    get calls(): BaseObservableMap<string, GroupCall> { return this._calls; }
+
+    // TODO: check and poll turn server credentials here
+
+    /** @internal */
+    handleRoomState(room: Room, events: StateEvent[], txn: Transaction, log: ILogItem) {
+        // first update call events
+        for (const event of events) {
+            if (event.type === EventType.GroupCall) {
+                this.handleCallEvent(event, room.id, txn, log);
+            }
+        }
+        // then update members
+        for (const event of events) {
+            if (event.type === EventType.GroupCallMember) {
+                this.handleCallMemberEvent(event, log);
+            }
+        }
+    }
+
+    /** @internal */
+    updateRoomMembers(room: Room, memberChanges: Map<string, MemberChange>) {
+        // TODO: also have map for roomId to calls, so we can easily update members
+        // we will also need this to get the call for a room
+    }
+
+    /** @internal */
+    handlesDeviceMessageEventType(eventType: string): boolean {
+        return handlesEventType(eventType);
+    }
+
+    /** @internal */
+    handleDeviceMessage(message: SignallingMessage<MGroupCallBase>, userId: string, deviceId: string, log: ILogItem) {
+        // TODO: buffer messages for calls we haven't received the state event for yet?
+        const call = this._calls.get(message.content.conf_id);
+        call?.handleDeviceMessage(message, userId, deviceId, log);
+    }
+
+    private handleCallEvent(event: StateEvent, roomId: string, txn: Transaction, log: ILogItem) {
+        const callId = event.state_key;
+        let call = this._calls.get(callId);
+        if (call) {
+            call.updateCallEvent(event.content, log);
+            if (call.isTerminated) {
+                call.disconnect(log);
+                this._calls.remove(call.id);
+                txn.calls.remove(call.intent, roomId, call.id);
+            }
+        } else {
+            call = new GroupCall(event.state_key, false, event.content, roomId, this.groupCallOptions);
+            this._calls.set(call.id, call);
+            txn.calls.add({
+                intent: call.intent,
+                callId: call.id,
+                timestamp: event.origin_server_ts,
+                roomId: roomId
+            });
+        }
+    }
+
+    private handleCallMemberEvent(event: StateEvent, log: ILogItem) {
+        const userId = event.state_key;
+        const calls = event.content["m.calls"] ?? [];
+        for (const call of calls) {
+            const callId = call["m.call_id"];
+            const groupCall = this._calls.get(callId);
+            // TODO: also check the member when receiving the m.call event
+            groupCall?.updateMembership(userId, call, log);
+        };
+        const newCallIdsMemberOf = new Set<string>(calls.map(call => call["m.call_id"]));
+        let previousCallIdsMemberOf = this.memberToCallIds.get(userId);
+        // remove user as member of any calls not present anymore
+        if (previousCallIdsMemberOf) {
+            for (const previousCallId of previousCallIdsMemberOf) {
+                if (!newCallIdsMemberOf.has(previousCallId)) {
+                    const groupCall = this._calls.get(previousCallId);
+                    groupCall?.removeMembership(userId, log);
+                }
+            }
+        }
+        if (newCallIdsMemberOf.size === 0) {
+            this.memberToCallIds.delete(userId);
+        } else {
+            this.memberToCallIds.set(userId, newCallIdsMemberOf);
+        }
+    }
+}
+
--- a/src/matrix/calls/LocalMedia.ts
+++ b/src/matrix/calls/LocalMedia.ts
@ -0,0 +1,81 @@
+/*
+Copyright 2022 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 {SDPStreamMetadataPurpose} from "./callEventTypes";
+import {Stream} from "../../platform/types/MediaDevices";
+import {SDPStreamMetadata} from "./callEventTypes";
+import {getStreamVideoTrack, getStreamAudioTrack} from "./common";
+
+export class LocalMedia {
+    constructor(
+        public readonly userMedia?: Stream,
+        public readonly screenShare?: Stream,
+        public readonly dataChannelOptions?: RTCDataChannelInit,
+    ) {}
+
+    withUserMedia(stream: Stream) {
+        return new LocalMedia(stream, this.screenShare, this.dataChannelOptions);
+    }
+
+    withScreenShare(stream: Stream) {
+        return new LocalMedia(this.userMedia, stream, this.dataChannelOptions);
+    }
+
+    withDataChannel(options: RTCDataChannelInit): LocalMedia {
+        return new LocalMedia(this.userMedia, this.screenShare, options);
+    }
+
+    /** @internal */
+    replaceClone(oldClone: LocalMedia | undefined, oldOriginal: LocalMedia | undefined): LocalMedia {
+        let userMedia;
+        let screenShare;
+        const cloneOrAdoptStream = (oldOriginalStream: Stream | undefined, oldCloneStream: Stream | undefined, newStream: Stream | undefined): Stream | undefined => {
+            let stream;
+            if (oldOriginalStream?.id === newStream?.id) {
+                stream = oldCloneStream;
+            } else {
+                stream = newStream?.clone();
+                getStreamAudioTrack(oldCloneStream)?.stop();
+                getStreamVideoTrack(oldCloneStream)?.stop();
+            }
+            return stream;
+        }
+        return new LocalMedia(
+            cloneOrAdoptStream(oldOriginal?.userMedia, oldClone?.userMedia, this.userMedia),
+            cloneOrAdoptStream(oldOriginal?.screenShare, oldClone?.screenShare, this.screenShare),
+            this.dataChannelOptions
+        );
+    }
+
+    /** @internal */
+    clone(): LocalMedia {
+        return new LocalMedia(this.userMedia?.clone(),this.screenShare?.clone(), this.dataChannelOptions);
+    }
+    
+    dispose() {
+        this.stopExcept(undefined);
+    }
+
+    stopExcept(newMedia: LocalMedia | undefined) {
+        if(newMedia?.userMedia?.id !== this.userMedia?.id) {
+            getStreamAudioTrack(this.userMedia)?.stop();
+            getStreamVideoTrack(this.userMedia)?.stop();
+        }
+        if(newMedia?.screenShare?.id !== this.screenShare?.id) {
+            getStreamVideoTrack(this.screenShare)?.stop();
+        }
+    }
+}
--- a/src/matrix/calls/PeerCall.ts
+++ b/src/matrix/calls/PeerCall.ts
--- a/src/matrix/calls/TODO.md
+++ b/src/matrix/calls/TODO.md
@ -0,0 +1,225 @@
+ - relevant MSCs next to spec:
+  - https://github.com/matrix-org/matrix-doc/pull/2746 Improved Signalling for 1:1 VoIP
+  - https://github.com/matrix-org/matrix-doc/pull/2747 Transferring VoIP Calls
+  - https://github.com/matrix-org/matrix-doc/pull/3077 Support for multi-stream VoIP
+  - https://github.com/matrix-org/matrix-doc/pull/3086 Asserted identity on VoIP calls
+  - https://github.com/matrix-org/matrix-doc/pull/3291 Muting in VoIP calls
+  - https://github.com/matrix-org/matrix-doc/pull/3401 Native Group VoIP Signalling
+
+
+## TODO
+ - DONE: implement receiving hangup
+ - DONE: implement cloning the localMedia so it works in safari?
+ - DONE: implement 3 retries per peer
+ - DONE: implement muting tracks with m.call.sdp_stream_metadata_changed
+ - DONE: implement renegotiation
+ - DONE: finish session id support
+    - call peers are essentially identified by (userid, deviceid, sessionid). If see a new session id, we first disconnect from the current member so we're ready to connect with a clean slate again (in a member event, also in to_device? no harm I suppose, given olm encryption ensures you can't spoof the deviceid).
+ - DONE: making logging better
+ - figure out why sometimes leave button does not work
+ - get correct members and avatars in call
+ - improve UI while in a call
+    - allow toggling audio
+    - support active speaker, sort speakers by last active
+    - close muted media stream after a while
+    - support highlight mode where we show active speaker and thumbnails for other participants
+    - better grid mode:
+        - we report the call view size to the view model with ResizeObserver, we calculate the A/R
+        - we calculate the grid based on view A/R, taking into account minimal stream size
+    - show name on stream view
+ - when you start a call, or join one, first you go to a SelectCallMedia screen where you can pick whether you want to use camera, audio or both:
+    - if you are joining a call, we'll default to the call intent
+    - if you are creating a call, we'll default to video
+    - when creating a call, adjust the navigation path to room/room_id/call
+    - when selecting a call, adjust the navigation path to room/room_id/call/call_id
+ - implement to_device messages arriving before m.call(.member) state event
+    - DONE for m.call.member, not for m.call and not for to_device other than m.call.invite arriving before invite
+ - reeable crypto & implement fetching olm keys before sending encrypted signalling message
+ - local echo for join/leave buttons?
+ - batch outgoing to_device messages in one request to homeserver for operations that will send out an event to all participants (e.g. mute)
+ - implement call ringing and rejecting a ringing call
+ - support screen sharing
+    - add button to enable, disable
+    - support showing stream view with large screen share video element and small camera video element (if present)
+ - don't load all members when loading calls to know whether they are ringing and joined by ourself
+    - only load our own member once, then have a way to load additional members on a call.
+ - see if we remove partyId entirely, it is only used for detecting remote echo which is not an issue for group calls? see https://github.com/matrix-org/matrix-spec-proposals/blob/dbkr/msc2746/proposals/2746-reliable-voip.md#add-party_id-to-all-voip-events
+ - remove PeerCall.waitForState ?
+ - invite glare is completely untested, does it work?
+ - how to remove call from m.call.member when just closing client?
+    - when closing client and still in call, tell service worker to send event on our behalf?
+        ```js
+            // dispose when leaving call
+            this.track(platform.registerExitHandler(unloadActions => {
+                // batch requests will resolve immediately,
+                // so we can reuse the same send code that does awaits without awaiting?
+                const batch = new RequestBatch();
+                const hsApi = this.hsApi.withBatch(batch);
+                // _leaveCallMemberContent will need to become sync,
+                // so we'll need to keep track of own member event rather than rely on storage
+                hsApi.sendStateEvent("m.call.member", this._leaveCallMemberContent());
+                // does this internally: serviceWorkerHandler.trySend("sendRequestBatch", batch.toJSON());
+                unloadActions.sendRequestBatch(batch);
+            }));
+        ```
+## TODO (old)
+ - DONE: PeerCall
+    - send invite
+    - implement terminate
+    - implement waitForState
+    
+        - find out if we need to do something different when renegotation is triggered (a subsequent onnegotiationneeded event) whether
+          we sent the invite/offer or answer. e.g. do we always do createOffer/setLocalDescription and then send it over a matrix negotiation event? even if we before called createAnswer.
+    - handle receiving offer and send anwser
+    - handle sending ice candidates
+        - handle ice candidates finished (iceGatheringState === 'complete')
+    - handle receiving ice candidates
+    - handle sending renegotiation
+    - handle receiving renegotiation
+    - reject call
+    - hangup call
+    - handle muting tracks
+    - handle remote track being muted
+    - handle adding/removing tracks to an ongoing call
+    - handle sdp metadata
+ - DONE: Participant
+    - handle glare
+    - encrypt to_device message with olm
+    - batch outgoing to_device messages in one request to homeserver for operations that will send out an event to all participants (e.g. mute)
+    - find out if we should start muted or not?
+
+## Store ongoing calls
+
+DONE: Add store with all ongoing calls so when we quit and start again, we don't have to go through all the past calls to know which ones might still be ongoing.
+
+
+## Notes
+
+we send m.call as state event in room
+
+we add m.call.participant for our own device
+
+we wait for other participants to add their user and device (in the sources)
+
+for each (userid, deviceid)
+    - if userId < ourUserId
+        - get local media
+        - we setup a peer connection
+        - add local tracks
+        - we wait for negotation event to get sdp
+        - peerConn.createOffer
+        - peerConn.setLocalDescription
+        - we send an m.call.invite 
+    - else
+        - wait for invite from other side
+
+on local ice candidate:
+    - if we haven't ... sent invite yet? or received answer? buffer candidate
+    - otherwise send candidate (without buffering?)
+
+on incoming call:
+    - ring, offer to answer
+
+answering incoming call
+    - get local media
+    - peerConn.setRemoteDescription
+    - add local tracks to peerConn
+    - peerConn.createAnswer()
+    - peerConn.setLocalDescription
+
+in some cases, we will actually send the invite to all devices (e.g. SFU), so
+we probably still need to handle multiple anwsers?
+
+so we would send an invite to multiple devices and pick the one for which we
+received the anwser first. between invite and anwser, we could already receive
+ice candidates that we need to buffer.
+
+
+
+updating the metadata:
+
+if we're renegotiating: use m.call.negotatie
+if just muting: use m.call.sdp_stream_metadata_changed
+
+
+party identification
+ - for 1:1 calls, we identify with a party_id
+ - for group calls, we identify with a device_id
+
+
+
+
+## TODO
+
+Build basic version of PeerCall
+    - add candidates code
+DONE: Build basic version of GroupCall
+    - DONE: add state, block invalid actions
+DONE: Make it possible to olm encrypt the messages
+Do work needed for state events
+    - DONEish: receiving (almost done?)
+    - DONEish: sending
+logging
+DONE: Expose call objects
+    expose volume events from audiotrack to group call
+DONE: Write view model
+DONE: write view
+ - handle glare edge-cases (not yet sent): https://spec.matrix.org/latest/client-server-api/#glare
+
+## Calls questions
+ - how do we handle glare between group calls (e.g. different state events with different call ids?)
+ - Split up DOM part into platform code? What abstractions to choose?
+   Does it make sense to come up with our own API very similar to DOM api?
+ - what code do we copy over vs what do we implement ourselves?
+    - MatrixCall: perhaps we can copy it over and modify it to our needs? Seems to have a lot of edge cases implemented.
+        - what is partyId about?
+    - CallFeed: I need better understand where it is used. It's basically a wrapper around a MediaStream with volume detection. Could it make sense to put this in platform for example?
+ 
+ - which parts of MSC2746 are still relevant for group calls?
+ - which parts of MSC2747 are still relevant for group calls? it seems mostly orthogonal?
+ - SOLVED: how does switching channels work? This was only enabled by MSC 2746
+    - you do getUserMedia()/getDisplayMedia() to get the stream(s)
+    - you call removeTrack/addTrack on the peerConnection
+    - you receive a negotiationneeded event
+    - you call createOffer
+    - you send m.call.negotiate
+ - SOLVED: wrt to MSC2746, is the screen share track and the audio track (and video track) part of the same stream? or do screen share tracks need to go in a different stream? it sounds incompatible with the MSC2746 requirement.
+ - SOLVED: how does muting work? MediaStreamTrack.enabled
+ - SOLVED: so, what's the difference between the call_id and the conf_id in group call events?
+    - call_id is the specific 1:1 call, conf_id is the thing in the m.call state event key
+    - so a group call has a conf_id with MxN peer calls, each having their call_id.
+
+I think we need to synchronize the negotiation needed because we don't use a CallState to guard it...
+
+## Thursday 3-3 notes
+
+we probably best keep the perfect negotiation flags, as they are needed for both starting the call AND renegotiation? if only for the former, it would make sense as it is a step in setting up the call, but if the call is ongoing, does it make sense to have a MakingOffer state? it actually looks like they are only needed for renegotiation! for call setup we compare the call_ids. What does that mean for these flags?
+
+
+## Peer call state transitions
+
+FROM CALLER                                         FROM CALLEE
+
+Fledgling                                           Fledgling
+ V `call()`                                          V `handleInvite()`: setRemoteDescription(event.offer), add buffered candidates
+ V                                                  Ringing
+ V                                                   V `answer()`
+CreateOffer                                          V
+ V add local tracks                                  V
+ V wait for negotionneeded events                    V add local tracks
+ V setLocalDescription()                            CreateAnswer
+ V send invite event                                 V setLocalDescription(createAnswer())
+InviteSent                                           |
+ V receive anwser, setRemoteDescription()            |
+ \___________________________________________________/
+                             V
+                            Connecting
+                             V receive ice candidates and iceConnectionState becomes 'connected'
+                            Connected
+                             V `hangup()` or some terminate condition
+                            Ended
+
+so if we don't want to bother with having two call objects, we can make the existing call hangup his old call_id? That way we keep the old peerConnection.
+
+
+when glare, won't we drop both calls? No: https://github.com/matrix-org/matrix-spec-proposals/pull/2746#discussion_r819388754
--- a/src/matrix/calls/callEventTypes.ts
+++ b/src/matrix/calls/callEventTypes.ts
@ -0,0 +1,227 @@
+// allow non-camelcase as these are events type that go onto the wire
+/* eslint-disable camelcase */
+import type {StateEvent} from "../storage/types";
+import type {SessionDescription} from "../../platform/types/WebRTC";
+export enum EventType {
+    GroupCall = "org.matrix.msc3401.call",
+    GroupCallMember = "org.matrix.msc3401.call.member",
+    Invite = "m.call.invite",
+    Candidates = "m.call.candidates",
+    Answer = "m.call.answer",
+    Hangup = "m.call.hangup",
+    Reject = "m.call.reject",
+    SelectAnswer = "m.call.select_answer",
+    Negotiate = "m.call.negotiate",
+    SDPStreamMetadataChanged = "m.call.sdp_stream_metadata_changed",
+    SDPStreamMetadataChangedPrefix = "org.matrix.call.sdp_stream_metadata_changed",
+    Replaces = "m.call.replaces",
+    AssertedIdentity = "m.call.asserted_identity",
+    AssertedIdentityPrefix = "org.matrix.call.asserted_identity",
+}
+
+// TODO: Change to "sdp_stream_metadata" when MSC3077 is merged
+export const SDPStreamMetadataKey = "org.matrix.msc3077.sdp_stream_metadata";
+
+export interface CallDeviceMembership {
+    device_id: string,
+    session_id: string
+}
+
+export interface CallMembership {
+    ["m.call_id"]: string,
+    ["m.devices"]: CallDeviceMembership[]
+}
+
+export interface CallMemberContent {
+    ["m.calls"]: CallMembership[];
+}
+
+export enum SDPStreamMetadataPurpose {
+    Usermedia = "m.usermedia",
+    Screenshare = "m.screenshare",
+}
+
+export interface SDPStreamMetadataObject {
+    purpose: SDPStreamMetadataPurpose;
+    audio_muted: boolean;
+    video_muted: boolean;
+}
+
+export interface SDPStreamMetadata {
+    [key: string]: SDPStreamMetadataObject;
+}
+
+export interface CallCapabilities {
+    'm.call.transferee': boolean;
+    'm.call.dtmf': boolean;
+}
+
+export interface CallReplacesTarget {
+    id: string;
+    display_name: string;
+    avatar_url: string;
+}
+
+export type MCallBase = {
+    call_id: string;
+    version: string | number;
+    seq: number;
+}
+
+export type MGroupCallBase = MCallBase & {
+    conf_id: string;
+    device_id: string;
+    sender_session_id: string;
+    dest_session_id: string;
+    party_id: string; // Should not need this?
+} 
+
+export type MCallAnswer<Base extends MCallBase> = Base & {
+    answer: SessionDescription;
+    capabilities?: CallCapabilities;
+    [SDPStreamMetadataKey]: SDPStreamMetadata;
+}
+
+export type MCallSelectAnswer<Base extends MCallBase> = Base & {
+    selected_party_id: string;
+}
+
+export type MCallInvite<Base extends MCallBase> = Base & {
+    offer: SessionDescription;
+    lifetime: number;
+    [SDPStreamMetadataKey]: SDPStreamMetadata;
+}
+
+export type MCallNegotiate<Base extends MCallBase> = Base & {
+    description: SessionDescription;
+    lifetime: number;
+    [SDPStreamMetadataKey]: SDPStreamMetadata;
+}
+
+export type MCallSDPStreamMetadataChanged<Base extends MCallBase> = Base & {
+    [SDPStreamMetadataKey]: SDPStreamMetadata;
+}
+
+export type MCallReplacesEvent<Base extends MCallBase> = Base & {
+    replacement_id: string;
+    target_user: CallReplacesTarget;
+    create_call: string;
+    await_call: string;
+    target_room: string;
+}
+
+export type MCAllAssertedIdentity<Base extends MCallBase> = Base & {
+    asserted_identity: {
+        id: string;
+        display_name: string;
+        avatar_url: string;
+    };
+}
+
+export type MCallCandidates<Base extends MCallBase> = Base & {
+    candidates: RTCIceCandidate[];
+}
+
+export type MCallHangupReject<Base extends MCallBase> = Base & {
+    reason?: CallErrorCode;
+}
+
+export enum CallErrorCode {
+    /** The user chose to end the call */
+    UserHangup = 'user_hangup',
+
+    /** An error code when the local client failed to create an offer. */
+    LocalOfferFailed = 'local_offer_failed',
+    /**
+     * An error code when there is no local mic/camera to use. This may be because
+     * the hardware isn't plugged in, or the user has explicitly denied access.
+     */
+    NoUserMedia = 'no_user_media',
+
+    /**
+     * Error code used when a call event failed to send
+     * because unknown devices were present in the room
+     */
+    UnknownDevices = 'unknown_devices',
+
+    /**
+     * Error code used when we fail to send the invite
+     * for some reason other than there being unknown devices
+     */
+    SendInvite = 'send_invite',
+
+    /**
+     * An answer could not be created
+     */
+    CreateAnswer = 'create_answer',
+
+    /**
+     * Error code used when we fail to send the answer
+     * for some reason other than there being unknown devices
+     */
+    SendAnswer = 'send_answer',
+
+    /**
+     * The session description from the other side could not be set
+     */
+    SetRemoteDescription = 'set_remote_description',
+
+    /**
+     * The session description from this side could not be set
+     */
+    SetLocalDescription = 'set_local_description',
+
+    /**
+     * A different device answered the call
+     */
+    AnsweredElsewhere = 'answered_elsewhere',
+
+    /**
+     * No media connection could be established to the other party
+     */
+    IceFailed = 'ice_failed',
+
+    /**
+     * The invite timed out whilst waiting for an answer
+     */
+    InviteTimeout = 'invite_timeout',
+
+    /**
+     * The call was replaced by another call
+     */
+    Replaced = 'replaced',
+
+    /**
+     * Signalling for the call could not be sent (other than the initial invite)
+     */
+    SignallingFailed = 'signalling_timeout',
+
+    /**
+     * The remote party is busy
+     */
+    UserBusy = 'user_busy',
+
+    /**
+     * We transferred the call off to somewhere else
+     */
+    Transfered = 'transferred',
+
+    /**
+     * A call from the same user was found with a new session id
+     */
+    NewSession = 'new_session',
+}
+
+export type SignallingMessage<Base extends MCallBase> =
+    {type: EventType.Invite, content: MCallInvite<Base>} |
+    {type: EventType.Negotiate, content: MCallNegotiate<Base>} |
+    {type: EventType.Answer, content: MCallAnswer<Base>} |
+    {type: EventType.SDPStreamMetadataChanged | EventType.SDPStreamMetadataChangedPrefix, content: MCallSDPStreamMetadataChanged<Base>} |
+    {type: EventType.Candidates, content: MCallCandidates<Base>} |
+    {type: EventType.Hangup | EventType.Reject, content: MCallHangupReject<Base>};
+
+export enum CallIntent {
+    Ring = "m.ring",
+    Prompt = "m.prompt",
+    Room = "m.room",
+};
--- a/src/matrix/calls/common.ts
+++ b/src/matrix/calls/common.ts
@ -0,0 +1,39 @@
+/*
+Copyright 2022 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 type {Track, Stream} from "../../platform/types/MediaDevices";
+
+export function getStreamAudioTrack(stream: Stream | undefined): Track | undefined {
+    return stream?.getAudioTracks()[0];
+}
+
+export function getStreamVideoTrack(stream: Stream | undefined): Track | undefined {
+    return stream?.getVideoTracks()[0];
+}
+
+export class MuteSettings {
+    constructor (public readonly microphone: boolean = false, public readonly camera: boolean = false) {}
+
+    toggleCamera(): MuteSettings {
+        return new MuteSettings(this.microphone, !this.camera);
+    }
+
+    toggleMicrophone(): MuteSettings {
+        return new MuteSettings(!this.microphone, this.camera);
+    }
+}
+
+export const CALL_LOG_TYPE = "call";
--- a/src/matrix/calls/group/GroupCall.ts
+++ b/src/matrix/calls/group/GroupCall.ts
@ -0,0 +1,494 @@
+/*
+Copyright 2022 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 {ObservableMap} from "../../../observable/map/ObservableMap";
+import {Member} from "./Member";
+import {LocalMedia} from "../LocalMedia";
+import {MuteSettings, CALL_LOG_TYPE} from "../common";
+import {RoomMember} from "../../room/members/RoomMember";
+import {EventEmitter} from "../../../utils/EventEmitter";
+import {EventType, CallIntent} from "../callEventTypes";
+
+import type {Options as MemberOptions} from "./Member";
+import type {BaseObservableMap} from "../../../observable/map/BaseObservableMap";
+import type {Track} from "../../../platform/types/MediaDevices";
+import type {SignallingMessage, MGroupCallBase, CallMembership} from "../callEventTypes";
+import type {Room} from "../../room/Room";
+import type {StateEvent} from "../../storage/types";
+import type {Platform} from "../../../platform/web/Platform";
+import type {EncryptedMessage} from "../../e2ee/olm/Encryption";
+import type {ILogItem, ILogger} from "../../../logging/types";
+import type {Storage} from "../../storage/idb/Storage";
+
+export enum GroupCallState {
+    Fledgling = "fledgling",
+    Creating = "creating",
+    Created = "created",
+    Joining = "joining",
+    Joined = "joined",
+}
+
+function getMemberKey(userId: string, deviceId: string) {
+    return JSON.stringify(userId)+`,`+JSON.stringify(deviceId);
+}
+
+function memberKeyIsForUser(key: string, userId: string) {
+    return key.startsWith(JSON.stringify(userId)+`,`);
+}
+
+function getDeviceFromMemberKey(key: string): string {
+    return JSON.parse(`[${key}]`)[1];
+}
+
+export type Options = Omit<MemberOptions, "emitUpdate" | "confId" | "encryptDeviceMessage"> & {
+    emitUpdate: (call: GroupCall, params?: any) => void;
+    encryptDeviceMessage: (roomId: string, userId: string, message: SignallingMessage<MGroupCallBase>, log: ILogItem) => Promise<EncryptedMessage>,
+    storage: Storage,
+    logger: ILogger,
+};
+
+class JoinedData {
+    constructor(
+        public readonly logItem: ILogItem,
+        public readonly membersLogItem: ILogItem,
+        public localMedia: LocalMedia,
+        public localMuteSettings: MuteSettings
+    ) {}
+
+    dispose() {
+        this.localMedia.dispose();
+        this.logItem.finish();
+    }
+}
+
+export class GroupCall extends EventEmitter<{change: never}> {
+    private readonly _members: ObservableMap<string, Member> = new ObservableMap();
+    private _memberOptions: MemberOptions;
+    private _state: GroupCallState;
+    private bufferedDeviceMessages = new Map<string, Set<SignallingMessage<MGroupCallBase>>>();
+    private joinedData?: JoinedData;
+
+    constructor(
+        public readonly id: string,
+        newCall: boolean,
+        private callContent: Record<string, any>,
+        public readonly roomId: string,
+        private readonly options: Options,
+    ) {
+        super();
+        this._state = newCall ? GroupCallState.Fledgling : GroupCallState.Created;
+        this._memberOptions = Object.assign({}, options, {
+            confId: this.id,
+            emitUpdate: member => this._members.update(getMemberKey(member.userId, member.deviceId), member),
+            encryptDeviceMessage: (userId: string, message: SignallingMessage<MGroupCallBase>, log) => {
+                return this.options.encryptDeviceMessage(this.roomId, userId, message, log);
+            }
+        });
+    }
+
+    get localMedia(): LocalMedia | undefined { return this.joinedData?.localMedia; }
+    get members(): BaseObservableMap<string, Member> { return this._members; }
+
+    get isTerminated(): boolean {
+        return this.callContent?.["m.terminated"] === true;
+    }
+
+    get isRinging(): boolean {
+        return this._state === GroupCallState.Created && this.intent === "m.ring" && !this.isMember(this.options.ownUserId);
+    }
+
+    get name(): string {
+        return this.callContent?.["m.name"];
+    }
+
+    get intent(): CallIntent {
+        return this.callContent?.["m.intent"];
+    }
+
+    /**
+     * Gives access the log item for this call while joined.
+     * Can be used for call diagnostics while in the call.
+     **/
+    get logItem(): ILogItem | undefined {
+        return this.joinedData?.logItem;
+    }
+
+    async join(localMedia: LocalMedia): Promise<void> {
+        if (this._state !== GroupCallState.Created || this.joinedData) {
+            return;
+        }
+        const logItem = this.options.logger.child({
+            l: "answer call",
+            t: CALL_LOG_TYPE,
+            id: this.id,
+            ownSessionId: this.options.sessionId
+        });
+        const membersLogItem = logItem.child("member connections");
+        const joinedData = new JoinedData(
+            logItem,
+            membersLogItem,
+            localMedia,
+            new MuteSettings()
+        );
+        this.joinedData = joinedData;
+        await joinedData.logItem.wrap("join", async log => {
+            this._state = GroupCallState.Joining;
+            this.emitChange();
+            const memberContent = await this._createJoinPayload();
+            // send m.call.member state event
+            const request = this.options.hsApi.sendState(this.roomId, EventType.GroupCallMember, this.options.ownUserId, memberContent, {log});
+            await request.response();
+            this.emitChange();
+            // send invite to all members that are < my userId
+            for (const [,member] of this._members) {
+                this.connectToMember(member, joinedData, log);
+            }
+        });
+    }
+
+    async setMedia(localMedia: LocalMedia): Promise<void> {
+        if ((this._state === GroupCallState.Joining || this._state === GroupCallState.Joined) && this.joinedData) {
+            const oldMedia = this.joinedData.localMedia;
+            this.joinedData.localMedia = localMedia;
+            await Promise.all(Array.from(this._members.values()).map(m => {
+                return m.setMedia(localMedia, oldMedia);
+            }));
+            oldMedia?.stopExcept(localMedia);
+        }
+    }
+
+    async setMuted(muteSettings: MuteSettings): Promise<void> {
+        const {joinedData} = this;
+        if (!joinedData) {
+            return;
+        }
+        joinedData.localMuteSettings = muteSettings;
+        await Promise.all(Array.from(this._members.values()).map(m => {
+            return m.setMuted(joinedData.localMuteSettings);
+        }));
+        this.emitChange();
+    }
+
+    get muteSettings(): MuteSettings | undefined {
+        return this.joinedData?.localMuteSettings;
+    }
+
+    get hasJoined() {
+        return this._state === GroupCallState.Joining || this._state === GroupCallState.Joined;
+    }
+
+    async leave(): Promise<void> {
+        const {joinedData} = this;
+        if (!joinedData) {
+            return;
+        }
+        await joinedData.logItem.wrap("leave", async log => {
+            try {
+                const memberContent = await this._leaveCallMemberContent();
+                // send m.call.member state event
+                if (memberContent) {
+                    const request = this.options.hsApi.sendState(this.roomId, EventType.GroupCallMember, this.options.ownUserId, memberContent, {log});
+                    await request.response();
+                    // our own user isn't included in members, so not in the count
+                    if (this.intent === CallIntent.Ring && this._members.size === 0) {
+                        await this.terminate(log);
+                    }
+                } else {
+                    log.set("already_left", true);
+                }
+            } finally {
+                this.disconnect(log);
+            }
+        });
+    }
+
+    terminate(log?: ILogItem): Promise<void> {
+        return this.options.logger.wrapOrRun(log, {l: "terminate call", t: CALL_LOG_TYPE}, async log => {
+            if (this._state === GroupCallState.Fledgling) {
+                return;
+            }
+            const request = this.options.hsApi.sendState(this.roomId, EventType.GroupCall, this.id, Object.assign({}, this.callContent, {
+                "m.terminated": true
+            }), {log});
+            await request.response();
+        });
+    }
+
+    /** @internal */
+    create(type: "m.video" | "m.voice", log?: ILogItem): Promise<void> {
+        return this.options.logger.wrapOrRun(log, {l: "create call", t: CALL_LOG_TYPE}, async log => {
+            if (this._state !== GroupCallState.Fledgling) {
+                return;
+            }
+            this._state = GroupCallState.Creating;
+            this.emitChange();
+            this.callContent = Object.assign({
+                "m.type": type,
+            }, this.callContent);
+            const request = this.options.hsApi.sendState(this.roomId, EventType.GroupCall, this.id, this.callContent!, {log});
+            await request.response();
+            this._state = GroupCallState.Created;
+            this.emitChange();
+        });
+    }
+
+    /** @internal */
+    updateCallEvent(callContent: Record<string, any>, syncLog: ILogItem) {
+        syncLog.wrap({l: "update call", t: CALL_LOG_TYPE, id: this.id}, log => {
+            this.callContent = callContent;
+            if (this._state === GroupCallState.Creating) {
+                this._state = GroupCallState.Created;
+            }
+            log.set("status", this._state);
+            this.emitChange();
+        });
+    }
+
+    /** @internal */
+    updateMembership(userId: string, callMembership: CallMembership, syncLog: ILogItem) {
+        syncLog.wrap({l: "update call membership", t: CALL_LOG_TYPE, id: this.id, userId}, log => {
+            const devices = callMembership["m.devices"];
+            const previousDeviceIds = this.getDeviceIdsForUserId(userId);
+            for (const device of devices) {
+                const deviceId = device.device_id;
+                const memberKey = getMemberKey(userId, deviceId);
+                log.wrap({l: "update device membership", id: memberKey, sessionId: device.session_id}, log => {
+                    if (userId === this.options.ownUserId && deviceId === this.options.ownDeviceId) {
+                        if (this._state === GroupCallState.Joining) {
+                            log.set("update_own", true);
+                            this._state = GroupCallState.Joined;
+                            this.emitChange();
+                        }
+                    } else {
+                        let member = this._members.get(memberKey);
+                        const sessionIdChanged = member && member.sessionId !== device.session_id;
+                        if (member && !sessionIdChanged) {
+                            log.set("update", true);
+                            member.updateCallInfo(device, log);
+                        } else {
+                            if (member && sessionIdChanged) {
+                                log.set("removedSessionId", member.sessionId);
+                                const disconnectLogItem = member.disconnect(false);
+                                if (disconnectLogItem) {
+                                    log.refDetached(disconnectLogItem);
+                                }
+                                this._members.remove(memberKey);
+                                member = undefined;
+                            }
+                            log.set("add", true);
+                            member = new Member(
+                                RoomMember.fromUserId(this.roomId, userId, "join"),
+                                device, this._memberOptions,
+                            );
+                            this._members.add(memberKey, member);
+                            if (this.joinedData) {
+                                this.connectToMember(member, this.joinedData, log);
+                            }
+                        }
+                        // flush pending messages, either after having created the member,
+                        // or updated the session id with updateCallInfo
+                        this.flushPendingIncomingDeviceMessages(member, log);
+                    }
+                });
+            }
+
+            const newDeviceIds = new Set<string>(devices.map(call => call.device_id));
+            // remove user as member of any calls not present anymore
+            for (const previousDeviceId of previousDeviceIds) {
+                if (!newDeviceIds.has(previousDeviceId)) {
+                    this.removeMemberDevice(userId, previousDeviceId, log);
+                }
+            }
+            if (userId === this.options.ownUserId && !newDeviceIds.has(this.options.ownDeviceId)) {
+                this.removeOwnDevice(log);
+            }
+        });
+    }
+
+    /** @internal */
+    removeMembership(userId: string, syncLog: ILogItem) {
+        const deviceIds = this.getDeviceIdsForUserId(userId);
+        syncLog.wrap({
+            l: "remove call member",
+            t: CALL_LOG_TYPE,
+            id: this.id,
+            userId
+        }, log => {
+            for (const deviceId of deviceIds) {
+                this.removeMemberDevice(userId, deviceId, log);
+            }
+            if (userId === this.options.ownUserId) {
+                this.removeOwnDevice(log);
+            }
+        });
+    }
+
+    private flushPendingIncomingDeviceMessages(member: Member, log: ILogItem) {
+        const memberKey = getMemberKey(member.userId, member.deviceId);
+        const bufferedMessages = this.bufferedDeviceMessages.get(memberKey);
+        // check if we have any pending message for the member with (userid, deviceid, sessionid)
+        if (bufferedMessages) {
+            for (const message of bufferedMessages) {
+                if (message.content.sender_session_id === member.sessionId) {
+                    member.handleDeviceMessage(message, log);
+                    bufferedMessages.delete(message);
+                }
+            }
+            if (bufferedMessages.size === 0) {
+                this.bufferedDeviceMessages.delete(memberKey);
+            }
+        }
+    }
+
+    private getDeviceIdsForUserId(userId: string): string[] {
+        return Array.from(this._members.keys())
+            .filter(key => memberKeyIsForUser(key, userId))
+            .map(key => getDeviceFromMemberKey(key));
+    }
+
+    private isMember(userId: string): boolean {
+        return Array.from(this._members.keys()).some(key => memberKeyIsForUser(key, userId));
+    }
+
+    private removeOwnDevice(log: ILogItem) {
+        log.set("leave_own", true);
+        this.disconnect(log);
+    }
+
+    /** @internal */
+    disconnect(log: ILogItem) {
+        if (this._state === GroupCallState.Joined) {
+            for (const [,member] of this._members) {
+                const disconnectLogItem = member.disconnect(true);
+                if (disconnectLogItem) {
+                    log.refDetached(disconnectLogItem);
+                }
+            }
+            this._state = GroupCallState.Created;
+        }
+        this.joinedData?.dispose();
+        this.joinedData = undefined;
+        this.emitChange();
+    }
+
+    /** @internal */
+    private removeMemberDevice(userId: string, deviceId: string, log: ILogItem) {
+        const memberKey = getMemberKey(userId, deviceId);
+        log.wrap({l: "remove device member", id: memberKey}, log => {
+            const member = this._members.get(memberKey);
+            if (member) {
+                log.set("leave", true);
+                this._members.remove(memberKey);
+                const disconnectLogItem = member.disconnect(false);
+                if (disconnectLogItem) {
+                    log.refDetached(disconnectLogItem);
+                }
+            }
+            this.emitChange();
+        });
+    }
+
+    /** @internal */
+    handleDeviceMessage(message: SignallingMessage<MGroupCallBase>, userId: string, deviceId: string, syncLog: ILogItem) {
+        // TODO: return if we are not membering to the call
+        const key = getMemberKey(userId, deviceId);
+        let member = this._members.get(key);
+        if (member && message.content.sender_session_id === member.sessionId) {
+            member.handleDeviceMessage(message, syncLog);
+        } else {
+            const item = syncLog.log({
+                l: "call: buffering to_device message, member not found",
+                t: CALL_LOG_TYPE,
+                id: this.id,
+                userId,
+                deviceId,
+                sessionId: message.content.sender_session_id,
+                type: message.type
+            });
+            syncLog.refDetached(item);
+            // we haven't received the m.call.member yet for this caller (or with this session id).
+            // buffer the device messages or create the member/call as it should arrive in a moment
+            let messages = this.bufferedDeviceMessages.get(key);
+            if (!messages) {
+                messages = new Set();
+                this.bufferedDeviceMessages.set(key, messages);
+            }
+            messages.add(message);
+        }
+    }
+
+    private async _createJoinPayload() {
+        const {storage} = this.options;
+        const txn = await storage.readTxn([storage.storeNames.roomState]);
+        const stateEvent = await txn.roomState.get(this.roomId, EventType.GroupCallMember, this.options.ownUserId);
+        const stateContent = stateEvent?.event?.content ?? {
+            ["m.calls"]: []
+        };
+        const callsInfo = stateContent["m.calls"];
+        let callInfo = callsInfo.find(c => c["m.call_id"] === this.id);
+        if (!callInfo) {
+            callInfo = {
+                ["m.call_id"]: this.id,
+                ["m.devices"]: []
+            };
+            callsInfo.push(callInfo);
+        }
+        callInfo["m.devices"] = callInfo["m.devices"].filter(d => d["device_id"] !== this.options.ownDeviceId);
+        callInfo["m.devices"].push({
+            ["device_id"]: this.options.ownDeviceId,
+            ["session_id"]: this.options.sessionId,
+            feeds: [{purpose: "m.usermedia"}]
+        });
+        return stateContent;
+    }
+
+    private async _leaveCallMemberContent(): Promise<Record<string, any> | undefined> {
+        const {storage} = this.options;
+        const txn = await storage.readTxn([storage.storeNames.roomState]);
+        const stateEvent = await txn.roomState.get(this.roomId, EventType.GroupCallMember, this.options.ownUserId);
+        if (stateEvent) {
+            const content = stateEvent.event.content;
+            const callInfo = content["m.calls"]?.find(c => c["m.call_id"] === this.id);
+            if (callInfo) {
+                const devicesInfo = callInfo["m.devices"];
+                const deviceIndex = devicesInfo.findIndex(d => d["device_id"] === this.options.ownDeviceId);
+                if (deviceIndex !== -1) {
+                    devicesInfo.splice(deviceIndex, 1);
+                    return content;
+                }
+            }
+
+        }
+    }
+
+    private connectToMember(member: Member, joinedData: JoinedData, log: ILogItem) {
+        const memberKey = getMemberKey(member.userId, member.deviceId);
+        const logItem = joinedData.membersLogItem.child({l: "member", id: memberKey});
+        logItem.set("sessionId", member.sessionId);
+        log.wrap({l: "connect", id: memberKey}, log => {
+            // Safari can't send a MediaStream to multiple sources, so clone it
+            const connectItem = member.connect(joinedData.localMedia.clone(), joinedData.localMuteSettings, logItem);
+            if (connectItem) {
+                log.refDetached(connectItem);
+            }
+        })
+    }
+
+    protected emitChange() {
+        this.emit("change");
+        this.options.emitUpdate(this);
+    }
+}
--- a/src/matrix/calls/group/Member.ts
+++ b/src/matrix/calls/group/Member.ts
@ -0,0 +1,288 @@
+/*
+Copyright 2022 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 {PeerCall, CallState} from "../PeerCall";
+import {makeTxnId, makeId} from "../../common";
+import {EventType, CallErrorCode} from "../callEventTypes";
+import {formatToDeviceMessagesPayload} from "../../common";
+
+import type {MuteSettings} from "../common";
+import type {Options as PeerCallOptions, RemoteMedia} from "../PeerCall";
+import type {LocalMedia} from "../LocalMedia";
+import type {HomeServerApi} from "../../net/HomeServerApi";
+import type {MCallBase, MGroupCallBase, SignallingMessage, CallDeviceMembership} from "../callEventTypes";
+import type {GroupCall} from "./GroupCall";
+import type {RoomMember} from "../../room/members/RoomMember";
+import type {EncryptedMessage} from "../../e2ee/olm/Encryption";
+import type {ILogItem} from "../../../logging/types";
+
+export type Options = Omit<PeerCallOptions, "emitUpdate" | "sendSignallingMessage"> & {
+    confId: string,
+    ownUserId: string,
+    ownDeviceId: string,
+    // local session id of our client
+    sessionId: string,
+    hsApi: HomeServerApi,
+    encryptDeviceMessage: (userId: string, message: SignallingMessage<MGroupCallBase>, log: ILogItem) => Promise<EncryptedMessage>,
+    emitUpdate: (participant: Member, params?: any) => void,
+}
+
+const errorCodesWithoutRetry = [
+    CallErrorCode.UserHangup,
+    CallErrorCode.AnsweredElsewhere,
+    CallErrorCode.Replaced,
+    CallErrorCode.UserBusy,
+    CallErrorCode.Transfered,
+    CallErrorCode.NewSession
+];
+
+/** @internal */
+class MemberConnection {
+    public retryCount: number = 0;
+    public peerCall?: PeerCall;
+
+    constructor(
+        public localMedia: LocalMedia,
+        public localMuteSettings: MuteSettings,
+        public readonly logItem: ILogItem
+    ) {}
+}
+
+export class Member {
+    private connection?: MemberConnection;
+
+    constructor(
+        public readonly member: RoomMember,
+        private callDeviceMembership: CallDeviceMembership,
+        private readonly options: Options,
+    ) {}
+
+    /**
+     * Gives access the log item for this item once joined to the group call.
+     * The signalling for this member will be log in this item.
+     * Can be used for call diagnostics while in the call.
+     **/
+    get logItem(): ILogItem | undefined {
+        return this.connection?.logItem;
+    }
+
+    get remoteMedia(): RemoteMedia | undefined {
+        return this.connection?.peerCall?.remoteMedia;
+    }
+
+    get remoteMuteSettings(): MuteSettings | undefined {
+        return this.connection?.peerCall?.remoteMuteSettings;
+    }
+
+    get isConnected(): boolean {
+        return this.connection?.peerCall?.state === CallState.Connected;
+    }
+
+    get userId(): string {
+        return this.member.userId;
+    }
+
+    get deviceId(): string {
+        return this.callDeviceMembership.device_id;
+    }
+
+    /** session id of the member */
+    get sessionId(): string {
+        return this.callDeviceMembership.session_id;
+    }
+
+    get dataChannel(): any | undefined {
+        return this.connection?.peerCall?.dataChannel;
+    }
+
+    /** @internal */
+    connect(localMedia: LocalMedia, localMuteSettings: MuteSettings, memberLogItem: ILogItem): ILogItem | undefined {
+        if (this.connection) {
+            return;
+        }
+        const connection = new MemberConnection(localMedia, localMuteSettings, memberLogItem);
+        this.connection = connection;
+        let connectLogItem;
+        connection.logItem.wrap("connect", async log => {
+            connectLogItem = log;
+            await this.callIfNeeded(log);
+        });
+        return connectLogItem;
+    }
+
+    private callIfNeeded(log: ILogItem): Promise<void> {
+        return log.wrap("callIfNeeded", async log => {
+            // otherwise wait for it to connect
+            let shouldInitiateCall;
+            // the lexicographically lower side initiates the call
+            if (this.member.userId === this.options.ownUserId) {
+                shouldInitiateCall = this.deviceId > this.options.ownDeviceId;
+            } else {
+                shouldInitiateCall = this.member.userId > this.options.ownUserId;
+            }
+            if (shouldInitiateCall) {
+                const connection = this.connection!;
+                connection.peerCall = this._createPeerCall(makeId("c"));
+                await connection.peerCall.call(
+                    connection.localMedia,
+                    connection.localMuteSettings,
+                    log
+                );
+            } else {
+                log.set("wait_for_invite", true);
+            }
+        });
+    }
+
+    /** @internal */
+    disconnect(hangup: boolean): ILogItem | undefined {
+        const {connection} = this;
+        if (!connection) {
+            return;
+        }
+        let disconnectLogItem;
+        connection.logItem.wrap("disconnect", async log => {
+            disconnectLogItem = log;
+            if (hangup) {
+                connection.peerCall?.hangup(CallErrorCode.UserHangup, log);
+            } else {
+                await connection.peerCall?.close(undefined, log);
+            }
+            connection.peerCall?.dispose();
+            connection.localMedia?.dispose();
+            this.connection = undefined;
+        });
+        connection.logItem.finish();
+        return disconnectLogItem;
+    }
+
+    /** @internal */
+    updateCallInfo(callDeviceMembership: CallDeviceMembership, causeItem: ILogItem) {
+        this.callDeviceMembership = callDeviceMembership;
+        if (this.connection) {
+            this.connection.logItem.refDetached(causeItem);
+        }
+    }
+
+    /** @internal */
+    emitUpdateFromPeerCall = (peerCall: PeerCall, params: any, log: ILogItem): void => {
+        const connection = this.connection!;
+        if (peerCall.state === CallState.Ringing) {
+            connection.logItem.wrap("ringing, answer peercall", answerLog => {
+                log.refDetached(answerLog);
+                return peerCall.answer(connection.localMedia, connection.localMuteSettings, answerLog);
+            });
+        }
+        else if (peerCall.state === CallState.Ended) {
+            const hangupReason = peerCall.hangupReason;
+            peerCall.dispose();
+            connection.peerCall = undefined;
+            if (hangupReason && !errorCodesWithoutRetry.includes(hangupReason)) {
+                connection.retryCount += 1;
+                const {retryCount} = connection;
+                connection.logItem.wrap({l: "retry connection", retryCount}, async retryLog => {
+                    log.refDetached(retryLog);
+                    if (retryCount <= 3) {
+                        await this.callIfNeeded(retryLog);
+                    } else {
+                        const disconnectLogItem = this.disconnect(false);
+                        if (disconnectLogItem) {
+                            retryLog.refDetached(disconnectLogItem);
+                        }
+                    }
+                });
+            }
+        }
+        this.options.emitUpdate(this, params);
+    }
+
+    /** @internal */
+    sendSignallingMessage = async (message: SignallingMessage<MCallBase>, log: ILogItem): Promise<void> => {
+        const groupMessage = message as SignallingMessage<MGroupCallBase>;
+        groupMessage.content.conf_id = this.options.confId;
+        groupMessage.content.device_id = this.options.ownDeviceId;
+        groupMessage.content.party_id = this.options.ownDeviceId;
+        groupMessage.content.sender_session_id = this.options.sessionId;
+        groupMessage.content.dest_session_id = this.sessionId;
+        // const encryptedMessages = await this.options.encryptDeviceMessage(this.member.userId, groupMessage, log);
+        // const payload = formatToDeviceMessagesPayload(encryptedMessages);
+        const payload = {
+            messages: {
+                [this.member.userId]: {
+                    [this.deviceId]: groupMessage.content
+                }
+            }
+        };
+        // TODO: remove this for release
+        log.set("payload", groupMessage.content);
+        const request = this.options.hsApi.sendToDevice(
+            message.type,
+            //"m.room.encrypted",
+            payload,
+            makeTxnId(),
+            {log}
+        );
+        await request.response();
+    }
+
+    /** @internal */
+    handleDeviceMessage(message: SignallingMessage<MGroupCallBase>, syncLog: ILogItem): void{
+        const {connection} = this;
+        if (connection) {
+            const destSessionId = message.content.dest_session_id;
+            if (destSessionId !== this.options.sessionId) {
+                const logItem = connection.logItem.log({l: "ignoring to_device event with wrong session_id", destSessionId, type: message.type});
+                syncLog.refDetached(logItem);
+                return;
+            }
+            if (message.type === EventType.Invite && !connection.peerCall) {
+                connection.peerCall = this._createPeerCall(message.content.call_id);
+            }
+            if (connection.peerCall) {
+                const item = connection.peerCall.handleIncomingSignallingMessage(message, this.deviceId, connection.logItem);
+                syncLog.refDetached(item);
+            } else {
+                // TODO: need to buffer events until invite comes?
+            }
+        } else {
+            syncLog.log({l: "member not connected", userId: this.userId, deviceId: this.deviceId});
+        }
+    }
+
+    /** @internal */
+    async setMedia(localMedia: LocalMedia, previousMedia: LocalMedia): Promise<void> {
+        const {connection} = this;
+        if (connection) {
+            connection.localMedia = connection.localMedia.replaceClone(connection.localMedia, previousMedia);
+            await connection.peerCall?.setMedia(connection.localMedia, connection.logItem);
+        }
+    }
+
+    async setMuted(muteSettings: MuteSettings): Promise<void> {
+        const {connection} = this;
+        if (connection) {
+            connection.localMuteSettings = muteSettings;
+            await connection.peerCall?.setMuted(muteSettings, connection.logItem);
+        }
+    }
+
+    private _createPeerCall(callId: string): PeerCall {
+        return new PeerCall(callId, Object.assign({}, this.options, {
+            emitUpdate: this.emitUpdateFromPeerCall,
+            sendSignallingMessage: this.sendSignallingMessage
+        }), this.connection!.logItem);
+    }
+}
--- a/src/matrix/common.js
+++ b/src/matrix/common.js
@ -15,16 +15,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import {groupBy} from "../utils/groupBy";
+
+
 export function makeTxnId() {
+    return makeId("t");
+}
+
+export function makeId(prefix) {
    const n = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
    const str = n.toString(16);
-    return "t" + "0".repeat(14 - str.length) + str;
+    return prefix + "0".repeat(14 - str.length) + str;
 }

 export function isTxnId(txnId) {
 	return txnId.startsWith("t") && txnId.length === 15;
 }

+export function formatToDeviceMessagesPayload(messages) {
+    const messagesByUser = groupBy(messages, message => message.device.userId);
+    const payload = {
+        messages: Array.from(messagesByUser.entries()).reduce((userMap, [userId, messages]) => {
+            userMap[userId] = messages.reduce((deviceMap, message) => {
+                deviceMap[message.device.deviceId] = message.content;
+                return deviceMap;
+            }, {});
+            return userMap;
+        }, {})
+    };
+    return payload;
+}
+
 export function tests() {
 	return {
 		"isTxnId succeeds on result of makeTxnId": assert => {
--- a/src/matrix/e2ee/DecryptionResult.ts
+++ b/src/matrix/e2ee/DecryptionResult.ts
@ -69,6 +69,14 @@ export class DecryptionResult {
        }
    }

+    get userId(): string | undefined {
+        return this.device?.userId;
+    }
+
+    get deviceId(): string | undefined {
+        return this.device?.deviceId;
+    }
+
    get isVerificationUnknown(): boolean {
        // verification is unknown if we haven't yet fetched the devices for the room
        return !this.device && !this.roomTracked;
--- a/src/matrix/e2ee/RoomEncryption.js
+++ b/src/matrix/e2ee/RoomEncryption.js
@ -18,7 +18,7 @@ import {MEGOLM_ALGORITHM, DecryptionSource} from "./common.js";
 import {groupEventsBySession} from "./megolm/decryption/utils";
 import {mergeMap} from "../../utils/mergeMap";
 import {groupBy} from "../../utils/groupBy";
-import {makeTxnId} from "../common.js";
+import {makeTxnId, formatToDeviceMessagesPayload} from "../common.js";

 const ENCRYPTED_TYPE = "m.room.encrypted";
 // how often ensureMessageKeyIsShared can check if it needs to
@ -386,6 +386,7 @@ export class RoomEncryption {
        await writeTxn.complete();
    }

+    // TODO: make this use _sendMessagesToDevices
    async _sendSharedMessageToDevices(type, message, devices, hsApi, log) {
        const devicesByUser = groupBy(devices, device => device.userId);
        const payload = {
@ -403,16 +404,7 @@ export class RoomEncryption {

    async _sendMessagesToDevices(type, messages, hsApi, log) {
        log.set("messages", messages.length);
-        const messagesByUser = groupBy(messages, message => message.device.userId);
-        const payload = {
-            messages: Array.from(messagesByUser.entries()).reduce((userMap, [userId, messages]) => {
-                userMap[userId] = messages.reduce((deviceMap, message) => {
-                    deviceMap[message.device.deviceId] = message.content;
-                    return deviceMap;
-                }, {});
-                return userMap;
-            }, {})
-        };
+        const payload = formatToDeviceMessagesPayload(messages);
        const txnId = makeTxnId();
        await hsApi.sendToDevice(type, payload, txnId, {log}).response();
    }
--- a/src/matrix/e2ee/megolm/keybackup/KeyBackup.ts
+++ b/src/matrix/e2ee/megolm/keybackup/KeyBackup.ts
@ -19,7 +19,7 @@ import {StoredRoomKey, keyFromBackup} from "../decryption/RoomKey";
 import {MEGOLM_ALGORITHM} from "../../common";
 import * as Curve25519 from "./Curve25519";
 import {AbortableOperation} from "../../../../utils/AbortableOperation";
-import {ObservableValue} from "../../../../observable/ObservableValue";
+import {ObservableValue} from "../../../../observable/value/ObservableValue";

 import {SetAbortableFn} from "../../../../utils/AbortableOperation";
 import type {BackupInfo, SessionData, SessionKeyInfo, SessionInfo, KeyBackupPayload} from "./types";
--- a/src/matrix/e2ee/olm/Encryption.ts
+++ b/src/matrix/e2ee/olm/Encryption.ts
@ -311,7 +311,7 @@ class EncryptionTarget {
    }
 }

-class EncryptedMessage {
+export class EncryptedMessage {
    constructor(
        public readonly content: OlmEncryptedMessageContent,
        public readonly device: DeviceIdentity
--- a/src/matrix/net/HomeServerApi.ts
+++ b/src/matrix/net/HomeServerApi.ts
@ -159,6 +159,10 @@ export class HomeServerApi {
    state(roomId: string, eventType: string, stateKey: string, options?: BaseRequestOptions): IHomeServerRequest {
        return this._get(`/rooms/${encodeURIComponent(roomId)}/state/${encodeURIComponent(eventType)}/${encodeURIComponent(stateKey)}`, {}, undefined, options);
    }
+    
+    sendState(roomId: string, eventType: string, stateKey: string, content: Record<string, any>, options?: BaseRequestOptions): IHomeServerRequest {
+        return this._put(`/rooms/${encodeURIComponent(roomId)}/state/${encodeURIComponent(eventType)}/${encodeURIComponent(stateKey)}`, {}, content, options);
+    }

    getLoginFlows(): IHomeServerRequest {
        return this._unauthedRequest("GET", this._url("/login"));
--- a/src/matrix/net/MediaRepository.ts
+++ b/src/matrix/net/MediaRepository.ts
@ -29,32 +29,31 @@ export class MediaRepository {
        this._platform = platform;
    }

-    mxcUrlThumbnail(url: string, width: number, height: number, method: "crop" | "scale"): string | null {
+    mxcUrlThumbnail(url: string, width: number, height: number, method: "crop" | "scale"): string | undefined {
        const parts = this._parseMxcUrl(url);
        if (parts) {
            const [serverName, mediaId] = parts;
            const httpUrl = `${this._homeserver}/_matrix/media/r0/thumbnail/${encodeURIComponent(serverName)}/${encodeURIComponent(mediaId)}`;
            return httpUrl + "?" + encodeQueryParams({width: Math.round(width), height: Math.round(height), method});
        }
-        return null;
+        return undefined;
    }

-    mxcUrl(url: string): string | null {
+    mxcUrl(url: string): string | undefined {
        const parts = this._parseMxcUrl(url);
        if (parts) {
            const [serverName, mediaId] = parts;
            return `${this._homeserver}/_matrix/media/r0/download/${encodeURIComponent(serverName)}/${encodeURIComponent(mediaId)}`;
-        } else {
-            return null;
        }
+        return undefined;
    }

-    private _parseMxcUrl(url: string): string[] | null {
+    private _parseMxcUrl(url: string): string[] | undefined {
        const prefix = "mxc://";
        if (url.startsWith(prefix)) {
            return url.substr(prefix.length).split("/", 2);
        } else {
-            return null;
+            return undefined;
        }
    }

--- a/src/matrix/net/Reconnector.ts
+++ b/src/matrix/net/Reconnector.ts
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ObservableValue} from "../../observable/ObservableValue";
+import {ObservableValue} from "../../observable/value/ObservableValue";
 import type {ExponentialRetryDelay} from "./ExponentialRetryDelay";
 import type {TimeMeasure} from "../../platform/web/dom/Clock.js";
 import type {OnlineStatus} from "../../platform/web/dom/OnlineStatus.js";
--- a/src/matrix/room/BaseRoom.js
+++ b/src/matrix/room/BaseRoom.js
@ -29,7 +29,7 @@ import {ObservedEventMap} from "./ObservedEventMap.js";
 import {DecryptionSource} from "../e2ee/common.js";
 import {ensureLogItem} from "../../logging/utils";
 import {PowerLevels} from "./PowerLevels.js";
-import {RetainedObservableValue} from "../../observable/ObservableValue";
+import {RetainedObservableValue} from "../../observable/value/RetainedObservableValue";
 import {TimelineReader} from "./timeline/persistence/TimelineReader";

 const EVENT_ENCRYPTED_TYPE = "m.room.encrypted";
--- a/src/matrix/room/ObservedEventMap.js
+++ b/src/matrix/room/ObservedEventMap.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableValue} from "../../observable/ObservableValue";
+import {BaseObservableValue} from "../../observable/value/BaseObservableValue";

 export class ObservedEventMap {
    constructor(notifyEmpty) {
--- a/src/matrix/room/Room.js
+++ b/src/matrix/room/Room.js
@ -30,6 +30,7 @@ const EVENT_ENCRYPTED_TYPE = "m.room.encrypted";
 export class Room extends BaseRoom {
    constructor(options) {
        super(options);
+        this._callHandler = options.callHandler;
        // TODO: pass pendingEvents to start like pendingOperations?
        const {pendingEvents} = options;
        const relationWriter = new RelationWriter({
@ -178,6 +179,7 @@ export class Room extends BaseRoom {
            removedPendingEvents = await this._sendQueue.removeRemoteEchos(roomResponse.timeline.events, txn, log);
        }
        const powerLevelsEvent = this._getPowerLevelsEvent(roomResponse);
+        this._updateCallHandler(roomResponse, txn, log);
        return {
            summaryChanges,
            roomEncryption,
@ -215,6 +217,9 @@ export class Room extends BaseRoom {
            if (this._memberList) {
                this._memberList.afterSync(memberChanges);
            }
+            if (this._callHandler) {
+                this._callHandler.updateRoomMembers(this, memberChanges);
+            }
            if (this._observedMembers) {
                this._updateObservedMembers(memberChanges);
            }
@ -442,6 +447,22 @@ export class Room extends BaseRoom {
        return this._sendQueue.pendingEvents;
    }

+    _updateCallHandler(roomResponse, txn, log) {
+        if (this._callHandler) {
+            const stateEvents = roomResponse.state?.events;
+            if (stateEvents?.length) {
+                this._callHandler.handleRoomState(this, stateEvents, txn, log);
+            }
+            let timelineEvents = roomResponse.timeline?.events;
+            if (timelineEvents) {
+                const timelineStateEvents = timelineEvents.filter(e => typeof e.state_key === "string");
+                if (timelineEvents.length !== 0) {
+                    this._callHandler.handleRoomState(this, timelineStateEvents, txn, log);
+                }
+            }
+        }
+    }
+
    /** @package */
    writeIsTrackingMembers(value, txn) {
        return this._summary.writeIsTrackingMembers(value, txn);
--- a/src/matrix/room/timeline/Timeline.js
+++ b/src/matrix/room/timeline/Timeline.js
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {SortedArray, AsyncMappedList, ConcatList, ObservableArray} from "../../../observable/index.js";
+import {SortedArray, AsyncMappedList, ConcatList, ObservableArray} from "../../../observable/index";
 import {Disposables} from "../../../utils/Disposables";
 import {Direction} from "./Direction";
 import {TimelineReader} from "./persistence/TimelineReader.js";
--- a/src/matrix/storage/common.ts
+++ b/src/matrix/storage/common.ts
@ -33,6 +33,7 @@ export enum StoreNames {
    groupSessionDecryptions = "groupSessionDecryptions",
    operations = "operations",
    accountData = "accountData",
+    calls = "calls"
 }

 export const STORE_NAMES: Readonly<StoreNames[]> = Object.values(StoreNames);
--- a/src/matrix/storage/idb/Transaction.ts
+++ b/src/matrix/storage/idb/Transaction.ts
@ -36,6 +36,7 @@ import {OutboundGroupSessionStore} from "./stores/OutboundGroupSessionStore";
 import {GroupSessionDecryptionStore} from "./stores/GroupSessionDecryptionStore";
 import {OperationStore} from "./stores/OperationStore";
 import {AccountDataStore} from "./stores/AccountDataStore";
+import {CallStore} from "./stores/CallStore";
 import type {ILogger, ILogItem} from "../../../logging/types";

 export type IDBKey = IDBValidKey | IDBKeyRange;
@ -167,6 +168,10 @@ export class Transaction {
    get accountData(): AccountDataStore {
        return this._store(StoreNames.accountData, idbStore => new AccountDataStore(idbStore));
    }
+    
+    get calls(): CallStore {
+        return this._store(StoreNames.calls, idbStore => new CallStore(idbStore));
+    }

    async complete(log?: ILogItem): Promise<void> {
        try {
--- a/src/matrix/storage/idb/schema.ts
+++ b/src/matrix/storage/idb/schema.ts
@ -34,7 +34,8 @@ export const schema: MigrationFunc[] = [
    backupAndRestoreE2EEAccountToLocalStorage,
    clearAllStores,
    addInboundSessionBackupIndex,
-    migrateBackupStatus
+    migrateBackupStatus,
+    createCallStore
 ];
 // TODO: how to deal with git merge conflicts of this array?

@ -309,3 +310,8 @@ async function migrateBackupStatus(db: IDBDatabase, txn: IDBTransaction, localSt
    log.set("countWithoutSession", countWithoutSession);
    log.set("countWithSession", countWithSession);
 }
+
+//v17 create calls store
+function createCallStore(db: IDBDatabase) : void {
+    db.createObjectStore("calls", {keyPath: "key"});
+}
--- a/src/matrix/storage/idb/stores/CallStore.ts
+++ b/src/matrix/storage/idb/stores/CallStore.ts
@ -0,0 +1,83 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2021 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 {Store} from "../Store";
+import {StateEvent} from "../../types";
+import {MIN_UNICODE, MAX_UNICODE} from "./common";
+
+function encodeKey(intent: string, roomId: string, callId: string) {
+     return `${intent}|${roomId}|${callId}`;
+}
+
+function decodeStorageEntry(storageEntry: CallStorageEntry): CallEntry {
+    const [intent, roomId, callId] = storageEntry.key.split("|");
+    return {intent, roomId, callId, timestamp: storageEntry.timestamp};
+}
+
+export interface CallEntry {
+    intent: string;
+    roomId: string;
+    callId: string;
+    timestamp: number;
+}
+
+type CallStorageEntry = {
+    key: string;
+    timestamp: number;
+}
+
+export class CallStore {
+    private _callStore: Store<CallStorageEntry>;
+
+    constructor(idbStore: Store<CallStorageEntry>) {
+        this._callStore = idbStore;
+    }
+
+    async getByIntent(intent: string): Promise<CallEntry[]> {
+        const range = this._callStore.IDBKeyRange.bound(
+            encodeKey(intent, MIN_UNICODE, MIN_UNICODE),
+            encodeKey(intent, MAX_UNICODE, MAX_UNICODE),
+            true,
+            true
+        );
+        const storageEntries = await this._callStore.selectAll(range);
+        return storageEntries.map(e => decodeStorageEntry(e));
+    }
+
+    async getByIntentAndRoom(intent: string, roomId: string): Promise<CallEntry[]> {
+        const range = this._callStore.IDBKeyRange.bound(
+            encodeKey(intent, roomId, MIN_UNICODE),
+            encodeKey(intent, roomId, MAX_UNICODE),
+            true,
+            true
+        );
+        const storageEntries = await this._callStore.selectAll(range);
+        return storageEntries.map(e => decodeStorageEntry(e));
+    }
+
+    add(entry: CallEntry) {
+        const storageEntry: CallStorageEntry = {
+            key: encodeKey(entry.intent, entry.roomId, entry.callId),
+            timestamp: entry.timestamp
+        };
+        this._callStore.add(storageEntry);
+    }
+
+    remove(intent: string, roomId: string, callId: string): void {
+        this._callStore.delete(encodeKey(intent, roomId, callId));
+    }
+}
--- a/src/matrix/storage/idb/stores/RoomStateStore.ts
+++ b/src/matrix/storage/idb/stores/RoomStateStore.ts
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {MAX_UNICODE} from "./common";
+import {MIN_UNICODE, MAX_UNICODE} from "./common";
 import {Store} from "../Store";
 import {StateEvent} from "../../types";

@ -41,6 +41,16 @@ export class RoomStateStore {
        return this._roomStateStore.get(key);
    }

+    getAllForType(roomId: string, type: string): Promise<RoomStateEntry[]> {
+        const range = this._roomStateStore.IDBKeyRange.bound(
+            encodeKey(roomId, type, MIN_UNICODE),
+            encodeKey(roomId, type, MAX_UNICODE),
+            true,
+            true
+        );
+        return this._roomStateStore.selectAll(range);
+    }
+
    set(roomId: string, event: StateEvent): void {
        const key = encodeKey(roomId, event.type, event.state_key);
        const entry = {roomId, event, key};
--- a/src/mocks/Clock.js
+++ b/src/mocks/Clock.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {ObservableValue} from "../observable/ObservableValue";
+import {ObservableValue} from "../observable/value/ObservableValue";

 class Timeout {
    constructor(elapsed, ms) {
--- a/src/observable/ObservableValue.ts
+++ b/src/observable/ObservableValue.ts
@ -1,248 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-
-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 {AbortError} from "../utils/error";
-import {BaseObservable} from "./BaseObservable";
-import type {SubscriptionHandle} from "./BaseObservable";
-
-// like an EventEmitter, but doesn't have an event type
-export abstract class BaseObservableValue<T> extends BaseObservable<(value: T) => void> {
-    emit(argument: T) {
-        for (const h of this._handlers) {
-            h(argument);
-        }
-    }
-
-    abstract get(): T;
-
-    waitFor(predicate: (value: T) => boolean): IWaitHandle<T> {
-        if (predicate(this.get())) {
-            return new ResolvedWaitForHandle(Promise.resolve(this.get()));
-        } else {
-            return new WaitForHandle(this, predicate);
-        }
-    }
-
-    flatMap<C>(mapper: (value: T) => (BaseObservableValue<C> | undefined)): BaseObservableValue<C | undefined> {
-        return new FlatMapObservableValue<T, C>(this, mapper);
-    }
-}
-
-interface IWaitHandle<T> {
-    promise: Promise<T>;
-    dispose(): void;
-}
-
-class WaitForHandle<T> implements IWaitHandle<T> {
-    private _promise: Promise<T>
-    private _reject: ((reason?: any) => void) | null;
-    private _subscription: (() => void) | null;
-
-    constructor(observable: BaseObservableValue<T>, predicate: (value: T) => boolean) {
-        this._promise = new Promise((resolve, reject) => {
-            this._reject = reject;
-            this._subscription = observable.subscribe(v => {
-                if (predicate(v)) {
-                    this._reject = null;
-                    resolve(v);
-                    this.dispose();
-                }
-            });
-        });
-    }
-
-    get promise(): Promise<T> {
-        return this._promise;
-    }
-
-    dispose() {
-        if (this._subscription) {
-            this._subscription();
-            this._subscription = null;
-        }
-        if (this._reject) {
-            this._reject(new AbortError());
-            this._reject = null;
-        }
-    }
-}
-
-class ResolvedWaitForHandle<T> implements IWaitHandle<T> {
-    constructor(public promise: Promise<T>) {}
-    dispose() {}
-}
-
-export class ObservableValue<T> extends BaseObservableValue<T> {
-    private _value: T;
-
-    constructor(initialValue: T) {
-        super();
-        this._value = initialValue;
-    }
-
-    get(): T {
-        return this._value;
-    }
-
-    set(value: T): void {
-        if (value !== this._value) {
-            this._value = value;
-            this.emit(this._value);
-        }
-    }
-}
-
-export class RetainedObservableValue<T> extends ObservableValue<T> {
-    private _freeCallback: () => void;
-
-    constructor(initialValue: T, freeCallback: () => void) {
-        super(initialValue);
-        this._freeCallback = freeCallback;
-    }
-
-    onUnsubscribeLast() {
-        super.onUnsubscribeLast();
-        this._freeCallback();
-    }
-}
-
-export class FlatMapObservableValue<P, C> extends BaseObservableValue<C | undefined> {
-    private sourceSubscription?: SubscriptionHandle;
-    private targetSubscription?: SubscriptionHandle;
-
-    constructor(
-        private readonly source: BaseObservableValue<P>,
-        private readonly mapper: (value: P) => (BaseObservableValue<C> | undefined)
-    ) {
-        super();
-    }
-
-    onUnsubscribeLast() {
-        super.onUnsubscribeLast();
-        this.sourceSubscription = this.sourceSubscription!();
-        if (this.targetSubscription) {
-            this.targetSubscription = this.targetSubscription();
-        }
-    }
-
-    onSubscribeFirst() {
-        super.onSubscribeFirst();
-        this.sourceSubscription = this.source.subscribe(() => {
-            this.updateTargetSubscription();
-            this.emit(this.get());
-        });
-        this.updateTargetSubscription();
-    }
-
-    private updateTargetSubscription() {
-        const sourceValue = this.source.get();
-        if (sourceValue) {
-            const target = this.mapper(sourceValue);
-            if (target) {
-                if (!this.targetSubscription) {
-                    this.targetSubscription = target.subscribe(() => this.emit(this.get()));
-                }
-                return;
-            }
-        }
-        // if no sourceValue or target
-        if (this.targetSubscription) {
-            this.targetSubscription = this.targetSubscription();
-        }
-    }
-
-    get(): C | undefined {
-        const sourceValue = this.source.get();
-        if (!sourceValue) {
-            return undefined;
-        }
-        const mapped = this.mapper(sourceValue);
-        return mapped?.get();
-    }
-}
-
-export function tests() {
-    return {
-        "set emits an update": assert => {
-            const a = new ObservableValue<number>(0);
-            let fired = false;
-            const subscription = a.subscribe(v => {
-                fired = true;
-                assert.strictEqual(v, 5);
-            });
-            a.set(5);
-            assert(fired);
-            subscription();
-        },
-        "set doesn't emit if value hasn't changed": assert => {
-            const a = new ObservableValue(5);
-            let fired = false;
-            const subscription = a.subscribe(() => {
-                fired = true;
-            });
-            a.set(5);
-            a.set(5);
-            assert(!fired);
-            subscription();
-        },
-        "waitFor promise resolves on matching update": async assert => {
-            const a = new ObservableValue(5);
-            const handle = a.waitFor(v => v === 6);
-            Promise.resolve().then(() => {
-                a.set(6);
-            });
-            await handle.promise;
-            assert.strictEqual(a.get(), 6);
-        },
-        "waitFor promise rejects when disposed": async assert => {
-            const a = new ObservableValue<number>(0);
-            const handle = a.waitFor(() => false);
-            Promise.resolve().then(() => {
-                handle.dispose();
-            });
-            await assert.rejects(handle.promise, AbortError);
-        },
-        "flatMap.get": assert => {
-            const a = new ObservableValue<undefined | {count: ObservableValue<number>}>(undefined);
-            const countProxy = a.flatMap(a => a!.count);
-            assert.strictEqual(countProxy.get(), undefined);
-            const count = new ObservableValue<number>(0);
-            a.set({count});
-            assert.strictEqual(countProxy.get(), 0);
-        },
-        "flatMap update from source": assert => {
-            const a = new ObservableValue<undefined | {count: ObservableValue<number>}>(undefined);
-            const updates: (number | undefined)[] = [];
-            a.flatMap(a => a!.count).subscribe(count => {
-                updates.push(count);
-            });
-            const count = new ObservableValue<number>(0);
-            a.set({count});
-            assert.deepEqual(updates, [0]);
-        },
-        "flatMap update from target": assert => {
-            const a = new ObservableValue<undefined | {count: ObservableValue<number>}>(undefined);
-            const updates: (number | undefined)[] = [];
-            a.flatMap(a => a!.count).subscribe(count => {
-                updates.push(count);
-            });
-            const count = new ObservableValue<number>(0);
-            a.set({count});
-            count.set(5);
-            assert.deepEqual(updates, [0, 5]);
-        }
-    }
-}
--- a/src/observable/index.ts
+++ b/src/observable/index.ts
@ -34,8 +34,8 @@ Object.assign(BaseObservableMap.prototype, {
        return new SortedMapList(this, comparator);
    },

-    mapValues(mapper, updater) {
-        return new MappedMap(this, mapper, updater);
+    mapValues(mapper, updater, remover) {
+        return new MappedMap(this, mapper, updater, remover);
    },

    filterValues(filter) {
@ -46,3 +46,12 @@ Object.assign(BaseObservableMap.prototype, {
        return new JoinedMap([this].concat(otherMaps));
    }
 });
+
+declare module "./map/BaseObservableMap" {
+    interface BaseObservableMap<K, V> {
+        sortValues(comparator: (a: V, b: V) => number): SortedMapList<V>;
+        mapValues<M>(mapper: (V, emitSpontaneousUpdate: (params: any) => void) => M, updater: (mappedValue: M, params: any, value: V) => void): MappedMap<K, M>;
+        filterValues(filter: (V, K) => boolean): FilteredMap<K, V>;
+        join(...otherMaps: BaseObservableMap<K, V>[]): JoinedMap<K, V>;
+    }
+}
--- a/src/observable/map/MappedMap.js
+++ b/src/observable/map/MappedMap.js
@ -20,11 +20,12 @@ so a mapped value can emit updates on it's own with this._emitSpontaneousUpdate
 how should the mapped value be notified of an update though? and can it then decide to not propagate the update?
 */
 export class MappedMap extends BaseObservableMap {
-    constructor(source, mapper, updater) {
+    constructor(source, mapper, updater, remover) {
        super();
        this._source = source;
        this._mapper = mapper;
        this._updater = updater;
+        this._remover = remover;
        this._mappedValues = new Map();
    }

@ -45,6 +46,9 @@ export class MappedMap extends BaseObservableMap {
    onRemove(key/*, _value*/) {
        const mappedValue = this._mappedValues.get(key);
        if (this._mappedValues.delete(key)) {
+            if (this._remover) {
+                this._remover(mappedValue);
+            }
            this.emitRemove(key, mappedValue);
        }
    }
--- a/src/observable/map/ObservableMap.ts
+++ b/src/observable/map/ObservableMap.ts
@ -80,15 +80,15 @@ export class ObservableMap<K, V> extends BaseObservableMap<K, V> {
        return this._values.size;
    }

-    [Symbol.iterator](): Iterator<[K, V]> {
+    [Symbol.iterator](): IterableIterator<[K, V]> {
        return this._values.entries();
    }

-    values(): Iterator<V> {
+    values(): IterableIterator<V> {
        return this._values.values();
    }

-    keys(): Iterator<K> {
+    keys(): IterableIterator<K> {
        return this._values.keys();
    }
 }
--- a/src/observable/map/ObservableValueMap.ts
+++ b/src/observable/map/ObservableValueMap.ts
@ -0,0 +1,53 @@
+/*
+Copyright 2022 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 {BaseObservableMap} from "./BaseObservableMap";
+import {BaseObservableValue} from "../value/BaseObservableValue";
+import {SubscriptionHandle} from "../BaseObservable";
+
+export class ObservableValueMap<K, V> extends BaseObservableMap<K, V> {
+    private subscription?: SubscriptionHandle;
+
+    constructor(private readonly key: K, private readonly observableValue: BaseObservableValue<V>) {
+        super();
+    }
+
+    onSubscribeFirst() {
+        this.subscription = this.observableValue.subscribe(value => {
+            this.emitUpdate(this.key, value, undefined);
+        });
+        super.onSubscribeFirst();
+    }
+
+    onUnsubscribeLast() {
+        this.subscription!();
+        super.onUnsubscribeLast();
+    }
+
+    *[Symbol.iterator](): Iterator<[K, V]> {
+        yield [this.key, this.observableValue.get()];
+    }
+    
+    get size(): number {
+        return 1;
+    }
+
+    get(key: K): V | undefined {
+        if (key == this.key) {
+            return this.observableValue.get();
+        }
+    }
+}
--- a/src/observable/value/BaseObservableValue.ts
+++ b/src/observable/value/BaseObservableValue.ts
@ -0,0 +1,83 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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 {AbortError} from "../../utils/error";
+import {BaseObservable} from "../BaseObservable";
+import type {SubscriptionHandle} from "../BaseObservable";
+import {FlatMapObservableValue} from "./FlatMapObservableValue";
+
+// like an EventEmitter, but doesn't have an event type
+export abstract class BaseObservableValue<T> extends BaseObservable<(value: T) => void> {
+    emit(argument: T) {
+        for (const h of this._handlers) {
+            h(argument);
+        }
+    }
+
+    abstract get(): T;
+
+    waitFor(predicate: (value: T) => boolean): IWaitHandle<T> {
+        if (predicate(this.get())) {
+            return new ResolvedWaitForHandle(Promise.resolve(this.get()));
+        } else {
+            return new WaitForHandle(this, predicate);
+        }
+    }
+}
+
+interface IWaitHandle<T> {
+    promise: Promise<T>;
+    dispose(): void;
+}
+
+class WaitForHandle<T> implements IWaitHandle<T> {
+    private _promise: Promise<T>
+    private _reject: ((reason?: any) => void) | null;
+    private _subscription: (() => void) | null;
+
+    constructor(observable: BaseObservableValue<T>, predicate: (value: T) => boolean) {
+        this._promise = new Promise((resolve, reject) => {
+            this._reject = reject;
+            this._subscription = observable.subscribe(v => {
+                if (predicate(v)) {
+                    this._reject = null;
+                    resolve(v);
+                    this.dispose();
+                }
+            });
+        });
+    }
+
+    get promise(): Promise<T> {
+        return this._promise;
+    }
+
+    dispose() {
+        if (this._subscription) {
+            this._subscription();
+            this._subscription = null;
+        }
+        if (this._reject) {
+            this._reject(new AbortError());
+            this._reject = null;
+        }
+    }
+}
+
+class ResolvedWaitForHandle<T> implements IWaitHandle<T> {
+    constructor(public promise: Promise<T>) {}
+    dispose() {}
+}
--- a/src/observable/value/EventObservableValue.ts
+++ b/src/observable/value/EventObservableValue.ts
@ -0,0 +1,45 @@
+/*
+Copyright 2022 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 {BaseObservableValue} from "./BaseObservableValue";
+import {EventEmitter} from "../../utils/EventEmitter";
+
+export class EventObservableValue<T, V extends EventEmitter<T>> extends BaseObservableValue<V> {
+    private eventSubscription: () => void;
+
+    constructor(
+        private readonly value: V,
+        private readonly eventName: keyof T
+    ) {
+        super();
+    }
+
+    onSubscribeFirst(): void {
+        this.eventSubscription = this.value.disposableOn(this.eventName, () => {
+            this.emit(this.value);
+        });
+        super.onSubscribeFirst();
+    }
+
+    onUnsubscribeLast(): void {
+        this.eventSubscription!();
+        super.onUnsubscribeLast();
+    }
+
+    get(): V {
+        return this.value;
+    }
+}
--- a/src/observable/value/FlatMapObservableValue.ts
+++ b/src/observable/value/FlatMapObservableValue.ts
@ -0,0 +1,109 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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 {BaseObservableValue} from "./BaseObservableValue";
+import {SubscriptionHandle} from "../BaseObservable";
+
+export class FlatMapObservableValue<P, C> extends BaseObservableValue<C | undefined> {
+    private sourceSubscription?: SubscriptionHandle;
+    private targetSubscription?: SubscriptionHandle;
+
+    constructor(
+        private readonly source: BaseObservableValue<P>,
+        private readonly mapper: (value: P) => (BaseObservableValue<C> | undefined)
+    ) {
+        super();
+    }
+
+    onUnsubscribeLast() {
+        super.onUnsubscribeLast();
+        this.sourceSubscription = this.sourceSubscription!();
+        if (this.targetSubscription) {
+            this.targetSubscription = this.targetSubscription();
+        }
+    }
+
+    onSubscribeFirst() {
+        super.onSubscribeFirst();
+        this.sourceSubscription = this.source.subscribe(() => {
+            this.updateTargetSubscription();
+            this.emit(this.get());
+        });
+        this.updateTargetSubscription();
+    }
+
+    private updateTargetSubscription() {
+        const sourceValue = this.source.get();
+        if (sourceValue) {
+            const target = this.mapper(sourceValue);
+            if (target) {
+                if (!this.targetSubscription) {
+                    this.targetSubscription = target.subscribe(() => this.emit(this.get()));
+                }
+                return;
+            }
+        }
+        // if no sourceValue or target
+        if (this.targetSubscription) {
+            this.targetSubscription = this.targetSubscription();
+        }
+    }
+
+    get(): C | undefined {
+        const sourceValue = this.source.get();
+        if (!sourceValue) {
+            return undefined;
+        }
+        const mapped = this.mapper(sourceValue);
+        return mapped?.get();
+    }
+}
+
+import {ObservableValue} from "./ObservableValue";
+
+export function tests() {
+    return {
+        "flatMap.get": assert => {
+            const a = new ObservableValue<undefined | {count: ObservableValue<number>}>(undefined);
+            const countProxy = new FlatMapObservableValue(a, a => a!.count);
+            assert.strictEqual(countProxy.get(), undefined);
+            const count = new ObservableValue<number>(0);
+            a.set({count});
+            assert.strictEqual(countProxy.get(), 0);
+        },
+        "flatMap update from source": assert => {
+            const a = new ObservableValue<undefined | {count: ObservableValue<number>}>(undefined);
+            const updates: (number | undefined)[] = [];
+            new FlatMapObservableValue(a, a => a!.count).subscribe(count => {
+                updates.push(count);
+            });
+            const count = new ObservableValue<number>(0);
+            a.set({count});
+            assert.deepEqual(updates, [0]);
+        },
+        "flatMap update from target": assert => {
+            const a = new ObservableValue<undefined | {count: ObservableValue<number>}>(undefined);
+            const updates: (number | undefined)[] = [];
+            new FlatMapObservableValue(a, a => a!.count).subscribe(count => {
+                updates.push(count);
+            });
+            const count = new ObservableValue<number>(0);
+            a.set({count});
+            count.set(5);
+            assert.deepEqual(updates, [0, 5]);
+        }
+    }
+}
--- a/src/observable/value/ObservableValue.ts
+++ b/src/observable/value/ObservableValue.ts
@ -0,0 +1,82 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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 {AbortError} from "../../utils/error";
+import {BaseObservableValue} from "./BaseObservableValue";
+
+export class ObservableValue<T> extends BaseObservableValue<T> {
+    private _value: T;
+
+    constructor(initialValue: T) {
+        super();
+        this._value = initialValue;
+    }
+
+    get(): T {
+        return this._value;
+    }
+
+    set(value: T): void {
+        if (value !== this._value) {
+            this._value = value;
+            this.emit(this._value);
+        }
+    }
+}
+
+export function tests() {
+    return {
+        "set emits an update": assert => {
+            const a = new ObservableValue<number>(0);
+            let fired = false;
+            const subscription = a.subscribe(v => {
+                fired = true;
+                assert.strictEqual(v, 5);
+            });
+            a.set(5);
+            assert(fired);
+            subscription();
+        },
+        "set doesn't emit if value hasn't changed": assert => {
+            const a = new ObservableValue(5);
+            let fired = false;
+            const subscription = a.subscribe(() => {
+                fired = true;
+            });
+            a.set(5);
+            a.set(5);
+            assert(!fired);
+            subscription();
+        },
+        "waitFor promise resolves on matching update": async assert => {
+            const a = new ObservableValue(5);
+            const handle = a.waitFor(v => v === 6);
+            Promise.resolve().then(() => {
+                a.set(6);
+            });
+            await handle.promise;
+            assert.strictEqual(a.get(), 6);
+        },
+        "waitFor promise rejects when disposed": async assert => {
+            const a = new ObservableValue<number>(0);
+            const handle = a.waitFor(() => false);
+            Promise.resolve().then(() => {
+                handle.dispose();
+            });
+            await assert.rejects(handle.promise, AbortError);
+        }
+    }
+}
--- a/src/observable/value/PickMapObservableValue.ts
+++ b/src/observable/value/PickMapObservableValue.ts
@ -0,0 +1,89 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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 {BaseObservableValue} from "./BaseObservableValue";
+import {BaseObservableMap, IMapObserver} from "../map/BaseObservableMap";
+import {SubscriptionHandle} from "../BaseObservable";
+
+function pickLowestKey<K>(currentKey: K, newKey: K): boolean {
+    return newKey < currentKey;
+}
+
+export class PickMapObservableValue<K, V> extends BaseObservableValue<V | undefined>  implements IMapObserver<K, V>{
+
+    private key?: K;
+    private mapSubscription?: SubscriptionHandle;
+
+    constructor(
+        private readonly map: BaseObservableMap<K, V>,
+        private readonly pickKey: (currentKey: K, newKey: K) => boolean = pickLowestKey
+    ) {
+        super();
+    }
+
+    private updateKey(newKey: K): boolean {
+        if (this.key === undefined || this.pickKey(this.key, newKey)) {
+            this.key = newKey;
+            return true;
+        }
+        return false;
+    }
+
+    onReset(): void {
+        this.key = undefined;
+        this.emit(this.get());
+    }
+
+    onAdd(key: K, value:V): void {
+        if (this.updateKey(key)) {
+            this.emit(this.get());
+        }
+    }
+
+    onUpdate(key: K, value: V, params: any): void {
+        this.emit(this.get());
+    }
+
+    onRemove(key: K, value: V): void {
+        if (key === this.key) {
+            this.key = undefined;
+            // try to see if there is another key that fullfills pickKey
+            for (const [key] of this.map) {
+                this.updateKey(key);
+            }
+            this.emit(this.get());
+        }
+    }
+
+    onSubscribeFirst(): void {
+        this.mapSubscription = this.map.subscribe(this);
+        for (const [key] of this.map) {
+            this.updateKey(key);
+        }
+    }
+
+    onUnsubscribeLast(): void {
+        this.mapSubscription!();
+        this.key = undefined;
+    }
+
+    get(): V | undefined {
+        if (this.key !== undefined) {
+            return this.map.get(this.key);
+        }
+        return undefined;
+    }
+}
--- a/src/observable/value/RetainedObservableValue.ts
+++ b/src/observable/value/RetainedObservableValue.ts
@ -0,0 +1,31 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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 {ObservableValue} from "./ObservableValue";
+
+export class RetainedObservableValue<T> extends ObservableValue<T> {
+    private _freeCallback: () => void;
+
+    constructor(initialValue: T, freeCallback: () => void) {
+        super(initialValue);
+        this._freeCallback = freeCallback;
+    }
+
+    onUnsubscribeLast() {
+        super.onUnsubscribeLast();
+        this._freeCallback();
+    }
+}
--- a/src/platform/types/MediaDevices.ts
+++ b/src/platform/types/MediaDevices.ts
@ -0,0 +1,86 @@
+/*
+Copyright 2022 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 type {BaseObservableMap} from "../../observable/map/BaseObservableMap";
+
+export interface Event {}
+
+export type DeviceFilter = {
+    deviceId: string
+};
+
+export interface MediaDevices {
+    // filter out audiooutput
+    observeDevices(): Promise<BaseObservableMap<string, MediaDeviceInfo>>;
+    // to assign to a video element, we downcast to WrappedTrack and use the stream property. 
+    getMediaTracks(audio: boolean | DeviceFilter, video: boolean | DeviceFilter): Promise<Stream>;
+    getScreenShareTrack(): Promise<Stream | undefined>;
+    createVolumeMeasurer(stream: Stream, callback: () => void): VolumeMeasurer;
+}
+
+// Typescript definitions derived from https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+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
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+export interface StreamTrackEvent extends Event {
+    readonly track: Track;
+}
+
+export interface StreamEventMap {
+    "addtrack": StreamTrackEvent;
+    "removetrack": StreamTrackEvent;
+}
+
+export interface Stream {
+    getTracks(): ReadonlyArray<Track>;
+    getAudioTracks(): ReadonlyArray<Track>;
+    getVideoTracks(): ReadonlyArray<Track>;
+    readonly id: string;
+    clone(): Stream;
+    addEventListener<K extends keyof StreamEventMap>(type: K, listener: (this: Stream, ev: StreamEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof StreamEventMap>(type: K, listener: (this: Stream, ev: StreamEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+}
+
+export enum TrackKind {
+    Video = "video",
+    Audio = "audio"
+}
+
+export interface Track {
+    readonly kind: TrackKind;
+    readonly label: string;
+    readonly id: string;
+    enabled: boolean;
+    // getSettings(): MediaTrackSettings;
+    stop(): void;
+}
+
+export interface VolumeMeasurer {
+    get isSpeaking(): boolean;
+    get volume(): number;
+    setSpeakingThreshold(threshold: number): void;
+    dispose();
+}
--- a/src/platform/types/WebRTC.ts
+++ b/src/platform/types/WebRTC.ts
@ -0,0 +1,175 @@
+/*
+Copyright 2022 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 {Track, Stream, Event} from "./MediaDevices";
+import {SDPStreamMetadataPurpose} from "../../matrix/calls/callEventTypes";
+
+export interface WebRTC {
+    createPeerConnection(forceTURN: boolean, turnServers: RTCIceServer[], iceCandidatePoolSize: number): PeerConnection;
+    prepareSenderForPurpose(peerConnection: PeerConnection, sender: Sender, purpose: SDPStreamMetadataPurpose): void;
+}
+
+// Typescript definitions derived from https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+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
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+export interface DataChannelEventMap {
+    "bufferedamountlow": Event;
+    "close": Event;
+    "error": Event;
+    "message": MessageEvent;
+    "open": Event;
+}
+
+export interface DataChannel {
+    binaryType: BinaryType;
+    readonly id: number | null;
+    readonly label: string;
+    readonly negotiated: boolean;
+    readonly readyState: DataChannelState;
+    close(): void;
+    send(data: string): void;
+    send(data: Blob): void;
+    send(data: ArrayBuffer): void;
+    send(data: ArrayBufferView): void;
+    addEventListener<K extends keyof DataChannelEventMap>(type: K, listener: (this: DataChannel, ev: DataChannelEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof DataChannelEventMap>(type: K, listener: (this: DataChannel, ev: DataChannelEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+}
+
+export interface DataChannelInit {
+    id?: number;
+    maxPacketLifeTime?: number;
+    maxRetransmits?: number;
+    negotiated?: boolean;
+    ordered?: boolean;
+    protocol?: string;
+}
+
+export interface DataChannelEvent extends Event {
+    readonly channel: DataChannel;
+}
+
+export interface PeerConnectionIceEvent extends Event {
+    readonly candidate: RTCIceCandidate | null;
+}
+
+export interface TrackEvent extends Event {
+    readonly receiver: Receiver;
+    readonly streams: ReadonlyArray<Stream>;
+    readonly track: Track;
+    readonly transceiver: Transceiver;
+}
+
+export interface PeerConnectionEventMap {
+    "connectionstatechange": Event;
+    "datachannel": DataChannelEvent;
+    "icecandidate": PeerConnectionIceEvent;
+    "iceconnectionstatechange": Event;
+    "icegatheringstatechange": Event;
+    "negotiationneeded": Event;
+    "signalingstatechange": Event;
+    "track": TrackEvent;
+}
+
+export type DataChannelState = "closed" | "closing" | "connecting" | "open";
+export type IceConnectionState = "checking" | "closed" | "completed" | "connected" | "disconnected" | "failed" | "new";
+export type PeerConnectionState = "closed" | "connected" | "connecting" | "disconnected" | "failed" | "new";
+export type SignalingState = "closed" | "have-local-offer" | "have-local-pranswer" | "have-remote-offer" | "have-remote-pranswer" | "stable";
+export type IceGatheringState = "complete" | "gathering" | "new";
+export type SdpType = "answer" | "offer" | "pranswer" | "rollback";
+export type TransceiverDirection = "inactive" | "recvonly" | "sendonly" | "sendrecv" | "stopped";
+export interface SessionDescription {
+    readonly sdp: string;
+    readonly type: SdpType;
+}
+
+export interface AnswerOptions {}
+
+export interface OfferOptions {
+    iceRestart?: boolean;
+    offerToReceiveAudio?: boolean;
+    offerToReceiveVideo?: boolean;
+}
+
+export interface SessionDescriptionInit {
+    sdp?: string;
+    type: SdpType;
+}
+
+export interface LocalSessionDescriptionInit {
+    sdp?: string;
+    type?: SdpType;
+}
+
+/** A WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed. */
+export interface PeerConnection {
+    readonly connectionState: PeerConnectionState;
+    readonly iceConnectionState: IceConnectionState;
+    readonly iceGatheringState: IceGatheringState;
+    readonly localDescription: SessionDescription | null;
+    readonly remoteDescription: SessionDescription | null;
+    readonly signalingState: SignalingState;
+    addIceCandidate(candidate?: RTCIceCandidateInit): Promise<void>;
+    addTrack(track: Track, ...streams: Stream[]): Sender;
+    close(): void;
+    createAnswer(options?: AnswerOptions): Promise<SessionDescriptionInit>;
+    createDataChannel(label: string, dataChannelDict?: DataChannelInit): DataChannel;
+    createOffer(options?: OfferOptions): Promise<SessionDescriptionInit>;
+    getReceivers(): Receiver[];
+    getSenders(): Sender[];
+    getTransceivers(): Transceiver[];
+    removeTrack(sender: Sender): void;
+    restartIce(): void;
+    setLocalDescription(description?: LocalSessionDescriptionInit): Promise<void>;
+    setRemoteDescription(description: SessionDescriptionInit): Promise<void>;
+    addEventListener<K extends keyof PeerConnectionEventMap>(type: K, listener: (this: PeerConnection, ev: PeerConnectionEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof PeerConnectionEventMap>(type: K, listener: (this: PeerConnection, ev: PeerConnectionEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    getStats(selector?: Track | null): Promise<StatsReport>;
+}
+
+
+
+interface StatsReport {
+    forEach(callbackfn: (value: any, key: string, parent: StatsReport) => void, thisArg?: any): void;
+}
+
+export interface Receiver {
+    readonly track: Track;
+}
+
+export interface Sender {
+    readonly track: Track | null;
+    replaceTrack(withTrack: Track | null): Promise<void>;
+}
+
+export interface Transceiver {
+    readonly currentDirection: TransceiverDirection | null;
+    direction: TransceiverDirection;
+    readonly mid: string | null;
+    readonly receiver: Receiver;
+    readonly sender: Sender;
+    stop(): void;
+}
--- a/src/platform/types/types.ts
+++ b/src/platform/types/types.ts
@ -43,3 +43,11 @@ export type File = {
    readonly name: string;
    readonly blob: IBlobHandle;
 }
+
+export interface Timeout {
+    elapsed(): Promise<void>;
+    abort(): void;
+    dispose(): void;
+};
+
+export type TimeoutCreator = (timeout: number) => Timeout;
--- a/src/platform/web/Platform.js
+++ b/src/platform/web/Platform.js
@ -21,8 +21,9 @@ import {SessionInfoStorage} from "../../matrix/sessioninfo/localstorage/SessionI
 import {SettingsStorage} from "./dom/SettingsStorage.js";
 import {Encoding} from "./utils/Encoding.js";
 import {OlmWorker} from "../../matrix/e2ee/OlmWorker.js";
-import {IDBLogger} from "../../logging/IDBLogger";
-import {ConsoleLogger} from "../../logging/ConsoleLogger";
+import {IDBLogPersister} from "../../logging/IDBLogPersister";
+import {ConsoleReporter} from "../../logging/ConsoleReporter";
+import {Logger} from "../../logging/Logger";
 import {RootView} from "./ui/RootView.js";
 import {Clock} from "./dom/Clock.js";
 import {ServiceWorkerHandler} from "./dom/ServiceWorkerHandler.js";
@ -38,6 +39,8 @@ import {downloadInIframe} from "./dom/download.js";
 import {Disposables} from "../../utils/Disposables";
 import {parseHTML} from "./parsehtml.js";
 import {handleAvatarError} from "./ui/avatar";
+import {MediaDevicesWrapper} from "./dom/MediaDevices";
+import {DOMWebRTC} from "./dom/WebRTC";

 function addScript(src) {
    return new Promise(function (resolve, reject) {
@ -126,7 +129,7 @@ function adaptUIOnVisualViewportResize(container) {
 }

 export class Platform {
-    constructor({ container, assetPaths, config, configURL, options = null, cryptoExtras = null }) {
+    constructor({ container, assetPaths, config, configURL, logger, options = null, cryptoExtras = null }) {
        this._container = container;
        this._assetPaths = assetPaths;
        this._config = config;
@ -135,7 +138,7 @@ export class Platform {
        this.clock = new Clock();
        this.encoding = new Encoding();
        this.random = Math.random;
-        this._createLogger(options?.development);
+        this.logger = logger ?? this._createLogger(options?.development);
        this.history = new History();
        this.onlineStatus = new OnlineStatus();
        this._serviceWorkerHandler = null;
@ -164,6 +167,8 @@ export class Platform {
        this._disposables = new Disposables();
        this._olmPromise = undefined;
        this._workerPromise = undefined;
+        this.mediaDevices = new MediaDevicesWrapper(navigator.mediaDevices);
+        this.webRTC = new DOMWebRTC();
    }

    async init() {
@ -181,6 +186,7 @@ export class Platform {
    }

    _createLogger(isDevelopment) {
+        const logger = new Logger({platform: this});
        // Make sure that loginToken does not end up in the logs
        const transformer = (item) => {
            if (item.e?.stack) {
@ -188,11 +194,12 @@ export class Platform {
            }
            return item;
        };
+        const logPersister = new IDBLogPersister({name: "hydrogen_logs", platform: this, serializedTransformer: transformer});
+        logger.addReporter(logPersister);
        if (isDevelopment) {
-            this.logger = new ConsoleLogger({platform: this});
-        } else {
-            this.logger = new IDBLogger({name: "hydrogen_logs", platform: this, serializedTransformer: transformer});
+            logger.addReporter(new ConsoleReporter());
        }
+        return logger;
    }

    get updateService() {
@ -316,24 +323,22 @@ import {LogItem} from "../../logging/LogItem";
 export function tests() {
    return {
        "loginToken should not be in logs": (assert) => {
-            const transformer = (item) => {
-                if (item.e?.stack) {
-                    item.e.stack = item.e.stack.replace(/(?<=\/\?loginToken=).+/, "<snip>");
+            const logPersister = Object.create(IDBLogPersister.prototype);
+            logPersister._queuedItems = [];
+            logPersister.options = {
+                serializedTransformer: (item) => {
+                    if (item.e?.stack) {
+                        item.e.stack = item.e.stack.replace(/(?<=\/\?loginToken=).+/, "<snip>");
+                    }
+                    return item;
                }
-                return item;
            };
-            const logger = {
-                _queuedItems: [],
-                _serializedTransformer: transformer,
-                _now: () => {}
-            };
-            logger.persist = IDBLogger.prototype._persistItem.bind(logger);
+            const logger = { _now() {return 5;} };
            const logItem = new LogItem("test", 1, logger);
            logItem.error = new Error();
            logItem.error.stack = "main http://localhost:3000/src/main.js:55\n<anonymous> http://localhost:3000/?loginToken=secret:26"
-            logger.persist(logItem, null, false);
-            const item = logger._queuedItems.pop();
-            console.log(item);
+            logPersister.reportItem(logItem, null, false);
+            const item = logPersister._queuedItems.pop();
            assert.strictEqual(item.json.search("secret"), -1);
        }
    };
--- a/src/platform/web/dom/History.js
+++ b/src/platform/web/dom/History.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableValue} from "../../../observable/ObservableValue";
+import {BaseObservableValue} from "../../../observable/value/BaseObservableValue";

 export class History extends BaseObservableValue {
    handleEvent(event) {
--- a/src/platform/web/dom/MediaDevices.ts
+++ b/src/platform/web/dom/MediaDevices.ts
@ -0,0 +1,235 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2022 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 {MediaDevices as IMediaDevices, Stream, Track, TrackKind, VolumeMeasurer, DeviceFilter} from "../../types/MediaDevices";
+import type {BaseObservableMap} from "../../../observable/map/BaseObservableMap";
+import {ObservableMap} from "../../../observable/map/ObservableMap";
+
+const POLLING_INTERVAL = 200; // ms
+export const SPEAKING_THRESHOLD = -60; // dB
+const SPEAKING_SAMPLE_COUNT = 8; // samples
+
+export class MediaDevicesWrapper implements IMediaDevices {
+    constructor(private readonly mediaDevices: MediaDevices) {}
+
+    async observeDevices(): Promise<BaseObservableMap<string, MediaDeviceInfo>> {
+        const initialDevices = await this.mediaDevices.enumerateDevices();
+        return new DeviceObservableMap(initialDevices, this.mediaDevices);
+    }
+
+    async getMediaTracks(audio: boolean | DeviceFilter, video: boolean | DeviceFilter): Promise<Stream> {
+        const stream = await this.mediaDevices.getUserMedia(this.getUserMediaContraints(audio, video));
+        return stream as Stream;
+    }
+
+    async getScreenShareTrack(): Promise<Stream | undefined> {
+        const stream = await this.mediaDevices.getDisplayMedia(this.getScreenshareContraints());
+        return stream as Stream;
+    }
+
+    private getUserMediaContraints(audio: boolean | DeviceFilter, video: boolean | DeviceFilter): MediaStreamConstraints {
+        const isWebkit = !!navigator["webkitGetUserMedia"];
+
+        return {
+            audio: audio
+                ? {
+                    deviceId: typeof audio !== "boolean" ? { ideal: audio.deviceId } : undefined,
+                }
+                : false,
+            video: video
+                ? {
+                    deviceId: typeof video !== "boolean" ? { ideal: video.deviceId } : undefined,
+                    /* We want 640x360.  Chrome will give it only if we ask exactly,
+                   FF refuses entirely if we ask exactly, so have to ask for ideal
+                   instead
+                   XXX: Is this still true?
+                 */
+                    width: isWebkit ? { exact: 640 } : { ideal: 640 },
+                    height: isWebkit ? { exact: 360 } : { ideal: 360 },
+                }
+                : false,
+        };
+    }
+
+    private getScreenshareContraints(): DisplayMediaStreamConstraints {
+        return {
+            audio: false,
+            video: true,
+        };
+    }
+
+    createVolumeMeasurer(stream: Stream, callback: () => void): VolumeMeasurer {
+        return new WebAudioVolumeMeasurer(stream as MediaStream, callback);
+    }
+}
+
+export class WebAudioVolumeMeasurer implements VolumeMeasurer {
+    private measuringVolumeActivity = false;
+    private audioContext?: AudioContext;
+    private analyser: AnalyserNode;
+    private frequencyBinCount: Float32Array;
+    private speakingThreshold = SPEAKING_THRESHOLD;
+    private speaking = false;
+    private volumeLooperTimeout: number;
+    private speakingVolumeSamples: number[];
+    private callback: () => void;
+    private stream: MediaStream;
+
+    constructor(stream: MediaStream, callback: () => void) {
+        this.stream = stream;
+        this.callback = callback;
+        this.speakingVolumeSamples = new Array(SPEAKING_SAMPLE_COUNT).fill(-Infinity);
+        this.initVolumeMeasuring();
+        this.measureVolumeActivity(true);
+    }
+
+    get isSpeaking(): boolean { return this.speaking; }
+    /**
+     * Starts emitting volume_changed events where the emitter value is in decibels
+     * @param enabled emit volume changes
+     */
+    private measureVolumeActivity(enabled: boolean): void {
+        if (enabled) {
+            if (!this.audioContext || !this.analyser || !this.frequencyBinCount) return;
+
+            this.measuringVolumeActivity = true;
+            this.volumeLooper();
+        } else {
+            this.measuringVolumeActivity = false;
+            this.speakingVolumeSamples.fill(-Infinity);
+            this.callback();
+        }
+    }
+
+    private initVolumeMeasuring(): void {
+        const AudioContext = window.AudioContext || window["webkitAudioContext"] as undefined | typeof window.AudioContext;
+        if (!AudioContext) return;
+
+        this.audioContext = new AudioContext();
+
+        this.analyser = this.audioContext.createAnalyser();
+        this.analyser.fftSize = 512;
+        this.analyser.smoothingTimeConstant = 0.1;
+
+        const mediaStreamAudioSourceNode = this.audioContext.createMediaStreamSource(this.stream);
+        mediaStreamAudioSourceNode.connect(this.analyser);
+
+        this.frequencyBinCount = new Float32Array(this.analyser.frequencyBinCount);
+    }
+
+    public setSpeakingThreshold(threshold: number) {
+        this.speakingThreshold = threshold;
+    }
+
+    get volume(): number {
+        for (let i = SPEAKING_SAMPLE_COUNT -1; i <= 0; i -= 1) {
+            const sample = this.speakingVolumeSamples[i];
+            if (Number.isSafeInteger(sample)) {
+                return sample;
+            }
+        }
+        return 0;
+    }
+
+    private volumeLooper = () => {
+        if (!this.analyser) return;
+
+        if (!this.measuringVolumeActivity) return;
+
+        this.analyser.getFloatFrequencyData(this.frequencyBinCount);
+
+        let maxVolume = -Infinity;
+        for (let i = 0; i < this.frequencyBinCount.length; i++) {
+            if (this.frequencyBinCount[i] > maxVolume) {
+                maxVolume = this.frequencyBinCount[i];
+            }
+        }
+
+        this.speakingVolumeSamples.shift();
+        this.speakingVolumeSamples.push(maxVolume);
+
+        this.callback();
+
+        let newSpeaking = false;
+
+        for (let i = 0; i < this.speakingVolumeSamples.length; i++) {
+            const volume = this.speakingVolumeSamples[i];
+
+            if (volume > this.speakingThreshold) {
+                newSpeaking = true;
+                break;
+            }
+        }
+
+        if (this.speaking !== newSpeaking) {
+            this.speaking = newSpeaking;
+            this.callback();
+        }
+
+        this.volumeLooperTimeout = setTimeout(this.volumeLooper, POLLING_INTERVAL) as unknown as number;
+    };
+
+    public dispose(): void {
+        clearTimeout(this.volumeLooperTimeout);
+        this.analyser.disconnect();
+        this.audioContext?.close();
+    }
+}
+
+class DeviceObservableMap extends ObservableMap<string, MediaDeviceInfo> {
+    private updatePromise?: Promise<void> = undefined;
+
+    constructor(initialDevices: ReadonlyArray<MediaDeviceInfo>, private readonly mediaDevices: MediaDevices) {
+        super();
+        this.processDevices(initialDevices);
+    }
+
+    handleEvent(evt) {
+        if (evt.type === "devicechange") {
+            // serialize updates
+            this.updatePromise = (this.updatePromise ?? Promise.resolve()).then(() => this.updateDevices());
+        }
+    }
+
+    private async updateDevices() {
+        const devices = await this.mediaDevices.enumerateDevices();
+        this.processDevices(devices);
+    }
+
+    private processDevices(devices: ReadonlyArray<MediaDeviceInfo>) {
+        const inputDevices = devices.filter(d => d.kind === "videoinput" || d.kind === "audioinput");
+        for (const [,device] of this) {
+            const stillPresent = inputDevices.some(d => d.deviceId === device.deviceId);
+            if (!stillPresent) {
+                this.remove(device.deviceId);
+            }
+        }
+        for (const device of inputDevices) {
+            this.add(device.deviceId, device);
+        }
+    }
+
+    onSubscribeFirst() {
+        super.onSubscribeFirst();
+        this.mediaDevices.addEventListener("devicechange", this);
+    }
+
+    onUnsubscribeLast() {
+        this.mediaDevices.removeEventListener("devicechange", this);
+        super.onUnsubscribeLast();
+    }
+}
--- a/src/platform/web/dom/OnlineStatus.js
+++ b/src/platform/web/dom/OnlineStatus.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableValue} from "../../../observable/ObservableValue";
+import {BaseObservableValue} from "../../../observable/value/BaseObservableValue";

 export class OnlineStatus extends BaseObservableValue {
    constructor() {
--- a/src/platform/web/dom/WebRTC.ts
+++ b/src/platform/web/dom/WebRTC.ts
@ -0,0 +1,64 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 {Stream, Track, TrackKind} from "../../types/MediaDevices";
+import {WebRTC, Sender, PeerConnection} from "../../types/WebRTC";
+import {SDPStreamMetadataPurpose} from "../../../matrix/calls/callEventTypes";
+
+const POLLING_INTERVAL = 200; // ms
+export const SPEAKING_THRESHOLD = -60; // dB
+const SPEAKING_SAMPLE_COUNT = 8; // samples
+
+export class DOMWebRTC implements WebRTC {
+    createPeerConnection(forceTURN: boolean, turnServers: RTCIceServer[], iceCandidatePoolSize): PeerConnection {
+        return new RTCPeerConnection({
+            iceTransportPolicy: forceTURN ? 'relay' : undefined,
+            iceServers: turnServers,
+            iceCandidatePoolSize: iceCandidatePoolSize,
+        }) as PeerConnection;
+    }
+
+    prepareSenderForPurpose(peerConnection: PeerConnection, sender: Sender, purpose: SDPStreamMetadataPurpose): void {
+        if (purpose === SDPStreamMetadataPurpose.Screenshare) {
+            this.getRidOfRTXCodecs(peerConnection as RTCPeerConnection, sender as RTCRtpSender);
+        }
+    }
+
+    private getRidOfRTXCodecs(peerConnection: RTCPeerConnection, sender: RTCRtpSender): void {
+        // RTCRtpReceiver.getCapabilities and RTCRtpSender.getCapabilities don't seem to be supported on FF
+        if (!RTCRtpReceiver.getCapabilities || !RTCRtpSender.getCapabilities) return;
+
+        const recvCodecs = RTCRtpReceiver.getCapabilities("video")?.codecs ?? [];
+        const sendCodecs = RTCRtpSender.getCapabilities("video")?.codecs ?? [];
+        const codecs = [...sendCodecs, ...recvCodecs];
+
+        for (const codec of codecs) {
+            if (codec.mimeType === "video/rtx") {
+                const rtxCodecIndex = codecs.indexOf(codec);
+                codecs.splice(rtxCodecIndex, 1);
+            }
+        }
+
+        const transceiver = peerConnection.getTransceivers().find(t => t.sender === sender);
+        if (transceiver && (
+                transceiver.sender.track?.kind === "video" ||
+                transceiver.receiver.track?.kind === "video"
+            )
+        ) {
+            transceiver.setCodecPreferences(codecs);
+        }
+    }
+}
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@ -1155,3 +1155,56 @@ button.RoomDetailsView_row::after {
    background-position: center;
    background-size: 36px;
 }
+
+.CallView {
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+.CallView ul {
+    display: flex;
+    margin: 0;
+    gap: 12px;
+    padding: 0;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.StreamView {
+    width: 360px;
+    min-height: 200px;
+    border: 2px var(--accent-color) solid;
+    display: grid;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: black;
+}
+
+.StreamView > * {
+    grid-column: 1;
+    grid-row: 1;
+} 
+
+.StreamView video {
+    width: 100%;
+}
+
+.StreamView_avatar {
+    align-self: center;
+    justify-self: center;
+}
+
+.StreamView_muteStatus {
+    align-self: end;
+    justify-self: start;
+    color: var(--text-color--lighter-80);
+}
+
+.StreamView_muteStatus.microphoneMuted::before {
+    content: "mic muted";
+}
+
+.StreamView_muteStatus.cameraMuted::before {
+    content: "cam muted";
+}
+
--- a/src/platform/web/ui/general/TemplateView.ts
+++ b/src/platform/web/ui/general/TemplateView.ts
@ -181,7 +181,7 @@ export class TemplateBuilder<T extends IObservableValue> {
        this._templateView._addEventListener(node, name, fn, useCapture);
    }

-    _addAttributeBinding(node: Element, name: string, fn: (value: T) => boolean | string): void {
+    _addAttributeBinding(node: Element, name: string, fn: AttributeBinding<T>): void {
        let prevValue: string | boolean | undefined = undefined;
        const binding = () => {
            const newValue = fn(this._value);
@ -337,7 +337,7 @@ export class TemplateBuilder<T extends IObservableValue> {
    // Special case of mapView for a TemplateView.
    // Always creates a TemplateView, if this is optional depending
    // on mappedValue, use `if` or `mapView`
-    map<R>(mapFn: (value: T) => R, renderFn: (mapped: R, t: Builder<T>, vm: T) => ViewNode): ViewNode {
+    map<R>(mapFn: (value: T) => R, renderFn: (mapped: R, t: Builder<T>, vm: T) => ViewNode | undefined): ViewNode {
        return this.mapView(mapFn, mappedValue => {
            return new InlineTemplateView(this._value, (t, vm) => {
                const rootNode = renderFn(mappedValue, t, vm);
@ -371,17 +371,17 @@ export class TemplateBuilder<T extends IObservableValue> {
    event handlers, ...
    You should not call the TemplateBuilder (e.g. `t.xxx()`) at all from the side effect,
    instead use tags from html.ts to help you construct any DOM you need. */
-    mapSideEffect<R>(mapFn: (value: T) => R, sideEffect: (newV: R, oldV: R | undefined) => void) {
+    mapSideEffect<R>(mapFn: (value: T) => R, sideEffect: (newV: R, oldV: R | undefined, value: T) => void) {
        let prevValue = mapFn(this._value);
        const binding = () => {
            const newValue = mapFn(this._value);
            if (prevValue !== newValue) {
-                sideEffect(newValue, prevValue);
+                sideEffect(newValue, prevValue, this._value);
                prevValue = newValue;
            }
        };
        this._addBinding(binding);
-        sideEffect(prevValue, undefined);
+        sideEffect(prevValue, undefined, this._value);
    }
 }

--- a/src/platform/web/ui/session/room/CallView.ts
+++ b/src/platform/web/ui/session/room/CallView.ts
@ -0,0 +1,63 @@
+/*
+Copyright 2022 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 {TemplateView, Builder} from "../../general/TemplateView";
+import {AvatarView} from "../../AvatarView";
+import {ListView} from "../../general/ListView";
+import {Stream} from "../../../../types/MediaDevices";
+import type {CallViewModel, CallMemberViewModel, IStreamViewModel} from "../../../../../domain/session/room/CallViewModel";
+
+export class CallView extends TemplateView<CallViewModel> {
+    render(t: Builder<CallViewModel>, vm: CallViewModel): Element {
+        return t.div({class: "CallView"}, [
+            t.p(vm => `Call ${vm.name} (${vm.id})`),
+            t.view(new ListView({list: vm.memberViewModels}, vm => new StreamView(vm))),
+            t.div({class: "buttons"}, [
+                t.button({onClick: () => vm.leave()}, "Leave"),
+                t.button({onClick: () => vm.toggleVideo()}, "Toggle video"),
+            ])
+        ]);
+    }
+}
+
+class StreamView extends TemplateView<IStreamViewModel> {
+    render(t: Builder<IStreamViewModel>, vm: IStreamViewModel): Element {
+        const video = t.video({
+            autoplay: true,
+            className: {
+                hidden: vm => vm.isCameraMuted
+            }
+        }) as HTMLVideoElement;
+        t.mapSideEffect(vm => vm.stream, stream => {
+            video.srcObject = stream as MediaStream;
+        });
+        return t.div({className: "StreamView"}, [
+            video,
+            t.div({className: {
+                StreamView_avatar: true,
+                hidden: vm => !vm.isCameraMuted
+            }}, t.view(new AvatarView(vm, 64), {parentProvidesUpdates: true})),
+            t.div({
+                className: {
+                    StreamView_muteStatus: true,
+                    hidden: vm => !vm.isCameraMuted && !vm.isMicrophoneMuted,
+                    microphoneMuted: vm => vm.isMicrophoneMuted && !vm.isCameraMuted,
+                    cameraMuted: vm => vm.isCameraMuted,
+                }
+            })
+        ]);
+    }
+}
--- a/src/platform/web/ui/session/room/RoomView.js
+++ b/src/platform/web/ui/session/room/RoomView.js
@ -23,6 +23,7 @@ import {TimelineLoadingView} from "./TimelineLoadingView.js";
 import {MessageComposer} from "./MessageComposer.js";
 import {RoomArchivedView} from "./RoomArchivedView.js";
 import {AvatarView} from "../../AvatarView.js";
+import {CallView} from "./CallView";

 export class RoomView extends TemplateView {
    constructor(vm, viewClassForTile) {
@ -53,6 +54,7 @@ export class RoomView extends TemplateView {
            ]),
            t.div({className: "RoomView_body"}, [
                t.div({className: "RoomView_error"}, vm => vm.error),
+                t.mapView(vm => vm.callViewModel, callViewModel => callViewModel ? new CallView(callViewModel) : null),
                t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
                    return timelineViewModel ?
                        new TimelineView(timelineViewModel, this._viewClassForTile) :
@ -70,6 +72,7 @@ export class RoomView extends TemplateView {
            const vm = this.value;
            const options = [];
            options.push(Menu.option(vm.i18n`Room details`, () => vm.openDetailsPanel()))
+            options.push(Menu.option(vm.i18n`Start call`, () => vm.startCall()))
            if (vm.canLeave) {
                options.push(Menu.option(vm.i18n`Leave room`, () => this._confirmToLeaveRoom()).setDestructive());
            }
--- a/src/platform/web/ui/session/room/common.ts
+++ b/src/platform/web/ui/session/room/common.ts
@ -24,6 +24,7 @@ import {AnnouncementView} from "./timeline/AnnouncementView.js";
 import {RedactedView} from "./timeline/RedactedView.js";
 import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
 import {GapView} from "./timeline/GapView.js";
+import {CallTileView} from "./timeline/CallTileView";
 import type {TileViewConstructor, ViewClassForEntryFn} from "./TimelineView";

 export function viewClassForTile(vm: SimpleTile): TileViewConstructor {
@ -47,6 +48,8 @@ export function viewClassForTile(vm: SimpleTile): TileViewConstructor {
            return MissingAttachmentView;
        case "redacted":
            return RedactedView;
+        case "call":
+            return CallTileView;
        default:
            throw new Error(`Tiles of shape "${vm.shape}" are not supported, check the tileClassForEntry function in the view model`);
    }
--- a/src/platform/web/ui/session/room/timeline/CallTileView.ts
+++ b/src/platform/web/ui/session/room/timeline/CallTileView.ts
@ -0,0 +1,40 @@
+/*
+Copyright 2022 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 {TemplateView} from "../../../general/TemplateView";
+import type {CallTile} from "../../../../../../domain/session/room/timeline/tiles/CallTile";
+
+export class CallTileView extends TemplateView<CallTile> {
+    render(t, vm) {
+        return t.li(
+            {className: "AnnouncementView"},
+            t.div([
+                vm => vm.label,
+                t.button({className: "CallTileView_join", hidden: vm => !vm.canJoin}, "Join"),
+                t.button({className: "CallTileView_leave", hidden: vm => !vm.canLeave}, "Leave")
+            ])
+        );
+    }
+    
+    /* This is called by the parent ListView, which just has 1 listener for the whole list */
+    onClick(evt) {
+        if (evt.target.className === "CallTileView_join") {
+            this.value.join();
+        } else if (evt.target.className === "CallTileView_leave") {
+            this.value.leave();
+        }
+    }
+}
--- a/src/utils/AbortableOperation.ts
+++ b/src/utils/AbortableOperation.ts
@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {BaseObservableValue, ObservableValue} from "../observable/ObservableValue";
+import {BaseObservableValue} from "../observable/value/BaseObservableValue";
+import {ObservableValue} from "../observable/value/ObservableValue";

 export interface IAbortable {
    abort();
--- a/src/utils/LRUCache.ts
+++ b/src/utils/LRUCache.ts
@ -71,7 +71,7 @@ export class BaseLRUCache<T> {
 export class LRUCache<T, K> extends BaseLRUCache<T> {
    private _keyFn: (T) => K;

-    constructor(limit, keyFn: (T) => K) {
+    constructor(limit: number, keyFn: (T) => K) {
        super(limit);
        this._keyFn = keyFn;
    }
--- a/src/utils/recursivelyAssign.ts
+++ b/src/utils/recursivelyAssign.ts
@ -0,0 +1,39 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
+*/
+
+
+/**
+ * This function is similar to Object.assign() but it assigns recursively and
+ * allows you to ignore nullish values from the source
+ *
+ * @param {Object} target
+ * @param {Object} source
+ * @returns the target object
+ */
+export function recursivelyAssign(target: Object, source: Object, ignoreNullish = false): any {
+    for (const [sourceKey, sourceValue] of Object.entries(source)) {
+        if (target[sourceKey] instanceof Object && sourceValue) {
+            recursivelyAssign(target[sourceKey], sourceValue);
+            continue;
+        }
+        if ((sourceValue !== null && sourceValue !== undefined) || !ignoreNullish) {
+            target[sourceKey] = sourceValue;
+            continue;
+        }
+    }
+    return target;
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -1485,10 +1485,10 @@ type-fest@^0.20.2:
  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==

-typescript@^4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+typescript@^4.4:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
+  integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==

 typeson-registry@^1.0.0-alpha.20:
  version "1.0.0-alpha.39"
Author	SHA1	Message	Date
Bruno Windels	add1a2c52f	WIP	2022-05-10 09:58:31 +02:00
Bruno Windels	a2a17dbf7a	fix unit test	2022-05-09 14:50:52 +02:00
Bruno Windels	cd8fac2872	update TODO	2022-05-09 14:31:19 +02:00
Bruno Windels	8140e4f2c3	fix typescript errors	2022-05-09 14:23:57 +02:00
Bruno Windels	814cee214c	rename asJSON to toJSON	2022-05-06 17:23:07 +02:00
Bruno Windels	d69b1dc3e2	expose log items for exposing debugging info in sdk users	2022-05-06 17:06:56 +02:00
Bruno Windels	fc08fc3744	always log device removal in same way and prevent call id overwritten	2022-05-06 16:59:26 +02:00
Bruno Windels	0fdc6b1c3a	log both to idb storage and console, include open items in export refactor logging api so a logger has multiple reporters, IDBLogPersister and/or ConsoleReporter. By default, we add the idb persister for production and both for dev You can also inject your own logger when creating the platform now.	2022-05-06 15:54:45 +02:00
Bruno Windels	1a08616df1	logging improvements	2022-05-04 18:44:11 +02:00
Bruno Windels	1a0b11ff7e	also log payload when receiving to_device call message, help debug with thirdroom	2022-04-29 14:59:19 +01:00
Bruno Windels	c1c08e9eb0	more logging of callId and sessionIds	2022-04-29 14:58:44 +01:00
Bruno Windels	9938071e1c	more sessionId logging	2022-04-29 14:34:03 +01:00
Bruno Windels	bb92d2e30d	log session id when adding a member entry	2022-04-29 14:19:10 +01:00
Bruno Windels	8e2e92cd2c	this timer should not fire after disposing	2022-04-29 10:11:12 +01:00
Bruno Windels	e1974711f3	dont close this when disconnecting as long as we haven't restructured the log items in general, we can always connect again fr now and assume to reuse the same log item	2022-04-28 16:56:32 +01:00
Bruno Windels	d346f4a3fb	add & remove rather than update when session id changed	2022-04-28 16:52:42 +01:00
Bruno Windels	3d83fda69f	some more cleanup	2022-04-28 16:52:17 +01:00
Bruno Windels	2d9b69751f	some logging cleanup	2022-04-28 16:52:00 +01:00
Bruno Windels	0be75d9c59	update the TODO	2022-04-28 12:45:15 +01:00
Bruno Windels	a91bcf5d22	ensure there is no race between reconnecting & updating the session id it's probably fine as connect has to wait to receive the negotiationneeded event before it can send out an invite, but just to be sure update the session id beforehand	2022-04-28 12:44:13 +01:00
Bruno Windels	aa709ee6e9	make text white for now	2022-04-27 19:41:42 +02:00
Bruno Windels	b03b296391	comments, todo housekeeping	2022-04-27 19:41:25 +02:00
Bruno Windels	4f2999f8d8	reconnect when detecting session id change, so we send invite if needed	2022-04-27 19:41:02 +02:00
Bruno Windels	bffce7fafe	more logging	2022-04-27 19:40:49 +02:00
Bruno Windels	6394138c4a	fix isMuted logic in view model	2022-04-27 19:40:13 +02:00
Bruno Windels	be04eeded0	always reevaluate remote media when receiving a new remote track not just when we don't know the stream already this caused the video track to not appear when the other party sends the invite. Also added more logging	2022-04-27 17:33:27 +02:00
Bruno Windels	230ccd95ab	reset retryCount when disconnecting	2022-04-27 17:33:12 +02:00
Bruno Windels	6b22078140	prevent localMedia being disposed when disconnecting on session change this would cause us to not send any media anymore and a black screen on the other side that just refreshed	2022-04-27 11:34:05 +01:00
Bruno Windels	beeb191588	reset member when seeing a new session id also buffer to_device messages for members we don't have a member event for already.	2022-04-26 21:11:41 +02:00
Bruno Windels	da654a8c59	some cleanup	2022-04-26 17:56:46 +02:00
Bruno Windels	eea3830146	emit change when muting so our own video feed gets hidden in the view	2022-04-26 16:18:49 +02:00
Bruno Windels	9ab75e8ed4	fix c/p error mixing up audio and video muting	2022-04-26 15:48:03 +02:00
Bruno Windels	b46ec8bac4	Merge branch 'bwindels/calls-wip' into bwindels/calls	2022-04-26 14:29:04 +02:00
Bruno Windels	f61064c462	nicer UI for calls, show avatar when muted, muted status	2022-04-26 14:27:28 +02:00
Bruno Windels	433dc957ee	utility: turn observable value into observable map with one K,V pair	2022-04-26 14:26:56 +02:00
Bruno Windels	c7f7d24273	utility: observable value that emits when event is fired	2022-04-26 14:26:33 +02:00
Bruno Windels	330f234b5a	prefer undefined over null	2022-04-26 14:21:19 +02:00
Bruno Windels	3198ca6a92	expose remote mute settings	2022-04-26 14:20:44 +02:00
Bruno Windels	3767f6a420	put theme back to default	2022-04-26 14:19:13 +02:00
Bruno Windels	6e1174e03d	Merge branch 'master' into bwindels/calls-wip	2022-04-25 16:44:44 +02:00
Bruno Windels	14dbe340c7	Merge branch 'master' into bwindels/calls-wip	2022-04-25 14:17:21 +02:00
Bruno Windels	a52423856d	template view: remove type duplication	2022-04-25 14:05:31 +02:00
Bruno Windels	22df062bbb	fix observable typescript errors	2022-04-25 14:05:02 +02:00
Bruno Windels	8b16782270	Merge branch 'master' into bwindels/calls-wip	2022-04-25 12:43:01 +02:00
Bruno Windels	39ecc6cc6d	WIP typing errors	2022-04-25 11:27:33 +02:00
Bruno Windels	cdb2a79b62	add muting again, separate from changing media	2022-04-22 14:48:14 +01:00
Bruno Windels	ac60d1b61d	remove thick abstraction layer instead just copy the DOM typing and make it part of the platform layer	2022-04-21 17:40:45 +02:00
Bruno Windels	baa884e9d0	Merge branch 'bwindels/calls-wip' into bwindels/calls-thinner-abstraction	2022-04-21 10:20:03 +02:00
Bruno Windels	10a6269147	always send new metadata after calling setMedia	2022-04-21 10:15:57 +02:00
Bruno Windels	55c6dcf613	don't re-clone streams when not needed	2022-04-21 10:11:24 +02:00
Bruno Windels	99769eb84e	implement basic renegotiation	2022-04-21 10:10:49 +02:00
Bruno Windels	82ffb557e5	update TODO	2022-04-21 10:09:31 +02:00
Bruno Windels	d6b239e58f	ensure we always set the correct session id when joining	2022-04-20 16:42:20 +02:00
Bruno Windels	4a8af83c8f	WIP	2022-04-20 10:57:42 +02:00
Bruno Windels	c42292f1b0	more WIP	2022-04-20 10:57:07 +02:00
Bruno Windels	382fba88bd	WIP for muting	2022-04-14 23:19:44 +02:00
Bruno Windels	468a0a9698	Merge branch 'master' into bwindels/calls	2022-04-14 13:48:34 +02:00
Bruno Windels	ea1c3a2b86	Merge remote-tracking branch 'origin/bwindels/calls' into bwindels/calls	2022-04-14 13:47:23 +02:00
Bruno Windels	021b8cdcdc	send hangup when leaving the call but not when somebody else leaves the call through a member event	2022-04-14 13:45:21 +02:00
Bruno Windels	ff856d843c	ensure all member streams are cloned so we can stop them without affecting the main one also, only stop them when disconnecting from the member, rather then when the peer call ends, as we might want to retry connecting to the peer with the same stream.	2022-04-14 13:44:11 +02:00
Robert Long	55097e4154	Add intent to CallHandler	2022-04-13 13:08:47 -07:00
Robert Long	2d00d10161	Export LocalMedia	2022-04-13 13:08:33 -07:00
Bruno Windels	bc118b5c0b	WIP	2022-04-13 18:34:01 +02:00
Bruno Windels	2d4301fe5a	WIP: expose streams, senders and receivers	2022-04-12 21:20:24 +02:00
Bruno Windels	36dc463d23	update TODO	2022-04-12 21:20:15 +02:00
Bruno Windels	0e9307608b	update TODO	2022-04-12 14:02:57 +02:00
Bruno Windels	2635adb232	hardcode turn server for now	2022-04-12 14:02:38 +02:00
Bruno Windels	797cb23cc7	implement receiving hangup, and retry on connection failure	2022-04-12 14:02:13 +02:00
Bruno Windels	fd5b2aa7bb	only create datachannel on side that sends invite	2022-04-11 16:29:46 +02:00
Bruno Windels	d734a61447	Merge branch 'master' into bwindels/calls	2022-04-11 16:14:34 +02:00
Bruno Windels	a710f394eb	fix lint warning	2022-04-11 15:57:23 +02:00
Bruno Windels	517e796e90	remove obsolete import	2022-04-11 15:56:31 +02:00
Bruno Windels	5cacdcfee0	Add leave button to call view	2022-04-11 15:55:02 +02:00
Bruno Windels	c99fc2ad70	use deviceId getter in Member	2022-04-11 15:54:41 +02:00
Bruno Windels	e0efbaeb4e	show start time in console logger	2022-04-11 15:54:31 +02:00
Bruno Windels	387bad73b0	remove debug alert	2022-04-11 15:54:20 +02:00
Bruno Windels	9be64730b6	don't automatically join a call we create	2022-04-11 15:54:06 +02:00
Bruno Windels	b84c90891c	add very early datachannel support	2022-04-11 15:53:34 +02:00
Bruno Windels	c02e1de001	log when renegotiation would be triggered	2022-04-11 14:55:14 +02:00
Bruno Windels	8e82aad86b	fix logic error that made tracks disappear on the second track event	2022-04-11 14:55:08 +02:00
Bruno Windels	8153060831	only send to target device, not all user devices	2022-04-11 13:39:40 +02:00
Bruno Windels	302d4bc02d	use session id from member event, and also send it for other party	2022-04-11 13:39:18 +02:00
Bruno Windels	1b0abebe8f	remove unused constants	2022-04-11 12:37:05 +02:00
Bruno Windels	156f5b78bf	use session_id from member event to set dest_session_id so our invite event isn't ignored by EC	2022-04-11 12:36:02 +02:00
Bruno Windels	8a06663023	load all call members for now at startup later on we can be smarter and load then once you interact with the call	2022-04-07 16:55:41 +02:00
Bruno Windels	ad140d5af1	only show video feed when connected	2022-04-07 16:55:26 +02:00
Bruno Windels	a78ae52a54	to test with EC, also load prompt calls at startup	2022-04-07 16:55:10 +02:00
Bruno Windels	b133f58f7a	don't throw here for now, although it is probably a sign of why the tracks disappear	2022-04-07 16:54:47 +02:00
Bruno Windels	bade40acc6	log track length	2022-04-07 16:54:36 +02:00
Bruno Windels	1dc46127c3	no need to throw here	2022-04-07 16:54:24 +02:00
Bruno Windels	79411437cf	fix who initiates call, needs to be lower, not higher	2022-04-07 16:53:57 +02:00
Bruno Windels	6472800387	impl session id so EC does not ignore our messages	2022-04-07 16:53:37 +02:00
Bruno Windels	fe6e7b09b5	don't encrypt to_device messages for now	2022-04-07 16:50:16 +02:00
Bruno Windels	ad1cceac86	fix error thrown during request when response code is not used	2022-04-07 10:33:12 +02:00
Bruno Windels	2852834ce3	persist calls so they can be quickly loaded after a restart also use event prefixes compatible with Element Call/MSC	2022-04-07 10:32:43 +02:00
Bruno Windels	1ad5db73a9	some logviewer improvement to help debug call signalling	2022-04-06 18:11:06 +02:00
Bruno Windels	42b470b06b	helper to print open items with console logger	2022-03-30 15:19:07 +02:00
Bruno Windels	d7360e7741	fix multiple device support	2022-03-30 15:18:46 +02:00
Bruno Windels	c54ffd4fc3	support multiple devices in call per user	2022-03-29 17:13:33 +02:00
Bruno Windels	ba45178e04	implement terminate and hangup (currently unused)	2022-03-29 12:01:47 +02:00
Bruno Windels	11a9177592	log state changes in PeerCall	2022-03-29 12:01:47 +02:00
Bruno Windels	4bf171def9	small fixes	2022-03-29 12:01:47 +02:00
Bruno Windels	eaf92b382b	add structured logging to call code	2022-03-29 12:01:47 +02:00
Bruno Windels	a0a07355d4	more improvements, make hangup work	2022-03-29 12:01:47 +02:00
Bruno Windels	0a37fd561e	just enough view code to join a call	2022-03-29 12:01:47 +02:00
Bruno Windels	9efd191f4e	some more fixes	2022-03-29 12:01:46 +02:00
Bruno Windels	cad2aa760d	some fixes	2022-03-29 12:01:46 +02:00
Bruno Windels	4be82cd472	WIP on UI	2022-03-29 12:01:46 +02:00
Bruno Windels	e760b8e556	basic view model setup	2022-03-29 12:01:46 +02:00
Bruno Windels	e482e3aeef	expose mediaDevices and webRTC from platform	2022-03-29 12:01:46 +02:00
Bruno Windels	6daae797e5	fix some ts/lint errors	2022-03-29 12:01:46 +02:00
Bruno Windels	07bc0a2376	move observable values each in their own file	2022-03-29 12:01:46 +02:00
Bruno Windels	1bccbbfa08	fix typescript errors	2022-03-29 12:01:46 +02:00
Bruno Windels	f674492685	remove local media promises (handle them outside of call code) + glare	2022-03-29 12:01:46 +02:00
Bruno Windels	3c160c8a37	handle remote ice candidates	2022-03-29 12:01:46 +02:00
Bruno Windels	b213a45c5c	WIP: work on group call state transitions	2022-03-29 12:01:46 +02:00
Bruno Windels	b2ac4bc291	WIP13	2022-03-29 12:01:46 +02:00
Bruno Windels	6da4a4209c	WIP: work on group calling code	2022-03-29 12:01:46 +02:00
Bruno Windels	4bedd4737b	WIP11	2022-03-29 12:01:46 +02:00
Bruno Windels	60da85d641	WIP10	2022-03-29 12:01:46 +02:00
Bruno Windels	6fe90e60db	WIP9	2022-03-29 12:01:46 +02:00
Bruno Windels	ecf7eab3ee	WIP8 - implement PeerCall.handleAnswer and other things	2022-03-29 12:01:46 +02:00
Bruno Windels	25b0148073	WIP8	2022-03-29 12:01:46 +02:00
Bruno Windels	98b77fc761	WIP7	2022-03-29 12:01:46 +02:00
Bruno Windels	179c7e74b5	WIP6	2022-03-29 12:01:46 +02:00
Bruno Windels	98e1dcf799	WIP5	2022-03-29 12:01:46 +02:00
Bruno Windels	e5f44aecfb	WIP4	2022-03-29 12:01:46 +02:00
Bruno Windels	468841ecea	WIP3	2022-03-29 12:01:46 +02:00
Bruno Windels	b12bc52c4a	WIP2	2022-03-29 12:01:46 +02:00
Bruno Windels	46ebd55092	WIP	2022-03-29 12:01:46 +02:00