Skip to content

Commit 187dcaa

Browse files
ZhaoJiSenZhaoJiSen
committed
Fixed: replay resize
1 parent bec5764 commit 187dcaa

7 files changed

Lines changed: 202 additions & 24 deletions

File tree

‎src/app/elements/replay/guacamole/guacamole.component.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@
99
</div>
1010

1111
<div class="content">
12-
<div class="commands" *ngIf="commands.length > 0">
12+
<div class="commands" *ngIf="commands.length > 0" [class.collapsed]="commandsCollapsed">
1313
<div class="commands-header">
1414
<span>{{ 'HistoryCommands' | translate }} ({{ commands.length }})</span>
15+
<button class="toggle-btn" (click)="toggleCommands()" [title]="'Hide' | translate">
16+
<i nz-icon nzType="left" nzTheme="outline"></i>
17+
</button>
1518
</div>
1619
<div class="commands-list"
1720
infiniteScroll
@@ -30,7 +33,11 @@
3033
</div>
3134

3235
<!-- 屏幕 -->
33-
<div class="screen-wrapper" [class.full]="commands.length === 0">
36+
<div class="screen-wrapper" [class.full]="commands.length === 0" [class.commands-hidden]="commandsCollapsed">
37+
<button class="show-commands-btn" (click)="toggleCommands()" [title]="'Show Commands' | translate">
38+
<i nz-icon nzType="right" nzTheme="outline"></i>
39+
{{ 'Commands' | translate }}
40+
</button>
3441
<div id="screen" class="screen" (click)="toggle()"></div>
3542
</div>
3643
</div>

