feat: video preview type

Author: guoyunhe

src/Preview/index.tsx

@@ -121,8 +121,10 @@ export interface PreviewProps extends InternalPreviewConfig {
   };
   fallback?: string;
 
-  // Preview image
+  // Preview media
+  type?: 'image' | 'video';
   imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
+  videoCommonProps?: React.VideoHTMLAttributes<HTMLVideoElement>;
   width?: string | number;
   height?: string | number;
 
@@ -165,6 +167,7 @@ const Preview: React.FC<PreviewProps> = props => {
   const {
     prefixCls,
     rootClassName,
+    type = 'image',
     src,
     alt,
     imageInfo,
@@ -425,13 +428,15 @@ 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 src={src} width={props.width} height={props.height} />}
               </div>
 
               {/* Close Button */}
@@ -454,37 +459,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>
           );
         }}