WIP add favorites

packages/components/src/api/featured_items/CreateFeaturedItem.ts

@@ -0,0 +1,20 @@
+import MakeRequest from "../MakeRequest";
+
+export interface CreateFeaturedItemRequest {
+  entity_token: string,
+  entity_type: string,
+}
+
+export interface CreateFeaturedItemResponse {
+  success: boolean
+}
+
+export const CreateFeaturedItem = MakeRequest<
+  string, 
+  CreateFeaturedItemRequest, 
+  CreateFeaturedItemResponse,
+  {}
+>({
+  method: "POST",
+  routingFunction: () => "/v1/featured_item/create",
+});

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -36,13 +36,15 @@ import { useBookmarks, useMedia, useRatings, useSession } from "hooks";
 import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
 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 { mediaTypeLabels } from "utils/mediaTypeLabels";
 import { EngineMediaPanel } from "./components/EngineMediaPanel/EngineMediaPanel";
 import { GetMediaFileTitle } from "common/GetMediaFileTitle";
 import { STYLES_BY_KEY } from "common/StyleOptions";
+import { faStarShooting } from "@fortawesome/pro-duotone-svg-icons";
 
 export default function MediaPage() {
-  const { canAccessStudio, canEditMediaFile, user } = useSession();
+  const { canAccessStudio, canEditMediaFile, canBanUsers, user } = useSession();
   const { token } = useParams<{ token: string }>();
   const bookmarks = useBookmarks();
   const ratings = useRatings();
@@ -70,6 +72,8 @@ export default function MediaPage() {
     mediaFile?.maybe_creator_user?.user_token || ""
   );
 
+  const viewerCanMakeFeatured = canBanUsers() || false;
+
   // Inside MediaPage.tsx
 
   useEffect(() => {
@@ -99,6 +103,22 @@ export default function MediaPage() {
 
   const deleteMedia = () => remove(!!user?.can_ban_users);
 
+  const handleFeatureMedia = async () => {
+    setFeatureMedia(true);
+  }
+
+  const setFeatureMedia = async (setFeatured: boolean) => {
+    if (mediaFile === undefined) {
+      return;
+    }
+
+    const request = {
+      entity_type: "media_file",
+      entity_token: mediaFile.token
+    }
+    await CreateFeaturedItem("", request);
+  }
+
   const copyToClipboard = async (
     text: string,
     setButtonText: React.Dispatch<React.SetStateAction<string>>
@@ -832,6 +852,19 @@ export default function MediaPage() {
                   </div>
                 </>
               )}
+              { viewerCanMakeFeatured && (
+                <>
+                  <div className="d-flex gap-2">
+                    <Button
+                      full={true}
+                      variant="secondary"
+                      icon={faStarShooting}
+                      label="Set Featured"
+                      onClick={handleFeatureMedia}
+                    />
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </div>