@noya-app/noya-file-explorer 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,13 +20,13 @@
     "dev": "npm run build:main -- --watch"
   },
   "dependencies": {
-    "@noya-app/noya-designsystem": "0.1.51",
-    "@noya-app/noya-icons": "0.1.7",
-    "@noya-app/noya-multiplayer-react": "0.1.54",
+    "@noya-app/noya-designsystem": "0.1.53",
+    "@noya-app/noya-icons": "0.1.8",
+    "@noya-app/noya-multiplayer-react": "0.1.56",
     "@noya-app/noya-keymap": "0.1.3",
-    "@noya-app/react-utils": "0.1.17",
+    "@noya-app/react-utils": "0.1.18",
     "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/noya-schemas": "0.1.4",
+    "@noya-app/noya-schemas": "0.1.5",
     "imfs": "^0.1.0",
     "browser-fs-access": "0.35.0"
   },

package/src/MediaCollection.tsx

@@ -32,7 +32,7 @@ import {
   useAssetManager,
   useAssets,
 } from "@noya-app/noya-multiplayer-react";
-import { MediaItem, MediaMap } from "@noya-app/noya-schemas";
+import { FileMediaItem, MediaItem, MediaMap } from "@noya-app/noya-schemas";
 import { groupBy, isDeepEqual } from "@noya-app/noya-utils";
 import {
   downloadUrl,
@@ -76,18 +76,81 @@ import {
   validateMediaItemRename,
 } from "./utils/files";
 
+const extensionToContentType = {
+  svg: "image/svg+xml",
+  png: "image/png",
+  jpeg: "image/jpeg",
+} as const;
+
+function encodeFileContentForThumbnail(
+  pathProp: string,
+  item: FileMediaItem
+): { contentType: string; url?: string } | undefined {
+  const extension = path.extname(pathProp).slice(1);
+  const contentType =
+    extensionToContentType[extension as keyof typeof extensionToContentType];
+
+  if (contentType) {
+    if (item.encoding === "base64") {
+      return {
+        contentType,
+        url: `data:${contentType};base64,${item.content}`,
+      };
+    } else {
+      try {
+        return {
+          contentType,
+          url: `data:${contentType},${encodeURIComponent(item.content)}`,
+        };
+      } catch (error) {
+        console.warn("Failed to encode content:", error);
+        return { contentType };
+      }
+    }
+  }
+
+  return undefined;
+}
+
 const MediaThumbnailInternal = memoGeneric(
-  ({ item, selected, size }: CollectionThumbnailProps<MediaItem>) => {
+  ({
+    item,
+    selected,
+    size,
+    path: pathProp,
+  }: CollectionThumbnailProps<MediaItem> & {
+    path?: string;
+  }) => {
     const asset = useAsset(item.kind === "asset" ? item.assetId : undefined);
     const isRoot = item.id === rootMediaItem.id;
     const isFolder = item.kind === "folder";
+    const isFile = item.kind === "file";
+
+    let contentType: string | undefined;
+    let url: string | undefined;
+
+    if (asset) {
+      contentType = asset.contentType;
+      url = asset.url;
+    } else if (isFile && pathProp) {
+      const encoded = encodeFileContentForThumbnail(pathProp, item);
+
+      if (encoded) {
+        contentType = encoded.contentType;
+        url = encoded.url;
+      }
+    }
+
+    const fileName = pathProp ? path.basename(pathProp) : undefined;
+
     return (
       <MediaThumbnail
-        contentType={asset?.contentType}
+        contentType={contentType}
         iconName={isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : undefined}
-        url={asset?.url}
+        url={url}
         selected={selected}
         size={size}
+        fileName={fileName}
       />
     );
   }
@@ -122,10 +185,12 @@ type MediaCollectionProps = {
   ) => void;
   selectedIds?: string[];
   media: MediaMap;
-  setMedia: (
+  setMedia?: (
     metadata: Partial<MultiplayerPatchMetadata>,
     media: MediaMap
   ) => void;
+  /** @default false */
+  readOnly?: boolean;
   /** @default "list" */
   viewType?: CollectionViewType;
   /**
@@ -176,7 +241,8 @@ export const MediaCollection = memo(
       onSelectionChange,
       selectedIds: selectedIdsProp,
       media,
-      setMedia,
+      setMedia: setMediaProp,
+      readOnly = false,
       viewType = "list",
       fileKindFilter = "all",
       showRootItem = false,
@@ -198,6 +264,12 @@ export const MediaCollection = memo(
     },
     ref
   ) {
+    const setMedia = useCallback(
+      (...args: Parameters<Extract<typeof setMediaProp, Function>>) => {
+        setMediaProp?.(...args);
+      },
+      [setMediaProp]
+    );
     const tree = useMemo(() => createMediaItemTree(media), [media]);
     const [tempItem, setTempItem] = useState<[string, MediaItem] | undefined>(
       undefined
@@ -655,8 +727,9 @@ export const MediaCollection = memo(
           variant={viewType === "grid" ? "normal" : "bare"}
           style={{
             backgroundColor: selected
-              ? cssVars.colors.primaryPastel
+              ? cssVars.colors.selectedListItemBackground
               : "transparent",
+            color: selected ? cssVars.colors.selectedListItemText : undefined,
           }}
         />
       );
@@ -686,12 +759,14 @@ export const MediaCollection = memo(
         <FileExplorerLayout
           title={title ?? rootMediaItemName}
           right={
-            <FileExplorerUploadButton
-              showUploadButton={showUploadButton}
-              onUpload={() => handleUpload(rootMediaItem.id)}
-            >
-              {right}
-            </FileExplorerUploadButton>
+            !readOnly && (
+              <FileExplorerUploadButton
+                showUploadButton={showUploadButton}
+                onUpload={() => handleUpload(rootMediaItem.id)}
+              >
+                {right}
+              </FileExplorerUploadButton>
+            )
           }
           className={className}
         >
@@ -733,7 +808,12 @@ export const MediaCollection = memo(
             onRename={onRename}
             renamable={renamable}
             selectedIds={selectedIds}
-            renderThumbnail={(props) => <MediaThumbnailInternal {...props} />}
+            renderThumbnail={(props) => (
+              <MediaThumbnailInternal
+                {...props}
+                path={tree.idToPathMap.get(props.item.id)}
+              />
+            )}
             renderAction={renderAction}
             renderDetail={(file, selected) => {
               if (file.kind !== "asset") return null;
@@ -767,11 +847,11 @@ export const MediaCollection = memo(
               if (position !== "inside" || targetItem.kind === "asset") {
                 return false;
               }
-              const sourcePath = tree.findIndexPath(
+              const sourcePath = tree.findPath(
                 rootMediaItem,
                 (item) => item.id === sourceItem.id
               );
-              const targetPath = tree.findIndexPath(
+              const targetPath = tree.findPath(
                 rootMediaItem,
                 (item) => item.id === targetItem.id
               );

package/src/utils/files.ts

@@ -146,7 +146,7 @@ export const moveUpAFolder = ({
   media: MediaMap;
   selectedIds: string[];
 }) => {
-  const indexPath = tree.findIndexPath(
+  const indexPath = tree.findPath(
     rootMediaItem,
     (item) => item.id === selectedIds[0]
   );
@@ -270,7 +270,7 @@ export const moveMediaInsideFolder = ({
 export const getParentDirectories = (mediaMap: MediaMap, folderId: string) => {
   const tree = createMediaItemTree(mediaMap);
 
-  const indexPath = tree.findIndexPath(
+  const indexPath = tree.findPath(
     rootMediaItem,
     (item) => item.id === folderId
   );