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

fcr-ui-scene 3.4.0 → 3.4.2

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 (709) 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,61 @@
       <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/leave-meeting.png" />
+        <div class="fcr-launch-failure-comp-info">
+          <div class="fcr-launch-failure-comp-h">
+            <span id="fcr-launch-failure-comp-title"></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_statusbar_label_unknown: 'unknown error',
+      fmt_pc_room_not_exist_error: 'The room does not exist or the password is wrong',
+      fmt_lock_error: 'The host has locked the meeting and no one else can join',
+      fmt_end_error: 'The meeting has ended',
+      fmt_host_leave_error: 'The moderator is not in the meeting',
+    };
+    window.zhLangResource = {
+      fmt_statusbar_label_unknown: '未知错误',
+      fmt_pc_room_not_exist_error: '房间不存在或密码错误',
+      fmt_lock_error: '主持人锁定了会议，其他人不可入会',
+      fmt_end_error: '会议已结束',
+      fmt_host_leave_error: '主持人不在会议中',
+    };
+    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 +138,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' ? '锁定会议' : 'Meeting Locked';
+          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,25 +195,37 @@
         () => {
           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);
+          let errorMessage = error.message;
+          if (errorCode === 732403100) {
+            errorMessage = window._transI18n('fmt_lock_error');
+          } else if (errorCode === 732403101) {
+            errorMessage = window._transI18n('fmt_pc_room_not_exist_error');
+          } else if (errorCode === 732403103) {
+            errorMessage = window._transI18n('fmt_host_leave_error');
+          } else if (errorCode === 720410100) {
+            errorMessage = window._transI18n('fmt_end_error');
+          } else {
+            errorMessage = `Error: code=${errorCode}, message=${errorMessage}`;
+          }
+          setFullScreenFailureComp(true, errorMessage);
         },
         onExited: (reason) => {
           window.runtime.quitApp();
         },