[PlayerPanel] liveTime update

com.twin.app.shoptime/src/components/MediaPlayer/Times.js

@@ -1,15 +1,12 @@
-import React from 'react';
+import React from "react";
 
-import PropTypes from 'prop-types';
-import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
+import PropTypes from "prop-types";
+import onlyUpdateForKeys from "recompose/onlyUpdateForKeys";
 
-import kind from '@enact/core/kind';
+import kind from "@enact/core/kind";
 
-import css from './Times.module.less';
-import {
-  secondsToPeriod,
-  secondsToTime,
-} from './util';
+import css from "./Times.module.less";
+import { secondsToPeriod, secondsToTime } from "./util";
 
 /**
  * Sandstone-styled formatted time component.
@@ -107,9 +104,10 @@ const TimesBase = kind({
       <div {...rest}>
         {noCurrentTime ? null : (
           <time className={css.currentTime} dateTime={currentPeriod}>
-            {currentReadable} <span className={css.separator}>/</span>
+            {currentReadable}
           </time>
         )}
+        {noCurrentTime && <span className={css.separator}>/</span>}
 
         {noTotalTime ? null : (
           <time className={css.totalTime} dateTime={totalPeriod}>

com.twin.app.shoptime/src/components/MediaPlayer/Times.module.less

@@ -16,7 +16,6 @@
   letter-spacing: 1.2px;
 
   .currentTime {
-    // width: 225px;
     padding-right: 140px;
   }
   > * {
@@ -24,9 +23,6 @@
   }
 
   .separator {
-    position: absolute;
-    top: 0;
-    right: 116px;
   }
 
   .enact-locale-rtl({

com.twin.app.shoptime/src/components/MediaPlayer/util.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 // MediaPlayer utils.js
 //
@@ -59,10 +59,16 @@ const secondsToTime = (seconds, durfmt, config) => {
     if (includeHour && !parsedTime.hour) {
       return "00:" + timeString;
     } else {
-      return "00:" + timeString;
+      if (parsedTime.hour) {
+        if (parsedTime.hour >= 10) {
+          return timeString;
+        }
+        return "0" + timeString;
+      } else {
+        return "00:" + timeString;
+      }
     }
   }
-  // includeHour ? '00:00:00' : '00:00';
   return includeHour ? "00:00:00" : "00:00:00";
 };
 

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

@@ -1879,7 +1879,7 @@ const VideoPlayerBase = class extends React.Component {
   };
 
   handleSliderFocus = () => {
-    if(!this.video){
+    if (!this.video) {
       return;
     }
     const seconds = Math.floor(this.sliderKnobProportion * this.video.duration);
@@ -2073,6 +2073,7 @@ const VideoPlayerBase = class extends React.Component {
       sideContentsVisible,
       setSideContentsVisible,
       disclaimer,
+      liveTimeSeconds,
       ...mediaProps
     } = this.props;
 
@@ -2250,7 +2251,9 @@ const VideoPlayerBase = class extends React.Component {
                   {this.state.mediaSliderVisible ? (
                     <Times
                       noCurrentTime
-                      total={this.state.duration}
+                      total={
+                        type === "LIVE" ? liveTimeSeconds : this.state.duration
+                      }
                       formatter={durFmt}
                     />
                   ) : null}

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

@@ -149,12 +149,6 @@ const PlayerPanel = ({
     [showDetailInfo]
   );
 
-  const autoCloseVideoOverlay = useMemo(() => {
-    if (!sideContentsVisible && panelInfo.modal === false) {
-      return 10000;
-    }
-  }, [sideContentsVisible, panelInfo]);
-
   const mediainfoHandler = useCallback(
     (ev) => {
       const type = ev.type;
@@ -274,6 +268,8 @@ const PlayerPanel = ({
       default:
         break;
     }
+
+    console.log("#playListInfo", playListInfo);
   }, [
     panelInfo,
     showDetailInfo,
@@ -299,6 +295,17 @@ const PlayerPanel = ({
     }
   }, [panelInfo, showNowProduct, dispatch]);
 
+  const liveTimeSeconds = useMemo(() => {
+    if (playListInfo && panelInfo?.shptmBanrTpNm === "LIVE") {
+      const startDtMoment = new Date(playListInfo[selectedIndex].strtDt);
+      const endDtMoment = new Date(playListInfo[selectedIndex].endDt);
+
+      const liveTimeSeconds = Math.floor((endDtMoment - startDtMoment) / 1000);
+
+      return liveTimeSeconds;
+    }
+  }, [playListInfo, selectedIndex, panelInfo.shptmBanrTpNm]);
+
   useEffect(() => {
     if (!isActive) {
       unableToPlay.start(toastUnableToPlay);
@@ -463,8 +470,7 @@ const PlayerPanel = ({
             disabled={panelInfo.modal}
             onEnded={onClickBack}
             noAutoPlay={cannotPlay}
-            autoCloseTimeout={autoCloseVideoOverlay}
-            stopAutoCloseTimeout={sideContentsVisible}
+            autoCloseTimeout={100000}
             onBackButton={onClickBack}
             spotlightDisabled={sideContentsVisible || panelInfo.modal}
             onLoadedData={mediainfoHandler}
@@ -482,6 +488,7 @@ const PlayerPanel = ({
                 ? TReactPlayer
                 : Media
             }
+            liveTimeSeconds={liveTimeSeconds}
             // VideoOverlay props
             type={panelInfo?.shptmBanrTpNm}
             panelInfo={panelInfo}