Add vod link + prompt to get perms Closes #1409

app/features/user-page/routes/u.$identifier.tsx

@@ -138,7 +138,7 @@ export default function UserPageLayout() {
             {t("common:pages.builds")} ({data.buildsCount})
           </SubNavLink>
         )}
-        {data.vods.length > 0 && (
+        {(isOwnPage || data.vods.length > 0) && (
           <SubNavLink to={userVodsPage(data)}>
             {t("common:pages.vods")} ({data.vods.length})
           </SubNavLink>

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 (
     <div className="vods__listing__list">
+      {userPageData.id === user?.id ? (
+        <div className="stack items-end w-full">
+          <AddVodButton isVideoAdder={user.isVideoAdder} />
+        </div>
+      ) : null}
       {userPageData.vods.map((vod) => (
         <VodListing key={vod.id} vod={vod} showUser={false} />
       ))}
     </div>
   );
 }
+
+function AddVodButton({ isVideoAdder }: { isVideoAdder: number | null }) {
+  const { t } = useTranslation(["vods"]);
+
+  if (!isVideoAdder) {
+    return (
+      <Popover
+        buttonChildren={<>{t("vods:addVod")}</>}
+        triggerClassName="tiny"
+        containerClassName="text-center"
+      >
+        {t("vods:gainPerms")}
+      </Popover>
+    );
+  }
+
+  return (
+    <LinkButton to={newVodPage()} size="tiny" className="whitespace-nowrap">
+      {t("vods:addVod")}
+    </LinkButton>
+  );
+}

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,

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