From 938a07150c920db5a67b74b71096dacfcf75c81c Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Fri, 19 Jul 2024 17:31:24 +0800
Subject: [PATCH 1/8] 1

---
 sdk/demo/demo.html          | 81 ++--------------------------------
 sdk/src/DirectionHandler.js | 88 +++++++++----------------------------
 2 files changed, 24 insertions(+), 145 deletions(-)

diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html
index 8aaaf45..964c5da 100644
--- a/sdk/demo/demo.html
+++ b/sdk/demo/demo.html
@@ -218,17 +218,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     .cancel-btn {
       border: none;
     }
-    #mobileNetworkDelay {
-      display: none;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 40px;
-      height: 40px;
-      text-align: center;
-      color: #3AC295;
-      z-index: 999;
-    }
     .slider {
       position: relative;
       width: 35px;
@@ -337,22 +326,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
               d="M39.496 6.969l3.535 3.536-7.78 7.777-3.534-3.536z" />
       </svg>
     </div>
-    <div id="network-info">
-      <div id="pcNetworkContent">
-        时延 <span id="pcNetworkDelay"></span>ms
-      </div>
-    </div>
-    <div class="message-modal" id="messageModal">
-      <div class="header-content">
-        <p>温馨提示</p>
-      </div>
-      <div class="body-content">
-        <p class="msg" id="msgContent"></p>
-      </div>
-      <div class="footer-content">
-        <button class="button-alone" onclick="closeModal()">退出</button>
-      </div>
-    </div>
     <div class="exit-modal" id="exitModal">
       <div class="header-content">
         <p>温馨提示</p>
@@ -366,7 +339,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       </div>
     </div>
     <div id="controlBtn" class="control-btn">
-      <span id="mobileNetworkDelay"></span>
     </div>
     <div id="buttonModal" class="button-modal">
       <div class="radio-group">
@@ -384,12 +356,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         </div>
       </div>
       <div class="button-list">
-        <div class="button-network">
-          <div>时延</div>
-          <div class="slider" id="networkSlider">
-            <div class="slider-btn" id="networkSliderBtn"></div>
-          </div>
-        </div>
         <div class="button-fullscreen" id="buttonFullscreen">
           <div>全屏</div>
           <div class="slider" id="toggleFullscreen">
@@ -435,12 +401,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         <input type="radio" name="clarityPc" id="PCSD" value="SD" onchange="radioChange(event)">
         <label for="PCSD">流畅</label>
       </div>
-      <div class="pc-slider-btn">
-        <div class="slider" id="pcNetworkSlider">
-          <div class="slider-btn pc-color" id="pcNetworkSliderBtn"></div>
-        </div>
-        <div class="mr-left-10">时延</div>
-      </div>
     </div>
   </div>
   <div class="normal-btn">
@@ -580,7 +540,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       ...cloudPhoneParams,
       channelType: channelType,
       ticket: '256random'.padStart(256, '0'),
-      aes_key: '11111111111111111111111111111111',
+      // aes_key: '38cd1479423e42369f099661d3f61ee6',
+      aes_key: 'bdbf24c2c2db43c58b18e4232ada9026',
       auth_ts: 'test_auth_ts',
       _debug: true,
       auto_rotate: true,
@@ -620,11 +581,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         cloudapp.on("netStateChange", function (event, data) {
           let delayElement = null;
           if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-            delayElement = document.getElementById('mobileNetworkDelay');
           } else {
-            delayElement = document.getElementById('pcNetworkDelay');
           }
-          delayElement.innerHTML = data.delay;
         });
 
         // 时延开关
@@ -710,10 +668,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       showTrustModal(targetStr);
     }, error => {
       const errorMsg = error && JSON.parse(error).errorMsg;
-      const modalEle = document.getElementById('messageModal');
-      const msgEle = document.getElementById('msgContent');
-      msgEle.innerText = errorMsg;
-      modalEle.style.display = 'block';
     });
   }
 
@@ -723,15 +677,7 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     let sliderBtnEle = null;
     let sliderBtnBg = null;
     if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-      networkInfoElement = document.getElementById('mobileNetworkDelay');
-      sliderEle = document.getElementById('networkSlider');
-      sliderBtnEle = document.getElementById('networkSliderBtn');
-      sliderBtnBg = '#fff';
     } else {
-      networkInfoElement = document.getElementById('pcNetworkContent');
-      sliderEle = document.getElementById('pcNetworkSlider');
-      sliderBtnEle = document.getElementById('pcNetworkSliderBtn');
-      sliderBtnBg = '#eee';
     }
     
     sliderEle.addEventListener('click', () => {
@@ -740,12 +686,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         sliderBtnEle.style.left = '15px';
         sliderEle.style.backgroundColor = '#a17c7f';
         sliderBtnEle.style.backgroundColor = '#85090c';
-        networkInfoElement.style.display = 'inline-block';
       } else {
         sliderBtnEle.style.left = '0px';
         sliderEle.style.backgroundColor = '#ccc';
         sliderBtnEle.style.backgroundColor = sliderBtnBg;
-        networkInfoElement.style.display = 'none';
       }
     });
   }
