feat(web): add "open in browser" tip in wechat browser (#1268)

Author: hyrious

cspell.config.js

@@ -113,6 +113,7 @@ module.exports = {
         "estree",
         "webstorm",
         "Frameless",
+        "micromessenger",
 
         // CNCF
         "nindent",

packages/flat-i18n/locales/en.json

@@ -388,5 +388,6 @@
   "user-guide-text": "Want to learn more about Flat? ",
   "user-guide-button": "Check it out now",
   "start-recording": "Start recording",
-  "stop-recording": "Stop recording"
+  "stop-recording": "Stop recording",
+  "open-in-browser": "Open in Browser"
 }

packages/flat-i18n/locales/zh-CN.json

@@ -388,5 +388,6 @@
   "user-guide-text": "想了解更多 Flat 的使用技巧？",
   "user-guide-button": "立即查看",
   "start-recording": "开始录制",
-  "stop-recording": "停止录制"
+  "stop-recording": "停止录制",
+  "open-in-browser": "请在浏览器中打开"
 }

web/flat-web/src/pages/JoinPage/JoinPageMobile.tsx

@@ -1,4 +1,5 @@
 import logoSVG from "./icons/logo-sm.svg";
+import openInBrowserSVG from "./icons/open-in-browser.svg";
 
 import React, { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -10,6 +11,8 @@ export interface JoinPageMobileProps {
     serviceURL: string;
 }
 
+const isWeChatBrowser = window.navigator.userAgent.toLowerCase().includes("micromessenger");
+
 export default function JoinPageMobile({
     roomUUID,
     privacyURL,
@@ -33,7 +36,7 @@ export default function JoinPageMobile({
 
     return (
         <div className="join-page-mobile-container">
-            <iframe width="0" height="0" style={{ display: "none" }} src={url} />
+            <iframe width="0" height="0" title="join flat" style={{ display: "none" }} src={url} />
             <div className="join-page-mobile-effect"></div>
             <div className="join-page-mobile-header">
                 <div className="join-page-mobile-app-icon">
@@ -57,6 +60,12 @@ export default function JoinPageMobile({
                     {t("service-policy")}
                 </a>
             </div>
+            {isWeChatBrowser && (
+                <div className="join-page-mobile-wechat-overlay">
+                    <img src={openInBrowserSVG} alt="[open-in-browser]" />
+                    <strong>{t("open-in-browser")}</strong>
+                </div>
+            )}
         </div>
     );
 }

web/flat-web/src/pages/JoinPage/icons/open-in-browser.svg

@@ -83,7 +83,6 @@ export const JoinPage = observer(function JoinPage() {
                     serviceURL={serviceURL}
                 />
             )}
-            ;
         </div>
     );
 });

web/flat-web/src/pages/JoinPage/index.tsx

@@ -186,7 +186,7 @@
     width: 100%;
     max-width: 268px;
     border-radius: 8px;
-    border: 1px solid #3381FF;
+    border: 1px solid #3381ff;
     outline: none;
     background-color: #3381ff;
     color: #fff;
@@ -197,7 +197,10 @@
     &::after {
         content: "";
         position: absolute;
-        top: 0; right: 0; bottom: 0; left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         z-index: 10;
         background-color: transparent;
     }
@@ -207,14 +210,14 @@
 }
 
 .join-page-mobile-big-btn.secondary {
-    color: #3381FF;
+    color: #3381ff;
     background-color: transparent;
 }
 
 .join-page-mobile-footer {
     font-size: 14px;
     text-align: center;
-    color: #7A7B7C;
+    color: #7a7b7c;
 }
 
 .join-page-mobile-logo-texts {
@@ -351,3 +354,28 @@
     z-index: 0;
     pointer-events: none;
 }
+
+.join-page-mobile-wechat-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    img {
+        width: 176px;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    strong {
+        color: #fff;
+        font-size: 16px;
+        font-weight: 400;
+        position: absolute;
+        top: 96px;
+        right: 40px;
+    }
+}