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);
|
2021-02-04 11:06:48 -05:00
|
|
|
this._webPlatform = matchingPlatforms.find(p => isWebPlatform(p));
|
2021-02-01 10:00:46 -05:00
|
|
|
this._nativePlatform = matchingPlatforms.find(p => !isWebPlatform(p));
|
2021-02-05 07:00:13 -05:00
|
|
|
const preferredPlatform = matchingPlatforms.find(p => p === this.preferences.platform);
|
2021-04-12 08:54:08 -04:00
|
|
|
this._proposedPlatform = preferredPlatform || this._nativePlatform || this._webPlatform;
|
2020-12-07 07:34:22 -05:00
|
|
|
|
2021-02-04 11:06:48 -05:00
|
|
|
this.openActions = this._createOpenActions();
|
|
|
|
this.installActions = this._createInstallActions();
|
2021-02-01 10:00:46 -05:00
|
|
|
this._clientCanIntercept = !!(this._nativePlatform && this._client.canInterceptMatrixToLinks(this._nativePlatform));
|
2021-02-04 11:06:48 -05:00
|
|
|
this._showOpen = this.openActions.length && !this._clientCanIntercept;
|
2021-04-12 09:15:21 -04:00
|
|
|
const proposedDeepLink = this._client.getDeepLink(this._proposedPlatform, this._link);
|
|
|
|
this._openWillNavigateIfNotInstalled = false;
|
|
|
|
if (this._showOpen && !isWebPlatform(this._proposedPlatform)) {
|
|
|
|
try {
|
|
|
|
if (new URL(proposedDeepLink).protocol === "https:") {
|
|
|
|
this._openWillNavigateIfNotInstalled = true;
|
|
|
|
}
|
|
|
|
} catch (err) {}
|
|
|
|
}
|
2021-02-04 11:06:48 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
// these are only shown in the open stage
|
|
|
|
_createOpenActions() {
|
|
|
|
const hasPreferredWebInstance = this.hasPreferredWebInstance;
|
|
|
|
let deepLinkLabel = "Continue";
|
|
|
|
if (hasPreferredWebInstance) {
|
|
|
|
if (this._proposedPlatform === this._nativePlatform) {
|
|
|
|
deepLinkLabel = "Open in app";
|
|
|
|
} else {
|
|
|
|
deepLinkLabel = `Open on ${this._client.getPreferredWebInstance(this._link)}`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const actions = [];
|
2021-02-04 11:11:10 -05:00
|
|
|
const proposedDeepLink = this._client.getDeepLink(this._proposedPlatform, this._link);
|
|
|
|
if (proposedDeepLink) {
|
|
|
|
actions.push({
|
|
|
|
label: deepLinkLabel,
|
|
|
|
url: proposedDeepLink,
|
|
|
|
primary: true,
|
|
|
|
activated: () => {
|
|
|
|
this._pickClient(this._client);
|
|
|
|
this.preferences.setClient(this._client.id, this._proposedPlatform);
|
|
|
|
// only show install screen if we tried to open a native deeplink
|
|
|
|
if (this._showOpen && this._proposedPlatform === this._nativePlatform) {
|
|
|
|
this._showOpen = false;
|
|
|
|
this.emitChange();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2021-02-04 11:06:48 -05:00
|
|
|
// show only if there is a preferred instance, and if we don't already link to it in the first button
|
|
|
|
if (hasPreferredWebInstance && this._webPlatform && this._proposedPlatform !== this._webPlatform) {
|
|
|
|
actions.push({
|
|
|
|
label: `Open on ${this._client.getPreferredWebInstance(this._link)}`,
|
|
|
|
url: this._client.getDeepLink(this._webPlatform, this._link),
|
|
|
|
kind: "open-in-web",
|
|
|
|
activated: () => {} // don't persist this choice as we don't persist the preferred web instance, it's in the url
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return actions;
|
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
|
2021-02-04 11:06:48 -05:00
|
|
|
_createInstallActions() {
|
2020-11-30 15:05:26 -05:00
|
|
|
let actions = [];
|
2021-02-04 11:06:48 -05:00
|
|
|
if (this._nativePlatform) {
|
|
|
|
const nativeActions = (this._client.getInstallLinks(this._nativePlatform) || []).map(installLink => {
|
2020-11-30 15:05:26 -05:00
|
|
|
return {
|
2021-02-04 11:06:48 -05:00
|
|
|
label: installLink.getDescription(this._nativePlatform),
|
|
|
|
url: installLink.createInstallURL(this._link),
|
2020-11-30 15:05:26 -05:00
|
|
|
kind: installLink.channelId,
|
2020-12-01 06:04:11 -05:00
|
|
|
primary: true,
|
2021-02-04 11:06:48 -05:00
|
|
|
activated: () => this.preferences.setClient(this._client.id, this._nativePlatform),
|
2020-11-30 15:05:26 -05:00
|
|
|
};
|
|
|
|
});
|
|
|
|
actions.push(...nativeActions);
|
|
|
|
}
|
2021-02-04 11:06:48 -05:00
|
|
|
if (this._webPlatform) {
|
|
|
|
const webDeepLink = this._client.getDeepLink(this._webPlatform, this._link);
|
2020-12-02 09:36:54 -05:00
|
|
|
if (webDeepLink) {
|
2021-02-04 11:06:48 -05:00
|
|
|
const webLabel = this.hasPreferredWebInstance ?
|
|
|
|
`Open on ${this._client.getPreferredWebInstance(this._link)}` :
|
|
|
|
`Continue in your browser`;
|
2020-12-02 09:36:54 -05:00
|
|
|
actions.push({
|
2021-02-04 11:06:48 -05:00
|
|
|
label: webLabel,
|
2020-12-02 09:36:54 -05:00
|
|
|
url: webDeepLink,
|
|
|
|
kind: "open-in-web",
|
2021-02-04 11:06:48 -05:00
|
|
|
activated: () => {
|
|
|
|
if (!this.hasPreferredWebInstance) {
|
|
|
|
this.preferences.setClient(this._client.id, this._webPlatform);
|
|
|
|
}
|
|
|
|
},
|
2020-12-02 09:36:54 -05:00
|
|
|
});
|
|
|
|
}
|
2020-11-30 15:05:26 -05:00
|
|
|
}
|
|
|
|
return actions;
|
|
|
|
}
|
|
|
|
|
2021-02-04 11:06:48 -05:00
|
|
|
get hasPreferredWebInstance() {
|
|
|
|
// also check there is a web platform that matches the platforms the user is on (mobile or desktop web)
|
|
|
|
return this._webPlatform && typeof this._client.getPreferredWebInstance(this._link) === "string";
|
|
|
|
}
|
|
|
|
|
|
|
|
get hostedByBannerLabel() {
|
|
|
|
const preferredWebInstance = this._client.getPreferredWebInstance(this._link);
|
|
|
|
if (this._webPlatform && preferredWebInstance) {
|
|
|
|
let label = preferredWebInstance;
|
|
|
|
const subDomainIdx = preferredWebInstance.lastIndexOf(".", preferredWebInstance.lastIndexOf("."));
|
|
|
|
if (subDomainIdx !== -1) {
|
|
|
|
label = preferredWebInstance.substr(preferredWebInstance.length - subDomainIdx + 1);
|
|
|
|
}
|
|
|
|
return `Hosted by ${label}`;
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2021-04-12 09:15:21 -04:00
|
|
|
get showOpen() {
|
|
|
|
return this._showOpen;
|
|
|
|
}
|
|
|
|
|
|
|
|
get showInstall() {
|
|
|
|
// also show install options in open screen if the deeplink is
|
|
|
|
// a https link that should be intercepted by the native app
|
|
|
|
// because if it isn't installed, you will just go to that
|
|
|
|
// website and never see the install options here.
|
|
|
|
return !this._showOpen || this._openWillNavigateIfNotInstalled;
|
|
|
|
}
|
2020-12-01 09:29:12 -05:00
|
|
|
|
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
|
|
|
|
|
|
|
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
|
|
|
}
|