Cannot read property 'bufferDetected' of undefined

csaicharan commented 4 years ago

Description

There seems to be an issue with the video player, it shows the following error while loading a video

Expected Behavior

It should not show any error while showing an error.

Actual Behavior

IxquitilisSaid commented 3 years ago

Could you provide more information? How does your template (HTML) look like?

phiamo commented 3 years ago

I have the same issue The template looks like this

<vg-player (onPlayerReady)="onPlayerReady($event)">
  <vg-overlay-play></vg-overlay-play>
  <video
          crossorigin
          #media
          preload="auto"
          [vgMedia]="media"
  >
    <source [src]="url$|async" type="video/mp4">
  </video>
  <vg-controls
          [vgAutohide]="true"
          [vgAutohideTime]="1.5"
  >
    <vg-play-pause></vg-play-pause>
    <vg-time-display vgProperty="current" vgFormat="hh:mm:ss"></vg-time-display>

    <vg-scrub-bar>
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>

    <vg-mute></vg-mute>
    <vg-volume></vg-volume>
    <vg-fullscreen></vg-fullscreen>
  </vg-controls>
</vg-player>

the component like that:

import {VgApiService, VgMediaDirective} from '@videogular/ngx-videogular/core';
import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
import { Observable, Subscription} from 'rxjs';
import {ConfigQuery} from '../../../../state/config';
import {distinctUntilChanged, map} from 'rxjs/operators';

@Component({
  selector: 'app-video-offline-player',
  templateUrl: './offline-player.component.html',
  styleUrls: ['./offline-player.component.scss'],
})
export class OfflinePlayerComponent implements OnDestroy {
  api: VgApiService;
  @ViewChild(VgMediaDirective, {static: false}) vgMedia: VgMediaDirective;
  @ViewChild('media', {static: false}) mediaRef: ElementRef<HTMLVideoElement>;
  private subscriptions: Subscription[] = [];
  url$: Observable<string>;
  constructor(
      private configQuery: ConfigQuery,
  ) {
    this.url$ = this.configQuery.current$.pipe(
      map(config => {
        return config.url;
      }),
      distinctUntilChanged(),
    );
  }

  ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
  }
  async onPlayerReady(api: VgApiService) {
    this.api = api;
    this.subscriptions.push(
      this.api.getDefaultMedia().subscriptions.pause.subscribe(() => {
          // do smth
      }),
      this.api.getDefaultMedia().subscriptions.ended.subscribe(() => {
          // do smth
      }),
    );
  }
}

And the errors that show op:

core.js:6141 ERROR TypeError: Cannot read property 'bufferDetected' of undefined
    at VgOverlayPlayComponent.onPlayerReady (videogular-ngx-videogular-overlay-play.js:50)
    at videogular-ngx-videogular-overlay-play.js:40
    at core.js:25885
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28499)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at invokeTask (zone-evergreen.js:480)
    at ZoneTask.invoke (zone-evergreen.js:469)
    at timer (zone-evergreen.js:2552)
