diff --git a/app/features/user-page/routes/u.$identifier.tsx b/app/features/user-page/routes/u.$identifier.tsx index 4d05cd10b..732e96443 100644 --- a/app/features/user-page/routes/u.$identifier.tsx +++ b/app/features/user-page/routes/u.$identifier.tsx @@ -138,7 +138,7 @@ export default function UserPageLayout() { {t("common:pages.builds")} ({data.buildsCount}) )} - {data.vods.length > 0 && ( + {(isOwnPage || data.vods.length > 0) && ( {t("common:pages.vods")} ({data.vods.length}) diff --git a/app/features/user-page/routes/u.$identifier.vods.tsx b/app/features/user-page/routes/u.$identifier.vods.tsx index 4ae1b2314..0c1f547a7 100644 --- a/app/features/user-page/routes/u.$identifier.vods.tsx +++ b/app/features/user-page/routes/u.$identifier.vods.tsx @@ -5,6 +5,11 @@ import { VodListing } from "~/features/vods"; import type { SendouRouteHandle } from "~/utils/remix"; import styles from "~/features/vods/vods.css"; import type { UserPageLoaderData } from "./u.$identifier"; +import { Popover } from "~/components/Popover"; +import { useTranslation } from "react-i18next"; +import { newVodPage } from "~/utils/urls"; +import { LinkButton } from "~/components/Button"; +import { useUser } from "~/features/auth/core"; export const handle: SendouRouteHandle = { i18n: ["vods"], @@ -15,15 +20,43 @@ export const links: LinksFunction = () => { }; export default function UserVodsPage() { + const user = useUser(); const [, parentRoute] = useMatches(); invariant(parentRoute); const userPageData = parentRoute.data as UserPageLoaderData; return (
+ {userPageData.id === user?.id ? ( +
+ +
+ ) : null} {userPageData.vods.map((vod) => ( ))}
); } + +function AddVodButton({ isVideoAdder }: { isVideoAdder: number | null }) { + const { t } = useTranslation(["vods"]); + + if (!isVideoAdder) { + return ( + {t("vods:addVod")}} + triggerClassName="tiny" + containerClassName="text-center" + > + {t("vods:gainPerms")} + + ); + } + + return ( + + {t("vods:addVod")} + + ); +} diff --git a/app/root.tsx b/app/root.tsx index cb6a874eb..f449f2f72 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -107,6 +107,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { customUrl: user.customUrl, patronTier: user.patronTier, isArtist: user.isArtist, + isVideoAdder: user.isVideoAdder, languages: user.languages ? user.languages.split(",") : [], } : undefined, diff --git a/public/locales/en/vods.json b/public/locales/en/vods.json index 5d24fb6b9..5180b0030 100644 --- a/public/locales/en/vods.json +++ b/public/locales/en/vods.json @@ -19,5 +19,7 @@ "forms.title.weapon": "Weapon", "forms.action.addMatch": "Add match", "forms.action.deleteMatch": "Delete match", - "noVods": "No videos found matching this filter. Are we missing something? Message Sendou on Discord to get YouTube video submission permissions." + "noVods": "No videos found matching this filter. Are we missing something? Message Sendou on Discord to get YouTube video submission permissions.", + "addVod": "Add video", + "gainPerms": "Please post on the helpdesk of our Discord to gain permissions to upload videos." }