rewrite Plyr.js component with useRef

src/components/Layout/PlyrJS/index.tsx

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import { usePlyr } from 'plyr-react';
+
 import style from './PlyrJS.module.scss'
 
 import { VideoData } from '@/meta/data';
@@ -16,19 +18,28 @@ interface Props {
 
 const PlyrJS: React.FC<Props> = (props) => {
 
-
     const PlyrComponent = React.useMemo(() => {
-        return dynamic(() => import("plyr-react"), { ssr: false });
+        return dynamic(() => import("plyr-react").then(() => {
+            return React.forwardRef((props, ref) => {
+                //@ts-ignore
+                const { source, options = null, ...rest } = props
+                //@ts-ignore
+                const raptorRef = usePlyr(ref, {
+                    source,
+                    options,
+                })
+                return <video ref={raptorRef} className="plyr-react plyr" {...rest} />
+            })
+        }), { ssr: false });
     }, []);
 
-    //   const Plyr = dynamic(() => import("plyr-react"), { ssr: false });
-
     const { data } = props;
 
     const plyrProps = {
         source: { type: 'video', sources: data.srcSet }, // https://github.com/sampotts/plyr#the-source-setter
         options: {
             controls: [
+                'play-large',
                 'play', // Play/pause playback
                 'progress', // The progress bar and scrubber for playback and buffering
                 'current-time', // The current time of playback
@@ -48,6 +59,7 @@ const PlyrJS: React.FC<Props> = (props) => {
             <PlyrComponent {...plyrProps} />
         </div>
     );
+
 };
 
 export default PlyrJS;