mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Element Call: fix widget shown while its still loading (waitForIframeLoad=false) (#12292)

Browse source 
* show loading spinner also if waitForIframeLoad = false
Configure EC so it waits for the content loaded action
!WARNING This breaks compatibility with the full mesh branch.
I would like to discuss here if/when we can do that.

Signed-off-by: Timo K <toger5@hotmail.de>

* stop show loading screen on widget ready (instead of preparing)

Signed-off-by: Timo K <toger5@hotmail.de>

* wait until widget loading is over before comparing screenshots

Signed-off-by: Timo K <toger5@hotmail.de>

* fix waitForIFrame=true widgets

Signed-off-by: Timo K <toger5@hotmail.de>

* test

Signed-off-by: Timo K <toger5@hotmail.de>

* always start with loading true. + cleanup

Signed-off-by: Timo K <toger5@hotmail.de>

* simplify loading

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshots (start not in loading state for waitForIframe = true widgets)

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo 2024-03-12 17:55:01 +01:00 committed by GitHub
parent 753fc2d33a
commit 396829e330
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/views/elements/AppTile.tsx
View file

@ -249,8 +249,9 @@ export default class AppTile extends React.Component<IProps, IState> {
private getNewState(newProps: IProps): IState {
return {
initialising: true, // True while we are mangling the widget URL
// True while the iframe content is loading
loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this.persistKey),
// Don't show loading at all if the widget is ready once the IFrame is loaded (waitForIframeLoad = true).
// We only need the loading screen if the widget sends a contentLoaded event (waitForIframeLoad = false).
loading: !this.props.waitForIframeLoad && !PersistedElement.isMounted(this.persistKey),
// Assume that widget has permission to load if we are the user who
// added it to the room, or if explicitly granted by the user
hasPermissionToLoad: this.hasPermissionToLoad(newProps),
@ -312,7 +313,6 @@ export default class AppTile extends React.Component<IProps, IState> {
if (this.props.room) {
this.context.on(RoomEvent.MyMembership, this.onMyMembership);
}
this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
// Widget action listeners
this.dispatcherRef = dis.register(this.onAction);
@ -352,7 +352,7 @@ export default class AppTile extends React.Component<IProps, IState> {
}
private setupSgListeners(): void {
this.sgWidget?.on("preparing", this.onWidgetPreparing);
this.sgWidget?.on("ready", this.onWidgetReady);
this.sgWidget?.on("error:preparing", this.updateRequiresClient);
// emits when the capabilities have been set up or changed
this.sgWidget?.on("capabilitiesNotified", this.updateRequiresClient);
@ -360,7 +360,7 @@ export default class AppTile extends React.Component<IProps, IState> {
private stopSgListeners(): void {
if (!this.sgWidget) return;
this.sgWidget.off("preparing", this.onWidgetPreparing);
this.sgWidget?.off("ready", this.onWidgetReady);
this.sgWidget.off("error:preparing", this.updateRequiresClient);
this.sgWidget.off("capabilitiesNotified", this.updateRequiresClient);
}
@ -446,8 +446,7 @@ export default class AppTile extends React.Component<IProps, IState> {
this.sgWidget?.stopMessaging({ forceDestroy: true });
}
private onWidgetPreparing = (): void => {
private onWidgetReady = (): void => {
this.setState({ loading: false });
};

2
src/models/Call.ts
View file

@ -758,7 +758,7 @@ export class ElementCall extends Call {
name: "Element Call",
type: WidgetType.CALL.preferred,
url: url.toString(),
// waitForIframeLoad: false,
waitForIframeLoad: false,
data: ElementCall.getWidgetData(
client,
roomId,

4
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View file

@ -47,7 +47,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
id="1"
>
<div
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
class="mx_AppTileBody mx_AppTileBody--large"
>
<div
class="mx_AppTileBody_fadeInSpinner"
@ -412,7 +412,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
</span>
</div>
<div
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
class="mx_AppTileBody mx_AppTileBody--large"
>
<div
class="mx_AppTileBody_fadeInSpinner"

5
test/test-utils/call.ts
View file

@ -38,9 +38,8 @@ export class MockedCall extends Call {
url: "https://example.org",
name: "Group call",
creatorUserId: "@alice:example.org",
// waitForIframeLoad = false, makes the widget API wait for the 'contentLoaded' event instead.
// This is how the EC is designed, but for backwards compatibility (full mesh) we currently need to use waitForIframeLoad = true
// waitForIframeLoad: false
// waitForIframeLoad = false, makes the widget API wait for the 'contentLoaded' event.
waitForIframeLoad: false,
},
room.client,
);