feat: handle video preview

Refs: PREV-102 (#100)
zextras · Sep 13, 2024 · 797a59b · 797a59b
1 parent 5a9e389
commit 797a59b
Show file tree

Hide file tree

Showing 28 changed files with 570 additions and 83 deletions.
diff --git a/THIRDPARTIES b/THIRDPARTIES
@@ -15,7 +15,6 @@ MIT License (MIT) applies to:
 @testing-library/react, Copyright (c) 2017 Kent C. Dodds
 @testing-library/user-event, Copyright (c) 2020 Giorgio Polvara
 @types/jest, Copyright (c) Microsoft Corporation.
-@types/lodash, Copyright (c) Microsoft Corporation.
 @types/node, Copyright (c) Microsoft Corporation.
 @types/react-dom, Copyright (c) Microsoft Corporation.
 @types/react, Copyright (c) Microsoft Corporation.
@@ -29,7 +28,6 @@ is-ci, Copyright (c) 2016-2021 Thomas Watson Steen
 jest-environment-jsdom, Copyright (c) Meta Platforms, Inc. and affiliates.
 jest-fail-on-console, Copyright (c) 2022 Valentin Hervieu
 jest, Copyright (c) Meta Platforms, Inc. and affiliates.
-lodash, Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
 react-dom, Copyright (c) Facebook, Inc. and its affiliates.
 react-pdf, Copyright (c) 2017–2023 Wojciech Maj
 react, Copyright (c) Facebook, Inc. and its affiliates.

diff --git a/docs/api/carbonio-ui-preview.imagepreview.md b/docs/api/carbonio-ui-preview.imagepreview.md
@@ -9,5 +9,5 @@ Main component for rendering the preview of an image
 **Signature:**
 
 ```typescript
-ImagePreview: import("react").ForwardRefExoticComponent<ImagePreviewProps & import("react").RefAttributes<HTMLDivElement>>
+ImagePreview: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<HTMLDivElement>>
 ```
diff --git a/docs/api/carbonio-ui-preview.md b/docs/api/carbonio-ui-preview.md
@@ -107,6 +107,15 @@ Description
 </td><td>
 
 
+</td></tr>
+<tr><td>
+
+[VideoPreviewProps](./carbonio-ui-preview.videopreviewprops.md)
+
+
+</td><td>
+
+
 </td></tr>
 </tbody></table>
 
@@ -174,7 +183,7 @@ The context give access to the functions needed to manage multiple previews. It
 
 </td><td>
 
-Show the preview for either an image or a pdf. This component is just a wrapper on the two specific preview components.
+Show the preview for a video, an image or a pdf. This component is just a wrapper on the two specific preview components.
 
 
 </td></tr>

diff --git a/docs/api/carbonio-ui-preview.previewitem.md b/docs/api/carbonio-ui-preview.previewitem.md
@@ -11,11 +11,13 @@ Define an item for the preview. It can be of type 'image' or 'pdf'. The id is re
 ```typescript
 export type PreviewItem = ((MakeOptional<Omit<ImagePreviewProps, 'show'>, 'onClose'> & {
     previewType: 'image';
+}) | (MakeOptional<Omit<VideoPreviewProps, 'show'>, 'onClose'> & {
+    previewType: 'video';
 }) | (MakeOptional<Omit<PdfPreviewProps, 'show'>, 'onClose'> & {
     previewType: 'pdf';
 })) & {
     id: string;
 };
 ```
-**References:** [MakeOptional](./carbonio-ui-preview.makeoptional.md)<!-- -->, [ImagePreviewProps](./carbonio-ui-preview.imagepreviewprops.md)<!-- -->, [PdfPreviewProps](./carbonio-ui-preview.pdfpreviewprops.md)
+**References:** [MakeOptional](./carbonio-ui-preview.makeoptional.md)<!-- -->, [ImagePreviewProps](./carbonio-ui-preview.imagepreviewprops.md)<!-- -->, [VideoPreviewProps](./carbonio-ui-preview.videopreviewprops.md)<!-- -->, [PdfPreviewProps](./carbonio-ui-preview.pdfpreviewprops.md)
 
diff --git a/docs/api/carbonio-ui-preview.previewwrapper.md b/docs/api/carbonio-ui-preview.previewwrapper.md
@@ -4,7 +4,7 @@
 
 ## PreviewWrapper variable
 
-Show the preview for either an image or a pdf. This component is just a wrapper on the two specific preview components.
+Show the preview for a video, an image or a pdf. This component is just a wrapper on the two specific preview components.
 
 **Signature:**
 

diff --git a/docs/api/carbonio-ui-preview.previewwrapperprops.md b/docs/api/carbonio-ui-preview.previewwrapperprops.md
@@ -11,7 +11,9 @@ export type PreviewWrapperProps = (ImagePreviewProps & {
     previewType: 'image';
 }) | (PdfPreviewProps & {
     previewType: 'pdf';
+}) | (VideoPreviewProps & {
+    previewType: 'video';
 });
 ```
-**References:** [ImagePreviewProps](./carbonio-ui-preview.imagepreviewprops.md)<!-- -->, [PdfPreviewProps](./carbonio-ui-preview.pdfpreviewprops.md)
+**References:** [ImagePreviewProps](./carbonio-ui-preview.imagepreviewprops.md)<!-- -->, [PdfPreviewProps](./carbonio-ui-preview.pdfpreviewprops.md)<!-- -->, [VideoPreviewProps](./carbonio-ui-preview.videopreviewprops.md)
 
diff --git a/docs/api/carbonio-ui-preview.videopreviewprops.errorlabel.md b/docs/api/carbonio-ui-preview.videopreviewprops.errorlabel.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@zextras/carbonio-ui-preview](./carbonio-ui-preview.md) &gt; [VideoPreviewProps](./carbonio-ui-preview.videopreviewprops.md) &gt; [errorLabel](./carbonio-ui-preview.videopreviewprops.errorlabel.md)
+
+## VideoPreviewProps.errorLabel property
+
+Label shown when the preview cannot be shown
+
+**Signature:**
+
+```typescript
+errorLabel?: string;
+```
diff --git a/docs/api/carbonio-ui-preview.videopreviewprops.md b/docs/api/carbonio-ui-preview.videopreviewprops.md
@@ -0,0 +1,94 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@zextras/carbonio-ui-preview](./carbonio-ui-preview.md) &gt; [VideoPreviewProps](./carbonio-ui-preview.videopreviewprops.md)
+
+## VideoPreviewProps interface
+
+**Signature:**
+
+```typescript
+export interface VideoPreviewProps extends Omit<PreviewNavigatorProps, 'onOverlayClick'> 
+```
+**Extends:** Omit&lt;[PreviewNavigatorProps](./carbonio-ui-preview.previewnavigatorprops.md)<!-- -->, 'onOverlayClick'&gt;
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[errorLabel?](./carbonio-ui-preview.videopreviewprops.errorlabel.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+_(Optional)_ Label shown when the preview cannot be shown
+
+
+</td></tr>
+<tr><td>
+
+[mimeType?](./carbonio-ui-preview.videopreviewprops.mimetype.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+_(Optional)_ File mime type
+
+
+</td></tr>
+<tr><td>
+
+[src](./carbonio-ui-preview.videopreviewprops.src.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+Preview video source
+
+
+</td></tr>
+</tbody></table>
diff --git a/docs/api/carbonio-ui-preview.videopreviewprops.mimetype.md b/docs/api/carbonio-ui-preview.videopreviewprops.mimetype.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@zextras/carbonio-ui-preview](./carbonio-ui-preview.md) &gt; [VideoPreviewProps](./carbonio-ui-preview.videopreviewprops.md) &gt; [mimeType](./carbonio-ui-preview.videopreviewprops.mimetype.md)
+
+## VideoPreviewProps.mimeType property
+
+File mime type
+
+**Signature:**
+
+```typescript
+mimeType?: string;
+```
diff --git a/docs/api/carbonio-ui-preview.videopreviewprops.src.md b/docs/api/carbonio-ui-preview.videopreviewprops.src.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@zextras/carbonio-ui-preview](./carbonio-ui-preview.md) &gt; [VideoPreviewProps](./carbonio-ui-preview.videopreviewprops.md) &gt; [src](./carbonio-ui-preview.videopreviewprops.src.md)
+
+## VideoPreviewProps.src property
+
+Preview video source
+
+**Signature:**
+
+```typescript
+src: string;
+```
diff --git a/etc/carbonio-ui-preview.api.md b/etc/carbonio-ui-preview.api.md
@@ -4,9 +4,8 @@
 
 ```ts
 
-import { ForwardRefExoticComponent } from 'react';
 import * as React_2 from 'react';
-import { RefAttributes } from 'react';
+import { default as React_3 } from 'react';
 import { Theme } from '@zextras/carbonio-design-system';
 import { TooltipProps } from '@zextras/carbonio-design-system';
 
@@ -31,7 +30,7 @@ interface HeaderProps {
 }
 
 // @public
-export const ImagePreview: ForwardRefExoticComponent<ImagePreviewProps & RefAttributes<HTMLDivElement>>;
+export const ImagePreview: React_3.ForwardRefExoticComponent<ImagePreviewProps & React_3.RefAttributes<HTMLDivElement>>;
 
 // Warning: (ae-forgotten-export) The symbol "PreviewNavigatorProps" needs to be exported by the entry point index.d.ts
 //
@@ -84,10 +83,13 @@ interface PreviewCriteriaAlternativeContentProps {
 }
 
 // Warning: (ae-forgotten-export) The symbol "MakeOptional" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "VideoPreviewProps" needs to be exported by the entry point index.d.ts
 //
 // @public
 export type PreviewItem = ((MakeOptional<Omit<ImagePreviewProps, 'show'>, 'onClose'> & {
     previewType: 'image';
+}) | (MakeOptional<Omit<VideoPreviewProps, 'show'>, 'onClose'> & {
+    previewType: 'video';
 }) | (MakeOptional<Omit<PdfPreviewProps, 'show'>, 'onClose'> & {
     previewType: 'pdf';
 })) & {
@@ -130,9 +132,18 @@ export type PreviewWrapperProps = (ImagePreviewProps & {
     previewType: 'image';
 }) | (PdfPreviewProps & {
     previewType: 'pdf';
+}) | (VideoPreviewProps & {
+    previewType: 'video';
 });
 
 // @public
 export const usePreview: () => PreviewManagerContextType;
 
+// @public (undocumented)
+interface VideoPreviewProps extends Omit<PreviewNavigatorProps, 'onOverlayClick'> {
+    errorLabel?: string;
+    mimeType?: string;
+    src: string;
+}
+
 ```
diff --git a/examples/app/package-lock.json b/examples/app/package-lock.json
diff --git a/examples/app/src/App.tsx b/examples/app/src/App.tsx
@@ -30,6 +30,13 @@ const items = [
     src: 'https://pdfobject.com/pdf/sample.pdf',
     filename: 'A sample PDF file',
     extension: 'pdf'
+  },
+  {
+    previewType: 'video',
+    id: 'video-file',
+    src: 'https://github.com/webrtc/samples/raw/gh-pages/src/video/chrome.mp4',
+    filename: 'A sample video',
+    extension: 'mp4'
   }
 ] satisfies PreviewItem[];
 

diff --git a/jest.config.ts b/jest.config.ts
@@ -21,7 +21,7 @@ const config: Config = {
 	// cacheDirectory: "/tmp/jest_rs",
 
 	// Automatically clear mock calls, instances, contexts and results before every test
-	clearMocks: true,
+	// clearMocks: true,
 
 	// Indicates whether the coverage information should be collected while executing the test
 	collectCoverage: true,
@@ -124,7 +124,7 @@ const config: Config = {
 	// resolver: undefined,
 
 	// Automatically restore mock state and implementation before every test
-	// restoreMocks: true,
+	restoreMocks: true,
 
 	// The root directory that Jest should scan for tests and modules within
 	// rootDir: undefined,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,6 @@
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/jest": "^29.5.12",
-		"@types/lodash": "^4.17.4",
 		"@types/node": "^18.19.34",
 		"@types/react": "^17.0.80",
 		"@types/react-dom": "^17.0.25",
@@ -82,7 +81,6 @@
 	},
 	"peerDependencies": {
 		"@zextras/carbonio-design-system": ">=1.0.0",
-		"lodash": "^4.17.21",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"
 	},

diff --git a/src/preview/FocusWithin.tsx b/src/preview/FocusWithin.tsx
@@ -7,8 +7,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import * as React from 'react';
 
-import { last } from 'lodash';
-
 import styles from './FocusWithin.module.css';
 
 interface FocusContainerProps {
@@ -28,7 +26,8 @@ const FocusWithin = ({ children, returnFocus = true }: FocusContainerProps): Rea
 
 	const onStartSentinelFocus = useCallback(() => {
 		if (contentRef.current) {
-			const node = last(contentRef.current.querySelectorAll<HTMLElement>('[tabindex]'));
+			const nodeListOf = contentRef.current.querySelectorAll<HTMLElement>('[tabindex]');
+			const node = nodeListOf[nodeListOf.length - 1];
 			node?.focus();
 		}
 	}, []);