Skip to content

Commit 58f5888

Browse files
ZhaoJiSenZhaoJiSen
committed
Fixed: Fix the issue where the right split screen sometimes fails to adapt to the window display.
1 parent 0d338f9 commit 58f5888

5 files changed

Lines changed: 126 additions & 57 deletions

File tree

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

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,42 @@
11
// Elements
2-
import {ElementLeftBarComponent} from './left-bar/left-bar.component';
3-
import {ElementContentComponent} from './content/content.component';
4-
import {ElementContentWindowComponent} from './content/content-window/content-window.component';
5-
import {ElementContentTabComponent} from './content/content-tab/content-tab.component';
6-
import {ElementContentFooterComponent} from './content/content-footer/content-footer.component';
7-
import {ElementAssetTreeComponent} from './asset-tree/asset-tree.component';
8-
import {ElementTreeFilterComponent} from '@app/elements/asset-tree/tree-filter/tree-filter.component';
9-
import {ElementOrganizationComponent} from '@app/elements/left-bar/organization/organization.component';
10-
import {ElementUserFileComponent} from '@app/elements/nav/profile/profile.component';
11-
import {ElementNavComponent} from './nav/nav.component';
12-
import {ElementIframeComponent} from './iframe/iframe.component';
13-
import {ElementConnectComponent} from './connect/connect.component';
14-
import {ElementConnectDialogComponent} from './connect/connect-dialog/connect-dialog.component';
15-
import {ElementSettingComponent} from '@app/elements/nav/setting/setting.component';
16-
import {ElementReplayGuacamoleComponent} from './replay/guacamole/guacamole.component';
17-
import {ElementConnectorKokoComponent} from './content/content-window/koko/koko.component';
18-
import {ElementConnectorMagnusComponent} from './content/content-window/magnus/magnus.component';
19-
import {ElementConnectorDefaultComponent} from '@app/elements/content/content-window/default/default.component';
20-
import {ElementContentViewComponent} from '@app/elements/content/content-window/content-view/content-view.component';
21-
import {ElementSelectAccountComponent} from './connect/connect-dialog/select-account/select-account.component';
22-
import {ElementReplayAsciicastComponent} from '@app/elements/replay/asciicast/asciicast.component';
23-
import {ElementAdvancedOptionComponent} from './connect/connect-dialog/advanced-option/advanced-option.component';
24-
import {ElementConnectMethodComponent} from './connect/connect-dialog/connect-method/connect-method.component';
25-
import {ElementDownloadDialogComponent} from './connect/download-dialog/download-dialog.component';
26-
import {ElementsReplayMp4Component} from './replay/mp4/mp4.component';
27-
import {ElementConnectorGuideComponent} from '@app/elements/content/content-window/guide/guide.component';
28-
import {ElementCommandDialogComponent} from '@app/elements/content/command-dialog/command-dialog.component';
29-
import {
30-
ElementSendCommandDialogComponent
31-
} from '@app/elements/content/content-footer/send-command-dialog/send-command-dialog.component';
32-
import {
33-
ElementSendCommandWithVariableDialogComponent
34-
} from '@app/elements/content/content-footer/send-command-with-variable-dialog/send-command-with-variable-dialog.component';
35-
import {DynamicFormComponent} from '@app/elements/content/content-footer/variable-dynamic-form/variable-dynamic-form.component';
36-
import {ElementChatComponent} from '@app/elements/chat/chat.component';
37-
import {ElementsPartsComponent} from './replay/parts/parts.component';
38-
import {ElementConnectorNecComponent} from '@app/elements/content/content-window/nec/nec.component';
39-
import {ElementFaceMonitorComponent} from '@app/elements/connect/face-monitor/face-monitor.component';
2+
import { ElementNavComponent } from './nav/nav.component';
3+
import { ElementIframeComponent } from './iframe/iframe.component';
4+
import { ElementConnectComponent } from './connect/connect.component';
5+
import { ElementContentComponent } from './content/content.component';
6+
import { ElementsPartsComponent } from './replay/parts/parts.component';
7+
import { ElementLeftBarComponent } from './left-bar/left-bar.component';
8+
import { ElementsReplayMp4Component } from './replay/mp4/mp4.component';
9+
import { ElementChatComponent } from '@app/elements/chat/chat.component';
10+
import { ElementAssetTreeComponent } from './asset-tree/asset-tree.component';
11+
import { ElementTermComponent } from '@app/elements/replay/term/term.component';
12+
import { ElementDialogAlertComponent } from '@app/services/dialog/alert.service';
13+
import { ElementSettingComponent } from '@app/elements/nav/setting/setting.component';
14+
import { ElementUserFileComponent } from '@app/elements/nav/profile/profile.component';
15+
import { ElementContentTabComponent } from './content/content-tab/content-tab.component';
16+
import { ElementReplayGuacamoleComponent } from './replay/guacamole/guacamole.component';
17+
import { ElementConnectorKokoComponent } from './content/content-window/koko/koko.component';
18+
import { ElementConnectDialogComponent } from './connect/connect-dialog/connect-dialog.component';
19+
import { ElementContentWindowComponent } from './content/content-window/content-window.component';
20+
import { ElementContentFooterComponent } from './content/content-footer/content-footer.component';
21+
import { ElementConnectorMagnusComponent } from './content/content-window/magnus/magnus.component';
22+
import { ElementDownloadDialogComponent } from './connect/download-dialog/download-dialog.component';
23+
import { ElementReplayAsciicastComponent } from '@app/elements/replay/asciicast/asciicast.component';
24+
import { ElementConnectorNecComponent } from '@app/elements/content/content-window/nec/nec.component';
25+
import { ElementFaceMonitorComponent } from '@app/elements/connect/face-monitor/face-monitor.component';
26+
import { ElementACLDialogComponent } from '@app/services/connect-token/acl-dialog/acl-dialog.component';
27+
import { ElementTreeFilterComponent } from '@app/elements/asset-tree/tree-filter/tree-filter.component';
28+
import { ElementOrganizationComponent } from '@app/elements/left-bar/organization/organization.component';
29+
import { ElementConnectorGuideComponent } from '@app/elements/content/content-window/guide/guide.component';
30+
import { ElementCommandDialogComponent } from '@app/elements/content/command-dialog/command-dialog.component';
31+
import { ElementSelectAccountComponent } from './connect/connect-dialog/select-account/select-account.component';
32+
import { ElementConnectMethodComponent } from './connect/connect-dialog/connect-method/connect-method.component';
33+
import { ElementConnectorDefaultComponent } from '@app/elements/content/content-window/default/default.component';
34+
import { ElementAdvancedOptionComponent } from './connect/connect-dialog/advanced-option/advanced-option.component';
35+
import { ElementContentViewComponent } from '@app/elements/content/content-window/content-view/content-view.component';
36+
import { DynamicFormComponent } from '@app/elements/content/content-footer/variable-dynamic-form/variable-dynamic-form.component';
37+
import { ElementSendCommandDialogComponent } from '@app/elements/content/content-footer/send-command-dialog/send-command-dialog.component';
38+
import { ElementSendCommandWithVariableDialogComponent } from '@app/elements/content/content-footer/send-command-with-variable-dialog/send-command-with-variable-dialog.component';
4039

