reactPlayer sync

com.twin.app.shoptime/src/components/TVideoPlayer/TVideoPlayer.jsx

@@ -71,37 +71,16 @@ export default function TVideoPlayer({
 
   return (
     <div className={classNames(css.videoBox, className)} onClick={_onClick}>
-      {typeof window === window.PalmSystem ? (
         <VideoPlayer
           disabled={true}
           noAutoPlay={!videoIsPlaying}
           spotlightDisabled={true}
+          src={showUrl}
           // onLoadedData={mediainfoHandler}
           // onDurationChange={mediainfoHandler}
         >
           <source src={showUrl} type="application/mpegurl" />
         </VideoPlayer>
-      ) : (
-        <>
-          {thumbNail && videoReady === false && showUrl !== null && (
-            <CustomImage src={thumbNail} className={css.thumbNail} />
-          )}
-          <ReactPlayer
-            ref={playerRef}
-            className={css.videoWrap}
-            // onError={handleError}
-            onReady={() => {
-              setVideoReady(true);
-            }}
-            // onEnded={handleRestart}
-            playing={videoIsPlaying && !videoError}
-            url={showUrl}
-            width={width}
-            height={height}
-            playsinline // Add playsinline attribute here
-          />
-        </>
-      )}
     </div>
   );
 }

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
+      />
+  );
+}

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js

@@ -79,6 +79,7 @@ import MediaTitle from './MediaTitle';
 import Overlay from './Overlay';
 import Video from './Video';
 import css from './VideoPlayer.module.less';
+import TReactPlayer from './TReactPlayer';
 
 const isEnter = is("enter");
 const isLeft = is("left");
@@ -731,6 +732,7 @@ const VideoPlayerBase = class extends React.Component {
       introTime: PropTypes.number,
       onClickSkipIntro: PropTypes.func,
       onIntroDisabled: PropTypes.func,
+      src: PropTypes.string, //for ReactPlayer
     };
 
   static contextType = FloatingLayerContext;
@@ -751,7 +753,10 @@ const VideoPlayerBase = class extends React.Component {
     },
     spotlightId: "videoPlayer",
     titleHideDelay: 5000,
-    videoComponent: Media,
+    //ReactPlayer
+    videoComponent: (typeof window === "object" && !window.PalmSystem) ? TReactPlayer: Media,
+    width: "100%", //for ReactPlayer
+    height: "100%", //for ReactPlayer
   };
 
   constructor(props) {
@@ -1382,6 +1387,9 @@ const VideoPlayerBase = class extends React.Component {
   //
   handleEvent = () => {
     const el = this.video;
+    if(!el){
+      return;
+    }
     const updatedState = {
       // Standard media properties
       currentTime: el.currentTime,
@@ -1865,7 +1873,7 @@ const VideoPlayerBase = class extends React.Component {
 
     // prevent announcing repeatedly when the knob is detached from the progress.
     // TODO: fix Slider to not send onKnobMove when the knob hasn't, in fact, moved
-    if (this.sliderKnobProportion !== ev.proportion) {
+    if (this.sliderKnobProportion !== ev.proportion && this.video) {
       this.sliderKnobProportion = ev.proportion;
       const seconds = Math.floor(
         this.sliderKnobProportion * this.video.duration
@@ -2063,7 +2071,9 @@ const VideoPlayerBase = class extends React.Component {
       panelInfo,
       selectedIndex,
       setSelectedIndex,
-
+      src,
+      width,
+      height,
       ...mediaProps
     } = this.props;
 
@@ -2102,6 +2112,15 @@ const VideoPlayerBase = class extends React.Component {
     mediaProps.onUpdate = this.handleEvent;
     mediaProps.ref = this.setVideoRef;
 
+    //yhcho ReactPlayer
+    if(typeof window === "object" && !window.PalmSystem){
+      mediaProps.url = src;
+      mediaProps.playing = !noAutoPlay;
+      mediaProps.width= width;
+      mediaProps.height= height;
+      mediaProps.videoRef = this.setVideoRef;
+    }
+
     const controlsAriaProps = this.getControlsAriaProps();
 
     let proportionSelection = selection;
@@ -2399,27 +2418,7 @@ const VideoPlayer = ApiDecorator(
       "toggleControls",
     ],
   },
-  Config.ADMIN_PREVIEW_MODE
-    ? Slottable(
-        {
-          slots: [
-            "infoComponents",
-            "backButton",
-            "promotionTitle",
-            "cameraSettingsButton",
-            "mediaControlsComponent",
-            "source",
-            "track",
-            "thumbnailComponent",
-            "videoComponent",
-          ],
-        },
-        FloatingLayerDecorator(
-          { floatLayerId: "videoPlayerFloatingLayer" },
-          Skinnable(VideoPlayerBase)
-        )
-      )
-    : I18nContextDecorator(
+ I18nContextDecorator(
         { localeProp: "locale" },
         Slottable(
           {

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

@@ -256,7 +256,6 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
 
   return (
     <TPanel isTabActivated={false} {...props} className={css.videoContainer}>
-      {typeof window === "object" && window.PalmSystem ? (
         <VideoPlayer
           // setApiProvider={getPlayer}
           onEnded={onClickBack} // 플레이어가 끝날때 호출
@@ -268,6 +267,7 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
           setSelectedIndex={setSelectedIndex} // 선택한 인덱스 Set
           selectedIndex={selectedIndex} // 선택한 인덱스
           spotlightDisabled={sideOpen}
+          src={playListInfo && playListInfo[selectedIndex]?.showUrl}
         >
           <source
             src={playListInfo && playListInfo[selectedIndex]?.showUrl}
@@ -296,18 +296,6 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
           type="text/vtt"
         /> */}
         </VideoPlayer>
-      ) : (
-        <ReactPlayer
-          className={""}
-          url={playListInfo && playListInfo[selectedIndex]?.showUrl} // 플레이어 url
-          playing={true} // 자동 재생 on = true  off = false
-          muted={false} // 자동 재생 on = true  off = false
-          width={"1920"} // 플레이어 크기 (가로)
-          height={"1080"} // 플레이어 크기 (세로)
-          controls={true} // 플레이어 컨트롤 노출 여부
-          onEnded={onClickBack} // 플레이어가 끝날때 호출
-        />
-      )}{" "}
       {/* 리액트 플레이어 테스트용 */}
       {typeof window === "object" && window.PalmSystem ? (
         ""