feat(storage-browser): file preview and file thumbnail (#6669)

* feat(storage-browser): Object preview

* Add renderer resolver and image renderer

* Add video preview component

* Add text preview

* Add un-supported preview view

* Add main layout styling

* Add file limit

* Add preview placeholder loader

* Add retry logic

* Add typing for filePreview API

* Add file meta data section

* Update file metadata

* update to handle composable case

* Update file preview state logic

* Update FilePreview naming to be consistent

* Update state naming to be consistent

* update renderer props type

* Add file thumbnail

* Add unit testing preview components and utils

* Add tests for FilePreview component, controller and hook. Also utils and context

* Update file preview styling and fix createProvider test

* Update storage browser theming

* Add new file grounds and update composable and default auth

* Add display text for filePreview

* Update composable

* Update the preview layout.

* update image styling

* Add change set

* Update storage browser playground

* update file preview playground

* Rename files utils directory

* Update file type generic to avoid using AllFileTypes<any>

* Update multiple function definition to be consistent

* rename file preview callbacks (retryFilePreview,openFilePreview,closeFilePreview,) to be consistent

* separate file icon and file preview logic

* use unknown instead of any for file type generic resolver

* Update content type sting processing

* update file type logic

* optimize useFilePreview hook callbacks using useCallback

* Remove un-used code

* Add video error handling

* Update video return type

* Add Image error handling

* Update image, vide and metadata styling

* Increase the storage size limit.

* Update text preview component return value

* Use PreviewFallback for Image, text and video error handling.

* Update composable playground to use manged auth

* Silence types temporarily

* Update PreviewFallback component

* update file size extraction

* Update alt for text and video

* Update display messages

* Add exhaustive check for renderer

* Update provide props

* use existing file size formatter humanFileSize

* removed null assertion from file size

* Fix typo in url util name

* fix DEFAULT_FILE_SIZE_LIMITS type

* fix url import

* Remove null assertion form file preview state

* Update display text destruction

* Update FileSizeResolver and

* update file reducer

* fix typescript issue

* remove ts un-used code

* Update PreviewFallback

* Update text preview to use preview placeholder

* Update file limit check logic

* Make text content request cancellable

* use snapshot in testing file preview display text

* Update ariaLabel of file button

* replace runtime exhaustiveCheck with build-time type safety

* feat(object-preview) : update docs for the object preview feature  (#6675)

* Add new properties for LocationDetailViewState

* Add file preview section in under Customization

* Add file preview display text

* Add file thumbnail icons

* Update overview section to reference file preview capability

* Update composition example to include File preview

* Add file preview to CustomUI section

* Add spacing for custom file preview comments

* update ### File preview section description/overview

* update overview description

* feat(storage-browser): file preview e2e tests (#6672)

* update file preview playground

* Update video and un-supported tests

* Update image, video and retry get by alt

* update preview loader assertion message

* remove redundant assertion.

* use when instead of then for button click

* update file row content

* Storage browser/object preview bug bash issues (#6676)

* close preview on search

* Close preview on refresh and navigate

* close preview on paginate.

* Fix Clicking on a selected/active textfile reloads the content

* Add unit tests for close file on actions and use file preview

* preview do not fails if get properties fails

* fix 404

* Add a test cases for opening a preview

* Fix fileType infer issue

* update get configuration logic

* update preview error scenario.

* Skip flaky e2e preview error

* Fix flaky test in file preview error

* Add mocking for file preview (#6679)

* Add mocking for file preview

* Fix file preview custom example

* Update next config domains

* Update mock comment

* address feedback from stakeholders

* fix file size limit test

* remove unused code in text preview component

* revert build command to use yarn

---------

Co-authored-by: Philipp Andreas Paul <[email protected]>

Author: osama-rizk

.changeset/dirty-cheetahs-fail.md

@@ -0,0 +1,7 @@
+---
+'@aws-amplify/ui-react-storage': minor
+'@aws-amplify/ui-react': minor
+'@aws-amplify/ui': minor
+---
+
+feat(storage-browser): File preview and file thumbnail.

docs/next.config.js

@@ -25,6 +25,9 @@ function createRemarkMdxFrontmatterPlugin(options = {}) {
 }
 
 module.exports = withNextPluginPreval({
+  images: {
+    domains: ['images.unsplash.com'],
+  },
   env: {
     BRANCH,
     SITE_URL: process.env.SITE_URL,
@@ -205,6 +208,15 @@ module.exports = withNextPluginPreval({
   },
 
   webpack(config) {
+    // Add alias to mock storage-internal for storage browser examples
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@aws-amplify/storage/internals': path.resolve(
+        __dirname,
+        'src/pages/[platform]/connected-components/storage/storage-browser/examples/mockStorageInternal.ts'
+      ),
+    };
+
     const defaultRehypePlugins = [
       // This is a custom plugin that removes lines that end in `// IGNORE`
       // This allows us to include code necessary for an example to run

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/Composed.tsx

@@ -7,6 +7,7 @@ import { ComposedCreateFolderView } from './ComposedCreateFolderView';
 import { ComposedDeleteView } from './ComposedDeleteView';
 import { ComposedDownloadView } from './ComposedDownloadView';
 import { ComposedUploadView } from './ComposedUploadView';
+import ComposedLocationDetailView from './ComposedLocationDetailView';
 
 function LocationsView() {
   const state = useView('Locations');
@@ -80,7 +81,7 @@ function MyStorageBrowser() {
 
   return (
     <>
-      <StorageBrowser.LocationDetailView />
+      <ComposedLocationDetailView />
       <dialog ref={ref}>
         <MyLocationActionView />
       </dialog>

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedLocationDetailView.tsx

@@ -8,19 +8,19 @@ function LocationDetailView() {
   return (
     <StorageBrowser.LocationDetailView.Provider {...state}>
       <Flex direction="row">
+        <StorageBrowser.LocationDetailView.Pagination />
         <StorageBrowser.LocationDetailView.Refresh />
         <StorageBrowser.LocationDetailView.Search />
       </Flex>
-      <StorageBrowser.LocationDetailView.LocationItemsTable />
-      <StorageBrowser.LocationDetailView.Pagination />
+      <Flex direction="column" position="relative">
+        <StorageBrowser.LocationDetailView.LocationItemsTable />
+
+        <StorageBrowser.LocationDetailView.FilePreview />
+      </Flex>
     </StorageBrowser.LocationDetailView.Provider>
   );
 }
 
 export default function Example() {
-  return (
-    <StorageBrowser.Provider>
-      <LocationDetailView />
-    </StorageBrowser.Provider>
-  );
+  return <LocationDetailView />;
 }

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/Custom.tsx

@@ -6,6 +6,7 @@ import { CustomDeleteView } from './CustomDeleteView';
 import { CustomDownloadView } from './CustomDownloadView';
 import { CustomLocationsView } from './CustomLocationsView';
 import { CustomUploadView } from './CustomUploadView';
+import CustomLocationDetailView from './CustomLocationDetailView';
 
 function MyLocationActionView() {
   const state = useView('LocationDetail');
@@ -40,7 +41,7 @@ function MyStorageBrowser() {
     return <MyLocationActionView />;
   }
 
-  return <StorageBrowser.LocationDetailView />;
+  return <CustomLocationDetailView />;
 }
 
 export default function Example() {

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/CustomFilePreview.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Image from 'next/image';
+import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
+import { mockConfig } from './mockConfig'; // IGNORE
+import { defaultActions } from './defaultActions'; // IGNORE
+
+const CustomImageRenderer = ({ fileData, url }: any) => (
+  <div style={{ border: '3px solid gray' }}>
+    <div>this is my custom image renderer</div>
+    <Image src={url} alt={fileData?.key} width={500} height={300} />
+  </div>
+);
+
+const CustomAudioRenderer = ({ fileData, url }: any) => (
+  <div
+    style={{
+      border: '3px solid #6f42c1',
+      padding: '15px',
+      borderRadius: '8px',
+    }}
+  >
+    <h3>🎵 Audio Player</h3>
+    <p>
+      <strong>File:</strong> {fileData?.key}
+    </p>
+    <audio controls style={{ width: '100%' }}>
+      <source src={url} />
+      Your browser does not support the audio element.
+    </audio>
+  </div>
+);
+
+const { StorageBrowser } = createStorageBrowser({
+  config: mockConfig, // IGNORE
+  actions: { default: defaultActions }, // IGNORE
+  filePreview: {
+    fileTypeResolver: (properties) => {
+      if (properties.key.endsWith('txt')) return 'text';
+      if (properties.key.endsWith('mp4')) return 'video';
+      if (properties.key.endsWith('jpg')) return 'image';
+
+      // Audio files
+      if (properties?.contentType?.startsWith('audio/')) return 'audio';
+
+      return undefined;
+    },
+    maxFileSize: (fileType) => {
+      // 1GB preview limit for videos
+      if (fileType == 'video') return 1000 * 1024 * 1024;
+    },
+    urlOptions: (fileType) => {
+      // 3 hours expiration for the pre-signed url for videos
+      if (fileType == 'video')
+        return { expiresIn: 1000 * 60 * 60 * 3, validateObjectExistence: true };
+    },
+    rendererResolver: (fileType) => {
+      // Add a new renderer for certain files types
+      if (fileType === 'audio') return CustomAudioRenderer;
+
+      if (fileType == 'image') {
+        // Override the default image renderer
+        return CustomImageRenderer;
+      }
+    },
+  },
+});
+
+export default function Example() {
+  return <StorageBrowser />;
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/CustomLocationDetailView.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Flex } from '@aws-amplify/ui-react';
+import { StorageBrowser, useView } from './StorageBrowser';
+import CustomFilePreview from './CustomUIFilePreview';
+
+function LocationDetailView() {
+  const state = useView('LocationDetail');
+  const { filePreviewState, onSelectActiveFile } = state;
+
+  return (
+    <StorageBrowser.LocationDetailView.Provider {...state}>
+      <Flex direction="row">
+        <StorageBrowser.LocationDetailView.Pagination />
+        <StorageBrowser.LocationDetailView.Refresh />
+        <StorageBrowser.LocationDetailView.Search />
+      </Flex>
+      <Flex direction="column" position="relative">
+        <StorageBrowser.LocationDetailView.LocationItemsTable />
+
+        <CustomFilePreview
+          filePreviewState={filePreviewState}
+          onCloseFilePreview={() => onSelectActiveFile(undefined)}
+        />
+      </Flex>
+    </StorageBrowser.LocationDetailView.Provider>
+  );
+}
+
+export default function Example() {
+  return <LocationDetailView />;
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/CustomUIFilePreview.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, Card, Flex, Text } from '@aws-amplify/ui-react';
+
+export default function CustomFilePreview({
+  filePreviewState,
+  onCloseFilePreview,
+}) {
+  const { previewedFile, url, isLoading, hasError } = filePreviewState;
+  const { key, size } = previewedFile || {};
+
+  if (!previewedFile) return null;
+
+  if (isLoading) return <div>...loading</div>;
+  if (hasError) return <div>...oops some thing bad happens</div>;
+
+  return (
+    <Card padding="1rem" margin="1rem">
+      <Flex direction="column" gap="0.5rem">
+        <Flex justifyContent="space-between" alignItems="center">
+          <Text fontSize="large" fontWeight="bold">
+            Custom Preview: {key}
+          </Text>
+          <Button size="small" onClick={onCloseFilePreview}>
+            Close
+          </Button>
+        </Flex>
+
+        <Text color="gray">Size: {size} bytes</Text>
+
+        {url ? (
+          <Text color="green">✓ Preview URL ready</Text>
+        ) : (
+          <Text color="orange">⏳ Loading preview...</Text>
+        )}
+      </Flex>
+    </Card>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/DisplayText.tsx

@@ -11,6 +11,13 @@ export default function Example() {
           // Some are a function that return a string
           getPermissionName: (permissions) => permissions.join('/'),
         },
+        LocationDetailView: {
+          searchSubfoldersToggleLabel: 'Search subfolders',
+          filePreview: {
+            filePreviewTitle: 'File Preview Title',
+            closeButtonLabel: 'Close Preview',
+          },
+        },
       }}
     />
   );

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/Icons.tsx

@@ -7,6 +7,9 @@ import {
   FcPrevious,
   FcRefresh,
   FcSearch,
+  FcDocument,
+  FcImageFile,
+  FcFile,
 } from 'react-icons/fc';
 import { StorageBrowser } from './StorageBrowser'; // IGNORE
 import { IconsProvider } from '@aws-amplify/ui-react';
@@ -20,6 +23,9 @@ export default function Example() {
           'sort-indeterminate': <FcMinus />,
           'sort-ascending': <FcAlphabeticalSortingAz />,
           'sort-descending': <FcAlphabeticalSortingZa />,
+          'file-pdf': <FcDocument />,
+          'file-text': <FcFile />,
+          'file-image': <FcImageFile />,
         },
         searchField: {
           search: <FcSearch />,