diff --git a/src/App.tsx b/src/App.tsx index fb492da..46d28f4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -77,11 +77,11 @@ const Tab = styled.button<{ active: boolean }>` } `; -const VideoContainer = styled.div` +const VideoContainer = styled.div<{ isEditMode: boolean }>` display: flex; justify-content: center; align-items: center; - max-height: 30vh; + max-height: ${props => props.isEditMode ? '30vh' : 'none'}; width: 100%; margin: 0px; `; @@ -183,6 +183,7 @@ function App() { const [reconstructionMessage, setReconstructionMessage] = useState(null); const [isMediaFullyLoaded, setIsMediaFullyLoaded] = useState(false); const [backgroundLoadingMessage, setBackgroundLoadingMessage] = useState(null); + const [isEditMode, setIsEditMode] = useState(false); useEffect(() => { if (initialLoadRef.current) return; @@ -195,21 +196,31 @@ function App() { console.log("Initial useEffect - UUID param:", uuidParam, "Service param:", serviceParam); if (appMode) { - // Environment variable is set, use it to determine the mode - if (appMode === 'dubbing' || appMode === 'transcription') { + if (appMode === 'dubbing') { if (uuidParam) { setIsUUIDMode(true); setServiceParam(appMode); - handleFileOrUUIDSelect(null, uuidParam); + DubbingAPIService.uuidExists(uuidParam) + .then(() => { + setMediaUrl(DubbingAPIService.getMediaUrl(uuidParam)); + setMediaType('video/mp4'); + }) + .catch(() => { + setLoadError('errorLoadingUUID'); + }); + } else { + setLoadError('missingUUID'); + } + } else if (appMode === 'transcription') { + if (uuidParam) { + setIsUUIDMode(true); } else { setLoadError('missingUUID'); } } else if (appMode === 'file') { setIsUUIDMode(false); - // Ignore UUID if present in file mode } } else { - // No environment variable set, use dynamic behavior if (uuidParam) { setIsUUIDMode(true); setServiceParam(serviceParam || 'dubbing'); @@ -586,6 +597,45 @@ function App() { } }, [i18n]); + const handleEditModeToggle = async () => { + setIsLoading(true); + try { + const params = new URLSearchParams(window.location.search); + const uuid = params.get('uuid'); + if (uuid) { + const result = await loadDubbingMediaInBackground(uuid); + setMediaUrl(result.videoUrl); + setAudioTracks({ + background: { buffer: result.backgroundAudioBuffer, label: t('backgroundAudio') }, + original: { buffer: result.originalAudioBuffer, label: t('originalVocals') }, + dubbed: { buffer: result.dubbedVocalsBuffer, label: t('dubbedVocals') }, + }); + setTracks(result.tracks); + loadChunksInBackground(uuid, result.tracks); + } + } catch (error) { + console.error("Error loading edit mode:", error); + setLoadError('errorLoadingUUID'); + } finally { + setIsLoading(false); + setIsEditMode(true); + } + }; + + const handleSimpleDownload = () => { + const params = new URLSearchParams(window.location.search); + const uuid = params.get('uuid'); + if (uuid) { + const url = DubbingAPIService.getMediaUrl(uuid); + const a = document.createElement('a'); + a.href = url; + a.download = `dubbed_video.mp4`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } + }; + return ( <> @@ -610,12 +660,26 @@ function App() { {!isUUIDMode && ( )} - + {isDubbingService && ( + <> + {!isEditMode && ( + + )} + + + )} + {!isDubbingService && ( + + )} )} {!process.env.APP_LANGUAGE && ( @@ -632,10 +696,10 @@ function App() { {t('loading')} ) : mediaUrl ? ( <> - + - - {tracks.length > 0 && ( - <> - - setActiveTab('timeline')}>{t('timeline')} - setActiveTab('list')}>{t('list')} - setActiveTab('options')}>{t('options')} - - {activeTab === 'timeline' ? ( - - ) : activeTab === 'list' ? ( - - ) : ( - - )} - - )} - + {isEditMode && ( + + {tracks.length > 0 && ( + <> + + setActiveTab('timeline')}>{t('timeline')} + setActiveTab('list')}>{t('list')} + setActiveTab('options')}>{t('options')} + + {activeTab === 'timeline' ? ( + + ) : activeTab === 'list' ? ( + + ) : ( + + )} + + )} + + )} ) : loadError ? ( {t(loadError)} diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx index f44b99e..2235185 100644 --- a/src/components/VideoPlayer.tsx +++ b/src/components/VideoPlayer.tsx @@ -11,10 +11,11 @@ const MediaContainer = styled.div` align-items: center; `; -const StyledVideo = styled.video` +const StyledVideo = styled.video<{ isEditMode: boolean }>` max-width: 100%; max-height: 100%; object-fit: contain; + width: 100% `; const VideoPlayer = forwardRef( @@ -191,7 +192,7 @@ ${subtitle.text} return ( - + 0}> {originalSubtitlesUrl && ( diff --git a/src/locales/ca.json b/src/locales/ca.json index 6634a56..d5de50e 100644 --- a/src/locales/ca.json +++ b/src/locales/ca.json @@ -40,5 +40,6 @@ "dubbedVocals": "Veus doblades", "backgroundAudio": "Àudio de Fons", "missingUUID": "Falta UUID", - "loadingMedia": "Carregant vídeo, si us plau, espereu..." + "loadingMedia": "Carregant vídeo, si us plau, espereu...", + "edit": "Edita" } \ No newline at end of file diff --git a/src/locales/en.json b/src/locales/en.json index 44ab57d..a968b69 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -40,5 +40,6 @@ "dubbedVocals": "Dubbed Vocals", "backgroundAudio": "Background Audio", "missingUUID": "Missing UUID", - "loadingMedia": "Loading media, please wait..." + "loadingMedia": "Loading media, please wait...", + "edit": "Edit" } \ No newline at end of file diff --git a/src/locales/es.json b/src/locales/es.json index 58ed44f..cc0241d 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -40,5 +40,6 @@ "dubbedVocals": "Voces Dobladas", "backgroundAudio": "Audio de Fondo", "missingUUID": "Falta UUID", - "loadingMedia": "Cargando vídeo, por favor, espera..." + "loadingMedia": "Cargando vídeo, por favor, espera...", + "edit": "Edita" } \ No newline at end of file