@dxos/plugin-wnfs 0.6.14-main.f49f251

package/src/blockstore.ts

@@ -0,0 +1,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { BaseBlockstore } from 'blockstore-core';
+import { IDBBlockstore } from 'blockstore-idb';
+import type { CID } from 'multiformats';
+
+import { storeName } from './common';
+
+export const create = (apiHost?: string) => {
+  return new MixedBlockstore(apiHost);
+};
+
+/**
+ * A blockstore that communicates with the DXOS blob service,
+ * and which uses an indexedDB blockstore as a client cache.
+ */
+export class MixedBlockstore extends BaseBlockstore {
+  readonly #apiHost: string | undefined;
+  readonly #idbStore: IDBBlockstore;
+
+  constructor(apiHost?: string) {
+    super();
+
+    this.#apiHost = apiHost;
+    this.#idbStore = new IDBBlockstore(storeName());
+  }
+
+  async open() {
+    await this.#idbStore.open();
+  }
+
+  url(apiHost: string, cid?: CID) {
+    const path = cid ? cid.toString() : '';
+    return `${apiHost}/api/file/${path}`;
+  }
+
+  // Blockstore implementation
+  override async delete(key: CID): Promise<void> {
+    await this.#idbStore.delete(key);
+
+    if (this.#apiHost) {
+      await fetch(this.url(this.#apiHost, key), {
+        method: 'DELETE',
+      });
+    }
+  }
+
+  override async get(key: CID): Promise<Uint8Array> {
+    if (await this.#idbStore.has(key)) {
+      return await this.#idbStore.get(key);
+    }
+
+    if (this.#apiHost) {
+      return await fetch(this.url(this.#apiHost, key), {
+        method: 'GET',
+      })
+        .then((r) => r.arrayBuffer())
+        .then((r) => new Uint8Array(r));
+    }
+
+    return await this.#idbStore.get(key);
+  }
+
+  override async has(key: CID): Promise<boolean> {
+    if (await this.#idbStore.has(key)) {
+      return true;
+    }
+
+    if (this.#apiHost) {
+      return await fetch(this.url(this.#apiHost, key), {
+        method: 'HEAD',
+      }).then((r) => r.ok);
+    }
+
+    return false;
+  }
+
+  override async put(key: CID, val: Uint8Array): Promise<CID> {
+    await this.#idbStore.put(key, val);
+
+    if (this.#apiHost) {
+      await fetch(this.url(this.#apiHost, key), {
+        method: 'POST',
+        body: val,
+      });
+    }
+
+    return key;
+  }
+
+  async destroy(): Promise<void> {
+    await this.#idbStore.destroy();
+  }
+}

package/src/common.ts

@@ -0,0 +1,84 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { Blockstore } from 'interface-blockstore';
+import { CID } from 'multiformats/cid';
+import { sha256 } from 'multiformats/hashes/sha2';
+import { type BlockStore as WnfsBlockStore } from 'wnfs';
+
+import * as crypto from '@dxos/crypto';
+import { type Space } from '@dxos/react-client/echo';
+
+//
+// PATH
+//
+
+export const filePath = (fileName: string, space: Space) => {
+  return ['spaces', space.properties.id, 'files', fileName];
+};
+
+//
+// RNG
+//
+
+export class Rng {
+  randomBytes(count: number): Uint8Array {
+    return new Uint8Array(crypto.randomBytes(count));
+  }
+}
+
+//
+// STORE
+//
+
+export const store = (blockstore: Blockstore): WnfsBlockStore => {
+  const getBlock = async (cid: Uint8Array): Promise<Uint8Array | undefined> => {
+    const decodedCid = CID.decode(cid);
+    return await blockstore.get(decodedCid);
+  };
+
+  const hasBlock = async (cid: Uint8Array): Promise<boolean> => {
+    const decodedCid = CID.decode(cid);
+    return await blockstore.has(decodedCid);
+  };
+
+  const putBlockKeyed = async (cid: Uint8Array, bytes: Uint8Array): Promise<void> => {
+    const decodedCid = CID.decode(cid);
+    await blockstore.put(decodedCid, bytes);
+  };
+
+  // Don't hash blocks with the rs-wnfs default Blake 3, sha256 has better support.
+  const putBlock = async (bytes: Uint8Array, codec: number): Promise<Uint8Array> => {
+    const hash = await sha256.digest(bytes);
+    const cid = CID.create(1, codec, hash);
+    await blockstore.put(cid, bytes);
+    return cid.bytes;
+  };
+
+  return { getBlock, hasBlock, putBlockKeyed, putBlock };
+};
+
+export const storeName = () => 'dxos/wnfs';
+
+//
+// OTHER
+//
+
+export const readFile = (file: File): Promise<Uint8Array> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const result = event.target?.result;
+      if (result === null || result === undefined || typeof result === 'string') {
+        reject(new Error('Expected an ArrayBuffer'));
+        return;
+      }
+      resolve(new Uint8Array(result));
+    };
+    reader.onerror = (err) => {
+      reject(err);
+    };
+    reader.readAsArrayBuffer(file);
+  });
+};

