add app store install badges

This commit is contained in:
Bruno Windels 2020-11-23 18:23:23 +01:00
parent c78a91ea46
commit d484a9a423
7 changed files with 168 additions and 75 deletions

View File

@ -20,7 +20,9 @@ import {
ClientKind,
ClientId,
Platform,
StoreDistribution,
AppleStoreLink,
PlayStoreLink,
FDroidLink
} from './types';
import { LinkKind } from '../parser/types';
import logo from '../imgs/element.svg';
@ -61,25 +63,9 @@ export const Element: LinkedClient = {
},
linkSupport: () => true,
installLinks: [
new StoreDistribution(
'App Store',
Platform.iOS,
'https://apps.apple.com/app/vector/id1083446067',
false
),
new StoreDistribution(
'Google Play',
Platform.Android,
'https://play.google.com/store/apps/details?id=im.vector.app',
true
),
new StoreDistribution(
'F-Droid',
Platform.Android,
'https://f-droid.org/fr/packages/im.vector.app/',
false
),
// TODO desktop clients?
new AppleStoreLink("vector", "id1083446067"),
new PlayStoreLink("im.vector.app"),
new FDroidLink("im.vector.app"),
],
};

View File

@ -57,22 +57,73 @@ export enum ClientId {
* Define a native distribution channel for a client.
* E.g App store for apple, PlayStore or F-Droid for Android
*/
export class StoreDistribution {
public name: string;
public platform: Platform;
public download: string;
public supportReferrer: boolean;
export interface InstallLink {
createInstallURL(deepLink: SafeLink) : string;
//get buttonCSSClass(): string;
platform: Platform;
// in AppleStoreLink, we can set the cookie here
// onInstallChosen(deepLink: SafeLink);
channelId: string;
description: string;
}
constructor(
name: string,
platform: Platform,
download: string,
supportReferrer: boolean
) {
this.name = name;
this.platform = platform;
this.download = download;
this.supportReferrer = supportReferrer;
export class AppleStoreLink implements InstallLink {
constructor(private org: string, private appId: string) {}
createInstallURL(deepLink: SafeLink) : string {
return `https://apps.apple.com/app/${encodeURIComponent(this.org)}/${encodeURIComponent(this.appId)}`;
}
get platform() : Platform {
return Platform.iOS;
}
get channelId(): string {
return "apple-app-store";
}
get description() {
return "Download on the App Store";
}
}
export class PlayStoreLink implements InstallLink {
constructor(private appId: string) {}
createInstallURL(deepLink: SafeLink) : string {
return `https://play.google.com/store/apps/details?id=${encodeURIComponent(this.appId)}&referrer=${encodeURIComponent(deepLink.originalLink)}`;
}
get platform() : Platform {
return Platform.Android;
}
get channelId(): string {
return "play-store";
}
get description() {
return "Get it on Google Play";
}
}
export class FDroidLink implements InstallLink {
constructor(private appId: string) {}
createInstallURL(deepLink: SafeLink) : string {
return `https://f-droid.org/packages/${encodeURIComponent(this.appId)}`;
}
get platform() : Platform {
return Platform.Android;
}
get channelId(): string {
return "fdroid";
}
get description() {
return "Get it on F-Droid";
}
}
@ -90,7 +141,7 @@ export interface ClientDescription {
clientId: ClientId;
experimental: boolean;
linkSupport: (link: SafeLink) => boolean;
installLinks: StoreDistribution[];
installLinks: InstallLink[];
}
/*

View File

@ -67,6 +67,15 @@ limitations under the License.
&:hover {
background-color: $app-background;
}
.installLink {
display: inline-block;
height: 40px;
margin: 8px 16px 8px 0;
img {
height: 100%;
}
}
}
.clientTileLink {

View File

@ -23,6 +23,10 @@ import { SafeLink } from '../parser/types';
import Tile from './Tile';
import Button from './Button';
import appStoreBadge from '../imgs/app-store-us-alt.svg';
import playStoreBadge from '../imgs/google-play-us.svg';
import fdroidBadge from '../imgs/fdroid-badge.png';
import './ClientTile.scss';
interface IProps {
@ -30,6 +34,16 @@ interface IProps {
link: SafeLink;
}
interface IInstallBadgeImages {
[index: string]: string;
}
const installBadgeImages : IInstallBadgeImages = {
"fdroid": fdroidBadge,
"apple-app-store": appStoreBadge,
"play-store": playStoreBadge
};
const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
const inviteLine =
client.kind === ClientKind.TEXT_CLIENT ? (
@ -43,47 +57,32 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
});
let inviteButton: JSX.Element = <></>;
let hasNativeClient = false;
let installButton = undefined;
if (client.kind === ClientKind.LINKED_CLIENT) {
const availableClients = client.installLinks.filter((distrib) => {
const matchingInstallLinks = client.installLinks.filter((installLink) => {
if ((uaResults as any).ios) {
return distrib.platform == Platform.iOS;
return installLink.platform === Platform.iOS;
} else if ((uaResults as any).android) {
return distrib.platform == Platform.Android;
return installLink.platform === Platform.Android;
} else {
return false;
}
});
hasNativeClient = availableClients.length > 0;
if (hasNativeClient) {
inviteButton = (
<Button
onClick={() => window.open('matrix://' + link.originalLink)}
>
Accept invite
</Button>
);
} else {
inviteButton = <Button>Accept invite</Button>;
const hasNativeClient = matchingInstallLinks.length > 0;
let installButtons = undefined;
if (matchingInstallLinks.length) {
installButtons = <p>{matchingInstallLinks.map((installLink) => {
return <a
rel="noopener noreferrer"
key={installLink.channelId}
href={installLink.createInstallURL(link)}
className="installLink"
target="_blank">
<img src={installBadgeImages[installLink.channelId]} alt={installLink.description} />
</a>;
})}</p>;
}
installButton = availableClients.map((distrib) => (
<Button
onClick={() =>
window.open(
distrib.supportReferrer
? distrib.download +
'&referrer=' +
link.originalLink
: distrib.download,
'_blank'
)
}
>
Get it on {distrib.name}
</Button>
));
if (client.kind === ClientKind.LINKED_CLIENT) {
inviteButton = <Button>Accept invite</Button>;
} else {
const copyString = client.copyString(link);
if (copyString !== '') {
@ -104,8 +103,8 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
<div>
<h1>{client.name}</h1>
<p>{client.description}</p>
{installButtons}
{inviteLine}
{hasNativeClient && installButton}
{inviteButton}
</div>
</Tile>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/imgs/fdroid-badge.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB