fix(abc:media): fix cannot redefine property error (#1447)

package.json

@@ -152,6 +152,7 @@
     "source-map-explorer": "^2.5.2",
     "xlsx": "^0.17.4",
     "jszip": "^3.7.1",
+    "plyr": "^3.6.12",
     "screenfull": "^6.0.0",
     "less-bundle-promise": "^1.0.7",
     "ng-alain-codelyzer": "^0.0.1",

packages/abc/media/demo/custom.md

@@ -15,7 +15,8 @@ Specify `source` and` options` to customize the player.
 
 ```ts
 import { Component } from '@angular/core';
-import { PlyrMediaSource, PlyrMediaType } from '@delon/abc/media';
+
+import type Plyr from 'plyr';
 
 @Component({
   selector: 'app-demo',
@@ -24,22 +25,22 @@ import { PlyrMediaSource, PlyrMediaType } from '@delon/abc/media';
       <button nz-button (click)="play('video')">Change Play Video</button>
       <button nz-button (click)="play('audio')">Change Play Audio</button>
     </div>
-    <media #media [source]="source" [options]="options" style="height: 200px;"></media>
-  `,
+    <media #media [source]="source" [options]="options"></media>
+  `
 })
 export class DemoComponent {
-  source: PlyrMediaSource = {
+  source: Plyr.SourceInfo = {
     type: 'video',
     sources: [
       {
-        src: ``,
-      },
+        src: ``
+      }
     ],
     // 字幕
-    tracks: [],
+    tracks: []
   };
 
-  options = {
+  options: Plyr.Options = {
     // If you any problems, open `debug` and you can quickly find the issues
     debug: true,
     // controls: ['play-large'],
@@ -48,15 +49,15 @@ export class DemoComponent {
       play: '播放',
       pause: '暂停',
       speed: '速度',
-      normal: '正常',
-    },
+      normal: '正常'
+    }
   };
 
   constructor() {
     this.play('video');
   }
 
-  play(type: PlyrMediaType): void {
+  play(type: 'audio' | 'video'): void {
     this.source.type = type;
     if (type === 'video') {
       this.source.sources[0].src = `https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4`;

packages/abc/media/demo/mp3.md

@@ -20,14 +20,14 @@ import { Component } from '@angular/core';
   selector: 'app-demo',
   template: `
     <div class="mb-sm">
-      <button nz-button (click)="media.player.play()">Play</button>
-      <button nz-button (click)="media.player.pause()">Pause</button>
-      <button nz-button (click)="media.player.restart()">Restart</button>
+      <button nz-button (click)="media.player?.play()">Play</button>
+      <button nz-button (click)="media.player?.pause()">Pause</button>
+      <button nz-button (click)="media.player?.restart()">Restart</button>
     </div>
-    <media #media type="audio" [source]="mp3" style="height: 200px"></media>
+    <media #media type="audio" [source]="mp3"></media>
   `,
 })
 export class DemoComponent {
-  mp3 = `http://h5player.bytedance.com/video/music/audio.mp3`;
+  mp3 = `https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3`;
 }
 ```

packages/abc/media/demo/mp4.md

@@ -20,11 +20,11 @@ import { Component } from '@angular/core';
   selector: 'app-demo',
   template: `
     <div class="mb-sm">
-      <button nz-button (click)="media.player.play()">Play</button>
-      <button nz-button (click)="media.player.pause()">Pause</button>
-      <button nz-button (click)="media.player.restart()">Restart</button>
+      <button nz-button (click)="media.player?.play()">Play</button>
+      <button nz-button (click)="media.player?.pause()">Pause</button>
+      <button nz-button (click)="media.player?.restart()">Restart</button>
     </div>
