diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx index 0da8271e40..4f6fc74d68 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx @@ -47,7 +47,7 @@ import { GenerateTts } from "./GenerateTts"; import { GetWeight } from "@storyteller/components/src/api/weights/GetWeight"; import { LipsyncTokenMap } from "./LipsyncTokens"; -interface LivePortraitProps { +interface LipsyncProps { sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; } @@ -55,9 +55,7 @@ const PRECOMPUTED_SOURCE_TOKENS: string[] = [ "m_2xrse9799wvy8hkv8tbxqxct8089t7", // Mona Lisa ]; -export default function LivePortrait({ - sessionSubscriptionsWrapper, -}: LivePortraitProps) { +export default function Lipsync({ sessionSubscriptionsWrapper }: LipsyncProps) { useDocumentTitle("Lip Sync AI. Free Video Animation"); const { enqueueInferenceJob } = useInferenceJobs(); const { loggedIn, sessionFetched } = useSession(); @@ -90,6 +88,7 @@ export default function LivePortrait({ const [jobPercentage, setJobPercentage] = useState(null); const location = useLocation(); const history = useHistory(); + const sourceVideoRef = useRef(null); const handleAudioResultToken = (token: string | null) => { setAudioToken(token); @@ -264,6 +263,11 @@ export default function LivePortrait({ setGeneratedVideoSrc(mediaLink); setIsGenerating(false); setJobPercentage(null); + + // Pause the source video if it's playing + if (sourceVideoRef.current && !sourceVideoRef.current.paused) { + sourceVideoRef.current.pause(); + } } setJobProcessedTokens(prevTokens => [...prevTokens, jobToken]); @@ -408,6 +412,7 @@ export default function LivePortrait({
- +
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/ThumbnailMediaPicker.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/ThumbnailMediaPicker.tsx index cd7b71cd94..f315ced14b 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/ThumbnailMediaPicker.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/ThumbnailMediaPicker.tsx @@ -43,6 +43,7 @@ interface ThumbnailMediaPickerProps { showUploadButton?: boolean; showStep?: boolean; stepAlwaysOnTop?: boolean; + videoRef?: React.RefObject; } interface MediaData { @@ -70,6 +71,7 @@ const ThumbnailMediaPicker: React.FC = React.memo( showUploadButton = true, showStep = true, stepAlwaysOnTop = false, + videoRef, }) => { const [isCropping, setIsCropping] = useState(false); const [mediaData, setMediaData] = useState<{ [key: string]: any }>({}); @@ -221,6 +223,7 @@ const ThumbnailMediaPicker: React.FC = React.memo( ) : (