From 3f349a63f727a71715a3bed059af4619ebf9eccc Mon Sep 17 00:00:00 2001
From: yujiaxinwt <1157613664@qq.com>
Date: Wed, 28 Jun 2023 16:59:01 +0800
Subject: [PATCH] =?UTF-8?q?sdk=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sdk/demo/demo.html             | 55 +++++++++++++++++++++++++++++-----
 sdk/enter.html                 | 13 +-------
 sdk/index.html                 | 50 ++++++++++++++++++++-----------
 sdk/src/AppController.js       | 12 +++-----
 sdk/src/AutoRotation.js        |  3 +-
 sdk/src/CanvasPlayer.js        |  4 ++-
 sdk/src/CloudApp.js            | 18 ++++++++++-
 sdk/src/Fullscreen.js          | 33 +++++++++++++++-----
 sdk/src/Util.js                |  6 ++--
 sdk/src/config/commonConfig.js |  4 ++-
 10 files changed, 138 insertions(+), 60 deletions(-)

diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html
index bf57dbe..2eff316 100644
--- a/sdk/demo/demo.html
+++ b/sdk/demo/demo.html
@@ -22,13 +22,14 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     <title>云手机SDK demo</title>
     <style>
       .section-center {
+        overflow: hidden;
         margin: 20px auto 10px;
-        text-align: center;
       }
 
-      .fullscreen-container {
-        width: 1280px;
-        height: 736px;
+      .section-center-mobile {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
       }
 
       .container {
@@ -80,6 +81,20 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         color: #fff;
       }
 
+      .play-ctr-btn {
+        display: inline-block;
+        background: #fff;
+        border: 1px solid #595959;
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        border-radius: 5px;
+        font-size: 14px;
+      }
+
+      .play-ctr-btn-mobile {
+        flex: 1;
+      }
     </style>
   </head>
 
@@ -87,7 +102,7 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     <div id="fullscreen-container"
          class="fullscreen-container">
       <div id="container"
-           class="container section-center">
+           class="container">
         <div class="loading"
              id="loading">
           <svg xmlns="http://www.w3.org/2000/svg"
@@ -118,12 +133,15 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     </div>
     <div class="section-center">
       <button type="button"
-              id="fullscreen"
+              id="exit"
+              class="play-ctr-btn"
               onclick="exit()">Exit</button>
       <button type="button"
               id="fullscreen"
-              onclick="cloudapp.fullscreenToggle()">Fullscreen</button>
+              class="play-ctr-btn"
+              onclick="cloudapp.fullscreenToggle('fullscreen-container')">Fullscreen</button>
       <select id="resolution"
+              class="play-ctr-btn"
               onchange="setResolution()">
         <option value="DISPLAY_480P">480P</option>
         <option value="DISPLAY_540P">540P</option>
@@ -133,6 +151,7 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       </select>
       <a id="trustHost"
          target="_blank"
+         class="play-ctr-btn"
          href="">信任目标机器</a>
     </div>
     <script type="text/javascript"
@@ -144,10 +163,18 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         var cloudIp = hostParams[0];
         var cloudPort = hostParams[1];
       } else {
-        let localHref = window.location.href.replace('demo.html', 'enter.html');
+        let localHref = window.location.href;
+        if (localHref.indexOf('demo.html') > -1) {
+          localHref = window.location.href.replace('demo.html', 'enter.html');
+        } else {
+          localHref = window.location.href.replace('index', '');
+        }
+        
         window.location.href = localHref;
       }
 
+      setMobileBtn();
+
       var getConfig = {
         get basePath() {
           let path = window.location.origin;
@@ -282,6 +309,18 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
 
         return decodeURIComponent(encodedStr);
       }
+
+      function setMobileBtn() {
+        let parentEle = document.getElementsByClassName('section-center');
+        let btnList = document.getElementsByClassName('play-ctr-btn');
+        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+          parentEle[0].classList.add('section-center-mobile');
+          for(let i=0;i<btnList.length;i++) {
+            let item = btnList[i];
+            item.classList.add('play-ctr-btn-mobile');
+          }
+        }
+      }
     </script>
   </body>
 
diff --git a/sdk/enter.html b/sdk/enter.html
index 119aead..b108e9f 100644
--- a/sdk/enter.html
+++ b/sdk/enter.html
@@ -79,7 +79,7 @@
 </head>
 <body>
     <div id="enterPage" class="enter-page">
