/
AssetVideo.tsx
81 lines (71 loc) · 1.74 KB
/
AssetVideo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import {
AdvancedImage,
AdvancedVideo,
placeholder,
responsive,
} from '@cloudinary/react'
import {CloudConfig, CloudinaryVideo, Transformation} from '@cloudinary/url-gen'
import {source} from '@cloudinary/url-gen/actions/overlay'
import {fill, scale, thumbnail} from '@cloudinary/url-gen/actions/resize'
import {Position} from '@cloudinary/url-gen/qualifiers'
import {compass} from '@cloudinary/url-gen/qualifiers/gravity'
import {image} from '@cloudinary/url-gen/qualifiers/source'
export type AssetVideoProps = {
publicId: string | undefined
width?: number
height?: number
isThumbnail?: boolean
forceImage?: boolean
}
const AssetVideo = ({
publicId,
width,
height,
isThumbnail = false,
forceImage = false,
}: AssetVideoProps) => {
const cloudinaryConfig = new CloudConfig({
cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUDNAME,
})
const video = new CloudinaryVideo(publicId, cloudinaryConfig)
if (isThumbnail) {
video
.resize(thumbnail().width(136).height(142))
.overlay(
source(
image('play-icon-white-png-8_jajw2z').transformation(
new Transformation().resize(scale().width(100)),
),
).position(new Position().gravity(compass('center'))),
)
.format('jpg')
return (
<div>
<AdvancedImage cldImg={video} />
</div>
)
}
video.resize(
fill()
.width(width ?? 600)
.height(height ?? 700),
)
if (forceImage) {
video.format('jpg')
return (
<div>
<AdvancedImage cldImg={video} />
</div>
)
}
return (
<div>
<AdvancedVideo
cldVid={video}
controls
plugins={[responsive(), placeholder()]}
/>
</div>
)
}
export default AssetVideo