package/src/components/FileCard.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { DropdownMenu } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-card';
+import type { MosaicTileComponent } from '@dxos/react-ui-mosaic';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type FileType } from '../types';
+
+export type FileCardProps = {
+  id: string;
+  object: FileType;
+};
+
+const FileCard: MosaicTileComponent<FileCardProps> = forwardRef(
+  (
+    { classNames, isDragging, draggableStyle, draggableProps, item: { id, object: file }, grow, onSelect, onAction },
+    forwardRef,
+  ) => {
+    const url = 'TODO';
+
+    return (
+      <div role='none' ref={forwardRef} className='flex w-full' style={draggableStyle}>
+        <Card.Root classNames={mx('w-full snap-center', isDragging && 'opacity-20', classNames)} grow={grow}>
+          <Card.Header onDoubleClick={() => onSelect?.()} floating={!!url}>
+            <Card.DragHandle {...draggableProps} position='left' />
+            <Card.Menu position='right'>
+              {/* TODO(burdon): Handle events/intents? */}
+              <DropdownMenu.Item onClick={() => onAction?.({ id, action: 'delete' })}>
+                <span className='grow'>Delete</span>
+              </DropdownMenu.Item>
+            </Card.Menu>
+          </Card.Header>
+          <Card.Media src={url} />
+        </Card.Root>
+      </div>
+    );
+  },
+);
+
+export default FileCard;