defaultErrorLogger @ core.js:6141
handleError @ core.js:6189
next @ core.js:29119
schedulerFn @ core.js:25866
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25856
(anonymous) @ core.js:28538
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:28441
onHandleError @ core.js:28538
handleError @ zone-evergreen.js:368
runTask @ zone-evergreen.js:170
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
(anonymous) @ core.js:25885
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25856
onPlayerReady @ videogular-ngx-videogular-core.js:57
ngAfterContentInit @ videogular-ngx-videogular-core.js:1721
callHook @ core.js:2512
callHooks @ core.js:2483
executeInitAndCheckHooks @ core.js:2434
refreshView @ core.js:9427
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
refreshEmbeddedViews @ core.js:10506
refreshView @ core.js:9410
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
refreshEmbeddedViews @ core.js:10506
refreshView @ core.js:9410
refreshEmbeddedViews @ core.js:10506
refreshView @ core.js:9410
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
refreshEmbeddedViews @ core.js:10506
refreshView @ core.js:9410
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
renderComponentOrTemplate @ core.js:9500
tickRootContext @ core.js:10726
detectChangesInRootView @ core.js:10751
detectChanges @ core.js:22769
tick @ core.js:29491
(anonymous) @ core.js:29375
invoke @ zone-evergreen.js:364
onInvoke @ core.js:28512
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:28396
next @ core.js:29374
schedulerFn @ core.js:25866
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25856
checkStable @ core.js:28449
onLeave @ core.js:28562
onInvokeTask @ core.js:28506
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
createComponent @ player.component.ts:92
(anonymous) @ player.component.ts:93
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28499
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
createComponent @ player.component.ts:92
(anonymous) @ player.component.ts:93
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28499
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
createComponent @ player.component.ts:92
(anonymous) @ player.component.ts:93
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28499
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
createComponent @ player.component.ts:92
(anonymous) @ player.component.ts:93
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28499
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
createComponent @ player.component.ts:92
(anonymous) @ player.component.ts:93
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28499
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
createComponent @ player.component.ts:92
(anonymous) @ player.component.ts:93
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28499
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
createComponent @ player.component.ts:92
(anonymous) @ player.component.ts:75
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
notifyNext @ combineLatest.js:73
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
_subscribe @ BehaviorSubject.js:14
_trySubscribe @ Observable.js:42
_trySubscribe @ Subject.js:81
subscribe @ Observable.js:28
_subscribe @ Observable.js:76
subscribe @ Observable.js:27
subscribeToResult @ subscribeToResult.js:9
_complete @ combineLatest.js:52
complete @ Subscriber.js:61
(anonymous) @ subscribeToArray.js:5
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ combineLatest.js:26
subscribe @ Observable.js:23
ngAfterViewInit @ player.component.ts:74
callHook @ core.js:2512
callHooks @ core.js:2483
executeInitAndCheckHooks @ core.js:2434
refreshView @ core.js:9457
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
renderComponentOrTemplate @ core.js:9500
tickRootContext @ core.js:10726
detectChangesInRootView @ core.js:10751
detectChanges @ core.js:22769
setActive @ ionic-angular.js:2578
activateWith @ ionic-angular.js:2935
activateRoutes @ router.js:2129
(anonymous) @ router.js:2080
activateChildRoutes @ router.js:2079
activateRoutes @ router.js:2136
(anonymous) @ router.js:2080
activateChildRoutes @ router.js:2079
activate @ router.js:2005
(anonymous) @ router.js:1990
_next @ map.js:29
next @ Subscriber.js:49
_next @ tap.js:46
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
notifyNext @ switchMap.js:70
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ map.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ switchMap.js:46
_next @ switchMap.js:36
next @ Subscriber.js:49
notifyNext @ switchMap.js:70
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
_next @ tap.js:46
next @ Subscriber.js:49
notifyNext @ switchMap.js:70
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
_next @ tap.js:46
next @ Subscriber.js:49
notifyNext @ mergeMap.js:72
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
notifyNext @ mergeMap.js:72
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
_complete @ takeLast.js:52
complete @ Subscriber.js:61
_complete @ tap.js:66
complete @ Subscriber.js:61
_complete @ mergeMap.js:67
complete @ Subscriber.js:61
(anonymous) @ subscribeToArray.js:5
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ tap.js:16
subscribe @ Observable.js:23
call @ takeLast.js:22
subscribe @ Observable.js:23
call @ mergeMap.js:21
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ tap.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ switchMap.js:46
_next @ switchMap.js:36
next @ Subscriber.js:49
_next @ tap.js:46
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ tap.js:16
subscribe @ Observable.js:23
call @ switchMap.js:17
subscribe @ Observable.js:23
call @ tap.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ switchMap.js:46
_next @ switchMap.js:36
next @ Subscriber.js:49
_next @ filter.js:33
next @ Subscriber.js:49
_next @ tap.js:46
next @ Subscriber.js:49
notifyNext @ mergeMap.js:72
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
notifyNext @ mergeMap.js:72
_next @ InnerSubscriber.js:11
next @ Subscriber.js:49
_complete @ defaultIfEmpty.js:25
complete @ Subscriber.js:61
_complete @ Subscriber.js:79
complete @ Subscriber.js:61
_complete @ Subscriber.js:79
complete @ Subscriber.js:61
notifyComplete @ mergeMap.js:82
_complete @ InnerSubscriber.js:18
complete @ Subscriber.js:61
_complete @ mergeMap.js:67
complete @ Subscriber.js:61
(anonymous) @ subscribeToArray.js:5
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
notifyComplete @ mergeMap.js:79
_complete @ InnerSubscriber.js:18
complete @ Subscriber.js:61
notifyComplete @ mergeMap.js:82
_complete @ InnerSubscriber.js:18
complete @ Subscriber.js:61
_complete @ Subscriber.js:79
notifyComplete @ switchMap.js:66
_complete @ InnerSubscriber.js:18
complete @ Subscriber.js:61
_next @ take.js:37
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
_next @ filter.js:33
next @ Subscriber.js:49
_tryNext @ scan.js:55
_next @ scan.js:42
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
hotUpdateDownloaded @ bootstrap:385
hotAddUpdateChunk @ bootstrap:361
webpackHotUpdateCallback @ bootstrap:57
(anonymous) @ default~pages-index-index-module~pages-monlam-monlam-module~pages-translators-translators-module~tab~bf6c632f.72a9731336273b587e0b.hot-update.js:1
Show 262 more frames
core.js:6141 ERROR TypeError: Cannot read property 'play' of undefined
    at VgControlsComponent.onPlayerReady (videogular-ngx-videogular-controls.js:103)
    at videogular-ngx-videogular-controls.js:95
    at core.js:25885
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28499)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at invokeTask (zone-evergreen.js:480)
    at ZoneTask.invoke (zone-evergreen.js:469)
    at timer (zone-evergreen.js:2552)

laurentgoudet commented 2 years ago

I've looked into it a bit as we were hitting that as well, and the issue happens when vg-player is destroyed right after being initialized, which happened for us as it was inside a ngFor loop without a trackBy, attached to an Observable emitting many times the same value.

For what I can tell the flow is:

VgPlayerComponent::ngAfterContentInit() registers the media, and call this.api.onPlayerReady(this.fsAPI)
VgMediaDirective::ngOnDestroy() is immediately called, causing the media to be unregistered
onPlayerReady listeners are getting called while no media is registered in VgApiService, e.g. VgOverlayPlayComponent, which fails as VgApiService::$$getAllProperties() doesn't return subscriptions when no media has been registered.

In short this happens because the EventEmitter in https://github.com/videogular/ngx-videogular/blob/master/libs/ngx-videogular/core/src/lib/services/vg-api/vg-api.service.ts#L12 is async, so there's no guarantee that the media wouldn't have been removed by the time the listeners are called.

I haven't looked at how to fix is as I simply fixed our code instead, i.e. it's definitely a race condition in ngx-videogular but if you're hitting it you're likely have a bug somewhere else in your code.

AndY322 commented 1 year ago

Is there any update?

videogular / ngx-videogular