-    <media #media [source]="mp4" style="height: 200px"></media>
+    <media #media [source]="mp4"></media>
   `,
 })
 export class DemoComponent {

packages/abc/media/index.en-US.md

@@ -24,3 +24,11 @@ The plyr script file takes the form of lazy loading，you can change the default
 | `[options]` | Source options of the media, please refer to [plyr options](https://github.com/sampotts/plyr#options) | `any` | - | ✅ |
 | `[delay]` | Delay init plyr player, unit: ms | `number` | - | - |
 | `(ready)` | Ready callback | `EventEmitter<Plyr>` | - | - |
+
+## FAQ
+
+### How to use Plyr types more friendly
+
+```ts
+import type Plyr from 'plyr';
+```

packages/abc/media/index.zh-CN.md

@@ -24,3 +24,11 @@ module: import { MediaModule } from '@delon/abc/media';
 | `[options]` | 播放器参数 [plyr options](https://github.com/sampotts/plyr#options) | `any` | - | ✅ |
 | `[delay]` | 延迟初始化，单位：毫秒 | `number` | - | - |
 | `(ready)` | 准备就绪回调 | `EventEmitter<Plyr>` | - | - |
+
+## FAQ
+
+### 如何更友好的使用 Plyr 类型
+
+```ts
+import type Plyr from 'plyr';
+```

packages/abc/media/media.component.ts

@@ -14,15 +14,17 @@ import {
   SimpleChange,
   ViewEncapsulation
 } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Subject, timer } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
+
+import type Plyr from 'plyr';
 
 import { InputNumber, NumberInput, ZoneOutside } from '@delon/util/decorator';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { MediaService } from './media.service';
-import { PlyrMediaSource, PlyrMediaType } from './plyr.types';
 
-declare const Plyr: NzSafeAny;
+export type MediaType = 'html5' | 'youtube' | 'video' | 'audio';
 
 @Component({
   selector: 'media',
@@ -38,38 +40,38 @@ declare const Plyr: NzSafeAny;
 export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
   static ngAcceptInputType_delay: NumberInput;
 
-  private _p: NzSafeAny;
-  private videoEl!: HTMLElement;
-  private time: NzSafeAny;
-  private notify$: Subscription;
+  private _p?: Plyr | null;
+  private videoEl?: HTMLElement;
+  private destroy$ = new Subject<void>();
 
-  @Input() type: PlyrMediaType = 'video';
-  @Input() source?: string | PlyrMediaSource;
-  @Input() options: NzSafeAny;
+  @Input() type: MediaType = 'video';
+  @Input() source?: string | Plyr.SourceInfo;
+  @Input() options?: Plyr.Options;
   @Input() @InputNumber() delay = 0;
-  @Output() readonly ready = new EventEmitter<NzSafeAny>();
+  @Output() readonly ready = new EventEmitter<Plyr>();
 
-  get player(): NzSafeAny {
+  get player(): Plyr | undefined | null {
     return this._p;
   }
 
   constructor(
     private el: ElementRef<HTMLElement>,
     private renderer: Renderer2,
     private srv: MediaService,
-    public ngZone: NgZone,
+    private ngZone: NgZone,
     private platform: Platform
-  ) {
-    this.notify$ = this.srv.notify().subscribe(() => this.initDelay());
-  }
+  ) {}
 
   @ZoneOutside()
   private initDelay(): void {
-    this.time = setTimeout(() => this.init(), this.delay);
+    timer(this.delay)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => this.ngZone.runOutsideAngular(() => this.init()));
   }
 
   private init(): void {
-    if (!(window as NzSafeAny).Plyr) {
+    const winPlyr = (window as NzSafeAny).Plyr;
+    if (!winPlyr) {
       throw new Error(
         `No window.Plyr found, please make sure that cdn or local path exists, the current referenced path is: ${JSON.stringify(
           this.srv.cog.urls
@@ -79,11 +81,11 @@ export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
 
     this.ensureElement();
 
-    const player = (this._p = new Plyr(this.videoEl, {
+    const player: Plyr = (this._p = new winPlyr(this.videoEl, {
       ...this.srv.cog.options
     }));
 
-    player.on('ready', () => this.ready.next(player));
+    player.on('ready', () => this.ngZone.run(() => this.ready.next(player)));
 
     this.uploadSource();
   }
@@ -106,28 +108,37 @@ export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
   }
 
   private uploadSource(): void {
+    if (this._p == null) return;
+
     const { source, type } = this;
-    this._p.source = typeof source === 'string' ? { type, sources: [{ src: source }] } : source;
+    this._p.source = (typeof source === 'string' ? { type, sources: [{ src: source }] } : source) as Plyr.SourceInfo;
   }
 
   ngAfterViewInit(): void {
     if (!this.platform.isBrowser) {
       return;
     }
+    this.srv
+      .notify()
+      .pipe(takeUntil(this.destroy$), take(1))
+      .subscribe(() => this.initDelay());
+
     this.srv.load();
   }
 
   ngOnChanges(changes: { [p in keyof MediaComponent]?: SimpleChange }): void {
     this.srv.cog = { options: this.options };
-    if (changes.source && this._p) {
+    if (changes.source) {
       this.uploadSource();
     }
   }
 
   ngOnDestroy(): void {
-    clearTimeout(this.time);
     this.destroy();
     this._p = null;
-    this.notify$.unsubscribe();
+
+    const { destroy$ } = this;
+    destroy$.next();
+    destroy$.complete();
   }
 }

packages/abc/media/media.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import { share } from 'rxjs/operators';
 
 import { AlainConfigService, AlainMediaConfig } from '@delon/util/config';
 import { LazyService } from '@delon/util/other';
@@ -42,6 +43,6 @@ export class MediaService {
   }
 
   notify(): Observable<void> {
-    return this.notify$.asObservable();
+    return this.notify$.asObservable().pipe(share());
   }
 }

packages/abc/media/media.spec.ts

@@ -1,13 +1,14 @@
 import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 
+import type Plyr from 'plyr';
+
 import { createTestContext } from '@delon/testing';
 import { LazyService } from '@delon/util/other';
 import { NzSafeAny } from 'ng-zorro-antd/core/types/any';
 
-import { MediaComponent } from './media.component';
+import { MediaComponent, MediaType } from './media.component';
 import { MediaModule } from './media.module';
-import { PlyrMediaSource, PlyrMediaType } from './plyr.types';
 
 class MockPlyr {
   source: NzSafeAny = {};
@@ -78,7 +79,7 @@ describe('abc: media', () => {
       fixture2.detectChanges();
       tick();
       fixture2.detectChanges();
-      expect(fixture2.componentInstance.comp['videoEl'].dataset.type).toBe(`custom`);
+      expect(fixture2.componentInstance.comp['videoEl']!.dataset.type).toBe(`custom`);
     }));
   });
 
