diff --git a/css/open.css b/css/open.css index 326c8ec..9f351c7 100644 --- a/css/open.css +++ b/css/open.css @@ -68,6 +68,21 @@ limitations under the License. background-size: 85%; } +.OpeningClientView .clientIcon { + border-radius: 8px; + background-repeat: no-repeat; + background-size: cover; + width: 60px; + height: 60px; + overflow: hidden; + display: block; + margin-left: 16px; +} + +.OpeningClientView .timeoutOptions { + margin-top: 15px; +} + .OpeningClientView .spinner { margin-top: 15px; } diff --git a/src/open/OpenDefaultViewModel.js b/src/open/OpenDefaultViewModel.js index b187046..3bbacaa 100644 --- a/src/open/OpenDefaultViewModel.js +++ b/src/open/OpenDefaultViewModel.js @@ -32,6 +32,10 @@ export class OpenDefaultViewModel extends ViewModel { return this._client?.name; } + get iconUrl() { + return this._client?.icon; + } + get openingDefault() { return !this._client; } @@ -42,7 +46,7 @@ export class OpenDefaultViewModel extends ViewModel { } get webDeepLink() { - return this._client && this._webPlatform && this._client.getDeepLink(this._webPlatform); + return this._client && this._webPlatform && this._client.getDeepLink(this._webPlatform, this._link); } close() { @@ -50,7 +54,7 @@ export class OpenDefaultViewModel extends ViewModel { } tryOpenLink() { - this._trying = true; + this.trying = true; // TODO actually try opening link this.setTimeout(() => { if (this.autoRedirect) { @@ -58,7 +62,7 @@ export class OpenDefaultViewModel extends ViewModel { // bother with visual updates. this.close(); } else { - this._trying = false; + this.trying = false; this.emitChange(); } }, 1000); diff --git a/src/open/OpenLinkView.js b/src/open/OpenLinkView.js index b859b06..40259fe 100644 --- a/src/open/OpenLinkView.js +++ b/src/open/OpenLinkView.js @@ -38,11 +38,32 @@ export class OpenLinkView extends TemplateView { class TryingLinkView extends TemplateView { render (t, vm) { + const explanation = vm.autoRedirect ? + "If this doesn't work, you will be redirected shortly." : + t.span(["Click ", t.strong(`"Open ${vm.name}"`), " to launch the desktop app."]); + const webLink = vm.webDeepLink ? + t.span(["You can also ", t.a({ + href: vm.webDeepLink, + target: "_blank", + rel: "noopener noreferrer", + }, `open ${vm.name} in your browser.`)]) : + []; + const timeoutOptions = t.span({ className: "timeoutOptions" }, [ + t.strong("Not working? "), + t.button({ className: "text", onClick: () => vm.tryOpenLink() }, "Try again"), + " or ", + t.button({ className: "text", onClick: () => vm.close() }, "select another app") + ]); + return t.div({ className: "OpeningClientView" }, [ - t.div({className: "defaultAvatar"}), - t.h1("Trying to open your default client..."), - t.span("If this doesn't work, you will be redirected shortly."), - t.div({className: "spinner"}), + vm.iconUrl ? t.img({ className: "clientIcon", src: vm.iconUrl }) : t.div({className: "defaultAvatar"}), + t.h1(vm.name ? `Opening ${vm.name}` : "Trying to open your default client..."), + explanation, + webLink, + t.map(vm => vm.trying, trying => trying ? + t.div({className: "spinner"}) : + timeoutOptions + ), ]); } } diff --git a/src/open/OpenLinkViewModel.js b/src/open/OpenLinkViewModel.js index 97fdac4..f9e927b 100644 --- a/src/open/OpenLinkViewModel.js +++ b/src/open/OpenLinkViewModel.js @@ -73,6 +73,10 @@ export class OpenLinkViewModel extends ViewModel { closeDefault() { this.openDefaultViewModel = null; + // If no client was selected, this is a no-op. + // Otherwise, see ClientViewModel.back for some reasons + // why we do this. + this.preferences.setClient(undefined, undefined); this._activeOpen(); }