feat: download files, show cloud video, solf deletion with no reprocessing (#920)

* fix: move upd ports out of MacOS internal Range

* feat: download files, show cloud video, solf deletion with no reprocessing

www/app/(app)/transcripts/transcriptTitle.tsx

@@ -10,11 +10,22 @@ import {
   useTranscriptUpdate,
   useTranscriptParticipants,
 } from "../../lib/apiHooks";
-import { Heading, IconButton, Input, Flex, Spacer } from "@chakra-ui/react";
-import { LuPen, LuCopy, LuCheck } from "react-icons/lu";
+import {
+  Heading,
+  IconButton,
+  Input,
+  Flex,
+  Spacer,
+  Spinner,
+  Box,
+  Text,
+} from "@chakra-ui/react";
+import { LuPen, LuCopy, LuCheck, LuDownload, LuVideo } from "react-icons/lu";
 import ShareAndPrivacy from "./shareAndPrivacy";
 import { buildTranscriptWithTopics } from "./buildTranscriptWithTopics";
 import { toaster } from "../../components/ui/toaster";
+import { useAuth } from "../../lib/AuthProvider";
+import { API_URL } from "../../lib/apiClient";
 
 type TranscriptTitle = {
   title: string;
@@ -25,13 +36,51 @@ type TranscriptTitle = {
   transcript: GetTranscriptWithParticipants | null;
   topics: GetTranscriptTopic[] | null;
   finalSummaryElement: HTMLDivElement | null;
+
+  // video props
+  hasCloudVideo?: boolean;
+  videoExpanded?: boolean;
+  onVideoToggle?: () => void;
+  videoNewBadge?: boolean;
 };
 
 const TranscriptTitle = (props: TranscriptTitle) => {
   const [displayedTitle, setDisplayedTitle] = useState(props.title);
   const [preEditTitle, setPreEditTitle] = useState(props.title);
   const [isEditing, setIsEditing] = useState(false);
+  const [downloading, setDownloading] = useState(false);
   const updateTranscriptMutation = useTranscriptUpdate();
+  const auth = useAuth();
+  const accessToken = auth.status === "authenticated" ? auth.accessToken : null;
+  const userId = auth.status === "authenticated" ? auth.user?.id : null;
+  const isOwner = !!(userId && userId === props.transcript?.user_id);
+
+  const handleDownloadZip = async () => {
+    if (!props.transcriptId || downloading) return;
+    setDownloading(true);
+    try {
+      const headers: Record<string, string> = {};
+      if (accessToken) {
+        headers["Authorization"] = `Bearer ${accessToken}`;
+      }
+      const resp = await fetch(
+        `${API_URL}/v1/transcripts/${props.transcriptId}/download/zip`,
+        { headers },
+      );
+      if (!resp.ok) throw new Error("Download failed");
+      const blob = await resp.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `transcript_${props.transcriptId.split("-")[0]}.zip`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Failed to download zip:", err);
+    } finally {
+      setDownloading(false);
+    }
+  };
   const participantsQuery = useTranscriptParticipants(
     props.transcript?.id ? parseMaybeNonEmptyString(props.transcript.id) : null,
   );
@@ -173,6 +222,51 @@ const TranscriptTitle = (props: TranscriptTitle) => {
               >
                 <LuCopy />
               </IconButton>
+              {isOwner && (
+                <IconButton
+                  aria-label="Download Transcript Zip"
+                  size="sm"
+                  variant="subtle"
+                  onClick={handleDownloadZip}
+                  disabled={downloading}
+                >
+                  {downloading ? <Spinner size="sm" /> : <LuDownload />}
+                </IconButton>
+              )}
+              {props.hasCloudVideo && props.onVideoToggle && (
+                <Box position="relative" display="inline-flex">
+                  <IconButton
+                    aria-label={
+                      props.videoExpanded
+                        ? "Hide cloud recording"
+                        : "Show cloud recording"
+                    }
+                    size="sm"
+                    variant={props.videoExpanded ? "solid" : "subtle"}
+                    colorPalette={props.videoExpanded ? "blue" : undefined}
+                    onClick={props.onVideoToggle}
+                  >
+                    <LuVideo />
+                  </IconButton>
+                  {props.videoNewBadge && (
+                    <Text
+                      position="absolute"
+                      top="-1"
+                      right="-1"
+                      fontSize="2xs"
+                      fontWeight="bold"
+                      color="white"
+                      bg="red.500"
+                      px={1}
+                      borderRadius="sm"
+                      lineHeight="tall"
+                      pointerEvents="none"
+                    >
+                      new
+                    </Text>
+                  )}
+                </Box>
+              )}
               <ShareAndPrivacy
                 finalSummaryElement={props.finalSummaryElement}
                 transcript={props.transcript}