Convert project to TypeScript

[iwatakeshi]

Hi 👋 ,

I was about to create a draft PR but I've noticed you've merged my fork into a new branch. I've created this issue to give you a heads up and also a run down of the changes.

Heads up:

I'm waiting on a new release from plyr since I fixed a type issue yesterday. Also, I'm still testing this is in a Next.js project so I'll let you know if everything works on my end.

The rundown:

• The project is written in Typescript and uses the types from the official repo. Fixes Typescript support #201
• plyr-react was not Next.js friendly since it imported the css styles within the component and that is no longer supported. Users will need to import the styles manually. Fixes Unable to Import in NextJS -> Bundled CSS #162
• The component separates the source prop from options prop since original Options type does not include source.
• Configuration files are simplified. It's best to keep things simple but feel free to change it.

Thank you.

Update

Plyr seems to work correctly with the latest version of Next.js.

[issue-label-bot]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.80. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[chintan9]

I will update on review tomorrow

[iwatakeshi]

@chintan9 Sounds good

[ThreshHNS]

Any updates?

[iwatakeshi]

The PR has already been merged. I'm not sure if @chintan9 wants to make the changes I've mentioned here, but if he does then that's all that needs to be done...I think.

@chintan9 You could publish the package as alpha and see if things work, even though we're waiting on a new Plyr release. You'll just have to add to the docs that the types for Source is incorrect so the developer needs to use any to remove the warnings:

<Plyr source={source as any} />

Maybe the one thing that comes to mind is that Plyr (the package) is globally available and therefore shadows the component's type def (Plyr), I'm thinking we should add a new type def (plyr.d.ts or react-plyr.d.ts) that looks something like this:

import Plyr from '...'

declare module "plyr-react" {
  export Plyr
}

Then, just change the types property in package.json to point to that file... I think.

I'll leave it up to you to decide.

[chintan9]

You can raise PR

[chintan9]

@iwatakeshi Done