video error

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

@@ -1378,31 +1378,41 @@ const VideoPlayerBase = class extends React.Component {
   //
   handleEvent = () => {
     const el = this.video;
+    const updatedState = {
+      // Standard media properties
+      currentTime: 0,
+      duration: 0,
+      paused: false,
+      playbackRate: 0,
+
+      // Non-standard state computed from properties
+      error: false,
+      loading: true,
+      // 지나온 바
+      proportionLoaded: false,
+      //벨류( 노브 )
+      proportionPlayed: 0,
+      sliderTooltipTime: 0,
+      // note: `el.loading && this.state.sourceUnavailable == false` is equivalent to `oncanplaythrough`
+      sourceUnavailable: false
+    };
     if (!el) {
       console.log("yhcho VideoPlayer no el ");
+      updatedState.error = true;
+      this.setState(updatedState);
       return;
     }
     const proportionPlayed = this.state.currentTime / this.state.duration || 0;
-    const updatedState = {
-      // Standard media properties
-      currentTime:
-        this.currentLiveTimeSeconds + el.currentTime || el.currentTime,
-      duration: this.liveTotalTime || el.duration,
-      paused: el.playbackRate !== 1 || el.paused,
-      playbackRate: el.playbackRate,
-
-      // Non-standard state computed from properties
-      error: el.error,
-      loading: el.loading,
-      // 지나온 바
-      proportionLoaded: el.proportionLoaded,
-      //벨류( 노브 )
-      proportionPlayed: proportionPlayed || el.proportionPlayed || 0,
-      sliderTooltipTime: el.currentTime,
-      // note: `el.loading && this.state.sourceUnavailable == false` is equivalent to `oncanplaythrough`
-      sourceUnavailable:
-        (el.loading && this.state.sourceUnavailable) || el.error,
-    };
+    updatedState.currentTime = this.currentLiveTimeSeconds + el.currentTime || el.currentTime;
+    updatedState.duration = this.liveTotalTime || el.duration;
+    updatedState.paused = el.playbackRate !== 1 || el.paused;
+    updatedState.playbackRate = el.playbackRate;
+    updatedState.error = el.error;
+    updatedState.loading = el.loading;
+    updatedState.proportionLoaded = el.proportionLoaded;
+    updatedState.proportionPlayed = proportionPlayed || el.proportionPlayed || 0;
+    updatedState.sliderTooltipTime = el.currentTime;
+    updatedState.sourceUnavailable = (el.loading && this.state.sourceUnavailable) || el.error;
 
     // If there's an error, we're obviously not loading, no matter what the readyState is.
     if (updatedState.error) updatedState.loading = false;

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

@@ -313,9 +313,6 @@ const PlayerPanel = ({
 
   useEffect(() => {
     //todo if(modal)
-    dispatch(
-      sendBroadCast({ type: "videoError", moreInfo: { reason: "Network" } })
-    );
     return () => {
       // 패널이 2개 존재할때만 popPanel 진행
       if (panelInfo.modal && !isOnTop) {
@@ -530,16 +527,28 @@ const PlayerPanel = ({
     (ev) => {
       const type = ev.type;
       if (type !== "timeupdate") {
-        console.log("mediainfoHandler....", type);
+        console.log("mediainfoHandler....", type, ev, videoPlayer.current?.getMediaState());
+      }
+      if(ev === 'hlsError' && isNaN(Number(videoPlayer.current?.getMediaState().playbackRate))){
+        dispatch(
+          sendBroadCast({ type: "videoError", moreInfo: { reason: "hlsError" } })
+        );
+        return;
       }
-
       switch (type) {
         case "timeupdate": {
           setCurrentTime(videoPlayer.current?.getMediaState()?.currentTime);
+          break;
+        }
+        case "error":{
+          dispatch(
+            sendBroadCast({ type: "videoError", moreInfo: { reason: videoPlayer.current?.getMediaState().error } })
+          );
+          break;
         }
       }
     },
-    [videoPlayer]
+    []
   );
   const liveTotalTime = useMemo(() => {
     if (playListInfo && panelInfo?.shptmBanrTpNm === "LIVE") {
@@ -799,10 +808,6 @@ const PlayerPanel = ({
     }
   }, [playListInfo, videoVerticalVisible]);
 
-  const onVideoError = () => {
-    console.log("#onVideoError");
-  };
-
   useEffect(() => {
     return () => {
       dispatch(clearShopNowInfo());
@@ -811,6 +816,10 @@ const PlayerPanel = ({
     };
   }, []);
 
+  const onEnded = useCallback((e)=>{
+    onClickBack(e, true);
+  },[onClickBack]);
+
   return (
     <TPanel
       isTabActivated={false}
@@ -830,10 +839,9 @@ const PlayerPanel = ({
       >
         {isReadyToPlay && (
           <VideoPlayer
-            onError={onVideoError}
             setApiProvider={getPlayer}
             disabled={panelInfo.modal}
-            onEnded={(e) => onClickBack(e, true)}
+            onEnded={onEnded}
             noAutoPlay={cannotPlay}
             autoCloseTimeout={100000}
             onBackButton={onClickBack}
@@ -845,7 +853,11 @@ const PlayerPanel = ({
             src={currentPlayingUrl}
             style={panelInfo.modal ? modalStyle : {}}
             modalClassName={panelInfo.modal && panelInfo.modalClassName}
+            onError={mediainfoHandler}
             onTimeUpdate={mediainfoHandler}
+            onLoadedData={mediainfoHandler}
+            onLoadedMetadata={mediainfoHandler}
+            onDurationChange={mediainfoHandler}
             reactPlayerConfig={reactPlayerSubtitleConfig}
             thumbnailUrl={playListInfo[selectedIndex]?.thumbnailUrl}
             videoComponent={