41-
import {ElementACLDialogComponent} from '@app/services/connect-token/acl-dialog/acl-dialog.component';
42-
import {ElementDialogAlertComponent} from '@app/services/dialog/alert.service';
43-
import {ElementTermComponent} from '@app/elements/replay/term/term.component';
4440

4541
export const ElementComponents = [
4642
ElementLeftBarComponent,
@@ -80,5 +76,5 @@ export const ElementComponents = [
8076
ElementsPartsComponent,
8177
ElementACLDialogComponent,
8278
ElementDialogAlertComponent,
83-
ElementTermComponent,
79+
ElementTermComponent
8480
];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="seek-content">
55
<nz-spin nzSize="default"></nz-spin>
66
<p>正在跳转...</p>
7-
<button class="cancel-btn" (click)="cancelSeek($event)">取消</button>
7+
<button class="cancel-btn" (click)="cancelSeek($event)">{{ 'Cancel' | translate }}</button>
88
</div>
99
</div>
1010

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

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -371,19 +371,21 @@ input[type="range"]:focus::-ms-fill-upper {
371371
.player-container {
372372
display: flex;
373373
flex-direction: column;
374-
height: 100vh;
374+
height: 100%;
375+
width: 100%;
375376
background: var(--el-editor-bg-color);
376-
377-
&.seeking {
378-
// 跳转状态下保持原有样式，不做额外改动
379-
// 主要依靠 seek-overlay 来显示跳转提示
380-
}
377+
max-width: 100%;
378+
max-height: 100%;
379+
overflow: hidden;
381380

382381
.display {
383382
flex: 1;
384383
position: relative;
385384
background: var(--el-main-bg-color);
386385
min-height: 0;
386+
max-width: 100%;
387+
max-height: 100%;
388+
overflow: hidden;
387389

388390
.seek-overlay {
389391
position: absolute;
@@ -434,14 +436,19 @@ input[type="range"]:focus::-ms-fill-upper {
434436
flex-direction: row;
435437
height: 100%;
436438
min-height: 0;
439+
max-width: 100%;
440+
max-height: 100%;
441+
overflow: hidden;
437442

438443
.commands {
439444
width: 250px;
445+
min-width: 250px;
446+
max-width: 250px;
440447
background: var(--el-asset-tree-bg-color);
441448
border-right: 1px solid var(--el-border-color-x);
442449
display: flex;
443450
flex-direction: column;
444-
flex-shrink: 0; // 不允许收缩
451+
flex-shrink: 0;
445452

446453
.commands-header {
447454
padding: 12px 16px;
@@ -505,6 +512,8 @@ input[type="range"]:focus::-ms-fill-upper {
505512
display: flex;
506513
flex-direction: column;
507514
min-width: 0;
515+
max-width: 100%;
516+
max-height: 100%;
508517

509518
&.full {
510519
width: 100%;
@@ -522,22 +531,25 @@ input[type="range"]:focus::-ms-fill-upper {
522531
box-sizing: border-box;
523532
flex: 1;
524533
min-height: 0;
534+
max-width: 100%;
535+
max-height: 100%;
525536

526537
> * {
527538
max-width: 100%;
528539
max-height: 100%;
529540
object-fit: contain;
541+
width: auto;
542+
height: auto;
530543
}
531544
}
532545
}
533546
}
534547
}
535548

536-
// 控制栏 - 现在在底部
537549
.controls {
538550
display: flex;
539551
align-items: center;
540-
height: 60px; // 增加高度确保足够空间
552+
height: 60px;
541553
padding: 0 16px;
542554
background: var(--el-nav-bg-color);
543555
border-top: 1px solid var(--el-border-color-x);
@@ -668,7 +680,6 @@ input[type="range"]:focus::-ms-fill-upper {
668680
}
669681
}
670682

671-
// 响应式
672683
@media (max-width: 768px) {
673684
.player-container {
674685
.controls {
@@ -704,6 +715,20 @@ input[type="range"]:focus::-ms-fill-upper {
704715

705716
.screen-wrapper {
706717
width: 100%;
718+
max-width: 100%;
719+
min-width: 0;
720+
}
721+
}
722+
}
723+
}
724+
725+
@media (max-width: 1024px) and (min-width: 769px) {
726+
.player-container {
727+
.display .content {
728+
.commands {
729+
width: 200px;
730+
min-width: 200px;
731+
max-width: 200px;
707732
}
708733
}
709734
}

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

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
flex-direction: column;
44
height: 100vh;
55
background: var(--el-main-bg-color);
6+
max-height: 100vh;
7+
overflow: hidden;
8+
9+
--playlist-width: 300px;
10+
--playlist-min-width: 300px;
611

712
.info-header {
813
display: flex;
@@ -53,6 +58,8 @@
5358
flex: 1;
5459
position: relative;
5560
background: var(--el-editor-bg-color);
61+
min-width: 0;
62+
overflow: hidden;
5663

5764
.loading-overlay {
5865
position: absolute;
@@ -65,15 +72,21 @@
6572
.video-player {
6673
width: 100%;
6774
height: 100%;
75+
max-width: 100%;
76+
max-height: 100%;
77+
overflow: hidden;
6878
}
6979
}
7080

7181
.playlist-area {
72-
width: 300px;
82+
width: var(--playlist-width);
83+
min-width: var(--playlist-min-width);
84+
max-width: var(--playlist-width);
7385
background: var(--el-asset-tree-bg-color);
7486
border-left: 1px solid var(--el-border-color-x);
7587
display: flex;
7688
flex-direction: column;
89+
flex-shrink: 0;
7790

7891
.playlist-header {
7992
display: flex;
@@ -194,13 +207,43 @@
194207

195208
.video-area {
196209
height: 60vh;
210+
min-height: 300px;
211+
flex: none;
197212
}
198213

199214
.playlist-area {
200215
width: 100%;
216+
min-width: 100%;
217+
max-width: 100%;
201218
height: 40vh;
219+
min-height: 200px;
202220
border-left: none;
203221
border-top: 1px solid var(--el-border-color-x);
222+
flex: none;
223+
}
224+
}
225+
}
226+
227+
@media (max-width: 1024px) and (min-width: 769px) {
228+
--playlist-width: 250px;
229+
--playlist-min-width: 250px;
230+
}
231+
232+
@media (min-width: 1200px) {
233+
--playlist-width: 350px;
234+
--playlist-min-width: 350px;
235+
}
236+
237+
@media (max-width: 480px) {
238+
.main-content {
239+
.video-area {
240+
height: 50vh;
241+
min-height: 250px;
242+
}
243+
244+
.playlist-area {
245+
height: 50vh;
246+
min-height: 150px;
204247
}
205248
}
206249
}

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Replay } from '@app/model';
2-
import { HttpService, I18nService, LogService } from '@app/services';
3-
import { TranslateService } from '@ngx-translate/core';
4-
import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
52
import { ActivatedRoute } from '@angular/router';
3+
import { TranslateService } from '@ngx-translate/core';
4+
import { HttpService, I18nService, LogService } from '@app/services';
5+
import { ChangeDetectorRef, Component, Input, OnInit, HostListener } from '@angular/core';
66

77
export interface Section extends Replay {
88
name: string;
@@ -39,6 +39,11 @@ export class ElementsPartsComponent implements OnInit {
3939
alertShown = true;
4040
videoLoading = false;
4141

42+
@HostListener('window:resize', ['$event'])
43+
onResize(event) {
44+
this.cdRef.detectChanges();
45+
}
46+
4247
constructor(
4348
public _i18n: I18nService,
4449
private _http: HttpService,

0 commit comments

Comments
 (0)