feat: video preview type

Author: guoyunhe

assets/preview.less

@@ -25,7 +25,8 @@
     }
   }
 
-  &-img {
+  &-img,
+  &-video {
     max-width: 100%;
     max-height: 70%;
   }

docs/demo/previewvideo.md

@@ -0,0 +1,8 @@
+---
+title: previewvideo
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/previewvideo.tsx"></code>

docs/examples/previewvideo.tsx

@@ -0,0 +1,42 @@
+import Image from '@rc-component/image';
+import * as React from 'react';
+import '../../assets/index.less';
+import { defaultIcons } from './common';
+
+export default function PreviewVideo() {
+  return (
+    <div>
+      <Image
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
+        preview={{
+          icons: defaultIcons,
+          type: 'video',
+          src: 'https://gw.alipayobjects.com/os/rmsportal/NTMlQdLIkPjOACXsdRrq.mp4',
+        }}
+        width={200}
+      />
+
+      <br />
+      <h1>PreviewGroup</h1>
+      <Image.PreviewGroup preview={{ icons: defaultIcons }}>
+        <Image
+          key={1}
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          preview={{
+            src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          }}
+          width={200}
+        />
+        <Image
+          key={2}
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          preview={{
+            type: 'video',
+            src: 'https://gw.alipayobjects.com/os/rmsportal/NTMlQdLIkPjOACXsdRrq.mp4',
+          }}
+          width={200}
+        />
+      </Image.PreviewGroup>
+    </div>
+  );
+}

src/Image.tsx

@@ -117,6 +117,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
   const canPreview = !!preview;
 
   const {
+    type: previewType = 'image',
     src: previewSrc,
     open: previewOpen,
     onOpenChange: onPreviewOpenChange,
@@ -178,8 +179,9 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     () => ({
       ...imgCommonProps,
       src,
+      type: previewType,
     }),
-    [src, imgCommonProps],
+    [src, imgCommonProps, previewType],
   );
 
   const imageId = useRegisterImage(canPreview, registerData);
@@ -266,6 +268,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           prefixCls={previewPrefixCls}
           onClose={onPreviewClose}
           mousePosition={mousePosition}
+          type={previewType}
           src={src}
           alt={alt}
           imageInfo={{ width, height }}

src/Preview/index.tsx

@@ -72,7 +72,8 @@ export interface InternalPreviewConfig {
   /** Better to use `classNames.root` instead */
   rootClassName?: string;
 
-  // Image
+  // Media
+  type?: 'image' | 'video';
   src?: string;
   alt?: string;
 
@@ -121,7 +122,7 @@ export interface PreviewProps extends InternalPreviewConfig {
   };
   fallback?: string;
 
-  // Preview image
+  // Preview media
   imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
   width?: string | number;
   height?: string | number;
@@ -165,6 +166,7 @@ const Preview: React.FC<PreviewProps> = props => {
   const {
     prefixCls,
     rootClassName,
+    type = 'image',
     src,
     alt,
     imageInfo,
@@ -425,13 +427,24 @@ const Preview: React.FC<PreviewProps> = props => {
               {/* Body */}
               <div className={classnames(`${prefixCls}-body`, classNames.body)} style={bodyStyle}>
                 {/* Preview Image */}
-                {imageRender
-                  ? imageRender(imgNode, {
-                      transform,
-                      image,
-                      ...(groupContext ? { current } : {}),
-                    })
-                  : imgNode}
+                {type === 'image' &&
+                  (imageRender
+                    ? imageRender(imgNode, {
+                        transform,
+                        image,
+                        ...(groupContext ? { current } : {}),
+                      })
+                    : imgNode)}
+                {type === 'video' && (
+                  <video
+                    className={`${prefixCls}-video`}
+                    src={src}
+                    width={props.width}
+                    height={props.height}
+                    controls
+                    autoPlay
+                  />
+                )}
               </div>
 
               {/* Close Button */}
@@ -454,37 +467,38 @@ const Preview: React.FC<PreviewProps> = props => {
                 />
               )}
 
-              {/* Footer */}
-              <Footer
-                prefixCls={prefixCls}
-                showProgress={showOperationsProgress}
-                current={current}
-                count={count}
-                showSwitch={showLeftOrRightSwitches}
-                // Style
-                classNames={classNames}
-                styles={styles}
-                // Render
-                image={image}
-                transform={transform}
-                icons={icons}
-                countRender={countRender}
-                actionsRender={actionsRender}
-                // Scale
-                scale={scale}
-                minScale={minScale}
-                maxScale={maxScale}
-                // Actions
-                onActive={onActive}
-                onFlipY={onFlipY}
-                onFlipX={onFlipX}
-                onRotateLeft={onRotateLeft}
-                onRotateRight={onRotateRight}
-                onZoomOut={onZoomOut}
-                onZoomIn={onZoomIn}
-                onClose={onClose}
-                onReset={onReset}
-              />
+              {type === 'image' && (
+                <Footer
+                  prefixCls={prefixCls}
+                  showProgress={showOperationsProgress}
+                  current={current}
+                  count={count}
+                  showSwitch={showLeftOrRightSwitches}
+                  // Style
+                  classNames={classNames}
+                  styles={styles}
+                  // Render
+                  image={image}
+                  transform={transform}
+                  icons={icons}
+                  countRender={countRender}
+                  actionsRender={actionsRender}
+                  // Scale
+                  scale={scale}
+                  minScale={minScale}
+                  maxScale={maxScale}
+                  // Actions
+                  onActive={onActive}
+                  onFlipY={onFlipY}
+                  onFlipX={onFlipX}
+                  onRotateLeft={onRotateLeft}
+                  onRotateRight={onRotateRight}
+                  onZoomOut={onZoomOut}
+                  onZoomIn={onZoomIn}
+                  onClose={onClose}
+                  onReset={onReset}
+                />
+              )}
             </div>
           );
         }}

src/PreviewGroup.tsx

@@ -67,7 +67,7 @@ const Group: React.FC<PreviewGroupProps> = ({
   const [keepOpenIndex, setKeepOpenIndex] = useState(false);
 
   // >>> Image
-  const { src, ...imgCommonProps } = mergedItems[current]?.data || {};
+  const { src, type, ...imgCommonProps } = mergedItems[current]?.data || {};
   // >>> Visible
   const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen, {
     value: previewOpen,
@@ -136,6 +136,7 @@ const Group: React.FC<PreviewGroupProps> = ({
         mousePosition={mousePosition}
         imgCommonProps={imgCommonProps}
         src={src}
+        type={type}
         fallback={fallback}
         icons={icons}
         current={current}

src/interface.ts

@@ -13,7 +13,7 @@ export type ImageElementProps = Pick<
   | 'srcSet'
   | 'useMap'
   | 'alt'
->;
+> & { type?: 'image' | 'video' };
 
 export type PreviewImageElementProps = {
   data: ImageElementProps;