This commit is contained in:
Valere 2020-11-17 15:15:11 +01:00
parent 6d0acdafce
commit c78a91ea46
7 changed files with 104 additions and 6 deletions

View File

@ -20,6 +20,7 @@ import {
ClientKind,
ClientId,
Platform,
StoreDistribution,
} from './types';
import { LinkKind } from '../parser/types';
import logo from '../imgs/element.svg';
@ -31,7 +32,7 @@ export const Element: LinkedClient = {
logo: logo,
homepage: 'https://element.io',
maturity: Maturity.STABLE,
description: 'Fully-featured Matrix client for the Web',
description: 'Cross platfom fully-featured Matrix client',
platforms: [Platform.Desktop, Platform.Android, Platform.iOS],
experimental: false,
clientId: ClientId.Element,
@ -59,6 +60,27 @@ 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?
],
};
export const ElementDevelop: LinkedClient = {
@ -94,4 +116,5 @@ export const ElementDevelop: LinkedClient = {
}
},
linkSupport: () => true,
installLinks: [],
};

View File

@ -69,6 +69,7 @@ const Fractal: TextClient = {
},
description: 'Fractal is a Matrix Client written in Rust',
installLinks: [],
};
export default Fractal;

View File

@ -86,6 +86,7 @@ const Nheko: TextClient = {
},
description:
'A native desktop app for Matrix that feels more like a mainstream chat app.',
installLinks: [],
};
export default Nheko;

View File

@ -86,6 +86,7 @@ const Weechat: TextClient = {
},
description: 'Command-line Matrix interface using Weechat',
installLinks: [],
};
export default Weechat;

View File

@ -53,6 +53,29 @@ export enum ClientId {
Fractal = 'fractal',
}
/**
* 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;
constructor(
name: string,
platform: Platform,
download: string,
supportReferrer: boolean
) {
this.name = name;
this.platform = platform;
this.download = download;
this.supportReferrer = supportReferrer;
}
}
/*
* The descriptive details of a client
*/
@ -67,6 +90,7 @@ export interface ClientDescription {
clientId: ClientId;
experimental: boolean;
linkSupport: (link: SafeLink) => boolean;
installLinks: StoreDistribution[];
}
/*

View File

@ -51,7 +51,8 @@ limitations under the License.
.button {
height: 40px;
width: 130px;
min-width: 130px;
max-width: 165px;
margin-top: 16px;
}
}

View File

@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React, { useContext } from 'react';
import classNames from 'classnames';
import { UAContext } from '@quentin-sommer/react-useragent';
import { Client, ClientKind } from '../clients/types';
import { Client, ClientKind, Platform } from '../clients/types';
import { SafeLink } from '../parser/types';
import Tile from './Tile';
import Button from './Button';
@ -35,13 +36,54 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
<p>{client.toInviteString(link)}</p>
) : null;
const { uaResults } = useContext(UAContext);
const className = classNames('clientTile', {
clientTileLink: client.kind === ClientKind.LINKED_CLIENT,
});
let inviteButton: JSX.Element = <></>;
let hasNativeClient = false;
let installButton = undefined;
if (client.kind === ClientKind.LINKED_CLIENT) {
const availableClients = client.installLinks.filter((distrib) => {
if ((uaResults as any).ios) {
return distrib.platform == Platform.iOS;
} else if ((uaResults as any).android) {
return distrib.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>;
}
installButton = availableClients.map((distrib) => (
<Button
onClick={() =>
window.open(
distrib.supportReferrer
? distrib.download +
'&referrer=' +
link.originalLink
: distrib.download,
'_blank'
)
}
>
Get it on {distrib.name}
</Button>
));
} else {
const copyString = client.copyString(link);
if (copyString !== '') {
@ -63,13 +105,18 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
<h1>{client.name}</h1>
<p>{client.description}</p>
{inviteLine}
{hasNativeClient && installButton}
{inviteButton}
</div>
</Tile>
);
if (client.kind === ClientKind.LINKED_CLIENT) {
clientTile = <a href={client.toUrl(link).toString()}>{clientTile}</a>;
if (!hasNativeClient) {
clientTile = (
<a href={client.toUrl(link).toString()}>{clientTile}</a>
);
}
}
return clientTile;