Embed interactive Twitch player for Angular or Typescript projects

Hi guys,

I’ve recently started working an Angular project that uses an embedded, interactive Twitch video player.

While implementing it I’ve noticed that it’s pretty to cumbersome to work with the JS script that’s currently available from the Twitch Development Team, when you have to use it with Typescript.

For this reason, I decided to write a Typescript wrapper for the Twitch player. I’ll just drop the link here if someone needs it.

It can be simply installed using npm i twitch-player and I’ve already tested it with my Angular project.

1 Like

I wrote my own twitch player in React and it’s similar to yours. It’s nice to have fine-grained control over the messages that get passed around, write custom events, etc.

1 Like

I tried something similar, but I didn’t want to package the JS file. Can you make the player typing look at window.Twitch instead of packaging the JS? I couldn’t figure out a way, but I don’t know Typescript that well yet to make packages.

I believe I got your point but please correct me if that’s not what you asked.

I don’t think excluding the JS script from the package is a good idea. The main reason why I made this into a package is to provide a quick and simple way of using the player in an Angular/Typescript project.

If I would exclude the JS file from the package, that would mean that anybody that wants to use this, would have to add it manually. This would represent an extra step in the setup of the player. Also, in the case of Angular projects, simply adding a script like that is IMO not that clean.

So that would mean when Twitch updates the Player/Embed JS, your whole project breaks? Since you are using a local copy of the embed lib instead of one from Twitch’s CDN. Where as if you used the CDN version and wrapping the functions, it would mostly remain working?

Can you keep a local copy, but something like

import Player from 'player.js'
let player = window.Twitch.Player || Player;

so if you have the latest player imported in your index.html (which you should do) it will always use the latest, if not, it uses the packaged one, that may be out of date.

So that would mean when Twitch updates the Player/Embed JS, your whole project breaks?

It would only break if the old library version is not supported/available anymore. I’m expecting that when a new version is released, the old one will still be supported for some time, but I see your point.

Whereas if you used the CDN version and wrapping the functions, it would mostly remain working?

This is only true if the interface of the library doesn’t change. If the new library version has a different interface, the typing files will still need to be manually updated.

I fully get your points and I know this is a disadvantage for this approach.

I’ll just expand a bit on my previous point. I think that in Angular, if you’re new to web development, it’s not the easiest thing to include a CDN JS script. Most people are used to npm install x and that’s it, so that’s why I thought having it this way would be more useful.

@WLG3R that’s a really nice solution that seems like the best of both worlds. I’ll update the Player class and release a new version.

Thanks for the feedback :slightly_smiling_face:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.