diff --git a/packages/components/src/api/index.tsx b/packages/components/src/api/index.tsx new file mode 100644 index 0000000000..7e53f0301f --- /dev/null +++ b/packages/components/src/api/index.tsx @@ -0,0 +1,23 @@ +import { + MediaFileType, + GetMediaByUser +} from "./media_files"; + +import { + Weight, + ListWeights +} from "./weights"; + +import { + GetBookmarksByUser +} from "./bookmarks/GetBookmarksByUser"; + +export type{ + MediaFileType, + Weight +} +export { + GetBookmarksByUser, + GetMediaByUser, + ListWeights +}; \ No newline at end of file diff --git a/packages/components/src/api/media_files/index.tsx b/packages/components/src/api/media_files/index.tsx new file mode 100644 index 0000000000..812530f3da --- /dev/null +++ b/packages/components/src/api/media_files/index.tsx @@ -0,0 +1,10 @@ +import { MediaFile } from "./GetMediaFile"; +import { GetMediaByUser } from "./GetMediaByUser"; + + +export type{ + MediaFile as MediaFileType +} +export { + GetMediaByUser +} \ No newline at end of file diff --git a/packages/components/src/api/weights/index.tsx b/packages/components/src/api/weights/index.tsx new file mode 100644 index 0000000000..92a219c89c --- /dev/null +++ b/packages/components/src/api/weights/index.tsx @@ -0,0 +1,5 @@ +import { ListWeights } from "./ListWeights"; +import { Weight } from "./GetWeight"; + +export type { Weight }; +export { ListWeights }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/Card/index.ts b/packages/fakeyou.com/src/components/common/Card/index.ts index c0424cdb70..7ea3034f5c 100644 --- a/packages/fakeyou.com/src/components/common/Card/index.ts +++ b/packages/fakeyou.com/src/components/common/Card/index.ts @@ -1 +1,10 @@ -export { default } from "./Card"; +import MediaCards from "./MediaCards"; +import WeightsCards from "./WeightsCards"; +import SkeletonCard from "./SkeletonCard"; +import Card from "./Card"; +export { + Card as default, + MediaCards, + SkeletonCard, + WeightsCards +}; diff --git a/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx b/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx index 3a9f53b63d..dd66197bae 100644 --- a/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx +++ b/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx @@ -13,9 +13,11 @@ interface PaginationComponentProps { pageCount: number } -export default function Pagination({ currentPage, onPageChange, pageCount }: PaginationComponentProps) { - // const pageCount = Math.ceil(totalItems / itemsPerPage); - +export default function Pagination({ + currentPage, + onPageChange, + pageCount +}: PaginationComponentProps) { return ( } diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx new file mode 100644 index 0000000000..4a341e9e0e --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx @@ -0,0 +1,101 @@ +import React, { + memo, + ReactNode, + useEffect, + useState, +} from "react"; + +import { + Button, + TempInput as Input, + Modal, +} from "components/common"; + +import { faTrash } from "@fortawesome/free-solid-svg-icons"; + +export type SelectModalData = { + token: string; + title: string; +} + +interface SelectModalProps { + label?: string; + modalTitle?: string; + value?: string; + onClear: () => void; + required?: boolean; + children: ReactNode +} + +export default memo(function SelectModal ({ + label, + // tabs, + modalTitle = "Select", + onClear, + value = "", + required, + children +}: SelectModalProps) { + const [isModalOpen, setModalOpen] = useState(false + ) + const openModal = () => { + setModalOpen(true); + }; + + const closeModal = () => { + setModalOpen(false); + }; + + useEffect(closeModal, [value]); + + return ( + <> +
+ {label && ( + + )} + +
+
+ + +
+
+ + {return(<>{children})}} + showButtons={false} + padding={false} + large={true} + position="top" + mobileFullscreen={true} + /> + + ); + } +); diff --git a/packages/fakeyou.com/src/components/common/SelectModal/index.tsx b/packages/fakeyou.com/src/components/common/SelectModal/index.tsx index 34f8ad1385..82f44a1402 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/index.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/index.tsx @@ -1 +1,5 @@ -export { default } from "./SelectModal"; \ No newline at end of file +import SelectModal from "./SelectModal"; +import SelectModalV2, { SelectModalData } from "./SelectModalV2"; + +export type { SelectModalData }; +export { SelectModal as default, SelectModalV2 }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx new file mode 100644 index 0000000000..242482cd51 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx @@ -0,0 +1,141 @@ +import React, { memo, useRef, useState } from "react"; + +import { useListContent, useSession } from "hooks"; + +import { + MediaFileType, + GetMediaByUser +} from "@storyteller/components/src/api"; + +import { + MasonryGrid, + MediaCards, + Pagination, + SkeletonCard, + NonRouteTabs +} from "components/common"; + +import { SelectModalData, SelectModalV2} from "../SelectModal"; + +import prepFilter from "resources/prepFilter"; + +export default memo(function SelectModalWrapper({ + debug = false, + value = "", + modalTitle, + inputLabel, + onSelect +}: { + debug?: boolean; + value?: string; + modalTitle: string; + inputLabel: string; + onSelect: (data:SelectModalData) => void; +}) { + const tabs = [{ + label: "All Videos", + content: ( +
+ +
+ ) + }] + return ( + {onSelect({title:"",token:""})}} + > + + + ); +}); + +function VideoTabsContent({ + debug=false, + onSelect +}:{ + debug?: boolean + onSelect: (data:SelectModalData) => void; +}){ + const gridContainerRef = useRef(null); + const [list, listSet] = useState([]); + const { user } = useSession(); + const media = useListContent({ + addQueries: { + page_size: 9, + ...prepFilter("video", "filter_media_type"), + }, + urlUpdate: false, + debug: debug ? "Video List" : undefined, + fetcher: GetMediaByUser, + list, + listSet, + requestList: true, + urlParam: user?.username || "" + }); + const handlePageClick = (selectedItem: { selected: number }) => { + media.pageChange(selectedItem.selected); + }; + + const paginationProps = { + onPageChange: handlePageClick, + pageCount: media.pageCount+1, // account for index 0 + currentPage: media.page, + }; + if (media.isLoading){ + return ( +
+ {Array.from({ length: 12 }).map((_, index) => ( + + ))} +
+ ); + }else if (media.list.length === 0 && media.status === 3){ + return( +
+ No media created yet. +
+ ); + }else { + return( + <> + {paginationProps.pageCount > 1 && +
+ +
+ } + {if (debug) console.log("Layout complete!")}} + > + {media.list.map((data: MediaFileType, key: number) => { + let props = { + data, + showCreator: true, + type: "media", + inSelectModal: true, + onResultSelect: onSelect, + }; + return ( +
+ +
+ ); + })} + + {paginationProps.pageCount > 1 && +
+ +
+ } + + ); + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/index.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/index.tsx new file mode 100644 index 0000000000..9dc29bff2d --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/index.tsx @@ -0,0 +1 @@ +export { default } from "./SelectModalVideoTabs"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx new file mode 100644 index 0000000000..03b8204440 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx @@ -0,0 +1,51 @@ +import React, { memo } from "react"; + +import { NonRouteTabs } from "components/common"; +import { SelectModalData, SelectModalV2} from "../SelectModal"; +import TabAllWeights from "./tabAllWeights"; +import TabBookmarkedWeights from "./tabBookmarkedWeights" + +export default memo(function SelectModalWrapper({ + debug = false, + value = {title:"",token:""}, + modalTitle, + inputLabel, + weightType, + onSelect +}: { + debug?: boolean; + value?: SelectModalData; + modalTitle: string; + inputLabel: string; + weightType: "sd_1.5" | "loRA"; + onSelect: (data:SelectModalData) => void; +}) { + const tabs = [{ + label: "All Weights", + content: ( +
+ +
+ ) + }, + { + label: "Bookmarked Weights", + content: ( +
+ +
+ ) + } + ] + return ( + {onSelect({title:"",token:""})}} + > + + + ); +}); + diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/index.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/index.tsx new file mode 100644 index 0000000000..5022ff51d7 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/index.tsx @@ -0,0 +1 @@ +export { default } from "./SelectModalWeightsTabs"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx new file mode 100644 index 0000000000..395e71f2c8 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -0,0 +1,124 @@ +import React, {useRef, useState} from 'react'; +import { + useBookmarks, + useLazyLists, + useRatings, + // useSession +} from "hooks"; +import { + Weight as WeightI, + ListWeights +} from "@storyteller/components/src/api"; +import { SelectModalData } from "../SelectModal"; +import prepFilter from "resources/prepFilter"; +import { + MasonryGrid, + WeightsCards, + Pagination, + SkeletonCard, +} from "components/common"; + +export default function WeightsTabsContent({ + debug=false, + weightType, + onSelect +}:{ + debug?: boolean + weightType: "sd_1.5" | "loRA"; + onSelect: (data:SelectModalData) => void; +}){ + const gridContainerRef = useRef(null); + const bookmarks = useBookmarks(); + const ratings = useRatings(); + const [list, listSet] = useState([]); + const [pages, setPages] = useState<{ + currPageWeights: any[], + lookup: string[] + }>({ + currPageWeights: [], + lookup: [] + }); + + const weights = useLazyLists({ + addQueries: { + page_size: 9, + ...prepFilter(weightType, "weight_type"), + }, + fetcher: ListWeights, + onSuccess: (res)=>{ + setPages((curr)=>{ + return{ + currPageWeights: [...res.results], + lookup: [...curr.lookup, res.pagination.maybe_next] + } + }) + }, + list, + listSet, + requestList: true, + urlUpdate: false, + }); + + + const handlePageClick = (selectedItem: { selected: number }) => { + weights.getMore(); + }; + + const paginationProps = { + onPageChange: handlePageClick, + pageCount: pages.lookup.length+1, + currentPage: 0, + }; + if (weights.isLoading){ + return ( +
+ {Array.from({ length: 12 }).map((_, index) => ( + + ))} +
+ ); + }else if (weights.list.length === 0 && weights.status === 3){ + return( +
+ No weights created yet. +
+ ); + }else { + return( + <> +
+ +
+ console.log("Layout complete!")} + > + {pages.currPageWeights.map((data: any, key: number) => { + let props = { + data, + ratings, + bookmarks, + showCreator: true, + type: "weights", + inSelectModal: true, + onResultSelect: onSelect, + }; + return ( +
+ +
+ ); + })} + +
+ +
+ + ); + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx new file mode 100644 index 0000000000..566ff32fc7 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx @@ -0,0 +1,116 @@ +import React, {useRef, useState} from 'react'; +import { + // useBookmarks, + useListContent, + useRatings, + useSession +} from "hooks"; +import { + Weight as WeightI, + GetBookmarksByUser +} from "@storyteller/components/src/api"; +import { SelectModalData } from "../SelectModal"; +import prepFilter from "resources/prepFilter"; +import { + MasonryGrid, + WeightsCards, + Pagination, + SkeletonCard, +} from "components/common"; + +export default function WeightsTabsContent({ + debug=false, + weightType, + onSelect +}:{ + debug?: boolean; + weightType: "sd_1.5" | "loRA"; + onSelect: (data:SelectModalData) => void; +}){ + const gridContainerRef = useRef(null); + // const bookmarks = useBookmarks(); + const ratings = useRatings(); + const [list, listSet] = useState([]); + const { user } = useSession(); + const weights = useListContent({ + addQueries: { + page_size: 9, + ...prepFilter(weightType, "weight_type"), + }, + urlUpdate: false, + debug: debug ? "Bookmarked Weights" : undefined, + fetcher: GetBookmarksByUser, + list, + listSet, + requestList: true, + urlParam: user?.username || "" + }); + const handlePageClick = (selectedItem: { selected: number }) => { + weights.pageChange(selectedItem.selected); + }; + console.log("BOOKMARKED"); + console.log(weights); + const paginationProps = { + onPageChange: handlePageClick, + pageCount: weights.pageCount + 1, + currentPage: weights.page, + }; + if (weights.isLoading){ + return ( +
+ {Array.from({ length: 12 }).map((_, index) => ( + + ))} +
+ ); + }else if (weights.list.length === 0 && weights.status === 3){ + return( +
+ No weights created yet. +
+ ); + }else { + return( + <> + {paginationProps.pageCount > 1 && +
+ +
+ } + console.log("Layout complete!")} + > + {weights.list.map((data: any, key: number) => { + //TODO: data should be TYPED + let props = { + data, + ratings, + // bookmarks, + showCreator: true, + type: "weights", + inSelectModal: true, + onResultSelect: onSelect, + }; + return ( +
+ +
+ ); + })} + + {paginationProps.pageCount > 1 && +
+ +
+ } + + ); + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/Tabs/index.ts b/packages/fakeyou.com/src/components/common/Tabs/index.ts index 9a31da7f16..d70cbc9814 100644 --- a/packages/fakeyou.com/src/components/common/Tabs/index.ts +++ b/packages/fakeyou.com/src/components/common/Tabs/index.ts @@ -1 +1,3 @@ -export { default } from "./Tabs"; +import Tabs from "./Tabs"; +import NonRouteTabs from "./NonRouteTabs"; +export { Tabs as default, NonRouteTabs }; diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index 6800f6da7a..31c7d4ac02 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -5,6 +5,11 @@ import Badge from "./Badge"; import Button from "./Button"; import ButtonRevertToDefault from "./ButtonRevertToDefault"; import Checkbox from "./Checkbox"; +import { + MediaCards, + SkeletonCard, + WeightsCards, +} from "./Card"; import Container from "./Container"; import CoverImageInput from "./CoverImageInput"; import ErrorMessage from "./ErrorMessage" @@ -18,12 +23,14 @@ import InputSeed from "./InputSeed"; import Label from "./Label"; import LikeButton from "./LikeButton"; import MocapInput from "./MocapInput"; +import MasonryGrid from "./MasonryGrid/MasonryGrid"; import Modal from "./Modal"; import NumberSlider from "./NumberSlider"; import NumberSliderV2 from "./NumberSliderV2"; import Pagination from "./Pagination"; import Panel from "./Panel"; import Radio from "./Radio"; +import Searcher from "./Searcher"; import SegmentButtons from "./SegmentButtons"; import Select from "./Select"; import SelectModal from "./SelectModal"; @@ -31,7 +38,7 @@ import Skeleton from "./Skeleton"; import Slider from "./Slider"; import Spinner from "./Spinner"; import SplitPanel from "./SplitPanel"; -import Tabs from "./Tabs"; +import Tabs, {NonRouteTabs} from "./Tabs"; import TempAudioPlayer from "./TempAudioPlayer"; import TempInput from "./TempInput"; import TempSelect from "./TempSelect"; @@ -49,6 +56,11 @@ export { AudioInput, Badge, Button, + //Cards + MediaCards, + SkeletonCard, + WeightsCards, + //End Cards ButtonRevertToDefault, Checkbox, Container, @@ -64,13 +76,16 @@ export { Label, LikeButton, MocapInput, + MasonryGrid, Modal, + NonRouteTabs, NumberSlider, NumberSliderV2, Pagination, Panel, Radio, SegmentButtons, + Searcher, Select, SelectModal, Skeleton, 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 c716e21de5..5ccec551bd 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 @@ -16,6 +16,8 @@ import { TextArea } from "components/common"; +import SelectModalWeightsTabs from "components/common/SelectModalWeightsTabs"; + import SectionControlNets, {ControlNetsInitialValues as CnIvs} from "./sectionControlNets"; import SectionVideoSettings, {VideoSettingsInitialValues as VideoIvs} from "./sectionVideoSettings"; import SectionAdvanceOptions, {AdvanceOptionsInitialValues as AdvIvs} from "./sectionAdvanceOptions"; @@ -63,8 +65,8 @@ export default function PageFilterControls({ ...CnIvs }); - const handleOnChange = (key: string, newValue:any,) => { - setWorkflowValues((curr)=>({...curr, [key]: newValue})); + const handleOnChange = (val:{[key: string]: number|string|boolean|undefined}) => { + setWorkflowValues((curr)=>({...curr, ...val})); } const handleReset = ()=>{ setWorkflowValues((curr)=>({ @@ -132,7 +134,7 @@ export default function PageFilterControls({
handleOnChange(key,val)} + onChange={handleOnChange} videoElement={videoRef?.current} />
@@ -164,37 +166,32 @@ export default function PageFilterControls({
- { - handleOnChange("sdModelToken", token); + inputLabel="Select a Stable Diffusion Weight" + weightType="sd_1.5" + onSelect={({title,token})=>{ + handleOnChange({ + "sdModelTitle": title, + "sdModelToken": token, + }); + }} + value={{ + token:workflowValues.sdModelToken, + title:"" }} - tabs={[ - { - label: "All Weights", - tabKey: "allWeights", - typeFilter: "sd_1.5", - searcher: true, - type: "weights", - }, - { - label: "Bookmarked", - tabKey: "bookmarkedWeights", - typeFilter: "sd_1.5", - searcher: false, - type: "weights", - }, - ]} />
{ + onSelect={({title,token})=>{ console.log(`calling from select modal result select ${token}`); - handleOnChange("loraModelToken", token); + handleOnChange({ + "loraModelTitle": title, + "loraModelToken": token + }); }} tabs={[ { @@ -220,7 +217,7 @@ export default function PageFilterControls({ {...{ label: "Prompt", placeholder: "Enter a prompt", - onChange: (e:React.ChangeEvent)=>handleOnChange("posPrompt", e.target.value), + onChange: (e:React.ChangeEvent)=>handleOnChange({"posPrompt": e.target.value}), value: workflowValues.posPrompt, required: false, }} @@ -231,7 +228,7 @@ export default function PageFilterControls({ {...{ label: "Negative Prompt", placeholder: "Enter Negative Prompt", - onChange: (e:React.ChangeEvent)=>handleOnChange("negPrompt", e.target.value), + onChange: (e:React.ChangeEvent)=>handleOnChange({"negPrompt": e.target.value}), value: workflowValues.negPrompt, required: false, }} @@ -240,7 +237,7 @@ export default function PageFilterControls({
handleOnChange("seed", val) + (val:string)=>handleOnChange({seed: val}) }/>
@@ -248,13 +245,13 @@ export default function PageFilterControls({ handleOnChange(key,val)} + onChange={handleOnChange} /> handleOnChange(key,val)} + onChange={handleOnChange} /> diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx index b81ccd3924..42db92b62b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx @@ -23,7 +23,7 @@ export default memo( function SectionAdvanceOptions({ onChange : handleOnChange } : { workflowValues : WorkflowValuesType - onChange: (key:string, val:number|boolean)=>void} + onChange: (val:{[key: string]: number|string|boolean})=>void} ){ return( @@ -35,7 +35,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.firstPass, label: " Denoise First Pass", thumbTip: "Denoise First Pass", - onChange: (val)=>{handleOnChange("firstPass",val)} + onChange: (val)=>{handleOnChange({firstPass:val})} }}/>
@@ -44,7 +44,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.upscalePass, label: "Denoise Upscale Pass", thumbTip: "Denoise Upscale Pass", - onChange: (val)=>{handleOnChange("upscalePass", val)} + onChange: (val)=>{handleOnChange({upscalePass: val})} }}/>
@@ -55,7 +55,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.motionScale, label: "Motion Scale", thumbTip: "Motion Scale", - onChange: (val)=>{handleOnChange("motionScale", val)} + onChange: (val)=>{handleOnChange({motionScale: val})} }}/>
@@ -64,7 +64,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.upscaleMultiplier, label: "Upscale Multiplier", thumbTip: "Upscale Multiplier", - onChange: (val)=>{handleOnChange("upscaleMultiplier", val)} + onChange: (val)=>{handleOnChange({upscaleMultiplier: val})} }}/>
@@ -73,14 +73,14 @@ export default memo( function SectionAdvanceOptions({ {handleOnChange("useEmptyLatent", e.target.checked)}} + onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange({useEmptyLatent: e.target.checked})}} />
{handleOnChange("useFaceDetailer", e.target.checked)}} + onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange({useFaceDetailer: e.target.checked})}} />
@@ -94,7 +94,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.denoiseFaceDetailer, label: "Denoise Face Detailer", thumbTip: "Denoise Face Detailer", - onChange: (val)=>{handleOnChange("denoiseFaceDetailer", val)} + onChange: (val)=>{handleOnChange({denoiseFaceDetailer: val})} }}/> @@ -102,7 +102,7 @@ export default memo( function SectionAdvanceOptions({ {handleOnChange("useLCM", e.target.checked)}} + onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange({useLCM: e.target.checked})}} />
@@ -113,7 +113,7 @@ export default memo( function SectionAdvanceOptions({ withRevert: true, label: "LCM CFG", thumbTip: "LCM CFG", - onChange: (val)=>{handleOnChange("lcmCFG", val)} + onChange: (val)=>{handleOnChange({lcmCFG: val})} }}/>
@@ -122,7 +122,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.lcmSteps, label: "LCM Steps", thumbTip: "LCM Steps", - onChange: (val)=>{handleOnChange("lcmSteps", val)} + onChange: (val)=>{handleOnChange({lcmSteps: val})} }}/>
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 index a432a586d9..c77ade0725 100644 --- 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 @@ -18,7 +18,7 @@ export default memo( function SectionControlNets({ onChange : handleOnChange } : { workflowValues : WorkflowValuesType - onChange: (key:string, val:number)=>void} + onChange: (val:{[key: string]: number|string|boolean})=>void} ){ return( @@ -30,7 +30,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnCanny, label: "Canny", thumbTip: "Canny", - onChange: (val)=>{handleOnChange("cnCanny", val)} + onChange: (val)=>{handleOnChange({cnCanny: val})} }}/>
@@ -39,7 +39,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnLinearAnime, label: "Line Art Anime", thumbTip: "Line Art Anime", - onChange: (val)=>{handleOnChange("cnLinearAnime", val)} + onChange: (val)=>{handleOnChange({cnLinearAnime: val})} }}/>
@@ -50,7 +50,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnDepth, label: "Depth", thumbTip: "Depth", - onChange: (val)=>{handleOnChange("cnDepth", val)} + onChange: (val)=>{handleOnChange({cnDepth: val})} }}/>
@@ -59,7 +59,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnOpenPose, label: "OpenPose", thumbTip: "OpenPose", - onChange: (val)=>{handleOnChange("cnOpenPose", val)} + onChange: (val)=>{handleOnChange({cnOpenPose: val})} }}/>
@@ -70,7 +70,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnPipeFace, label: "Media Pipe Face", thumbTip: "Media Pipe Face", - onChange: (val)=>{handleOnChange("cnPipeFace", val)} + onChange: (val)=>{handleOnChange({cnPipeFace: val})} }}/>
@@ -79,7 +79,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnSparse, label: "Sparse Scribble", thumbTip: "Sparse Scribble", - onChange: (val)=>{handleOnChange("cnSparse", val)} + onChange: (val)=>{handleOnChange({cnSparse: val})} }}/>
@@ -90,7 +90,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnLinearRealistic, label: "Video CN (Linear Realistic)", thumbTip: "Video CN", - onChange: (val)=>{handleOnChange("cnLinearRealistic", val)} + onChange: (val)=>{handleOnChange({cnLinearRealistic: val})} }}/>
@@ -99,7 +99,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnTile, label: "Tile CN", thumbTip: "Tile CN", - onChange: (val)=>{handleOnChange("cnTile", val)} + onChange: (val)=>{handleOnChange({cnTile: val})} }}/>
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 index f6b60fe647..10c735beff 100644 --- 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 @@ -18,7 +18,7 @@ export default memo( function SectionVideoSettings({ workflowValues: wfVal, videoElement: ve } : { - onChange: (key:string, val:number)=>void, + onChange: (val:{[key: string]: number|string|boolean|undefined})=>void, workflowValues: WorkflowValuesType, videoElement: HTMLVideoElement | null, }){ @@ -26,33 +26,32 @@ export default memo( function SectionVideoSettings({ const handleFramesCap = (newValue: number)=>{ if(newValue - wfVal.skipFrames >= 16) - handleOnChange("framesCap",newValue); + handleOnChange({framesCap:newValue}); } const handleSkipFrames = (newValue: number)=>{ if(wfVal.framesCap - newValue >= 16) - handleOnChange("skipFrames",newValue); + handleOnChange({skipFrames:newValue}); } if(ve && ve!==null){ ve.onloadedmetadata = () =>{ + const newValues : { + width?: number; + height?: number; + maxFrames?: number; + framesCap?: number; + } = {}; if (ve.videoWidth && ve.videoHeight) { const aspectRatio = ve.videoWidth/ve.videoHeight - if (aspectRatio > 1){ - handleOnChange("width",960); - } - else if (aspectRatio < 1) { - handleOnChange("height",960); - }else{ - console.log(`aspectRaio: ${aspectRatio}`); - } + if (aspectRatio > 1) newValues.width = 960; + else if (aspectRatio < 1) newValues.height = 960 + else console.log(`aspectRaio: ${aspectRatio}`); } if(ve.duration){ - handleOnChange("maxFrames", - Math.floor(ve.duration)*wfVal.inputFps - ); + newValues.maxFrames = Math.floor(ve.duration)*wfVal.inputFps; + newValues.framesCap = newValues.maxFrames; } - //TODO: Optimizer to make ONE handleOnChange only - //TODO: deal with maxFrames with more reliable math + handleOnChange(newValues); } } return( diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx index 7a6935d2db..78a5d1e806 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx @@ -2,7 +2,8 @@ import React from "react"; import { NavLink } from "react-router-dom"; import { states, Action, State } from "../videoWorkflowReducer"; import { Button } from "components/common"; -import SelectModal, { SelectModalData } from "components/common/SelectModal/SelectModal"; +import SelectModalVideoTabs from "components/common/SelectModalVideoTabs"; +import { SelectModalData } from "components/common/SelectModal/SelectModalV2"; import VideoFakeyou from "components/common/VideoFakeyou"; export default function TabContentLibrary({ @@ -29,19 +30,11 @@ export default function TabContentLibrary({ return (
- {pageState.mediaFileToken &&