@@ -108,8 +109,8 @@ describe('abc: media', () => {
 })
 class TestComponent {
   @ViewChild('comp') comp!: MediaComponent;
-  type: PlyrMediaType = 'video';
-  source: string | PlyrMediaSource = '1.mp4';
+  type: MediaType = 'video';
+  source: string | Plyr.SourceInfo = '1.mp4';
   options: NzSafeAny;
   delay = 0;
   ready(): void {}

packages/abc/media/public_api.ts

@@ -1,5 +1,3 @@
 export * from './media.component';
 export * from './media.service';
 export * from './media.module';
-
-export * from './plyr.types';

packages/abc/ng-package.json

@@ -12,6 +12,7 @@
     "isutf8",
     "jszip",
     "xlsx",
+    "plyr",
     "ngx-countdown",
     "@delon/theme",
     "@delon/util",

packages/abc/package.json

@@ -25,6 +25,7 @@
     "file-saver": "@LIB-PLACEHOLDER",
     "jszip": "@LIB-PLACEHOLDER",
     "xlsx": "@LIB-PLACEHOLDER",
+    "plyr": "@LIB-PLACEHOLDER",
     "ngx-countdown": "@LIB-PLACEHOLDER",
     "@delon/theme": "PEER-0.0.0-PLACEHOLDER",
     "@delon/util": "PEER-0.0.0-PLACEHOLDER",