No available facial features,go to
profilepage to
- bind your facial data
+
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 17/18] 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();
+ }
+ });
+ }
}
From 7881cb87abb502b65b8e4326cc2b69daa769d4f2 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Wed, 18 Dec 2024 13:07:54 +0800
Subject: [PATCH 18/18] perf: Optimize mobile style
---
.../replay/guacamole/guacamole.component.scss | 91 +++++++++----------
.../acl-dialog/acl-dialog.component.ts | 2 +
2 files changed, 45 insertions(+), 48 deletions(-)
diff --git a/src/app/elements/replay/guacamole/guacamole.component.scss b/src/app/elements/replay/guacamole/guacamole.component.scss
index a4c4a63b..73d680bb 100644
--- a/src/app/elements/replay/guacamole/guacamole.component.scss
+++ b/src/app/elements/replay/guacamole/guacamole.component.scss
@@ -294,83 +294,78 @@ input[type="range"]:focus::-ms-fill-upper {
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;
+ padding: 4px 0;
}
- #position, #duration {
- color: #fff;
- font-size: 12px;
+ // 基础控制按钮和时间信息保持在同一行
+ #play-pause,
+ #position,
+ #duration {
+ margin: 4px;
}
- #user, #asset, #system_user, #date_start {
+ // 资产信息换行显示
+ #user,
+ #asset,
+ #system_user,
+ #date_start,
+ #download {
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);
+ height: auto;
+ min-height: 200px;
+ padding: 0;
+ // 隐藏左侧命令列表
as-split-area[order="0"] {
display: none;
}
+ // 视频区域自适应
as-split-area[order="1"] {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
+ #screen {
+ width: 100%;
+ height: calc(100vh - 200px); // 减去控制栏和其他元素的高度
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ // 确保视频内容居中显示
+ > * {
+ max-width: 100%;
+ max-height: 100%;
+ margin: auto;
+ }
+ }
+
+ // 优化 seeking 提示
.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);
- }
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ p {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: center;
}
}
}
diff --git a/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts b/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts
index c779d920..6e3c76f9 100644
--- a/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts
+++ b/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts
@@ -201,6 +201,8 @@ export class ElementACLDialogComponent implements OnInit {
const checkMethod = this.connectionToken.from_ticket_info.check_ticket_api.method.toLowerCase();
const checkURL = this.connectionToken.from_ticket_info.check_ticket_api.url;
const ticketAssignees = this.connectionToken.from_ticket_info.assignees.join(', ');
+
+ // @ts-ignore
this.timerCheckTicket = setInterval(() => {
this._http[checkMethod](checkURL).subscribe(
async ticket => {