[SHOPTIME-3497] 미국 / Featured Brands / ontv4U 썸네일 포커싱에 무한로딩 시 이슈

변경 파일:
1. PlayerPanel.jsx
2. LiveChannelsVerticalContents.jsx

변경 사항:
1. Featured Brands에서 영상이 1개일 때, 전체화면으로 시청 중 비디오 에러가 발생할 경우에 비디오를 종료할 수 있는 로직 추가
2. startVideoPlayer 실행 시 "sourcePanel" 추가

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveChannelsVerticalContents.jsx

@@ -145,6 +145,7 @@ export default memo(function LiveChannelsVerticalContents({
           showId,
           showUrl,
           shptmBanrTpNm: "LIVE",
+          sourcePanel: panel_names.FEATURED_BRANDS_PANEL,
         })
       );
 

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

@@ -445,7 +445,7 @@ const PlayerPanel = ({
       isOnTop &&
       panelInfo?.modal
     ) {
-      // console.log("%c log LIVE, modal", "background: #cbedf8");
+      // log LIVE, modal
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -478,7 +478,7 @@ const PlayerPanel = ({
       isOnTop &&
       !panelInfo?.modal
     ) {
-      // console.log("%c log LIVE, full", "background: #67c3e1");
+      // log LIVE, full
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -511,7 +511,7 @@ const PlayerPanel = ({
       !isOnTop &&
       !panelInfo?.modal
     ) {
-      // console.log("%c log LIVE, item detail", "background: #00bfff");
+      // log LIVE, item detail
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -545,7 +545,7 @@ const PlayerPanel = ({
       isOnTop &&
       panelInfo?.modal
     ) {
-      // console.log("%c log VOD, modal", "background: #ebcbc0");
+      // log VOD, modal
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -578,7 +578,7 @@ const PlayerPanel = ({
       isOnTop &&
       !panelInfo?.modal
     ) {
-      // console.log("%c log VOD, Full", "background: #f59977");
+      // log VOD, Full
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -611,7 +611,7 @@ const PlayerPanel = ({
       !isOnTop &&
       !panelInfo?.modal
     ) {
-      // console.log("%c log VOD, item detail", "background: #ff6026");
+      // log VOD, item detail
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -644,7 +644,7 @@ const PlayerPanel = ({
       logStatus.isModalMediaLogReady &&
       panelInfo?.modal
     ) {
-      // console.log("%c log Media, modal", "background: #a6f8a5");
+      // log Media, modal
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -676,7 +676,7 @@ const PlayerPanel = ({
       logStatus.isFullMediaLogReady &&
       !panelInfo?.modal
     ) {
-      // console.log("%c log Media, Full", "background: #4eff4b");
+      // log Media, Full
       let watchStrtDt = formatGMTString(new Date());
 
       watchInterval.current = setInterval(() => {
@@ -1252,6 +1252,27 @@ const PlayerPanel = ({
     [currentLiveTimeSeconds, liveTotalTime]
   );
 
+  useEffect(() => {
+    // case: video error when the video is in fullscreen mode
+    if (
+      broadcast?.type === "videoError" &&
+      isOnTop &&
+      !panelInfo?.modal &&
+      panelInfo?.modalContainerId
+    ) {
+      // case: Featured Brands
+      if (panelInfo?.sourcePanel === panel_names.FEATURED_BRANDS_PANEL) {
+        dispatch(PanelActions.popPanel());
+      }
+    }
+  }, [
+    broadcast?.type,
+    isOnTop,
+    panelInfo?.modal,
+    panelInfo?.modalContainerId,
+    panelInfo?.sourcePanel,
+  ]);
+
   useEffect(() => {
     if (
       panelInfo.modal &&