package/src/components/FileMain.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { Main } from '@dxos/react-ui';
+import {
+  baseSurface,
+  topbarBlockPaddingStart,
+  fixedInsetFlexLayout,
+  bottombarBlockPaddingEnd,
+} from '@dxos/react-ui-theme';
+
+import { FilePreview } from './FilePreview';
+import { type FileType } from '../types';
+
+const FileMain: FC<{ file: FileType }> = ({ file }) => {
+  const url = 'TODO';
+
+  return (
+    <Main.Content classNames={[baseSurface, fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>
+      <FilePreview type={file.type} url={url} />
+    </Main.Content>
+  );
+};
+
+export default FileMain;

package/src/components/FilePreview.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type FilePreviewProps = ThemedClassName<{ type: string; url: string }>;
+
+/**
+ * File/content preview iframe.
+ */
+export const FilePreview = ({ type, url, classNames }: FilePreviewProps) => {
+  if (type.startsWith('image/')) {
+    return <img className={mx('w-full h-full object-contain', classNames)} src={url} />;
+  } else if (type.startsWith('video/')) {
+    return <video className={mx('w-full h-full object-contain', classNames)} src={url} controls />;
+  } else {
+    return <iframe className={mx('w-full h-full overflow-auto', classNames)} src={url} />;
+  }
+};

package/src/components/FileSection.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { FilePreview } from './FilePreview';
+import { type FileType } from '../types';
+
+const FileSection: FC<{ file: FileType; height?: number }> = ({ file, height = 400 }) => {
+  const url = 'TODO';
+
+  return (
+    <div style={{ height }} className='flex w-full p-2 justify-center align-center'>
+      <FilePreview type={file.type} url={url} classNames='object-contain' />
+    </div>
+  );
+};
+
+export default FileSection;

package/src/components/FileSlide.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { FilePreview } from './FilePreview';
+import { type FileType } from '../types';
+
+const FileSlide: FC<{ file: FileType; cover?: boolean }> = ({ file, cover }) => {
+  const url = 'TODO';
+
+  return (
+    <div className='h-full flex justify-center align-center'>
+      <FilePreview type={file.type} url={url} classNames={cover ? 'object-cover' : 'object-contain'} />
+    </div>
+  );
+};
+
+export default FileSlide;

package/src/components/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+// Lazily load components for content surfaces.
+export const FileCard = React.lazy(() => import('./FileCard'));
+export const FileMain = React.lazy(() => import('./FileMain'));
+export const FileSection = React.lazy(() => import('./FileSection'));
+export const FileSlide = React.lazy(() => import('./FileSlide'));

package/src/extensions/image.stories.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import type { Blockstore } from 'interface-blockstore';
+import React, { useEffect, useState } from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { useThemeContext } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { image } from './image';
+import { create as createBlockstore } from '../blockstore';
+import { filePath, store } from '../common';
+import { loadWnfs } from '../load';
+import { upload } from '../upload';
+
+const Story = () => {
+  const space = useSpace();
+
+  const [blockstore, setBlockstore] = useState<Blockstore>();
+  const [amountOfUploads, setAmountOfUploads] = useState<number>(0);
+  const [images, setImages] = useState<{ url: string }[]>([]);
+
+  useEffect(() => {
+    if (space) {
+      console.log('SPACE ID', space.properties.id);
+    }
+
+    const create = async () => {
+      // NOTE: We don't pass in the URL of the Blob service, so we don't use it.
+      const bs = createBlockstore();
+      await bs.open();
+      setBlockstore(bs);
+    };
+
+    create().catch(console.error);
+  }, [space]);
+
+  useEffect(() => {
+    if (!space || !blockstore) {
+      return;
+    }
+
+    (async () => {
+      const { directory, forest } = await loadWnfs(space, blockstore);
+      const parentPath = ['spaces', space.properties.id, 'files'];
+      const parentNode = await directory.getNode(parentPath, true, forest, store(blockstore));
+      if (!parentNode) {
+        return;
+      }
+
+      const { result } = await directory.ls(parentPath, true, forest, store(blockstore));
+
+      const images = await Promise.all(
+        result.map(async (r: any) => {
+          const path = filePath(r.name, space);
+          const reading = await directory.read(path, true, forest, store(blockstore));
+          const bytes = reading.result;
+          const blob = new Blob([bytes]);
+          const url = URL.createObjectURL(blob);
+          return { url };
+        }),
+      );
+
+      setImages(images);
+    })().catch(console.error);
+  }, [space, blockstore, amountOfUploads]);
+
+  const onFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (blockstore) {
+        if (space) {
+          await upload({ blockstore, file, space });
+          setAmountOfUploads(amountOfUploads + 1);
+        } else {
+          console.warn('Space is undefined.');
+        }
+      } else {
+        console.warn("Blockstore hasn't been initialised yet.");
+      }
+    }
+  };
+
+  const { themeMode } = useThemeContext();
+  const { parentRef, focusAttributes } = useTextEditor(
+    () => ({
+      initialValue: '',
+      extensions: [
+        createBasicExtensions(),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+        blockstore && space ? [image({ blockstore, space })] : [],
+        decorateMarkdown(),
+      ],
+    }),
+    [themeMode],
+  );
+
+  const renderedImages = images.map((image, index) => (
+    <div key={index} className='mt-1'>
+      <img src={image.url} width='300' />
+    </div>
+  ));
+
+  return (
+    <>
+      <div className='mb-2'>
+        <input type='file' accept='image/*' onChange={onFileChange} />
+      </div>
+      <div className='w-[50rem]' ref={parentRef} {...focusAttributes} />
+      <div>
+        {images.length ? (
+          renderedImages
+        ) : (
+          <p>
+            <strong className='text-green-600'>Select an image file to add to WNFS and render it.</strong>
+          </p>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'plugins/plugin-wnfs/image',
+  render: Story,
+  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
+};
+
+export const Default = {};