buddy/src/renderer/compatibility/CompatNoticeModal.tsx at d345d929941b5fc331e1afe6605f01cd2a2f33a7 · EdgeTX/buddy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import {
  CloseCircleOutlined,
  CheckCircleOutlined,
  GithubOutlined,
} from "@ant-design/icons";
import { Button, Checkbox, Modal, Result, Typography } from "antd";
import React from "react";
import { FullHeightCentered } from "renderer/shared/layouts";
import { Trans, useTranslation } from "react-i18next";

type Props = {
  missingUsbApi?: boolean;
  missingFilesystemApi?: boolean;
  onDontShowAgain?: (show: boolean) => void;
  visible?: boolean;
  onClose?: () => void;
};

const WebCompatInfo: React.FC<Props> = ({
  missingFilesystemApi,
  missingUsbApi,
  onDontShowAgain,
  visible,
  onClose,
}) => {
  const { t } = useTranslation("compatibility");
  return (
    <Modal
      style={{ maxWidth: "500px", top: "50px" }}
      width="100%"
      visible={visible}
      onCancel={onClose}
      closable
      footer={
        <Checkbox
          onChange={(e) => {
            onDontShowAgain?.(e.target.checked);
          }}
        >
          {t(`Don't show again`)}
        </Checkbox>
      }
    >
      <FullHeightCentered>
        <Result
          status="warning"
          title={t(`Your browser doesn't support EdgeTX Buddy`)}
          subTitle={
            <Trans t={t}>
              You can install the app, or use a browser with{" "}
              <Typography.Link
                href="https://caniuse.com/webusb"
                target="_blank"
              >
                WebUSB support
              </Typography.Link>
            </Trans>
          }
          extra={
            <Button
              href="https://github.com/EdgeTX/buddy/releases/tag/latest"
              type="primary"
              target="_blank"
              icon={<GithubOutlined />}
            >
              {t(`Go to app releases`)}
            </Button>
          }
        >
          <Typography.Paragraph>
            {missingUsbApi ? (
              <Trans t={t}>
                <CloseCircleOutlined style={{ color: "red" }} /> Missing WebUSB
                API -{" "}
                <Typography.Link
                  target="_blank"
                  href="https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API"
                >
                  Docs
                </Typography.Link>
              </Trans>
            ) : (
              <Trans t={t}>
                <CheckCircleOutlined
                  style={{ color: "var(--ant-success-color)" }}
                />{" "}
                We have WebUSB API access
              </Trans>
            )}
          </Typography.Paragraph>
          <Typography.Paragraph>
            {missingFilesystemApi ? (
              <Trans t={t}>
                <CloseCircleOutlined style={{ color: "red" }} /> Missing File
                System Access API -{" "}
                <Typography.Link
                  target="_blank"
                  href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API"
                >
                  Docs
                </Typography.Link>
              </Trans>
            ) : (
              <Trans t={t}>
                <CheckCircleOutlined
                  style={{ color: "var(--ant-success-color)" }}
                />{" "}
                We have File System Access API access
              </Trans>
            )}
          </Typography.Paragraph>
        </Result>
      </FullHeightCentered>
    </Modal>
  );
};

export default WebCompatInfo;