@muhgholy/next-drive 1.0.2 → 1.1.0

package/README.md

@@ -147,6 +147,49 @@ type MyFormData = z.infer<typeof myFormSchema>;
 
 ## Key Capabilities
 
+### Client-Side File URLs
+
+**Generate File URL:**
+
+```typescript
+import { useDrive } from "@muhgholy/next-drive/client";
+import type { TDriveFile } from "@muhgholy/next-drive/client";
+
+function MyComponent() {
+	const { createUrl } = useDrive();
+
+	// Basic URL generation
+	const url = createUrl(driveFile);
+	// Returns: /api/drive?action=serve&id={fileId}
+
+	// With image quality and format
+	const url = createUrl(driveFile, {
+		quality: "medium",
+		format: "webp",
+	});
+	// Returns: /api/drive?action=serve&id={fileId}&q=medium&format=webp
+
+	// Use in Next.js Image component
+	return <Image src={createUrl(driveFile)} alt={driveFile.file.name} />;
+}
+```
+
+**Responsive Image SrcSet:**
+
+```typescript
+import { useDrive } from "@muhgholy/next-drive/client";
+
+function ResponsiveImage({ driveFile }: { driveFile: TDriveFile }) {
+	const { createUrl, createSrcSet } = useDrive();
+
+	// Generate responsive srcSet for optimal image loading
+	const { srcSet, sizes } = createSrcSet(driveFile, "webp");
+
+	// Use in img tag
+	return <img src={createUrl(driveFile, { quality: "medium" })} srcSet={srcSet} sizes={sizes} alt={driveFile.file.name} />;
+}
+```
+
 ### Server-Side File Access
 
 **Get File URL:**

