Building error

[ghost]

My functional component looks something like this:

import React, {
    ForwardRefRenderFunction,
    useEffect,
    useImperativeHandle,
    useRef,
    useState,
} from "react";
import Plyr, { HTMLPlyrVideoElement } from "plyr-react";
...
const PlyrComponent: ForwardRefRenderFunction<IncrementedRef, Props> = (
    { url },
    compRef
) => {
    ...
    const ref = useRef<HTMLPlyrVideoElement>(null);
    ...
    const enterVideo = () => {
        ref.current?.plyr?.fullscreen.enter();
    };
    ...
    const plyrVideo =
        videoId && provider ? (
            <Plyr
          ❌➡️ ref={ref}
                source={{
                    type: "video",
                    sources: [
                        {
                            src: videoId,
                            provider: provider,
                        },
                    ],
                }}
                options={videoOptions}
            />
    ) : null;
    ...
};
export default React.forwardRef(PlyrComponent);

But after updating to v3.2.0 I get the following error on build at the marked line above:

Type error: Type 'MutableRefObject<HTMLPlyrVideoElement | undefined>' is not assignable to type 'Ref<APITypes> | undefined
'.
  Type 'MutableRefObject<HTMLPlyrVideoElement | undefined>' is not assignable to type 'RefObject<APITypes>'.
    Types of property 'current' are incompatible.
      Type 'HTMLPlyrVideoElement | undefined' is not assignable to type 'APITypes | null'.
        Type 'undefined' is not assignable to type 'APITypes | null'.

How can I fix this? I already tried several ways, but each time there is another issue...

[CO0Ki3]

I also faced a problem that I couldn't find a ref.currnet.plyr values. I tried to correct the error, but I didn't know why it came to null in any way. After hours of searching, I checked that version was updated in my node_modules, and when I downgrade to the 3.0.8 version which I used before, it worked well without bugs.

[realamirhe]

Sorry for the delay in response and sorry for the lack of documentation about this problem.

The Project has been updated to become and functional component. This makes the code more react-ish duo to the new version of React.

In new versions (3.0.2>=), the ref doesn't access the HTMLVideElement anymore, it accesses the wrapper around that component which comes with its own handlers type called (APITypes)
import { APITypes } from "plyr-react"

I made a simple replication of your source code here
feel free to test and give us feedback. @sam-flavour @CO0Ki3

At the same time, I guess, It is better to develop this new integration feature in a parallel route in some other versions such as next (alpha, beta, RC).

@chintan9, Would it be possible to downgrade the project source code to the class base version (the stable version before 3.0.2 which matches the documentation) and publish a new version?
Meanwhile, we can work on the next version release of the current code base e.g. version 3.0.2-alpha.1 till we get the backward compatible more optimized version of it.

Some Mentioned issue

• ref binding comment
• ref update phase for #525
• update the documentation

[chintan9]

@amirHossein-Ebrahimi We can release 3.0.2-alpha.1 for class based function only. I will create documentation for v3.0.2 or lower version to use 3.0.2-alpha.1.
Since downgrade might create more new issue for already upgraded users.
Once we fix all three issue will be releasing v3.3.

use this "plyr-react": "git+https://github.com/chintan9/plyr-react.git#alpha-v3.0.2",

#378 (comment)

[realamirhe]

@chintan9 that seems more Futuristic decision 👍🏻.
I added (and will add) the corresponding task to project board.
I would be free to work on all the mentioned issue soon, I'm also going to work on testing, both for react-aptor and plyr-react