@@ -769,8 +713,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
 
   function exit() {
     cloudapp.exit();
-    var networkInfoElement = document.getElementById('mobileNetworkDelay');
-    networkInfoElement.hidden = true;
 
     let isAppUse = false;
     try {
@@ -862,26 +804,9 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     return decodeURIComponent(encodedStr);
   }
 
-  function showAlertModal(data) {
-    const modalEle = document.getElementById('messageModal');
-    const msgEle = document.getElementById('msgContent');
-    const startSuccessState = 512;
-    // 连接成功需要关闭已显示的弹框
-    if (data.state === startSuccessState) {
-      if(modalEle.style.display === 'block') {
-        modalEle.style.display = 'none';
-        return;
-      }
-    }
-    if (data.tip) {
-      msgEle.innerHTML = data.tip;
-      modalEle.style.display = 'block';
-    }
-  }
+  function showAlertModal(data) {}
 
   function closeModal() {
-    const modalEle = document.getElementById('messageModal');
-    modalEle.style.display = 'none';
     if (cloudapp) {
       exit();
     }
diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js
index 324c5e9..3c6bd7e 100644
--- a/sdk/src/DirectionHandler.js
+++ b/sdk/src/DirectionHandler.js
@@ -45,8 +45,14 @@ class DirectionHandler {
         this.touchHandler = this.options.touchHandler;
 
         this.containerEle = document.getElementById(this.options.containerId);
-        this.netWorkInfo = document.getElementById('network-info');
-        this.messageModal = document.getElementById('messageModal');
+        this.netWorkInfo = {
+          clientHeight: 0,
+          clientWidth: 0 
+        };
+        this.messageModal ={
+          width: '0px',
+          height: '0px'
+        };
         this.exitModal = document.getElementById('exitModal');
         this.buttonModal = document.getElementById('buttonModal');
         this.ctrlEle = document.getElementById('controlBtn');
@@ -143,25 +149,7 @@ class DirectionHandler {
             transform: rotate(${positionParams.transformAngle}deg);
             transform-origin: left top;
         `;
-        this.messageModal.style.cssText = transformCssText;
         this.exitModal.style.cssText = transformCssText;
-        this.netWorkInfo.style.cssText = `
-            transform-origin: left;
-            -webkit-transform: rotate(${positionParams.transformAngle}deg);
-            -moz-transform: rotate(${positionParams.transformAngle}deg);
-            -ms-transform: rotate(${positionParams.transformAngle}deg);
-            -o-transform: rotate(${positionParams.transformAngle}deg);
-            transform: rotate(${positionParams.transformAngle}deg);
-            pointer-events: none;
-            position: absolute;
-            left: ${positionParams.netWorkInfoLeft}px;
-            top: ${positionParams.netWorkInfoTop}px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: ${positionParams.netWorkInfoWidth}px;
-            color: #3AC295;
-        `;
         this.buttonModal.style.cssText = `
             -webkit-transform: rotate(${positionParams.transformAngle}deg);
             -moz-transform: rotate(${positionParams.transformAngle}deg);
@@ -204,18 +192,7 @@ class DirectionHandler {
 
     // 设备不旋转，流不旋转
     portraitAndportrait(ctrlEleLeft, ctrlEleTop) {
-        this.messageModal.style.cssText = normalCssText;
         this.exitModal.style.cssText = normalCssText;
-        this.netWorkInfo.style.cssText = `
-            pointer-events: none;
-            position: absolute;
-            top: 0px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: 100%;
-            color: #3AC295;
-        `;
         this.buttonModal.style.cssText = `
             display: none;
             width: 255px;
@@ -239,10 +216,10 @@ class DirectionHandler {
         const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
         const netWorkInfoLeft = (this.containerEle.clientWidth -  this.netWorkInfo.clientWidth)/2 + this.netWorkInfo.clientWidth;
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight;
-        const commonLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0]) + (this.displayBox.width - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
-        const commonTop =this.containerEle.clientHeight/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0])/2;
+        const commonLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(this.messageModal.width.split('px')[0]) + (this.displayBox.width - Number(this.messageModal.width.split('px')[0]))/2;
+        const commonTop =this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
         const buttonModalLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]) + (this.displayBox.width - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
-        const buttonModalTop = this.containerEle.clientHeight/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0])/2;
+        const buttonModalTop = this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
         const ctrlEleTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight * 2.5;
         const ctrlEleLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientWidth * 1.5;
         const netWorkInfoWidth = this.containerEle.clientWidth;
@@ -272,8 +249,8 @@ class DirectionHandler {
         const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
         const netWorkInfoLeft = this.containerEle.clientWidth - this.netWorkInfo.clientHeight;
         const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
-        const commonLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]);
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
+        const commonLeft = this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]);
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
         const buttonModalLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
         const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
         const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.netWorkInfo.clientHeight;
@@ -315,7 +292,7 @@ class DirectionHandler {
         const netWorkInfoLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight;
         const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
         const commonLeft = this.containerEle.clientWidth;
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
         const buttonModalLeft = this.containerEle.clientWidth;
         const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
         const ctrlEleTop = this.ctrlEle.clientHeight;
@@ -355,8 +332,8 @@ class DirectionHandler {
         const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
         const netWorkInfoLeft = this.netWorkInfo.clientHeight;
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
-        const commonLeft = (this.displayBox.height - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2;
-        const commonTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0])}`;
+        const commonLeft = (this.displayBox.height - Number(this.messageModal.height.split('px')[0]))/2;
+        const commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
         const buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
         const buttonModalLeft = (this.displayBox.height - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
         const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientHeight;
@@ -392,7 +369,7 @@ class DirectionHandler {
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
         const buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
         const buttonModalLeft = 0;
-        const commonTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0])}`;
+        const commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
         const commonLeft = 0;
         const ctrlEleTop = this.containerEle.clientHeight - this.ctrlEle.clientHeight;
         const ctrlEleLeft =-((windowHeight - this.containerEle.clientWidth)/2 - this.netWorkInfo.clientHeight * 2);
@@ -439,19 +416,7 @@ class DirectionHandler {
     // 设备横屏，流旋转0
     landscapeAndPortrait() {
         const clientWidth = document.documentElement.clientWidth;
-        this.messageModal.style.cssText = normalCssText;
         this.exitModal.style.cssText = normalCssText;
-        this.netWorkInfo.style.cssText = `
-            pointer-events: none;
-            position: absolute;
-            top: 0px;
-            left: ${-(document.documentElement.clientWidth - this.containerEle.clientWidth)/2}px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: ${document.documentElement.clientWidth}px;
-            color: #3AC295;
-        `;
         this.buttonModal.style.cssText = `
             display: none;
             width: 255px;
@@ -489,8 +454,8 @@ class DirectionHandler {
         const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
         const ctrlEleTop = this.ctrlEle.clientHeight;
         const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 2.5;
-        const commonLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0]);
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
+        const commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2 + Number(this.messageModal.height.split('px')[0]);
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
         const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
         const buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
         const netWorkInfoWidth = this.containerEle.clientHeight;
@@ -526,8 +491,8 @@ class DirectionHandler {
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
         const ctrlEleTop = this.containerEle.clientHeight - this.ctrlEle.clientHeight;
         const ctrlEleLeft =-((windowHeight - this.containerEle.clientWidth)/2 - this.ctrlEle.clientWidth);
-        const commonLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2;
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0]);
+        const commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2;
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0]);
         const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]);
         const buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
         const netWorkInfoWidth = this.containerEle.clientHeight;
