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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, { useContext } from 'react';
import classNames from 'classnames'; 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 { SafeLink } from '../parser/types';
import Tile from './Tile'; import Tile from './Tile';
import Button from './Button'; import Button from './Button';
@ -35,13 +36,54 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
<p>{client.toInviteString(link)}</p> <p>{client.toInviteString(link)}</p>
) : null; ) : null;
const { uaResults } = useContext(UAContext);
const className = classNames('clientTile', { const className = classNames('clientTile', {
clientTileLink: client.kind === ClientKind.LINKED_CLIENT, clientTileLink: client.kind === ClientKind.LINKED_CLIENT,
}); });
let inviteButton: JSX.Element = <></>; let inviteButton: JSX.Element = <></>;
let hasNativeClient = false;
let installButton = undefined;
if (client.kind === ClientKind.LINKED_CLIENT) { if (client.kind === ClientKind.LINKED_CLIENT) {
inviteButton = <Button>Accept invite</Button>; 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 { } else {
const copyString = client.copyString(link); const copyString = client.copyString(link);
if (copyString !== '') { if (copyString !== '') {
@ -63,13 +105,18 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
<h1>{client.name}</h1> <h1>{client.name}</h1>
<p>{client.description}</p> <p>{client.description}</p>
{inviteLine} {inviteLine}
{hasNativeClient && installButton}
{inviteButton} {inviteButton}
</div> </div>
</Tile> </Tile>
); );
if (client.kind === ClientKind.LINKED_CLIENT) { 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; return clientTile;