139 lines
3.8 KiB
TypeScript
139 lines
3.8 KiB
TypeScript
import { useState, useCallback, useEffect } from 'react';
|
|
import { VideoPlan, Scene } from '../services/youtubeApi';
|
|
import { Resolution, DurationType, VideoType, YouTubeContentLanguage } from '../components/YouTubeCreator/constants';
|
|
|
|
export interface YouTubeCreatorState {
|
|
// Step 1: Plan inputs
|
|
userIdea: string;
|
|
durationType: DurationType;
|
|
videoType: VideoType | '';
|
|
targetAudience: string;
|
|
videoGoal: string;
|
|
brandStyle: string;
|
|
referenceImage: string;
|
|
avatarUrl: string | null;
|
|
// Step 1: Language (used for multilingual audio now; later for multilingual planning/scenes)
|
|
language: YouTubeContentLanguage;
|
|
// WaveSpeed Minimax parameter `language_boost`
|
|
languageBoost: string;
|
|
// Note: avatarPreview is not persisted (can be blob URL) - regenerated from avatarUrl
|
|
|
|
// Step 1: Plan output
|
|
videoPlan: VideoPlan | null;
|
|
|
|
// Step 2: Scenes
|
|
scenes: Scene[];
|
|
editingSceneId: number | null;
|
|
editedScene: Partial<Scene> | null;
|
|
|
|
// Step 3: Render
|
|
renderTaskId: string | null;
|
|
renderStatus: any;
|
|
renderProgress: number;
|
|
resolution: Resolution;
|
|
combineScenes: boolean;
|
|
|
|
// UI state
|
|
activeStep: number;
|
|
|
|
// Timestamps
|
|
createdAt?: string;
|
|
updatedAt?: string;
|
|
}
|
|
|
|
const DEFAULT_STATE: YouTubeCreatorState = {
|
|
userIdea: '',
|
|
durationType: 'medium',
|
|
videoType: '',
|
|
targetAudience: '',
|
|
videoGoal: '',
|
|
brandStyle: '',
|
|
referenceImage: '',
|
|
avatarUrl: null,
|
|
language: 'en',
|
|
languageBoost: 'English',
|
|
videoPlan: null,
|
|
scenes: [],
|
|
editingSceneId: null,
|
|
editedScene: null,
|
|
renderTaskId: null,
|
|
renderStatus: null,
|
|
renderProgress: 0,
|
|
resolution: '480p',
|
|
combineScenes: true,
|
|
activeStep: 0,
|
|
};
|
|
|
|
const STORAGE_KEY = 'youtube_creator_state';
|
|
|
|
export const useYouTubeCreatorState = () => {
|
|
const [state, setState] = useState<YouTubeCreatorState>(() => {
|
|
// Initialize from localStorage if available
|
|
try {
|
|
const saved = localStorage.getItem(STORAGE_KEY);
|
|
if (saved) {
|
|
const parsed = JSON.parse(saved);
|
|
|
|
// Restore state with defaults for any missing fields
|
|
const restoredState: YouTubeCreatorState = {
|
|
...DEFAULT_STATE,
|
|
...parsed,
|
|
// Ensure arrays are arrays (not null/undefined)
|
|
scenes: Array.isArray(parsed.scenes) ? parsed.scenes : [],
|
|
// Ensure dates are preserved
|
|
createdAt: parsed.createdAt || new Date().toISOString(),
|
|
updatedAt: parsed.updatedAt || new Date().toISOString(),
|
|
};
|
|
|
|
console.log('[useYouTubeCreatorState] Restored state from localStorage:', {
|
|
hasPlan: !!restoredState.videoPlan,
|
|
scenesCount: restoredState.scenes.length,
|
|
activeStep: restoredState.activeStep,
|
|
});
|
|
|
|
return restoredState;
|
|
}
|
|
} catch (error) {
|
|
console.error('[useYouTubeCreatorState] Error loading state from localStorage:', error);
|
|
}
|
|
return DEFAULT_STATE;
|
|
});
|
|
|
|
// Persist state to localStorage on every change
|
|
useEffect(() => {
|
|
try {
|
|
const stateToSave: YouTubeCreatorState = {
|
|
...state,
|
|
updatedAt: new Date().toISOString(),
|
|
createdAt: state.createdAt || new Date().toISOString(),
|
|
};
|
|
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
|
|
} catch (error) {
|
|
console.error('[useYouTubeCreatorState] Error saving state to localStorage:', error);
|
|
}
|
|
}, [state]);
|
|
|
|
// Update state helper
|
|
const updateState = useCallback((updates: Partial<YouTubeCreatorState>) => {
|
|
setState((prev) => ({
|
|
...prev,
|
|
...updates,
|
|
}));
|
|
}, []);
|
|
|
|
// Clear state helper (for reset/new project)
|
|
const clearState = useCallback(() => {
|
|
setState(DEFAULT_STATE);
|
|
localStorage.removeItem(STORAGE_KEY);
|
|
console.log('[useYouTubeCreatorState] State cleared');
|
|
}, []);
|
|
|
|
return {
|
|
state,
|
|
updateState,
|
|
clearState,
|
|
};
|
|
};
|
|
|