tools test page / new edited videos (#687)

* tools test

* update

src/netlify_configs/fakeyou.com/_redirects

@@ -35,6 +35,7 @@
 /contribute*           /website/index.html   200
 /creator-onboarding*   /website/index.html   200
 /dashboard*            /website/index.html   200
+/dev*                  /website/index.html   200
 /dev-media-input       /website/index.html   200
 /edit-cover-image*     /website/index.html   200
 /engine-compositor*    /website/index.html   200

src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx

@@ -23,6 +23,7 @@ export default function AITools() {
       icon: any;
       label: string;
     };
+    videoPosition?: "top" | "center";
   };
 
   let items: Item[] = [
@@ -107,6 +108,37 @@ export default function AITools() {
     });
   }
 
+  // Test Page
+  if (currentPath.includes("/dev/tools")) {
+    items.push(
+      {
+        to: "/",
+        title: "Video Compositor",
+        text: "Compose videos and images with AI",
+        videoSrc: "/videos/ai-tools/vcomp_video.mp4",
+        videoPosterSrc: "/images/ai-tools/vcomp_video_poster.jpg",
+        imgAlt: "Video Compositor",
+      },
+      {
+        to: "/",
+        title: "Video Compositor",
+        text: "Compose videos and images with AI",
+        videoSrc: "/videos/ai-tools/vcomp_video_2.mp4",
+        videoPosterSrc: "/images/ai-tools/vcomp_video_poster_2.jpg",
+        imgAlt: "Video Compositor",
+        videoPosition: "top",
+      },
+      {
+        to: "/",
+        title: "Webcam Acting",
+        text: "Act as your character through your camera",
+        videoSrc: "/videos/ai-tools/ca_video.mp4",
+        videoPosterSrc: "/images/ai-tools/ca_video_poster.jpg",
+        imgAlt: "Video Compositor",
+      }
+    );
+  }
+
   if (currentPath.includes("/tts")) {
     items = items.filter(item => item.to !== "/tts");
   }

src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx

@@ -20,6 +20,7 @@ interface AIToolsItemProps {
   videoSrc?: string;
   videoPosterSrc?: string;
   externalLink?: string;
+  videoPosition?: "top" | "center";
 }
 
 export function AIToolsItem({
@@ -32,6 +33,7 @@ export function AIToolsItem({
   videoSrc,
   videoPosterSrc,
   externalLink,
+  videoPosition = "center",
 }: AIToolsItemProps) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [showPoster, setShowPoster] = useState(true);
@@ -158,6 +160,7 @@ export function AIToolsItem({
               style={{
                 borderTopLeftRadius: "0.5rem",
                 borderTopRightRadius: "0.5rem",
+                objectPosition: videoPosition,
               }}
               onEnded={handleVideoEnded}
             >

src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -134,6 +134,7 @@ import { UploadNewTtsModelPage } from "./pages/upload/UploadNewTtsModelPage";
 import LivePortrait from "./pages/live_portrait/LivePortrait";
 import { BetaLipSyncForm } from "./pages/beta_lipsync/BetaLipSyncForm";
 import { BetaLipSyncPage } from "./pages/beta_lipsync/BetaLipSyncPage";
+import { ToolsTestPage } from "./pages/tools_test/ToolsTestPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -1001,6 +1002,11 @@ class PageContainer extends React.Component<
                   <BetaKeysListPage />
                 </Route>
 
+                {/* test page for tools */}
+                <Route path="/dev/tools">
+                  <ToolsTestPage />
+                </Route>
+
                 <Route path="/tools">
                   <CreatorToolsPage
                     sessionWrapper={this.props.sessionWrapper}

src/website/packages/fakeyou.com/src/v2/view/pages/media/VideoMediaPage.tsx

@@ -187,17 +187,15 @@ export default function DevMediaPage({
                             }}
                           />
                         )}
-                        {canAccessStudio() && (
-                          <Button
-                            {...{
-                              icon: faArrowRightArrowLeft,
-                              label: "Prompt Again",
-                              small: isMobile && true,
-                              to: `/style-video/${mediaFile?.token || ""}`,
-                              variant: "secondary",
-                            }}
-                          />
-                        )}
+                        <Button
+                          {...{
+                            icon: faArrowRightArrowLeft,
+                            label: "Remix Style",
+                            small: isMobile && true,
+                            to: `/style-video/${mediaFile?.token || ""}`,
+                            variant: "secondary",
+                          }}
+                        />
                         {canAccessStudio() &&
                           mediaFile?.maybe_scene_source_media_file_token && (
                             <Button

src/website/packages/fakeyou.com/src/v2/view/pages/tools_test/ToolsTestPage.tsx

@@ -0,0 +1,18 @@
+import { Container, Panel } from "components/common";
+import { AITools } from "components/marketing";
+import React from "react";
+
+interface ToolsTestPageProps {
+  // Define props here
+}
+
+export const ToolsTestPage = (props: ToolsTestPageProps) => {
+  return (
+    <Container type="panel" className="mt-5">
+      <Panel clear={true}>
+        <h2 className="mb-4 fw-bold">AI Tools List Test Page</h2>
+        <AITools />
+      </Panel>
+    </Container>
+  );
+};