Plyr: TypeScript Definitions (typings)

[JoshuaNovak919]

Anyone want to publish a typings file for Plyr for use in Angular2 with Typescript?

[sampotts]

Sorry, not done much with Angular so I'll open this one up for help...

[tdaines]

I created a plyr.d.ts here: https://github.com/tdaines/plyr/blob/296-typescript-definitions/plyr.d.ts

I'm not a typescript expert, but I think it should be sufficient.

[arLevi]

any example on how to use it in Angular ?

[wagich]

I've created a definition file for version 3 of Plyr, see https://gist.github.com/wagich/e9a4e7cade3e8e9363e718ae62299371. Parts are based on @tdaines work, the rest was built from the documentation.

I'm not too sure if I got all nuances of the API but it should be reasonably complete.

[friday]

Looks great @wagich!

I would encourage you to create a PR for this, but I'm not sure it's something we can maintain. dtslint should work to some extent to ensure not breaking the definitions, but it doesn't seem like a good option (seems to be based on tests, that have to be maintained in themselves if I read the readme right).

Perhaps unmaintained typings are better than no typings though?

I would be in favor of switching to Typescript eventually, but besides the work needed I don't know if @sampotts is.

[sampotts]

I would be in favor of switching to Typescript eventually, but besides the work needed I don't know if @sampotts is.

I've nothing against it. I've only heard good things!

[tdaines]

Nice work @wagich. You should contribute this to https://github.com/DefinitelyTyped/DefinitelyTyped

[axis80]

@wagich Would it be possible for you to give some pointers on how to use Plyr with Angular? I've added your definitions file to my project, but I'm not really sure how to invoke Plyr. I'd be grateful for any direction, no matter how small.

[wagich]

@axis80 I've never used angular, but the high-level idea is that you initialize Plyr in some sort of _mounted-in-dom_ event/callback.

In this method you would then either grab a reference to the existing DOM video element/embed wrapper div or create the neccessary DOM structure, then initialize Plyr as described in https://github.com/sampotts/plyr#javascript-1.

Be aware that Plyr changes the DOM, so you will need some kind of mechanism to either protect this part of the DOM from being interfered with by angular or you'll need to recreate Plyr every time (preferably the former, because performance).

[m-te]

@axis80 This worked for me
npm i plyr
then in your angular.json(for Angular6, or angulai-cli.json I think for previous versions)
"styles": [
"src/styles.css",
"node_modules/plyr/src/sass/plyr.scss",
],

In scripts of same file
"scripts": [
"node_modules/plyr/src/js/plyr.js",
"node_modules/hls.js/dist/hls.min.js" <-- (Include this for now for streaming m3u8 videos, and also install hls from npm)
]

In your app.ts file import it like
import * as plyr from 'plyr';

Then to simply use it for html5 videos, put something like this in your template(https://codepen.io/pen?template=bKeqpr) taken from the docs provided codepen

but add a reference you can late pass to plyr in the video tag like

In your .ts obtain it using @Viewchild()

then pass it to the plyr constructor in ngOnInit() or ngAfterViewInit() like
public player;
this.player = new plyr(this.videoDiv.nativeElement, { captions: { active: true } }); -->(config options are optional, the {})

Once that is done plyr will initialise and it should be working by then,

In case you want to use it with youtube,

use this in template(https://codepen.io/pen?template=GGqbbJ) again from docs

but add a reference, take it with @Viewchild and pass it like
this.ytPlayer = new plyr(this.youtubePlyr.nativeElement);

To listen to events do,
this.ytPlayer.on('stateChange', () => { -->onStateChange can be any event
//some code here
});

For streaming m3u8, install hls.js
npm i hls.js

add the hls script
"node_modules/hls.js/dist/hls.min.js"

then include hls in your import like
import * as hls from 'hls.js';

then in your template put(https://codepen.io/anon/pen/rqyKqE) - docs
and @Viewchild
and in your .ts file after initialising plyr also initialise hls() like

public hlsq;
this.hlsq = new hls();

After initialising plyr, use hls to loadSource ()
this.hlsPlayer = new plyr(this.hlsPlayerq.nativeElement);
"Your url"
hlsq.loadSource('https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8');
hlsq.attachMedia(this.hlsPlayerq.nativeElement);

and it should work

You can use player.on('event', () => {
//callback
})

to listen to events for youtube, simple video, or stream
and get vars like
player.duration, player.currentTime etc

this way didn't include any typings file
I tried putting plyr.d.ts provided above in plyr folder and plyr/src/js folder but even after removing and installing plyr again the above way seem to work, also didn't include any exports in a created typings.d.ts file

I tried creating a stackblitz with above but couldn't succeed

[zerocewl]

@m-te
Thx for your description.
I think this stackblitz should work https://stackblitz.com/edit/angular-plyr with some changes to a local working copy...

use:
var Plyr = require("plyr");
instead of
import * as Plyr from 'plyr';
because stackblitz seems not to load scripts in angular.json.

Crossorigin is disabled because of some CORS error while loading the vid via stackblitz.

[smnbbrv]

Hi folks,

for those who is interested, I wrote a small Angular plugin https://github.com/smnbbrv/ngx-plyr . Any contribution / advises / requests are welcome there.

Probably I will find some time to prepare a PR to definitelytyped (do not promise that though)