diff --git a/packages/components/src/api/image_generation/UploadLora.ts b/packages/components/src/api/image_generation/UploadLora.ts index 39e14c8ed4..3e04490e5f 100644 --- a/packages/components/src/api/image_generation/UploadLora.ts +++ b/packages/components/src/api/image_generation/UploadLora.ts @@ -8,6 +8,7 @@ export interface UploadLoraRequest { maybe_name: String, maybe_description: String, visibility: String, + maybe_cover_image_media_file_token?: String, } export interface UploadLoraResponse { diff --git a/packages/components/src/api/image_generation/UploadModel.ts b/packages/components/src/api/image_generation/UploadModel.ts index 7b97d4fddf..2577243947 100644 --- a/packages/components/src/api/image_generation/UploadModel.ts +++ b/packages/components/src/api/image_generation/UploadModel.ts @@ -8,6 +8,7 @@ export interface UploadModelRequest { maybe_name: String, maybe_description: String, visibility: String, + maybe_cover_image_media_file_token?: String, } export interface UploadModelResponse { diff --git a/packages/components/src/api/media_files/GetMediaFile.ts b/packages/components/src/api/media_files/GetMediaFile.ts index 39f42bc1c7..1e87adf051 100644 --- a/packages/components/src/api/media_files/GetMediaFile.ts +++ b/packages/components/src/api/media_files/GetMediaFile.ts @@ -21,6 +21,7 @@ export interface MediaFile { maybe_weight_creator: UserDetailsLight; maybe_cover_image_public_bucket_path: string; }; + maybe_text_transcript?: string; } export enum MediaFileLookupError { diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 8c2da1974f..c4c690dbd9 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -300,6 +300,8 @@ class App extends React.Component { await this.querySessionSubscriptions(); setInterval(async () => { + // See warnings in the following methods when adding new methods + // that affect global "state" await this.querySession(); await this.querySessionSubscriptions(); }, 60000); @@ -310,6 +312,10 @@ class App extends React.Component { } querySession = async () => { + // WARNING: Making setState calls in this scope without checking existing + // state can cause the whole site to refresh/worsen UX. Double check if + // state needs to be set here, or if instead can be refreshed locally on + // the page where the new "state" needed const sessionWrapper = await SessionWrapper.lookupSession(); const username = sessionWrapper.getDisplayName(); const cookies = new Cookies(); @@ -337,7 +343,15 @@ class App extends React.Component { }; querySessionSubscriptions = async () => { - this.setState({ sessionFetched: true }); + // WARNING: Making setState calls in this scope without checking existing + // state can cause the whole site to refresh/worsen UX. Double check if + // state needs to be set here, or if instead can be refreshed locally on + // the page where the new "state" needed + + if (this.state.sessionFetched === false){ + this.setState({ sessionFetched: true }); + } + const cookies = new Cookies(); const sessionSubscriptionsWrapper = diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index dfcf6fe4bb..341af4ac8e 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -106,17 +106,22 @@ export default function AudioCard({
- {data.origin.maybe_model + {data.origin?.maybe_model ? data.origin.maybe_model.title : "Media Audio"}

{timeAgo}

+ {data.maybe_text_transcript && ( +

+ {data.maybe_text_transcript} +

+ )} - + {timeAgo}

: ; +} diff --git a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx index 9043ef0628..942aef323c 100644 --- a/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/FBXCard/FBXCard.tsx @@ -54,8 +54,8 @@ export default function FBXCard({

{timeAgo}

{timeAgo}

{timeAgo}

; default: - return
Unsupported media type
; + return
Unsupported weight type
; } } diff --git a/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx b/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx index 98450f2076..0115ff1e05 100644 --- a/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx +++ b/packages/fakeyou.com/src/components/common/Card/getCardUrl.tsx @@ -1,5 +1,7 @@ const getCardUrl = (data: any, source: string, type: string) => { - let prefix = type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token || data.details?.entity_token}`; + let isBookmark = data.token && data.token.startsWith("ub_"); + let bookmarkedToken = data.details?.entity_token; + let prefix = type === "media" ? `/media/${isBookmark ? bookmarkedToken : data.token}` : `/weight/${isBookmark ? bookmarkedToken : data.weight_token }`; let suffix = source ? "?source=" + source : ""; return prefix + suffix; } diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx index 0824caa530..9905bfffae 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx @@ -7,6 +7,7 @@ import Button from "../Button"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; import SelectMediaList from "./SelectMediaList"; import SelectWeightsList from "./SelectWeightsList"; +import { useSession } from "hooks"; export type SelectModalData = { token: string; @@ -39,6 +40,7 @@ const SelectModal = memo( required, }: SelectModalProps) => { const emptyValue = { token: "", title: "" }; + const { user } = useSession(); const [{ isModalOpen, selectedValue, valueType, activeTab }, setState] = useState({ isModalOpen: false, @@ -98,12 +100,20 @@ const SelectModal = memo( {tab.type === "weights" && ( <> {tab.onlyBookmarked ? ( - + <> + {user ? ( + + ) : ( +
+

Please login to view your bookmarks.

+
+ )} + ) : ( option.value === value)?.label || ""; - const onChange = ({ value }: any) => - inChange({ target: { value, name, type: "select" } }); + const onChange = (option: any, x: any) => { + // console.log("๐Ÿงช",option, x); // WIP -V + if (Array.isArray(option)) { + + } else { + inChange({ target: {value: option.value, name, type: "select" } }); + } + } const className = `${icon ? " input-icon" : ""}${ small ? " select-small" : "" }`; diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index 5ad6a2010c..6800f6da7a 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -21,6 +21,7 @@ import MocapInput from "./MocapInput"; import Modal from "./Modal"; import NumberSlider from "./NumberSlider"; import NumberSliderV2 from "./NumberSliderV2"; +import Pagination from "./Pagination"; import Panel from "./Panel"; import Radio from "./Radio"; import SegmentButtons from "./SegmentButtons"; @@ -66,6 +67,7 @@ export { Modal, NumberSlider, NumberSliderV2, + Pagination, Panel, Radio, SegmentButtons, diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx index 128d56b352..99e47b2d9a 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx @@ -3,45 +3,27 @@ import { useLocation } from "react-router-dom"; import { a, useTransition } from "@react-spring/web"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; import Iframe from "react-iframe"; -import { MediaBrowser } from "components/modals"; -import { FileWrapper, Label, Spinner } from "components/common"; -import { EntityType, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes"; +import { Label, Spinner } from "components/common"; +import { AcceptTypes, EntityInputMode, EntityModeProp } from "components/entities/EntityTypes"; import { useFile, useMedia, useModal, useSession } from "hooks"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import { faDiagramSankey, faFile, faFileArrowUp, faGrid, faImage, faPersonWalking, faWaveform } from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; import { v4 as uuidv4 } from "uuid"; +import EntityInputEmpty from "./EntityInputEmpty"; import "./EntityInput.scss"; -// enum EntityInputMode { -// Bookmarks = "bookmarks", -// Media = "media", -// Weights = "weights", -// SearchWeights = "searchWeights", -// } - interface Props { + accept?: AcceptTypes | AcceptTypes[], aspectRatio?: "square" | "landscape" | "portrait", - mediaType?: MediaFilterProp, label?: string, onChange?: any, - type: string, - weightType?: WeightFilterProp + type: EntityModeProp, } -interface SlideProps { +export interface SlideProps { media?: MediaFile }; -interface EmptySlideProps extends SlideProps { - entityType: EntityType, - filterType: MediaFilterProp | WeightFilterProp, - inputProps?: any, - open: any, - user: any -}; - interface AniProps { animating: boolean, className: string, @@ -56,12 +38,12 @@ const MediaBusy = () => { const MocapInputFull = ({ media }: SlideProps) => { const bucketConfig = new BucketConfig(); - const bvhUrl = media?.public_bucket_path ? bucketConfig.getGcsUrl(media.public_bucket_path) : ""; + const mediaUrl = media?.public_bucket_path ? bucketConfig.getGcsUrl(media.public_bucket_path) : ""; return <>