diff --git a/packages/components/src/api/featured_items/DeleteFeaturedItem.ts b/packages/components/src/api/featured_items/DeleteFeaturedItem.ts new file mode 100644 index 000000000..43d056b2d --- /dev/null +++ b/packages/components/src/api/featured_items/DeleteFeaturedItem.ts @@ -0,0 +1,20 @@ +import MakeRequest from "../MakeRequest"; + +export interface DeleteFeaturedItemRequest { + entity_token: string, + entity_type: string, +} + +export interface DeleteFeaturedItemResponse { + success: boolean +} + +export const DeleteFeaturedItem = MakeRequest< + string, + DeleteFeaturedItemRequest, + DeleteFeaturedItemResponse, + {} +>({ + method: "DELETE", + routingFunction: () => "/v1/featured_item/delete", +}); \ No newline at end of file diff --git a/packages/components/src/api/media_files/GetMedia.ts b/packages/components/src/api/media_files/GetMedia.ts index b46a633e2..e8e3c18ca 100644 --- a/packages/components/src/api/media_files/GetMedia.ts +++ b/packages/components/src/api/media_files/GetMedia.ts @@ -19,8 +19,7 @@ export interface MediaFile { maybe_creator_user: UserDetailsLight | null; maybe_prompt_token: string | null; creator_set_visibility: string; - created_at: Date; - updated_at: Date; + is_featured: boolean; maybe_model_weight_info: { title: string; weight_token: string; @@ -36,6 +35,8 @@ export interface MediaFile { }, maybe_cover_image_public_bucket_path: string | null }; + created_at: Date; + updated_at: Date; } export interface GetMediaRequest {} diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index f5d00e7b1..9209d37d7 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -37,6 +37,7 @@ import { WeightCategory } from "@storyteller/components/src/api/_common/enums/We import SdBatchMediaPanel from "./components/SdBatchMediaPanel/SdBatchMediaPanel"; import { GetMediaBatchImages } from "@storyteller/components/src/api/media_files/GetMediaBatchImages"; import { CreateFeaturedItem } from "@storyteller/components/src/api/featured_items/CreateFeaturedItem"; +import { DeleteFeaturedItem } from "@storyteller/components/src/api/featured_items/DeleteFeaturedItem"; import { mediaTypeLabels } from "utils/mediaTypeLabels"; import { EngineMediaPanel } from "./components/EngineMediaPanel/EngineMediaPanel"; import { GetMediaFileTitle } from "common/GetMediaFileTitle"; @@ -104,7 +105,7 @@ export default function MediaPage() { const deleteMedia = () => remove(!!user?.can_ban_users); const handleFeatureMedia = async () => { - setFeatureMedia(true); + setFeatureMedia(!mediaFile?.is_featured); } const setFeatureMedia = async (setFeatured: boolean) => { @@ -116,7 +117,16 @@ export default function MediaPage() { entity_type: "media_file", entity_token: mediaFile.token } - await CreateFeaturedItem("", request); + + // NB: Victor, I don't know how to re-query media with the media context thing. :( + // Sorry, I'm forcing a page reload instead. I know this sucks. + if (setFeatured) { + await CreateFeaturedItem("", request); + window.location.reload(); + } else { + await DeleteFeaturedItem("", request); + window.location.reload(); + } } const copyToClipboard = async ( @@ -859,7 +869,7 @@ export default function MediaPage() { full={true} variant="secondary" icon={faStarShooting} - label="Set Featured" + label={mediaFile?.is_featured ? "Remove Featured" : "Set Featured"} onClick={handleFeatureMedia} />