Skip to content

Commit a085f52

Browse files
guoyunheguoyunhe
committed
feat: video preview type
1 parent 872e729 commit a085f52

File tree

6 files changed

+103
-43
lines changed

6 files changed

+103
-43
lines changed

‎docs/demo/previewvideo.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: previewvideo
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/previewvideo.tsx"></code>

‎docs/examples/previewvideo.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Image from '@rc-component/image';
2+
import * as React from 'react';
3+
import '../../assets/index.less';
4+
import { defaultIcons } from './common';
5+
6+
export default function PreviewVideo() {
7+
return (
8+
<div>
9+
<Image
10+
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
11+
preview={{
12+
icons: defaultIcons,
13+
type: 'video',
14+
src: 'https://gw.alipayobjects.com/os/rmsportal/NTMlQdLIkPjOACXsdRrq.mp4',
15+
}}
16+
width={200}
17+
/>
18+
19+
<br />
20+
<h1>PreviewGroup</h1>
21+
<Image.PreviewGroup preview={{ icons: defaultIcons }}>
22+
<Image
23+
key={1}
24+
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
25+
preview={{
26+
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
27+
}}
28+
width={200}
29+
/>
30+
<Image
31+
key={2}
32+
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
33+
preview={{
34+
type: 'video',
35+
src: 'https://gw.alipayobjects.com/os/rmsportal/NTMlQdLIkPjOACXsdRrq.mp4',
36+
}}
37+
width={200}
38+
/>
39+
</Image.PreviewGroup>
40+
</div>
41+
);
42+
}

‎src/Image.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
117117
const canPreview = !!preview;
118118

119119
const {
120+
type: previewType = 'image',
120121
src: previewSrc,
121122
open: previewOpen,
122123
onOpenChange: onPreviewOpenChange,
@@ -178,8 +179,9 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
178179
() => ({
179180
...imgCommonProps,
180181
src,
182+
type: previewType,
181183
}),
182-
[src, imgCommonProps],
184+
[src, imgCommonProps, previewType],
183185
);
184186

185187
const imageId = useRegisterImage(canPreview, registerData);
@@ -266,6 +268,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
266268
prefixCls={previewPrefixCls}
267269
onClose={onPreviewClose}
268270
mousePosition={mousePosition}
271+
type={previewType}
269272
src={src}
270273
alt={alt}
271274
imageInfo={{ width, height }}

‎src/Preview/index.tsx‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ export interface InternalPreviewConfig {
7272
/** Better to use `classNames.root` instead */
7373
rootClassName?: string;
7474

75-
// Image
75+
// Media
76+
type?: 'image' | 'video';
7677
src?: string;
7778
alt?: string;
7879

@@ -121,8 +122,9 @@ export interface PreviewProps extends InternalPreviewConfig {
121122
};
122123
fallback?: string;
123124

124-
// Preview image
125+
// Preview media
125126
imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
127+
videoCommonProps?: React.VideoHTMLAttributes<HTMLVideoElement>;
126128
width?: string | number;
127129
height?: string | number;
128130

@@ -165,6 +167,7 @@ const Preview: React.FC<PreviewProps> = props => {
165167
const {
166168
prefixCls,
167169
rootClassName,
170+
type = 'image',
168171
src,
169172
alt,
170173
imageInfo,
@@ -425,13 +428,15 @@ const Preview: React.FC<PreviewProps> = props => {
425428
{/* Body */}
426429
<div className={classnames(`${prefixCls}-body`, classNames.body)} style={bodyStyle}>
427430
{/* Preview Image */}
428-
{imageRender
429-
? imageRender(imgNode, {
430-
transform,
431-
image,
432-
...(groupContext ? { current } : {}),
433-
})
434-
: imgNode}
431+
{type === 'image' &&
432+
(imageRender
433+
? imageRender(imgNode, {
434+
transform,
435+
image,
436+
...(groupContext ? { current } : {}),
437+
})
438+
: imgNode)}
439+
{type === 'video' && <video src={src} width={props.width} height={props.height} controls autoPlay />}
435440
</div>
436441

437442
{/* Close Button */}
@@ -454,37 +459,38 @@ const Preview: React.FC<PreviewProps> = props => {
454459
/>
455460
)}
456461

457-
{/* Footer */}
458-
<Footer
459-
prefixCls={prefixCls}
460-
showProgress={showOperationsProgress}
461-
current={current}
462-
count={count}
463-
showSwitch={showLeftOrRightSwitches}
464-
// Style
465-
classNames={classNames}
466-
styles={styles}
467-
// Render
468-
image={image}
469-
transform={transform}
470-
icons={icons}
471-
countRender={countRender}
472-
actionsRender={actionsRender}
473-
// Scale
474-
scale={scale}
475-
minScale={minScale}
476-
maxScale={maxScale}
477-
// Actions
478-
onActive={onActive}
479-
onFlipY={onFlipY}
480-
onFlipX={onFlipX}
481-
onRotateLeft={onRotateLeft}
482-
onRotateRight={onRotateRight}
483-
onZoomOut={onZoomOut}
484-
onZoomIn={onZoomIn}
485-
onClose={onClose}
486-
onReset={onReset}
487-
/>
462+
{type === 'image' && (
463+
<Footer
464+
prefixCls={prefixCls}
465+
showProgress={showOperationsProgress}
466+
current={current}
467+
count={count}
468+
showSwitch={showLeftOrRightSwitches}
469+
// Style
470+
classNames={classNames}
471+
styles={styles}
472+
// Render
473+
image={image}
474+
transform={transform}
475+
icons={icons}
476+
countRender={countRender}
477+
actionsRender={actionsRender}
478+
// Scale
479+
scale={scale}
480+
minScale={minScale}
481+
maxScale={maxScale}
482+
// Actions
483+
onActive={onActive}
484+
onFlipY={onFlipY}
485+
onFlipX={onFlipX}
486+
onRotateLeft={onRotateLeft}
487+
onRotateRight={onRotateRight}
488+
onZoomOut={onZoomOut}
489+
onZoomIn={onZoomIn}
490+
onClose={onClose}
491+
onReset={onReset}
492+
/>
493+
)}
488494
</div>
489495
);
490496
}}

‎src/PreviewGroup.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const Group: React.FC<PreviewGroupProps> = ({
6767
const [keepOpenIndex, setKeepOpenIndex] = useState(false);
6868

6969
// >>> Image
70-
const { src, ...imgCommonProps } = mergedItems[current]?.data || {};
70+
const { src, type, ...imgCommonProps } = mergedItems[current]?.data || {};
7171
// >>> Visible
7272
const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen, {
7373
value: previewOpen,
@@ -136,6 +136,7 @@ const Group: React.FC<PreviewGroupProps> = ({
136136
mousePosition={mousePosition}
137137
imgCommonProps={imgCommonProps}
138138
src={src}
139+
type={type}
139140
fallback={fallback}
140141
icons={icons}
141142
current={current}

‎src/interface.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export type ImageElementProps = Pick<
1313
| 'srcSet'
1414
| 'useMap'
1515
| 'alt'
16-
>;
16+
> & { type: 'image' | 'video' };
1717

1818
export type PreviewImageElementProps = {
1919
data: ImageElementProps;

0 commit comments

Comments
 (0)