From fb015ee6996812347c7cd8a153232e3baa15db38 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 7 Feb 2024 13:57:35 -0500 Subject: [PATCH] breaking down the workflow controls page into smaller components for management, improve basicvideo so it forward the ref of the videoelement for more video operations --- .../common/BasicVideo/BasicVideo.tsx | 12 +- .../pageWorkflowControls.tsx | 137 ++---------------- .../sectionControlNets.tsx | 104 +++++++++++++ .../sectionVideoSettings.tsx | 80 ++++++++++ 4 files changed, 204 insertions(+), 129 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx diff --git a/packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.tsx b/packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.tsx index dbc74d9aba..619a2ce4be 100644 --- a/packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.tsx +++ b/packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, forwardRef } from "react"; import { a, useSpring } from "@react-spring/web"; import { useVideo } from "hooks"; import makeClass from "resources/makeClass"; @@ -13,12 +13,12 @@ interface Props { description?: string; } -export default function BasicVideo({ +export default forwardRef(function BasicVideo({ className, src, title, - description -}: Props) { + description, +}: Props, ref:React.ForwardedRef) { const [tint,tintSet] = useState(true); const [{ playCtrl },vidProps] = useVideo({ onEnded: () => tintSet(true) }); const style = useSpring({ @@ -31,7 +31,7 @@ export default function BasicVideo({ }; return
-
; -}; \ No newline at end of file +}); \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx index c2409e0eba..81ed9f0852 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx @@ -1,4 +1,4 @@ -import React, {useState} from "react"; +import React, {useState, useRef} from "react"; import { useParams, useHistory } from "react-router-dom"; import { v4 as uuidv4 } from "uuid"; import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; @@ -14,7 +14,6 @@ import { BasicVideo, Checkbox, ErrorMessage, - TempInput as Input, InputSeed, NumberSliderV2, Panel, @@ -23,6 +22,8 @@ import { TextArea } from "components/common"; +import SectionControlNets, {ControlNetsInitialValues as CnIvs} from "./sectionControlNets"; +import SectionVideoSettings from "./sectionVideoSettings"; export default function PageFilterControls({ t, pageState, dispatchPageState, parentPath @@ -34,6 +35,7 @@ export default function PageFilterControls({ dispatchPageState: (action: Action) => void; }) { const { mediaToken } = useParams(); + const videoRef = useRef(null); useMedia({ mediaToken: pageState.mediaFileToken || mediaToken, onSuccess: (res: any) => { @@ -43,7 +45,7 @@ export default function PageFilterControls({ mediaFile: res, mediaFileToken: pageState.mediaFileToken || mediaToken } - }) + }); }, }); @@ -70,14 +72,7 @@ export default function PageFilterControls({ nthFrames:2, inputFps: 24, interpolationMutiplier: 2, - cnTile: 0, - cnCanny: 0, - cnLinearAnime: 0, - cnLinearRealistic: 0, - cnDepth: 0, - cnOpenPose: 0, - cnPipeFace: 0, - cnSparse: 0.7, + ...CnIvs }); const handleOnChange = (key: string, newValue:any,) => { @@ -141,7 +136,7 @@ export default function PageFilterControls({
- +
@@ -335,119 +330,15 @@ export default function PageFilterControls({
-
-
- {handleOnChange("cnCanny", val)} - }}/> -
-
- {handleOnChange("cnLinearAnime", val)} - }}/> -
-
-
-
- {handleOnChange("cnDepth", val)} - }}/> -
-
- {handleOnChange("cnOpenPose", val)} - }}/> -
-
-
-
- {handleOnChange("cnPipeFace", val)} - }}/> -
-
- {handleOnChange("cnSparse", val)} - }}/> -
-
-
-
- {handleOnChange("cnLinearRealistic", val)} - }}/> -
-
- {handleOnChange("cnTile", val)} - }}/> -
-
+ handleOnChange(key,val)} + /> -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
+ handleOnChange(key,val)} + videoElement={videoRef?.current} + />
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx new file mode 100644 index 0000000000..b2da2b1bd4 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx @@ -0,0 +1,104 @@ +import React, { memo } from 'react' + +import { NumberSliderV2 } from 'components/common' + +export const ControlNetsInitialValues = { + cnCanny: 0, + cnDepth: 0, + cnLinearAnime: 0, + cnLinearRealistic: 0, + cnOpenPose: 0, + cnPipeFace: 0, + cnSparse: 0.7, + cnTile: 0, +} + +export default memo( function SectionControlNets( + {onChange : handleOnChange} : {onChange: (key:string, val:number)=>void} +){ + const iv = ControlNetsInitialValues; + return( + <> +
+
+ {handleOnChange("cnCanny", val)} + }}/> +
+
+ {handleOnChange("cnLinearAnime", val)} + }}/> +
+
+
+
+ {handleOnChange("cnDepth", val)} + }}/> +
+
+ {handleOnChange("cnOpenPose", val)} + }}/> +
+
+
+
+ {handleOnChange("cnPipeFace", val)} + }}/> +
+
+ {handleOnChange("cnSparse", val)} + }}/> +
+
+
+
+ {handleOnChange("cnLinearRealistic", val)} + }}/> +
+
+ {handleOnChange("cnTile", val)} + }}/> +
+
+ + ); +}); \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx new file mode 100644 index 0000000000..94696824ee --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx @@ -0,0 +1,80 @@ +import React, { memo, useState } from 'react' + +import { TempInput as Input } from 'components/common' + +export const VideoSettingsInitialValues = { + width: 544, + height: 544, + framesCap: 16, + skipFrames: 0, + everyNthFrame: 2, + inputFps: 24, + interpolationMultiplier: 2, +} + +export default memo( function SectionVideoSettings({ + onChange : handleOnChange, + videoElement: ve +} : { + onChange: (key:string, val:number)=>void, + videoElement: HTMLVideoElement | null, +}){ + const iv = VideoSettingsInitialValues; + const [{width, height}, setDimensions] = useState({ + width:iv.width, height:iv.height + }); + if(ve && ve!==null){ + ve.onloadedmetadata = () =>{ + if (ve.videoWidth && ve.videoHeight) { + const aspectRatio = ve.videoWidth/ve.videoHeight + if (aspectRatio > 1){ + setDimensions({width: 960, height: iv.height}); + } + else if (aspectRatio < 1) { + setDimensions({width: iv.width, height: 960}); + }else{ + console.log(`aspectRaio: ${aspectRatio}`); + } + } + } + } + return( + <> +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ + ); +}); \ No newline at end of file