Error init videogular with HLS at VgFullscreenApiService.init Angular 10

[paulovargatt]

Description

I'm having this problem in angular 10 after migrating the code from angular 8 + videogular2 7.0.1(working)

    ERROR TypeError: Cannot read property 'elem' of undefined
    at VgFullscreenApiService.init (videogular-ngx-videogular-core.js:616)
    at VgPlayerComponent.ngAfterContentInit (videogular-ngx-videogular-core.js:1715)

Steps to Reproduce

Angular 10 hls.js "0.14.11

<video #media id="video" [vgMedia]="media" preload="auto" crossOrigin="anonymous" #vgHls="vgHls"
                       [vgHls]="video$.original_payload.video_link"
                       [poster]="video$.thumbnail"
                       (onGetBitrates)="getBit($event)"
                       [controls]="false" [autoplay]="true"
                       controlsList="nodownload nofullscreen"
                       playsinline>
                </video>

I tried to remove the controls, put the controls etc ... without success!

Attachments

[IxquitilisSaid]

Oh darn, I'm on it. Could you provide an example repo or a codepen? I have some suspicions as to what it may be causing it but I need some more context to fully ascertain the root cause.

Quick question though: On your component's TS file, do you have a ViewChild referencing the VgHlsDirective? Something like @ViewChild(VgHlsDirective) vgHls: VgHlsDirective;

[paulovargatt]

yes, @ViewChild(VgHlsDirective, {static: false}) vgHls: VgHlsDirective;

[paulovargatt]

@IxquitilisSaid I verified that the error happens when the IOS platform is selected, android and web is OK

[IxquitilisSaid]

Ahhh that's actually great to know, already ticked one of my assumptions Working on a fix, thanks for reporting it 😄

[paulovargatt]

Thank you @IxquitilisSaid! Awaiting ;)

[IxquitilisSaid]

Hey, small update: Currently working on a fix for it. A priori I thought it was just the iOS onchange polyfill being bound to the wrong event (webkitendfullscreen in our case) but after some digging around I found that we might also be binding the request and exit to the wrong events

Before =>

request: 'webkitEnterFullscreen',
exit: 'webkitExitFullscreen',

After =>

request: 'webkitRequestFullscreen',
exit: 'webkitCancelFullScreen',

That being said, testing it on BrowserStack throws errors when evaling this.medias.toArray()[0].elem due to this not being an object on iOS Safari. I'm assuming it's just limitations of the test env so I'm going to need some time to set a mock app to run it through the XCode simulator.

[paulovargatt]

@IxquitilisSaid in the latest version "@videogular/ngx-videogular": "^4.0.0", this problem still occurs in IOS, the test reports the error in chrome too.

[mushahidansari]

@IxquitilisSaid any update on this issue? I am facing the exact same issue in my player as well

[colossatr0n]

To circumvent this issue I had to replace all instances of

 fsElemDispatcher = this.medias.toArray()[0].elem;

with

let media = this.medias.toArray()[0];
fsElemDispatcher = media == undefined ? elem : media.elem;

in node_modules/@videogular/ngx-videogular and then use patch-package as a postinstall script to retain the patch.