From 42ee2d294b1f9f4f3afd3d6ccb737d70ccf95bb6 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Tue, 10 Jan 2023 12:09:10 +0100
Subject: [PATCH] use error view model from call tile

---
 .../session/room/timeline/tiles/CallTile.js   | 26 +++++++++++++++----
 .../ui/session/room/timeline/CallTileView.ts  | 21 ++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/CallTile.js b/src/domain/session/room/timeline/tiles/CallTile.js
index a54af5d8..a3008cb9 100644
--- a/src/domain/session/room/timeline/tiles/CallTile.js
+++ b/src/domain/session/room/timeline/tiles/CallTile.js
@@ -16,7 +16,7 @@ limitations under the License.
 
 import {SimpleTile} from "./SimpleTile.js";
 import {LocalMedia} from "../../../../../matrix/calls/LocalMedia";
-
+import {ErrorViewModel} from "../../../../ErrorViewModel"
 // 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 ...
 
@@ -28,6 +28,7 @@ export class CallTile extends SimpleTile {
         const calls = this.getOption("session").callHandler.calls;
         this._call = calls.get(this._entry.stateKey);
         this._callSubscription = undefined;
+        this._errorViewModel = undefined;
         if (this._call) {
             this._callSubscription = this._call.disposableOn("change", () => {
                 // unsubscribe when terminated
@@ -60,6 +61,10 @@ export class CallTile extends SimpleTile {
         return this._call && this._call.hasJoined;
     }
 
+    get errorViewModel() {
+        return this._errorViewModel;
+    }
+
     get label() {
         if (this._call) {
             if (this._call.hasJoined) {
@@ -78,16 +83,19 @@ export class CallTile extends SimpleTile {
                 const stream = await this.platform.mediaDevices.getMediaTracks(false, true);
                 const localMedia = new LocalMedia().withUserMedia(stream);
                 await this._call.join(localMedia);
-            } catch (err) {
-                this._error = err;
-                this.emitChange("error");
+            } catch (error) {
+                this._reportError(error);
             }
         }
     }
 
     async leave() {
         if (this.canLeave) {
-            this._call.leave();
+            try {
+                this._call.leave();
+            } catch (err) {
+                this._reportError(err);
+            }
         }
     }
 
@@ -96,4 +104,12 @@ export class CallTile extends SimpleTile {
             this._callSubscription = this._callSubscription();
         }
     }
+
+    _reportError(error) {
+        this._errorViewModel = new ErrorViewModel(this.childOptions({error, onClose: () => {
+            this._errorViewModel = undefined;
+            this.emitChange("errorViewModel");    
+        }}));
+        this.emitChange("errorViewModel");
+    }
 }
diff --git a/src/platform/web/ui/session/room/timeline/CallTileView.ts b/src/platform/web/ui/session/room/timeline/CallTileView.ts
index e0ca00bd..5bede510 100644
--- a/src/platform/web/ui/session/room/timeline/CallTileView.ts
+++ b/src/platform/web/ui/session/room/timeline/CallTileView.ts
@@ -14,17 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {TemplateView} from "../../../general/TemplateView";
+import {Builder, TemplateView} from "../../../general/TemplateView";
 import type {CallTile} from "../../../../../../domain/session/room/timeline/tiles/CallTile";
+import {ErrorView} from "../../../general/ErrorView";
 
 export class CallTileView extends TemplateView<CallTile> {
-    render(t, vm) {
+    render(t: Builder<CallTile>, vm: CallTile) {
         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")
+            {className: "CallTileView AnnouncementView"},
+            t.div(
+            [
+                t.if(vm => vm.errorViewModel, t => {
+                    return t.div({className: "CallTileView_error"}, t.view(new ErrorView(vm.errorViewModel, {inline: true})));
+                }),
+                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")
+                ])
             ])
         );
     }