From d787fc6610477c38d0a94ab8ba2ad589f984ec3a Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Wed, 18 Dec 2024 11:48:22 +0800
Subject: [PATCH] perf: Optimize mobile style

---
 .../replay/guacamole/guacamole.component.scss | 90 +++++++++++++++++++
 .../replay/guacamole/guacamole.component.ts   | 58 ++++++++++++
 2 files changed, 148 insertions(+)

diff --git a/src/app/elements/replay/guacamole/guacamole.component.scss b/src/app/elements/replay/guacamole/guacamole.component.scss
index 3d9fa668..a4c4a63b 100644
--- a/src/app/elements/replay/guacamole/guacamole.component.scss
+++ b/src/app/elements/replay/guacamole/guacamole.component.scss
@@ -286,3 +286,93 @@ input[type="range"]:focus::-ms-fill-upper {
     background: #5AF;
   }
 }
+
+@media screen and (max-width: 768px) {
+  #player {
+    .controls {
+      height: auto;
+      min-height: 35px;
+      padding: 8px;
+      flex-wrap: wrap;
+      gap: 8px;
+      background: rgba(0, 0, 0, 0.8);
+
+
+      button.btn {
+        min-width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.1);
+
+        i.fa {
+          font-size: 16px;
+          color: #fff;
+        }
+
+        &:active {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      span[class*="range"] {
+        order: -1;
+        width: 100%;
+        padding: 8px 0;
+      }
+
+      #position, #duration {
+        color: #fff;
+        font-size: 12px;
+      }
+
+      #user, #asset, #system_user, #date_start {
+        width: 100%;
+        padding: 4px 0 !important;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      #download {
+        padding: 4px 0 !important;
+
+        a {
+          color: #5AF;
+          text-decoration: none;
+        }
+      }
+    }
+
+    #display {
+      height: calc(100vh - 180px);
+
+      as-split-area[order="0"] {
+        display: none;
+      }
+
+      as-split-area[order="1"] {
+        width: 100% !important;
+        max-width: 100% !important;
+        min-width: 100% !important;
+      }
+
+      .seek-notification {
+        button#cancel-seek {
+          padding: 8px 16px;
+          border-radius: 4px;
+          background: rgba(255, 255, 255, 0.1);
+          color: #fff;
+          border: none;
+          font-size: 14px;
+
+          &:active {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/elements/replay/guacamole/guacamole.component.ts b/src/app/elements/replay/guacamole/guacamole.component.ts
index ef862d5c..d13f7458 100644
--- a/src/app/elements/replay/guacamole/guacamole.component.ts
+++ b/src/app/elements/replay/guacamole/guacamole.component.ts
@@ -101,6 +101,10 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
       .subscribe(() => {
         this.recordingDisplay.scale(this.getPropScale());
       });
+
+    if (this.isMobile()) {
+      this.initTouchEvents();
+    }
   }
 
   initRecording() {
@@ -309,4 +313,58 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
     this.percent = time <= 0 ? 0 : time;
     this.runFrom();
   }
+
+  private isMobile(): boolean {
+    return window.innerWidth < 768;
+  }
+
+  private initTouchEvents() {
+    const screen = document.getElementById('screen');
+    if (!screen) return;
+
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchStartTime = 0;
+
+    screen.addEventListener('touchstart', (e: TouchEvent) => {
+      touchStartX = e.touches[0].clientX;
+      touchStartY = e.touches[0].clientY;
+      touchStartTime = Date.now();
+    });
+
+    screen.addEventListener('touchmove', (e: TouchEvent) => {
+      // 防止页面滚动
+      if (Math.abs(e.touches[0].clientY - touchStartY) > 10) {
+        e.preventDefault();
+      }
+    });
+
+    screen.addEventListener('touchend', (e: TouchEvent) => {
+      const touchEndX = e.changedTouches[0].clientX;
+      const touchEndY = e.changedTouches[0].clientY;
+      const touchEndTime = Date.now();
+
+      const deltaX = touchEndX - touchStartX;
+      const deltaY = touchEndY - touchStartY;
+      const deltaTime = touchEndTime - touchStartTime;
+
+      // 点击判定
+      if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10 && deltaTime < 200) {
+        this.toggle();
+      }
+
+      // 左右滑动判定
+      if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
+        const seekTime = 5000; // 5秒
+        if (deltaX > 0) {
+          // 向右滑动，前进
+          this.percent = Math.min(this.percent + seekTime, this.max);
+        } else {
+          // 向左滑动，后退
+          this.percent = Math.max(this.percent - seekTime, 0);
+        }
+        this.runFrom();
+      }
+    });
+  }
 }