‎src/app/elements/replay/guacamole/guacamole.component.scss‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// 保持原有的 player ID 选择器以保证兼容性
21
#player {
32
width: 100%;
43
height: 100%;
@@ -441,14 +440,25 @@ input[type="range"]:focus::-ms-fill-upper {
441440
overflow: hidden;
442441

443442
.commands {
444-
width: 250px;
445-
min-width: 250px;
446-
max-width: 250px;
443+
width: 280px;
444+
min-width: 200px;
445+
max-width: 400px;
447446
background: var(--el-asset-tree-bg-color);
448447
border-right: 1px solid var(--el-border-color-x);
449448
display: flex;
450449
flex-direction: column;
451450
flex-shrink: 0;
451+
resize: horizontal;
452+
overflow: hidden;
453+
transition: width 0.3s ease, min-width 0.3s ease;
454+
455+
&.collapsed {
456+
width: 0;
457+
min-width: 0;
458+
max-width: 0;
459+
resize: none;
460+
border-right: none;
461+
}
452462

453463
.commands-header {
454464
padding: 12px 16px;
@@ -457,6 +467,26 @@ input[type="range"]:focus::-ms-fill-upper {
457467
font-size: 13px;
458468
font-weight: 500;
459469
color: #ffffff;
470+
display: flex;
471+
justify-content: space-between;
472+
align-items: center;
473+
474+
.toggle-btn {
475+
background: transparent;
476+
border: none;
477+
color: var(--el-text-color-light);
478+
cursor: pointer;
479+
padding: 4px;
480+
border-radius: 3px;
481+
482+
&:hover {
483+
background: var(--el-dropdown-hover-bg-color);
484+
}
485+
486+
i {
487+
font-size: 12px;
488+
}
489+
}
460490
}
461491

462492
.commands-list {
@@ -519,6 +549,33 @@ input[type="range"]:focus::-ms-fill-upper {
519549
width: 100%;
520550
}
521551

552+
.show-commands-btn {
553+
position: absolute;
554+
top: 12px;
555+
left: 12px;
556+
z-index: 10;
557+
background: var(--el-org-bg-color);
558+
border: 1px solid var(--el-border-color-x);
559+
color: var(--el-text-color-light);
560+
padding: 8px 12px;
561+
border-radius: 4px;
562+
cursor: pointer;
563+
font-size: 12px;
564+
display: none;
565+
566+
&:hover {
567+
background: var(--el-dropdown-hover-bg-color);
568+
}
569+
570+
i {
571+
margin-right: 4px;
572+
}
573+
}
574+
575+
&.commands-hidden .show-commands-btn {
576+
display: block;
577+
}
578+
522579
.screen {
523580
width: 100%;
524581
height: 100%;
@@ -726,9 +783,21 @@ input[type="range"]:focus::-ms-fill-upper {
726783
.player-container {
727784
.display .content {
728785
.commands {
729-
width: 200px;
730-
min-width: 200px;
731-
max-width: 200px;
786+
width: 220px;
787+
min-width: 180px;
788+
max-width: 300px;
789+
}
790+
}
791+
}
792+
}
793+
794+
@media (min-width: 1400px) {
795+
.player-container {
796+
.display .content {
797+
.commands {
798+
width: 320px;
799+
min-width: 250px;
800+
max-width: 450px;
732801
}
733802
}
734803
}

‎src/app/elements/replay/guacamole/guacamole.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
4747
lastDuration: number = 0;
4848
interval: number;
4949
initializedCommand: boolean = false;
50+
commandsCollapsed: boolean = false;
5051

5152
constructor(
5253
private _http: HttpService,
@@ -445,4 +446,8 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
445446
}
446447
});
447448
}
449+
450+
toggleCommands() {
451+
this.commandsCollapsed = !this.commandsCollapsed;
452+
}
448453
}

‎src/app/elements/replay/parts/parts.component.html‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,14 @@
3131
<!-- 主体内容 -->
3232
<div class="main-content">
3333
<!-- 视频播放区 -->
34-
<div class="video-area">
34+
<div class="video-area" [class.playlist-hidden]="playlistCollapsed">
3535
<div class="loading-overlay" *ngIf="videoLoading">
3636
<nz-spin nzSize="large"></nz-spin>
3737
</div>
38+
<button class="show-playlist-btn" (click)="togglePlaylist()" [title]="'Show Playlist' | translate">
39+
<i nz-icon nzType="menu" nzTheme="outline"></i>
40+
{{ 'Playlist' | translate }}
41+
</button>
3842
<elements-replay-guacamole
3943
*ngIf="currentVideo && currentVideo.src"
4044
[replay]="currentVideo"
@@ -43,10 +47,17 @@
4347
</div>
4448

4549
<!-- 播放列表 -->
46-
<div class="playlist-area">
50+
<div class="playlist-area" [class.collapsed]="playlistCollapsed">
4751
<div class="playlist-header">
48-
<h3>{{ 'Play List' | translate }}</h3>
49-
<span class="count">({{ folders?.length || 0 }})</span>
52+
<div class="playlist-title">
53+
<h3>{{ 'Play List' | translate }}</h3>
54+
<span class="count">({{ folders?.length || 0 }})</span>
55+
</div>
56+
<div class="playlist-actions">
57+
<button class="toggle-btn" (click)="togglePlaylist()" [title]="'Hide' | translate">
58+
<i nz-icon nzType="right" nzTheme="outline"></i>
59+
</button>
60+
</div>
5061
</div>
5162
<div class="playlist-content">
5263
<div class="loading-overlay" *ngIf="alertShown">

‎src/app/elements/replay/parts/parts.component.scss‎

Lines changed: 89 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,17 +76,55 @@
7676
max-height: 100%;
7777
overflow: hidden;
7878
}
79+
80+
.show-playlist-btn {
81+
position: absolute;
82+
top: 12px;
83+
right: 12px;
84+
z-index: 10;
85+
background: var(--el-org-bg-color);
86+
border: 1px solid var(--el-border-color-x);
87+
color: var(--el-text-color-light);
88+
padding: 8px 12px;
89+
border-radius: 4px;
90+
cursor: pointer;
91+
font-size: 12px;
92+
display: none;
93+
94+
&:hover {
95+
background: var(--el-dropdown-hover-bg-color);
96+
}
97+
98+
i {
99+
margin-right: 4px;
100+
}
101+
}
102+
103+
&.playlist-hidden .show-playlist-btn {
104+
display: block;
105+
}
79106
}
80107

