diff --git a/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx b/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx index 6cbb08b..c61b476 100644 --- a/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx +++ b/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx @@ -33,13 +33,7 @@ export function PortraitAnimeSelector({ disabled = false, }: PortraitAnimeSelectorProps) { const [lastAnimeChoice, setLastAnimeChoice] = useState('STANDARD_V1_734684_116483'); - const [animeOptions, setAnimeOptions] = useState>([]); - - useEffect(() => { - if (value && value !== 'portrait') { - setLastAnimeChoice(value); - } - }, [value]); + const [animeOptions, setAnimeOptions] = useState>([]) useEffect(() => { let mounted = true; @@ -66,6 +60,11 @@ export function PortraitAnimeSelector({ return map; }, [animeOptions]); + /** Check if currentAnime is valid in animeOptions */ + const isValidAnimeChoice = useMemo(() => { + return animeOptions.some(opt => opt.pcode === currentAnime); + }, [animeOptions, currentAnime]); + /** Anime dropdown menu items */ const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({ key: opt.pcode, @@ -111,13 +110,13 @@ export function PortraitAnimeSelector({ className={`h-6 px-2 rounded-full transition-all duration-200 flex items-center gap-1.5 text-sm ${ disabled ? 'opacity-40 cursor-not-allowed bg-transparent text-gray-400' - : !isPortrait + : !isPortrait && isValidAnimeChoice ? 'bg-white/10 text-cyan-400 shadow-sm' : 'bg-transparent text-gray-400 hover:text-gray-300' }`} > - {!isPortrait && pcodeToName[currentAnime] + {!isPortrait && pcodeToName[currentAnime] && isValidAnimeChoice ? pcodeToName[currentAnime] : 'Anime'}