imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First rough cut of cutting AppTile over to the ClientWidgetApi

Browse source
This commit is contained in:
Travis Ralston 2020-09-29 14:14:51 -06:00
parent 14766e24b8
commit cd93b2c22a
7 changed files with 273 additions and 434 deletions
Download patch file Download diff file Expand all files Collapse all files

171
src/stores/widgets/StopGapWidget.ts Normal file
View file

@ -0,0 +1,171 @@
/*
* Copyright 2020 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 {Room} from "matrix-js-sdk/src/models/room";
import { ClientWidgetApi, IWidget, IWidgetData, Widget } from "matrix-widget-api";
import { StopGapWidgetDriver } from "./StopGapWidgetDriver";
import { EventEmitter } from "events";
import { WidgetMessagingStore } from "./WidgetMessagingStore";
import RoomViewStore from "../RoomViewStore";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { OwnProfileStore } from "../OwnProfileStore";
import WidgetUtils from '../../utils/WidgetUtils';
import { IntegrationManagers } from "../../integrations/IntegrationManagers";
import SettingsStore from "../../settings/SettingsStore";
import { WidgetType } from "../../widgets/WidgetType";
// TODO: Destroy all of this code
interface IAppTileProps {
// Note: these are only the props we care about
app: IWidget;
room: Room;
userId: string;
creatorUserId: string;
waitForIframeLoad: boolean;
whitelistCapabilities: string[];
userWidget: boolean;
}
// TODO: Don't use this because it's wrong
class ElementWidget extends Widget {
constructor(w) {
super(w);
}
public get templateUrl(): string {
if (WidgetType.JITSI.matches(this.type)) {
return WidgetUtils.getLocalJitsiWrapperUrl({
forLocalRender: true,
auth: this.rawData?.auth,
});
}
return super.templateUrl;
}
public get rawData(): IWidgetData {
let conferenceId = super.rawData['conferenceId'];
if (conferenceId === undefined) {
// we'll need to parse the conference ID out of the URL for v1 Jitsi widgets
const parsedUrl = new URL(this.templateUrl);
conferenceId = parsedUrl.searchParams.get("confId");
}
return {
...super.rawData,
theme: SettingsStore.getValue("theme"),
conferenceId,
};
}
}
export class StopGapWidget extends EventEmitter {
private messaging: ClientWidgetApi;
private mockWidget: Widget;
private scalarToken: string;
constructor(private appTileProps: IAppTileProps) {
super();
this.mockWidget = new ElementWidget(appTileProps.app);
}
public get widgetApi(): ClientWidgetApi {
return this.messaging;
}
/**
* The URL to use in the iframe
*/
public get embedUrl(): string {
const templated = this.mockWidget.getCompleteUrl({
currentRoomId: RoomViewStore.getRoomId(),
currentUserId: MatrixClientPeg.get().getUserId(),
userDisplayName: OwnProfileStore.instance.displayName,
userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(),
});
// Add in some legacy support sprinkles
// TODO: Replace these with proper widget params
// See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833
const parsed = new URL(templated);
parsed.searchParams.set('widgetId', this.mockWidget.id);
parsed.searchParams.set('parentUrl', window.location.href.split('#', 2)[0]);
// Give the widget a scalar token if we're supposed to (more legacy)
// TODO: Stop doing this
if (this.scalarToken) {
parsed.searchParams.set('scalar_token', this.scalarToken);
}
// Replace the encoded dollar signs back to dollar signs. They have no special meaning
// in HTTP, but URL parsers encode them anyways.
return parsed.toString().replace(/%24/g, '$');
}
/**
* The URL to use in the popout
*/
public get popoutUrl(): string {
if (WidgetType.JITSI.matches(this.mockWidget.type)) {
return WidgetUtils.getLocalJitsiWrapperUrl({
forLocalRender: false,
auth: this.mockWidget.rawData?.auth,
});
}
return this.embedUrl;
}
public get isManagedByManager(): boolean {
return !!this.scalarToken;
}
public get started(): boolean {
return !!this.messaging;
}
public start(iframe: HTMLIFrameElement) {
if (this.started) return;
const driver = new StopGapWidgetDriver(this.appTileProps.whitelistCapabilities || []);
this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
this.messaging.addEventListener("ready", () => this.emit("ready"));
WidgetMessagingStore.instance.storeMessaging(this.mockWidget, this.messaging);
}
public async prepare(): Promise<void> {
if (this.scalarToken) return;
try {
if (WidgetUtils.isScalarUrl(this.mockWidget.templateUrl)) {
const managers = IntegrationManagers.sharedInstance();
if (managers.hasManager()) {
// TODO: Pick the right manager for the widget
const defaultManager = managers.getPrimaryManager();
if (WidgetUtils.isScalarUrl(defaultManager.apiUrl)) {
const scalar = defaultManager.getScalarClient();
this.scalarToken = await scalar.getScalarToken();
}
}
}
} catch (e) {
// All errors are non-fatal
console.error("Error preparing widget communications: ", e);
}
}
public stop() {
if (!this.started) return;
WidgetMessagingStore.instance.stopMessaging(this.mockWidget);
}
}

30
src/stores/widgets/StopGapWidgetDriver.ts Normal file
View file