package/dist/client/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { l as TDrivePathItem, d as TDatabaseDrive, m as TDriveQuota, i as TDriveAPIResponse, n as TDriveUploadState, e as TDriveFile } from '../index-CIbbTroj.js';
-export { o as driveFileSchemaZod } from '../index-CIbbTroj.js';
+import { l as TDrivePathItem, d as TDatabaseDrive, m as TDriveQuota, e as TDriveFile, n as TImageQuality, o as TImageFormat, i as TDriveAPIResponse, p as TDriveUploadState } from '../index-CuwenLsj.js';
+export { q as driveFileSchemaZod } from '../index-CuwenLsj.js';
 import 'zod';
 
 type TDriveContext = {
@@ -47,6 +47,14 @@ type TDriveContext = {
     };
     selectedFileIds: string[];
     setSelectedFileIds: React.Dispatch<React.SetStateAction<string[]>>;
+    createUrl: (driveFile: TDriveFile, options?: {
+        quality?: TImageQuality;
+        format?: TImageFormat;
+    }) => string;
+    createSrcSet: (driveFile: TDriveFile, format?: TImageFormat) => {
+        srcSet: string;
+        sizes: string;
+    };
     navigateToFolder: (item: {
         id: string | null;
         name: string;
@@ -122,4 +130,4 @@ declare const DriveHeader: () => React.JSX.Element;
 
 declare const DriveSidebar: () => React.JSX.Element;
 
-export { DriveExplorer, DriveFileChooser, DriveHeader, DrivePathBar, DriveProvider, DriveSidebar, DriveStorageIndicator, DriveUpload, type TDriveContext, TDriveFile, useDrive, useUpload };
+export { DriveExplorer, DriveFileChooser, DriveHeader, DrivePathBar, DriveProvider, DriveSidebar, DriveStorageIndicator, DriveUpload, type TDriveContext, TDriveFile, TImageFormat, TImageQuality, useDrive, useUpload };

package/dist/client/index.js

@@ -1,6 +1,75 @@
 // src/client/context.tsx
 import React, { createContext, useContext, useState, useCallback, useMemo } from "react";
+
+// src/client/utils.tsx
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { File, Folder, Image, Video, Music, FileText, FileCode, FileArchive } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+var getFileIcon = (mime, isFolder, className = "w-6 h-6") => {
+  if (isFolder) return /* @__PURE__ */ jsx(Folder, { className: cn("text-blue-500 fill-blue-500/20", className) });
+  if (mime.startsWith("image/")) return /* @__PURE__ */ jsx(Image, { className: cn("text-purple-500", className) });
+  if (mime.startsWith("video/")) return /* @__PURE__ */ jsx(Video, { className: cn("text-red-500", className) });
+  if (mime.startsWith("audio/")) return /* @__PURE__ */ jsx(Music, { className: cn("text-yellow-500", className) });
+  if (mime === "application/pdf") return /* @__PURE__ */ jsx(FileText, { className: cn("text-orange-500", className) });
+  if (mime.includes("text") || mime.includes("document")) return /* @__PURE__ */ jsx(FileText, { className: cn("text-slate-500", className) });
+  if (mime.includes("zip") || mime.includes("compressed")) return /* @__PURE__ */ jsx(FileArchive, { className: cn("text-amber-500", className) });
+  if (mime.includes("javascript") || mime.includes("typescript") || mime.includes("json") || mime.includes("html") || mime.includes("css")) return /* @__PURE__ */ jsx(FileCode, { className: cn("text-green-500", className) });
+  return /* @__PURE__ */ jsx(File, { className: cn("text-gray-400", className) });
+};
+var matchesMimeFilter = (mime, isFolder, filter) => {
+  if (!filter) return true;
+  if (isFolder) return true;
+  if (filter === "*/*") return true;
+  const types = filter.split(",").map((t) => t.trim());
+  return types.some((type) => {
+    if (type === mime) return true;
+    if (type.endsWith("/*")) {
+      const prefix = type.slice(0, -2);
+      return mime.startsWith(`${prefix}/`);
+    }
+    return false;
+  });
+};
+var driveCreateUrl = (driveFile, apiEndpoint, options) => {
+  const params = new URLSearchParams({
+    action: "serve",
+    id: driveFile.id
+  });
+  if (options?.quality) params.set("q", options.quality);
+  if (options?.format) params.set("format", options.format);
+  return `${apiEndpoint}?${params.toString()}`;
+};
+var driveCreateSrcSet = (driveFile, apiEndpoint, format = "webp") => {
+  const qualities = ["ultralow", "low", "medium", "high"];
+  const qualityWidthMap = {
+    ultralow: 200,
+    low: 400,
+    medium: 800,
+    high: 1200,
+    normal: 1600
+  };
+  const srcSet = qualities.map((quality) => {
+    const url = driveCreateUrl(driveFile, apiEndpoint, { quality, format });
+    return `${url} ${qualityWidthMap[quality]}w`;
+  }).join(", ");
+  const sizes = "(max-width: 320px) 200px, (max-width: 480px) 400px, (max-width: 768px) 800px, 1200px";
+  return { srcSet, sizes };
+};
+
+// src/client/context.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var DriveContext = createContext(null);
 var DriveProvider = (props) => {
   const { children, apiEndpoint, initialActiveAccountId = null, initialSelectionMode = { type: "SINGLE" }, defaultSelectedFileIds = [] } = props;
@@ -216,7 +285,13 @@ var DriveProvider = (props) => {
   React.useEffect(() => {
     refreshAccounts();
   }, [refreshAccounts]);
-  return /* @__PURE__ */ jsx(DriveContext.Provider, { value: {
+  const createUrl = useCallback((driveFile, options) => {
+    return driveCreateUrl(driveFile, apiEndpoint, options);
+  }, [apiEndpoint]);
+  const createSrcSet = useCallback((driveFile, format) => {
+    return driveCreateSrcSet(driveFile, apiEndpoint, format);
+  }, [apiEndpoint]);
+  return /* @__PURE__ */ jsx2(DriveContext.Provider, { value: {
     apiEndpoint,
     currentFolderId,
     path,
@@ -247,6 +322,8 @@ var DriveProvider = (props) => {
     selectionMode,
     selectedFileIds,
     setSelectedFileIds,
+    createUrl,
+    createSrcSet,
     navigateToFolder,
     navigateUp,
     refreshItems,
@@ -415,48 +492,6 @@ var useUpload = (apiEndpoint, activeAccountId, onUploadComplete) => {
 // src/client/file-chooser.tsx
 import { useState as useState6, useCallback as useCallback4, useMemo as useMemo3, useEffect as useEffect5 } from "react";
 
-// src/client/utils.tsx
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { File, Folder, Image, Video, Music, FileText, FileCode, FileArchive } from "lucide-react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0) return "0 Bytes";
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-};
-var getFileIcon = (mime, isFolder, className = "w-6 h-6") => {
-  if (isFolder) return /* @__PURE__ */ jsx2(Folder, { className: cn("text-blue-500 fill-blue-500/20", className) });
-  if (mime.startsWith("image/")) return /* @__PURE__ */ jsx2(Image, { className: cn("text-purple-500", className) });
-  if (mime.startsWith("video/")) return /* @__PURE__ */ jsx2(Video, { className: cn("text-red-500", className) });
-  if (mime.startsWith("audio/")) return /* @__PURE__ */ jsx2(Music, { className: cn("text-yellow-500", className) });
-  if (mime === "application/pdf") return /* @__PURE__ */ jsx2(FileText, { className: cn("text-orange-500", className) });
-  if (mime.includes("text") || mime.includes("document")) return /* @__PURE__ */ jsx2(FileText, { className: cn("text-slate-500", className) });
-  if (mime.includes("zip") || mime.includes("compressed")) return /* @__PURE__ */ jsx2(FileArchive, { className: cn("text-amber-500", className) });
-  if (mime.includes("javascript") || mime.includes("typescript") || mime.includes("json") || mime.includes("html") || mime.includes("css")) return /* @__PURE__ */ jsx2(FileCode, { className: cn("text-green-500", className) });
-  return /* @__PURE__ */ jsx2(File, { className: cn("text-gray-400", className) });
-};
-var matchesMimeFilter = (mime, isFolder, filter) => {
-  if (!filter) return true;
-  if (isFolder) return true;
-  if (filter === "*/*") return true;
-  const types = filter.split(",").map((t) => t.trim());
-  return types.some((type) => {
-    if (type === mime) return true;
-    if (type.endsWith("/*")) {
-      const prefix = type.slice(0, -2);
-      return mime.startsWith(`${prefix}/`);
-    }
-    return false;
-  });
-};
-
 // src/client/components/drive/explorer.tsx
 import React7, { useMemo as useMemo2, useEffect as useEffect4, useRef as useRef3 } from "react";
 import { Folder as Folder2, Loader2 as Loader22, RotateCcw, ChevronRight as ChevronRight3 } from "lucide-react";