From 53161786119e92c1fa632a1dae68a10a53794bb8 Mon Sep 17 00:00:00 2001 From: Victor Date: Wed, 20 Dec 2023 22:26:51 -0500 Subject: [PATCH 01/27] added addQueries to useListContent --- .../src/api/bookmarks/GetBookmarksByUser.ts | 19 ++++++++++ .../src/api/weights/GetWeightsByUser.ts | 19 ++++++++++ .../common/Card/AudioCard/AudioCard.tsx | 2 +- .../hooks/useListContent/useListContent.tsx | 6 ++- .../profile_view/tabs/BookmarksTab.tsx | 38 +++++++++---------- .../profile/profile_view/tabs/MediaTab.tsx | 9 ++++- 6 files changed, 70 insertions(+), 23 deletions(-) create mode 100644 packages/components/src/api/bookmarks/GetBookmarksByUser.ts create mode 100644 packages/components/src/api/weights/GetWeightsByUser.ts diff --git a/packages/components/src/api/bookmarks/GetBookmarksByUser.ts b/packages/components/src/api/bookmarks/GetBookmarksByUser.ts new file mode 100644 index 0000000000..21bce70f12 --- /dev/null +++ b/packages/components/src/api/bookmarks/GetBookmarksByUser.ts @@ -0,0 +1,19 @@ +import MakeRequest from "../MakeRequest"; +import { Pagination } from "../_common/SharedFetchTypes"; + +export interface UserBookmarksListRequest {} + +export interface UserBookmarksListResponse { + // pagination: Pagination, + success: boolean, + // weights: any +} + +export interface UserBookmarksListQueries { + page_index: number, +} + +export const GetBookmarksByUser = MakeRequest({ + method: "GET", + routingFunction: (userToken: string) => `/v1/user_bookmarks/list/user/${userToken}`, +}); \ No newline at end of file diff --git a/packages/components/src/api/weights/GetWeightsByUser.ts b/packages/components/src/api/weights/GetWeightsByUser.ts new file mode 100644 index 0000000000..27a01af151 --- /dev/null +++ b/packages/components/src/api/weights/GetWeightsByUser.ts @@ -0,0 +1,19 @@ +import MakeRequest from "../MakeRequest"; +import { Pagination } from "../_common/SharedFetchTypes"; + +export interface UserWeightListRequest {} + +export interface UserWeightListResponse { + // pagination: Pagination, + success: boolean, + weights: any +} + +export interface UserWeightListQueries { + page_index: number, +} + +export const GetWeightsByUser = MakeRequest({ + method: "GET", + routingFunction: (userToken: string) => `/v1/weights/by_user/${userToken}`, +}); \ No newline at end of file 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 4532fbf091..b56fdeef69 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -16,7 +16,7 @@ interface AudioCardProps { export default function AudioCard({ data, type }: AudioCardProps) { const history = useHistory(); - // console.log("๐Ÿ™",data); + // console.log("๐Ÿ™",data, data.public_bucket_path); const handleCardClick = () => { if (type === "media") { diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index 3e65f234d5..f7d0bfeee6 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import { useSession } from "hooks"; interface Props { + addQueries?: any; fetcher: any; list: any; listSet: any; @@ -9,7 +10,7 @@ interface Props { requestList?: boolean; } -export default function useListContent({ fetcher, list, listSet, pagePreset = 0, requestList = false }: Props) { +export default function useListContent({ addQueries, fetcher, list, listSet, pagePreset = 0, requestList = false }: Props) { const { user } = useSession(); const [filter, filterSet] = useState("all"); const [page, pageSet] = useState(pagePreset); @@ -34,6 +35,7 @@ export default function useListContent({ fetcher, list, listSet, pagePreset = 0, statusSet(2); fetcher(user.username, {}, { page_index: page, + ...addQueries, // eventually we should provide a way to type this ... or not. It works ...filter !== "all" ? { filter_media_type: filter } : {}, ...sort !== "newest" ? { sort_ascending: true } : {}, }).then((res: any) => { @@ -46,7 +48,7 @@ export default function useListContent({ fetcher, list, listSet, pagePreset = 0, }); } } - }, [fetcher, filter, listSet, page, user, sort, status]); + }, [addQueries, fetcher, filter, listSet, page, user, sort, status]); return { filter, diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx index 73ec3cbe59..d431ea3286 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx @@ -4,30 +4,30 @@ import AudioCard from "components/common/Card/AudioCard"; import ImageCard from "components/common/Card/ImageCard"; import VideoCard from "components/common/Card/VideoCard"; import SkeletonCard from "components/common/Card/SkeletonCard"; -import mockWeightsData from "./mockWeightsData"; import Select from "components/common/Select"; -import { - faArrowDownWideShort, - faFilter, -} from "@fortawesome/pro-solid-svg-icons"; +import { faArrowDownWideShort, faFilter } from "@fortawesome/pro-solid-svg-icons"; import Pagination from "components/common/Pagination"; +import { useListContent } from "hooks"; +import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; + export default function BookmarksTab() { const gridContainerRef = useRef(null); - const [data] = useState(mockWeightsData); const [isLoading] = useState(false); const [selectedFilter, setSelectedFilter] = useState("all"); - const [currentPage, setCurrentPage] = useState(0); - const itemsPerPage = 10; + + const [list, listSet] = useState([]); + const bookmarks = useListContent({ fetcher: GetBookmarksByUser, list, listSet, pagePreset: 1, requestList: true }); const handlePageClick = (selectedItem: { selected: number }) => { - setCurrentPage(selectedItem.selected); + bookmarks.pageChange(selectedItem.selected + 1); }; - const currentItems = data.slice( - currentPage * itemsPerPage, - (currentPage + 1) * itemsPerPage - ); + const paginationProps = { + onPageChange: handlePageClick, + pageCount: bookmarks.pageCount - 1, + currentPage: bookmarks.page - 1 + }; const filterOptions = [ { value: "all", label: "All Weights" }, @@ -60,11 +60,11 @@ export default function BookmarksTab() { { value: "SDXL", label: "SD XL" }, ]; - const paginationProps = { - onPageChange: handlePageClick, - pageCount: 0, // replace with proper fecth value - currentPage: 0 // replace with proper fecth value - }; + // const paginationProps = { + // onPageChange: handlePageClick, + // pageCount: 0, // replace with proper fecth value + // currentPage: 0 // replace with proper fecth value + // }; const handleFilterChange = (option: any) => { const selectedOption = option as { value: string; label: string }; @@ -125,7 +125,7 @@ export default function BookmarksTab() { gridRef={gridContainerRef} onLayoutComplete={() => console.log("Layout complete!")} > - {currentItems.map((data, index) => { + {bookmarks.list.map((data: any, index: number) => { let card; switch (data.media_type) { case "audio": diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx index 42577d2e75..f2bfdd340a 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx @@ -18,7 +18,14 @@ export default function MediaTab() { const [isLoading] = useState(false); const [list, listSet] = useState([]); - const media = useListContent({ fetcher: GetMediaByUser, list, listSet, pagePreset: 1, requestList: true }); + const media = useListContent({ + // addQueries: { abc: "anything" }, an example + fetcher: GetMediaByUser, + list, + listSet, + pagePreset: 1, + requestList: true + }); const handlePageClick = (selectedItem: { selected: number }) => { media.pageChange(selectedItem.selected + 1); From 98e09f90d2d26194b684c76b70486752d87539c2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Thu, 14 Dec 2023 01:28:19 +0700 Subject: [PATCH 02/27] explore page tabs --- .../fakeyou.com/src/v2/view/PageContainer.tsx | 5 +++ .../src/v2/view/pages/explore/ExplorePage.tsx | 39 +++++++++++++++++++ .../v2/view/pages/explore/tabs/HomeTab.tsx | 0 3 files changed, 44 insertions(+) create mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index b96d95e7d7..f6d5adb43d 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -99,6 +99,7 @@ import { NewProfilePage } from "./pages/profile/profile_view/NewProfilePage"; import { ProfilePage } from "./pages/profile/profile_view/ProfilePage"; import { ModerationJobControlPage } from "./pages/moderation/job_control/ModerationJobControlPage"; import WeightPage from "./pages/weight/WeightPage"; +import ExplorePage from "./pages/explore/ExplorePage"; interface Props { sessionWrapper: SessionWrapper; @@ -357,6 +358,10 @@ class PageContainer extends React.Component< + + + + {/* */} diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx new file mode 100644 index 0000000000..d3e4ed47df --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx @@ -0,0 +1,39 @@ +import { Panel } from "components/common"; +import Container from "components/common/Container"; +import Tabs from "components/common/Tabs"; +import PageHeader from "components/layout/PageHeader"; +import React from "react"; + +interface ExplorePageProps {} + +export default function ExplorePage(props: ExplorePageProps) { + const tabs = [ + { + label: "Home", + content:
Featured cards here
, + to: "/explore/home", + padding: true, + }, + { + label: "Weights", + content:
Weights card list
, + to: "/explore/weights", + padding: true, + }, + { + label: "Media", + content:
Media card list
, + to: "/explore/media", + padding: true, + }, + ]; + + return ( + + + + + + + ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx new file mode 100644 index 0000000000..e69de29bb2 From 4cf8baecdf423cbb1acc901ab7aa0ccd191d91ee Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 15 Dec 2023 17:04:23 +0700 Subject: [PATCH 03/27] explore updates --- .../src/v2/view/pages/explore/ExplorePage.tsx | 31 +- .../view/pages/explore/tabs/FeaturedTab.tsx | 86 ++++ .../v2/view/pages/explore/tabs/HomeTab.tsx | 0 .../v2/view/pages/explore/tabs/MediaTab.tsx | 124 ++++++ .../v2/view/pages/explore/tabs/WeightsTab.tsx | 134 ++++++ .../view/pages/explore/tabs/mockMediaData.ts | 402 ++++++++++++++++++ .../pages/explore/tabs/mockWeightsData.ts | 66 +++ 7 files changed, 837 insertions(+), 6 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockMediaData.ts create mode 100644 packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockWeightsData.ts diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx index d3e4ed47df..31165a4638 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/ExplorePage.tsx @@ -3,26 +3,44 @@ import Container from "components/common/Container"; import Tabs from "components/common/Tabs"; import PageHeader from "components/layout/PageHeader"; import React from "react"; +import { + faFire, + faLayerGroup, + faPhotoFilmMusic, +} from "@fortawesome/pro-solid-svg-icons"; +import FeaturedTab from "./tabs/FeaturedTab"; +import WeightsTab from "./tabs/WeightsTab"; +import MediaTab from "./tabs/MediaTab"; +import { Redirect, useLocation } from "react-router-dom"; interface ExplorePageProps {} export default function ExplorePage(props: ExplorePageProps) { + const { pathname } = useLocation(); + + if (pathname === `/explore` || pathname === `/explore/`) { + return ; + } + const tabs = [ { - label: "Home", - content:
Featured cards here
, - to: "/explore/home", + label: "Featured", + icon: faFire, + content: , + to: "/explore/featured", padding: true, }, { label: "Weights", - content:
Weights card list
, + icon: faLayerGroup, + content: , to: "/explore/weights", padding: true, }, { label: "Media", - content:
Media card list
, + icon: faPhotoFilmMusic, + content: , to: "/explore/media", padding: true, }, @@ -31,7 +49,8 @@ export default function ExplorePage(props: ExplorePageProps) { return ( - + + 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 new file mode 100644 index 0000000000..15fbfb88a2 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx @@ -0,0 +1,86 @@ +import React, { useRef, useState } from "react"; +import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; +import mockWeightsData from "./mockWeightsData"; +import AudioCard from "components/common/Card/AudioCard"; +import SkeletonCard from "components/common/Card/SkeletonCard"; +import { Link } from "react-router-dom"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; +import ImageCard from "components/common/Card/ImageCard"; + +export default function FeaturedTab() { + const gridContainerRef = useRef(null); + const [data] = useState(mockWeightsData); + const [isLoading] = useState(false); + + return ( +
+
+
+

+ Featured Voice Weights +

+ + View all + + +
+ + {isLoading ? ( +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ ) : ( + console.log("Layout complete!")} + > + {data.map((data, index) => { + let card = ; + return ( +
+ {card} +
+ ); + })} + + )} +
+
+
+

+ Featured Image Weights +

+ + View all + + +
+ + {isLoading ? ( +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ ) : ( + console.log("Layout complete!")} + > + {data.map((data, index) => { + let card = ; + return ( +
+ {card} +
+ ); + })} + + )} +
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/HomeTab.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx new file mode 100644 index 0000000000..a995064220 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx @@ -0,0 +1,124 @@ +import React, { useRef, useState } from "react"; +import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; +import mockMediaData from "./mockMediaData"; +import AudioCard from "components/common/Card/AudioCard"; +import ImageCard from "components/common/Card/ImageCard"; +import VideoCard from "components/common/Card/VideoCard"; +import Select from "components/common/Select"; +import { + faArrowDownWideShort, + faFilter, +} from "@fortawesome/pro-solid-svg-icons"; +import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext"; +import SkeletonCard from "components/common/Card/SkeletonCard"; +import InfiniteScroll from "react-infinite-scroll-component"; + +export default function MediaTab() { + const gridContainerRef = useRef(null); + const [data, setData] = useState(mockMediaData); + const [isLoading] = useState(false); + const [hasMore, setHasMore] = useState(true); + + const fetchMoreData = () => { + // Simulate a delay (like fetching API) + setTimeout(() => { + const moreData = data.concat( + // Here, create more dummy data + mockMediaData.map(item => ({ ...item, id: item.token + data.length })) + ); + + setData(moreData); + + if (moreData.length >= mockMediaData.length * 2) { + setHasMore(false); + } + }, 1500); + }; + + const filterOptions = [ + { value: "all", label: "All Media" }, + { value: "images", label: "Images" }, + { value: "audio", label: "Audio" }, + { value: "video", label: "Video" }, + ]; + + const sortOptions = [ + { value: "newest", label: "Newest" }, + { value: "oldest", label: "Oldest" }, + { value: "mostliked", label: "Most Liked" }, + ]; + + return ( + <> +
+
+ +
+
+ + {isLoading ? ( +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ ) : ( + +
+ Loading... +
+ + } + dataLength={data.length} + className="overflow-hidden" + > + console.log("Layout complete!")} + > + {data.map((data, index) => { + let card; + switch (data.media_type) { + case "audio": + card = ; + break; + case "image": + card = ; + break; + case "video": + card = ; + break; + default: + card =
Unsupported media type
; + } + return ( +
+ {card} +
+ ); + })} + + + )} + + + ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx new file mode 100644 index 0000000000..3b3b29df7b --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx @@ -0,0 +1,134 @@ +import React, { useRef, useState } from "react"; +import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; +import mockWeightsData from "./mockWeightsData"; +import AudioCard from "components/common/Card/AudioCard"; +import ImageCard from "components/common/Card/ImageCard"; +import VideoCard from "components/common/Card/VideoCard"; +import Select from "components/common/Select"; +import { + faArrowDownWideShort, + faFilter, +} from "@fortawesome/pro-solid-svg-icons"; +import SkeletonCard from "components/common/Card/SkeletonCard"; + +export default function WeightsTab() { + const gridContainerRef = useRef(null); + const [data] = useState(mockWeightsData); + const [isLoading] = useState(false); + const [selectedFilter, setSelectedFilter] = useState("all"); + + const filterOptions = [ + { value: "all", label: "All Weights" }, + { value: "tts", label: "Text to Speech" }, + { value: "vc", label: "Voice to Voice" }, + { value: "sd", label: "Image Generation" }, + ]; + + const sortOptions = [ + { value: "newest", label: "Newest" }, + { value: "oldest", label: "Oldest" }, + { value: "mostliked", label: "Most Bookmarked" }, + ]; + + const modelTtsOptions = [ + { value: "all", label: "All Types" }, + { value: "tt2", label: "Tacotron 2" }, + ]; + + const modelVcOptions = [ + { value: "all", label: "All Types" }, + { value: "rvc", label: "RVCv2" }, + { value: "svc", label: "SoVitsSvc" }, + ]; + + const modelSdOptions = [ + { value: "all", label: "All Types" }, + { value: "lora", label: "LoRA" }, + { value: "SD15", label: "SD 1.5" }, + { value: "SDXL", label: "SD XL" }, + ]; + + const handleFilterChange = (option: any) => { + const selectedOption = option as { value: string; label: string }; + setSelectedFilter(selectedOption.value); + }; + + return ( + <> +
+
+ + + {selectedFilter === "tts" && ( + + )} + {selectedFilter === "vc" && ( + +
+
+ +
+
+ {/* {userOrLoginButton} {signupOrLogOutButton} */} -
+
+ +
diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index ad81068f29..7da61e472e 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -10,7 +10,7 @@ transition: all 0.2s ease; } -$topbar-height: 70px; +$topbar-height: 66px; #sidebar-wrapper { z-index: 1000; @@ -69,7 +69,7 @@ $topbar-height: 70px; background: $panel; border-color: rgba(255, 255, 255, 0.0705882353) !important; border-right: 1px solid; - padding-top: 1.5rem; + padding-top: 1rem; } .sidebar-nav li a { @@ -77,7 +77,7 @@ $topbar-height: 70px; text-decoration: none; color: rgba($white, 0.7); font-weight: 500; - font-size: 16px; + font-size: 15px; margin: 0rem 1rem; padding: 0.5rem 1rem; border-radius: 0.5rem; @@ -170,9 +170,40 @@ $topbar-height: 70px; .topbar-nav { display: flex; align-items: center; - justify-content: space-between; height: 100%; padding: 0 1.5rem; + justify-content: space-between; + align-items: center; +} + +.search-bar-container { + flex-grow: 1; + display: flex; + justify-content: center; +} + +.search-bar { + width: 500px; + + .form-control { + padding: 7px 0.75rem !important; + border-radius: 0.5rem 0 0 0.5rem !important; + + &::placeholder { + color: rgba($white, 0.3) !important; + } + } +} + +.search-bar-button { + border-radius: 0 0.5rem 0.5rem 0 !important; + border-color: lighten($secondary, 5%) !important; + background-color: lighten($secondary, 5%) !important; + + &:hover { + border-color: lighten($secondary, 10%) !important; + background-color: lighten($secondary, 10%) !important; + } } @media (min-width: 992px) { diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 5858328eea..ac0839aba3 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -18,13 +18,17 @@ styles with important tags: } ::-webkit-scrollbar-track { - background-color: rgba($bg, 1) !important; + background-color: $panel !important; } ::-webkit-scrollbar { width: 10px; } + body { + overflow-y: scroll; + } + p { font-weight: 400; margin-bottom: 0; From 9b2fcb858c79b5feb51caf5e1070160785e3ed1b Mon Sep 17 00:00:00 2001 From: bflatastic Date: Sat, 16 Dec 2023 15:48:21 +0700 Subject: [PATCH 06/27] search bar update --- .../components/common/SearchBar/SearchBar.tsx | 59 ++++++++++++++ .../common/SearchBar/SearchField.tsx | 21 +++++ .../SearchBar/SearchResultsDropdown.tsx | 76 +++++++++++++++++++ .../src/components/common/SearchBar/index.ts | 1 + .../layout/PageHeader/PageHeader.tsx | 2 +- .../src/components/layout/TopNav/TopNav.tsx | 19 +---- packages/fakeyou.com/src/scss/nav.scss | 7 +- 7 files changed, 164 insertions(+), 21 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx create mode 100644 packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx create mode 100644 packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx create mode 100644 packages/fakeyou.com/src/components/common/SearchBar/index.ts diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx new file mode 100644 index 0000000000..a2ed9fd857 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -0,0 +1,59 @@ +import React, { useCallback, useEffect, useState } from "react"; +import Input from "../Input"; +import Button from "../Button"; +import { faSearch } from "@fortawesome/pro-solid-svg-icons"; +import { + SearchTtsModels, + TtsModel, +} from "@storyteller/components/src/api/tts/SearchTtsModels"; +import SearchResultsDropdown from "./SearchResultsDropdown"; +import SearchField from "./SearchField"; + +interface SearchBarProps {} + +export default function SearchBar(props: SearchBarProps) { + const [searchTerm, setSearchTerm] = useState(""); + const [foundTtsModels, setFoundTtsModels] = useState([]); + + const maybeSearch = useCallback(async (value: string) => { + setSearchTerm(value); + }, []); + + const doSearch = useCallback( + async (value: string) => { + let request = { + search_term: value, + }; + + let response = await SearchTtsModels(request); + + if (response.success) { + let models = [...response.models]; + setFoundTtsModels(models); + } else { + setFoundTtsModels([]); + } + }, + [setFoundTtsModels] + ); + + useEffect(() => { + doSearch(searchTerm); + }, [doSearch, searchTerm]); + + return ( +
+
+ + +
+ +
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx new file mode 100644 index 0000000000..4da3a68528 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import Input from "../Input"; +import { faSearch } from "@fortawesome/pro-solid-svg-icons"; + +interface SearchFieldProps { + value: string; + onChange: (value: string) => void; +} + +export default function SearchField({ value, onChange }: SearchFieldProps) { + return ( + onChange(e.target.value)} + placeholder="Search..." + className="search-bar" + /> + ); +} diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx new file mode 100644 index 0000000000..5db81e1d34 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx @@ -0,0 +1,76 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { TtsModel } from "@storyteller/components/src/api/tts/SearchTtsModels"; +import React from "react"; +import { Link } from "react-router-dom"; +import Button from "../Button"; +import { + faChartSimple, + faComment, + faHeart, +} from "@fortawesome/pro-solid-svg-icons"; + +interface SearchResultsDropdownProps { + data: TtsModel[]; +} + +export default function SearchResultsDropdown({ + data, +}: SearchResultsDropdownProps) { + let likes = 1500; + let uses = 25000; + let comments = 25; + let model_type = "Tacotron2"; + + return ( +
+ {data.map(item => { + let modelPageLink = `/tts/${item.model_token}`; + + return ( +
+
+
{item.title}
+

+ by{" "} + + {item.creator_display_name} + +

+
+
+ + TT2 + +
+
+ + {likes && likes} +
+
+ + {uses && uses} +
+
+ + {comments && comments} +
+
+
+
+
+
+
+
+ ); + })} +
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/SearchBar/index.ts b/packages/fakeyou.com/src/components/common/SearchBar/index.ts new file mode 100644 index 0000000000..f3cedd3e32 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SearchBar/index.ts @@ -0,0 +1 @@ +export { default } from "./SearchBar"; diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index 5813a6520b..f165259cef 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -94,7 +94,7 @@ export default function PageHeader({ if (!panel) { return ( -
+
{(back || showBackButton) && (
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 98605cad6d..b56e0b10e8 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -1,6 +1,6 @@ -import { faSearch } from "@fortawesome/pro-solid-svg-icons"; import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; -import { Button, Input, Select } from "components/common"; +import { Button } from "components/common"; +import SearchBar from "components/common/SearchBar"; import React from "react"; import { Link } from "react-router-dom"; @@ -20,20 +20,7 @@ export default function TopNav(props: TopNavProps) { {/* Search Bar */} -
-
- -
-
+
diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index 7da61e472e..e1991f61e1 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -177,16 +177,15 @@ $topbar-height: 66px; } .search-bar-container { - flex-grow: 1; display: flex; justify-content: center; } .search-bar { - width: 500px; - + width: 580px; .form-control { - padding: 7px 0.75rem !important; + padding-top: 7.25px !important; + padding-bottom: 7.25px !important; border-radius: 0.5rem 0 0 0.5rem !important; &::placeholder { From edc9614cfdbdcd2cdfb3b3880d60f4dad3b9d96b Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 17 Dec 2023 00:14:38 +0700 Subject: [PATCH 07/27] search bar updates --- .../src/components/common/Badge/Badge.scss | 6 ++ .../src/components/common/Badge/Badge.tsx | 4 +- .../common/SearchBar/SearchBar.scss | 70 ++++++++++++ .../components/common/SearchBar/SearchBar.tsx | 20 +++- .../common/SearchBar/SearchField.tsx | 17 ++- .../SearchBar/SearchResultsDropdown.tsx | 102 ++++++++---------- packages/fakeyou.com/src/scss/nav.scss | 29 ----- 7 files changed, 154 insertions(+), 94 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss diff --git a/packages/fakeyou.com/src/components/common/Badge/Badge.scss b/packages/fakeyou.com/src/components/common/Badge/Badge.scss index 81c7b48b3d..dac8b23f8a 100644 --- a/packages/fakeyou.com/src/components/common/Badge/Badge.scss +++ b/packages/fakeyou.com/src/components/common/Badge/Badge.scss @@ -18,6 +18,12 @@ &.shadow { box-shadow: 0 0 12px rgba($bg, 0.4); } + + &.badge-small { + font-size: 11px; + padding: 1px 6px; + border-radius: 0.3rem; + } } @each $color, $value in $badge-colors { diff --git a/packages/fakeyou.com/src/components/common/Badge/Badge.tsx b/packages/fakeyou.com/src/components/common/Badge/Badge.tsx index 7458e7a3b5..a9fdf1d1fe 100644 --- a/packages/fakeyou.com/src/components/common/Badge/Badge.tsx +++ b/packages/fakeyou.com/src/components/common/Badge/Badge.tsx @@ -6,6 +6,7 @@ interface BadgeProps { color: string; overlay?: boolean; className?: string; + small?: boolean; } export default function Badge({ @@ -13,10 +14,11 @@ export default function Badge({ color, overlay = false, className = "", + small = false, }: BadgeProps) { const badgeClass = `fy-badge badge-${color} ${ overlay ? "shadow" : "" - } mb-0 ${className}`.trim(); + } mb-0 ${className} ${small ? "badge-small" : ""}`.trim(); return {label}; } diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss new file mode 100644 index 0000000000..61e2abb7ba --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss @@ -0,0 +1,70 @@ +@import "scss/colours.scss"; + +.search-bar-container { + display: flex; + justify-content: center; +} + +.search-bar-group { + position: relative; + width: 580px; +} + +.search-field { + .form-control { + padding-top: 7.25px !important; + padding-bottom: 7.25px !important; + border-radius: 0.5rem 0 0 0.5rem !important; + position: relative; + z-index: 3; + + &::placeholder { + color: rgba($white, 0.3) !important; + } + } +} + +.search-results-dropdown { + position: absolute; + border-color: lighten($panel-inner, 6%) !important; + border: 1px solid; + top: 46px; + width: 100%; + z-index: 4; + border-radius: 0.5rem; + overflow: hidden; + + .search-results-dropdown-item { + background-color: $panel-inner; + border-bottom: 1px solid lighten($panel-inner, 6%); + transition: 0.05s; + + &:hover { + background-color: lighten($panel-inner, 6%); + cursor: pointer; + } + + &:last-child { + border-bottom: none; + } + } + + .view-more { + display: flex; + justify-content: center; + color: $primary; + font-size: 16px; + font-weight: 500; + } +} + +.search-bar-button { + border-radius: 0 0.5rem 0.5rem 0 !important; + border-color: lighten($secondary, 5%) !important; + background-color: lighten($secondary, 5%) !important; + + &:hover { + border-color: lighten($secondary, 10%) !important; + background-color: lighten($secondary, 10%) !important; + } +} diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index a2ed9fd857..6c12b67ef0 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useEffect, useState } from "react"; -import Input from "../Input"; import Button from "../Button"; import { faSearch } from "@fortawesome/pro-solid-svg-icons"; import { @@ -8,12 +7,14 @@ import { } from "@storyteller/components/src/api/tts/SearchTtsModels"; import SearchResultsDropdown from "./SearchResultsDropdown"; import SearchField from "./SearchField"; +import "./SearchBar.scss"; interface SearchBarProps {} export default function SearchBar(props: SearchBarProps) { const [searchTerm, setSearchTerm] = useState(""); const [foundTtsModels, setFoundTtsModels] = useState([]); + const [isFocused, setIsFocused] = useState(false); const maybeSearch = useCallback(async (value: string) => { setSearchTerm(value); @@ -41,11 +42,22 @@ export default function SearchBar(props: SearchBarProps) { doSearch(searchTerm); }, [doSearch, searchTerm]); + const onBlurHandler = () => { + setTimeout(() => { + setIsFocused(false); + }, 100); + }; + return (
-
- - +
+ setIsFocused(true)} + onBlur={onBlurHandler} + /> + {isFocused && }
+ ); + })} +
+ View more results
- ); - })} -
+
+ )} + ); } diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index e1991f61e1..9fe42f64d9 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -176,35 +176,6 @@ $topbar-height: 66px; align-items: center; } -.search-bar-container { - display: flex; - justify-content: center; -} - -.search-bar { - width: 580px; - .form-control { - padding-top: 7.25px !important; - padding-bottom: 7.25px !important; - border-radius: 0.5rem 0 0 0.5rem !important; - - &::placeholder { - color: rgba($white, 0.3) !important; - } - } -} - -.search-bar-button { - border-radius: 0 0.5rem 0.5rem 0 !important; - border-color: lighten($secondary, 5%) !important; - background-color: lighten($secondary, 5%) !important; - - &:hover { - border-color: lighten($secondary, 10%) !important; - background-color: lighten($secondary, 10%) !important; - } -} - @media (min-width: 992px) { #wrapper { padding-left: 260px; From ade659b1b83040e168d2dac8da7a4dffa505df21 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 17 Dec 2023 01:47:56 +0700 Subject: [PATCH 08/27] search bar mobile update --- .../common/SearchBar/SearchBar.scss | 15 ++- .../components/common/SearchBar/SearchBar.tsx | 3 +- .../SearchBar/SearchResultsDropdown.tsx | 6 - .../layout/MobileMenu/MobileMenu.tsx | 6 +- .../src/components/layout/TopNav/TopNav.tsx | 116 ++++++++++++++---- packages/fakeyou.com/src/scss/nav.scss | 52 +++++++- .../fakeyou.com/src/v2/view/PageContainer.tsx | 2 +- 7 files changed, 166 insertions(+), 34 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss index 61e2abb7ba..5bb35d4dcd 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss @@ -3,11 +3,12 @@ .search-bar-container { display: flex; justify-content: center; + width: 580px; } .search-bar-group { position: relative; - width: 580px; + width: 100%; } .search-field { @@ -68,3 +69,15 @@ background-color: lighten($secondary, 10%) !important; } } + +@media (max-width: 992px) { + .search-bar-container { + width: 100%; + } + + .search-field { + .form-control { + border-radius: 0.5rem !important; + } + } +} diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index 6c12b67ef0..af18d41568 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -43,6 +43,7 @@ export default function SearchBar(props: SearchBarProps) { }, [doSearch, searchTerm]); const onBlurHandler = () => { + // Search field blur/Unfocusing hack: needs a little bit of delay for the result click event to register setTimeout(() => { setIsFocused(false); }, 100); @@ -64,7 +65,7 @@ export default function SearchBar(props: SearchBarProps) { icon={faSearch} onClick={() => {}} variant="secondary" - className="search-bar-button" + className="search-bar-button d-none d-lg-flex" />
); diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx index 322207cb52..058ceadd51 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx @@ -10,12 +10,6 @@ interface SearchResultsDropdownProps { export default function SearchResultsDropdown({ data, }: SearchResultsDropdownProps) { - let likes = 1500; - let uses = 25000; - let comments = 25; - let modelCategory = "TTS"; - let modelType = "Tacotron2"; - const history = useHistory(); const handleResultClick = (item: TtsModel, event: React.MouseEvent) => { diff --git a/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx index 05c166a4fc..099804e831 100644 --- a/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx +++ b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx @@ -27,7 +27,11 @@ export default function MobileMenu(props: MobileMenuProps) { let signupOrProfileButton = ( <> -
-
- +
+
+ {signupOrProfileButton} +
+ + {/* Mobile Searchbar */} +
+
+ +
+
); } diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index 9fe42f64d9..93ea69993d 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -168,12 +168,45 @@ $topbar-height: 66px; } .topbar-nav { - display: flex; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; - padding: 0 1.5rem; + padding: 0 1rem; justify-content: space-between; align-items: center; + + .topbar-nav-right { + display: flex; + justify-content: end; + } + + .topbar-nav-right { + display: flex; + justify-content: end; + } + + .topbar-nav-center { + grid-column: 2; + } +} + +.topbar-mobile-search-bar-container { + position: absolute; + width: 100%; + z-index: 1000; + top: 0; + height: $topbar-height; + background-color: $panel; + + .topbar-mobile-search-bar { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + padding: 0 1rem; + } } @media (min-width: 992px) { @@ -202,3 +235,18 @@ $topbar-height: 66px; margin-right: 0; } } + +@media (max-width: 992px) { + #wrapper.toggled #sidebar-wrapper { + width: 100%; + } + + #sidebar-wrapper { + left: 100%; + margin-left: 0; + } + + .sidebar-nav { + width: 100%; + } +} diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 04446cbb54..2f20842783 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -212,7 +212,7 @@ class PageContainer extends React.Component<
- + Date: Sun, 17 Dec 2023 14:24:54 +0700 Subject: [PATCH 09/27] resonsive search bar and menu update --- .../common/SearchBar/SearchBar.scss | 2 +- .../components/common/SearchBar/SearchBar.tsx | 29 +++---- .../common/SearchBar/SearchField.tsx | 3 + .../src/components/layout/TopNav/TopNav.tsx | 76 ++++++++++++++++--- packages/fakeyou.com/src/scss/nav.scss | 15 ++++ 5 files changed, 100 insertions(+), 25 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss index 5bb35d4dcd..74e95922b0 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss @@ -6,7 +6,7 @@ width: 580px; } -.search-bar-group { +.search-field-group { position: relative; width: 100%; } diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index af18d41568..25558f341b 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -9,12 +9,21 @@ import SearchResultsDropdown from "./SearchResultsDropdown"; import SearchField from "./SearchField"; import "./SearchBar.scss"; -interface SearchBarProps {} +interface SearchBarProps { + autoFocus?: boolean; + onBlur?: () => void; + onFocus?: () => void; + isFocused?: boolean; +} -export default function SearchBar(props: SearchBarProps) { +export default function SearchBar({ + autoFocus, + onBlur, + onFocus, + isFocused, +}: SearchBarProps) { const [searchTerm, setSearchTerm] = useState(""); const [foundTtsModels, setFoundTtsModels] = useState([]); - const [isFocused, setIsFocused] = useState(false); const maybeSearch = useCallback(async (value: string) => { setSearchTerm(value); @@ -42,21 +51,15 @@ export default function SearchBar(props: SearchBarProps) { doSearch(searchTerm); }, [doSearch, searchTerm]); - const onBlurHandler = () => { - // Search field blur/Unfocusing hack: needs a little bit of delay for the result click event to register - setTimeout(() => { - setIsFocused(false); - }, 100); - }; - return (
-
+
setIsFocused(true)} - onBlur={onBlurHandler} + onFocus={onFocus} + onBlur={onBlur} + autoFocus={autoFocus} /> {isFocused && }
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx index 05a9240fde..6597f331fb 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx @@ -6,6 +6,7 @@ interface SearchFieldProps { onChange: (value: string) => void; onFocus?: () => void; onBlur?: () => void; + autoFocus?: boolean; } export default function SearchField({ @@ -13,6 +14,7 @@ export default function SearchField({ onChange, onFocus, onBlur, + autoFocus = false, }: SearchFieldProps) { return ( ); } diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 373613cecb..687ebea489 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -1,7 +1,12 @@ -import { faBars, faSearch, faUser } from "@fortawesome/pro-solid-svg-icons"; +import { + faBars, + faSearch, + faUser, + faXmark, +} from "@fortawesome/pro-solid-svg-icons"; import { Button } from "components/common"; import SearchBar from "components/common/SearchBar"; -import React from "react"; +import React, { useState } from "react"; import { Link, useHistory } from "react-router-dom"; import { WebUrl } from "common/WebUrl"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; @@ -12,18 +17,48 @@ interface TopNavProps { export default function TopNav({ sessionWrapper }: TopNavProps) { let history = useHistory(); + const [isMobileSearchBarVisible, setIsMobileSearchBarVisible] = + useState(false); + const [isFocused, setIsFocused] = useState(false); + const wrapper = document.getElementById("wrapper"); + const [menuButtonIcon, setMenuButtonIcon] = useState(faBars); const handleMenuButtonClick = () => { - const wrapper = document.getElementById("wrapper"); - if (window.innerWidth < 1200) { if (wrapper) { wrapper.classList.toggle("toggled"); + if (menuButtonIcon === faBars) { + setMenuButtonIcon(faXmark); + } else { + setMenuButtonIcon(faBars); + } } } }; - const handleSearchButtonClick = () => {}; + const handleSearchButtonClick = () => { + setIsMobileSearchBarVisible(true); + if (window.innerWidth < 1200) { + if (wrapper) { + wrapper.classList.remove("toggled"); + } + } + }; + + const onFocusHandler = () => { + setIsFocused(true); + }; + + const onBlurHandler = () => { + // Search field blur/Unfocusing hack: needs a little bit of delay for the result click event to register + setTimeout(() => { + setIsFocused(false); + + if (isMobileSearchBarVisible) { + setIsMobileSearchBarVisible(false); + } + }, 100); + }; let signupOrProfileButton = ( <> @@ -72,7 +107,11 @@ export default function TopNav({ sessionWrapper }: TopNavProps) {
{/* Search Bar */}
- +
@@ -88,7 +127,7 @@ export default function TopNav({ sessionWrapper }: TopNavProps) { className="d-lg-none" />
-
+ )}
); } diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index 93ea69993d..10d6ad3a9a 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -206,6 +206,21 @@ $topbar-height: 66px; transform: translate(-50%, -50%); width: 100%; padding: 0 1rem; + + .close-search-button { + position: absolute; + top: 0; + right: 0; + margin: 0 1.8rem; + color: $white; + height: 100%; + font-size: 1.5rem; + cursor: pointer; + z-index: 4; + background: none; + border: none; + padding: 0; + } } } From 341cff9b32a7824ca4caa11159436e08f1f121ab Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 17 Dec 2023 16:20:59 +0700 Subject: [PATCH 10/27] sidebar fixed bottom --- .../src/components/layout/SideNav/SideNav.tsx | 423 ++++++++++-------- .../src/components/layout/TopNav/TopNav.tsx | 106 ++++- packages/fakeyou.com/src/scss/nav.scss | 16 +- .../fakeyou.com/src/v2/view/PageContainer.tsx | 9 +- 4 files changed, 356 insertions(+), 198 deletions(-) diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index ae85d5ddd4..211177ff9e 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -5,16 +5,15 @@ import { faTrophy, faWaveformLines, faStar, - faUser, - faSignOutAlt, faFaceViewfinder, faCloudUpload, faWandMagicSparkles, faHome, faCompass, + faUser, + faSignOutAlt, } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import Button from "components/common/Button/Button"; import React, { useEffect, useState } from "react"; import { NavLink, useHistory } from "react-router-dom"; import { @@ -22,11 +21,12 @@ import { GetQueueStatsIsOk, GetQueueStatsSuccessResponse, } from "@storyteller/components/src/api/stats/queues/GetQueueStats"; -import { WebUrl } from "common/WebUrl"; -import { Logout } from "@storyteller/components/src/api/session/Logout"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { FakeYouFrontendEnvironment } from "@storyteller/components/src/env/FakeYouFrontendEnvironment"; import { useLocalize } from "hooks"; +import { Logout } from "@storyteller/components/src/api/session/Logout"; +import { Button } from "components/common"; +import { WebUrl } from "common/WebUrl"; const DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS = 15000; @@ -37,19 +37,28 @@ interface SideNavProps { querySessionSubscriptionsCallback: () => void; } -export default function SideNav(props: SideNavProps) { +export default function SideNav({ + sessionWrapper, + querySessionCallback, + querySessionSubscriptionsCallback, +}: SideNavProps) { const { t } = useLocalize("SideNav"); - let history = useHistory(); const [windowWidth, setWindowWidth] = useState(window.innerWidth); const fakeYouFrontendEnv = FakeYouFrontendEnvironment.getInstance(); // eslint-disable-next-line @typescript-eslint/no-unused-vars const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment(); - const handleNavLinkClick = () => { - const wrapper = document.getElementById("wrapper"); + const wrapper = document.getElementById("wrapper"); + const isMenuOpen = wrapper?.classList.contains("toggled"); + let history = useHistory(); + const handleNavLinkClick = () => { if (window.innerWidth < 992) { if (wrapper) { wrapper.classList.toggle("toggled"); + // Dispatch the event here after toggling the class (Links with the TopNav menu icon change) + window.dispatchEvent( + new CustomEvent("menuToggle", { detail: { isOpen: isMenuOpen } }) + ); } } }; @@ -143,24 +152,23 @@ export default function SideNav(props: SideNavProps) { const logoutHandler = async () => { await Logout(); - props.querySessionCallback(); - props.querySessionSubscriptionsCallback(); + querySessionCallback(); + querySessionSubscriptionsCallback(); // PosthogClient.reset(); // Analytics.accountLogout(); history.push("/"); }; - const loggedIn = props.sessionWrapper.isLoggedIn(); + const loggedIn = sessionWrapper.isLoggedIn(); let userOrLoginButton = ( <> From c66b75c8d8f0c14290f0471343b4653e98e88c2d Mon Sep 17 00:00:00 2001 From: BFlat Date: Thu, 21 Dec 2023 10:27:04 +0700 Subject: [PATCH 22/27] warning fix --- packages/fakeyou.com/src/scss/nav.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index 76d584d590..f42b1bf41a 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -178,12 +178,12 @@ $topbar-height: 66px; .topbar-nav-right { display: flex; - justify-content: end; + justify-content: flex-end; } .topbar-nav-right { display: flex; - justify-content: end; + justify-content: flex-end; } .topbar-nav-center { From a63468a5a9977e6b5e68a826b4fa2bb8e53a2724 Mon Sep 17 00:00:00 2001 From: BFlat Date: Thu, 21 Dec 2023 11:06:44 +0700 Subject: [PATCH 23/27] link and fav button update --- .../src/components/common/Card/AudioCard/AudioCard.tsx | 2 +- .../src/components/common/Card/ImageCard/ImageCard.tsx | 2 +- .../src/components/common/FavoriteButton/FavoriteButton.tsx | 5 ++--- 3 files changed, 4 insertions(+), 5 deletions(-) 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 627806a467..cd7bb55f52 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -31,7 +31,7 @@ export default function AudioCard({ if (type === "media") { history.push(`/media/${data.token}`); } else if (type === "weights") { - history.push(`/weights/${data.token}`); + history.push(`/weight/${data.token}`); } }; diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx index 265a0443ce..2b69ffe5ca 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -22,7 +22,7 @@ export default function ImageCard({ data, type, showCreator }: ImageCardProps) { if (type === "media") { history.push(`/media/${data.token}`); } else if (type === "weights") { - history.push(`/weights/${data.token}`); + history.push(`/weight/${data.token}`); } }; diff --git a/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx b/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx index 434da70aa8..adcbbbebf7 100644 --- a/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx +++ b/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx @@ -13,7 +13,6 @@ interface FavoriteButtonProps { favoriteCount?: number; overlay?: boolean; large?: boolean; - isFavorited?: boolean; } export default function FavoriteButton({ @@ -22,7 +21,6 @@ export default function FavoriteButton({ favoriteCount, overlay, large, - isFavorited, }: FavoriteButtonProps) { const [isToggled, setIsToggled] = useState(initialToggled); const [isLoading, setIsLoading] = useState(false); @@ -54,6 +52,7 @@ export default function FavoriteButton({ trigger="mouseenter" delay={[500, 0]} offset={[0, 12]} + placement="bottom" > From 5c6d0e0da33df0ae853b8bc057e666b9e64e3752 Mon Sep 17 00:00:00 2001 From: BFlat Date: Thu, 21 Dec 2023 19:15:19 +0700 Subject: [PATCH 24/27] infinite scroll explore media --- .../src/api/media_files/ListMediaFiles.ts | 26 +++++ .../hooks/useListContent/useListContent.tsx | 64 +++++++++---- .../v2/view/pages/explore/tabs/MediaTab.tsx | 96 +++++++++---------- 3 files changed, 120 insertions(+), 66 deletions(-) create mode 100644 packages/components/src/api/media_files/ListMediaFiles.ts diff --git a/packages/components/src/api/media_files/ListMediaFiles.ts b/packages/components/src/api/media_files/ListMediaFiles.ts new file mode 100644 index 0000000000..4b9e262a7b --- /dev/null +++ b/packages/components/src/api/media_files/ListMediaFiles.ts @@ -0,0 +1,26 @@ +import MakeRequest from "../MakeRequest"; +import { MediaFile } from "./GetMedia"; +// import { MediaFileType } from "../_common/enums/MediaFileType"; +import { Pagination } from "../_common/SharedFetchTypes"; + +export interface ListMediaFilesRequest {} + +export interface ListMediaFilesResponse { + pagination: Pagination; + success: boolean; + results: MediaFile[]; +} + +export interface ListMediaFilesParams { + page_index: number; +} + +export const ListMediaFiles = MakeRequest< + string, + ListMediaFilesRequest, + ListMediaFilesResponse, + ListMediaFilesParams +>({ + method: "GET", + routingFunction: () => `/v1/media_files/list`, +}); diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index f7d0bfeee6..59ce127c1e 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState } from "react"; import { useSession } from "hooks"; interface Props { @@ -8,9 +8,18 @@ interface Props { listSet: any; pagePreset?: number; requestList?: boolean; + isInfiniteScroll?: boolean; } -export default function useListContent({ addQueries, fetcher, list, listSet, pagePreset = 0, requestList = false }: Props) { +export default function useListContent({ + addQueries, + fetcher, + list, + listSet, + pagePreset = 0, + requestList = false, + isInfiniteScroll = false, +}: Props) { const { user } = useSession(); const [filter, filterSet] = useState("all"); const [page, pageSet] = useState(pagePreset); @@ -20,12 +29,17 @@ export default function useListContent({ addQueries, fetcher, list, listSet, pag const pageChange = (page: number) => { pageSet(page); + if (!isInfiniteScroll || page === 1) { + listSet([]); // Reset list if not in infinite scroll mode or starting from first page + } statusSet(1); }; - const onChange = ({ target }: { target: { name: string, value: any} }) => { - const todo: { [ key: string]: (x: any) => void } = { filterSet, sortSet }; + const onChange = ({ target }: { target: { name: string; value: any } }) => { + const todo: { [key: string]: (x: any) => void } = { filterSet, sortSet }; todo[target.name + "Set"](target.value); + pageSet(1); // Reset to first page on filter/sort change + listSet([]); // Reset list on filter/sort change statusSet(1); }; @@ -33,22 +47,40 @@ export default function useListContent({ addQueries, fetcher, list, listSet, pag if (user && user.username) { if (status === 1) { statusSet(2); - fetcher(user.username, {}, { - page_index: page, - ...addQueries, // eventually we should provide a way to type this ... or not. It works - ...filter !== "all" ? { filter_media_type: filter } : {}, - ...sort !== "newest" ? { sort_ascending: true } : {}, - }).then((res: any) => { + fetcher( + user.username, + {}, + { + page_index: page, + ...addQueries, // eventually we should provide a way to type this ... or not. It works + ...(filter !== "all" ? { filter_media_type: filter } : {}), + ...(sort !== "newest" ? { sort_ascending: true } : {}), + } + ).then((res: any) => { statusSet(3); - console.log("๐Ÿงถ",res); + console.log("๐Ÿงถ", res); if (res.results && res.pagination) { - pageCountSet(res.pagination.total_page_count) - listSet(res.results); + pageCountSet(res.pagination.total_page_count); + if (isInfiniteScroll && page !== 1) { + listSet((prevList: any) => [...prevList, ...res.results]); // Append to list for infinite scroll + } else { + listSet(res.results); // Replace list for regular pagination + } } }); } } - }, [addQueries, fetcher, filter, listSet, page, user, sort, status]); + }, [ + addQueries, + fetcher, + filter, + listSet, + page, + user, + sort, + status, + isInfiniteScroll, + ]); return { filter, @@ -63,6 +95,6 @@ export default function useListContent({ addQueries, fetcher, list, listSet, pag sort, sortSet, status, - statusSet + statusSet, }; -}; \ No newline at end of file +} diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx index 6d3e87000a..7bcb9bdb30 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx @@ -1,39 +1,40 @@ -import React, { useRef, useState } from "react"; +import React, { useCallback, useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; -import mockMediaData from "./mockMediaData"; import AudioCard from "components/common/Card/AudioCard"; import ImageCard from "components/common/Card/ImageCard"; import VideoCard from "components/common/Card/VideoCard"; -import Select from "components/common/Select"; +import { TempSelect } 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 { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles"; +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; +import { useListContent } from "hooks"; import InfiniteScroll from "react-infinite-scroll-component"; export default function MediaTab() { const gridContainerRef = useRef(null); - const [data, setData] = useState(mockMediaData); const [isLoading] = useState(false); - const [hasMore, setHasMore] = useState(true); - const fetchMoreData = () => { - // Simulate a delay (like fetching API) - setTimeout(() => { - const moreData = data.concat( - // Here, create more dummy data - mockMediaData.map(item => ({ ...item, id: item.token + data.length })) - ); + const [list, listSet] = useState([]); + const media = useListContent({ + fetcher: ListMediaFiles, + list, + listSet, + pagePreset: 1, + requestList: true, + isInfiniteScroll: true, + }); - setData(moreData); - - if (moreData.length >= mockMediaData.length * 2) { - setHasMore(false); - } - }, 1500); - }; + // Fetch more data for infinite scroll + const fetchMoreData = useCallback(() => { + if (media.page < media.pageCount) { + media.pageChange(media.page + 1); + } + }, [media]); const filterOptions = [ { value: "all", label: "All Media" }, @@ -52,17 +53,23 @@ export default function MediaTab() { <>
-
@@ -75,8 +82,9 @@ export default function MediaTab() { ) : (
@@ -84,41 +92,29 @@ export default function MediaTab() {
} - dataLength={data.length} + endMessage={ +

No more results.

+ } className="overflow-hidden" > console.log("Layout complete!")} > - {data.map((data, index) => { + {media.list.map((data: MediaFile, index: number) => { let card; switch (data.media_type) { case "audio": - card = ( - - ); + card = ; break; case "image": - card = ( - - ); + card = ; break; case "video": - card = ; + card = ; break; default: - card =
Unsupported media type
; + card =
Unsupported media type
; } return (
Date: Thu, 21 Dec 2023 21:35:49 +0700 Subject: [PATCH 25/27] show creator on media cards --- .../v2/view/pages/explore/tabs/MediaTab.tsx | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx index 7bcb9bdb30..0745b8dd78 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx @@ -105,13 +105,34 @@ export default function MediaTab() { let card; switch (data.media_type) { case "audio": - card = ; + card = ( + + ); break; case "image": - card = ; + card = ( + + ); break; case "video": - card = ; + card = ( + + ); break; default: card =
Unsupported media type
; From fed78e247c1ccd2e793b992e0be2c984e37cd950 Mon Sep 17 00:00:00 2001 From: BFlat Date: Thu, 21 Dec 2023 21:41:41 +0700 Subject: [PATCH 26/27] no animation for masonry grid --- .../src/components/common/MasonryGrid/MasonryGrid.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fakeyou.com/src/components/common/MasonryGrid/MasonryGrid.tsx b/packages/fakeyou.com/src/components/common/MasonryGrid/MasonryGrid.tsx index df2b4e27a7..0e2fb19312 100644 --- a/packages/fakeyou.com/src/components/common/MasonryGrid/MasonryGrid.tsx +++ b/packages/fakeyou.com/src/components/common/MasonryGrid/MasonryGrid.tsx @@ -27,6 +27,7 @@ export default function MasonryGrid({ masonryInstance = new Masonry(gridRef.current, { itemSelector: ".grid-item", percentPosition: true, + transitionDuration: 0, }); //Needs this or images will overflow masonry card. It checks if image is loaded then after it is loaded, it resizes the card. From c6c0103ea3492cbc2fed04eddc491abd1778e1f2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 22 Dec 2023 00:17:29 +0700 Subject: [PATCH 27/27] maybe_creator in card --- .../components/common/Card/AudioCard/AudioCard.tsx | 12 +++++------- .../components/common/Card/ImageCard/ImageCard.tsx | 10 +++++----- .../components/common/Card/VideoCard/VideoCard.tsx | 10 +++++----- 3 files changed, 15 insertions(+), 17 deletions(-) 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 cd7bb55f52..7de27ff126 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -81,15 +81,13 @@ export default function AudioCard({ {showCreator && (
)} diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx index 2b69ffe5ca..92ee2206cf 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -68,15 +68,15 @@ export default function ImageCard({ data, type, showCreator }: ImageCardProps) { {showCreator && (
)} diff --git a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx index b8ae0c0f19..67ab65b1d2 100644 --- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx @@ -64,15 +64,15 @@ export default function VideoCard({ data, type, showCreator }: VideoCardProps) { {showCreator && (
)}