From 90f6336a9e6b4c4e6334c6be36226bae22ab2174 Mon Sep 17 00:00:00 2001 From: yonghyon Date: Mon, 24 Jun 2024 20:31:22 +0900 Subject: [PATCH] focus to panel if it's not preview video status changing case --- .../src/actions/actionTypes.js | 1 - .../src/actions/panelActions.js | 5 -- .../src/reducers/panelReducer.js | 55 +++++++++++++------ .../src/views/MainView/MainView.jsx | 6 +- 4 files changed, 40 insertions(+), 27 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/actionTypes.js b/com.twin.app.shoptime/src/actions/actionTypes.js index b13a0867..37475a47 100644 --- a/com.twin.app.shoptime/src/actions/actionTypes.js +++ b/com.twin.app.shoptime/src/actions/actionTypes.js @@ -3,7 +3,6 @@ export const types = { PUSH_PANEL: "PUSH_PANEL", POP_PANEL: "POP_PANEL", UPDATE_PANEL: "UPDATE_PANEL", - UPDATE_MODAL_STATUS: "UPDATE_MODAL_STATUS", RESET_PANELS: "RESET_PANELS", // device actions diff --git a/com.twin.app.shoptime/src/actions/panelActions.js b/com.twin.app.shoptime/src/actions/panelActions.js index ee6dba5d..54b2c5e5 100644 --- a/com.twin.app.shoptime/src/actions/panelActions.js +++ b/com.twin.app.shoptime/src/actions/panelActions.js @@ -23,11 +23,6 @@ export const updatePanel = (panelInfo) => ({ payload: panelInfo, }); -export const updateModalStatus = (status) => ({ - type: types.UPDATE_MODAL_STATUS, - payload: status, -}); - export const resetPanels = (panels) => ({ type: types.RESET_PANELS, payload: panels, diff --git a/com.twin.app.shoptime/src/reducers/panelReducer.js b/com.twin.app.shoptime/src/reducers/panelReducer.js index 27e1a71d..94aab56e 100644 --- a/com.twin.app.shoptime/src/reducers/panelReducer.js +++ b/com.twin.app.shoptime/src/reducers/panelReducer.js @@ -3,7 +3,7 @@ import { panel_names } from "../utils/Config"; const initialState = { panels: [], - isModalOpen: false, + lastPanelAction: "", //"", "push", "pop", "update", "reset", "previewPush", "previewPop", "previewUpdate" }; // last one will be on top @@ -47,28 +47,45 @@ export const panelsReducer = (state = initialState, action) => { } }); + let lastAction = 'push'; + if(action.payload.name === panel_names.PLAYER_PANEL){ + if(action.payload.panelInfo.modal){ + lastAction = 'previewPush'; + } + } return { ...state, panels: newState, + lastPanelAction: lastAction }; } - case types.POP_PANEL: + case types.POP_PANEL:{ + let lastAction = 'pop'; if (action.payload) { + if(state.lastPanelAction.indexOf('preview')=== 0 && action.payload === panel_names.PLAYER_PANEL){ + lastAction = 'previewPop'; + } return { ...state, panels: state.panels.filter((panel) => panel.name !== action.payload), + lastPanelAction: lastAction }; } else { + if(state.lastPanelAction.indexOf('preview')===0){ + lastAction = 'previewPop'; + } return { ...state, panels: state.panels.slice(0, state.panels.length - 1), + lastPanelAction: lastAction }; } - + } case types.UPDATE_PANEL: { let lastIndex = -1; + let lastAction = 'update'; // 배열의 끝에서부터 시작하여 조건에 맞는 마지막 인덱스 찾기 for (let i = state.panels.length - 1; i >= 0; i--) { if (state.panels[i].name === action.payload.name) { @@ -76,24 +93,26 @@ export const panelsReducer = (state = initialState, action) => { break; // 조건에 맞는 첫 번째 요소를 찾으면 루프 종료 } } + const newPanels = state.panels.map((panel, index) => + index === lastIndex + ? { + ...panel, + panelInfo: { ...panel.panelInfo, ...action.payload.panelInfo }, + } + : panel + ); + if(newPanels.length > 0){ + const lastPanel = newPanels[newPanels.length-1]; + if(lastPanel.name === panel_names.PLAYER_PANEL && lastPanel.panelInfo.modal){ + lastAction = 'previewUpdate'; + } + } return { ...state, - panels: state.panels.map((panel, index) => - index === lastIndex - ? { - ...panel, - panelInfo: { ...panel.panelInfo, ...action.payload.panelInfo }, - } - : panel - ), + panels: newPanels, + lastPanelAction: lastAction }; } - case types.UPDATE_MODAL_STATUS: - return { - ...state, - isModalOpen: action.payload, - }; - case types.RESET_PANELS: { const updatedPanels = action.payload ? action.payload.map((panel) => ({ @@ -105,7 +124,7 @@ export const panelsReducer = (state = initialState, action) => { return { ...state, panels: updatedPanels, - isModalOpen: false, + lastPanelAction: "reset", }; } diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx index ae5a7158..5c207e15 100644 --- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx +++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx @@ -89,6 +89,7 @@ export default function MainView({ className }) { const dispatch = useDispatch(); const mainIndex = useSelector((state) => state.appData.mainIndex); const panels = useSelector((state) => state.panels.panels); + const lastPanelAction = useSelector((state) => state.panels.lastPanelAction); const loadingComplete = useSelector((state) => state.common?.loadingComplete); const { popupVisible, activePopup } = useSelector( (state) => state.common.popup @@ -229,17 +230,16 @@ export default function MainView({ className }) { useEffect(() => { if (panels && panels.length > 0) { let panel = panels[panels.length - 1]; - let hasModalPlayer = false; if ( panels[panels.length - 1].name === Config.panel_names.PLAYER_PANEL && panels[panels.length - 1].panelInfo.modal ) { panel = panels[panels.length - 2]; - hasModalPlayer = true; } if (panel?.name) { setTimeout(() => { - if (!panel.panelInfo.focusedContainerId && !hasModalPlayer) { + // focus to panel if it's not preview video status changing case + if (!lastPanelAction || lastPanelAction.indexOf('preview') !== 0 ) { //do focus itself if has focusedContainerId Spotlight.focus(panel?.name); }