feat: Share video to space directly from share page

Author: richiemcilroy

apps/web/app/dashboard/caps/components/SharingDialog.tsx

@@ -30,10 +30,15 @@ export const SharingDialog: React.FC<SharingDialogProps> = ({
     new Set(sharedSpaces.map((space) => space.id))
   );
   const [searchTerm, setSearchTerm] = useState("");
+  const [initialSelectedSpaces, setInitialSelectedSpaces] = useState<
+    Set<string>
+  >(new Set(sharedSpaces.map((space) => space.id)));
 
   useEffect(() => {
     if (isOpen) {
-      setSelectedSpaces(new Set(sharedSpaces.map((space) => space.id)));
+      const currentSpaceIds = new Set(sharedSpaces.map((space) => space.id));
+      setSelectedSpaces(currentSpaceIds);
+      setInitialSelectedSpaces(currentSpaceIds);
       setSearchTerm("");
     }
   }, [isOpen, sharedSpaces]);
@@ -62,8 +67,37 @@ export const SharingDialog: React.FC<SharingDialogProps> = ({
         throw new Error("Failed to update sharing settings");
       }
 
-      toast.success("Sharing settings updated successfully");
-      onSharingUpdated(Array.from(selectedSpaces));
+      const newSelectedSpaces = Array.from(selectedSpaces);
+      const initialSpaces = Array.from(initialSelectedSpaces);
+
+      const addedSpaceIds = newSelectedSpaces.filter(
+        (id) => !initialSpaces.includes(id)
+      );
+      const removedSpaceIds = initialSpaces.filter(
+        (id) => !newSelectedSpaces.includes(id)
+      );
+
+      if (addedSpaceIds.length === 1 && removedSpaceIds.length === 0) {
+        const addedSpaceName = userSpaces?.find(
+          (space) => space.id === addedSpaceIds[0]
+        )?.name;
+        toast.success(`Shared to ${addedSpaceName}`);
+      } else if (removedSpaceIds.length === 1 && addedSpaceIds.length === 0) {
+        const removedSpaceName = sharedSpaces.find(
+          (space) => space.id === removedSpaceIds[0]
+        )?.name;
+        toast.success(`Unshared from ${removedSpaceName}`);
+      } else if (addedSpaceIds.length > 0 && removedSpaceIds.length === 0) {
+        toast.success(`Shared to ${addedSpaceIds.length} spaces`);
+      } else if (removedSpaceIds.length > 0 && addedSpaceIds.length === 0) {
+        toast.success(`Unshared from ${removedSpaceIds.length} spaces`);
+      } else if (addedSpaceIds.length > 0 && removedSpaceIds.length > 0) {
+        toast.success(`Sharing settings updated`);
+      } else {
+        toast.success("No changes to sharing settings");
+      }
+
+      onSharingUpdated(newSelectedSpaces);
       onClose();
     } catch (error) {
       console.error("Error updating sharing settings:", error);

apps/web/app/s/[videoId]/Share.tsx

@@ -24,6 +24,7 @@ interface Analytics {
 type VideoWithSpaceInfo = typeof videos.$inferSelect & {
   spaceMembers?: string[];
   spaceId?: string;
+  sharedSpaces?: { id: string; name: string }[];
 };
 
 interface ShareProps {
@@ -37,6 +38,7 @@ interface ShareProps {
   };
   customDomain: string | null;
   domainVerified: boolean;
+  userSpaces?: { id: string; name: string }[];
 }
 
 export const Share: React.FC<ShareProps> = ({
@@ -46,6 +48,7 @@ export const Share: React.FC<ShareProps> = ({
   initialAnalytics,
   customDomain,
   domainVerified,
+  userSpaces = [],
 }) => {
   const [analytics, setAnalytics] = useState(initialAnalytics);
   const effectiveDate = data.metadata?.customCreatedAt
@@ -93,6 +96,8 @@ export const Share: React.FC<ShareProps> = ({
           user={user}
           customDomain={customDomain}
           domainVerified={domainVerified}
+          sharedSpaces={data.sharedSpaces || []}
+          userSpaces={userSpaces}
         />
 
         <div className="mt-4">

apps/web/app/s/[videoId]/_components/ShareHeader.tsx

@@ -6,27 +6,39 @@ import { clientEnv, NODE_ENV } from "@cap/env";
 import { Button } from "@cap/ui";
 import { isUserOnProPlan } from "@cap/utils";
 import { Copy, Globe2 } from "lucide-react";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import moment from "moment";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
+import { SharingDialog } from "@/app/dashboard/caps/components/SharingDialog";
+import clsx from "clsx";
 
 export const ShareHeader = ({
   data,
   user,
   customDomain,
   domainVerified,
+  sharedSpaces = [],
+  userSpaces = [],
 }: {
   data: typeof videos.$inferSelect;
   user: typeof userSelectProps | null;
   customDomain: string | null;
   domainVerified: boolean;
+  sharedSpaces?: { id: string; name: string }[];
+  userSpaces?: { id: string; name: string }[];
 }) => {
   const { push, refresh } = useRouter();
   const [isEditing, setIsEditing] = useState(false);
   const [title, setTitle] = useState(data.name);
   const [isDownloading, setIsDownloading] = useState(false);
   const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
+  const [isSharingDialogOpen, setIsSharingDialogOpen] = useState(false);
+  const [currentSharedSpaces, setCurrentSharedSpaces] = useState(sharedSpaces);
+
+  const isOwner = user !== null && user.id.toString() === data.ownerId;
 
   const handleBlur = async () => {
     setIsEditing(false);
@@ -72,8 +84,55 @@ export const ShareHeader = ({
       })
     : false;
 
+  const handleSharingUpdated = (updatedSharedSpaces: string[]) => {
+    setCurrentSharedSpaces(
+      userSpaces?.filter((space) => updatedSharedSpaces.includes(space.id))
+    );
+    refresh();
+  };
+
+  const renderSharedStatus = () => {
+    const baseClassName =
+      "text-sm text-gray-10 transition-colors duration-200 flex items-center";
+
+    if (isOwner) {
+      if (currentSharedSpaces?.length === 0) {
+        return (
+          <p
+            className={clsx(baseClassName, "hover:text-gray-12 cursor-pointer")}
+            onClick={() => setIsSharingDialogOpen(true)}
+          >
+            Not shared{" "}
+            <FontAwesomeIcon className="ml-2 size-2.5" icon={faChevronDown} />
+          </p>
+        );
+      } else {
+        return (
+          <p
+            className={clsx(baseClassName, "hover:text-gray-12 cursor-pointer")}
+            onClick={() => setIsSharingDialogOpen(true)}
+          >
+            Shared{" "}
+            <FontAwesomeIcon className="ml-1 size-2.5" icon={faChevronDown} />
+          </p>
+        );
+      }
+    } else {
+      return <p className={baseClassName}>Shared with you</p>;
+    }
+  };
+
   return (
     <>
+      <SharingDialog
+        isOpen={isSharingDialogOpen}
+        onClose={() => setIsSharingDialogOpen(false)}
+        capId={data.id}
+        capName={data.name}
+        sharedSpaces={currentSharedSpaces || []}
+        userSpaces={userSpaces}
+        onSharingUpdated={handleSharingUpdated}
+      />
       <div>
         <div className="space-x-0 md:flex md:items-center md:justify-between md:space-x-6">
           <div className="items-center md:flex md:justify-between md:space-x-6">
@@ -104,7 +163,8 @@ export const ShareHeader = ({
                   </h1>
                 )}
               </div>
-              <p className="text-sm text-gray-10">
+              {user && renderSharedStatus()}
+              <p className="text-sm text-gray-10 mt-1">
                 {moment(data.createdAt).fromNow()}
               </p>
             </div>

apps/web/app/s/[videoId]/page.tsx

@@ -36,6 +36,7 @@ type VideoWithSpace = typeof videos.$inferSelect & {
   } | null;
   spaceMembers?: string[];
   spaceId?: string;
+  sharedSpaces?: { id: string; name: string }[];
 };
 
 type SpaceMember = {
@@ -280,6 +281,43 @@ export default async function ShareVideoPage(props: Props) {
     }
   }
 
+  const sharedSpacesData = await db
+    .select({
+      id: spaces.id,
+      name: spaces.name,
+    })
+    .from(spaces)
+    .innerJoin(sharedVideos, eq(spaces.id, sharedVideos.spaceId))
+    .where(eq(sharedVideos.videoId, videoId));
+
+  let userSpaces: { id: string; name: string }[] = [];
+  if (userId) {
+    const ownedSpaces = await db
+      .select({
+        id: spaces.id,
+        name: spaces.name,
+      })
+      .from(spaces)
+      .where(eq(spaces.ownerId, userId));
+
+    const memberSpaces = await db
+      .select({
+        id: spaces.id,
+        name: spaces.name,
+      })
+      .from(spaces)
+      .innerJoin(spaceMembers, eq(spaces.id, spaceMembers.spaceId))
+      .where(eq(spaceMembers.userId, userId));
+
+    const allSpaces = [...ownedSpaces, ...memberSpaces];
+    const uniqueSpaceIds = new Set();
+    userSpaces = allSpaces.filter((space) => {
+      if (uniqueSpaceIds.has(space.id)) return false;
+      uniqueSpaceIds.add(space.id);
+      return true;
+    });
+  }
+
   const membersList = video.sharedSpace?.spaceId
     ? await db
         .select({
@@ -293,6 +331,7 @@ export default async function ShareVideoPage(props: Props) {
     ...video,
     spaceMembers: membersList.map((member) => member.userId),
     spaceId: video.sharedSpace?.spaceId ?? undefined,
+    sharedSpaces: sharedSpacesData,
   };
 
   return (
@@ -303,6 +342,7 @@ export default async function ShareVideoPage(props: Props) {
       initialAnalytics={initialAnalytics}
       customDomain={customDomain}
       domainVerified={domainVerified}
+      userSpaces={userSpaces}
     />
   );
 }