From 448501d83c2f171ae342277da6cf98577617e920 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Tue, 30 Apr 2024 12:13:02 -0700
Subject: [PATCH 1/9] added clip length to /style-video

---
 .../v2/view/pages/style-video/StyleVideo.tsx  | 144 ++++++++++++------
 1 file changed, 96 insertions(+), 48 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
index 398d4283cb..43be8c4455 100644
--- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
@@ -2,11 +2,18 @@ import React, { useState } from "react";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { v4 as uuidv4 } from "uuid";
 import { useInferenceJobs, useSession } from "hooks";
-import { Button, Container, Panel, TextArea, TempSelect as Select } from "components/common";
+import {
+  Button,
+  Container,
+  Panel,
+  SegmentButtons,
+  TextArea,
+  TempSelect as Select,
+} from "components/common";
 import { EntityInput } from "components/entities";
 import {
   EnqueueVST,
-  EnqueueVSTResponse
+  EnqueueVSTResponse,
 } from "@storyteller/components/src/api/video_styleTransfer/Enqueue_VST";
 import "./StyleVideo.scss";
 import { useParams } from "react-router-dom";
@@ -19,24 +26,28 @@ export default function StyleVideo() {
   const [mediaToken, mediaTokenSet] = useState(pageMediaToken || "");
   const [prompt, promptSet] = useState("");
   const [negativePrompt, negativePromptSet] = useState("");
+  const [length, lengthSet] = useState(3000);
   const { enqueue } = useInferenceJobs();
 
   const onClick = () => {
     if (mediaToken) {
-      EnqueueVST("",{
+      EnqueueVST("", {
         creator_set_visibility: "private",
         enable_lipsync: true,
         input_file: mediaToken,
         negative_prompt: negativePrompt,
         prompt,
         style,
-        trim_end_millis: 3000,
+        trim_end_millis: length,
         trim_start_millis: 0,
-        uuid_idempotency_token: uuidv4()
-      })
-      .then((res: EnqueueVSTResponse) => {
+        uuid_idempotency_token: uuidv4(),
+      }).then((res: EnqueueVSTResponse) => {
         if (res.success && res.inference_job_token) {
-          enqueue(res.inference_job_token,true,FrontendInferenceJobType.VideoStyleTransfer);
+          enqueue(
+            res.inference_job_token,
+            true,
+            FrontendInferenceJobType.VideoStyleTransfer
+          );
         } else {
           console.log("Failed to enqueue job", res);
         }
@@ -44,55 +55,92 @@ export default function StyleVideo() {
     }
   };
 
-  const options = STYLE_OPTIONS.map((option) => {
+  const styleOptions = STYLE_OPTIONS.map(option => {
     return {
-      label: option.label, 
+      label: option.label,
       value: option.value,
-    }
+    };
   });
 
-  return studioAccessCheck(<Container {...{ className: "fy-style-video-page mt-5", type: "panel" }}>
+  const lengthOptions = [
+    { label: 3, value: 3000 },
+    { label: 5, value: 5000 },
+    { label: 7, value: 7000 },
+  ];
+
+  return studioAccessCheck(
+    <Container {...{ className: "fy-style-video-page mt-5", type: "panel" }}>
       <Panel {...{ padding: true }}>
         <header className="d-flex gap-3 flex-wrap">
-          <h1 className="fw-semibold">
-            Style a Video
-          </h1>
+          <h1 className="fw-semibold">Style a Video</h1>
         </header>
-        <EntityInput {...{
-          accept: ["video"],
-          aspectRatio: "landscape",
-          label: "Choose a video",
-          name: "mediaToken",
-          value: pageMediaToken,
-          onChange: ({ target }: { target: any }) => { mediaTokenSet(target.value) },
-          type: "media"
-        }}/>
-        <Select {...{
-          label: "Style",
-          onChange: ({ target }: { target: any }) => { styleSet(target.value) },
-          options,
-          value: style
-        }}/>
+        <EntityInput
+          {...{
+            accept: ["video"],
+            aspectRatio: "landscape",
+            label: "Choose a video",
+            name: "mediaToken",
+            value: pageMediaToken,
+            onChange: ({ target }: { target: any }) => {
+              mediaTokenSet(target.value);
+            },
+            type: "media",
+          }}
+        />
+        <Select
+          {...{
+            label: "Style",
+            onChange: ({ target }: { target: any }) => {
+              styleSet(target.value);
+            },
+            options: styleOptions,
+            value: style,
+          }}
+        />
         <div {...{ className: "prompt-row" }}>
-          <TextArea {...{
-            label: "Positive prompt",
-            rows: 5,
-            onChange: ({ target }: { target: any }) => { promptSet(target.value) },
-          }}/>
-          <TextArea {...{
-            label: "Negative prompt",
-            rows: 5,
-            onChange: ({ target }: { target: any }) => { negativePromptSet(target.value) },
-          }}/>
+          <TextArea
+            {...{
+              label: "Positive prompt",
+              rows: 5,
+              onChange: ({ target }: { target: any }) => {
+                promptSet(target.value);
+              },
+            }}
+          />
+          <TextArea
+            {...{
+              label: "Negative prompt",
+              rows: 5,
+              onChange: ({ target }: { target: any }) => {
+                negativePromptSet(target.value);
+              },
+            }}
+          />
+        </div>
+        <div {...{ className: "prompt-row" }}>
+          <SegmentButtons
+            {...{
+              className: "fy-style-video-length",
+              label: "Final video length (seconds)",
+              onChange: ({ target }: { target: any }) => {
+                lengthSet(target.value);
+              },
+              options: lengthOptions,
+              value: length,
+            }}
+          />
         </div>
         <div {...{ className: "d-flex justify-content-center mt-3" }}>
-          <Button {...{
-            disabled: !mediaToken,
-            label: "Style",
-            onClick,
-            variant: "primary"
-          }} />
+          <Button
+            {...{
+              disabled: !mediaToken,
+              label: "Style",
+              onClick,
+              variant: "primary",
+            }}
+          />
         </div>
       </Panel>
-   </Container>);
-};
\ No newline at end of file
+    </Container>
+  );
+}

From 2a4a8eceb1af0d511982d3276522399f9018bd95 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 4 May 2024 15:47:18 -0400
Subject: [PATCH 2/9] new styles

---
 .../fakeyou.com/src/common/StyleOptions.ts    | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/packages/fakeyou.com/src/common/StyleOptions.ts b/packages/fakeyou.com/src/common/StyleOptions.ts
index 52ff9a9091..e6e2be5dcf 100644
--- a/packages/fakeyou.com/src/common/StyleOptions.ts
+++ b/packages/fakeyou.com/src/common/StyleOptions.ts
@@ -17,6 +17,24 @@ export type VstStyle
 	| "pop_art"
 	| "realistic_1"
 	| "realistic_2"
+
+	| "hr_giger"
+	| "simpsons"
+	| "carnage"
+	| "pastel_cute_anime"
+	| "bloom_lighting"
+	| "25d_horror"
+	| "creepy"
+	| "creepy_vhs"
+	| "trail_cam_footage"
+	| "old_black_white_movie"
+	| "horror_noir_black_white"
+	| "techno_noir_black_white"
+	| "black_white_20s"
+	| "cyberpunk_anime"
+	| "dragonball"
+	| "realistic_matrix"
+	| "realistic_cyberpunk"
 	;
 
 // Definition of the different options.
@@ -102,6 +120,80 @@ export const STYLE_OPTIONS: readonly StyleOption[] = [
 		label: "Realistic 2",
 		value: "realistic_2",
 	},
+
+
+	{
+		label: "HR Giger",
+		value: "hr_giger",
+	},
+	{
+		label: "Simpsons",
+		value: "simpsons",
+	},
+	{
+		label: "Carnage",
+		value: "carnage",
+	},
+	{
+		label: "Anime Pastel Cute",
+		value: "pastel_cute_anime",
+	},
+	{
+		label: "iBloom Lighting",
+		value: "bloom_lighting",
+	},
+	{
+		label: "Horror 2.5D",
+		value: "25d_horror",
+	},
+	{
+		label: "Creepy",
+		value: "creepy",
+	},
+	{
+		label: "Creepy VHS",
+		value: "creepy_vhs",
+	},
+	{
+		label: "Trail Cam Footage",
+		value: "trail_cam_footage",
+	},
+	{
+		label: "Old Black and White Movie",
+		value: "old_black_white_movie",
+	},
+	{
+		label: "Horror Noir Black and White",
+		value: "horror_noir_black_white",
+	},
+	{
+		label: "Techno Noir Black and White",
+		value: "techno_noir_black_white",
+	},
+	{
+		label: "Black White 20s",
+		value: "black_white_20s",
+	},
+	{
+		label: "Cyberpunk Anime",
+		value: "cyberpunk_anime",
+	},
+	{
+		label: "Dragonball",
+		value: "dragonball",
+	},
+	{
+		label: "Realistic Matrix",
+		value: "realistic_matrix",
+	},
+	{
+		label: "Realistic Cyberpunk",
+		value: "realistic_cyberpunk",
+	},
+
+
+
+
 ];
 
 export const STYLES_BY_KEY : Map<string, StyleOption> = new Map(STYLE_OPTIONS.map((opt) => [opt.value, opt]));

From 97c2ae7452a319d797d7edeb678fdc4d5b5a307b Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sun, 5 May 2024 16:27:17 -0700
Subject: [PATCH 3/9] WIP add favorites

---
 .../api/featured_items/CreateFeaturedItem.ts  | 20 +++++++++++
 .../src/v2/view/pages/media/MediaPage.tsx     | 35 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/api/featured_items/CreateFeaturedItem.ts

diff --git a/packages/components/src/api/featured_items/CreateFeaturedItem.ts b/packages/components/src/api/featured_items/CreateFeaturedItem.ts
new file mode 100644
index 0000000000..e29fa7452c
--- /dev/null
+++ b/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",
+});
\ No newline at end of file
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 2f240db072..f5d00e7b11 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+++ b/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>

From 0c4283fa691bec5a7f51d1ed3f11dcd30e438d1b Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 6 May 2024 14:17:23 -0700
Subject: [PATCH 4/9] Featured Media tab wrired up with lazy loading
 pagination, added media/weight category translation labels

---
 .../public/locales/en/EntityGeneral.json      |  24 +-
 .../src/components/entities/EntityTypes.tsx   |  97 +++---
 .../view/pages/explore/tabs/FeaturedTab.tsx   | 288 ++++++++++--------
 3 files changed, 244 insertions(+), 165 deletions(-)

diff --git a/packages/fakeyou.com/public/locales/en/EntityGeneral.json b/packages/fakeyou.com/public/locales/en/EntityGeneral.json
index 1800d1ac4b..a4fa438da5 100644
--- a/packages/fakeyou.com/public/locales/en/EntityGeneral.json
+++ b/packages/fakeyou.com/public/locales/en/EntityGeneral.json
@@ -1,4 +1,24 @@
 {
+  "MediaCategories": {
+    "all": "All",
+    "audio": "Audio",
+    "image": "Image",
+    "video": "Video",
+    "engine_asset": "3D Asset"
+  },
+  "MediaCategoriesPlural": {
+    "all": "All",
+    "audio": "Audio",
+    "image": "Images",
+    "video": "Videos",
+    "engine_asset": "3D Assets"
+  },
+  "WeightsCategories": {
+    "all": "All",
+    "faceAnimation": "Face Animator",
+    "tts": "Text to speech",
+    "voiceConversion": "Voice conversion"
+  },
   "WeightTypes": {
     "all": "All weights",
     "hifigan_tt2": "HiFi-GAN TT2",
@@ -20,5 +40,5 @@
     "glb": "GLB",
     "gltf": "gltf",
     "fbx": "FBX"
-  },
-}
\ No newline at end of file
+  }
+}
diff --git a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
index 597df501a1..ae3d2b280e 100644
--- a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
+++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
@@ -1,6 +1,6 @@
 import { enumToKeyArr } from "resources";
 import { UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia";
-import { UploadEngineAssetResponse }from "@storyteller/components/src/api/media_files/UploadEngineAsset";
+import { UploadEngineAssetResponse } from "@storyteller/components/src/api/media_files/UploadEngineAsset";
 
 // 1
 
@@ -10,7 +10,7 @@ import { UploadEngineAssetResponse }from "@storyteller/components/src/api/media_
 export enum EntityType {
   unknown,
   media,
-  weights
+  weights,
 }
 
 // 2
@@ -23,14 +23,14 @@ export enum MediaFilters {
   audio,
   image,
   video,
-  engine_asset
+  engine_asset,
 }
 
 export enum WeightsCategories {
   all,
   faceAnimation,
   tts,
-  voiceConversion
+  voiceConversion,
 }
 
 // 3
@@ -49,7 +49,7 @@ export enum WeightsFilters {
   so_vits_svc,
   tt2,
   loRA,
-  vall_e
+  vall_e,
 }
 
 // media file types
@@ -60,17 +60,17 @@ export enum EngineTypes {
   glb,
   gltf,
   obj,
-  ron
+  ron,
 }
 
 export enum AudioTypes {
   mp3,
-  wav
+  wav,
 }
 
 export enum ImageTypes {
   jpg,
-  png
+  png,
 }
 
 export enum VideoTypes {
@@ -128,15 +128,19 @@ export type JobSelection = WeightCategoriesProp | WeightFilterProp;
 export type UploaderResponse = UploadEngineAssetResponse | UploadMediaResponse;
 
 export const ListEntityFilters = (mode?: EntityInputMode) => {
-
   // this an object of all types
   // in most cases it is better to have granular caterogization of types
   // but because any entity can/could(?) be bookmarked all types are agregated here
   // this is condensed because typescript didn't like when I broke it apart.
   // Will clean up soon, I promise
-  const bookmarkFilters = Object.keys({ ...MediaFilters, ...WeightsFilters }).filter(val => isNaN(Number(val))).reduce((obj,current) => ({ ...obj, [current]: current  }),{});
+  const bookmarkFilters = Object.keys({ ...MediaFilters, ...WeightsFilters })
+    .filter(val => isNaN(Number(val)))
+    .reduce((obj, current) => ({ ...obj, [current]: current }), {});
 
-  const selectedFilters = mode !== undefined ? [bookmarkFilters,MediaFilters,WeightsFilters,WeightsFilters][mode] : EntityInputMode;
+  const selectedFilters =
+    mode !== undefined
+      ? [bookmarkFilters, MediaFilters, WeightsFilters, WeightsFilters][mode]
+      : EntityInputMode;
 
   return Object.values(selectedFilters).filter(val => isNaN(Number(val)));
 };
@@ -145,36 +149,59 @@ export const ListEntityFilters = (mode?: EntityInputMode) => {
 // note the use t() to translate labels
 // this allows easily maintained translations for inputs
 
-export const EntityFilterOptions = (mode?: EntityInputMode, t = (v:string) => v) => {
-  return ListEntityFilters(mode).map((value) => {
-    if (typeof value === "string") return { value, label: t(value) }
-    return { label: "all", value: "all" };
+export const EntityFilterOptions = (
+  mode?: EntityInputMode,
+  t = (v: string) => v
+) => {
+  const translationNamespaces = [
+    "BookmarksCategories",
+    "MediaCategoriesPlural",
+    "WeightsCategories",
+    "WeightsCategories",
+  ];
+  const selectedNamespace = translationNamespaces[mode || -1];
+  return ListEntityFilters(mode).map(value => {
+    if (typeof value === "string")
+      return {
+        value,
+        label:
+          selectedNamespace !== undefined
+            ? t(`${selectedNamespace}.${value}`)
+            : value,
+      };
+    return { label: t(`${selectedNamespace}.all`), value: "all" };
   });
 };
 
-export const getMediaTypesByCategory = (mediaCategory: MediaFilters) => enumToKeyArr([
-  { ...AudioTypes, ...ImageTypes, ...VideoTypes, ...EngineTypes },
-  AudioTypes,
-  ImageTypes,
-  VideoTypes,
-  EngineTypes
-][mediaCategory]);
+export const getMediaTypesByCategory = (mediaCategory: MediaFilters) =>
+  enumToKeyArr(
+    [
+      { ...AudioTypes, ...ImageTypes, ...VideoTypes, ...EngineTypes },
+      AudioTypes,
+      ImageTypes,
+      VideoTypes,
+      EngineTypes,
+    ][mediaCategory]
+  );
 
-export const isSelectedType = (mediaCategory: MediaFilters, fileExtension: string) =>
-  getMediaTypesByCategory(mediaCategory).includes(fileExtension);
+export const isSelectedType = (
+  mediaCategory: MediaFilters,
+  fileExtension: string
+) => getMediaTypesByCategory(mediaCategory).includes(fileExtension);
 
-export const mediaCategoryfromString = (categoryStr: string) => enumToKeyArr(MediaFilters).indexOf(categoryStr);
+export const mediaCategoryfromString = (categoryStr: string) =>
+  enumToKeyArr(MediaFilters).indexOf(categoryStr);
 
 //renaming to getMediaCatgoryByType
 export const getMediaCategory = (fileExtension: string) => {
-  isSelectedType(MediaFilters.image,fileExtension);
-  if (isSelectedType(MediaFilters.engine_asset, fileExtension)) return MediaFilters.engine_asset;
-  if (isSelectedType(MediaFilters.audio, fileExtension)) return MediaFilters.audio;
-  if (isSelectedType(MediaFilters.image, fileExtension)) return MediaFilters.image;
-  if (isSelectedType(MediaFilters.video, fileExtension)) return MediaFilters.video;
+  isSelectedType(MediaFilters.image, fileExtension);
+  if (isSelectedType(MediaFilters.engine_asset, fileExtension))
+    return MediaFilters.engine_asset;
+  if (isSelectedType(MediaFilters.audio, fileExtension))
+    return MediaFilters.audio;
+  if (isSelectedType(MediaFilters.image, fileExtension))
+    return MediaFilters.image;
+  if (isSelectedType(MediaFilters.video, fileExtension))
+    return MediaFilters.video;
   return MediaFilters.all; // will change to "unknown" eventually
-}
-
-
-
-
+};
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
index 99b4301b73..8dfa7e3a48 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
@@ -1,152 +1,184 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import MediaCards from "components/common/Card/MediaCards";
-import { Link } from "react-router-dom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
-import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
-import { useBookmarks, useRatings } from "hooks";
-import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
-import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
+import { Button, TempSelect as Select } from "components/common";
+import {
+  faArrowDownWideShort,
+  faFilter,
+} from "@fortawesome/pro-solid-svg-icons";
+import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
 import SkeletonCard from "components/common/Card/SkeletonCard";
-// import { SegmentButtons } from "components/common";
-import "./FeaturedTab.scss";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+import {
+  useBookmarks,
+  useLazyLists,
+  useLocalize,
+  useOnScreen,
+  useRatings,
+} from "hooks";
+import InfiniteScroll from "react-infinite-scroll-component";
+import prepFilter from "resources/prepFilter";
+import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
+import {
+  EntityInputMode,
+  EntityFilterOptions,
+} from "components/entities/EntityTypes";
 
-export default function FeaturedTab() {
-  const { pathname: source } = useLocation();
+export default function MediaTab() {
+  const { pathname: source, search } = useLocation();
+  const urlQueries = new URLSearchParams(search);
   const bookmarks = useBookmarks();
   const ratings = useRatings();
+  const toTopBtnRef = useRef<HTMLDivElement | null>(null);
+  const onScreen = useOnScreen(toTopBtnRef, "0px");
+  const { t } = useLocalize("EntityGeneral");
+
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const [mediaType, mediaTypeSet] = useState(
+    urlQueries.get("filter_media_type") || "all"
+  );
+  const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<MediaFile[]>([]);
-  const [listType,
-  // listTypeSet
-  ] = useState("media");
-  // const [showMasonryGrid, setShowMasonryGrid] = useState(true);
-  const [status, statusSet] = useState(FetchStatus.ready);
-  const isLoading =
-    status === FetchStatus.ready || status === FetchStatus.in_progress;
+  const media = useLazyLists({
+    addQueries: {
+      page_size: urlQueries.get("page_size") || "24",
+      ...prepFilter(mediaType, "filter_media_type"),
+    },
+    addSetters: { mediaTypeSet },
+    fetcher: ListFeaturedMediaFiles,
+    list,
+    listSet,
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: res => {
+      ratings.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
+      bookmarks.gather({ res, expand: true, key: "token" }); // expand rather than replace for lazy loading
+      setShowMasonryGrid(true);
+    },
+    requestList: true,
+  });
 
-  // const options = [{ label: "Media", value: "media" },{ label: "Weights", value: "weight" }];
-  // const onChange = ({ target }: any) => {
-  //   listTypeSet(target.value === "weight" ? target.value : "media");
-  //   // clear list
-  //   // statusSet(FetchStatus.ready)
-  // };
+  const filterOptions = EntityFilterOptions(EntityInputMode.media, t);
 
-  useEffect(() => {
-    if (status === FetchStatus.ready) {
-      statusSet(FetchStatus.in_progress);
-      if (listType === "media") {
-        ListFeaturedMediaFiles("", {}).then((res: any) => {
-          console.log("🏮", res);
-          statusSet(FetchStatus.success);
-          if (res.results) {
-            listSet(res.results);
-          }
-        });
-      } 
-      // else if (listType === "weight") {}
-    }
-  }, [listType, status]);
+  const sortOptions = [
+    { value: false, label: "Newest" },
+    { value: true, label: "Oldest" },
+    // { value: "mostliked", label: "Most Liked" },
+  ];
 
   return (
-    <div className="d-flex flex-column gap-4">
-      <div>
-        <div className="fy-featured-header mb-3">
-          <h3 className="fw-semibold mb-0">Featured</h3>
-          {
-           // <SegmentButtons {...{ onChange, options, value: listType }}/> // switch between media/weights control
-          }
-          <Link to="/explore/media">
-            View media
-            <FontAwesomeIcon icon={faChevronRight} className="ms-2" />
-          </Link>
+    <>
+      <div className="d-flex flex-wrap gap-3 mb-3">
+        <div className="d-flex flex-grow-1 flex-wrap gap-2">
+          <Select
+            {...{
+              icon: faArrowDownWideShort,
+              options: sortOptions,
+              name: "sort",
+              onChange: media.onChange,
+              value: media.sort,
+            }}
+          />
+          <Select
+            {...{
+              icon: faFilter,
+              options: filterOptions,
+              name: "mediaType",
+              onChange: media.onChange,
+              value: mediaType,
+            }}
+          />
         </div>
-
-        {isLoading && !list.length ? (
+        {media.urlCursor ? (
+          <div>
+            <Button
+              {...{
+                className: `to-top-button`,
+                buttonRef: toTopBtnRef,
+                label: "Back to top",
+                onClick: () => media.reset(),
+                small: true,
+              }}
+            />
+          </div>
+        ) : null}
+      </div>
+      {media.urlCursor && !onScreen ? (
+        <Button
+          {...{
+            className: `to-top-button-off-screen`,
+            label: "Back to top",
+            onClick: () => media.reset(),
+            small: true,
+          }}
+        />
+      ) : null}
+      <AudioPlayerProvider>
+        {media.isLoading && !media.list.length ? (
           <div className="row gx-3 gy-3">
             {Array.from({ length: 12 }).map((_, index) => (
               <SkeletonCard key={index} />
             ))}
           </div>
         ) : (
-          <>
-            {list.length === 0 && status === 3 ? (
-              <div className="text-center mt-4 opacity-75">
-                No featured media.
-              </div>
-            ) : (
-              <MasonryGrid
-                gridRef={gridContainerRef}
-                onLayoutComplete={() => console.log("Layout complete!")}
-              >
-                {list.map((data: any, key: number) => {
-                  let props = {
-                    bookmarks,
-                    data,
-                    ratings,
-                    showCreator: true,
-                    source,
-                    type: "media",
-                  };
-
-                  return (
-                    <div
-                      {...{
-                        className: "col-12 col-sm-6 col-xl-4 grid-item",
-                        key,
-                      }}
-                    >
-                      <MediaCards {...{ type: data.media_type, props }} />
-                    </div>
-                  );
-                })}
-              </MasonryGrid>
-            )}
-          </>
-        )}
-      </div>
-      {/* <div>
-        <div className="d-flex align-items-center mb-3">
-          <h3 className="fw-semibold mb-0 flex-grow-1">
-            Featured Image Weights
-          </h3>
-          <Link to="/explore/weights">
-            View all
-            <FontAwesomeIcon icon={faChevronRight} className="ms-2" />
-          </Link>
-        </div>
-
-        {isLoading ? (
-          <div className="row gx-3 gy-3">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <SkeletonCard key={index} />
-            ))}
-          </div>
-        ) : (
-          <MasonryGrid
-            gridRef={gridContainerRef}
-            onLayoutComplete={() => console.log("Layout complete!")}
-          >
-            {data.map((data, index) => {
-              let card = (
-                <ImageCard
-                  key={index}
-                  data={data}
-                  type="weights"
-                  showCreator={true}
-                />
-              );
-              return (
-                <div key={index} className="col-12 col-sm-6 col-xl-4 grid-item">
-                  {card}
+          <InfiniteScroll
+            dataLength={media.list.length}
+            next={media.getMore}
+            hasMore={!media.list.length || !!media.next}
+            loader={
+              media.list.length !== 0 &&
+              media.isLoading && (
+                <div className="mt-4 d-flex justify-content-center">
+                  <div className="spinner-border text-light" role="status">
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
                 </div>
-              );
-            })}
-          </MasonryGrid>
+              )
+            }
+            endMessage={
+              <p className="text-center mt-4 opacity-75">No more results.</p>
+            }
+            className="overflow-hidden"
+          >
+            {showMasonryGrid && (
+              <>
+                {media.list.length === 0 && media.status === 3 ? (
+                  <div className="text-center mt-4 opacity-75">
+                    No media created yet.
+                  </div>
+                ) : (
+                  <MasonryGrid
+                    gridRef={gridContainerRef}
+                    onLayoutComplete={() => console.log("Layout complete!")}
+                  >
+                    {media.list.map((data: any, key: number) => {
+                      let props = {
+                        bookmarks,
+                        data,
+                        source,
+                        ratings,
+                        type: "media",
+                        showCreator: true,
+                      };
+
+                      return (
+                        <div
+                          {...{
+                            className: "col-12 col-sm-6 col-xl-4 grid-item",
+                            key,
+                          }}
+                        >
+                          <MediaCards {...{ type: data.media_type, props }} />
+                        </div>
+                      );
+                    })}
+                  </MasonryGrid>
+                )}
+              </>
+            )}
+          </InfiniteScroll>
         )}
-      </div> */}
-    </div>
+      </AudioPlayerProvider>
+    </>
   );
 }

From afc4ea70697ad62dca5f40bb9ae23e3cd9ca66d3 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 7 May 2024 16:19:35 -0700
Subject: [PATCH 5/9] delete featured state

---
 .../api/featured_items/DeleteFeaturedItem.ts  | 20 +++++++++++++++++++
 .../src/api/media_files/GetMedia.ts           |  5 +++--
 .../src/v2/view/pages/media/MediaPage.tsx     | 16 ++++++++++++---
 3 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/api/featured_items/DeleteFeaturedItem.ts

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 0000000000..43d056b2d8
--- /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 b46a633e23..e8e3c18ca9 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 f5d00e7b11..9209d37d7b 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}
                     />
                   </div>

From fb163369b9bc73e171676a47865836e406f153b9 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 7 May 2024 17:42:19 -0700
Subject: [PATCH 6/9] default to showing featured videos

---
 .../fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
index 8dfa7e3a48..e9ae12a539 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
@@ -36,7 +36,7 @@ export default function MediaTab() {
 
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [mediaType, mediaTypeSet] = useState(
-    urlQueries.get("filter_media_type") || "all"
+    urlQueries.get("filter_media_type") || "video"
   );
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<MediaFile[]>([]);

From 62d655143e09e2cfca39a2ceb144a7748e375ac8 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 7 May 2024 18:27:42 -0700
Subject: [PATCH 7/9] fix build error

---
 .../src/components/common/Scene3D/GetEngineUrl.test.ts           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.test.ts b/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.test.ts
index 2459220917..5870826531 100644
--- a/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.test.ts
+++ b/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.test.ts
@@ -75,6 +75,7 @@ describe('media files', () => {
       updated_at: new Date(),
       maybe_creator_user: null,
       creator_set_visibility: "public",
+      is_featured: false,
       // TODO(bt,2024-03-11): Make these fields optional
       maybe_model_weight_info: {
         title: "title",

From 0aada67d1381cf2c524f60c11f33416cc42e29a6 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 7 May 2024 18:33:30 -0700
Subject: [PATCH 8/9] simplify production deploy scripts

---
 ...uction_fakeyou.sh => publish_production.sh |  0
 publish_production_storyteller.sh             | 21 -------------------
 publish_production_trumped.sh                 | 21 -------------------
 3 files changed, 42 deletions(-)
 rename publish_production_fakeyou.sh => publish_production.sh (100%)
 delete mode 100755 publish_production_storyteller.sh
 delete mode 100755 publish_production_trumped.sh

diff --git a/publish_production_fakeyou.sh b/publish_production.sh
similarity index 100%
rename from publish_production_fakeyou.sh
rename to publish_production.sh
diff --git a/publish_production_storyteller.sh b/publish_production_storyteller.sh
deleted file mode 100755
index 129cac9e4b..0000000000
--- a/publish_production_storyteller.sh
+++ /dev/null
@@ -1,21 +0,0 @@
-#!/bin/bash
-
-set -euxo pipefail
-
-MASTER_BRANCH='master'
-PRODUCTION_BRANCH='production-storyteller'
-
-git stash
-git checkout $MASTER_BRANCH
-git pull
-
-if git show-ref --verify --quiet "refs/heads/$PRODUCTION_BRANCH"; then
-    echo "Deleting branch ${PRODUCTION_BRANCH}"
-    git branch -D $PRODUCTION_BRANCH
-fi
-
-git checkout -b $PRODUCTION_BRANCH
-git push --set-upstream origin $PRODUCTION_BRANCH
-
-git checkout $MASTER_BRANCH
-
diff --git a/publish_production_trumped.sh b/publish_production_trumped.sh
deleted file mode 100755
index 8fafb8d67f..0000000000
--- a/publish_production_trumped.sh
+++ /dev/null
@@ -1,21 +0,0 @@
-#!/bin/bash
-
-set -euxo pipefail
-
-MASTER_BRANCH='master'
-PRODUCTION_BRANCH='production-trumped'
-
-git stash
-git checkout $MASTER_BRANCH
-git pull
-
-if git show-ref --verify --quiet "refs/heads/$PRODUCTION_BRANCH"; then
-    echo "Deleting branch ${PRODUCTION_BRANCH}"
-    git branch -D $PRODUCTION_BRANCH
-fi
-
-git checkout -b $PRODUCTION_BRANCH
-git push --set-upstream origin $PRODUCTION_BRANCH
-
-git checkout $MASTER_BRANCH
-

From 21031944b1ff4d3da164eb1ed1688584b955a384 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Tue, 7 May 2024 23:17:22 -0700
Subject: [PATCH 9/9] added links to media pages for engine scene files

---
 .../src/api/_common/enums/MediaFileType.ts    |  3 +
 .../fakeyou.com/src/utils/mediaTypeLabels.ts  |  1 +
 .../src/v2/view/pages/media/MediaPage.tsx     | 83 ++++++++++++-------
 3 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/packages/components/src/api/_common/enums/MediaFileType.ts b/packages/components/src/api/_common/enums/MediaFileType.ts
index 4ca8a0b07f..0098e692db 100644
--- a/packages/components/src/api/_common/enums/MediaFileType.ts
+++ b/packages/components/src/api/_common/enums/MediaFileType.ts
@@ -24,5 +24,8 @@ export enum MediaFileType {
   // This is a temporary format that will eventually go away.
   SceneRon = "scene_ron",
 
+  // Engine scene
+  SceneJson = "scene_json",
+
   None = "none",
 }
diff --git a/packages/fakeyou.com/src/utils/mediaTypeLabels.ts b/packages/fakeyou.com/src/utils/mediaTypeLabels.ts
index d86c3d4c1a..9f21ccb212 100644
--- a/packages/fakeyou.com/src/utils/mediaTypeLabels.ts
+++ b/packages/fakeyou.com/src/utils/mediaTypeLabels.ts
@@ -9,6 +9,7 @@ export const mediaTypeLabels = {
   [MediaFileType.GLB]: "GLB",
   [MediaFileType.GLTF]: "glTF",
   [MediaFileType.SceneRon]: "RON",
+  [MediaFileType.SceneJson]: "Scene",
   [MediaFileType.FBX]: "FBX",
   [MediaFileType.None]: "Unknown",
 };
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 9209d37d7b..bcf6f0c27f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
@@ -106,7 +106,7 @@ export default function MediaPage() {
 
   const handleFeatureMedia = async () => {
     setFeatureMedia(!mediaFile?.is_featured);
-  }
+  };
 
   const setFeatureMedia = async (setFeatured: boolean) => {
     if (mediaFile === undefined) {
@@ -115,8 +115,8 @@ export default function MediaPage() {
 
     const request = {
       entity_type: "media_file",
-      entity_token: mediaFile.token
-    }
+      entity_token: mediaFile.token,
+    };
 
     // 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.
@@ -127,7 +127,7 @@ export default function MediaPage() {
       await DeleteFeaturedItem("", request);
       window.location.reload();
     }
-  }
+  };
 
   const copyToClipboard = async (
     text: string,
@@ -197,16 +197,15 @@ export default function MediaPage() {
           {prompt?.maybe_style_name && (
             <>
               <div className="d-flex gap-3 align-items-center mb-2 mt-3">
-                <h6 className="fw-semibold mb-0 flex-grow-1">
-                  Style Name
-                </h6>
+                <h6 className="fw-semibold mb-0 flex-grow-1">Style Name</h6>
               </div>
               <div className="panel-inner p-2 rounded">
-                <p className="fs-7">{STYLES_BY_KEY.get(prompt.maybe_style_name)?.label}</p>
+                <p className="fs-7">
+                  {STYLES_BY_KEY.get(prompt.maybe_style_name)?.label}
+                </p>
               </div>
             </>
           )}
-
         </Panel>
       )}
     </>
@@ -300,8 +299,24 @@ export default function MediaPage() {
             </div>
           </Panel>
         );
+      case MediaFileType.SceneJson:
+        return (
+          <div
+            {...{
+              className:
+                "rounded w-100 h-100 panel d-flex align-items-center justify-content-center p-3",
+            }}
+          >
+            <Button
+              {...{
+                label: "View in engine",
+                href: `https://studio.storyteller.ai/${mediaFile.token}`,
+              }}
+            />
+          </div>
+        );
       default:
-        return <div>Unsupported media type</div>;
+        return <div>Unsupported media typeaaa</div>;
     }
   }
 
@@ -505,30 +520,37 @@ export default function MediaPage() {
   const title = GetMediaFileTitle(mediaFile);
 
   const showEngineCover = () => {
-    const coverMediaPath = mediaFile?.cover_image?.maybe_cover_image_public_bucket_path || "";
+    const coverMediaPath =
+      mediaFile?.cover_image?.maybe_cover_image_public_bucket_path || "";
     if (mediaFile) {
       switch (mediaFile.media_type) {
-         case MediaFileType.BVH:
-         case MediaFileType.GLB:
-         case MediaFileType.GLTF:
-         case MediaFileType.SceneRon: return <WeightCoverImage {...{
-          ...coverMediaPath ? { src: bucketConfig.getGcsUrl(coverMediaPath) } : {},
-          ...viewerCanEdit ? { to: `/edit-cover-image/${ token }` } : {},
-          coverIndex: mediaFile.cover_image.default_cover.image_index,
-         }}/>;
-         default: return null;
+        case MediaFileType.BVH:
+        case MediaFileType.GLB:
+        case MediaFileType.GLTF:
+        case MediaFileType.SceneRon:
+          return (
+            <WeightCoverImage
+              {...{
+                ...(coverMediaPath
+                  ? { src: bucketConfig.getGcsUrl(coverMediaPath) }
+                  : {}),
+                ...(viewerCanEdit ? { to: `/edit-cover-image/${token}` } : {}),
+                coverIndex: mediaFile.cover_image.default_cover.image_index,
+              }}
+            />
+          );
+        default:
+          return null;
       }
     }
-  }
+  };
 
   return (
     <div>
       <Container type="panel" className="mb-5">
         <Panel clear={true} className="py-4">
           <div className="d-flex flex-column flex-lg-row gap-3 gap-lg-2">
-            {
-              showEngineCover()
-            }
+            {showEngineCover()}
             <div>
               <div className="d-flex gap-2 align-items-center flex-wrap">
                 <h1 className="fw-bold mb-2">{title}</h1>
@@ -608,7 +630,8 @@ export default function MediaPage() {
                     }}
                   />
                 ) : null}
-                { canAccessStudio() && mediaFile?.media_type === MediaFileType.Video ? (
+                {canAccessStudio() &&
+                mediaFile?.media_type === MediaFileType.Video ? (
                   <Button
                     {...{
                       icon: faArrowRightArrowLeft,
@@ -843,7 +866,7 @@ export default function MediaPage() {
                 </div>
               </Panel>
 
-              { viewerCanEdit && (
+              {viewerCanEdit && (
                 <>
                   <div className="d-flex gap-2">
                     <Button
@@ -862,14 +885,18 @@ export default function MediaPage() {
                   </div>
                 </>
               )}
-              { viewerCanMakeFeatured && (
+              {viewerCanMakeFeatured && (
                 <>
                   <div className="d-flex gap-2">
                     <Button
                       full={true}
                       variant="secondary"
                       icon={faStarShooting}
-                      label={mediaFile?.is_featured ? "Remove Featured" : "Set Featured"}
+                      label={
+                        mediaFile?.is_featured
+                          ? "Remove Featured"
+                          : "Set Featured"
+                      }
                       onClick={handleFeatureMedia}
                     />
                   </div>