Merge pull request #306 from storytold/bflat-fy-face-animator-document-title

face animator document title and link change

_redirects

@@ -10,7 +10,7 @@
 /coming-soon*   /index.html   200
 /commissions*   /index.html   200
 /contribute*   /index.html   200
-/face-animation*   /index.html   200
+/face-animator*   /index.html   200
 /firehose*   /index.html   200
 /guide*   /index.html   200
 /jobs*   /index.html   200

packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx

@@ -271,7 +271,7 @@ export default function SideNav(props: SideNavProps) {
         <li className="sidebar-heading">{t("videoTitle")}</li>
         <li>
           <NavLink
-            to="/face-animation"
+            to="/face-animator"
             activeClassName="active-link"
             onClick={handleNavLinkClick}
           >

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

@@ -595,7 +595,7 @@ class PageContainer extends React.Component<
               />
             </Route>
 
-            <Route path="/face-animation">
+            <Route path="/face-animator">
               <LipsyncEditor
                 {...{
                   enqueueInferenceJob: this.props.enqueueInferenceJob,

packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx

@@ -214,7 +214,7 @@ function FooterNav(props: Props) {
               </li>
 
               <li>
-                <Link to="/face-animation">{t("productFaceAnimator")}</Link>
+                <Link to="/face-animator">{t("productFaceAnimator")}</Link>
               </li>
 
               <li>

packages/fakeyou.com/src/v2/view/nav/TopNav.tsx

@@ -245,7 +245,7 @@ function TopNav(props: Props) {
                       </Link>
                     </li>
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to="/face-animation">
+                      <Link className="dropdown-item" to="/face-animator">
                         <FontAwesomeIcon
                           icon={faFaceViewfinder}
                           className="me-2"

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -156,7 +156,7 @@ function LandingPage(props: Props) {
           icon={faSparkles}
           message="Have you tried our new Face Animator? Turn photos of faces into animated lip-synced videos with just a picture and some audio!"
           alertVariant="new"
-          link="/face-animation"
+          link="/face-animator"
           linkText="Try it now"
         />
 
@@ -300,7 +300,7 @@ function LandingPage(props: Props) {
           </div>
           <div className="col-12 col-md-4">
             <Link
-              to="/face-animation"
+              to="/face-animator"
               className="panel panel-select d-flex flex-column align-items-center"
             >
               <div className="d-flex px-4 pt-4 align-items-start w-100">
@@ -320,7 +320,7 @@ function LandingPage(props: Props) {
                     {t("productFaceAnimatorText")}
                   </h6>
                 </div>
-                <Link to="/face-animation" className="btn btn-square mt-1">
+                <Link to="/face-animator" className="btn btn-square mt-1">
                   <FontAwesomeIcon icon={faArrowRight} />
                 </Link>
               </div>

packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx

@@ -19,13 +19,14 @@ import {
   // EnqueueFaceAnimationRequest,
 } from "@storyteller/components/src/api/face_animation/EnqueueFaceAnimation";
 import FaceAnimatorTitle from "./FaceAnimatorTitle";
-import FaceAnimatorInput from './FaceAnimatorInput';
-import FaceAnimatorWorking from './FaceAnimatorWorking';
+import FaceAnimatorInput from "./FaceAnimatorInput";
+import FaceAnimatorWorking from "./FaceAnimatorWorking";
 import FaceAnimatorSuccess from "./FaceAnimatorSuccess";
 import { FaceAnimatorCore } from "./FaceAnimatorTypes";
 import { BasicVideo } from "components/common";
 import "./LipsyncEditor.scss";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
+import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 
 export default function LipsyncEditor({
   enqueueInferenceJob,
@@ -34,6 +35,7 @@ export default function LipsyncEditor({
   ...rest
 }: FaceAnimatorCore) {
   const { t } = useLocalize("FaceAnimator");
+  usePrefixedDocumentTitle("AI Face Animator");
 
   // the ready states are set by functions which run after the upload input animation is completed, which then illuminates the respective checkmark in a staggered way to draw attention to the workflow, and reduces concurrent animations
 
@@ -46,23 +48,26 @@ export default function LipsyncEditor({
   const [index, indexSet] = useState<number>(0); // index  = slideshow slide position
 
   //const [animationStyle,animationStyleSet] = useState(0);
-  const [frameDimensions,frameDimensionsSet] = useState("twitter_square");
-  const [removeWatermark,removeWatermarkSet] = useState(false);
-  const [disableFaceEnhancement,disableFaceEnhancementSet] = useState(false);
-  const [still,stillSet] = useState(false);
+  const [frameDimensions, frameDimensionsSet] = useState("twitter_square");
+  const [removeWatermark, removeWatermarkSet] = useState(false);
+  const [disableFaceEnhancement, disableFaceEnhancementSet] = useState(false);
+  const [still, stillSet] = useState(false);
 
   //const animationChange = ({ target }: any) => animationStyleSet(target.value);
-  const frameDimensionsChange = ({ target }: any) => frameDimensionsSet(target.value);
-  const removeWatermarkChange = ({ target }: any) => removeWatermarkSet(target.checked);
-  const disableFaceEnhancementChange = ({ target }: any) => disableFaceEnhancementSet(target.checked);
+  const frameDimensionsChange = ({ target }: any) =>
+    frameDimensionsSet(target.value);
+  const removeWatermarkChange = ({ target }: any) =>
+    removeWatermarkSet(target.checked);
+  const disableFaceEnhancementChange = ({ target }: any) =>
+    disableFaceEnhancementSet(target.checked);
   const stillChange = ({ target }: any) => stillSet(target.checked);
-  const clearInputs = () => { 
-    //animationStyleSet(0); 
-    stillSet(false); 
-    frameDimensionsSet("twitter_square"); 
-    removeWatermarkSet(false); 
+  const clearInputs = () => {
+    //animationStyleSet(0);
+    stillSet(false);
+    frameDimensionsSet("twitter_square");
+    removeWatermarkSet(false);
     disableFaceEnhancementSet(false);
-  }
+  };
 
   const makeRequest = (mode: number) => ({
     uuid_idempotency_token: uuidv4(),
@@ -144,7 +149,11 @@ export default function LipsyncEditor({
       <div {...{ className: "panel lipsync-panel p-3 py-4 p-md-4" }}>
         <FaceAnimatorTitle {...headerProps} />
         {transitions((style, i) => {
-          const Page = [FaceAnimatorInput, FaceAnimatorWorking, FaceAnimatorSuccess][page];
+          const Page = [
+            FaceAnimatorInput,
+            FaceAnimatorWorking,
+            FaceAnimatorSuccess,
+          ][page];
           return Page ? (
             <Page
               {...{
@@ -173,7 +182,7 @@ export default function LipsyncEditor({
         })}
       </div>
       <div {...{ className: "face-animator-mobile-sample" }}>
-        <BasicVideo {...{ src: "/videos/face-animator-instruction-en.mp4" }}/>
+        <BasicVideo {...{ src: "/videos/face-animator-instruction-en.mp4" }} />
       </div>
     </div>
   );