mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 17:38:10 +00:00
PageScene: delete orphan StyleMoreOptions and StyleSelection UI
Both component trees survived earlier cleanup but never render from PageEditor or PageScene. They were the last UI consumers of the stylize store fields; deleting them sets up a follow-up that drops those store fields entirely. Net: -17 typecheck errors (the orphan files were the source of many missing-import errors).
This commit is contained in:
Tanish Manku committed
1 parent
f8ee94e538
commit
8af4657393
5 files changed
-346
No files matched your search
-20
@@ -1,20 +0,0 @@
|
||||
import { Modal } from "@storyteller/ui-modal";
|
||||
import { Button } from "@storyteller/ui-button";
|
||||
import { StyleOptions } from "./StyleOptions";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
}
|
||||
export const StyleMoreOptions = ({ onClose }: Props) => {
|
||||
|
||||
return (
|
||||
<Modal isOpen={true} onClose={onClose} title="More Options">
|
||||
<StyleOptions />
|
||||
<div className="mt-5 flex justify-end">
|
||||
<Button onClick={onClose} variant="action">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
-217
@@ -1,217 +0,0 @@
|
||||
import { PremiumLock } from "~/components";
|
||||
import { useShallow } from "zustand/shallow";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { useContext } from "react";
|
||||
import { EngineContext } from "~/pages/PageScene/contexts/EngineContext";
|
||||
import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
|
||||
|
||||
export function StyleOptions() {
|
||||
const editorEngine = useContext(EngineContext);
|
||||
const {
|
||||
faceDetail,
|
||||
upscale,
|
||||
lipSync,
|
||||
cinematic,
|
||||
enginePreProcessing,
|
||||
setFaceDetail,
|
||||
setUpscale,
|
||||
setLipSync,
|
||||
setCinematic,
|
||||
setEnginePreProcessing,
|
||||
} = usePageSceneStore(
|
||||
useShallow((s) => ({
|
||||
faceDetail: s.faceDetail,
|
||||
upscale: s.upscale,
|
||||
lipSync: s.lipSync,
|
||||
cinematic: s.cinematic,
|
||||
enginePreProcessing: s.enginePreProcessing,
|
||||
setFaceDetail: s.setFaceDetail,
|
||||
setUpscale: s.setUpscale,
|
||||
setLipSync: s.setLipSync,
|
||||
setCinematic: s.setCinematic,
|
||||
setEnginePreProcessing: s.setEnginePreProcessing,
|
||||
})),
|
||||
);
|
||||
|
||||
const handleCinematicChange = () => {
|
||||
const next = !cinematic;
|
||||
setCinematic(next);
|
||||
if (next) setUpscale(false);
|
||||
};
|
||||
|
||||
const enginePreProcessingChange = () => {
|
||||
const next = !enginePreProcessing;
|
||||
setEnginePreProcessing(next);
|
||||
if (editorEngine) {
|
||||
editorEngine.engine_preprocessing = next;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpscaleChange = () => {
|
||||
const next = !upscale;
|
||||
setUpscale(next);
|
||||
if (next) setCinematic(false);
|
||||
};
|
||||
|
||||
const handleLipsyncChange = () => setLipSync(!lipSync);
|
||||
const handleFaceDetailerChange = () => setFaceDetail(!faceDetail);
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col justify-center gap-4 rounded-b-lg bg-ui-panel">
|
||||
<div className="w-full">
|
||||
<div>
|
||||
<div className="flex items-center py-[6px]">
|
||||
<Switch.Group>
|
||||
<Switch.Label
|
||||
className={twMerge(
|
||||
"mr-3 grow text-sm font-medium transition-opacity",
|
||||
)}
|
||||
>
|
||||
Sync Lips with Speech
|
||||
</Switch.Label>
|
||||
<Switch
|
||||
checked={lipSync}
|
||||
onChange={handleLipsyncChange}
|
||||
className={twMerge(
|
||||
lipSync
|
||||
? "bg-brand-primary hover:bg-brand-primary-400"
|
||||
: "bg-brand-secondary-800 hover:bg-brand-secondary-600",
|
||||
"focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={`${
|
||||
lipSync ? "translate-x-6" : "translate-x-1"
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
||||
/>
|
||||
</Switch>
|
||||
</Switch.Group>
|
||||
<hr className="opacity-[5%]" />
|
||||
</div>
|
||||
</div>
|
||||
<PremiumLock requiredPlan="any" plural={true} className="mt-2">
|
||||
<div className="flex flex-col gap-[6px]">
|
||||
<hr className="opacity-[5%]" />
|
||||
<div className="flex w-full items-center">
|
||||
<Switch.Group>
|
||||
<Switch.Label
|
||||
className={twMerge(
|
||||
"mr-3 grow text-sm font-medium transition-opacity",
|
||||
)}
|
||||
>
|
||||
Face Detailer
|
||||
</Switch.Label>
|
||||
<Switch
|
||||
checked={faceDetail}
|
||||
onChange={handleFaceDetailerChange}
|
||||
className={twMerge(
|
||||
faceDetail
|
||||
? "bg-brand-primary hover:bg-brand-primary-400"
|
||||
: "bg-brand-secondary-800 hover:bg-brand-secondary-600",
|
||||
"focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={`${
|
||||
faceDetail ? "translate-x-6" : "translate-x-1"
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
||||
/>
|
||||
</Switch>
|
||||
</Switch.Group>
|
||||
</div>
|
||||
|
||||
<hr className="opacity-[5%]" />
|
||||
<div className="flex w-full items-center">
|
||||
<Switch.Group>
|
||||
<Switch.Label
|
||||
className={twMerge(
|
||||
"mr-3 grow text-sm font-medium transition-opacity",
|
||||
cinematic ? "opacity-50" : "",
|
||||
)}
|
||||
>
|
||||
Upscale
|
||||
</Switch.Label>
|
||||
<Switch
|
||||
checked={upscale}
|
||||
onChange={handleUpscaleChange}
|
||||
className={twMerge(
|
||||
upscale
|
||||
? "bg-brand-primary hover:bg-brand-primary-400"
|
||||
: "bg-brand-secondary-800 hover:bg-brand-secondary-600",
|
||||
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={`${
|
||||
upscale ? "translate-x-6" : "translate-x-1"
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
||||
/>
|
||||
</Switch>
|
||||
</Switch.Group>
|
||||
</div>
|
||||
<hr className="opacity-[5%]" />
|
||||
<div className="flex items-center">
|
||||
<Switch.Group>
|
||||
<Switch.Label
|
||||
className={twMerge(
|
||||
"mr-3 grow text-sm font-medium transition-opacity",
|
||||
upscale ? "opacity-50" : "",
|
||||
)}
|
||||
>
|
||||
Use Cinematic
|
||||
</Switch.Label>
|
||||
<Switch
|
||||
checked={cinematic}
|
||||
onChange={handleCinematicChange}
|
||||
className={twMerge(
|
||||
cinematic
|
||||
? "bg-brand-primary hover:bg-brand-primary-400"
|
||||
: "bg-brand-secondary-800 hover:bg-brand-secondary-600",
|
||||
"focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-all focus:outline-none focus:ring-0 focus:ring-offset-0",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={`${
|
||||
cinematic ? "translate-x-6" : "translate-x-1"
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
||||
/>
|
||||
</Switch>
|
||||
</Switch.Group>
|
||||
</div>
|
||||
<hr className="opacity-[5%]" />
|
||||
<div className="flex w-full items-center">
|
||||
<Switch.Group>
|
||||
<Switch.Label
|
||||
className={twMerge(
|
||||
"mr-3 grow text-sm font-medium transition-opacity",
|
||||
)}
|
||||
>
|
||||
Engine Preprocessing
|
||||
</Switch.Label>
|
||||
<Switch
|
||||
checked={enginePreProcessing}
|
||||
onChange={enginePreProcessingChange}
|
||||
className={twMerge(
|
||||
enginePreProcessing
|
||||
? "bg-brand-primary hover:bg-brand-primary-400"
|
||||
: "bg-brand-secondary-800 hover:bg-brand-secondary-600",
|
||||
"focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={`${
|
||||
enginePreProcessing ? "translate-x-6" : "translate-x-1"
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
||||
/>
|
||||
</Switch>
|
||||
</Switch.Group>
|
||||
</div>
|
||||
<hr className="opacity-[5%]" />
|
||||
</div>
|
||||
</PremiumLock>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { H4 } from "~/components";
|
||||
import { ArtStyle } from "~/pages/PageScene/engine/api_manager";
|
||||
|
||||
interface ItemPickerProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
||||
label: string;
|
||||
type: ArtStyle;
|
||||
selected: boolean;
|
||||
onSelected: (picked: ArtStyle) => void;
|
||||
}
|
||||
|
||||
export const ItemPicker = ({
|
||||
label,
|
||||
type,
|
||||
selected = false,
|
||||
onSelected,
|
||||
...imgProps
|
||||
}: ItemPickerProps) => {
|
||||
const handleSelected = () => {
|
||||
onSelected(type);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={twMerge(
|
||||
"relative aspect-video cursor-pointer overflow-hidden rounded-lg border transition-colors ease-in-out",
|
||||
selected
|
||||
? "border-brand-primary"
|
||||
: "border-[#363636] hover:border-brand-primary",
|
||||
)}
|
||||
onClick={handleSelected}
|
||||
>
|
||||
<img className="h-full w-full object-cover" {...imgProps} alt="Style" />
|
||||
<div className="absolute bottom-0 left-0 h-1/2 w-full bg-gradient-to-t from-black/80 to-transparent" />
|
||||
<H4 className="absolute bottom-[6px] left-[8px] w-60 truncate text-start text-sm font-medium drop-shadow-lg">
|
||||
{label}
|
||||
</H4>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
className={`absolute right-1.5 top-1.5 h-[22px] w-[22px] transition-opacity duration-200 ease-in-out ${
|
||||
selected ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<path
|
||||
opacity="1"
|
||||
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c-9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
|
||||
fill="#FC6B68"
|
||||
/>
|
||||
<path
|
||||
d="M369 175c-9.4 9.4-9.4 24.6 0 33.9L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c-9.4-9.4 24.6-9.4 33.9 0z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
-51
@@ -1,51 +0,0 @@
|
||||
import { useContext } from "react";
|
||||
import { EngineContext } from "~/pages/PageScene/contexts/EngineContext";
|
||||
import { ArtStyle } from "~/pages/PageScene/engine/api_manager";
|
||||
import { styleList } from "~/pages/PageScene/styleList";
|
||||
import { ItemPicker } from "./ItemPicker";
|
||||
import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
|
||||
import { Modal } from "@storyteller/ui-modal";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
}
|
||||
export const StyleSelection = ({ onClose }: Props) => {
|
||||
const editorEngine = useContext(EngineContext);
|
||||
const selectedArtStyle = usePageSceneStore((s) => s.selectedArtStyle);
|
||||
const setSelectedArtStyle = usePageSceneStore((s) => s.setSelectedArtStyle);
|
||||
|
||||
const handlePickingStylizer = (picked: ArtStyle) => {
|
||||
setSelectedArtStyle(picked);
|
||||
if (editorEngine === null) {
|
||||
console.log("Editor is null");
|
||||
return;
|
||||
}
|
||||
editorEngine.art_style = picked;
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
title="Select a Style"
|
||||
className="max-w-6xl"
|
||||
>
|
||||
<div className="flex max-h-[700px] flex-col gap-4 overflow-y-auto rounded-t-lg bg-ui-panel">
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{styleList.map((style) => (
|
||||
<ItemPicker
|
||||
key={style.type}
|
||||
label={style.label}
|
||||
type={style.type}
|
||||
selected={selectedArtStyle === style.type}
|
||||
onSelected={handlePickingStylizer}
|
||||
src={style.image}
|
||||
className="aspect-video"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from "./StyleSelection";
|
||||
Reference in new issue
Block a user