Getting 2 TypeErrors with Shaka player using React and Typescript

Hey there!

I’m very new to shaka player and I’m trying to use it in a simple app. Followed the official tutorial, but I’m using React with Typescript and I can’t get it to work. I’m getting these two errors:

TypeError: Cannot read property ‘textTracks’ of null

TypeError: this.target.addEventListener is not a function

I’m unable to tell where the second one happens, the first one is marked in the code, which looks like this:

const Video: React.FC<RouteComponentProps> = props => {
  let video = React.createRef<HTMLVideoElement>();

  useEffect(() => {
    const initPlayer = () => {
      let player = new shaka.Player(video);

      if (player) {
        player.addEventListener("error", function(event: any) {
        });
        player
          .load(manifestUri)
          .then(function() {
            console.log("The video has now been loaded!");
          })
          .catch((error: any) =>
            console.error("Error code", error.code, "object", error) // first error thrown here
          ); 

        (window as any).player = player;
      }
    };

    function initApp() {
      shaka.polyfill.installAll();

      if (shaka.Player.isBrowserSupported()) {
        initPlayer();
      } else {
        console.error("Browser not supported!");
      }
    }

    if (document) {
      document.addEventListener("DOMContentLoaded", initApp);
    }
  }, [video, videoUrl]);

  return (/* video element here*/);
};

What am I doing wrong here? Thanks.

Details of errors here:

index.js:1375 Error code undefined object TypeError: Cannot read property 'textTracks' of null
    at new Dk (shaka-player.compiled.js:11604)
    at new Tk.c.textDisplayFactory (shaka-player.compiled.js:13556)
    at Ga.b (shaka-player.compiled.js:12437)
    at Ma (shaka-player.compiled.js:511)
    at Na.next (shaka-player.compiled.js:541)
    at shaka-player.compiled.js:354
    at new Promise (<anonymous>)
    at ka (shaka-player.compiled.js:349)
    at t (shaka-player.compiled.js:359)
    at Xk (shaka-player.compiled.js:12432)
    at shaka-player.compiled.js:12039
    at Object.Be (shaka-player.compiled.js:12081)
    at Ga.b (shaka-player.compiled.js:11572)
    at Ma (shaka-player.compiled.js:511)
    at Na.next (shaka-player.compiled.js:541)
    at shaka-player.compiled.js:354
    at new Promise (<anonymous>)
    at ka (shaka-player.compiled.js:349)
    at t (shaka-player.compiled.js:359)
    at Ck (shaka-player.compiled.js:11567)
    at Ga.b (shaka-player.compiled.js:11556)
    at Ma (shaka-player.compiled.js:511)
    at Na.next (shaka-player.compiled.js:541)
    at c (shaka-player.compiled.js:342)

Uncaught (in promise) TypeError: this.target.addEventListener is not a function
    at new cc (shaka-player.compiled.js:2110)
    at K.push../node_modules/shaka-player/dist/shaka-player.compiled.js.K.w (shaka-player.compiled.js:2064)
    at Vk (shaka-player.compiled.js:12335)
    at shaka-player.compiled.js:12027
    at Object.Be (shaka-player.compiled.js:12081)
    at Ga.b (shaka-player.compiled.js:11572)
    at Ma (shaka-player.compiled.js:511)
    at Na.next (shaka-player.compiled.js:541)
    at shaka-player.compiled.js:354
    at new Promise (<anonymous>)
    at ka (shaka-player.compiled.js:349)
    at t (shaka-player.compiled.js:359)
    at Ck (shaka-player.compiled.js:11567)
    at Ga.b (shaka-player.compiled.js:11556)
    at Ma (shaka-player.compiled.js:511)
    at Na.next (shaka-player.compiled.js:541)
    at c (shaka-player.compiled.js:342)

[sonicka]

Thanks @matvp91 for your response.

Seems like my assignment doesn’t require changing the source so I am probably okay with how it works right now.

Although I have one more question - l’m trying to fullscreen the video automatically when it starts playing using requestFullscreen(), and it sometimes works and sometimes it throws

TypeError: fullscreen error: Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.

You think you could briefly explain how come it sometimes works and sometimes doesn’t? And if it is possible to make it work always? That might sound dumb but from what I’ve read it should never work so I’m kinda confused.

[sonicka]

Got it. Now I call requestFullscreen() when clicking on button together with playing the video with Shaka player and it works. Thanks.