[PlayerPanel] youtube overlayContents 안뜨는 현상 수정

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

@@ -1,102 +1,138 @@
+import React, { useCallback, useMemo, useRef } from "react";
+
 import ReactPlayer from "react-player";
-import handle from '@enact/core/handle';
-import React, { useCallback, useRef, useMemo } from "react";
 
-var handledMediaEventsMap =
+import handle from "@enact/core/handle";
-['onReady', 'onStart', 'onPlay', 'onProgress', 'onDuration', 'onPause', 'onBuffer', 'onBufferEnd', 'onSeek', 'onEnded', 'onError'];
 
-export default function TReactPlayer({mediaEventsMap=handledMediaEventsMap, videoRef, url, ...rest}) {
+var handledMediaEventsMap = [
+  "onReady",
+  "onStart",
+  "onPlay",
+  "onProgress",
+  "onDuration",
+  "onPause",
+  "onBuffer",
+  "onBufferEnd",
+  "onSeek",
+  "onEnded",
+  "onError",
+];
+
+export default function TReactPlayer({
+  mediaEventsMap = handledMediaEventsMap,
+  videoRef,
+  url,
+  overlayLoading,
+  setOverlayLoading,
+  ...rest
+}) {
   const playerRef = useRef(null);
 
-  const handleEvent = useCallback((type)=> (ev)=> {
+  const handleEvent = useCallback(
-    if(type === 'onReady'){
+    (type) => (ev) => {
-      if(videoRef ){
+      if (type === "onReady") {
-        const videoNode = playerRef.current.getInternalPlayer();
+        if (videoRef) {
-        videoRef(videoNode);
+          if (!overlayLoading) {
-        if(videoNode.tagName && !Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")){
+            setOverlayLoading(true);
-          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;
-              }
-            }
-          });
-        }else if(!Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")){//youtube
-          window.videoNode = videoNode;
-          videoNode.play = videoNode.playVideo;
-          videoNode.pause = videoNode.pauseVideo;
-          videoNode.seek = videoNode.seekTo;
-          Object.defineProperties(videoNode, {
-            'currentTime': {
-              get: function() {
-                return videoNode.getCurrentTime();
-              },
-              set: function(time){
-                videoNode.seekTo(time);
-              }
-            },
-            'duration':{
-              get: function() {
-                return videoNode.getDuration();
-              }
-            },
-            'paused':{
-              get: function() {
-                return videoNode.getPlayerState() !== 1;
-              }
-            },
-            'error': {
-              get: function() {
-                return !!videoNode?.playerInfo?.videoData?.errorCode;
-              }
-            },
-            'loading': {
-              get: function() {
-                return !videoNode?.playerInfo?.videoData?.isPlayable;
-                ; //todo
-              }
-            },
-            'proportionLoaded': {
-              get: function() {
-                return videoNode?.playerInfo?.videoBytesLoaded >= 1; //todo
-              }
-            },
-            'proportionPlayed': {
-              get: function() {
-                return videoNode.getCurrentTime() / videoNode.getDuration();
-              }
-            }
-          });
-        }
-      }
-      handle.forward('onLoadStart', {type, ev}, rest);
-    }
-    handle.forward('onUpdate', {type, ev}, rest);
-  },[videoRef]);
 
-  const handledMediaEvents = useMemo(()=>{
+          const videoNode = playerRef.current.getInternalPlayer();
+          videoRef(videoNode);
+          if (
+            videoNode.tagName &&
+            !Object.prototype.hasOwnProperty.call(videoNode, "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;
+                },
+              },
+            });
+          } else if (
+            !Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")
+          ) {
+            //youtube
+            window.videoNode = videoNode;
+            videoNode.play = videoNode.playVideo;
+            videoNode.pause = videoNode.pauseVideo;
+            videoNode.seek = videoNode.seekTo;
+            Object.defineProperties(videoNode, {
+              currentTime: {
+                get: function () {
+                  return videoNode.getCurrentTime();
+                },
+                set: function (time) {
+                  videoNode.seekTo(time);
+                },
+              },
+              duration: {
+                get: function () {
+                  return videoNode.getDuration();
+                },
+              },
+              paused: {
+                get: function () {
+                  return videoNode.getPlayerState() !== 1;
+                },
+              },
+              error: {
+                get: function () {
+                  return !!videoNode?.playerInfo?.videoData?.errorCode;
+                },
+              },
+              loading: {
+                get: function () {
+                  return !videoNode?.playerInfo?.videoData?.isPlayable; //todo
+                },
+              },
+              proportionLoaded: {
+                get: function () {
+                  return videoNode?.playerInfo?.videoBytesLoaded >= 1; //todo
+                },
+              },
+              proportionPlayed: {
+                get: function () {
+                  return videoNode.getCurrentTime() / videoNode.getDuration();
+                },
+              },
+            });
+          }
+        }
+        handle.forward("onLoadStart", { type, ev }, rest);
+      }
+      handle.forward("onUpdate", { type, ev }, rest);
+    },
+    [videoRef, overlayLoading]
+  );
+
+  const handledMediaEvents = useMemo(() => {
     const events = {};
-    for (let i=0; i< mediaEventsMap.length; i++) {
+    for (let i = 0; i < mediaEventsMap.length; i++) {
       const eventName = mediaEventsMap[i];
       events[eventName] = handleEvent(eventName);
     }
     return events;
-  },[handleEvent, mediaEventsMap]);
+  }, [handleEvent, mediaEventsMap]);
 
   return (
     <ReactPlayer
@@ -106,6 +142,6 @@ export default function TReactPlayer({mediaEventsMap=handledMediaEventsMap, vide
       {...handledMediaEvents}
       {...rest}
       playsinline // Add playsinline attribute here
-      />
+    />
   );
-}
+}

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

@@ -2110,6 +2110,7 @@ const VideoPlayerBase = class extends React.Component {
       orderPhnNo,
       captionEnable,
       overlayLoading,
+      setOverlayLoading,
       ...mediaProps
     } = this.props;
 
@@ -2222,7 +2223,11 @@ const VideoPlayerBase = class extends React.Component {
           (VideoComponent &&
             (((typeof VideoComponent === "function" ||
               typeof VideoComponent === "string") && (
-              <VideoComponent {...mediaProps} />
+              <VideoComponent
+                {...mediaProps}
+                overlayLoading={overlayLoading}
+                setOverlayLoading={setOverlayLoading}
+              />
             )) ||
               (React.isValidElement(VideoComponent) &&
                 React.cloneElement(VideoComponent, mediaProps)))) ||

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

@@ -1298,6 +1298,7 @@ const PlayerPanel = ({
             videoVerticalVisible={videoVerticalVisible}
             isSubtitleActive={isSubtitleActive}
             overlayLoading={overlayLoading}
+            setOverlayLoading={setOverlayLoading}
           >
             {typeof window === "object" && window.PalmSystem && (
               <source src={currentPlayingUrl} type="application/mpegurl" />