@@ -591,18 +556,7 @@ class DirectionHandler {
     }
 
     cancelTransform() {
-        this.messageModal.style.cssText = normalCssText;
         this.exitModal.style.cssText = normalCssText;
-        this.netWorkInfo.style.cssText = `
-            pointer-events: none;
-            position: absolute;
-            top: 0px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: 100%;
-            color: #3AC295;
-        `;
         this.buttonModal.style.cssText = `
             display: none;
             width: 255px;
-- 
Gitee


From ccd62215a4fd49afa21782f2c0529855a49f8110 Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Fri, 19 Jul 2024 17:47:04 +0800
Subject: [PATCH 2/8] 1

---
 sdk/demo/demo.html          |  99 --------------------------------
 sdk/src/AppController.js    |   9 ---
 sdk/src/DirectionHandler.js | 109 +++++++-----------------------------
 3 files changed, 20 insertions(+), 197 deletions(-)

diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html
index 964c5da..5b83df9 100644
--- a/sdk/demo/demo.html
+++ b/sdk/demo/demo.html
@@ -326,50 +326,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
               d="M39.496 6.969l3.535 3.536-7.78 7.777-3.534-3.536z" />
       </svg>
     </div>
-    <div class="exit-modal" id="exitModal">
-      <div class="header-content">
-        <p>温馨提示</p>
-      </div>
-      <div class="body-content">
-        <p class="msg" id="msgContent">确定退出吗？</p>
-      </div>
-      <div class="footer-content">
-        <button class="exit-btn" onclick="exitPhone()">退出</button>
-        <button class="cancel-btn" onclick="closeExitModal()">取消</button>
-      </div>
-    </div>
-    <div id="controlBtn" class="control-btn">
-    </div>
-    <div id="buttonModal" class="button-modal">
-      <div class="radio-group">
-        <div class="UHD">
-          <input type="radio" name="clarity" id="UHD" value="UHD" onchange="radioChange(event)">
-          <label for="UHD">超清</label>
-        </div>
-        <div class="HD">
-          <input type="radio" name="clarity" id="HD" value="HD" checked="true" onchange="radioChange(event)">
-          <label for="HD">高清</label>
-        </div>
-        <div class="SD">
-          <input type="radio" name="clarity" id="SD" value="SD" onchange="radioChange(event)">
-          <label for="SD">流畅</label>
-        </div>
-      </div>
-      <div class="button-list">
-        <div class="button-fullscreen" id="buttonFullscreen">
-          <div>全屏</div>
-          <div class="slider" id="toggleFullscreen">
-            <div class="slider-btn" id="fullscreenSliderBtn"></div>
-          </div>
-        </div>
-        <div class="button-exit" id="exitBtn" onclick="showExitModal()">退出云手机</div>
-      </div>
-      <div class="button-list">
-        <button class="back-btn" id="backBtn" onclick="sendKeyCodeBack()">返回</button>
-        <button class="home-btn" id="homeBtn" onclick="sendKeyCodeHome()">桌面</button>
-        <button class="list-btn" id="listBtn" onclick="sendKeyCodeMenu()">多任务</button>
-      </div>
-    </div>
   </div>
 
   <div class="message-modal" id="trustModal">
@@ -386,30 +342,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     </div>
   </div>
 </div>
-<div class="pc-button-list" id="pcButtonList">
-  <div class="clarity-btn">
-    <div class="radio-group-pc">
-      <div class="UHD">
-        <input type="radio" name="clarityPc" id="PCUHD" value="UHD" onchange="radioChange(event)">
-        <label for="PCUHD">超清</label>
-      </div>
-      <div class="HD">
-        <input type="radio" name="clarityPc" id="PCHD" value="HD" checked onchange="radioChange(event)">
-        <label for="PCHD">高清</label>
-      </div>
-      <div class="SD">
-        <input type="radio" name="clarityPc" id="PCSD" value="SD" onchange="radioChange(event)">
-        <label for="PCSD">流畅</label>
-      </div>
-    </div>
-  </div>
-  <div class="normal-btn">
-    <button onclick="sendKeyCodeBack()">返回</button>
-    <button onclick="sendKeyCodeHome()">桌面</button>
-    <button onclick="sendKeyCodeMenu()">多任务</button>
-    <button onclick="showExitModal()">退出云手机</button>
-  </div>
-</div>
 <script src="./common.js"></script>
 <script type="text/javascript">
   var phoneId = null;
@@ -695,10 +627,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
   }
 
   function showExitModal() {
-    const buttonModalEle = document.getElementById('buttonModal');
-    const exitModalEle = document.getElementById('exitModal');
-    buttonModalEle.style.display = 'none';
-    exitModal.style.display = 'block';
   }
 
   function exitPhone() {
@@ -707,8 +635,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
   }
 
   function closeExitModal() {
-    const exitModalEle = document.getElementById('exitModal');
-    exitModal.style.display = 'none';
   }
 
   function exit() {
@@ -752,14 +678,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
 
   function sendKeyCodeHome() {
     cloudapp.home();
-    const buttonModalEle = document.getElementById('buttonModal');
-    buttonModalEle.style.display = 'none';
   }
 
   function sendKeyCodeMenu() {
     cloudapp.menu();
-    const buttonModalEle = document.getElementById('buttonModal');
-    buttonModalEle.style.display = 'none';
   }
 
   function setResolution() {
@@ -818,8 +740,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
         closeCtrlModal();
       } else {
-        let pcOperateBtn = document.getElementById('pcButtonList');
-        pcOperateBtn.style.display = 'flex';
       }
       
       try {
@@ -834,39 +754,20 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
   }
 
   function closeCtrlModal() {
-    const ctrlEle = document.getElementById('controlBtn');
-    const buttonModalEle = document.getElementById('buttonModal');
     const playContainer = document.querySelector('article');
     const playerElement = playContainer.shadowRoot.querySelector('#playCanvas') || playContainer.shadowRoot.querySelector('#phoenixVideo');
     const fullscreenBtn = document.getElementById('buttonFullscreen');
-    ctrlEle.style.display = 'block';
-    ctrlEle.addEventListener('click', (event) => {
-      if(buttonModalEle.style.display !== 'block') {
-        buttonModalEle.style.display = 'block';
-      } else {
-        buttonModalEle.style.display = 'none';
-      }
-    });
 
     if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
       fullscreenBtn.style.display = 'flex';
       playerElement.addEventListener('touchend', (event) => {
-        if(!buttonModalEle.contains(event.target) && !ctrlEle.contains(event.target)) {
-          buttonModalEle.style.display = 'none';
-        }
       });
     } else {
       fullscreenBtn.style.display = 'none';
       document.addEventListener('click', (event) => {
-        if(!buttonModalEle.contains(event.target) && !ctrlEle.contains(event.target)) {
-          buttonModalEle.style.display = 'none';
-        }
       });
     }
 
-    buttonModalEle.addEventListener('click', (event) => {
-      event.stopPropagation();
-    });
   }
 
   function trustHost() {
diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js
index fe3a267..0e0d0de 100644
--- a/sdk/src/AppController.js
+++ b/sdk/src/AppController.js
@@ -377,15 +377,6 @@ class AppController {
                 this.keyboardInput.getTouchHandler(this.touchHandler);
             }
 
-            if(this.touchHandler.displayBox.width && this.touchHandler.displayBox.height) {
-                const ctrlEle = document.getElementById('controlBtn');
-                const containerEle = document.getElementById('container');
-                const left = (containerEle.offsetWidth - this.touchHandler.displayBox.width)/2 + ctrlEle.clientWidth/2;
-                const top = (containerEle.offsetHeight - this.touchHandler.displayBox.height)/2 + ctrlEle.clientHeight * 2.5;
-                ctrlEle.style.top = `${top}px`;
-                ctrlEle.style.left = `${left}px`;
-                ctrlEle.style.userSelect = 'none';
-            }
             this.directionHandler = new DirectionHandler({
                 containerId: this.options.containerId,
                 isMobile: this.options.isMobile,
diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js
index 3c6bd7e..b572efe 100644
--- a/sdk/src/DirectionHandler.js
+++ b/sdk/src/DirectionHandler.js
@@ -49,13 +49,18 @@ class DirectionHandler {
           clientHeight: 0,
           clientWidth: 0 
         };
-        this.messageModal ={
+        this.messageModal = {
           width: '0px',
           height: '0px'
         };
-        this.exitModal = document.getElementById('exitModal');
-        this.buttonModal = document.getElementById('buttonModal');
-        this.ctrlEle = document.getElementById('controlBtn');
+        this.buttonModal = {
+          width: '0px',
+          height: '0px'
+        };;
+        this.ctrlEle = {
+          clientHeight: 0,
+          clientWidth: 0 
+        };
         this.keyboardInputContent = document.getElementById('keyboardInputContent');
     }
 
@@ -149,24 +154,6 @@ class DirectionHandler {
             transform: rotate(${positionParams.transformAngle}deg);
             transform-origin: left top;
         `;
-        this.exitModal.style.cssText = transformCssText;
-        this.buttonModal.style.cssText = `
-            -webkit-transform: rotate(${positionParams.transformAngle}deg);
-            -moz-transform: rotate(${positionParams.transformAngle}deg);
-            -ms-transform: rotate(${positionParams.transformAngle}deg);
-            -o-transform: rotate(${positionParams.transformAngle}deg);
-            transform-origin: left top;
-            transform: rotate(${positionParams.transformAngle}deg);
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: ${positionParams.buttonModalTop}px;
-            left: ${positionParams.buttonModalLeft}px;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-        `;
         if (this.keyboardInputContent) {
             this.keyboardInputContent.style.cssText = `
                 display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
@@ -184,31 +171,11 @@ class DirectionHandler {
             `;            
         }
 
-        this.ctrlEle.style.top = `${positionParams.ctrlEleTop}px`;
-        this.ctrlEle.style.left = `${positionParams.ctrlEleLeft}px`;
-        this.ctrlEle.style.transform = `rotate(${positionParams.transformAngle}deg)`;
-        this.ctrlEle.style.transformOrigin = 'top';
     }
 
     // 设备不旋转，流不旋转
     portraitAndportrait(ctrlEleLeft, ctrlEleTop) {
-        this.exitModal.style.cssText = normalCssText;
-        this.buttonModal.style.cssText = `
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: 50%;
-            left: 50%;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-            transform: translate(-50%, -50%);
-        `;
 
-        this.ctrlEle.style.top = `${ctrlEleTop}px`;
-        this.ctrlEle.style.left = `${ctrlEleLeft}px`;
-        this.ctrlEle.style.transform = 'none';
     }
 
     // 设备不旋转，流旋转180
@@ -218,7 +185,7 @@ class DirectionHandler {
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight;
         const commonLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(this.messageModal.width.split('px')[0]) + (this.displayBox.width - Number(this.messageModal.width.split('px')[0]))/2;
         const commonTop =this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
-        const buttonModalLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]) + (this.displayBox.width - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
+        const buttonModalLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number((this.buttonModal).width.split('px')[0]) + (this.displayBox.width - Number((this.buttonModal).width.split('px')[0]))/2;
         const buttonModalTop = this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
         const ctrlEleTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight * 2.5;
         const ctrlEleLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientWidth * 1.5;
@@ -251,8 +218,8 @@ class DirectionHandler {
         const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
         const commonLeft = this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]);
         const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
-        const buttonModalLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
+        const buttonModalLeft = this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]);
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
         const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.netWorkInfo.clientHeight;
         const ctrlEleLeft = this.containerEle.clientWidth - this.ctrlEle.clientHeight * 2.5;
         const netWorkInfoWidth = this.containerEle.clientHeight;
