daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-08 11:01:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

bookmark integration on cards, in progress

Browse Source
This commit is contained in:
Victor committed 2023-12-26 17:12:04 -05:00
1 parent 94be50a8ad
commit 26f055f207
8 files changed
+140 -104
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+9 -4
View File
@@ -12,6 +12,7 @@ import Button from "components/common/Button";
import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
import WeightCoverImage from "components/common/WeightCoverImage";
interface AudioCardProps {
bookmarks: any,
data: any;
type: "media" | "weights";
showCreator?: boolean;
@@ -19,11 +20,13 @@ interface AudioCardProps {
}
export default function AudioCard({
bookmarks,
data,
type,
showCreator,
showCover,
}: AudioCardProps) {
console.log("😎",);
const linkUrl =
type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`;
@@ -148,10 +151,12 @@ export default function AudioCard({
<div>
<LikeButton onToggle={handleLike} likeCount={data.likes} />
</div>
<BookmarkButton
onToggle={handleLike}
favoriteCount={data.likes}
/>
<BookmarkButton {...{
entityToken: data.weight_token,
entityType: "model_weight",
onToggle: bookmarks.toggle,
large: true,
}} />
</div>
</>
)}
packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
+2
View File
@@ -21,6 +21,8 @@ export default function ImageCard({ data, type, showCreator }: ImageCardProps) {
const linkUrl =
type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`;
console.log("🎲",data);
const handleInnerClick = (event: any) => {
event.stopPropagation();
};
packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
+9 -8
View File
@@ -6,11 +6,12 @@ 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 { useLazyLists } from "hooks";
import { useBookmarks, useLazyLists } from "hooks";
import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
import SkeletonCard from "components/common/Card/SkeletonCard";
export default function FeaturedTab() {
const bookmarks = useBookmarks();
const gridContainerRef = useRef<HTMLDivElement | null>(null);
const [list, listSet] = useState<MediaFile[]>([]);
@@ -52,13 +53,13 @@ export default function FeaturedTab() {
>
{media.list.map((data, index) => {
let card = (
<AudioCard
key={index}
data={data}
type="media"
showCreator={true}
showCover={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "media",
showCreator: true,
showCover: true
}} />
);
return (
<div
packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
+20 -19
View File
@@ -12,10 +12,11 @@ import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContex
import SkeletonCard from "components/common/Card/SkeletonCard";
import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles";
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
import { useLazyLists } from "hooks";
import { useBookmarks, useLazyLists } from "hooks";
import InfiniteScroll from "react-infinite-scroll-component";
export default function MediaTab() {
const bookmarks = useBookmarks();
const gridContainerRef = useRef<HTMLDivElement | null>(null);
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
@@ -119,32 +120,32 @@ export default function MediaTab() {
switch (data.media_type) {
case "audio":
card = (
<AudioCard
key={index}
data={data}
type="media"
showCreator={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "media",
showCreator: true
}} />
);
break;
case "image":
card = (
<ImageCard
key={index}
data={data}
type="media"
showCreator={true}
/>
<ImageCard {...{
bookmarks,
data,
type: "media",
showCreator: true
}} />
);
break;
case "video":
card = (
<VideoCard
key={index}
data={data}
type="media"
showCreator={true}
/>
<VideoCard {...{
bookmarks,
data,
type: "media",
showCreator: true
}}/>
);
break;
default:
packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
+29 -28
View File
@@ -14,9 +14,10 @@ import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights
import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
import InfiniteScroll from "react-infinite-scroll-component";
import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
import { useLazyLists } from "hooks";
import { useBookmarks, useLazyLists } from "hooks";
export default function WeightsTab() {
const bookmarks = useBookmarks();
const gridContainerRef = useRef<HTMLDivElement | null>(null);
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
const [list, listSet] = useState<Weight[]>([]);
@@ -158,45 +159,45 @@ export default function WeightsTab() {
switch (data.weights_category) {
case WeightCategory.TTS:
card = (
<AudioCard
key={index}
data={data}
type="weights"
showCreator={true}
showCover={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "weights",
showCreator: true,
showCover: true
}} />
);
break;
case WeightCategory.VC:
card = (
<AudioCard
key={index}
data={data}
type="weights"
showCreator={true}
showCover={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "weights",
showCreator: true,
showCover: true
}} />
);
break;
case WeightCategory.ZS:
card = (
<AudioCard
key={index}
data={data}
type="weights"
showCreator={true}
showCover={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "weights",
showCreator: true,
showCover: true
}} />
);
break;
case WeightCategory.SD:
card = (
<ImageCard
key={index}
data={data}
type="weights"
showCreator={true}
/>
<ImageCard {...{
bookmarks,
data,
type: "weights",
showCreator: true
}} />
);
break;
case WeightCategory.VOCODER:
packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
+25 -13
View File
@@ -11,14 +11,15 @@ import {
} from "@fortawesome/pro-solid-svg-icons";
import Pagination from "components/common/Pagination";
import { useListContent } from "hooks";
import { useBookmarks, useListContent } from "hooks";
import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser";
export default function BookmarksTab({ username }: { username: string }) {
const bookmarks = useBookmarks();
const gridContainerRef = useRef<HTMLDivElement | null>(null);
const [selectedFilter, setSelectedFilter] = useState("all");
const [list, listSet] = useState<any[]>([]);
const bookmarks = useListContent({
const { isLoading, list: dataList, page, pageChange, pageCount, status } = useListContent({
debug: "bookmarks tab",
fetcher: GetBookmarksByUser,
list,
@@ -29,13 +30,13 @@ export default function BookmarksTab({ username }: { username: string }) {
});
const handlePageClick = (selectedItem: { selected: number }) => {
bookmarks.pageChange(selectedItem.selected);
pageChange(selectedItem.selected);
};
const paginationProps = {
onPageChange: handlePageClick,
pageCount: bookmarks.pageCount,
currentPage: bookmarks.page,
pageCount,
currentPage: page,
};
const filterOptions = [
@@ -117,7 +118,7 @@ export default function BookmarksTab({ username }: { username: string }) {
</div>
<Pagination {...paginationProps} />
</div>
{ bookmarks.isLoading ? (
{ isLoading ? (
<div className="row gx-3 gy-3">
{Array.from({ length: 12 }).map((_, index) => (
<SkeletonCard key={index} />
@@ -125,7 +126,7 @@ export default function BookmarksTab({ username }: { username: string }) {
</div>
) : (
<>
{bookmarks.list.length === 0 && bookmarks.status === 3 ? (
{ dataList.length === 0 && status === 3 ? (
<div className="text-center mt-4 opacity-75">
No bookmarked weights yet.
</div>
@@ -134,21 +135,32 @@ export default function BookmarksTab({ username }: { username: string }) {
gridRef={gridContainerRef}
onLayoutComplete={() => console.log("Layout complete!")}
>
{bookmarks.list.map((data: any, index: number) => {
console.log("🧣", data);
{ dataList.map((data: any, index: number) => {
let card;
switch (data.media_type) {
case "audio":
card = <AudioCard key={index} data={data} type="weights" />;
card = <AudioCard {...{
bookmarks,
data,
type: "weights"
}} />;
break;
case "image":
card = <ImageCard key={index} data={data} type="weights" />;
card = <ImageCard {...{
bookmarks,
data,
type: "weights"
}} />;
break;
case "video":
card = <VideoCard key={index} data={data} type="weights" />;
card = <VideoCard {...{
bookmarks,
data,
type: "weights"
}} />;
break;
default:
card = <div key={index}>Unsupported media type</div>;
card = <div>Unsupported media type</div>;
}
return (
<div
packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
+17 -4
View File
@@ -14,9 +14,10 @@ import Pagination from "components/common/Pagination";
import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
import { useListContent } from "hooks";
import { useBookmarks, useListContent } from "hooks";
export default function MediaTab({ username }: { username: string }) {
const bookmarks = useBookmarks();
const gridContainerRef = useRef<HTMLDivElement | null>(null);
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
@@ -117,13 +118,25 @@ export default function MediaTab({ username }: { username: string }) {
let card;
switch (data.media_type) {
case "audio":
card = <AudioCard data={data} type="media" />;
card = <AudioCard {...{
bookmarks,
data,
type: "media"
}} />;
break;
case "image":
card = <ImageCard data={data} type="media" />;
card = <ImageCard {...{
bookmarks,
data,
type: "media"
}} />;
break;
case "video":
card = <VideoCard data={data} type="media" />;
card = <VideoCard {...{
bookmarks,
data,
type: "media"
}} />;
break;
default:
card = <div>Unsupported media type</div>;
packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
+29 -28
View File
@@ -7,7 +7,7 @@ import {
faFilter,
} from "@fortawesome/pro-solid-svg-icons";
import Pagination from "components/common/Pagination";
import { useListContent } from "hooks";
import { useBookmarks, useListContent } from "hooks";
import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
import { TempSelect } from "components/common";
import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
@@ -29,6 +29,7 @@ export default function WeightsTab({ username }: { username: string }) {
const [vc, vcSet] = useState("all");
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
const addSetters = { sdSet, ttsSet, vcSet };
const bookmarks = useBookmarks();
const [list, listSet] = useState<any[]>([]);
const weights = useListContent({
@@ -177,45 +178,45 @@ export default function WeightsTab({ username }: { username: string }) {
switch (data.weights_category) {
case WeightCategory.TTS:
card = (
<AudioCard
key={index}
data={data}
type="weights"
showCreator={true}
showCover={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "weights",
showCreator: true,
showCover: true
}} />
);
break;
case WeightCategory.VC:
card = (
<AudioCard
key={index}
data={data}
type="weights"
showCreator={true}
showCover={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "weights",
showCreator: true,
showCover: true
}} />
);
break;
case WeightCategory.ZS:
card = (
<AudioCard
key={index}
data={data}
type="weights"
showCreator={true}
showCover={true}
/>
<AudioCard {...{
bookmarks,
data,
type: "weights",
showCreator: true,
showCover: true
}} />
);
break;
case WeightCategory.SD:
card = (
<ImageCard
key={index}
data={data}
type="weights"
showCreator={true}
/>
<ImageCard {...{
bookmarks,
data,
type: "weights",
showCreator: true
}} />
);
break;
case WeightCategory.VOCODER: