Better livestream support

src/app/(feed)/feed/TopRightHeaderContent.tsx

@@ -1,8 +1,47 @@
+"use client";
+
+import { MinusIcon, PlusIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { ButtonWithShortcut } from "~/components/ButtonWithShortcut";
 import { CustomVideoButton } from "~/components/CustomVideoButton";
+import { MAX_ZOOM, MIN_ZOOM, useKeyboard } from "~/components/KeyboardProvider";
 import { OpenRightSidebarButton } from "./OpenRightSidebarButton";
 import { RefetchItemsButton } from "./RefetchItemsButton";
+import { useSidebar } from "~/components/ui/sidebar";
 
 export function TopRightHeaderContent() {
+  const pathname = usePathname();
+
+  const { isMobile } = useSidebar();
+  const { zoom, zoomIn, zoomOut } = useKeyboard();
+
+  if (pathname.includes("/feed/watch/")) {
+    if (isMobile) return null;
+
+    return (
+      <div className="flex items-center gap-2">
+        <ButtonWithShortcut
+          variant="outline"
+          shortcut="-"
+          size="icon"
+          onClick={zoomOut}
+          disabled={zoom === MIN_ZOOM}
+        >
+          <MinusIcon size={16} />
+        </ButtonWithShortcut>
+        <ButtonWithShortcut
+          variant="outline"
+          shortcut="+"
+          size="icon"
+          onClick={zoomIn}
+          disabled={zoom === MAX_ZOOM}
+        >
+          <PlusIcon size={16} />
+        </ButtonWithShortcut>
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center gap-2">
       <div className="md:hidden">

src/app/(feed)/feed/watch/[videoID]/page.tsx

@@ -36,6 +36,7 @@ export default function WatchVideoPage(props: {
         "max-w-4xl": view === "windowed" && zoom === 3,
         "max-w-5xl": view === "windowed" && zoom === 4,
         "max-w-6xl": view === "windowed" && zoom === 5,
+        "max-w-7xl": view === "windowed" && zoom === 6,
       })}
     >
       <div

src/app/auth/AuthHeader.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 import { CardHeader } from "~/components/ui/card";
 
 export function AuthHeader({ children }: PropsWithChildren) {

src/app/auth/reset/AuthResetPageComponent.tsx

@@ -2,7 +2,7 @@
 
 import { InfoIcon, Loader2, UserIcon } from "lucide-react";
 import Link from "next/link";
-import { PropsWithChildren, useState } from "react";
+import { type PropsWithChildren, useState } from "react";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardFooter } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";

src/components/ButtonWithShortcut.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useFlagState } from "~/lib/hooks/useFlagState";
-import { Button, ButtonProps, ResponsiveButton } from "./ui/button";
+import { Button, type ButtonProps, ResponsiveButton } from "./ui/button";
 import React from "react";
 
 export const ButtonWithShortcut = ({