ERROR TypeError: Cannot read properties of undefined (reading 'dataset') at new Jx (shaka-player.ui.js:1085:66)

[steffenmoreano]

Have you read the Tutorials? y

Have you read the FAQ and checked for duplicate open issues? y

What version of Shaka Player are you using? 4.2.1

Please ask your question Im using shaka-player with angular getting the error message above. Could please anyone try to help me out?

This is the complete error message from browser console: core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'dataset') at new Jx (shaka-player.ui.js:1085:66) at ShakaPlayerComponent.initPlayer (shaka-player.component.ts:62:16) at ShakaPlayerComponent.ngOnChanges (shaka-player.component.ts:30:12) at ShakaPlayerComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1508:1) at callHook (core.mjs:2552:1) at callHooks (core.mjs:2511:1) at executeInitAndCheckHooks (core.mjs:2462:1) at selectIndexInternal (core.mjs:8407:1) at Module.ɵɵadvance (core.mjs:8390:1) at VideoPlayerViewLeftComponent_Template (video-player-view-left.component.html:6:43)

My typescript file here: ` import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core'; import { Media } from '../../models/media/media'; import { MediaTypeDisplay } from '../../models/media/MediaTypeDisplay'; import { threeLetters } from '../../util/constante'; // eslint-disable-next-line @typescript-eslint/no-explicit-any declare let shaka: any;

@Component({ selector: 'app-shaka-player', templateUrl: './shaka-player.component.html', styleUrls: ['./shaka-player.component.scss'], }) export class ShakaPlayerComponent implements AfterViewInit, OnInit, OnChanges { @ViewChild('videoPlayer') videoElementRef: ElementRef | undefined; @ViewChild('videoContainer') videoContainerRef: ElementRef | undefined; @Input() matchs: Media;

videoElement: HTMLVideoElement | undefined; videoContainerElement: HTMLDivElement | undefined; // eslint-disable-next-line @typescript-eslint/no-explicit-any player: any;

constructor() {}

ngOnChanges() { shaka.polyfill.installAll(); if (shaka.Player.isBrowserSupported()) { this.videoElement = this.videoElementRef?.nativeElement; this.videoContainerElement = this.videoContainerRef?.nativeElement; this.initPlayer(); } else { // eslint-disable-next-line no-alert alert('Browser not supported!'); } }

ngOnInit() { this.mediaSessionControl(); }

ngAfterViewInit(): void { shaka.polyfill.installAll(); if (shaka.Player.isBrowserSupported()) { this.videoElement = this.videoElementRef?.nativeElement; this.videoContainerElement = this.videoContainerRef?.nativeElement; this.initPlayer(); } else { // eslint-disable-next-line no-alert alert('Browser not supported!'); } }

private initPlayer() { this.videoElement?.addEventListener('ended', this.onEnd.bind(this)); this.player = new shaka.Player(this.videoElement); // eslint-disable-next-line this.player.getNetworkingEngine().registerRequestFilter(function (type: any, request: any) { request.allowCrossSiteCredentials = true; request.headers.Authorization = 'Basic ZGVtbzpaV0hGVE9UMw=='; });

const ui = new shaka.ui.Overlay(this.player, this.videoContainerElement, this.videoElement);

this.player
  .load(this.matchs.file)
  .then(() => {
    this.videoElement?.play();
  })
  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
  .catch((e: any) => {
    // eslint-disable-next-line no-console
    console.error(e);
  });

}

/**

• Event Listener when video ended

• @param */ public onEnd() { if (shaka.Player.isBrowserSupported()) { this.initPlayer(); } }

  public returnTitle(match: Media): string { let title = match?.title; if (match.category === MediaTypeDisplay.STREAM || match.category === MediaTypeDisplay.LIVE) { let hG = match.homeTeamStatics?.score ? match.homeTeamStatics?.score : '-'; let aG = match.awayTeamStatics?.score ? match.awayTeamStatics?.score : '-'; // @ts-ignore title = threeLetters[match.homeTeam.id] + ' ' + hG + ' vs ' + aG + ' ' + threeLetters[match.awayTeam.id]; } return title; }

  public returnImagePreview(match: Media): string { let imagePath = 'https://d1dl5mo4sj1g3f.cloudfront.net/media/image_preview/dfl-logo.png'; if (match?.imagePreview) { imagePath = https://d1dl5mo4sj1g3f.cloudfront.net/media/${match?.imagePreview}; } return imagePath; }

  public mediaSessionControl() { if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: this.returnTitle(this.matchs), artist: 'Bundesliga', album: 'Media Day: ' + this.matchs.matchDay, artwork: [ { src: this.returnImagePreview(this.matchs), sizes: '128x128', type: 'image/png', }, ], }); } } } `

My .html file: `<!--<video *ngIf="isOnline" [muted]="false" [autoplay]="true" controls>

Your browser does not support the video tag . --> <app-shaka-player [matchs]="matchs"> <img src="assets/img/offline_waiting.gif" [ngClass]="{ 'show-svg': !isOnline, 'hide-svg': isOnline }" /> `

[jameleddine]

the second attribute in the initialisation const ui = new shaka.ui.Overlay(this.player, this.videoContainerElement, this.videoElement); can be undefined in the first rendering, maybe you could check on his value before starting loading the player like this:

if (this.videoContainerElement) {     //check if videoContainerElement is defined  

const ui = new shaka.ui.Overlay(this.player, this.videoContainerElement, this.videoElement);
this.player
  .load(this.matchs.file)
  .then(() => {
    this.videoElement?.play();
  })
  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
  .catch((e: any) => {
    // eslint-disable-next-line no-console
    console.error(e);
  });
}

[github-actions[bot]]

Closing due to inactivity. If this is still an issue for you or if you have further questions, the OP can ask shaka-bot to reopen it by including @shaka-bot reopen in a comment.