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."
}