[DetailPanel] media themeIndicator button focus

com.twin.app.shoptime/src/actions/actionTypes.js

@@ -107,7 +107,7 @@ export const types = {
   GET_PRODUCT_GROUP: "GET_PRODUCT_GROUP",
   GET_PRODUCT_OPTION: "GET_PRODUCT_OPTION",
   GET_PRODUCT_IMAGE_LENGTH: "GET_PRODUCT_IMAGE_LENGTH",
-
+  GET_VIDEO_INDECATOR_FOCUS: "GET_VIDEO_INDECATOR_FOCUS",
   // search actions
   GET_SEARCH: "GET_SEARCH",
   RESET_SEARCH: "RESET_SEARCH",

com.twin.app.shoptime/src/actions/productActions.js

@@ -99,3 +99,10 @@ export const getProductImageLength =
       payload: imageLength,
     });
   };
+
+export const getVideoIndicatorFocus = (focused) => (dispatch) => {
+  dispatch({
+    type: types.GET_VIDEO_INDECATOR_FOCUS,
+    payload: focused,
+  });
+};

com.twin.app.shoptime/src/reducers/productReducer.js

@@ -27,6 +27,11 @@ export const productReducer = (state = initialState, action) => {
         ...state,
         productImageLength: action.payload + 1,
       };
+    case types.GET_VIDEO_INDECATOR_FOCUS:
+      return {
+        ...state,
+        videoIndicatorFocus: action.payload,
+      };
     default:
       return state;
   }

com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicatorArrow.jsx

@@ -1,10 +1,12 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 
 import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";
 
+import { getVideoIndicatorFocus } from "../../../../actions/productActions";
 import css from "./ThemeIndicatorArrow.module.less";
 
 const SpottableComponent = Spottable("div");
@@ -14,6 +16,10 @@ export default function ThemeIndicatorArrow({
   themeProductInfo,
   imageLength,
 }) {
+  const dispatch = useDispatch();
+  const videoIndicatorFocus = useSelector(
+    (state) => state.product.videoIndicatorFocus
+  );
   const getProductMediaUrlStatus = useCallback(() => {
     return (
       themeProductInfo?.prdtMediaUrl && themeProductInfo?.prdtMediaUrl !== null
@@ -40,6 +46,14 @@ export default function ThemeIndicatorArrow({
     }
   };
 
+  const nextButtonOnFocus = useCallback(() => {
+    dispatch(getVideoIndicatorFocus(true));
+  }, [dispatch]);
+
+  const nextButtonOnBlur = useCallback(() => {
+    dispatch(getVideoIndicatorFocus(false));
+  }, [dispatch]);
+
   return (
     <>
       <div className={css.thumbnailIndicator}>
@@ -73,9 +87,12 @@ export default function ThemeIndicatorArrow({
               imageLength === (imageSelectedIndex || 1) && css.disable,
               !themeProductInfo?.prdtMediaUrl &&
                 imageLength - 1 === imageSelectedIndex &&
-                css.disable
+                css.disable,
+              videoIndicatorFocus && css.focused
             )}
             onClick={handleNextClick}
+            onFocus={nextButtonOnFocus}
+            onBlur={nextButtonOnBlur}
             spotlightDisabled={
               imageLength === (imageSelectedIndex || 1) ||
               (!themeProductInfo?.prdtMediaUrl &&

com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicatorArrow.module.less

@@ -36,11 +36,15 @@
     &:focus {
       background-image: url("../../../../../assets/images/btn/btn-next-thumb-foc.svg");
     }
+    &.focused {
+      background-image: url("../../../../../assets/images/btn/btn-next-thumb-foc.svg");
+    }
     &.disable {
       opacity: 0.1;
       background-image: url("../../../../../assets/images/btn/btn-next-thumb-nor.svg");
     }
   }
+
   //soldout
   > h3 {
     font-size: 36px;

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

@@ -374,10 +374,10 @@ const PlayerPanel = ({
 
   const currentLiveTimeSeconds = useMemo(() => {
     // if (playListInfo && panelInfo?.shptmBanrTpNm === "LIVE") {
-    //   // const today = new Date();
-    //   // const startDtMoment = new Date(playListInfo[selectedIndex].strtDt);
-    //   // const currentLiveTimeSeconds = Math.floor((today - startDtMoment) / 1000);
-    //   return videoPlayer.current?.getMediaState().currentTime;
+    //   const today = new Date();
+    //   const startDtMoment = new Date(playListInfo[selectedIndex].strtDt);
+    //   const currentLiveTimeSeconds = Math.floor((today - startDtMoment) / 1000);
+    //   return currentLiveTimeSeconds;
     // }
   }, [playListInfo, panelInfo, videoPlayer, liveTotalTime]);