@@ -294,7 +261,7 @@ class DirectionHandler {
         const commonLeft = this.containerEle.clientWidth;
         const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
         const buttonModalLeft = this.containerEle.clientWidth;
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
         const ctrlEleTop = this.ctrlEle.clientHeight;
         const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 3.5;
         const netWorkInfoWidth = this.containerEle.clientHeight;
@@ -334,8 +301,8 @@ class DirectionHandler {
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
         const commonLeft = (this.displayBox.height - Number(this.messageModal.height.split('px')[0]))/2;
         const commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
-        const buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
-        const buttonModalLeft = (this.displayBox.height - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
+        const buttonModalTop = `${(this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0])}`;
+        const buttonModalLeft = (this.displayBox.height - Number((this.buttonModal).height.split('px')[0]))/2;
         const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientHeight;
         const ctrlEleLeft = this.netWorkInfo.clientHeight * 1.5;
         const netWorkInfoWidth = this.containerEle.clientHeight;
@@ -367,7 +334,7 @@ class DirectionHandler {
         const windowHeight = document.documentElement.clientHeight;
         const netWorkInfoLeft = -((windowHeight - this.containerEle.clientWidth)/2 - this.netWorkInfo.clientHeight/2);
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
-        const buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
+        const buttonModalTop = `${(this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0])}`;
         const buttonModalLeft = 0;
         const commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
         const commonLeft = 0;
@@ -416,19 +383,6 @@ class DirectionHandler {
     // 设备横屏，流旋转0
     landscapeAndPortrait() {
         const clientWidth = document.documentElement.clientWidth;
-        this.exitModal.style.cssText = normalCssText;
-        this.buttonModal.style.cssText = `
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: 50%;
-            left: 50%;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-            transform: translate(-50%, -50%);
-        `;
         this.keyboardInputContent.style.cssText = `
             display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
             position: absolute;
@@ -438,11 +392,6 @@ class DirectionHandler {
             width: ${clientWidth}px;
             `;
 
-        const left = this.ctrlEle.clientWidth/2;
-        const top = this.netWorkInfo.clientHeight * 2.5;
-        this.ctrlEle.style.top = `${top}px`;
-        this.ctrlEle.style.left = `${left}px`;
-        this.ctrlEle.style.transform = 'none';
     }
 
     // 设备横屏，流旋转-90
@@ -456,8 +405,8 @@ class DirectionHandler {
         const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 2.5;
         const commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2 + Number(this.messageModal.height.split('px')[0]);
         const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
-        const buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
+        const buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2 + Number((this.buttonModal).height.split('px')[0]);
         const netWorkInfoWidth = this.containerEle.clientHeight;
         const keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0]/2);
         const keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
@@ -493,8 +442,8 @@ class DirectionHandler {
         const ctrlEleLeft =-((windowHeight - this.containerEle.clientWidth)/2 - this.ctrlEle.clientWidth);
         const commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2;
         const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0]);
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]);
-        const buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0]);
+        const buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2;
         const netWorkInfoWidth = this.containerEle.clientHeight;
         const keyboardInputLeft = Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
         const keyboardInputTop = windowWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
@@ -556,19 +505,6 @@ class DirectionHandler {
     }
 
     cancelTransform() {
-        this.exitModal.style.cssText = normalCssText;
-        this.buttonModal.style.cssText = `
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: 50%;
-            left: 50%;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-            transform: translate(-50%, -50%);
-        `;
         if (this.keyboardInputContent) {
             this.keyboardInputContent.style.cssText = `
             display: none;
@@ -580,11 +516,6 @@ class DirectionHandler {
             `;
         }
 
-        const left = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.ctrlEle.clientWidth/2;
-        const top = (this.containerEle.clientHeight - this.displayBox.height)/2 + this.netWorkInfo.clientHeight * 2.5;
-        this.ctrlEle.style.top = `${top}px`;
-        this.ctrlEle.style.left = `${left}px`;
-        this.ctrlEle.style.transform = 'none';
     }
 
     updateCanvasSize(orientation, isMSE) {
-- 
Gitee


From b382c87ef0923776b221dfbd4089222592eb40db Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Wed, 31 Jul 2024 17:57:09 +0800
Subject: [PATCH 3/8] 1

---
 sdk/demo/demo.html          | 12 ----------
 sdk/src/AppController.js    | 21 ----------------
 sdk/src/AutoRotation.js     | 46 ++++++++++++++++++++---------------
 sdk/src/DirectionHandler.js | 48 ++++++++++++++++++++-----------------
 4 files changed, 53 insertions(+), 74 deletions(-)

diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html
index 5b83df9..7365eb5 100644
--- a/sdk/demo/demo.html
+++ b/sdk/demo/demo.html
@@ -756,18 +756,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
   function closeCtrlModal() {
     const playContainer = document.querySelector('article');
     const playerElement = playContainer.shadowRoot.querySelector('#playCanvas') || playContainer.shadowRoot.querySelector('#phoenixVideo');
-    const fullscreenBtn = document.getElementById('buttonFullscreen');
-
-    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-      fullscreenBtn.style.display = 'flex';
-      playerElement.addEventListener('touchend', (event) => {
-      });
-    } else {
-      fullscreenBtn.style.display = 'none';
-      document.addEventListener('click', (event) => {
-      });
-    }
-
   }
 
   function trustHost() {
diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js
index 7bd7205..9e98526 100644
--- a/sdk/src/AppController.js
+++ b/sdk/src/AppController.js
@@ -179,7 +179,6 @@ class AppController {
             isMobile: this.options.isMobile
         });
         this.fullscreen.init();
