User not found
; + } + + if (!userData) { + return null; + } + + let profileJoinDate: Array
+
+ );
+
+ let profileDesc = (
+ Joined {joinDate}
+No profile description.
+ );
+
+ if (!!userData.profile_rendered_html) {
+ profileDesc = (
+
+ );
+ }
+
+ let editProfileButton = undefined;
+
+ let banUserButton = undefined;
+
+ let upgradeButton = undefined;
+
+ if (props.sessionWrapper.isLoggedIn()) {
+ if (props.sessionWrapper.userTokenMatches(userData.user_token)) {
+ if (!props.sessionSubscriptionsWrapper.hasPaidFeatures()) {
+ const upgradeLinkUrl = WebUrl.pricingPage();
+
+ upgradeButton = (
+ <>
+
+
+ );
+ }
+ }
+ }
+
+ if (props.sessionWrapper.canBanUsers()) {
+ const currentlyBanned = userData.maybe_moderator_fields?.is_banned;
+ const banLinkUrl = WebUrl.userProfileBanPage(userData.username);
+ const buttonLabel = currentlyBanned ? "Unban" : "Ban";
+ const banButtonCss = currentlyBanned ? "secondary" : "danger";
+
+ banUserButton = (
+ <>
+
+
+ );
+ }
+
+ if (props.sessionWrapper.canEditUserProfile(userData.username)) {
+ const editLinkUrl = WebUrl.userProfileEditPage(userData.username);
+
+ // Mods shouldn't edit preferences.
+ const buttonLabel = props.sessionWrapper.userTokenMatches(
+ userData.user_token
+ )
+ ? "Edit Profile & Preferences"
+ : "Edit Profile";
+
+ editProfileButton = (
+ <>
+
+
+ );
+ }
+
+ let profileRows: Array{websiteUrl}
);
+ }
+
+ if (userData.twitch_username) {
+ let twitchUrl = `https://twitch.com/${userData.twitch_username}`;
+ let twitchLink = (
+ {twitchLink}
);
+ }
+
+ if (userData.twitter_username) {
+ let twitterUrl = `https://twitter.com/${userData.twitter_username}`;
+ let twitterLink = (
+ {twitterLink}
);
+ }
+
+ if (userData.discord_username) {
+ profileRows.push(
+ +
{userData.discord_username}
+ + } + interactive + hideOnClick + placement="bottom" + theme="fakeyou" + arrow={false} + > + +{githubLink}
);
+ }
+
+ if (userData.cashapp_username) {
+ // NB: URL includes a dollar sign
+ let cashAppUrl = `https://cash.me/$${userData.cashapp_username}`;
+ let cashAppLink = (
+ {cashAppLink}
);
+ }
+
+ return (
+ <>
+ {/* DESKTOP */}
+
+
+
+ {/* MOBILE */}
+ + {userData.display_name || "Profile Name"} +
+{profileJoinDate}
+ {profileDesc}
+
+ <>
+ +
+ {profileRows}
+
+ {props.sessionWrapper.isLoggedIn() && (
+
+ {editProfileButton}
+ {banUserButton}
+ {upgradeButton}
+
+ )}
+
+
+
+
+ );
+}
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index e4fbb727b9..93d54ebd3a 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -62,6 +62,7 @@ export default function SideNav({
const isOnLoginPage = window.location.pathname.includes("/login");
const isOnSignUpPage = window.location.pathname.includes("/signup");
const isOnStudioPage = window.location.pathname.includes("/studio");
+ const isOnProfilePage = window.location.pathname.includes("/profile/");
const isOnBetaKeyRedeemPage =
window.location.pathname.includes("/beta-key/redeem");
const domain: WebsiteConfig = useDomainConfig();
@@ -115,9 +116,13 @@ export default function SideNav({
}, []);
const shouldNotShowSidebar =
- (!isLoggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage)) ||
+ (!isLoggedIn &&
+ (isOnLandingPage ||
+ isOnLoginPage ||
+ isOnSignUpPage ||
+ isOnProfilePage)) ||
isOnStudioPage ||
- (domain.website === Website.StorytellerAi && isOnLandingPage) ||
+ isOnProfilePage ||
isOnBetaKeyRedeemPage;
const shouldShowSidebar = windowWidth >= 992 && !shouldNotShowSidebar;
const sidebarClassName = `sidebar ${
@@ -337,6 +342,10 @@ export default function SideNav({
);
+ if (domain.website === Website.StorytellerAi) {
+ return null;
+ }
+
return (
<>
+
+
+ {/*
+
+ + {userData.display_name || "Profile Name"} +
+{profileJoinDate}
+ {profileDesc}
*/}
+
+
+ {profileRows}
+
+
+ {props.sessionWrapper.isLoggedIn() && (
+
+ {editProfileButton}
+ {banUserButton}
+ {upgradeButton}
+
+ )}
+
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index 968df754d5..d33e90b200 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -10,19 +10,30 @@ import {
faClipboardList,
faChevronLeft,
faMessageImage,
+ faPortalEnter,
+ faHome,
+ faCompass,
+ faCloudUpload,
+ faTrophy,
+ faBookOpen,
+ faFilms,
} from "@fortawesome/pro-solid-svg-icons";
import { Button } from "components/common";
import SearchBar from "components/common/SearchBar";
import React, { useEffect, useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link, NavLink, useHistory } from "react-router-dom";
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
import { Logout } from "@storyteller/components/src/api/session/Logout";
-import { useModal, useSession } from "hooks";
+import { useLocalize, useModal, useSession } from "hooks";
import { InferenceJobsModal } from "components/modals";
import { useDomainConfig } from "context/DomainConfigContext";
import NavItem from "../../common/NavItem/NavItem";
import ProfileDropdown from "components/common/ProfileDropdown";
import "./TopNav.scss";
+import { Website } from "@storyteller/components/src/env/GetWebsite";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import { GetDiscordLink } from "@storyteller/components/src/env/GetDiscordLink";
interface TopNavProps {
sessionWrapper: SessionWrapper;
@@ -43,7 +54,7 @@ export default function TopNav({
const [isFocused, setIsFocused] = useState(false);
const wrapper = document.getElementById("wrapper");
const [menuButtonIcon, setMenuButtonIcon] = useState(faBars);
- // const { t } = useLocalize("TopNav");
+ const { t } = useLocalize("SideNav");
const isOnLandingPage = window.location.pathname === "/";
const isOnLoginPage = window.location.pathname.includes("/login");
const isOnSignUpPage = window.location.pathname.includes("/signup");
@@ -56,20 +67,10 @@ export default function TopNav({
const [isScrolled, setIsScrolled] = useState(false);
const loggedIn = sessionWrapper.isLoggedIn();
const showNavItem =
- !loggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage);
+ (!loggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage)) ||
+ domain.titlePart === "Storyteller AI";
- const handleMenuButtonClick = () => {
- if (window.innerWidth < 1200) {
- if (wrapper) {
- wrapper.classList.toggle("toggled");
- if (menuButtonIcon === faBars) {
- setMenuButtonIcon(faXmark);
- } else {
- setMenuButtonIcon(faBars);
- }
- }
- }
- };
+ const [mobileMenu, setMobileMenu] = useState("d-none");
const handleSearchButtonClick = () => {
setIsMobileSearchBarVisible(true);
@@ -212,6 +213,21 @@ export default function TopNav({
return null;
}
+ const handleNavLinkClick = () => {
+ setMobileMenu("d-none");
+ setMenuButtonIcon(faBars);
+ };
+
+ const handleMenuButtonClick = () => {
+ if (mobileMenu === "d-none") {
+ setMobileMenu("d-block");
+ setMenuButtonIcon(faXmark);
+ } else {
+ setMobileMenu("d-none");
+ setMenuButtonIcon(faBars);
+ }
+ };
+
return (
-
-
+
+ {/* Old Profile Page */}
+ {/*
*/}
+
+
+
diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
index 458e8f7380..6f8b8ce116 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
@@ -152,13 +152,13 @@ export default function MediaPage() {
let pageTitle;
switch (mediaFile?.media_type) {
- case MediaFileType.Audio:
+ case MediaFileType.Audio:
pageTitle = mediaFile?.maybe_title || "Audio File";
break;
- case MediaFileType.Video:
+ case MediaFileType.Video:
pageTitle = mediaFile?.maybe_title || "Video File";
break;
- case MediaFileType.Image:
+ case MediaFileType.Image:
pageTitle = mediaFile?.maybe_title || "Image File";
break;
default:
@@ -231,7 +231,9 @@ export default function MediaPage() {
{prompt?.used_face_detailer && (
<>
(undefined);
+ const [notFoundState, setNotFoundState] = useState(false);
+
+ const getUser = useCallback(async username => {
+ const response = await GetUserByUsername(username);
+ if (GetUserByUsernameIsOk(response)) {
+ setUserData(response);
+ } else if (GetUserByUsernameIsErr(response)) {
+ switch (response) {
+ case UserLookupError.NotFound:
+ setNotFoundState(true);
+ break;
+ }
+ }
+ }, []);
+
+ useEffect(() => {
+ getUser(username);
+ }, [username, getUser]);
+
+ const documentTitle =
+ userData?.display_name === undefined
+ ? undefined
+ : `${userData.display_name}`;
+ usePrefixedDocumentTitle(documentTitle);
+
+ if (
+ pathname === `/profile/${username}` ||
+ pathname === `/profile/${username}/`
+ ) {
+ return
+
+ );
+}
+
+export { ProfilePageV3 };
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/AudiosTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/AudiosTab.tsx
new file mode 100644
index 0000000000..18a04225e4
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/AudiosTab.tsx
@@ -0,0 +1,117 @@
+import React, { useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
+import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
+import MediaCards from "components/common/Card/MediaCards";
+import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
+import SkeletonCard from "components/common/Card/SkeletonCard";
+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 { useBookmarks, useListContent, useRatings } from "hooks";
+import prepFilter from "resources/prepFilter";
+
+export default function AudiosTab({ username }: { username: string }) {
+ const { pathname: source, search } = useLocation();
+ const urlQueries = new URLSearchParams(search);
+ const bookmarks = useBookmarks();
+ const ratings = useRatings();
+ const gridContainerRef = useRef(null);
+ const [showMasonryGrid, setShowMasonryGrid] = useState(true);
+ const [mediaType, mediaTypeSet] = useState(
+ urlQueries.get("filter_media_type") || "audio"
+ );
+ const [list, listSet] = useState([]);
+ const media = useListContent({
+ addQueries: {
+ page_size: urlQueries.get("page_size") || "24",
+ ...prepFilter(
+ mediaType,
+ "filter_media_type",
+ mediaType === "3dFile" ? "bvh,glb,gltf" : ""
+ ),
+ },
+ addSetters: { mediaTypeSet },
+ // debug: "profile media",
+ fetcher: GetMediaByUser,
+ list,
+ listSet,
+ onInputChange: () => setShowMasonryGrid(false),
+ onSuccess: res => {
+ bookmarks.gather({ res, key: "token" });
+ ratings.gather({ res, key: "token" });
+ setShowMasonryGrid(true);
+ },
+ requestList: true,
+ urlParam: username.toLowerCase(),
+ });
+
+ const handlePageClick = (selectedItem: { selected: number }) => {
+ media.pageChange(selectedItem.selected);
+ };
+
+ const paginationProps = {
+ onPageChange: handlePageClick,
+ pageCount: media.pageCount,
+ currentPage: media.page,
+ };
+
+ return (
+ <>
+
+ {media.isLoading ? (
+ console.log("Layout complete!")}
+ >
+ {media.list.map((data: MediaFile, key: number) => {
+ let props = {
+ bookmarks,
+ data,
+ source,
+ ratings,
+ type: "media",
+ };
+ return (
+
+ )}
+
+ )}
+
+ )}
+
+
+ (null);
+ const [showMasonryGrid, setShowMasonryGrid] = useState(true);
+ const [mediaType, mediaTypeSet] = useState(
+ urlQueries.get("filter_media_type") || "video"
+ );
+ const [list, listSet] = useState([]);
+ const media = useListContent({
+ addQueries: {
+ page_size: urlQueries.get("page_size") || "24",
+ ...prepFilter(
+ mediaType,
+ "filter_media_type",
+ mediaType === "3dFile" ? "bvh,glb,gltf" : ""
+ ),
+ },
+ addSetters: { mediaTypeSet },
+ // debug: "profile media",
+ fetcher: GetMediaByUser,
+ list,
+ listSet,
+ onInputChange: () => setShowMasonryGrid(false),
+ onSuccess: res => {
+ bookmarks.gather({ res, key: "token" });
+ ratings.gather({ res, key: "token" });
+ setShowMasonryGrid(true);
+ },
+ requestList: true,
+ urlParam: username.toLowerCase(),
+ });
+
+ const handlePageClick = (selectedItem: { selected: number }) => {
+ media.pageChange(selectedItem.selected);
+ };
+
+ const paginationProps = {
+ onPageChange: handlePageClick,
+ pageCount: media.pageCount,
+ currentPage: media.page,
+ };
+
+ return (
+ <>
+
+ {media.isLoading ? (
+ console.log("Layout complete!")}
+ >
+ {media.list.map((data: MediaFile, key: number) => {
+ let props = {
+ bookmarks,
+ data,
+ source,
+ ratings,
+ type: "media",
+ };
+ return (
+
+ )}
+
+ )}
+
+ )}
+
+
+
+
- {showNavItem && (
-
-
- )}
+
+
+
+
- {showNavItem && (
-
- {/*
+
+
)}
@@ -366,7 +394,176 @@ export default function TopNav({
test
*/}
+
+
{/* Mobile Searchbar */}
{isMobileSearchBarVisible && (
diff --git a/packages/fakeyou.com/src/scss/colours.scss b/packages/fakeyou.com/src/scss/colours.scss
index 9ef966d8bc..9aae25c784 100644
--- a/packages/fakeyou.com/src/scss/colours.scss
+++ b/packages/fakeyou.com/src/scss/colours.scss
@@ -1,6 +1,7 @@
// Default colours
$primary: #e66462;
$secondary: #39394c;
+$action: #55556b;
$bg: #1a1a27;
$input: #39394c;
$input-placeholder: #aeaeb3;
diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss
index 1ff8109a50..64257767da 100644
--- a/packages/fakeyou.com/src/scss/nav.scss
+++ b/packages/fakeyou.com/src/scss/nav.scss
@@ -58,7 +58,7 @@ $topbar-height: 66px;
flex-direction: column;
width: 100%;
position: relative;
- padding-left: 260px;
+ // padding-left: 260px;
padding-top: $topbar-height;
transition: all 0.2s ease;
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 0c9ed0db47..b5ec7c0535 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -1093,7 +1093,7 @@ styles with important tags:
}
.tippy-box[data-theme~="fakeyou"] {
- background-color: lighten($secondary, 5%);
+ background-color: darken($secondary, 12%);
color: $white;
}
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index e624699559..de3c1e953f 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -98,7 +98,6 @@ import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage";
import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage";
// import { StorytellerStudioListPage } from "./pages/storyteller_studio/StorytellerStudioPage";
import TopNav from "components/layout/TopNav/TopNav";
-import SideNav from "components/layout/SideNav/SideNav";
import MediaPage from "./pages/media/MediaPage";
import EditCoverImage from "./pages/media/EditCoverImage";
import MediaRenamePage from "./pages/media/MediaRenamePage";
@@ -110,7 +109,7 @@ import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmai
import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage";
// import EngineCompositor from "./pages/EngineCompositor/EngineCompositor";
import InferenceJobsPage from "./pages/inference_jobs_page/InferenceJobsPage";
-import { NewProfilePage } from "./pages/profile/profile_view/NewProfilePage";
+// import { NewProfilePage } from "./pages/profile/profile_view/NewProfilePage";
import { ModerationJobControlPage } from "./pages/moderation/job_control/ModerationJobControlPage";
import WeightPage from "./pages/weight/WeightPage";
import ExplorePage from "./pages/explore/ExplorePage";
@@ -140,6 +139,8 @@ import CreateBetaKeyPage from "./pages/beta_key/CreateBetaKeyPage";
import RedeemBetaKeyPage from "./pages/beta_key/RedeemBetaKeyPage";
import RedeemSuccessPage from "./pages/beta_key/RedeemSuccessPage";
import BetaKeysListPage from "./pages/beta_key/BetaKeysListPage";
+import { ProfilePageV3 } from "./pages/profile/profile_view/ProfilePageV3";
+import ProfileSidePanel from "components/layout/ProfileSidePanel/ProfileSidePanel";
interface Props {
sessionWrapper: SessionWrapper;
@@ -262,12 +263,11 @@ class PageContainer extends React.Component<
this.props.querySessionSubscriptionsAction
}
/>
- -
+
-
+
+ ++ {domain.website === Website.FakeYou ? "Home" : "Dashboard"} +
+ -
+
+ ++ {t("infoPricing")} +
+ -
+
+ ++ Explore +
+ -
+
+ ++ My Jobs +
+ - {t("speechTitle")} +
-
+
+ ++ {t("speechTts")} +
+ -
+
+ ++ {t("speechVc")} +
+ -
+
+ ++ {"Voice Designer"} +
+ - {t("videoTitle")} + +
-
+
+ ++ {t("videoStyleTransfer")} +
+
+ -
+
+ ++ {t("videoFaceAnimator")} +
+
+ {/* {maybeImageGeneration}
+
+ {maybeBetaFeatures} */}
+
+ - {t("communityTitle")} +
-
+
+ ++ {t("communityUploadModels")} +
+ -
+
+
+ {t("communityDiscord")} + + + ++ {t("communityLeaderboard")} + + ++ {t("communityGuide")} +
+
-
Used Face Detailer
++ Used Face Detailer +
@@ -246,26 +248,28 @@ export default function MediaPage() {
Used Upscaler
-
-
- )}
- {isModerator && mediaFile?.maybe_moderator_fields?.maybe_style_transfer_source_media_file_token && (
- <>
- - {prompt?.used_upscaler ? "Yes" : "No"} -
-
-
- Source Video
-
-
)}
+ {isModerator &&
+ mediaFile?.maybe_moderator_fields
+ ?.maybe_style_transfer_source_media_file_token && (
+ <>
+ - Link to source (staff only) -
+{prompt?.used_upscaler ? "Yes" : "No"}
+
+ Source Video
+
+
+
+ )}
)}
@@ -977,10 +981,13 @@ export default function MediaPage() {
{mediaFile?.maybe_scene_source_media_file_token && (
<>
+ + Link to source (staff only) + +
+
-
)}
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/ProfilePageV3.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/ProfilePageV3.tsx
new file mode 100644
index 0000000000..e8b480d4c3
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/ProfilePageV3.tsx
@@ -0,0 +1,171 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, Redirect, useLocation } from "react-router-dom";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import { useParams } from "react-router-dom";
+import {
+ GetUserByUsername,
+ GetUserByUsernameIsErr,
+ GetUserByUsernameIsOk,
+ User,
+ UserLookupError,
+} from "@storyteller/components/src/api/user/GetUserByUsername";
+import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import {
+ faBookmark,
+ faComment,
+ faFilm,
+ faLayerGroup,
+ faPhotoFilmMusic,
+ faVolume,
+} from "@fortawesome/pro-solid-svg-icons";
+// import { CommentComponent } from "../../../_common/comments/CommentComponent";
+import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
+import { Panel } from "components/common";
+import Container from "components/common/Container";
+import Tabs from "components/common/Tabs";
+import MediaTab from "./tabs/MediaTab";
+import WeightsTab from "./tabs/WeightsTab";
+import BookmarksTab from "./tabs/BookmarksTab";
+import { CommentComponent } from "v2/view/_common/comments/CommentComponent";
+import VideosTab from "./tabs/VideosTab";
+import AudiosTab from "./tabs/AudiosTab";
+import UserProfileInfo from "components/layout/ProfileSidePanel/UserProfileInfo";
+
+interface Props {
+ sessionWrapper: SessionWrapper;
+ sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+}
+
+function ProfilePageV3(this: any, props: Props) {
+ const { username }: { username: string } = useParams();
+ const { pathname } = useLocation();
+ PosthogClient.recordPageview();
+
+ const [userData, setUserData] = useState
+
+ );
+ }
+
+ if (!userData) {
+ return ;
+ }
+
+ const tabs = [
+ {
+ to: `/profile/${username}/videos`,
+ label: "Videos",
+ content:
+
+ User not found
+
+
+ Back to main
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Creations
+
+
+
+ {Array.from({ length: 12 }).map((_, index) => (
+
+ ) : (
+ <>
+ {showMasonryGrid && (
+ <>
+ {media.list.length === 0 && media.status === 3 ? (
+
+ No media created yet.
+
+ ) : (
+
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/VideosTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/VideosTab.tsx
new file mode 100644
index 0000000000..738159b09f
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/VideosTab.tsx
@@ -0,0 +1,122 @@
+import React, { useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
+import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
+import MediaCards from "components/common/Card/MediaCards";
+import { 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 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 { useBookmarks, useListContent, useRatings } from "hooks";
+import prepFilter from "resources/prepFilter";
+
+export default function VideosTab({ username }: { username: string }) {
+ const { pathname: source, search } = useLocation();
+ const urlQueries = new URLSearchParams(search);
+ const bookmarks = useBookmarks();
+ const ratings = useRatings();
+ const gridContainerRef = useRef
+
+
+ {Array.from({ length: 12 }).map((_, index) => (
+
+ ) : (
+ <>
+ {showMasonryGrid && (
+ <>
+ {media.list.length === 0 && media.status === 3 ? (
+
+ No media created yet.
+
+ ) : (
+
+
+ );
+ })}
+
+
+
+ );
+}