81108
.playlist-area {
82109
width: var(--playlist-width);
83110
min-width: var(--playlist-min-width);
84-
max-width: var(--playlist-width);
111+
max-width: 400px;
85112
background: var(--el-asset-tree-bg-color);
86113
border-left: 1px solid var(--el-border-color-x);
87114
display: flex;
88115
flex-direction: column;
89116
flex-shrink: 0;
117+
resize: horizontal;
118+
overflow: hidden;
119+
transition: width 0.3s ease, min-width 0.3s ease;
120+
121+
&.collapsed {
122+
width: 0;
123+
min-width: 0;
124+
max-width: 0;
125+
resize: none;
126+
border-left: none;
127+
}
90128

91129
.playlist-header {
92130
display: flex;
@@ -96,16 +134,45 @@
96134
background: var(--el-org-bg-color);
97135
border-bottom: 1px solid var(--el-border-color-x);
98136

99-
h3 {
100-
margin: 0;
101-
font-size: 14px;
102-
font-weight: 500;
103-
color: #ffffff;
137+
.playlist-title {
138+
display: flex;
139+
align-items: center;
140+
gap: 8px;
141+
142+
h3 {
143+
margin: 0;
144+
font-size: 14px;
145+
font-weight: 500;
146+
color: #ffffff;
147+
}
148+
149+
.count {
150+
font-size: 12px;
151+
color: rgba(255, 255, 255, 0.6);
152+
}
104153
}
105154

106-
.count {
107-
font-size: 12px;
108-
color: rgba(255, 255, 255, 0.6);
155+
.playlist-actions {
156+
display: flex;
157+
align-items: center;
158+
gap: 8px;
159+
160+
.toggle-btn {
161+
background: transparent;
162+
border: none;
163+
color: var(--el-text-color-light);
164+
cursor: pointer;
165+
padding: 4px;
166+
border-radius: 3px;
167+
168+
&:hover {
169+
background: var(--el-dropdown-hover-bg-color);
170+
}
171+
172+
i {
173+
font-size: 12px;
174+
}
175+
}
109176
}
110177
}
111178

@@ -232,6 +299,19 @@
232299
@media (min-width: 1200px) {
233300
--playlist-width: 350px;
234301
--playlist-min-width: 350px;
302+
303+
.main-content .playlist-area {
304+
max-width: 500px;
305+
}
306+
}
307+
308+
@media (min-width: 1600px) {
309+
--playlist-width: 400px;
310+
--playlist-min-width: 400px;
311+
312+
.main-content .playlist-area {
313+
max-width: 600px;
314+
}
235315
}
236316

237317
@media (max-width: 480px) {

‎src/app/elements/replay/parts/parts.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export class ElementsPartsComponent implements OnInit {
3838

3939
alertShown = true;
4040
videoLoading = false;
41+
playlistCollapsed = false;
4142

4243
@HostListener('window:resize', ['$event'])
4344
onResize(event) {
@@ -268,10 +269,14 @@ export class ElementsPartsComponent implements OnInit {
268269
let lang = this.getUserLang();
269270

270271
if (lang === 'zh-hans') {
271-
lang = 'zh-CN'
272+
lang = 'zh-CN';
272273
}
273274

274275
const date_s = d.toLocaleString(lang, { hour12: false });
275276
return date_s.split('/').join('-');
276277
}
278+
279+
togglePlaylist() {
280+
this.playlistCollapsed = !this.playlistCollapsed;
281+
}
277282
}

‎src/app/router.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
44
import { PageMainComponent } from './pages/main/main.component';
55
import { PagesBlankComponent } from './pages/blank/blank.component';
66
import { PagesShareComponent } from './pages/share/share.component';
7+
import { PagesReplayComponent } from './pages/replay/replay.component';
78

89
const appRoutes: Routes = [
910
{ path: '', component: PageMainComponent },
@@ -20,7 +21,7 @@ const appRoutes: Routes = [
2021
{ path: 'share/:id', component: PagesShareComponent },
2122
{
2223
path: 'replay/:sid',
23-
loadComponent: () => import('./pages/replay/replay.component').then(m => m.PagesReplayComponent)
24+
component: PagesReplayComponent
2425
},
2526
{
2627
path: 'admin-connect',

0 commit comments

Comments
 (0)