-      <form action="" class="form-content">
+      <form action="" autocomplete="on" class="form-content">
         <div class="input-item input-item-display">
           <input placeholder="请输入云手机ip" type="text" id="ipInput" name="ipInput" class="input-value">
           <div class="error-msg" id="ipError">请输入正确的ip</div>
@@ -174,17 +174,6 @@
           pageContent.classList.add('pc-size');
         }
 
-        if (sessionStorage.getItem('cloudPhoneHost')) {
-          let localHref = window.location.href + 'index';
-          if (window.location.href.indexOf('enter.html') > -1) {
-            localHref = window.location.href.replace('enter.html', 'index.html');
-            if (localHref === window.location.href) {
-              localHref = window.location.href.replace('enter.html', 'demo.html');
-            }
-          }
-          window.location.href = localHref;
-        }
-
         ipInputEle.addEventListener('blur', function () {
           const ipValue = ipInputEle.value;
           if (!ipExp.test(ipValue)) {
diff --git a/sdk/index.html b/sdk/index.html
index f1d20be..77c56e9 100644
--- a/sdk/index.html
+++ b/sdk/index.html
@@ -29,11 +29,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         padding: 0;
       }
 
-      .fullscreen-container {
-        margin: 20px auto 10px;
-        width: 1200px;
-        height: 600px;
-      }
 
       .container {
         width: 100%;
@@ -89,22 +84,33 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         border-radius: 10px;
       }
 
+      .play-ctr-btn {
+        display: inline-block;
+        background: #fff;
+        border: 1px solid #595959;
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        border-radius: 5px;
+        font-size: 14px;
+      }
+
     </style>
   </head>
 
   <body onunload="cloudapp.exit()">
     <div id="fullscreen-container"
-         class="fullscreen-container">
+      class="fullscreen-container">
       <div id="container"
-           class="broadway container"
-           workers="false"
-           render="true"
-           webgl="auto">
+          class="broadway container"
+          workers="false"
+          render="true"
+          webgl="auto">
         <div class="loading"
-             id="loading">
+            id="loading">
           <svg xmlns="http://www.w3.org/2000/svg"
-               width="50"
-               height="50">
+              width="50"
+              height="50">
             <path fill="#909090"
                   d="M22.5 2h5v11h-5z" />
             <path fill="#B0B0B0"
@@ -140,11 +146,14 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
               onclick="exit()">Exit</button>
       <button type="button"
               id="fullscreen"
+              class="play-ctr-btn"
               onclick="fullscreenToggle('fullscreen-container')">Fullscreen</button>
       <button type="button"
-              id="fullscreen"
+              id="network"
+              class="play-ctr-btn"
               onclick="toggleNetworkInfo()">Network</button>
       <select id="resolution"
+              class="play-ctr-btn"
               onchange="setResolution()">
         <option value="DISPLAY_480P">480P</option>
         <option value="DISPLAY_540P">540P</option>
@@ -153,8 +162,9 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         <option value="DISPLAY_1080P">1080P</option>
       </select>
       <a id="trustHost"
-         target="_blank"
-         href="">信任目标机器</a>
+        target="_blank"
+        class="play-ctr-btn"
+        href="">信任目标机器</a>
     </div>
     <!-- <script type="text/javascript" src="lib/vconsole.min.js"></script> -->
     <script type="text/javascript"
@@ -166,7 +176,13 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         var cloudIp = hostParams[0];
         var cloudPort = hostParams[1];
       } else {
-        let localHref = window.location.href.replace('index.html', 'enter.html');
+        let localHref = window.location.href;
+        if (localHref.indexOf('demo.html') > -1) {
+          localHref = window.location.href.replace('demo.html', 'enter.html');
+        } else {
+          localHref = window.location.href.replace('index', '');
+        }
+        
         window.location.href = localHref;
       }
 
diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js
index f3e0db6..0dad8b1 100644
--- a/sdk/src/AppController.js
+++ b/sdk/src/AppController.js
@@ -1024,17 +1024,13 @@ class AppController {
             this.audioPlayer.on('audioStateChange', this.triggerSubscribe.bind(this));
         }
 
-        let playerWidth = '100%';
-        let playerHeight = '100%';
-        if (!this.isMSE) {
-            const parentContainer = document.getElementById('container');
-            playerHeight = parentContainer && parentContainer.clientHeight;
-            playerWidth = Math.ceil(playerHeight/1.8);
+        if (this.isMSE) {
+            this.player.style.setProperty('width', '100%', 'important');
+            this.player.style.setProperty('height', '100%', 'important');
+        } else {
             // 解决画布居中问题
             this.player.style.setProperty('margin', '0 auto', 'important');
         }
-        this.player.style.setProperty('width', playerWidth, 'important');
-        this.player.style.setProperty('height', playerHeight, 'important');
         // 解决真机键盘弹起后，浏览器可视窗变小，video高度很小而导致video停止播放，时延增加的问题。
         this.player.style.setProperty('min-height', '60px', 'important');
         this.player.style.setProperty('object-fit', 'contain', 'important');
diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index 11f9291..e7c2ff2 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -74,7 +74,8 @@ export default class AutoRotation {
         if (rect) {
             if (this.isMobile) {
                 width = Math.max(width - Math.max(rect.left, 0), 0);
-                height = Math.max(height - Math.max(rect.top, 0), 0);
+                // 需要预留按钮位置
+                height = Math.min(height - Math.max(rect.top, 0), rect.height);
             } else {
                 width = Math.max(width - Math.max(rect.left * 2, 0), 0);
                 height = Math.min(height - Math.max(rect.top * 2, 0), rect.height);
diff --git a/sdk/src/CanvasPlayer.js b/sdk/src/CanvasPlayer.js
index e5623f8..c6b2e86 100644
--- a/sdk/src/CanvasPlayer.js
+++ b/sdk/src/CanvasPlayer.js
@@ -18,10 +18,12 @@ import getEvents from './tools/event';
 import Util from './Util';
 import BaseClass from './tools/baseClass';
 import WebGLRenderer from './WebglRenderer';
+import {CLOUD_PHONE_RATIO} from './config/commonConfig';
 
 class CanvasPlayer extends BaseClass {
     constructor(options) {
         super(options);
+        this.options = {...options};
         this.moduleInit = false;
         this.streamList = [];
         this.document = document;
@@ -41,7 +43,7 @@ class CanvasPlayer extends BaseClass {
     }
 
     setCanvas () {
-        const $canvas = this.util.createCanvas(this);
+        const $canvas = this.util.createCanvas(this.options.isMobile, CLOUD_PHONE_RATIO);
         // 放入元素内部
         let parentNode = document.getElementById('container');
         parentNode.appendChild($canvas);
diff --git a/sdk/src/CloudApp.js b/sdk/src/CloudApp.js
index cae325e..10dd716 100644
--- a/sdk/src/CloudApp.js
+++ b/sdk/src/CloudApp.js
@@ -105,11 +105,27 @@ class CloudApp {
     _init_() {
         /*global __APP_VERSION__*/
         this.version = __APP_VERSION__;
+        const isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
+        let fullscreenContainer = document.getElementById('fullscreen-container');
+
+        if (!isMobile) {
+            fullscreenContainer.style.width = '100%';
+            fullscreenContainer.style.height = '600px';
+        } else {
+            const clientWidth = document.documentElement.clientWidth;
+            const clientHeight = document.documentElement.clientHeight;
+            fullscreenContainer.style.width = `${clientWidth}px`;
+            // 需要给操作按钮留出空间
+            fullscreenContainer.style.height = `${clientHeight - 100}px`;
+        }
+
         this.appController = CloudApp.setAppController.bind(this)();
         this.appController.start();
         this.fullscreen = new FullScreen({
             containerId: this.options.containerId,
-            autoRotate: this.appController.options.autoRotate
+            autoRotate: this.appController.options.autoRotate,
+            isMSE: this.appController.isMSE,
+            isMobile: isMobile
         });
         this.fullscreen.init();
         window.addEventListener('unload', () => {
diff --git a/sdk/src/Fullscreen.js b/sdk/src/Fullscreen.js
index 69e727a..aafe433 100644
--- a/sdk/src/Fullscreen.js
+++ b/sdk/src/Fullscreen.js
@@ -14,6 +14,7 @@
 
 import Logger from './Logger';
 import Util from './Util';
+import {CLOUD_PHONE_RATIO} from './config/commonConfig';
 
 const FULLSCREEN_CHANGE = ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'msFullscreenChange'];
 
@@ -22,6 +23,7 @@ export default class FullScreen {
         this.options = {...options};
         this.inFullscreenStatus = false;
         this.playerContainerId = null;
+        this.fullscreenElementId = null;
         this.fullscreenEle = null;
         this.util = new Util();
     }
@@ -73,16 +75,15 @@ export default class FullScreen {
             || document.webkitFullscreenElement);
         Logger.debug('inFullscreenStatus = ', this.inFullscreenStatus);
 
+        this.updateContainerSize();
+
         // 按下F11键进入全屏或退出全屏，不会触发resize事件，强制触发，否则触控点错位
         window.dispatchEvent && window.dispatchEvent(new Event('resize')); 
-        
-        // canvas无法使用百分比设置大小，故全屏和取消全屏需要手动设置宽高
-        this.updateCanvasSize();
-        
     }
 
     fullscreenToggle(fullscreenElementId, playerContainerId) {
         this.playerContainerId = playerContainerId;
+        this.fullscreenElementId = fullscreenElementId;
 
         if (!fullscreenElementId && this.options.autoRotate) {
             Logger.debug('Can not use fullscreenToggle API success, because fullscreenElementId is undefined but auto_rotate is true');
@@ -108,13 +109,29 @@ export default class FullScreen {
         });
     }
 
-    updateCanvasSize() {
-        const parentContainer = document.getElementById('container');
+    updateCanvasSize(clientWidth, clientHeight) {
         const playContainer = document.getElementById(`${this.playerContainerId}`);
         let canvasElement = playContainer.shadowRoot.querySelector('#playCanvas');
-        const playerHeight = parentContainer && parentContainer.clientHeight;
-        const playerWidth = Math.ceil(playerHeight/1.8);
+        let playerWidth = clientHeight * CLOUD_PHONE_RATIO;
+        let playerHeight = clientHeight;
         canvasElement.width = playerWidth;
         canvasElement.height = playerHeight;
     }
+
+    updateContainerSize() {
+        // 根据fullscreen-container更新container的大小
+        const fullscreenEle = document.getElementById(`${this.fullscreenElementId}`);
+        const fullWidth = fullscreenEle.clientWidth;
+        const fullHeight = fullscreenEle.clientHeight;
+        const containerEle = document.getElementById('container');
+        containerEle.style.cssText = `
+            width: ${fullWidth};
+            height: ${fullHeight};
+        `;
+
+        // canvas无法使用百分比设置大小，故全屏和取消全屏需要手动设置宽高
+        if (!this.options.isMSE) {
+            this.updateCanvasSize(fullWidth, fullHeight);
+        }
+    }
 }
diff --git a/sdk/src/Util.js b/sdk/src/Util.js
index f5fca8d..32b2fb2 100644
--- a/sdk/src/Util.js
+++ b/sdk/src/Util.js
@@ -117,10 +117,10 @@ export default class Util {
         return el;
     }
 
-    createCanvas = () => {
+    createCanvas = (isMobile, ratio) => {
         const parentContainer = document.getElementById('container');
-        const playerHeight = parentContainer && parentContainer.clientHeight;
-        const playerWidth = Math.ceil(playerHeight/1.8);
+        let playerHeight = parentContainer && parentContainer.clientHeight;
+        let playerWidth = playerHeight * ratio;
         const $ele = this.createEl('canvas');
         $ele.style.display = 'block';
         $ele.width = playerWidth;
diff --git a/sdk/src/config/commonConfig.js b/sdk/src/config/commonConfig.js
index 0f638d5..8119a26 100644
--- a/sdk/src/config/commonConfig.js
+++ b/sdk/src/config/commonConfig.js
@@ -9,4 +9,6 @@ export const MOBILE_CAMERA_MODE_MAP = {
 export const CAMERA_COMMON_MODE_MAP = {
     'USER': 1, // 前置
     'ENVIRONMENT': 0 // 后置
-}
\ No newline at end of file
+}
+// 后续CAE优化后，从CAE获取云手机宽高比
+export const CLOUD_PHONE_RATIO = 9/16;
\ No newline at end of file
-- 
Gitee