reactPlayer sync

com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx

@@ -0,0 +1,64 @@
+import ReactPlayer from "react-player";
+import handle from '@enact/core/handle';
+import React, { useCallback, useRef, useMemo } from "react";
+
+var handledMediaEventsMap =
+['onReady', 'onStart', 'onPlay', 'onProgress', 'onDuration', 'onPause', 'onBuffer', 'onBufferEnd', 'onSeek', 'onEnded', 'onError'];
+
+export default function TReactPlayer({mediaEventsMap=handledMediaEventsMap, videoRef, ...rest}) {
+  const playerRef = useRef(null);
+
+  const handleEvent = useCallback((type)=> (ev)=> {
+    if(type === 'onReady'){
+      if(videoRef ){
+        const videoNode = playerRef.current.getInternalPlayer();
+        videoRef(videoNode);
+        if (!videoNode.hasOwnProperty('proportionPlayed')){
+          Object.defineProperties(videoNode, {
+            'error': {
+              get: function() {
+                return videoNode.networkState === videoNode.NETWORK_NO_SOURCE;
+              }
+            },
+            'loading': {
+              get: function() {
+                return videoNode.readyState < videoNode.HAVE_ENOUGH_DATA;
+              }
+            },
+            'proportionLoaded': {
+              get: function() {
+                return videoNode.buffered.length &&videoNode.buffered.end(videoNode.buffered.length - 1) / videoNode.duration;
+              }
+            },
+            'proportionPlayed': {
+              get: function() {
+                return videoNode.currentTime / videoNode.duration;
+              }
+            }
+          });
+        }
+      }
+      handle.forward('onLoadStart', {type, ev}, rest);
+    }
+    handle.forward('onUpdate', {type, ev}, rest);
+  },[videoRef]);
+
+  const handledMediaEvents = useMemo(()=>{
+    const events = {};
+    for (let i=0; i< mediaEventsMap.length; i++) {
+      const eventName = mediaEventsMap[i];
+      events[eventName] = handleEvent(eventName);
+    }
+    return events;
+  },[handleEvent, mediaEventsMap]);
+
+  return (
+    <ReactPlayer
+      ref={playerRef}
+      progressInterval={1000}
+      {...handledMediaEvents}
+      {...rest}
+      playsinline // Add playsinline attribute here
+      />
+  );
+}