npm - fcr-ui-scene - Versions diffs - 3.4.0 → 3.4.1 - Mend

fcr-ui-scene 3.4.0 → 3.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (324) hide show

package/public/index.html CHANGED Viewed

@@ -4,6 +4,66 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Meeting</title>
+    <style>
+      #fcr-launch-failure-comp {
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(144, 144, 144, 0.6);
+        position: fixed;
+        z-index: 9999;
+        top: 0px;
+        left: 0px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .fcr-launch-failure-comp-modal {
+        width: 320px;
+        height: 374px;
+        background-color: rgba(255, 255, 255, 0.85);
+        border-radius: 24px;
+        display: flex;
+        box-shadow: 0px 0px 15px 0px rgba(151, 151, 151, 0.25);
+        border: 1px solid #e3e7efff;
+        display: flex;
+        flex-direction: column;
+      }
+      .fcr-launch-failure-comp-banner {
+        margin: 0 auto;
+        width: 280px;
+        align-self: flex-start;
+      }
+      .fcr-launch-failure-comp-info {
+        text-align: center;
+        margin-top: 24px;
+        margin-bottom: 20px;
+        color: rgba(55, 60, 66, 1);
+      }
+      .fcr-launch-failure-comp-h {
+        font-weight: 600;
+        margin-bottom: 12px;
+      }
+      .fcr-launch-failure-comp-desc {
+        font-weight: 400;
+      }
+      .fcr-confirm-btn {
+        width: 280px;
+        height: 36px;
+        background-color: rgba(66, 98, 255, 1);
+        color: #ffffff;
+        text-align: center;
+        line-height: 36px;
+        border-radius: 50px;
+        margin: 0 auto;
+        cursor: pointer;
+      }
+    </style>
   </head>
   <body style="background: rgb(251, 252, 255)">
@@ -13,8 +73,58 @@
       <img src="assets/loading.gif" alt="loading" width="128" height="128" />
     </div>
     <div id="root"></div>
+    <div id="fcr-launch-failure-comp" style="display: none">
+      <div class="fcr-launch-failure-comp-modal">
+        <img class="fcr-launch-failure-comp-banner" src="./assets/fcr_leave2.svg" />
+        <div class="fcr-launch-failure-comp-info">
+          <div class="fcr-launch-failure-comp-h">
+            <span id="fcr-launch-failure-comp-title">Launch Failure</span>
+          </div>
+          <div id="fcr-launch-failure-error-info" class="fcr-launch-failure-comp-desc"></div>
+        </div>
+        <div id="fcr-launch-failure-confirm-btn" class="fcr-confirm-btn">
+          <span id="fcr-launch-failure-btn-text">I know</span>
+        </div>
+      </div>
+    </div>
   </body>
   <script>
+    window.enLangResource = {
+      fmt_role_host: 'Host',
+      fmt_statusbar_label_unknown: 'unknown error',
+      fmt_information_tips_lockedbyhost:
+        'The {reason1} has locked the meeting and no one else is allowed to join',
+    };
+    window.zhLangResource = {
+      fmt_role_host: '主持人',
+      fmt_statusbar_label_unknown: '未知错误',
+      fmt_information_tips_lockedbyhost: '{reason1}锁定了会议，其他人不可入会',
+    };
+    function replacePlaceholders(str, obj) {
+      // 使用正则表达式匹配所有的占位符
+      return str.replace(/{([^}]+)}/g, (match, key) => {
+        // 检查对象中是否存在该键
+        if (obj.hasOwnProperty(key.trim())) {
+          // 如果存在，返回对应的值
+          return obj[key.trim()];
+        }
+        // 如果不存在，返回原始的占位符
+        return match;
+      });
+    }
+    window._transI18n = (key, replaceKeys) => {
+      const currentLang = window.$$agora_language === 'zh' ? 'zh' : 'en';
+      const langResource = window[`${currentLang}LangResource`];
+      let res = langResource[key];
+      if (res) {
+        res = replacePlaceholders(res, replaceKeys);
+      }
+      return res;
+    };
     const setLoading = (visible) => {
       const dom = document.querySelector('#launch-loading');
       if (dom) {
@@ -25,9 +135,31 @@
         }
       }
     };
+    const setFullScreenFailureComp = (visible, errorMsg) => {
+      setLoading(false);
+      const dom = document.querySelector('#fcr-launch-failure-comp');
+      const titleDom = document.querySelector('#fcr-launch-failure-comp-title');
+      const btnTextDom = document.querySelector('#fcr-launch-failure-btn-text');
+      if (dom) {
+        if (visible) {
+          dom.style.display = 'flex';
+          titleDom.innerText = window.$$agora_language === 'zh' ? '启动错误' : 'Launch Failure';
+          btnTextDom.innerText = window.$$agora_language === 'zh' ? '我已知悉' : 'I know';
+          if (errorMsg) {
+            const msgDom = document.querySelector('#fcr-launch-failure-error-info');
+            msgDom.innerText = errorMsg;
+          }
+        } else {
+          dom.style.display = 'none';
+        }
+      }
+    };
     (async () => {
       setLoading(true);
+      document.querySelector('#fcr-launch-failure-confirm-btn').addEventListener('click', () => {
+        setFullScreenFailureComp(false);
+        window.runtime.quitApp();
+      });
       const launchOptions = await window.runtime.getLaunchOptions();
       let launchOptionsObj = launchOptions;
       try {
@@ -60,24 +192,29 @@
         () => {
           window.runtime.quitApp();
         },
-        () => {
-          document.querySelector('title').innerText =
-            window.$$agora_language === 'zh'
-              ? '参会者ID:' + userId
-              : 'Meeting Participant ID:' + userId;
-        },
-        () => {
-          window.runtime.quitApp();
-        },
+        () => {},
+        () => {},
         document.getElementById('root'),
       );
       uiScene.addObserver({
         onLaunchSuccess: () => {
           setLoading(false);
+          document.querySelector('title').innerText =
+            window.$$agora_language === 'zh'
+              ? '参会者ID:' + userId
+              : 'Meeting Participant ID:' + userId;
         },
-        onLaunchFailure: () => {
-          setLoading(false);
-          window.runtime.quitApp();
+        onLaunchFailure: (roomId, error) => {
+          const errorCode = Number(error.code);
+          if (errorCode === 732403100) {
+            const lockErrorMsg = window._transI18n('fmt_information_tips_lockedbyhost', {
+              reason1: window._transI18n('fmt_role_host'),
+            });
+            setFullScreenFailureComp(true, lockErrorMsg);
+          } else {
+            const errorMsg = window._transI18n('fmt_statusbar_label_unknown');
+            setFullScreenFailureComp(true, errorMsg);
+          }
         },
         onExited: (reason) => {
           window.runtime.quitApp();