new

src/components/VoiceCheck/index.tsx

@@ -0,0 +1,157 @@
+import { ChromeOutlined, SoundOutlined } from '@ant-design/icons';
+import { getLocale, Icon } from '@umijs/max';
+import { Alert, Divider, Image, Modal, Space, Tabs, Typography } from 'antd';
+import { useCallback, useEffect, useState } from 'react';
+import useRichI18n from '@/hooks/useRichI18n';
+import { checkAudioPermission } from '@/utils';
+import bus from '@/utils/eventBus';
+import { $t } from '@/utils/i18n';
+
+const { Paragraph } = Typography;
+const ChangePassTips: React.FC = () => {
+  const { richFormat } = useRichI18n();
+
+  const [visible, setVisible] = useState(false);
+  const [hasAudioPermission, setHasAudioPermission] = useState(true);
+
+  const checkAudio = useCallback((showPopup?: boolean) => {
+    checkAudioPermission().then((hasPermission) => {
+      setHasAudioPermission(hasPermission);
+    });
+    showPopup && setVisible(true);
+  }, []);
+
+  const openPopup = useCallback(() => setVisible(true), []);
+
+  useEffect(() => {
+    checkAudio();
+
+    bus.on('check-voice-permission', checkAudio);
+    bus.on('open-voice-popup', openPopup);
+    // document.addEventListener('click', () => checkAudio());
+    return () => {
+      bus.off('check-voice-permission', checkAudio);
+      bus.off('open-voice-popup', openPopup);
+      // document.removeEventListener('click', () => checkAudio());
+    };
+  }, []);
+
+  const browserGuides = [
+    {
+      key: 'chrome',
+      label: (
+        <span>
+          <ChromeOutlined /> Chrome
+        </span>
+      ),
+      children: (
+        <div>
+          <Paragraph>1. {richFormat('pages.voiceCheck.chrome.tips')}</Paragraph>
+          <Paragraph>
+            2. {richFormat('pages.voiceCheck.chrome.tips2')}
+          </Paragraph>
+          <Paragraph>
+            3. {richFormat('pages.voiceCheck.chrome.tips3')}
+          </Paragraph>
+          <Paragraph>
+            4. {richFormat('pages.voiceCheck.chrome.tips4')}
+          </Paragraph>
+          <Paragraph>
+            5. {richFormat('pages.voiceCheck.chrome.tips5')}
+          </Paragraph>
+          <Image
+            width="100%"
+            src={require(
+              `@/assets/imgs/voice_permission_tips_${getLocale()}.png`,
+            )}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <Space align="center" onClick={() => setVisible(true)}>
+        {!hasAudioPermission && (
+          <>
+            <Alert
+              message={$t('pages.voiceCheck.alertMessage')}
+              type="warning"
+              showIcon
+            />
+            <Icon
+              icon="local:silence"
+              height="20px"
+              fill="#f59e0b"
+              className="flex align-center"
+            />
+          </>
+        )}
+        {/* {hasAudioPermission ? (
+          <Icon
+            icon="local:voice"
+            height="20px"
+            fill="#34d399"
+            className="flex align-center"
+          />
+        ) : (
+          <Icon
+            icon="local:silence"
+            height="20px"
+            fill="#f59e0b"
+            className="flex align-center"
+          />
+        )} */}
+      </Space>
+
+      <Modal
+        title={
+          <Space>
+            <SoundOutlined /> {$t('pages.voiceCheck.title')}
+          </Space>
+        }
+        open={visible}
+        onCancel={() => setVisible(false)}
+        width={800}
+        footer={null}
+        centered
+        styles={{
+          body: {
+            maxHeight: '85vh',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            marginRight: -20,
+            paddingRight: 8,
+          },
+        }}
+      >
+        <Space direction="vertical" size="middle">
+          <Alert
+            message={$t('pages.voiceCheck.alertMessage2')}
+            description={$t('pages.voiceCheck.alertMessage3')}
+            type="warning"
+            banner
+          />
+
+          {/* <div>
+            <Space style={{ marginBottom: 10 }} align="center">
+              <InfoCircleOutlined />
+              <Text strong>{$t('pages.voiceCheck.tips')}：</Text>
+            </Space>
+            <div>{$t('pages.voiceCheck.tips2')}</div>
+          </div> */}
+
+          <Divider style={{ margin: 0 }}>
+            {$t('pages.voiceCheck.tips3')}
+          </Divider>
+
+          <Tabs defaultActiveKey="chrome" items={browserGuides} size="small" />
+
+          <Alert type="info" message={$t('pages.voiceCheck.tips4')} banner />
+        </Space>
+      </Modal>
+    </>
+  );
+};
+export default ChangePassTips;