use error view model from call tile

This commit is contained in:
Bruno Windels 2023-01-10 12:09:10 +01:00
parent f15e849f54
commit 42ee2d294b
2 changed files with 35 additions and 12 deletions

View File

@ -16,7 +16,7 @@ limitations under the License.
import {SimpleTile} from "./SimpleTile.js"; import {SimpleTile} from "./SimpleTile.js";
import {LocalMedia} from "../../../../../matrix/calls/LocalMedia"; import {LocalMedia} from "../../../../../matrix/calls/LocalMedia";
import {ErrorViewModel} from "../../../../ErrorViewModel"
// TODO: timeline entries for state events with the same state key and type // 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 ... // 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; const calls = this.getOption("session").callHandler.calls;
this._call = calls.get(this._entry.stateKey); this._call = calls.get(this._entry.stateKey);
this._callSubscription = undefined; this._callSubscription = undefined;
this._errorViewModel = undefined;
if (this._call) { if (this._call) {
this._callSubscription = this._call.disposableOn("change", () => { this._callSubscription = this._call.disposableOn("change", () => {
// unsubscribe when terminated // unsubscribe when terminated
@ -60,6 +61,10 @@ export class CallTile extends SimpleTile {
return this._call && this._call.hasJoined; return this._call && this._call.hasJoined;
} }
get errorViewModel() {
return this._errorViewModel;
}
get label() { get label() {
if (this._call) { if (this._call) {
if (this._call.hasJoined) { if (this._call.hasJoined) {
@ -78,16 +83,19 @@ export class CallTile extends SimpleTile {
const stream = await this.platform.mediaDevices.getMediaTracks(false, true); const stream = await this.platform.mediaDevices.getMediaTracks(false, true);
const localMedia = new LocalMedia().withUserMedia(stream); const localMedia = new LocalMedia().withUserMedia(stream);
await this._call.join(localMedia); await this._call.join(localMedia);
} catch (err) { } catch (error) {
this._error = err; this._reportError(error);
this.emitChange("error");
} }
} }
} }
async leave() { async leave() {
if (this.canLeave) { 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(); this._callSubscription = this._callSubscription();
} }
} }
_reportError(error) {
this._errorViewModel = new ErrorViewModel(this.childOptions({error, onClose: () => {
this._errorViewModel = undefined;
this.emitChange("errorViewModel");
}}));
this.emitChange("errorViewModel");
}
} }

View File

@ -14,17 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License. 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 type {CallTile} from "../../../../../../domain/session/room/timeline/tiles/CallTile";
import {ErrorView} from "../../../general/ErrorView";
export class CallTileView extends TemplateView<CallTile> { export class CallTileView extends TemplateView<CallTile> {
render(t, vm) { render(t: Builder<CallTile>, vm: CallTile) {
return t.li( return t.li(
{className: "AnnouncementView"}, {className: "CallTileView AnnouncementView"},
t.div([ t.div(
vm => vm.label, [
t.button({className: "CallTileView_join", hidden: vm => !vm.canJoin}, "Join"), t.if(vm => vm.errorViewModel, t => {
t.button({className: "CallTileView_leave", hidden: vm => !vm.canLeave}, "Leave") 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")
])
]) ])
); );
} }