fixed upload button and added object cover image default placeholders (#248)

Co-authored-by: Victor <victor@storyteller.ai>

app/components/Button.tsx

@@ -21,7 +21,6 @@ export const Button = ({
   ...rest
 }: ButtonPropsI) => {
   const ButtonType = htmlFor ? "label" : "button";
-  const variant = disabled ? "disabled" : propsVariant;
 
   function getVariantClassNames(variant: string) {
     switch (variant) {
@@ -50,10 +49,13 @@ export const Button = ({
   );
 
   return (
-    <button className={className} disabled={disabled} {...rest}>
+    <ButtonType
+      className={className}
+      disabled={disabled}
+      {...{ ...rest, htmlFor }}>
       {icon && !iconFlip ? <FontAwesomeIcon icon={icon} /> : null}
       <div>{children}</div>
       {icon && iconFlip ? <FontAwesomeIcon icon={icon} /> : null}
-    </button>
+    </ButtonType>
   );
 };

app/pages/PageEnigma/comps/DragComponent/DragComponent.scss

@@ -0,0 +1,4 @@
+.dragging-item-container {
+	background-color: rgba(#39394d, 0.5);
+	backdrop-filter: blur(3px);
+}

app/pages/PageEnigma/comps/DragComponent/DragComponent.tsx

@@ -6,6 +6,7 @@ import {
   scale,
 } from "~/pages/PageEnigma/store";
 import { useSignals } from "@preact/signals-react/runtime";
+import "./DragComponent.scss";
 
 export const DragComponent = () => {
   useSignals();
@@ -15,6 +16,10 @@ export const DragComponent = () => {
     return null;
   }
 
+  const thumbnail = dragItem.value.thumbnail
+    ? dragItem.value.thumbnail
+    : `/resources/images/default-covers/${dragItem.value.imageIndex}.webp`;
+
   return (
     <>
       {overTimeline.value ? (
@@ -36,25 +41,26 @@ export const DragComponent = () => {
         />
       ) : (
         <div
-          className="absolute rounded-lg"
+          className="dragging-item-container absolute rounded-lg"
           style={{
             width: 91,
             height: 114,
             top: currY - 57,
             left: currX + 1,
             zIndex: 10000,
-          }}
-        >
+          }}>
           <img
-            src={dragItem.value.thumbnail}
+            {...{
+              crossOrigin: "anonymous",
+              src: thumbnail,
+            }}
             alt={dragItem.value.name}
             className="rounded-t-lg"
           />
           <div
-            className="w-full rounded-b-lg py-1 text-center text-sm"
-            style={{ backgroundColor: "#39394D" }}
-          >
-            {dragItem.value.name}
+            className="text-overflow-ellipsis w-full rounded-b-lg px-2 py-1.5 text-center text-sm"
+            style={{ backgroundColor: "#39394D" }}>
+            {dragItem.value.name || dragItem.value.media_id}
           </div>
         </div>
       )}

app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/typesImported.ts

@@ -9,32 +9,31 @@ export enum WeightCategory {
 
 export enum MediaFileClass {
   /// Unknown (default value)
- /// This will be present until we migrate all old files.
- Unknown = "unknown",
+  /// This will be present until we migrate all old files.
+  Unknown = "unknown",
 
- /// Audio files: wav, mp3, etc.
- Audio = "audio",
+  /// Audio files: wav, mp3, etc.
+  Audio = "audio",
 
- /// Image files: png, jpeg, etc.
- Image = "image",
+  /// Image files: png, jpeg, etc.
+  Image = "image",
 
- /// Video files: mp4, etc.
- Video = "video",
+  /// Video files: mp4, etc.
+  Video = "video",
 
- /// Engine "animations"
- Animation = "animation",
+  /// Engine "animations"
+  Animation = "animation",
 
- /// Engine "characters"
- Character = "character",
+  /// Engine "characters"
+  Character = "character",
 
- /// Engine "prop" items
- Prop = "prop",
+  /// Engine "prop" items
+  Prop = "prop",
 
- /// Engine scenes (internal and external scenes)
- Scene = "scene",
+  /// Engine scenes (internal and external scenes)
+  Scene = "scene",
 }
 
-
 export enum MediaFileType {
   Audio = "audio",
   Video = "video",
@@ -64,7 +63,6 @@ export enum MediaFileType {
   None = "none",
 }
 
-
 export enum MediaFileSubtype {
   /// Animation file from Mixamo
   /// Primarily used for FBX and GLB.
@@ -94,22 +92,20 @@ export enum MediaFileSubtype {
 /// A common type returned by several endpoints.
 /// Basic information to display a user and their avatar.
 export interface UserDetailsLight {
-  user_token: string,
+  user_token: string;
   /// Username (lowercase)
-  username: string,
+  username: string;
   /// Username with user-specified capitalization
-  display_name: string,
-  gravatar_hash: string,
-  default_avatar: DefaultAvatarInfo,
-
+  display_name: string;
+  gravatar_hash: string;
+  default_avatar: DefaultAvatarInfo;
 }
 
 export interface DefaultAvatarInfo {
-  image_index: number,
-  color_index: number,
+  image_index: number;
+  color_index: number;
 }
 
-
 export enum WeightType {
   TT2 = "tt2",
   HIFIGAN_TT2 = "hifigan_tt2",
@@ -134,6 +130,13 @@ export interface MediaFile {
   maybe_original_filename: string | null;
   maybe_creator_user: UserDetailsLight | null;
   maybe_prompt_token: string | null;
+  cover_image: {
+    maybe_cover_image_public_bucket_path: string | null;
+    default_cover: {
+      color_index: number;
+      image_index: number;
+    };
+  };
   creator_set_visibility: string;
   created_at: Date;
   updated_at: Date;
@@ -153,37 +156,37 @@ export interface GetMediaFileResponse {
 }
 
 export interface VoiceConversionModelListItem {
-  token: string,
-  model_type: string,
-  title: string,
+  token: string;
+  model_type: string;
+  title: string;
 
-  creator: CreatorDetails,
-  creator_set_visibility: string,
+  creator: CreatorDetails;
+  creator_set_visibility: string;
 
-  ietf_language_tag: string,
-  ietf_primary_language_subtag: string,
-  is_front_page_featured: boolean,
+  ietf_language_tag: string;
+  ietf_primary_language_subtag: string;
+  is_front_page_featured: boolean;
 
-  created_at: string,
-  updated_at: string,
+  created_at: string;
+  updated_at: string;
 }
 
 export interface CreatorDetails {
-  user_token: string,
-  username: string,
-  display_name: string,
-  gravatar_hash: string,
+  user_token: string;
+  username: string;
+  display_name: string;
+  gravatar_hash: string;
 }
 
 export interface VoiceConversionModelListResponse {
-  success: boolean,
-  models: Array<VoiceConversionModelListItem>,
+  success: boolean;
+  models: Array<VoiceConversionModelListItem>;
 }
 
 export interface EnqueueVoiceConversionRequest {
-  uuid_idempotency_token: string,
-  voice_conversion_model_token: string,
-  source_media_upload_token: string,
+  uuid_idempotency_token: string;
+  voice_conversion_model_token: string;
+  source_media_upload_token: string;
 
   // Optional args
   // auto_predict_f0?: boolean,
@@ -192,6 +195,6 @@ export interface EnqueueVoiceConversionRequest {
 }
 
 export interface EnqueueVoiceConversionResponse {
-  success: boolean,
-  inference_job_token?: string,
-}
+  success: boolean;
+  inference_job_token?: string;
+}

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElement.tsx

@@ -18,6 +18,9 @@ export const ItemElement = ({ item }: Props) => {
   useSignals();
   const { startDrag, endDrag } = useContext(TrackContext);
   const { initX, initY } = initPosition.value;
+  const thumbnail = item.thumbnail
+    ? item.thumbnail
+    : `/resources/images/default-covers/${item.imageIndex}.webp`;
 
   useEffect(() => {
     const onPointerUp = () => {
@@ -65,17 +68,20 @@ export const ItemElement = ({ item }: Props) => {
 
   return (
     <div
-      className="relative w-full cursor-pointer rounded-lg transition-all duration-200"
+      className="sidebar-object-item relative w-full cursor-pointer rounded-lg transition-all duration-200"
       onPointerDown={onPointerDown}>
       <img
-        src={item.thumbnail}
+        {...{
+          crossOrigin: "anonymous",
+          src: thumbnail,
+        }}
         alt={item.name}
         className="aspect-[4.5/5] w-full rounded-t-lg object-cover object-center"
       />
       <div
         className="text-overflow-ellipsis w-full rounded-b-lg px-2 py-1.5 text-center text-sm"
         style={{ backgroundColor: "#39394D" }}>
-        {item.name}
+        {item.name || item.media_id}
       </div>
     </div>
   );

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements.scss

@@ -0,0 +1,3 @@
+.sidebar-object-item {
+	background-color: rgba(#39394d, 0.5);
+}

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements.tsx

@@ -1,6 +1,7 @@
 import { ItemElement } from "./ItemElement";
 import { AssetFilterOption, MediaItem } from "~/pages/PageEnigma/models";
 import { dndSidePanelWidth, sidePanelWidth } from "~/pages/PageEnigma/store";
+import "./ItemElements.scss";
 
 interface Props {
   debug?: string;

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx

@@ -80,6 +80,8 @@ export const ObjectsTab = ({ type }: Props) => {
                 100,
               );
               return {
+                colorIndex: item.cover_image.default_cover.color_index,
+                imageIndex: item.cover_image.default_cover.image_index,
                 media_id: item.token,
                 name: item.maybe_title,
                 type: AssetType.OBJECT,

app/pages/PageEnigma/models/assets.ts

@@ -1,4 +1,5 @@
 export interface MediaItem {
+  colorIndex?: number;
   version: number;
   type: AssetType;
   media_id: string;
@@ -8,6 +9,7 @@ export interface MediaItem {
   publicBucketPath?: string;
   length?: number;
   thumbnail?: string;
+  imageIndex?: number;
   isMine?: boolean;
   isBookmarked?: boolean;
 }
@@ -28,6 +30,6 @@ export enum AssetFilterOption {
   BOOKMARKED,
 }
 
-export interface AudioMediaItem extends MediaItem{
+export interface AudioMediaItem extends MediaItem {
   category?: string;
 }