video mediaId

2024-07-29 10:50:04 +09:00
parent cf235fbaed
commit ade854d288
4 changed files with 185 additions and 78 deletions
--- a/com.twin.app.shoptime/src/hooks/useWhyDidYouUpdate.js
+++ b/com.twin.app.shoptime/src/hooks/useWhyDidYouUpdate.js
@@ -1,6 +1,28 @@
 import { useRef, useEffect } from "react";
-const useWhyDidYouUpdate = (name, props)  => {
+import { useSelector as useReduxSelector } from "react-redux";
+import { useState as useReactState } from "react";
+
+/**
+ *
+ * @param {*} name log name
+ * @param {*} props props object
+ *  const {USE_STATE, USE_SELECTOR}= useWhyDidYouUpdate("testPanel", {spotlightId, panelInfo});
+ * @returns
+ */
+const useWhyDidYouUpdate = (name, props) => {
+  return {
+    USE_STATE: (stateName, initialValue) => useReactState(initialValue),
+    USE_SELECTOR: (selectorName, selector, equalityFn) =>
+      useReduxSelector(selector, equalityFn),
+  };
+
+  // <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20>Ϸ<EFBFBD><CFB7><EFBFBD> <20><><EFBFBD>κ<EFBFBD> <20>ּ<EFBFBD>ó<EFBFBD><C3B3><EFBFBD>ϰ<EFBFBD> <20>Ʒ<EFBFBD><C6B7>κ<EFBFBD> <20>츮<EFBFBD><ECB8AE> <20><>.
+  // Effect<63><74> <20><><EFBFBD><EFBFBD> ó<><C3B3><EFBFBD><EFBFBD> <20>ȵǼ<C8B5> <20>ε<EFBFBD><CEB5><EFBFBD><EFBFBD>ϰ<EFBFBD>..
+  /*
  const previousProps = useRef(props);
+  useEffect(() => {
+    console.log("[why-did-you-update] created ", name, props);
+  }, []);

  useEffect(() => {
    if (previousProps.current) {
@@ -10,17 +32,53 @@ const useWhyDidYouUpdate = (name, props)  => {
        if (previousProps.current[key] !== props[key]) {
          changesObj[key] = {
            from: previousProps.current[key],
-            to: props[key]
+            to: props[key],
          };
        }
      });

      if (Object.keys(changesObj).length) {
-        console.log('[why-did-you-update]', name, changesObj);
+        console.log("[why-did-you-update]", name, changesObj);
      }
+      previousProps.current = props;
    }
+  }, [props, name]);

-    previousProps.current = props;
-  });
+  //const [count, setCount] = USE_STATE('count', 0);
+  const USE_STATE = (stateName, initialValue) => {
+    const [state, setState] = useReactState(initialValue);
+    const previousState = useRef(state);
+
+    useEffect(() => {
+      if (previousState.current !== state) {
+        console.log("[why-did-you-update]", `${name}.${stateName}`, {
+          from: previousState.current,
+          to: state,
+        });
+        previousState.current = state;
+      }
+    }, [state]);
+    return [state, setState];
+  };
+
+  // const user = USE_SELECTOR('user', state => state.user, equalityFn);
+  const USE_SELECTOR = (selectorName, selector, equalityFn) => {
+    const selectedState = useReduxSelector(selector, equalityFn);
+    const previousState = useRef(selectedState);
+
+    useEffect(() => {
+      if (previousState.current !== selectedState) {
+        console.log("[why-did-you-update]", `${name}.${selectorName}`, {
+          from: previousState.current,
+          to: selectedState,
+        });
+        previousState.current = selectedState;
+      }
+    }, [selectedState]);
+    return selectedState;
+  };
+  return { USE_STATE, USE_SELECTOR };
+  */
 };
-export default useWhyDidYouUpdate;
+
+export default useWhyDidYouUpdate;
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
@@ -63,8 +63,6 @@ import TCFV_3 from "./Type/TCFV_3/TCFV_3";
 import TCFV_4 from "./Type/TCFV_4/TCFV_4";
 import TCHH from "./Type/TCHH/TCHH";

-//import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
-
 const SpottableComponent = Spottable("button");

 const Container = SpotlightContainerDecorator(
@@ -138,19 +136,6 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
  const spotYoffsetRef = useRef(0);
  const oneLog = useRef(false);

-  /* for debugging
-  useWhyDidYouUpdate(spotlightId, {
-    //props
-    panelInfo, isOnTop, spotlightId,
-    //state
-    scrolling, popPatnrId, popCurationId, popEvntId, isCurationEvnt,components, osVersion, smsTpCode,
-    currentPage,
-    //reducer
-    themeCurationInfoData, themeCurationInfoDataRetCode, popupVisible, activePopup, userNumber,
-    smsRetCode, couponDownloadRetCode, webOSVersion
-  });
-  */
-
  const _onScroll = (e) => {
    spotYoffsetRef.current = e.scrollTop;
    const targetY = currentPageRef.current * window.innerHeight;
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -1,13 +1,7 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";

 import classNames from "classnames";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";

 import { Job } from "@enact/core/util";
 import Spotlight from "@enact/spotlight";
@@ -51,6 +45,7 @@ import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode";
 import css from "./PlayerPanel.module.less";
 import PlayerTabButton from "./PlayerTabContents/TabButton/PlayerTabButton";
 import TabContainer from "./PlayerTabContents/TabContaienr";
+import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";

 const Container = SpotlightContainerDecorator(
  { enterTo: "default-element", preserveld: true },
@@ -149,23 +144,49 @@ const PlayerPanel = ({
  ...props
 }) => {
  const dispatch = useDispatch();
+  const { USE_STATE, USE_SELECTOR } = useWhyDidYouUpdate(spotlightId, {
+    isTabActivated,
+    panelInfo,
+    isOnTop,
+    ...props,
+  });
+
  const videoPlayer = useRef(null);
-  const [playListInfo, setPlayListInfo] = useState("");
-  const [shopNowInfo, setShopNowInfo] = useState();
-  const [backupInitialIndex, setBackupInitialIndex] = useState(0);
-  const [modalStyle, setModalStyle] = useState({});
-  const [mediaId, setMediaId] = useState(null);
-  const [currentLiveTimeSeconds, setCurrentLiveTimeSeconds] = useState(1);
-  const [prevChannelIndex, setPrevChannelIndex] = useState(0);
-  const [sideContentsVisible, setSideContentsVisible] = useState(true);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [isInitialFocusOccurred, setIsInitialFocusOccurred] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(
+  const [playListInfo, setPlayListInfo] = USE_STATE("playListInfo", "");
+  const [shopNowInfo, setShopNowInfo] = USE_STATE("shopNowInfo");
+  const [backupInitialIndex, setBackupInitialIndex] = USE_STATE(
+    "backupInitialIndex",
+    0
+  );
+  const [modalStyle, setModalStyle] = USE_STATE("modalStyle", {});
+  const [mediaId, setMediaId] = USE_STATE("mediaId", null);
+  const [currentLiveTimeSeconds, setCurrentLiveTimeSeconds] = USE_STATE(
+    "currentLiveTimeSeconds",
+    1
+  );
+  const [prevChannelIndex, setPrevChannelIndex] = USE_STATE(
+    "prevChannelIndex",
+    0
+  );
+  const [sideContentsVisible, setSideContentsVisible] = USE_STATE(
+    "sideContentsVisible",
+    true
+  );
+  const [currentTime, setCurrentTime] = USE_STATE("currentTime", 0);
+  const [isInitialFocusOccurred, setIsInitialFocusOccurred] = USE_STATE(
+    "isInitialFocusOccurred",
+    false
+  );
+  const [selectedIndex, setSelectedIndex] = USE_STATE(
+    "selectedIndex",
    panelInfo.shptmBanrTpNm === "LIVE" ? null : 0
  );
-  const [isUpdate, setIsUpdate] = useState(false);
-  const [isSubtitleActive, setIsSubtitleActive] = useState(true);
-  const [logStatus, setLogStatus] = useState({
+  const [isUpdate, setIsUpdate] = USE_STATE("isUpdate", false);
+  const [isSubtitleActive, setIsSubtitleActive] = USE_STATE(
+    "isSubtitleActive",
+    true
+  );
+  const [logStatus, setLogStatus] = USE_STATE("logStatus", {
    isModalLiveLogReady: false,
    isFullLiveLogReady: false,
    isDetailLiveLogReady: false,
@@ -177,38 +198,71 @@ const PlayerPanel = ({
    isDetailMediaReady: false,
  });

-  const panels = useSelector((state) => state.panels.panels);
-  const chatData = useSelector((state) => state.play.chatData);
-  const showDetailInfo = useSelector((state) => state.main.showDetailInfo);
-  const productImageLength = useSelector(
+  const panels = USE_SELECTOR("panels", (state) => state.panels.panels);
+  const chatData = USE_SELECTOR("chatData", (state) => state.play.chatData);
+  const showDetailInfo = USE_SELECTOR(
+    "showDetailInfo",
+    (state) => state.main.showDetailInfo
+  );
+  const productImageLength = USE_SELECTOR(
+    "productImageLength",
    (state) => state.product.productImageLength
  );
-  const themeProductInfos = useSelector(
+  const themeProductInfos = USE_SELECTOR(
+    "themeProductInfos",
    (state) => state.home.themeCurationDetailInfoData
  );
-  const hotelInfos = useSelector(
+  const hotelInfos = USE_SELECTOR(
+    "hotelInfos",
    (state) => state.home.themeCurationHotelDetailData
  );
-  const captionEnable = useSelector(
+  const captionEnable = USE_SELECTOR(
+    "captionEnable",
    (state) => state.common.appStatus.captionEnable
  );
-  const featuredShowsInfos = useSelector(
+  const featuredShowsInfos = USE_SELECTOR(
+    "featuredShowsInfos",
    (state) => state.main.featuredShowsInfos
  );
-  const localRecentItems = useSelector(
+  const localRecentItems = USE_SELECTOR(
+    "localRecentItems",
    (state) => state.localSettings?.recentItems
  );
-  const httpHeader = useSelector((state) => state.common?.httpHeader);
-  const countryCode = useSelector((state) => state.common.httpHeader?.cntry_cd);
-  const liveChannelInfos = useSelector((state) => state.main.liveChannelInfos);
-  const showNowInfos = useSelector((state) => state.main.showNowInfo);
-  const liveShowInfos = useSelector((state) => state.main.liveShowInfos);
-  const vodSubtitleData = useSelector((state) => state.play.subTitleBlobs);
-  const broadcast = useSelector((state) => state.common.broadcast);
+  const httpHeader = USE_SELECTOR(
+    "httpHeader",
+    (state) => state.common?.httpHeader
+  );
+  const countryCode = USE_SELECTOR(
+    "countryCode",
+    (state) => state.common.httpHeader?.cntry_cd
+  );
+  const liveChannelInfos = USE_SELECTOR(
+    "liveChannelInfos",
+    (state) => state.main.liveChannelInfos
+  );
+  const showNowInfos = USE_SELECTOR(
+    "showNowInfos",
+    (state) => state.main.showNowInfo
+  );
+  const liveShowInfos = USE_SELECTOR(
+    "liveShowInfos",
+    (state) => state.main.liveShowInfos
+  );
+  const vodSubtitleData = USE_SELECTOR(
+    "vodSubtitleData",
+    (state) => state.play.subTitleBlobs
+  );
+  const broadcast = USE_SELECTOR(
+    "broadcast",
+    (state) => state.common.broadcast
+  );

-  const nowMenu = useSelector((state) => state.common.menu.nowMenu);
+  const nowMenu = USE_SELECTOR("nowMenu", (state) => state.common.menu.nowMenu);
  const nowMenuRef = usePrevious(nowMenu);
-  const entryMenu = useSelector((state) => state.common.menu.entryMenu);
+  const entryMenu = USE_SELECTOR(
+    "entryMenu",
+    (state) => state.common.menu.entryMenu
+  );
  const entryMenuRef = usePrevious(entryMenu);

  const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
@@ -986,6 +1040,10 @@ const PlayerPanel = ({
    if (currentSubtitleBlob || panelInfo?.shptmBanrTpNm === "MEDIA") {
      return;
    } else if (isYoutube) {
+      if (mediaId) {
+        dispatch(requestLiveSubtitle({ mediaId, enable: false }));
+        setMediaId(null);
+      }
      return;
      //do caption action on VideoPlayer(componentDidUpdate)
    } else {
@@ -996,7 +1054,6 @@ const PlayerPanel = ({
          dispatch(requestLiveSubtitle({ mediaId, enable: false }));
        }
      }
-      setMediaId(null);
    }
  }, [
    mediaId,
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
+++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
@@ -1,13 +1,7 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";

 import classNames from "classnames";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";

 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
@@ -35,6 +29,7 @@ import useScrollTo from "../../hooks/useScrollTo";
 import { LOG_MENU, panel_names } from "../../utils/Config";
 import { $L, scaleH } from "../../utils/helperMethods";
 import PopularShowIndicator from "./PopularShow/PopularShowIndicator";
+import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
 import css from "./TrendingNowPanel.module.less";

 const Container = SpotlightContainerDecorator(
@@ -49,10 +44,19 @@ const STRING_CONF = {
  POPULAR_SHOW: "POPULAR SHOW",
  BEST_SELLER: "BEST SELLER",
 };
-const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop }) => {
+const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
  const dispatch = useDispatch();
-  const topInfos = useSelector((state) => state.main.top20ShowData?.topInfos);
-  const bestSellerDatas = useSelector(
+  const { USE_SELECTOR, USE_STATE } = useWhyDidYouUpdate(spotlightId, {
+    panelInfo,
+    isOnTop,
+    ...rest,
+  });
+  const topInfos = USE_SELECTOR(
+    "topInfos",
+    (state) => state.main.top20ShowData?.topInfos
+  );
+  const bestSellerDatas = USE_SELECTOR(
+    "bestSellerDatas",
    (state) => state.product?.bestSellerData?.bestSeller
  );

@@ -67,12 +71,15 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop }) => {
    true
  );

-  const [targetId, setTargetId] = useState(null);
-  const [firstChk, setFirstChk] = useState(false);
-  const [showButton, setShowButton] = useState(true);
+  const [targetId, setTargetId] = USE_STATE("targetId", null);
+  const [firstChk, setFirstChk] = USE_STATE("firstChk", false);
+  const [showButton, setShowButton] = USE_STATE("showButton", true);
  const timerRef = useRef();
-  const { cursorVisible } = useSelector((state) => state.common.appStatus);
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { cursorVisible } = USE_SELECTOR(
+    "cursorVisible",
+    (state) => state.common.appStatus
+  );
+  const [selectedIndex, setSelectedIndex] = USE_STATE("selectedIndex", 0);
  const cbChangePageRef = useRef(null);
  const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId);