ShareGroup
/
zoom-video-sdk-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
							<!--
When the user's device's os version is unfit for the requirements (Android 9.0+ and iOS 14+),
this page will be loaded by the native app.
-->
<!DOCTYPE html>
<html lang="en" mode="ios">
  <head>
    <meta charset="utf-8" />
    <title>Calendar Client</title>
    <meta name="color-scheme" content="light dark" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <style>
      :host {
        --zm-background-color: #fff;
        --zm-text-color: #131619;
      }
      @media (prefers-color-scheme: dark) {
        body {
          --zm-background-color: #232323;
          --zm-text-color: #848484;
        }
      }
      @supports (padding-top: 20px) {
        html {
          --ion-safe-area-top: var(--ion-statusbar-padding);
        }
      }
      @supports (padding-top: constant(safe-area-inset-top)) {
        html {
          --ion-safe-area-top: constant(safe-area-inset-top);
          --ion-safe-area-bottom: constant(safe-area-inset-bottom);
          --ion-safe-area-left: constant(safe-area-inset-left);
          --ion-safe-area-right: constant(safe-area-inset-right);
        }
      }
      @supports (padding-top: env(safe-area-inset-top)) {
        html {
          --ion-safe-area-top: env(safe-area-inset-top);
          --ion-safe-area-bottom: env(safe-area-inset-bottom);
          --ion-safe-area-left: env(safe-area-inset-left);
          --ion-safe-area-right: env(safe-area-inset-right);
        }
      }
      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
      }
      html,
      body {
        position: fixed;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
        overscroll-behavior-y: none;
        word-wrap: break-word;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizelegibility;
        -webkit-user-drag: none;
        -ms-content-zooming: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
      }
      body {
        width: 100vw;
        height: 100vh;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        background-color: var(--zm-background-color);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      .header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: var(--ion-safe-area-top);
        padding-right: 15px;
        padding-left: 15px;
        line-height: 44px;
        color: #fff;
        background-color: #39394d;
      }
      #back {
        position: absolute;
        left: 15px;
      }
      .title {
        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, sans-serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 600;
        line-height: 44px;
      }
      .upgrade-tips {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 247px;
        margin-top: -80px;
        /* margin-left: -40vw; */
        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: var(--zm-text-color);
        text-align: center;
      }
      .update-button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 24px;
        margin: 0 auto;
        position: absolute;
        width: 100%;
        max-width: 343px;
        height: 48px;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: #0E72ED;
        border-radius: 12px;
        border: none;
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
        color: #FFFFFF;
      }
    </style>
    <script src="./closeWebview.js"></script>
  </head>

  <body>
    <div class="header">
      <div class="back" id="back">
        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <mask
            id="mask0_511_21316"
            style="mask-type: alpha"
            maskUnits="userSpaceOnUse"
            x="3"
            y="-1"
            width="10"
            height="18"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12.205 1.70815C12.5951 1.31724 12.5952 0.683335 12.2052 0.292276C11.8152 -0.098783 11.1828 -0.0989057 10.7927 0.292002L3.90979 7.18843C3.86872 7.21855 3.82942 7.25221 3.79232 7.28941C3.41118 7.6715 3.40279 8.28529 3.76691 8.67759C3.77785 8.68969 3.78915 8.70158 3.80079 8.71325C3.80895 8.72143 3.81721 8.72944 3.82558 8.73728L10.7926 15.7081C11.183 16.0987 11.8157 16.0984 12.2057 15.7074C12.5958 15.3164 12.5955 14.6827 12.205 14.2921L5.92091 8.00456L12.205 1.70815Z"
              fill="#000001"
            />
          </mask>
          <g mask="url(#mask0_511_21316)">
            <rect width="16" height="16" fill="white" />
          </g>
        </svg>
      </div>
      <div class="title">Calendar</div>
    </div>
    <div class="upgrade-tips" id="app">
      <div class="tips-text" id="upgrade-text">Update the OS version for your device to use Zcalendar</div>
    </div>
    <!-- <button class="update-button">Software Update</button> -->
    <script>
      var stringMap = {
        'en-US': 'Update the OS version for your device to use Zcalendar',
        'de-DE': 'Aktualisieren Sie die Betriebssystemversion Ihres Geräts, um Zcalender zu verwenden',
        'es-ES': 'Actualice la versión del SO de su dispositivo para usar Zcalendar',
        'fr-FR': 'Mettez à jour la version de système d’exploitation de votre appareil pour utiliser Zcalendar',
        'jp-JP': 'Zcalendar を使用するにはデバイスの OS バージョンを更新してください'
      }
      var localeMap = {
        'en-US': 'en',
        'es-ES': 'es',
        'de-DE': 'de',
        'zh-CN': 'zhCN',
        'zh-TW': 'zhTW',
        'fr-FR': 'fr',
        'pl-PL': 'pl',
        'pt-PT': 'pt',
        'jp-JP': 'jp',
        'ru-RU': 'ru',
        'ko-KO': 'ko',
        'it-IT': 'it',
        'tr-TR': 'tr',
        'vi-VN': 'vi',
        'id-ID': 'id',
        'nl-NL': 'nl',
        'en': 'en',
        'es': 'es',
        'de': 'de',
        'fr': 'fr',
        'pl': 'pl',
        'pt': 'pt',
        'jp': 'jp',
        'ja': 'jp',
        'ru': 'ru',
        'ko': 'ko',
        'it': 'it',
        'tr': 'tr',
        'vi': 'vi',
        'id': 'id',
        'nl': 'nl',
      };
      function setI18n () {
        var isAndroid = typeof window.android_config !== 'undefined';
        var webviewParamsObj;
        if (isAndroid) {
          webviewParamsObj = window.android_config.getSystemParam();
          if (typeof webviewParamsObj !== 'undefined') {
            try {
              webviewParamsObj = JSON.parse(webviewParamsObj);
            } catch {
              window.zoomLog('MEMLOG', 'Android, Webview', `${webviewParamsStr}`);
            }
          }
        } else {
          webviewParamsObj = window.__system_params__ || {};
        }        
        
        var i18nValue = localeMap[webviewParamsObj.globalLang] || 'en';
        var langId = {
          'en': 'en-US',
          'es': 'es-ES',
          'de': 'de-DE',
          'zhCN': 'zh-CN',
          'zhTW': 'zh-TW',
          'fr': 'fr-FR',
          'pl': 'pl-PL',
          'pt': 'pt-PT',
          'jp': 'jp-JP',
          'ru': 'ru-RU',
          'ko': 'ko-KO',
          'it': 'it-IT',
          'tr': 'tr-TR',
          'vi': 'vi-VN',
          'id': 'id-ID',
          'nl': 'nl-NL'
        };
        var globalLang = langId[i18nValue] || 'en-US';
        var el = document.querySelector('#upgrade-text')
        el.innerText = stringMap[globalLang] || stringMap['en-US']
      }
      setI18n()
      function isWindows(window) {
        return isCEF(window) || isWebView2(window);
      }
      function isAndroid() {
        return window.android;
      }
      function isCEF(window) {
        return window.chrome && window.webkit;
      }
      function isWebView2(window) {
        return window.chrome && window.chrome.webview;
      }
      function isMacOS(window) {
        return !window.chrome && window.webkit;
      }
      function getJsCallId() {
        return 'id' + Math.random().toString(16).slice(2);
      }
      function postMessage(message) {
        try {
          message.jsCallId = getJsCallId();
          const json = JSON.stringify(message);
          if (isAndroid()) {
            window.android.postMessage(json);
          }
          if (isWebView2(window)) {
            window.chrome.webview.postMessage(json);
          } else if (window.chrome && window.webkit) {
            window.webkit.messageHandlers.jsOCHelper.postMessage(json);
          } else if (isMacOS(window)) {
            window.webkit.messageHandlers.jsOCHelper.postMessage(message);
          }
        } catch (e) {
          // console.error('upgrade postMessage error', e);
          // todo:
        }
      }
      function closeWebview() {
        postMessage({
          functionName: 'calendarui_closecalendarmobile',
          params: {},
        });
      }
      var handleNotification = function (message) {
        if (!message.returnCode) {
          if (message.result && message.result.notification) {
          var notificationType = message.result.notification;
          if (notificationType === 'ZMCalendarUINotifBackUp') {
            closeWebview()
          }
        }
      }
    }
      class ZoomSdk {
        native2js(message) {
          if (isWindows(window)) {
            const messageData = message.data;
            const jsCallId = messageData.jsCallId;
            if (jsCallId === '') {
              handleNotification(messageData);
            }
          } else {
            const jsCallId = message.jsCallId;
            handleNotification(message);
          }
        } 
      }
   </script>
  </body>
</html>