@ -0,0 +1,30 @@
/*
* Copyright 2020 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 { Capability, WidgetDriver } from "matrix-widget-api";
import { iterableUnion } from "../../utils/iterables";
// TODO: Purge this from the universe
export class StopGapWidgetDriver extends WidgetDriver {
constructor(private allowedCapabilities: Capability[]) {
super();
}
public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
return iterableUnion(requested, new Set(this.allowedCapabilities));
}
}

107
src/stores/widgets/WidgetMessagingStore.ts
View file

@ -31,8 +31,7 @@ import { EnhancedMap } from "../../utils/maps";
export class WidgetMessagingStore extends AsyncStoreWithClient<unknown> {
private static internalInstance = new WidgetMessagingStore();
// <room/user ID, <widget ID, Widget>>
private widgetMap = new EnhancedMap<string, EnhancedMap<string, WidgetSurrogate>>();
private widgetMap = new EnhancedMap<string, ClientWidgetApi>(); // <widget ID, ClientWidgetAPi>
public constructor() {
super(defaultDispatcher);
@ -51,106 +50,16 @@ export class WidgetMessagingStore extends AsyncStoreWithClient<unknown> {
this.widgetMap.clear();
}
/**
* Finds a widget by ID. Not guaranteed to return an accurate result.
* @param {string} id The widget ID.
* @returns {{widget, room}} The widget and possible room ID, or a falsey value
* if not found.
* @deprecated Do not use.
*/
public findWidgetById(id: string): { widget: Widget, room?: Room } {
for (const key of this.widgetMap.keys()) {
for (const [entityId, surrogate] of this.widgetMap.get(key).entries()) {
if (surrogate.definition.id === id) {
const room: Room = this.matrixClient?.getRoom(entityId); // will be null for non-rooms
return {room, widget: surrogate.definition};
}
}
}
return null;
public storeMessaging(widget: Widget, widgetApi: ClientWidgetApi) {
this.stopMessaging(widget);
this.widgetMap.set(widget.id, widgetApi);
}
/**
* Gets the messaging instance for the widget. Returns a falsey value if none
* is present.
* @param {Room} room The room for which the widget lives within.
* @param {Widget} widget The widget to get messaging for.
* @returns {ClientWidgetApi} The messaging, or a falsey value.
*/
public messagingForRoomWidget(room: Room, widget: Widget): ClientWidgetApi {
return this.widgetMap.get(room.roomId)?.get(widget.id)?.messaging;
public stopMessaging(widget: Widget) {
this.widgetMap.remove(widget.id)?.stop();
}
/**
* Gets the messaging instance for the widget. Returns a falsey value if none
* is present.
* @param {Widget} widget The widget to get messaging for.
* @returns {ClientWidgetApi} The messaging, or a falsey value.
*/
public messagingForAccountWidget(widget: Widget): ClientWidgetApi {
return this.widgetMap.get(this.matrixClient?.getUserId())?.get(widget.id)?.messaging;
}
private generateMessaging(locationId: string, widget: Widget, iframe: HTMLIFrameElement, driver: WidgetDriver) {
const messaging = new ClientWidgetApi(widget, iframe, driver);
this.widgetMap.getOrCreate(locationId, new EnhancedMap())
.getOrCreate(widget.id, new WidgetSurrogate(widget, messaging));
return messaging;
}
/**
* Generates a messaging instance for the widget. If an instance already exists, it
* will be returned instead.
* @param {Room} room The room in which the widget lives.
* @param {Widget} widget The widget to generate/get messaging for.
* @param {HTMLIFrameElement} iframe The widget's iframe.
* @returns {ClientWidgetApi} The generated/cached messaging.
*/
public generateMessagingForRoomWidget(room: Room, widget: Widget, iframe: HTMLIFrameElement): ClientWidgetApi {
const existing = this.messagingForRoomWidget(room, widget);
if (existing) return existing;
const driver = new SdkWidgetDriver(widget, WidgetKind.Room, room.roomId);
return this.generateMessaging(room.roomId, widget, iframe, driver);
}
/**
* Generates a messaging instance for the widget. If an instance already exists, it
* will be returned instead.
* @param {Widget} widget The widget to generate/get messaging for.
* @param {HTMLIFrameElement} iframe The widget's iframe.
* @returns {ClientWidgetApi} The generated/cached messaging.
*/
public generateMessagingForAccountWidget(widget: Widget, iframe: HTMLIFrameElement): ClientWidgetApi {
if (!this.matrixClient) {
throw new Error("No matrix client to create account widgets with");
}
const existing = this.messagingForAccountWidget(widget);
if (existing) return existing;
const userId = this.matrixClient.getUserId();
const driver = new SdkWidgetDriver(widget, WidgetKind.Account, userId);
return this.generateMessaging(userId, widget, iframe, driver);
}
/**
* Stops the messaging instance for the widget, unregistering it.
* @param {Room} room The room where the widget resides.
* @param {Widget} widget The widget
*/
public stopMessagingForRoomWidget(room: Room, widget: Widget) {
const api = this.widgetMap.getOrCreate(room.roomId, new EnhancedMap()).remove(widget.id);
if (api) api.messaging.stop();
}
/**
* Stops the messaging instance for the widget, unregistering it.
* @param {Widget} widget The widget
*/
public stopMessagingForAccountWidget(widget: Widget) {
if (!this.matrixClient) return;
const api = this.widgetMap.getOrCreate(this.matrixClient.getUserId(), new EnhancedMap()).remove(widget.id);
if (api) api.messaging.stop();
public getMessaging(widget: Widget): ClientWidgetApi {
return this.widgetMap.get(widget.id);
}
}