Fixed: parts loading

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

@@ -2,13 +2,6 @@
 
 <div class="player-container" id="player">
   <div class="display">
-    <!--  -->
-    <div class="seek-overlay" *ngIf="isLoading">
-      <div class="seek-content">
-        <nz-spin></nz-spin>
-      </div>
-    </div>
-
     <div class="seek-overlay" *ngIf="isSeeking">
       <div class="seek-content">
         <nz-spin></nz-spin>

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

@@ -5,7 +5,10 @@ import {
   OnInit,
   AfterViewInit,
   SimpleChanges,
-  ViewEncapsulation
+  ViewEncapsulation,
+  OnDestroy,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import Guacamole from 'guacamole-common-js';
 import { Command, Replay } from '@app/model';
@@ -22,10 +25,11 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
   styleUrls: ['guacamole.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, AfterViewInit {
+export class ElementReplayGuacamoleComponent
+  implements OnInit, OnChanges, AfterViewInit, OnDestroy
+{
   isPlaying = false;
   isSeeking = false;
-  isLoading = false;
   recording: any;
   playerRef: any;
   displayRef: any;
@@ -51,6 +55,8 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
   initializedCommand: boolean = false;
   commandsCollapsed: boolean = false;
 
+  @Output() ready = new EventEmitter<void>();
+
   constructor(
     private _http: HttpService,
     private _translate: TranslateService
@@ -74,6 +80,10 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
     this.applyScaleWithRetry(500);
   }
 
+  ngOnDestroy() {
+    this.destroy();
+  }
+
   initialize() {
     if (!this.replay || !this.replay.src) {
       return alert('Not found replay');
@@ -151,7 +161,9 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
 
     this.recording.onplay = () => {
       this.isPlaying = true;
-      this.isLoading = false;
+      try {
+        this.ready.emit();
+      } catch (e) {}
       this.applyScaleWithRetry(100);
     };
 
@@ -202,7 +214,6 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
 
   private safeAutoplayWithRetry(maxRetry: number = 5, delayMs: number = 500) {
     let attempts = 0;
-    this.isLoading = true;
 
     const tryPlay = () => {
       if (!this.recording) return;
@@ -219,10 +230,6 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
         attempts++;
         setTimeout(tryPlay, delayMs);
       } else if (this.recording && this.recording.isPlaying()) {
-        this.isLoading = false;
-      } else if (attempts >= maxRetry) {
-        // 超过最大重试次数后，允许用户交互
-        this.isLoading = false;
       }
     };
 
@@ -295,7 +302,6 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
     this.screenRef = null;
     this.isPlaying = false;
     this.isSeeking = false;
-    this.isLoading = false;
     this.max = 100;
     this.percent = 0;
     this.duration = '00:00';
@@ -501,7 +507,6 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
 
   toggleCommands() {
     this.commandsCollapsed = !this.commandsCollapsed;
-    // 面板展开/收起后强制尝试缩放
     this.applyScaleWithRetry(100);
   }
 }

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

@@ -33,7 +33,7 @@
     <!-- 视频播放区 -->
     <div class="video-area" [class.playlist-hidden]="playlistCollapsed">
       <div class="loading-overlay" *ngIf="videoLoading">
-        <nz-spin nzSize="large"></nz-spin>
+        <nz-spin></nz-spin>
       </div>
       <button class="show-playlist-btn" (click)="togglePlaylist()" [title]="'Show Playlist' | translate">
         <i nz-icon nzType="menu" nzTheme="outline"></i>
@@ -42,6 +42,7 @@
       <elements-replay-guacamole
         *ngIf="currentVideo && currentVideo.src"
         [replay]="currentVideo"
+        (ready)="videoLoading = false"
         class="video-player">
       </elements-replay-guacamole>
     </div>

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

@@ -2,6 +2,7 @@ import { Replay } from '@app/model';
 import { ActivatedRoute } from '@angular/router';
 import { HttpService, I18nService, LogService } from '@app/services';
 import { ChangeDetectorRef, Component, Input, OnInit, HostListener } from '@angular/core';
+import { Subscription } from 'rxjs';
 
 export interface Section extends Replay {
   name: string;
@@ -39,6 +40,8 @@ export class ElementsPartsComponent implements OnInit {
   videoLoading = false;
   playlistCollapsed = false;
 
+  private partReplaySub: Subscription;
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.cdRef.detectChanges();
@@ -137,7 +140,15 @@ export class ElementsPartsComponent implements OnInit {
   async fetchSection(item: IFile, sessionId: string, isFirstPush: boolean): Promise<boolean> {
     let section: Section;
     try {
-      const res: Replay = await this._http.getPartFileReplay(sessionId, item.name).toPromise();
+      // 取消上一次未完成的请求
+      if (this.partReplaySub) {
+        this.partReplaySub.unsubscribe();
+      }
+
+      const req$ = this._http.getPartFileReplay(sessionId, item.name);
+      const res: Replay = await new Promise((resolve, reject) => {
+        this.partReplaySub = req$.subscribe(resolve, reject);
+      });
 
       if (res) {
         // 3.5 的 TS 版本无法使用 ?.
@@ -166,12 +177,6 @@ export class ElementsPartsComponent implements OnInit {
             this.currentVideo = section;
             this.videoLoading = true;
             this.cdRef.detectChanges();
-
-            setTimeout(() => {
-              this.videoLoading = false;
-              this.cdRef.detectChanges();
-            }, 200);
-
             return false;
           }
         } else if (res && res.status === 'running') {
@@ -184,6 +189,10 @@ export class ElementsPartsComponent implements OnInit {
       this._logger.error(e);
     } finally {
       this.alertShown = false;
+      if (this.partReplaySub) {
+        this.partReplaySub.unsubscribe();
+        this.partReplaySub = null;
+      }
     }
     return isFirstPush;
   }
@@ -237,6 +246,14 @@ export class ElementsPartsComponent implements OnInit {
       return;
     }
 
+    // 终止未完成的分段请求
+    if (this.partReplaySub) {
+      this.partReplaySub.unsubscribe();
+      this.partReplaySub = null;
+    }
+    // 停止列表区域的加载提示
+    this.alertShown = false;
+
     this.currentVideo = null;
     this.videoLoading = true;
 
@@ -245,11 +262,6 @@ export class ElementsPartsComponent implements OnInit {
     setTimeout(() => {
       this.currentVideo = { ...folder };
       this.cdRef.detectChanges();
-
-      setTimeout(() => {
-        this.videoLoading = false;
-        this.cdRef.detectChanges();
-      }, 100);
     }, 50);
   }