Cannot read properties of undefined (reading 'subscriptions')

[Tonio31]

Description

I encountered these 2 errors:

preview-9c596f222c88a.js:2 ERROR TypeError: Cannot read properties of undefined (reading 'subscriptions')
    at VgOverlayPlayComponent.onPlayerReady (vg-overlay-play.component.ts:127:4)
    at eval (vg-overlay-play.component.ts:109:53)

ERROR TypeError: Cannot read properties of undefined (reading 'play')
    at VgControlsComponent.onPlayerReady (vg-controls.component.ts:102:4)
    at eval (vg-controls.component.ts:88:53)

This happens when the video player is created when entering a component but "destroyed" before onPlayerReady is called.

It can happen in a real app when user will go on a route but immediately click on another link to go on another route, in this scenario, the player would have started to create but will be destroyed directly.

The problems seems to come from vg-overlay-play & vg-controls

Workaround

When you get onPlayerReady event, start to create <vg-overlay-play> & <vg-controls>, i.e:

• Define onPlayerReady:

<vg-player (onPlayerReady)="onPlayerReady($event)">
 <ng-container *ngIf="isPlayerReady">
   <vg-overlay-play
     [vgFor]="identifier"
   ></vg-overlay-play>

   <vg-controls [vgAutohide]="true" [vgAutohideTime]="1">
     <vg-play-pause></vg-play-pause>
   </vg-controls>
 </ng-container>

 <video
   [vgMedia]="$any(vgMedia)"
   #vgMedia
   [id]="identifier"
 >
   <source #vgMediaSource [src]="sourceSelectedByDefault" type="video/mp4" />
 </video>
</vg-player>

  public isPlayerReady: boolean = false;

  public onPlayerReady(api: VgApiService): void {
    this.api = api;
    setTimeout((): void => {
      this.isPlayerReady = true;
    });
  }

I'm guessing the fix is simply to add a if statement somewhere in the overlay and controls component...

Expected Behavior

No exception is raised in this scenario

Actual Behavior

THere were 2 exceptions being thrown

Steps to Reproduce

I created this stackblitz that "fake" the behaviour I described above, there is a ExpressionChangedAfterItHasBeenCheckedError because of the way I "faked" the reproduction but you also see the videogular errrors https://ngx-ui-scroll-3-angular-16-jq9qdj.stackblitz.io

Thanks for this great component

[IxquitilisSaid]

Oh good catch! I'll fix it and publish next week as I'm in the middle of a crunch.

[abnersouza]

@IxquitilisSaid do you have any updates to issue?

Also im trying to use [vgMedia] in my project and no matter what i do i get the error: "Can't bind to 'vgMedia' since it isn't a known property of 'vg-player'"

I'm using the version 8.0.0 which is the latest, i have a component with a module, in this module im importing all 4 Modules: VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule