2020-11-30 15:05:26 -05:00
|
|
|
/*
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2020-12-02 09:36:54 -05:00
|
|
|
import {isWebPlatform, isDesktopPlatform, Platform} from "../Platform.js";
|
2020-11-30 15:05:26 -05:00
|
|
|
import {ViewModel} from "../utils/ViewModel.js";
|
2020-12-04 12:28:40 -05:00
|
|
|
import {IdentifierKind} from "../Link.js";
|
2020-11-30 15:05:26 -05:00
|
|
|
|
2020-12-07 07:34:22 -05:00
|
|
|
function getMatchingPlatforms(client, supportedPlatforms) {
|
|
|
|
const clientPlatforms = client.platforms;
|
|
|
|
const matchingPlatforms = supportedPlatforms.filter(p => {
|
|
|
|
return clientPlatforms.includes(p);
|
|
|
|
});
|
|
|
|
return matchingPlatforms;
|
|
|
|
}
|
|
|
|
|
2020-11-30 15:05:26 -05:00
|
|
|
export class ClientViewModel extends ViewModel {
|
|
|
|
constructor(options) {
|
|
|
|
super(options);
|
2020-12-01 13:01:15 -05:00
|
|
|
const {client, link, pickClient} = options;
|
2020-11-30 15:05:26 -05:00
|
|
|
this._client = client;
|
2020-12-01 09:29:12 -05:00
|
|
|
this._link = link;
|
2020-12-01 13:01:15 -05:00
|
|
|
this._pickClient = pickClient;
|
2020-12-07 07:34:22 -05:00
|
|
|
// to provide "choose other client" button after calling pick()
|
|
|
|
this._clientListViewModel = null;
|
2021-02-01 10:00:46 -05:00
|
|
|
this._update();
|
|
|
|
}
|
2020-12-01 09:29:12 -05:00
|
|
|
|
2021-02-01 10:00:46 -05:00
|
|
|
_update() {
|
|
|
|
const matchingPlatforms = getMatchingPlatforms(this._client, this.platforms);
|
2020-12-01 13:01:15 -05:00
|
|
|
const webPlatform = matchingPlatforms.find(p => isWebPlatform(p));
|
2021-02-01 10:00:46 -05:00
|
|
|
this._nativePlatform = matchingPlatforms.find(p => !isWebPlatform(p));
|
|
|
|
this._proposedPlatform = this.preferences.platform || this._nativePlatform || webPlatform;
|
2020-12-07 07:34:22 -05:00
|
|
|
|
2021-02-01 10:00:46 -05:00
|
|
|
this.actions = this._createActions(this._client, this._link, this._nativePlatform, webPlatform);
|
|
|
|
this._clientCanIntercept = !!(this._nativePlatform && this._client.canInterceptMatrixToLinks(this._nativePlatform));
|
2020-12-02 05:47:03 -05:00
|
|
|
this._showOpen = this.deepLink && !this._clientCanIntercept;
|
2021-02-01 10:00:46 -05:00
|
|
|
}
|
2020-11-30 15:05:26 -05:00
|
|
|
|
2021-02-01 10:00:46 -05:00
|
|
|
// these are only shown in the install stage
|
2020-11-30 15:05:26 -05:00
|
|
|
_createActions(client, link, nativePlatform, webPlatform) {
|
|
|
|
let actions = [];
|
|
|
|
if (nativePlatform) {
|
2020-12-02 09:36:54 -05:00
|
|
|
const nativeActions = (client.getInstallLinks(nativePlatform) || []).map(installLink => {
|
2020-11-30 15:05:26 -05:00
|
|
|
return {
|
2020-12-07 10:01:29 -05:00
|
|
|
label: installLink.getDescription(nativePlatform),
|
2020-11-30 15:05:26 -05:00
|
|
|
url: installLink.createInstallURL(link),
|
|
|
|
kind: installLink.channelId,
|
2020-12-01 06:04:11 -05:00
|
|
|
primary: true,
|
|
|
|
activated: () => this.preferences.setClient(client.id, nativePlatform),
|
2020-11-30 15:05:26 -05:00
|
|
|
};
|
|
|
|
});
|
|
|
|
actions.push(...nativeActions);
|
|
|
|
}
|
|
|
|
if (webPlatform) {
|
2020-12-02 09:36:54 -05:00
|
|
|
const webDeepLink = client.getDeepLink(webPlatform, link);
|
|
|
|
if (webDeepLink) {
|
|
|
|
actions.push({
|
2020-12-07 10:01:29 -05:00
|
|
|
label: `Continue in your browser`,
|
2020-12-02 09:36:54 -05:00
|
|
|
url: webDeepLink,
|
|
|
|
kind: "open-in-web",
|
|
|
|
activated: () => this.preferences.setClient(client.id, webPlatform),
|
|
|
|
});
|
|
|
|
}
|
2020-11-30 15:05:26 -05:00
|
|
|
}
|
|
|
|
return actions;
|
|
|
|
}
|
|
|
|
|
2020-12-07 10:02:06 -05:00
|
|
|
get homepage() {
|
|
|
|
return this._client.homepage;
|
|
|
|
}
|
|
|
|
|
2020-12-01 13:01:15 -05:00
|
|
|
get identifier() {
|
|
|
|
return this._link.identifier;
|
|
|
|
}
|
|
|
|
|
2020-11-30 15:05:26 -05:00
|
|
|
get description() {
|
|
|
|
return this._client.description;
|
|
|
|
}
|
|
|
|
|
|
|
|
get clientId() {
|
|
|
|
return this._client.id;
|
|
|
|
}
|
2020-12-01 09:29:12 -05:00
|
|
|
|
2020-12-07 07:34:22 -05:00
|
|
|
get name() {
|
2020-12-07 08:06:16 -05:00
|
|
|
return this._client.name;
|
2020-12-07 07:34:22 -05:00
|
|
|
}
|
|
|
|
|
2020-12-04 10:08:42 -05:00
|
|
|
get iconUrl() {
|
|
|
|
return this._client.icon;
|
|
|
|
}
|
|
|
|
|
2020-12-01 09:29:12 -05:00
|
|
|
get stage() {
|
|
|
|
return this._showOpen ? "open" : "install";
|
|
|
|
}
|
|
|
|
|
2020-12-01 13:01:15 -05:00
|
|
|
get textInstructions() {
|
2020-12-07 08:35:08 -05:00
|
|
|
let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link);
|
2020-12-07 10:02:06 -05:00
|
|
|
if (instructions && !Array.isArray(instructions)) {
|
2020-12-07 08:35:08 -05:00
|
|
|
instructions = [instructions];
|
|
|
|
}
|
|
|
|
return instructions;
|
2020-12-01 09:29:12 -05:00
|
|
|
}
|
2020-12-01 13:18:34 -05:00
|
|
|
|
2020-12-04 12:28:40 -05:00
|
|
|
get copyString() {
|
|
|
|
return this._client.getCopyString(this._proposedPlatform, this._link);
|
|
|
|
}
|
|
|
|
|
2020-12-02 05:47:03 -05:00
|
|
|
get showDeepLinkInInstall() {
|
2021-02-01 10:00:46 -05:00
|
|
|
// we can assume this._nativePlatform as this._clientCanIntercept already checks it
|
|
|
|
return this._clientCanIntercept && !!this._client.getDeepLink(this._nativePlatform, this._link);
|
2020-12-02 05:47:03 -05:00
|
|
|
}
|
|
|
|
|
2020-12-02 03:42:33 -05:00
|
|
|
get availableOnPlatformNames() {
|
2020-12-01 13:18:34 -05:00
|
|
|
const platforms = this._client.platforms;
|
|
|
|
const textPlatforms = [];
|
|
|
|
const hasWebPlatform = platforms.some(p => isWebPlatform(p));
|
|
|
|
if (hasWebPlatform) {
|
|
|
|
textPlatforms.push("Web");
|
|
|
|
}
|
|
|
|
const desktopPlatforms = platforms.filter(p => isDesktopPlatform(p));
|
|
|
|
if (desktopPlatforms.length === 1) {
|
|
|
|
textPlatforms.push(desktopPlatforms[0]);
|
|
|
|
} else {
|
|
|
|
textPlatforms.push("Desktop");
|
|
|
|
}
|
|
|
|
if (platforms.includes(Platform.Android)) {
|
|
|
|
textPlatforms.push("Android");
|
|
|
|
}
|
|
|
|
if (platforms.includes(Platform.iOS)) {
|
|
|
|
textPlatforms.push("iOS");
|
|
|
|
}
|
|
|
|
return textPlatforms;
|
|
|
|
}
|
2020-12-07 07:34:22 -05:00
|
|
|
|
2021-02-01 10:00:46 -05:00
|
|
|
get _deepLinkPlatform() {
|
|
|
|
// in install stage, always show the native link in the small "open it here" link, independent of preference.
|
|
|
|
return this._showOpen ? this._proposedPlatform : this._nativePlatform;
|
|
|
|
}
|
|
|
|
|
|
|
|
// both used for big "Continue" button in open stage,
|
|
|
|
// and for small "open it here" link in the install stage.
|
2020-12-07 07:34:22 -05:00
|
|
|
get deepLink() {
|
2021-02-01 10:00:46 -05:00
|
|
|
return this._client.getDeepLink(this._deepLinkPlatform, this._link);
|
2020-12-07 07:34:22 -05:00
|
|
|
}
|
2020-12-01 09:29:12 -05:00
|
|
|
|
|
|
|
deepLinkActivated() {
|
2020-12-01 13:01:15 -05:00
|
|
|
this._pickClient(this._client);
|
2021-02-01 10:00:46 -05:00
|
|
|
this.preferences.setClient(this._client.id, this._deepLinkPlatform);
|
2020-12-01 09:29:12 -05:00
|
|
|
if (this._showOpen) {
|
|
|
|
this._showOpen = false;
|
|
|
|
this.emitChange();
|
|
|
|
}
|
|
|
|
}
|
2020-12-07 07:34:22 -05:00
|
|
|
|
|
|
|
pick(clientListViewModel) {
|
|
|
|
this._clientListViewModel = clientListViewModel;
|
|
|
|
this.emitChange();
|
|
|
|
}
|
|
|
|
|
2021-02-01 10:00:46 -05:00
|
|
|
// whether or not we are only showing this client (in open or install stage)
|
2020-12-07 07:34:22 -05:00
|
|
|
get showBack() {
|
|
|
|
return !!this._clientListViewModel;
|
|
|
|
}
|
|
|
|
|
|
|
|
back() {
|
|
|
|
if (this._clientListViewModel) {
|
|
|
|
const vm = this._clientListViewModel;
|
|
|
|
this._clientListViewModel = null;
|
2021-02-01 10:00:46 -05:00
|
|
|
// clear the client preference so we default back to to native link if any
|
|
|
|
// in the list with all clients, and also if we refresh, we get the list with
|
|
|
|
// all clients rather than having our "change client" click reverted.
|
|
|
|
this.preferences.setClient(undefined, undefined);
|
|
|
|
this._update();
|
2020-12-07 07:34:22 -05:00
|
|
|
this.emitChange();
|
|
|
|
vm.showAll();
|
|
|
|
}
|
|
|
|
}
|
2020-12-01 09:29:12 -05:00
|
|
|
}
|