// Video Overlay Reducer - modal=true 상태에서 비디오 오버레이 제어 import { VIDEO_OVERLAY_ACTIONS } from '../actions/videoOverlayActions'; import { createDebugHelpers } from '../utils/debug'; // 디버그 헬퍼 설정 const DEBUG_MODE = false; const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE); export const initialState = { // Modal 상태 modal: true, // true(modal), false(fullscreen) // Overlay Controls 상태 controls: { visible: false, // controls 표시 여부 sliderVisible: false, // 슬라이더 표시 여부 titleVisible: true, // 제목 표시 여부 feedbackVisible: false, // 피드백 표시 여부 }, // AutoClose 타이머 제어 autoClose: { enabled: true, // autoClose 활성화 여부 timeout: 3000, // 타임아웃 시간 (ms) remainingTime: 0, // 남은 시간 (ms) active: false, // 타이머 실행 중 여부 }, // 비디오 정보 videoInfo: { url: '', title: '', thumbnailUrl: '', isYoutube: false, }, // 상태 변경 기록 (디버깅용) timestamp: null, lastAction: null, }; /** * Reducer handlers 맵 */ const handlers = { [VIDEO_OVERLAY_ACTIONS.SWITCH_TO_MODAL]: (state, action) => ({ ...state, modal: true, autoClose: { ...state.autoClose, active: false, // 모달 전환 시 타이머 중지 }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.SWITCH_TO_MODAL, }), [VIDEO_OVERLAY_ACTIONS.SWITCH_TO_FULLSCREEN]: (state, action) => ({ ...state, modal: false, autoClose: { ...state.autoClose, active: false, // 전체화면 전환 시 타이머 중지 }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.SWITCH_TO_FULLSCREEN, }), [VIDEO_OVERLAY_ACTIONS.SHOW_CONTROLS]: (state, action) => ({ ...state, controls: { ...state.controls, visible: true, sliderVisible: true, titleVisible: true, }, autoClose: { ...state.autoClose, active: true, // Controls 표시 시 autoClose 시작 }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.SHOW_CONTROLS, }), [VIDEO_OVERLAY_ACTIONS.HIDE_CONTROLS]: (state, action) => ({ ...state, controls: { ...state.controls, visible: false, sliderVisible: false, feedbackVisible: false, }, autoClose: { ...state.autoClose, active: false, // Controls 숨김 시 autoClose 중지 remainingTime: 0, }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.HIDE_CONTROLS, }), [VIDEO_OVERLAY_ACTIONS.TOGGLE_CONTROLS]: (state, action) => { const isCurrentlyVisible = state.controls.visible; const newState = { ...state, controls: { ...state.controls, visible: !isCurrentlyVisible, sliderVisible: !isCurrentlyVisible, titleVisible: !isCurrentlyVisible || state.controls.titleVisible, }, autoClose: { ...state.autoClose, active: !isCurrentlyVisible, // 표시 상태로 토글되면 autoClose 시작 }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.TOGGLE_CONTROLS, }; dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 상태 변화'); dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 이전 visible:', isCurrentlyVisible); dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 이후 visible:', newState.controls.visible); dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 전체 상태:', newState); return newState; }, [VIDEO_OVERLAY_ACTIONS.START_AUTO_CLOSE]: (state, action) => ({ ...state, autoClose: { enabled: true, timeout: action.payload.timeout || state.autoClose.timeout, remainingTime: action.payload.timeout || state.autoClose.timeout, active: true, }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.START_AUTO_CLOSE, }), [VIDEO_OVERLAY_ACTIONS.STOP_AUTO_CLOSE]: (state, action) => ({ ...state, autoClose: { ...state.autoClose, active: false, remainingTime: 0, }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.STOP_AUTO_CLOSE, }), [VIDEO_OVERLAY_ACTIONS.RESET_AUTO_CLOSE]: (state, action) => ({ ...state, autoClose: { ...state.autoClose, remainingTime: state.autoClose.timeout, active: true, }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.RESET_AUTO_CLOSE, }), [VIDEO_OVERLAY_ACTIONS.UPDATE_AUTO_CLOSE_TIMEOUT]: (state, action) => ({ ...state, autoClose: { ...state.autoClose, timeout: action.payload.timeout, remainingTime: action.payload.timeout, }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.UPDATE_AUTO_CLOSE_TIMEOUT, }), [VIDEO_OVERLAY_ACTIONS.SET_OVERLAY_VISIBILITY]: (state, action) => ({ ...state, controls: { ...state.controls, ...action.payload, }, timestamp: action.payload.timestamp, lastAction: VIDEO_OVERLAY_ACTIONS.SET_OVERLAY_VISIBILITY, }), }; /** * Main Reducer * @param {Object} state - 현재 상태 * @param {Object} action - Redux action * @returns {Object} 다음 상태 */ export const videoOverlayReducer = (state = initialState, action = {}) => { const handler = handlers[action.type]; if (handler) { return handler(state, action); } return state; };