diff --git a/frontend/apps/editor3d/app/public/resources/images/tilebg.png b/frontend/apps/editor3d/app/public/resources/images/tilebg.png new file mode 100644 index 0000000000..597706cd59 Binary files /dev/null and b/frontend/apps/editor3d/app/public/resources/images/tilebg.png differ diff --git a/frontend/apps/editor3d/app/src/pages/PageVideo/Background.css b/frontend/apps/editor3d/app/src/pages/PageVideo/Background.css new file mode 100644 index 0000000000..5ee27e397a --- /dev/null +++ b/frontend/apps/editor3d/app/src/pages/PageVideo/Background.css @@ -0,0 +1,19 @@ + +.tile-background-animation { + background-image: url('/resources/images/tilebg.png'); + background-repeat: repeat; + background-size: 512px; + animation: background-animation-scrolling 60s linear infinite; + -webkit-animation: background-animation-scrolling 60s linear infinite; + filter: grayscale(100%); + -webkit-filter: grayscale(100%); +} + +@keyframes background-animation-scrolling { + 0% { + background-position: 0 0; + } + 100% { + background-position: 512px 512px; + } +} diff --git a/frontend/apps/editor3d/app/src/pages/PageVideo/BackgroundGallery.tsx b/frontend/apps/editor3d/app/src/pages/PageVideo/BackgroundGallery.tsx index 42dcb18c17..1d5e0b1ec5 100644 --- a/frontend/apps/editor3d/app/src/pages/PageVideo/BackgroundGallery.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageVideo/BackgroundGallery.tsx @@ -1,168 +1,14 @@ -import { useEffect, useState, useRef } from "react"; - -function getRandomImages(count: number) { - const images = Array.from({ length: count }, (_, i) => ({ - id: i + 1, - src: `/resources/images/generate/image${i + 1}.png`, - alt: `Generated image ${i + 1}`, - })); - - // Shuffle the array - return [...images].sort(() => Math.random() - 0.5); -} - -interface ImageColumnProps { - images: Array<{ id: number; src: string; alt: string }>; - delay: number; - reverse?: boolean; - isLoaded: boolean; - duration?: number; -} - -function ImageColumn({ - images, - delay, - reverse = false, - duration = 100, - isLoaded, -}: ImageColumnProps) { - const columnRef = useRef(null); - - useEffect(() => { - if (!columnRef.current) return; - - const column = columnRef.current; - const animation = column.animate( - [ - { transform: reverse ? "translateY(-50%)" : "translateY(0)" }, - { transform: reverse ? "translateY(0)" : "translateY(-50%)" }, - ], - { - duration: duration * 1000, - iterations: Infinity, - easing: "linear", - delay: delay + 1000, - fill: "both", - }, - ); - - if (!isLoaded) { - animation.pause(); - } - - return () => { - animation.cancel(); - }; - }, [delay, duration, isLoaded, reverse]); - - return ( -
-
- {[...images, ...images].map((image, i) => ( -
- {image.alt} -
- ))} -
-
- ); -} +import "./Background.css"; export default function GalleryBackground() { - const [images, _setImages] = useState(() => getRandomImages(20)); - const [isLoaded, setIsLoaded] = useState(false); - - useEffect(() => { - // delay for smooth animation - const timer = setTimeout(() => { - setIsLoaded(true); - }, 100); - - return () => clearTimeout(timer); - }, []); - - // Columns for masonry layout - const columns = { - col1: images.filter((_, i) => i % 5 === 0), - col2: images.filter((_, i) => i % 5 === 1), - col3: images.filter((_, i) => i % 5 === 2), - col4: images.filter((_, i) => i % 5 === 3), - col5: images.filter((_, i) => i % 5 === 4), - }; - return ( <>
-
+
- - - - -
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx index 32193a5072..e4bc6adc1f 100644 --- a/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx +++ b/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx @@ -196,12 +196,15 @@ export const PromptBoxVideo = ({ }; const handleEnqueue = async () => { + setIsEnqueueing(true); + + console.log("generateResponse", generateResponse); + const generateResponse = await FalKlingImageToVideo({ image_media_token: referenceImages[0].mediaToken, }); - console.log("generateResponse", generateResponse); onEnqueuePressed?.(); if (generateResponse.status === CommandSuccessStatus.Success) { const prefs = await GetAppPreferences(); @@ -245,6 +248,7 @@ export const PromptBoxVideo = ({ // } // toast.error(errorMessage); // } + setIsEnqueueing(false); };