feat: added bulk share links generation

Signed-off-by: Varun Raj <varun@skcript.com>

src/components/albums/list/AlbumThumbnail.tsx

@@ -1,23 +1,23 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import Link from 'next/link';
-import { useConfig } from '@/contexts/ConfigContext';
 import { humanizeBytes, humanizeNumber, pluralize } from '@/helpers/string.helper';
 import LazyImage from '@/components/ui/lazy-image';
 import { ASSET_THUMBNAIL_PATH } from '@/config/routes';
 import { IAlbum } from '@/types/album';
-import { Badge } from '@/components/ui/badge';
 import { formatDate } from '@/helpers/date.helper';
 import { Checkbox } from '@/components/ui/checkbox';
 import { differenceInDays } from 'date-fns';
-import { FaceIcon } from '@radix-ui/react-icons';
-import { Calendar, Camera, Image, User } from 'lucide-react';
+import { Calendar, Camera } from 'lucide-react';
 
 interface IAlbumThumbnailProps {
   album: IAlbum;
   onSelect: (checked: boolean) => void;
+  selected: boolean;
 }
-export default function AlbumThumbnail({ album, onSelect }: IAlbumThumbnailProps) {
+export default function AlbumThumbnail({ album, onSelect, selected }: IAlbumThumbnailProps) {
+  const [isSelected, setIsSelected] = useState(selected);
+
   const numberOfDays = useMemo(() => {
     return differenceInDays(album.lastPhotoDate, album.firstPhotoDate);
   }, [album.firstPhotoDate, album.lastPhotoDate]);
@@ -39,6 +39,7 @@ export default function AlbumThumbnail({ album, onSelect }: IAlbumThumbnailProps
           {formatDate(album.firstPhotoDate.toString(), 'MMM d, yyyy')} - {formatDate(album.lastPhotoDate.toString(), 'MMM d, yyyy')}
         </div>
         <Checkbox
+          defaultChecked={isSelected}
           onCheckedChange={onSelect}
           className="absolute top-2 left-2 w-6 h-6 rounded-full border-gray-300 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         />

src/components/albums/share/AlbumShareDialog.tsx

@@ -0,0 +1,137 @@
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogTitle, DialogHeader, DialogContent } from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { shareAlbums } from '@/handlers/api/album.handler';
+import { IAlbum } from '@/types/album';
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from 'react'
+
+export interface IAlbumShareDialogProps {
+
+}
+
+export interface IAlbumShareDialogRef {
+  open: (selectedAlbums: IAlbum[]) => void;
+  close: () => void;
+}
+
+interface IAlbumWithLink extends IAlbum {
+  shareLink?: string;
+  allowDownload?: boolean;
+  allowUpload?: boolean;
+  showMetadata?: boolean;
+}
+
+const AlbumShareDialog = forwardRef(({ }: IAlbumShareDialogProps, ref: ForwardedRef<IAlbumShareDialogRef>) => {
+  const [open, setOpen] = useState(false);
+  const [selectedAlbums, setSelectedAlbums] = useState<IAlbumWithLink[]>([]);
+  const [generating, setGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [generated, setGenerated] = useState<boolean>(false);
+
+  const handleGenerateShareLink = async () => {
+    setGenerating(true);
+    const data = selectedAlbums.map((album) => ({
+      albumId: album.id,
+      albumName: album.albumName,
+      assetCount: album.assetCount,
+      allowDownload: !!album.allowDownload,
+      allowUpload: !!album.allowUpload,
+      showMetadata: !!album.showMetadata,
+    }));
+
+    return shareAlbums(data).then((updatedAlbums) => {
+      setSelectedAlbums(updatedAlbums);
+      setGenerated(true);
+    })
+      .catch((error) => {
+        setError(error.message);
+      })
+      .finally(() => {
+        setGenerating(false);
+      });
+  }
+
+  const handleAllowPropertyChange = (albumId: string, property: string, checked: boolean) => {
+    setSelectedAlbums((prevAlbums) => prevAlbums.map((album) => album.id === albumId ? { ...album, [property]: checked } : album));
+  }
+
+
+  useImperativeHandle(ref, () => ({
+    open: (selectedAlbums: IAlbum[]) => {
+      setSelectedAlbums(selectedAlbums.map((album) => ({ ...album, allowDownload: true, allowUpload: true, showMetadata: true })));
+      setOpen(true);
+    },
+    close: () => {
+      setOpen(false);
+    }
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>Share {selectedAlbums.length} albums</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2">
+          {error && <div className="text-red-500">{error}</div>}
+          <ol className="flex flex-col gap-4 list-decimal px-4 py-4">
+            {selectedAlbums.map((album) => (
+              <li key={album.id}>
+                <div className="flex justify-between gap-1">
+                  <h3 className="text-sm font-medium">{album.albumName}</h3>
+                  <p className="text-xs border truncate rounded-md px-1 py-0.5 text-muted-foreground">{album.assetCount} Items</p>
+                </div>
+                <div className="flex flex-col gap-2">
+                  {album.shareLink ?
+                    <p className="text-xs text-muted-foreground truncate font-mono overflow-x-auto">{album.shareLink}</p> : (
+                      <>
+                        <p className="text-xs text-muted-foreground">No share link generated</p>
+                        <div className="flex gap-2">
+                          <div className="flex items-center gap-1">
+                            <Checkbox checked={album.allowDownload} onCheckedChange={(checked) => handleAllowPropertyChange(album.id, 'allowDownload', !!checked)} />
+                            <Label className="text-xs">Allow Download</Label>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <Checkbox checked={album.allowUpload} onCheckedChange={(checked) => handleAllowPropertyChange(album.id, 'allowUpload', !!checked)} />
+                            <Label className="text-xs">Allow Upload</Label>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <Checkbox checked={album.showMetadata} onCheckedChange={(checked) => handleAllowPropertyChange(album.id, 'showMetadata', !!checked)} />
+                            <Label className="text-xs">Show Metadata</Label>
+                          </div>
+
+                        </div>
+                      </>
+                    )}
+                </div>
+              </li>
+
+            ))}
+          </ol>
+          {generated ? (
+            <>
+            <p className="text-sm py-2 text-muted-foreground text-center">Share links all generated</p>
+            </>
+          ) : (
+            <>
+            {generating ? <div className="flex justify-center gap-2">
+            <p className="text-sm py-2 text-muted-foreground">Generating share links...</p>
+          </div> : <div className="flex justify-center gap-2">
+            <Button onClick={handleGenerateShareLink} disabled={generating}>
+              Generate For {selectedAlbums.length} albums
+            </Button>
+
+          </div>}
+          </>
+          )}
+          
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+AlbumShareDialog.displayName = "AlbumShareDialog";
+
+export default AlbumShareDialog;

src/config/routes.ts

@@ -25,6 +25,7 @@ export const ALBUM_PEOPLE_PATH = (id: string) => BASE_API_ENDPOINT + "/albums/"
 export const ALBUM_ASSETS_PATH = (id: string) => BASE_API_ENDPOINT + "/albums/" + id + "/assets";
 export const CREATE_ALBUM_PATH = BASE_PROXY_ENDPOINT + "/albums";
 export const ADD_ASSETS_ALBUMS_PATH = (id: string) => BASE_PROXY_ENDPOINT + "/albums/" + id + "/assets";
+export const SHARE_ALBUMS_PATH = BASE_API_ENDPOINT + "/albums/share";
 
 // Assets
 export const LIST_MISSING_LOCATION_DATES_PATH = BASE_API_ENDPOINT + "/assets/missing-location-dates";

src/handlers/api/album.handler.ts

@@ -1,4 +1,4 @@
-import { ADD_ASSETS_ALBUMS_PATH, ALBUM_ASSETS_PATH, ALBUM_INFO_PATH, ALBUM_PEOPLE_PATH, CREATE_ALBUM_PATH, LIST_ALBUMS_PATH, LIST_POTENTIAL_ALBUMS_ASSETS_PATH, LIST_POTENTIAL_ALBUMS_DATES_PATH } from "@/config/routes";
+import { ADD_ASSETS_ALBUMS_PATH, ALBUM_ASSETS_PATH, ALBUM_INFO_PATH, ALBUM_PEOPLE_PATH, CREATE_ALBUM_PATH, LIST_ALBUMS_PATH, LIST_POTENTIAL_ALBUMS_ASSETS_PATH, LIST_POTENTIAL_ALBUMS_DATES_PATH, SHARE_ALBUMS_PATH } from "@/config/routes";
 import { cleanUpAsset } from "@/helpers/asset.helper";
 import API from "@/lib/api";
 import { IAlbumCreate } from "@/types/album";
@@ -45,3 +45,7 @@ export const addAssetToAlbum = async (albumId: string, assetIds: string[]) => {
 export const createAlbum = async (albumData: IAlbumCreate) => {
   return API.post(CREATE_ALBUM_PATH, albumData);
 }
+
+export const shareAlbums = async (albums: { albumId: string, allowDownload: boolean, allowUpload: boolean, showMetadata: boolean }[]) => {
+  return API.post(SHARE_ALBUMS_PATH, { albums });
+}

src/pages/albums/[albumId].tsx

@@ -1,20 +1,16 @@
-import { ASSET_THUMBNAIL_PATH } from '@/config/routes'
 import PageLayout from '@/components/layouts/PageLayout'
 import Header from '@/components/shared/Header'
 import Loader from '@/components/ui/loader'
 import { useConfig } from '@/contexts/ConfigContext'
-import { getAlbumInfo, listAlbums } from '@/handlers/api/album.handler'
+import { getAlbumInfo } from '@/handlers/api/album.handler'
 import { IAlbum } from '@/types/album'
-import Image from 'next/image'
 import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
-import AlbumThumbnail from '@/components/albums/list/AlbumThumbnail'
-import { Button } from '@/components/ui/button'
 import { useRouter } from 'next/router'
 import AlbumPeople from '@/components/albums/info/AlbumPeople'
 import AlbumImages from '@/components/albums/info/AlbumImages'
-import { Camera, ExternalLink, LinkIcon, Users } from 'lucide-react'
-import { humanizeNumber, pluralize } from '@/helpers/string.helper'
+import { Camera, ExternalLink, Users } from 'lucide-react'
+import { humanizeNumber } from '@/helpers/string.helper'
 
 export default function AlbumListPage() {
   const { exImmichUrl } = useConfig()

src/pages/albums/index.tsx

@@ -1,20 +1,17 @@
-import { ASSET_THUMBNAIL_PATH } from '@/config/routes'
 import PageLayout from '@/components/layouts/PageLayout'
 import Header from '@/components/shared/Header'
 import Loader from '@/components/ui/loader'
 import { useConfig } from '@/contexts/ConfigContext'
 import { listAlbums } from '@/handlers/api/album.handler'
 import { IAlbum } from '@/types/album'
-import Image from 'next/image'
-import Link from 'next/link'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import AlbumThumbnail from '@/components/albums/list/AlbumThumbnail'
 import { Button } from '@/components/ui/button'
 import { Select, SelectItem, SelectContent, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { useRouter } from 'next/router'
-import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
-import { SortAsc, SortDesc } from 'lucide-react'
+import { Share, SortAsc, SortDesc } from 'lucide-react'
 import { Input } from '@/components/ui/input'
+import AlbumShareDialog, { IAlbumShareDialogRef } from '@/components/albums/share/AlbumShareDialog'
 
 const SORT_BY_OPTIONS = [
   { value: 'lastPhotoDate', label: 'Last Photo Date' },
@@ -27,7 +24,6 @@ const SORT_BY_OPTIONS = [
   { value: 'faceCount', label: 'Number of People' },
 ]
 export default function AlbumListPage() {
-  const { exImmichUrl } = useConfig()
   const router = useRouter()
   const [search, setSearch] = useState('')
   const { query, pathname } = router
@@ -35,7 +31,8 @@ export default function AlbumListPage() {
   const [albums, setAlbums] = useState<IAlbum[]>([])
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
-  const [selectedAlbums, setSelectedAlbums] = useState<string[]>([])
+  const [selectedAlbumsIds, setSelectedAlbumsIds] = useState<string[]>([])
+  const albumShareDialogRef = useRef<IAlbumShareDialogRef>(null);
 
   const selectedSortBy = useMemo(() => SORT_BY_OPTIONS.find((option) => option.value === sortBy), [sortBy])
 
@@ -55,15 +52,18 @@ export default function AlbumListPage() {
       })
   }
 
+  const selectedAlbums = useMemo(() => albums.filter((album) => selectedAlbumsIds.includes(album.id)), [albums, selectedAlbumsIds])
+
   useEffect(() => {
     fetchAlbums()
   }, [sortBy, sortOrder])
 
+
   const handleSelect = (checked: boolean, albumId: string) => {
     if (checked) {
-      setSelectedAlbums([...selectedAlbums, albumId])
+      setSelectedAlbumsIds([...selectedAlbumsIds, albumId])
     } else {
-      setSelectedAlbums(selectedAlbums.filter((id) => id !== albumId))
+      setSelectedAlbumsIds(selectedAlbumsIds.filter((id) => id !== albumId))
     }
   }
 
@@ -78,7 +78,12 @@ export default function AlbumListPage() {
     return (
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 p-4">
         {searchedAlbums.map((album) => (
-          <AlbumThumbnail album={album} key={album.id} onSelect={(checked) => handleSelect(checked, album.id)} />
+          <AlbumThumbnail 
+            album={album}
+            key={album.id} 
+            selected={selectedAlbumsIds.includes(album.id)}
+            onSelect={(checked) => handleSelect(checked, album.id)} 
+          />
         ))}
       </div>
     )
@@ -89,6 +94,16 @@ export default function AlbumListPage() {
         leftComponent="Manage Albums"
         rightComponent={
           <div className="flex items-center gap-2">
+            {!!selectedAlbumsIds.length && (
+              <Button 
+                variant={"secondary"} 
+                className="flex items-center gap-2"
+                onClick={() => {
+                  albumShareDialogRef.current?.open(selectedAlbums)
+                }}>
+                <Share size={16} /> Share {selectedAlbumsIds.length} albums
+              </Button>
+            )}
             <Input type="text" placeholder="Search" className="w-48" onChange={(e) => setSearch(e.target.value)} />
             <Select
               defaultValue={selectedSortBy?.value}
@@ -122,6 +137,9 @@ export default function AlbumListPage() {
         }
       />
       {renderContent()}
+      <AlbumShareDialog 
+        ref={albumShareDialogRef}
+      />
     </PageLayout>
   )
 }

src/pages/api/albums/share.ts

@@ -0,0 +1,61 @@
+import { ENV } from "@/config/environment";
+import { getCurrentUser } from "@/handlers/serverUtils/user.utils";
+import { NextApiResponse } from "next";
+
+import { NextApiRequest } from "next";
+
+interface IAlbumShare {
+  albumId: string;
+  allowDownload: boolean;
+  allowUpload: boolean;
+  showMetadata: boolean;
+}
+
+const generateShareLink = async (album: IAlbumShare, token: string) => {
+  const url = ENV.IMMICH_URL + "/api/shared-links";
+  return fetch(url, {
+    method: 'POST',
+    body: JSON.stringify({ 
+      type: "ALBUM",
+      albumId: album.albumId, 
+      allowDownload: album.allowDownload,
+      allowUpload: album.allowUpload,
+      showMetadata: album.showMetadata,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`
+    }
+  }).then(async (response) => {
+    if (response.status >= 400) {
+      return {
+        error: "Failed to fetch assets",
+        errorData: await response.json()
+      };
+    }
+    const data = await response.json();
+    return {
+      ...album, 
+      ...data,
+      shareLink: ENV.EXTERNAL_IMMICH_URL + "/share/" + data.key
+    };
+  });
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const currentUser = await getCurrentUser(req);
+  
+  if (!currentUser) {
+    return res.status(401).json({ error: 'Unauthorized' });
+  }
+
+  const { albums } = req.body as { albums: IAlbumShare[] };
+  if (!albums) {  
+    return res.status(400).json({ error: 'albums is required' });
+  }
+
+  const shareLinks = await Promise.all(albums.map(async (album) => {
+    return generateShareLink(album, currentUser.accessToken);
+  }));
+  return res.status(200).json(shareLinks);
+}