[PlayerPanel] videoOverlay 4way && onClick lastFocused

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

@@ -782,7 +782,7 @@ const VideoPlayerBase = class extends React.Component {
       playbackRate: 1,
       titleOffsetHeight: 0,
       bottomOffsetHeight: 0,
-
+      lastFocusedTarget: "",
       // Non-standard state computed from properties
       bottomControlsRendered: false,
       feedbackAction: "idle",
@@ -878,7 +878,6 @@ const VideoPlayerBase = class extends React.Component {
     ) {
       this.floatingLayerController.notify({ action: "closeAll" });
     }
-
     if (this.props.spotlightId !== prevProps.spotlightId) {
       this.mediaControlsSpotlightId = this.props.spotlightId + "_mediaControls";
     }
@@ -1107,8 +1106,8 @@ const VideoPlayerBase = class extends React.Component {
       return;
     }
 
-    this.startDelayedFeedbackHide();
-    this.startDelayedTitleHide();
+    // this.startDelayedFeedbackHide();
+    // this.startDelayedTitleHide();
 
     this.setState(({ announce }) => {
       if (announce === AnnounceState.READY) {
@@ -1122,7 +1121,7 @@ const VideoPlayerBase = class extends React.Component {
       return {
         announce,
         bottomControlsRendered: true,
-        feedbackAction: "idle",
+        // feedbackAction: "idle",
         feedbackVisible: true,
         mediaControlsVisible: true,
         mediaSliderVisible: true,
@@ -1140,6 +1139,18 @@ const VideoPlayerBase = class extends React.Component {
    * @public
    */
   hideControls = () => {
+    if (this.state.mediaControlsVisible) {
+      const current = Spotlight.getCurrent();
+
+      if (current) {
+        const lastFocusedTarget = current.getAttribute("data-spotlight-id");
+
+        if (lastFocusedTarget !== this.state.lastFocusedTarget) {
+          this.setState({ lastFocusedTarget: lastFocusedTarget });
+        }
+      }
+    }
+
     this.stopDelayedFeedbackHide();
     this.stopDelayedMiniFeedbackHide();
     this.stopDelayedTitleHide();
@@ -1452,7 +1463,7 @@ const VideoPlayerBase = class extends React.Component {
       duration: 0,
       paused: false,
       playbackRate: 0,
-
+      //  lastFocusedTarget: "",
       // Non-standard state computed from properties
       error: false,
       loading: true,
@@ -2251,6 +2262,20 @@ const VideoPlayerBase = class extends React.Component {
       }
     }
 
+    const onSpotlightFocus = () => {
+      this.showControls();
+
+      if (this.state.lastFocusedTarget) {
+        setTimeout(() => {
+          Spotlight.focus(this.state.lastFocusedTarget);
+        });
+      } else {
+        setTimeout(() => {
+          Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON);
+        });
+      }
+    };
+
     return (
       <RootContainer
         className={classNames(
@@ -2448,9 +2473,9 @@ const VideoPlayerBase = class extends React.Component {
                       backgroundProgress={this.state.proportionLoaded}
                       disabled={disabled || this.state.sourceUnavailable}
                       forcePressed={this.state.slider5WayPressed}
-                      onBlur={this.handleSliderBlur}
+                      //  onBlur={this.handleSliderBlur}
                       onChange={this.onSliderChange}
-                      onFocus={this.handleSliderFocus}
+                      // onFocus={this.handleSliderFocus}
                       onKeyDown={this.handleSliderKeyDown}
                       onKnobMove={this.handleKnobMove}
                       spotlightId={SpotlightIds.PLAYER_SLIDER}
@@ -2492,15 +2517,15 @@ const VideoPlayerBase = class extends React.Component {
           </div>
         ) : null}
         <SpottableDiv
-          // This captures spotlight focus for use with 5-way.
-          // It's non-visible but lives at the top of the VideoPlayer.
           className={css.controlsHandleAbove}
           holdConfig={controlsHandleAboveHoldConfig}
           onDown={this.handleControlsHandleAboveDown}
-          // onHoldPulse={this.handleControlsHandleAboveHoldPulse}
-          //  onKeyDown={this.handleControlsHandleAboveKeyDown}
           onKeyUp={this.handleControlsHandleAboveKeyUp}
-          onSpotlightDown={this.showControls}
+          onSpotlightDown={onSpotlightFocus}
+          onSpotlightUp={onSpotlightFocus}
+          onSpotlightRight={onSpotlightFocus}
+          onSpotlightLeft={onSpotlightFocus}
+          onClick={onSpotlightFocus}
           selectionKeys={controlsHandleAboveSelectionKeys}
           spotlightDisabled={
             this.state.mediaControlsVisible || spotlightDisabled
@@ -2580,6 +2605,7 @@ const VideoPlayer = ApiDecorator(
   },
   I18nContextDecorator(
     { localeProp: "locale" },
+
     Slottable(
       {
         slots: [

com.twin.app.shoptime/src/utils/SpotlightIds.js

@@ -29,6 +29,7 @@ export const SpotlightIds = {
   PLAYER_SKIPINTRO: "skipintro",
   PLAYER_TITLE_LAYER: "playerTitleLayer",
   PLAYER_SLIDER: "playerslider",
+  PLAYER_TAB_BUTTON: "playerTabArrow",
   LIST_PLAYER: "list_player",
   LIST_PLAYER2: "list_player2",
 

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

@@ -80,7 +80,7 @@ export default function PlayerOverlayContents({
   const onSpotlightMoveTabButton = (e) => {
     e.stopPropagation();
     e.preventDefault();
-    Spotlight.focus("player-tab-arrow");
+    Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON);
   };
 
   const onSpotlightMoveMediaButton = (e) => {

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

@@ -1013,7 +1013,7 @@ const PlayerPanel = ({
     }
     // 화살표버튼 포커스
     if (!panelInfo.modal && !videoVerticalVisible) {
-      Spotlight.focus("player-tab-arrow");
+      Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON);
     }
 
     //비디오 진입시 포커스
@@ -1249,7 +1249,6 @@ const PlayerPanel = ({
   );
 
   useEffect(() => {
-
     if (
       panelInfo.modal &&
       panelInfo.modalContainerId &&

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.jsx

@@ -79,7 +79,7 @@ export default function PlayerTabButton({
       )}
     >
       <SpottableComponent
-        spotlightId={"player-tab-arrow"}
+        spotlightId="playerTabArrow"
         onClick={handleTabOnClick}
         onSpotlightLeft={_onSpotlightLeft}
         onSpotlightUp={onSpotlightUp}