-        this.triggerFullscreen();
     }
 
     sendKeyCodeMsg(keyCodeType) {
@@ -1454,26 +1453,6 @@ class AppController {
         return this.fullscreen.isFullscreen();
     }
 
-    triggerFullscreen() {
-        const fullscreenBtn = document.getElementById('toggleFullscreen');
-        const sliderBtnEle = document.getElementById('fullscreenSliderBtn');
-        if (fullscreenBtn) {
-            fullscreenBtn.addEventListener('click', () => {
-                const left = sliderBtnEle.offsetLeft;
-                if (left === 0) {
-                    sliderBtnEle.style.left = '15px';
-                    fullscreenBtn.style.backgroundColor = '#a17c7f';
-                    sliderBtnEle.style.backgroundColor = '#85090c';
-                } else {
-                    sliderBtnEle.style.left = '0px';
-                    fullscreenBtn.style.backgroundColor = '#ccc';
-                    sliderBtnEle.style.backgroundColor = '#fff';
-                }
-                this.fullscreenToggle();
-            });
-        }
-    }
-
     /**
      * 销毁
      * @param {boolean}} reserveSocketWorker 是否需要销毁socket，exit场景，延迟close socket，close前需保留socket
diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index ec565bd..057795d 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -84,16 +84,22 @@ export default class AutoRotation {
                 const deviceOrientation = this.getDeviceOrientation();
                 if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
                     if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
-                        style = `
-                            -webkit-transform: none;
-                            -moz-transform: none;
-                            -ms-transform: none;
-                            transform: none;
-                            width: ${width}px;
-                            height: ${height}px;
-                            position: relative;
-                            top: 0px;
-                            left: 0px;
+                      playerWidth = width ;
+                      playerHeight = width / CLOUD_PHONE_RATIO;
+                      if(playerHeight > height) {
+                        playerWidth = height * CLOUD_PHONE_RATIO;
+                        playerHeight = height;
+                      }
+                      style = `
+                          -webkit-transform: none;
+                          -moz-transform: none;
+                          -ms-transform: none;
+                          transform: none;
+                          width: ${playerWidth}px;
+                          height: ${playerHeight}px;
+                          position: relative;
+                          top: ${(height - playerHeight)/2}px;
+                          left: ${(width - playerWidth)/2}px;
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
@@ -179,21 +185,23 @@ export default class AutoRotation {
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        playerWidth = width ;
+                        playerHeight = width / CLOUD_PHONE_RATIO;
+                        if(playerHeight > height) {
+                          playerWidth = height * CLOUD_PHONE_RATIO;
+                          playerHeight = height;
+                        }
                         style = `
                             -webkit-transform: rotate(${rotateDegrees}deg);
                             -moz-transform: rotate(${rotateDegrees}deg);
                             -ms-transform: rotate(${rotateDegrees}deg);
                             transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: left;
-                            -moz-transform-origin: left;
-                            -ms-transform-origin: left;
-                            transform-origin: left;
-                            width: ${height}px;
-                            height: ${width}px;
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
                             position: relative;
-                            top: ${height - width/2}px;
-                            left: ${width/2}px;
-                        `;
+                            top: ${(height - playerHeight)/2}px;
+                            left: ${(width - playerWidth)/2}px;
+                          `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
                         style = `
diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js
index b572efe..e17809a 100644
--- a/sdk/src/DirectionHandler.js
+++ b/sdk/src/DirectionHandler.js
@@ -56,12 +56,19 @@ class DirectionHandler {
         this.buttonModal = {
           width: '0px',
           height: '0px'
-        };;
+        };
         this.ctrlEle = {
           clientHeight: 0,
           clientWidth: 0 
         };
-        this.keyboardInputContent = document.getElementById('keyboardInputContent');
+        if (this.options.isMobile) {
+          this.keyboardInputContent = {
+             width: '0px',
+             height: '0px'
+          }
+        } else {
+          this.keyboardInputContent = document.getElementById('keyboardInputContent');
+        }
     }
 
     init() {
@@ -120,9 +127,9 @@ class DirectionHandler {
                 }
                 break;
             case PROTOCOL_CONFIG.ORIENTATION[16]:
-                const keyboardInputLeft = this.containerEle.clientWidth;
-                const keyboardInputTop = this.containerEle.clientHeight/2 - this.keyboardInputContent.clientHeight;
-                this.portraitAndReversePortrait(keyboardInputLeft, keyboardInputTop, PROTOCOL_CONFIG.ORIENTATION[16]);
+                // const keyboardInputLeft = this.containerEle.clientWidth;
+                // const keyboardInputTop = this.containerEle.clientHeight/2 - this.keyboardInputContent.clientHeight;
+                // this.portraitAndReversePortrait(keyboardInputLeft, keyboardInputTop, PROTOCOL_CONFIG.ORIENTATION[16]);
             break;
             case PROTOCOL_CONFIG.ORIENTATION[8]:
                 this.portraitAndReverseLandscapeMobile(PROTOCOL_CONFIG.ORIENTATION[8]);
@@ -154,7 +161,7 @@ class DirectionHandler {
             transform: rotate(${positionParams.transformAngle}deg);
             transform-origin: left top;
         `;
-        if (this.keyboardInputContent) {
+        if (this.keyboardInputContent && !this.options.isMobile) {
             this.keyboardInputContent.style.cssText = `
                 display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
                 -webkit-transform: rotate(${positionParams.transformAngle}deg);
@@ -268,9 +275,6 @@ class DirectionHandler {
         let keyboardInputLeft;
         let keyboardInputTop;
         if(this.keyboardInputContent) {
-            keyboardInputLeft = this.containerEle.clientWidth/2 - this.keyboardInputContent.clientHeight;
-            keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
-        } else {
             keyboardInputLeft = 0;
             keyboardInputTop = 0;
         }
@@ -383,14 +387,14 @@ class DirectionHandler {
     // 设备横屏，流旋转0
     landscapeAndPortrait() {
         const clientWidth = document.documentElement.clientWidth;
-        this.keyboardInputContent.style.cssText = `
-            display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
-            position: absolute;
-            top: 0px;
-            left: ${-(clientWidth - this.containerEle.clientWidth)/2}px;
-            height: 40px;
-            width: ${clientWidth}px;
-            `;
+        // this.keyboardInputContent.style.cssText = `
+        //     display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
+        //     position: absolute;
+        //     top: 0px;
+        //     left: ${-(clientWidth - this.containerEle.clientWidth)/2}px;
+        //     height: 40px;
+        //     width: ${clientWidth}px;
+        //     `;
 
     }
 
@@ -408,8 +412,8 @@ class DirectionHandler {
         const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
         const buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2 + Number((this.buttonModal).height.split('px')[0]);
         const netWorkInfoWidth = this.containerEle.clientHeight;
-        const keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0]/2);
-        const keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
+        const keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(this.keyboardInputContent.height.split('px')[0]/2);
+        const keyboardInputTop = -Number(this.keyboardInputContent.height.split('px')[0])/2;
         const keyboardInputWidth = windowWidth;
 
         const positionParams = {
@@ -445,8 +449,8 @@ class DirectionHandler {
         const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0]);
         const buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2;
         const netWorkInfoWidth = this.containerEle.clientHeight;
-        const keyboardInputLeft = Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
-        const keyboardInputTop = windowWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
+        const keyboardInputLeft = Number(this.keyboardInputContent.height.split('px')[0])/2;
+        const keyboardInputTop = windowWidth - Number(this.keyboardInputContent.height.split('px')[0])/2;
         const keyboardInputWidth = windowWidth;
 
         const positionParams = {
@@ -505,7 +509,7 @@ class DirectionHandler {
     }
 
     cancelTransform() {
-        if (this.keyboardInputContent) {
+        if (this.keyboardInputContent && !this.options.isMobile) {
             this.keyboardInputContent.style.cssText = `
             display: none;
             position: absolute;
-- 
Gitee


From a11947cc5a2a20c55ad41185f083e9f6aa25c39d Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Wed, 31 Jul 2024 18:00:08 +0800
Subject: [PATCH 4/8] 1

---
 sdk/src/DirectionHandler.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js
index e17809a..ac8ec81 100644
--- a/sdk/src/DirectionHandler.js
+++ b/sdk/src/DirectionHandler.js
@@ -115,16 +115,6 @@ class DirectionHandler {
                 let ctrlEleLeft = this.ctrlEle.clientWidth/2;
                 let ctrlEleTop = this.netWorkInfo.clientHeight * 2.5;
                 this.portraitAndportrait(ctrlEleLeft, ctrlEleTop);
-                if (this.keyboardInputContent) {
-                    this.keyboardInputContent.style.cssText = `
-                    display: ${this.currentDisplay ? this.currentDisplay : 'none'};
-                    position: absolute;
-                    top: 50%;
-                    left: 0px;
-                    height: 40px;
-                    width: 100%;
-                    `;
-                }
                 break;
             case PROTOCOL_CONFIG.ORIENTATION[16]:
                 // const keyboardInputLeft = this.containerEle.clientWidth;
-- 
Gitee


From 173b4aedbc3ea51da14a56a29e9aed70327f728e Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Tue, 20 Aug 2024 10:03:35 +0800
Subject: [PATCH 5/8] 1

(cherry picked from commit a67ff35b0b57e0194f9ead8d8d3039d7b9a0ed57)
---
 sdk/src/AutoRotation.js | 279 ++++++++++++++++++++--------------------
 sdk/src/TouchHandler.js |   2 +-
 2 files changed, 141 insertions(+), 140 deletions(-)

diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index 057795d..0b75f86 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -82,145 +82,146 @@ export default class AutoRotation {
         if (rect) {
             if (this.isMobile) {
                 const deviceOrientation = this.getDeviceOrientation();
-                if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
-                    if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
-                      playerWidth = width ;
-                      playerHeight = width / CLOUD_PHONE_RATIO;
-                      if(playerHeight > height) {
-                        playerWidth = height * CLOUD_PHONE_RATIO;
-                        playerHeight = height;
-                      }
-                      style = `
-                          -webkit-transform: none;
-                          -moz-transform: none;
-                          -ms-transform: none;
-                          transform: none;
-                          width: ${playerWidth}px;
-                          height: ${playerHeight}px;
-                          position: relative;
-                          top: ${(height - playerHeight)/2}px;
-                          left: ${(width - playerWidth)/2}px;
-                        `;
-                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            width: ${width}px;
-                            height: ${height}px;
-                            position: relative;
-                            top: 0px;
-                            left: 0px;
-                        `;
-                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
-                        playerWidth = width;
-                        playerHeight = playerWidth * CLOUD_PHONE_RATIO;
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: left;
-                            -moz-transform-origin: left;
-                            -ms-transform-origin: left;
-                            transform-origin: left;
-                            width: ${playerHeight}px;
-                            height: ${playerWidth}px;
-                            position: relative;
-                            top: ${(height - playerHeight)/2}px;
-                            left: ${playerWidth/2}px;
-                        `;
-                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
-                        playerWidth = width;
-                        playerHeight = playerWidth * CLOUD_PHONE_RATIO;
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: top;
-                            -moz-transform-origin: top;
-                            -ms-transform-origin: top;
-                            transform-origin: top;
-                            width: ${playerHeight}px;
-                            height: ${playerWidth}px;
-                            position: relative;
-                            top: ${(height - playerHeight)/2 + playerHeight/2}px;
-                            left: ${playerWidth - playerHeight/2}px;
-                        `;
-                    }
-                } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
-                    if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
-                        playerWidth = height * CLOUD_PHONE_RATIO;
-                        playerHeight = height;
-                        style = `
-                            -webkit-transform: none;
-                            -moz-transform: none;
-                            -ms-transform: none;
-                            transform: none;
-                            width: ${playerWidth}px;
-                            height: ${playerHeight}px;
-                            position: relative;
-                            top: 0px;
-                            left: ${(width - playerWidth)/2}px;
-                        `;
-                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
-                        playerWidth = height * CLOUD_PHONE_RATIO;
-                        playerHeight = height;
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            width: ${playerWidth}px;
-                            height: ${playerHeight}px;
-                            position: relative;
-                            top: 0px;
-                            left: ${(width - playerWidth)/2}px;
-                        `;
-                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        playerWidth = width ;
-                        playerHeight = width / CLOUD_PHONE_RATIO;
-                        if(playerHeight > height) {
-                          playerWidth = height * CLOUD_PHONE_RATIO;
-                          playerHeight = height;
-                        }
-                        style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            width: ${playerWidth}px;
-                            height: ${playerHeight}px;
-                            position: relative;
-                            top: ${(height - playerHeight)/2}px;
-                            left: ${(width - playerWidth)/2}px;
-                          `;
-                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: top;
-                            -moz-transform-origin: top;
-                            -ms-transform-origin: top;
-                            transform-origin: top;
-                            width: ${height}px;
-                            height: ${width}px;
-                            position: relative;
-                            top: ${height/2}px;
-                            left: ${width - height/2}px;
-                        `;
-                    }
-                }
+                // if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
+                //     if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
+                //       playerWidth = width ;
+                //       playerHeight = width / CLOUD_PHONE_RATIO;
+                //       if(playerHeight > height) {
+                //         playerWidth = height * CLOUD_PHONE_RATIO;
+                //         playerHeight = height;
+                //       }
+                //       style = `
+                //           -webkit-transform: none;
+                //           -moz-transform: none;
+                //           -ms-transform: none;
+                //           transform: none;
+                //           width: ${playerWidth}px;
+                //           height: ${playerHeight}px;
+                //           position: relative;
+                //           top: ${(height - playerHeight)/2}px;
+                //           left: ${(width - playerWidth)/2}px;
+                //         `;
+                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
+                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                //         style = `
+                //             -webkit-transform: rotate(${rotateDegrees}deg);
+                //             -moz-transform: rotate(${rotateDegrees}deg);
+                //             -ms-transform: rotate(${rotateDegrees}deg);
+                //             transform: rotate(${rotateDegrees}deg);
+                //             width: ${width}px;
+                //             height: ${height}px;
+                //             position: relative;
+                //             top: 0px;
+                //             left: 0px;
+                //         `;
+                //     }
+                //      else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
+                //         playerWidth = width;
+                //         playerHeight = playerWidth * CLOUD_PHONE_RATIO;
+                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                //         style = `
+                //             -webkit-transform: rotate(${rotateDegrees}deg);
+                //             -moz-transform: rotate(${rotateDegrees}deg);
+                //             -ms-transform: rotate(${rotateDegrees}deg);
+                //             transform: rotate(${rotateDegrees}deg);
+                //             -webkit-transform-origin: left;
+                //             -moz-transform-origin: left;
+                //             -ms-transform-origin: left;
+                //             transform-origin: left;
+                //             width: ${playerHeight}px;
+                //             height: ${playerWidth}px;
+                //             position: relative;
+                //             top: ${(height - playerHeight)/2}px;
+                //             left: ${playerWidth/2}px;
+                //         `;
+                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
+                //         playerWidth = width;
+                //         playerHeight = playerWidth * CLOUD_PHONE_RATIO;
+                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                //         style = `
+                //             -webkit-transform: rotate(${rotateDegrees}deg);
+                //             -moz-transform: rotate(${rotateDegrees}deg);
+                //             -ms-transform: rotate(${rotateDegrees}deg);
+                //             transform: rotate(${rotateDegrees}deg);
+                //             -webkit-transform-origin: top;
+                //             -moz-transform-origin: top;
+                //             -ms-transform-origin: top;
+                //             transform-origin: top;
+                //             width: ${playerHeight}px;
+                //             height: ${playerWidth}px;
+                //             position: relative;
+                //             top: ${(height - playerHeight)/2 + playerHeight/2}px;
+                //             left: ${playerWidth - playerHeight/2}px;
+                //         `;
+                //     }
+                // } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
+                //     if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
+                //         playerWidth = height * CLOUD_PHONE_RATIO;
+                //         playerHeight = height;
+                //         style = `
+                //             -webkit-transform: none;
+                //             -moz-transform: none;
+                //             -ms-transform: none;
+                //             transform: none;
+                //             width: ${playerWidth}px;
+                //             height: ${playerHeight}px;
+                //             position: relative;
+                //             top: 0px;
+                //             left: ${(width - playerWidth)/2}px;
+                //         `;
+                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
+                //         playerWidth = height * CLOUD_PHONE_RATIO;
+                //         playerHeight = height;
+                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                //         style = `
+                //             -webkit-transform: rotate(${rotateDegrees}deg);
+                //             -moz-transform: rotate(${rotateDegrees}deg);
+                //             -ms-transform: rotate(${rotateDegrees}deg);
+                //             transform: rotate(${rotateDegrees}deg);
+                //             width: ${playerWidth}px;
+                //             height: ${playerHeight}px;
+                //             position: relative;
+                //             top: 0px;
+                //             left: ${(width - playerWidth)/2}px;
+                //         `;
+                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
+                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                //         playerWidth = width ;
+                //         playerHeight = width / CLOUD_PHONE_RATIO;
+                //         if(playerHeight > height) {
+                //           playerWidth = height * CLOUD_PHONE_RATIO;
+                //           playerHeight = height;
+                //         }
+                //         style = `
+                //             -webkit-transform: rotate(${rotateDegrees}deg);
+                //             -moz-transform: rotate(${rotateDegrees}deg);
+                //             -ms-transform: rotate(${rotateDegrees}deg);
+                //             transform: rotate(${rotateDegrees}deg);
+                //             width: ${playerWidth}px;
+                //             height: ${playerHeight}px;
+                //             position: relative;
+                //             top: ${(height - playerHeight)/2}px;
+                //             left: ${(width - playerWidth)/2}px;
+                //           `;
+                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
+                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                //         style = `
+                //             -webkit-transform: rotate(${rotateDegrees}deg);
+                //             -moz-transform: rotate(${rotateDegrees}deg);
+                //             -ms-transform: rotate(${rotateDegrees}deg);
+                //             transform: rotate(${rotateDegrees}deg);
+                //             -webkit-transform-origin: top;
+                //             -moz-transform-origin: top;
+                //             -ms-transform-origin: top;
+                //             transform-origin: top;
+                //             width: ${height}px;
+                //             height: ${width}px;
+                //             position: relative;
+                //             top: ${height/2}px;
+                //             left: ${width - height/2}px;
+                //         `;
+                //     }
+                // }
             } 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/TouchHandler.js b/sdk/src/TouchHandler.js
index 22859f1..6aec436 100644
--- a/sdk/src/TouchHandler.js
+++ b/sdk/src/TouchHandler.js
@@ -503,7 +503,7 @@ export default class TouchHandler {
         }
         let finalOrientation;
         if (this.isMobile) {
-            finalOrientation = ORIENTATION_ORIGIN_MOBILE[this.orientation];
+            finalOrientation = 0;
         } else {
             finalOrientation = ORIENTATION_ORIGIN[this.orientation];
         }
-- 
Gitee


From e779e24625c5ddb2d9ce9982b1b280d6632829bb Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Tue, 20 Aug 2024 10:55:04 +0800
Subject: [PATCH 6/8] 1

(cherry picked from commit 596e4752299de8136257e8d19f4de25b7271627e)
---
 sdk/src/AutoRotation.js | 264 +++++++++++++++++++---------------------
 1 file changed, 124 insertions(+), 140 deletions(-)

diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index 0b75f86..0f8ec3e 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -82,146 +82,130 @@ export default class AutoRotation {
         if (rect) {
             if (this.isMobile) {
                 const deviceOrientation = this.getDeviceOrientation();
-                // if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
-                //     if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
-                //       playerWidth = width ;
-                //       playerHeight = width / CLOUD_PHONE_RATIO;
-                //       if(playerHeight > height) {
-                //         playerWidth = height * CLOUD_PHONE_RATIO;
-                //         playerHeight = height;
-                //       }
-                //       style = `
-                //           -webkit-transform: none;
-                //           -moz-transform: none;
-                //           -ms-transform: none;
-                //           transform: none;
-                //           width: ${playerWidth}px;
-                //           height: ${playerHeight}px;
-                //           position: relative;
-                //           top: ${(height - playerHeight)/2}px;
-                //           left: ${(width - playerWidth)/2}px;
-                //         `;
-                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
-                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                //         style = `
-                //             -webkit-transform: rotate(${rotateDegrees}deg);
-                //             -moz-transform: rotate(${rotateDegrees}deg);
-                //             -ms-transform: rotate(${rotateDegrees}deg);
-                //             transform: rotate(${rotateDegrees}deg);
-                //             width: ${width}px;
-                //             height: ${height}px;
-                //             position: relative;
-                //             top: 0px;
-                //             left: 0px;
-                //         `;
-                //     }
-                //      else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
-                //         playerWidth = width;
-                //         playerHeight = playerWidth * CLOUD_PHONE_RATIO;
-                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                //         style = `
-                //             -webkit-transform: rotate(${rotateDegrees}deg);
-                //             -moz-transform: rotate(${rotateDegrees}deg);
-                //             -ms-transform: rotate(${rotateDegrees}deg);
-                //             transform: rotate(${rotateDegrees}deg);
-                //             -webkit-transform-origin: left;
-                //             -moz-transform-origin: left;
-                //             -ms-transform-origin: left;
-                //             transform-origin: left;
-                //             width: ${playerHeight}px;
-                //             height: ${playerWidth}px;
-                //             position: relative;
-                //             top: ${(height - playerHeight)/2}px;
-                //             left: ${playerWidth/2}px;
-                //         `;
-                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
-                //         playerWidth = width;
-                //         playerHeight = playerWidth * CLOUD_PHONE_RATIO;
-                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                //         style = `
-                //             -webkit-transform: rotate(${rotateDegrees}deg);
-                //             -moz-transform: rotate(${rotateDegrees}deg);
-                //             -ms-transform: rotate(${rotateDegrees}deg);
-                //             transform: rotate(${rotateDegrees}deg);
-                //             -webkit-transform-origin: top;
-                //             -moz-transform-origin: top;
-                //             -ms-transform-origin: top;
-                //             transform-origin: top;
-                //             width: ${playerHeight}px;
-                //             height: ${playerWidth}px;
-                //             position: relative;
-                //             top: ${(height - playerHeight)/2 + playerHeight/2}px;
-                //             left: ${playerWidth - playerHeight/2}px;
-                //         `;
-                //     }
-                // } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
-                //     if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
-                //         playerWidth = height * CLOUD_PHONE_RATIO;
-                //         playerHeight = height;
-                //         style = `
-                //             -webkit-transform: none;
-                //             -moz-transform: none;
-                //             -ms-transform: none;
-                //             transform: none;
-                //             width: ${playerWidth}px;
-                //             height: ${playerHeight}px;
-                //             position: relative;
-                //             top: 0px;
-                //             left: ${(width - playerWidth)/2}px;
-                //         `;
-                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
-                //         playerWidth = height * CLOUD_PHONE_RATIO;
-                //         playerHeight = height;
-                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                //         style = `
-                //             -webkit-transform: rotate(${rotateDegrees}deg);
-                //             -moz-transform: rotate(${rotateDegrees}deg);
-                //             -ms-transform: rotate(${rotateDegrees}deg);
-                //             transform: rotate(${rotateDegrees}deg);
-                //             width: ${playerWidth}px;
-                //             height: ${playerHeight}px;
-                //             position: relative;
-                //             top: 0px;
-                //             left: ${(width - playerWidth)/2}px;
-                //         `;
-                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
-                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                //         playerWidth = width ;
-                //         playerHeight = width / CLOUD_PHONE_RATIO;
-                //         if(playerHeight > height) {
-                //           playerWidth = height * CLOUD_PHONE_RATIO;
-                //           playerHeight = height;
-                //         }
-                //         style = `
-                //             -webkit-transform: rotate(${rotateDegrees}deg);
-                //             -moz-transform: rotate(${rotateDegrees}deg);
-                //             -ms-transform: rotate(${rotateDegrees}deg);
-                //             transform: rotate(${rotateDegrees}deg);
-                //             width: ${playerWidth}px;
-                //             height: ${playerHeight}px;
-                //             position: relative;
-                //             top: ${(height - playerHeight)/2}px;
-                //             left: ${(width - playerWidth)/2}px;
-                //           `;
-                //     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
-                //         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                //         style = `
-                //             -webkit-transform: rotate(${rotateDegrees}deg);
-                //             -moz-transform: rotate(${rotateDegrees}deg);
-                //             -ms-transform: rotate(${rotateDegrees}deg);
-                //             transform: rotate(${rotateDegrees}deg);
-                //             -webkit-transform-origin: top;
-                //             -moz-transform-origin: top;
-                //             -ms-transform-origin: top;
-                //             transform-origin: top;
-                //             width: ${height}px;
-                //             height: ${width}px;
-                //             position: relative;
-                //             top: ${height/2}px;
-                //             left: ${width - height/2}px;
-                //         `;
-                //     }
-                // }
+                if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
+                    if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
+                      playerWidth = width ;
+                      playerHeight = width / CLOUD_PHONE_RATIO;
+                      if(playerHeight > height) {
+                        playerWidth = height * CLOUD_PHONE_RATIO;
+                        playerHeight = height;
+                      }
+                      style = `
+                          -webkit-transform: none;
+                          -moz-transform: none;
+                          -ms-transform: none;
+                          transform: none;
+                          width: ${playerWidth}px;
+                          height: ${playerHeight}px;
+                          position: relative;
+                          top: ${(height - playerHeight)/2}px;
+                          left: ${(width - playerWidth)/2}px;
+                        `;
+                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
+                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        style = `
+                            -webkit-transform: rotate(${rotateDegrees}deg);
+                            -moz-transform: rotate(${rotateDegrees}deg);
+                            -ms-transform: rotate(${rotateDegrees}deg);
+                            transform: rotate(${rotateDegrees}deg);
+                            width: ${width}px;
+                            height: ${height}px;
+                            position: relative;
+                            top: 0px;
+                            left: 0px;
+                        `;
+                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
+                      playerWidth = width ;
+                      playerHeight = width / CLOUD_PHONE_RATIO;
+                      if(playerHeight > height) {
+                        playerWidth = height * CLOUD_PHONE_RATIO;
+                        playerHeight = height;
+                      }
+                        style = `
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
+                            position: relative;
+                            top: ${(height - playerHeight)/2}px;
+                            left: ${(width - playerWidth)/2}px;
+                        `;
+                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
+                        playerWidth = width ;
+                        playerHeight = width / CLOUD_PHONE_RATIO;
+                        if(playerHeight > height) {
+                          playerWidth = height * CLOUD_PHONE_RATIO;
+                          playerHeight = height;
+                        }
+                        style = `
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
+                            position: relative;
+                            top: ${(height - playerHeight)/2}px;
+                            left: ${(width - playerWidth)/2}px;
+                        `;
+                    }
+                } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
+                    if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
+                        playerWidth = height * CLOUD_PHONE_RATIO;
+                        playerHeight = height;
+                        style = `
+                            -webkit-transform: none;
+                            -moz-transform: none;
+                            -ms-transform: none;
+                            transform: none;
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
+                            position: relative;
+                            top: 0px;
+                            left: ${(width - playerWidth)/2}px;
+                        `;
+                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
+                        playerWidth = height * CLOUD_PHONE_RATIO;
+                        playerHeight = height;
+                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        style = `
+                            -webkit-transform: rotate(${rotateDegrees}deg);
+                            -moz-transform: rotate(${rotateDegrees}deg);
+                            -ms-transform: rotate(${rotateDegrees}deg);
+                            transform: rotate(${rotateDegrees}deg);
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
+                            position: relative;
+                            top: 0px;
+                            left: ${(width - playerWidth)/2}px;
+                        `;
+                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
+                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        playerWidth = width ;
+                        playerHeight = width / CLOUD_PHONE_RATIO;
+                        if(playerHeight > height) {
+                          playerWidth = height * CLOUD_PHONE_RATIO;
+                          playerHeight = height;
+                        }
+                        style = `
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
+                            position: relative;
+                            top: ${(height - playerHeight)/2}px;
+                            left: ${(width - playerWidth)/2}px;
+                          `;
+                    } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
+                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        playerWidth = width ;
+                        playerHeight = width / CLOUD_PHONE_RATIO;
+                        if(playerHeight > height) {
+                          playerWidth = height * CLOUD_PHONE_RATIO;
+                          playerHeight = height;
+                        }
+                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        style = `
+                            width: ${height}px;
+                            height: ${width}px;
+                            position: relative;
+                            top: ${height/2}px;
+                            left: ${width - height/2}px;
+                        `;
+                    }
+                }
             } else {
                 width = Math.max(width - Math.max(rect.left * 2, 0), 0);
                 height = Math.min(height - Math.max(rect.top * 2, 0), rect.height);
-- 
Gitee


From de04ecab5bb1210aeaee249de1ecc7317ff7ffd3 Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Tue, 20 Aug 2024 14:16:08 +0800
Subject: [PATCH 7/8] 1

(cherry picked from commit 280da0bdfca7e41ae2ec99a1e1896659b1118235)
---
 sdk/demo/demo.html       | 4 ++++
 sdk/src/AppController.js | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html
index 7365eb5..42dc9ea 100644
--- a/sdk/demo/demo.html
+++ b/sdk/demo/demo.html
@@ -533,6 +533,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
           console.log(event, str)
         });
 
+        cloudapp.on('rotatePlayer', function (event, data) {
+          console.log(data.orientation)
+        });
+
         window.cloudapp = cloudapp;
         window.sendDataToCloudApp = function (str) {
           var utf8Array = encodeUTF8(str);
diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js
index f6afb9c..48e7f32 100644
--- a/sdk/src/AppController.js
+++ b/sdk/src/AppController.js
@@ -119,6 +119,7 @@ class AppController {
             'netStateChange',
             'appStateChange',
             'audioStateChange',
+            'rotatePlayer',
             'cloudAppData',
             'clipboardDataChange'
         ]);
@@ -518,6 +519,7 @@ class AppController {
 
     updateResolutionAndTouch() {
         if (this.player && this.orientation) {
+            this.subscribe.trigger('rotatePlayer', { orientation: this.orientation });
             // resize之前更新canvas大小
             if (this.options.isMobile) {
                 this.directionHandler.updateMobileCanvasSize(this.orientation, this.isMSE);
-- 
Gitee


From 50cba305db64c06c888ce94a74dbf6279d111119 Mon Sep 17 00:00:00 2001
From: Yuan <294065614@qq.com>
Date: Fri, 23 Aug 2024 16:45:00 +0800
Subject: [PATCH 8/8] 1

---
 sdk/src/AutoRotation.js     | 83 +++++++++++++++++++------------------
 sdk/src/DirectionHandler.js | 33 +++++++++++----
 2 files changed, 66 insertions(+), 50 deletions(-)

diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index 0f8ec3e..2664da0 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -115,33 +115,35 @@ export default class AutoRotation {
                             left: 0px;
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
-                      playerWidth = width ;
-                      playerHeight = width / CLOUD_PHONE_RATIO;
-                      if(playerHeight > height) {
-                        playerWidth = height * CLOUD_PHONE_RATIO;
-                        playerHeight = height;
+                      rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                      playerWidth = height;
+                      playerHeight = height * CLOUD_PHONE_RATIO;
+                      if (playerHeight > width) {
+                        playerHeight = width; 
+                        playerWidth = width / CLOUD_PHONE_RATIO;
                       }
-                        style = `
-                            width: ${playerWidth}px;
-                            height: ${playerHeight}px;
-                            position: relative;
-                            top: ${(height - playerHeight)/2}px;
-                            left: ${(width - playerWidth)/2}px;
+                      style = `
+                          width: ${playerHeight}px;
+                          height: ${playerWidth}px;
+                          position: relative;
+                          top: ${(height - playerWidth)/2}px;
+                          left: ${(width - playerHeight)/2}px;
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
-                        playerWidth = width ;
-                        playerHeight = width / CLOUD_PHONE_RATIO;
-                        if(playerHeight > height) {
-                          playerWidth = height * CLOUD_PHONE_RATIO;
-                          playerHeight = height;
+                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        playerWidth = height;
+                        playerHeight = height * CLOUD_PHONE_RATIO;
+                        if (playerHeight > width) {
+                          playerHeight = width; 
+                          playerWidth = width / CLOUD_PHONE_RATIO;
                         }
                         style = `
-                            width: ${playerWidth}px;
-                            height: ${playerHeight}px;
+                            width: ${playerHeight}px;
+                            height: ${playerWidth}px;
                             position: relative;
-                            top: ${(height - playerHeight)/2}px;
-                            left: ${(width - playerWidth)/2}px;
-                        `;
+                            top: ${(height - playerWidth)/2}px;
+                            left: ${(width - playerHeight)/2}px;
+                          `;
                     }
                 } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
                     if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
@@ -175,35 +177,34 @@ export default class AutoRotation {
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        playerWidth = width ;
-                        playerHeight = width / CLOUD_PHONE_RATIO;
-                        if(playerHeight > height) {
-                          playerWidth = height * CLOUD_PHONE_RATIO;
-                          playerHeight = height;
+                        playerWidth = height;
+                        playerHeight = height * CLOUD_PHONE_RATIO;
+                        if (playerHeight > width) {
+                          playerHeight = width; 
+                          playerWidth = width / CLOUD_PHONE_RATIO;
                         }
                         style = `
-                            width: ${playerWidth}px;
-                            height: ${playerHeight}px;
+                            width: ${playerHeight}px;
+                            height: ${playerWidth}px;
                             position: relative;
-                            top: ${(height - playerHeight)/2}px;
-                            left: ${(width - playerWidth)/2}px;
+                            top: ${(height - playerWidth)/2}px;
+                            left: ${(width - playerHeight)/2}px;
                           `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
-                        playerWidth = width ;
-                        playerHeight = width / CLOUD_PHONE_RATIO;
-                        if(playerHeight > height) {
-                          playerWidth = height * CLOUD_PHONE_RATIO;
-                          playerHeight = height;
+                        playerWidth = height;
+                        playerHeight = height * CLOUD_PHONE_RATIO;
+                        if (playerHeight > width) {
+                          playerHeight = width; 
+                          playerWidth = width / CLOUD_PHONE_RATIO;
                         }
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
                         style = `
-                            width: ${height}px;
-                            height: ${width}px;
+                            width: ${playerHeight}px;
+                            height: ${playerWidth}px;
                             position: relative;
-                            top: ${height/2}px;
-                            left: ${width - height/2}px;
-                        `;
+                            top: ${(height - playerWidth)/2}px;
+                            left: ${(width - playerHeight)/2}px;
+                          `;
                     }
                 }
             } else {
diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js
index 9d989c0..37a7bc0 100644
--- a/sdk/src/DirectionHandler.js
+++ b/sdk/src/DirectionHandler.js
@@ -574,24 +574,39 @@ class DirectionHandler {
             const deviceOrientation = window?.screen?.orientation?.angle || window.orientation;
             if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
                 if ([PROTOCOL_CONFIG.ORIENTATION[0], PROTOCOL_CONFIG.ORIENTATION[16]].includes(this.orientation)) {
-                    playerWidth = width;
+                  playerWidth = width ;
+                  playerHeight = width / CLOUD_PHONE_RATIO;
+                  if(playerHeight > height) {
+                    playerWidth = height * CLOUD_PHONE_RATIO;
                     playerHeight = height;
+                  }
                 } else if ([PROTOCOL_CONFIG.ORIENTATION[8], PROTOCOL_CONFIG.ORIENTATION[24]].includes(this.orientation)) {
-                    const newWidth = width;
-                    const newHeight = newWidth * CLOUD_PHONE_RATIO;
-                    playerWidth = newHeight;
-                    playerHeight = newWidth;
-                }
+                  playerWidth = height;
+                  playerHeight = height * CLOUD_PHONE_RATIO;
+                  if (playerHeight > width) {
+                    playerHeight = width; 
+                    playerWidth = width / CLOUD_PHONE_RATIO;
+                  }
+                  [playerWidth, playerHeight] = [playerHeight, playerWidth]
             } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
                 if ([PROTOCOL_CONFIG.ORIENTATION[0], PROTOCOL_CONFIG.ORIENTATION[16]].includes(this.orientation)) {
+                  playerWidth = width ;
+                  playerHeight = width / CLOUD_PHONE_RATIO;
+                  if(playerHeight > height) {
                     playerWidth = height * CLOUD_PHONE_RATIO;
                     playerHeight = height;
+                  }
                 } else if ([PROTOCOL_CONFIG.ORIENTATION[8], PROTOCOL_CONFIG.ORIENTATION[24]].includes(this.orientation)) {
-                    playerWidth = height;
-                    playerHeight = width;
+                  playerWidth = height;
+                  playerHeight = height * CLOUD_PHONE_RATIO;
+                  if (playerHeight > width) {
+                    playerHeight = width; 
+                    playerWidth = width / CLOUD_PHONE_RATIO;
+                  }
+                  [playerWidth, playerHeight] = [playerHeight, playerWidth]
                 }
             }
-
+          }
             canvasElement.width = playerWidth;
             canvasElement.height = playerHeight;
         }, 200);
-- 
Gitee