Add VoDs to navigation Closes #1282

app/components/layout/nav-items.json

@@ -89,6 +89,15 @@
       "invert(55%) sepia(20%) saturate(738%) hue-rotate(224deg) brightness(86%) contrast(88%)"
     ]
   },
+  {
+    "name": "vods",
+    "url": "vods",
+    "prefetch": false,
+    "filters": [
+      "invert(80%) sepia(15%) saturate(6333%) hue-rotate(359deg) brightness(104%) contrast(102%)",
+      "invert(11%) sepia(100%) saturate(4695%) hue-rotate(257deg) brightness(99%) contrast(136%)"
+    ]
+  },
   {
     "name": "t",
     "url": "t",

app/features/vods/routes/vods.$id.tsx

@@ -19,10 +19,16 @@ import { requireUserId } from "~/modules/auth/user.server";
 import { isAdmin } from "~/permissions";
 import { databaseTimestampToDate } from "~/utils/dates";
 import { secondsToMinutes } from "~/utils/number";
-import { notFoundIfFalsy } from "~/utils/remix";
+import { notFoundIfFalsy, type SendouRouteHandle } from "~/utils/remix";
 import { makeTitle } from "~/utils/strings";
 import type { Unpacked } from "~/utils/types";
-import { modeImageUrl, stageImageUrl } from "~/utils/urls";
+import {
+  modeImageUrl,
+  navIconUrl,
+  stageImageUrl,
+  VODS_PAGE,
+  vodVideoPage,
+} from "~/utils/urls";
 import { PovUser } from "../components/VodPov";
 import { findVodById } from "../queries/findVodById";
 import type { Vod } from "../vods-types";
@@ -32,6 +38,27 @@ export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
 };
 
+export const handle: SendouRouteHandle = {
+  breadcrumb: ({ match }) => {
+    const data = match.data as SerializeFrom<typeof loader> | undefined;
+
+    if (!data) return [];
+
+    return [
+      {
+        imgPath: navIconUrl("vods"),
+        href: VODS_PAGE,
+        type: "IMAGE",
+      },
+      {
+        text: data.vod.title,
+        href: vodVideoPage(data.vod.id),
+        type: "TEXT",
+      },
+    ];
+  },
+};
+
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
 

app/features/vods/routes/vods.tsx

@@ -16,6 +16,7 @@ import { mainWeaponIds, modesShort, stageIds } from "~/modules/in-game-lists";
 import { isAdmin } from "~/permissions";
 import type { SendouRouteHandle } from "~/utils/remix";
 import { makeTitle } from "~/utils/strings";
+import { navIconUrl, VODS_PAGE } from "~/utils/urls";
 import { VodListing } from "../components/VodListing";
 import { findVods } from "../queries/findVods";
 import { videoMatchTypes } from "../vods-constants";
@@ -23,6 +24,11 @@ import styles from "../vods.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["vods"],
+  breadcrumb: () => ({
+    imgPath: navIconUrl("vods"),
+    href: VODS_PAGE,
+    type: "IMAGE",
+  }),
 };
 
 export const links: LinksFunction = () => {