Showing
2 changed files
with
13 additions
and
0 deletions
| @@ -30,6 +30,10 @@ const HistoryBar: React.FC<HistoryBarProps> = ({ images, onSelect }) => { | @@ -30,6 +30,10 @@ const HistoryBar: React.FC<HistoryBarProps> = ({ images, onSelect }) => { | ||
| 30 | muted | 30 | muted |
| 31 | playsInline | 31 | playsInline |
| 32 | preload="metadata" | 32 | preload="metadata" |
| 33 | + onLoadedMetadata={(e) => { | ||
| 34 | + const video = e.target as HTMLVideoElement; | ||
| 35 | + video.currentTime = video.duration || 0; | ||
| 36 | + }} | ||
| 33 | /> | 37 | /> |
| 34 | ) : ( | 38 | ) : ( |
| 35 | <img | 39 | <img |
| @@ -22,6 +22,7 @@ const ImageCard: React.FC<ImageCardProps> = ({ image, onClick, onLike, currentUs | @@ -22,6 +22,7 @@ const ImageCard: React.FC<ImageCardProps> = ({ image, onClick, onLike, currentUs | ||
| 22 | 22 | ||
| 23 | const handleMouseEnter = () => { | 23 | const handleMouseEnter = () => { |
| 24 | if (videoRef.current) { | 24 | if (videoRef.current) { |
| 25 | + videoRef.current.currentTime = 0; | ||
| 25 | videoRef.current.play().catch(e => console.error("Video play failed", e)); | 26 | videoRef.current.play().catch(e => console.error("Video play failed", e)); |
| 26 | } | 27 | } |
| 27 | } | 28 | } |
| @@ -29,6 +30,13 @@ const ImageCard: React.FC<ImageCardProps> = ({ image, onClick, onLike, currentUs | @@ -29,6 +30,13 @@ const ImageCard: React.FC<ImageCardProps> = ({ image, onClick, onLike, currentUs | ||
| 29 | const handleMouseLeave = () => { | 30 | const handleMouseLeave = () => { |
| 30 | if (videoRef.current) { | 31 | if (videoRef.current) { |
| 31 | videoRef.current.pause(); | 32 | videoRef.current.pause(); |
| 33 | + videoRef.current.currentTime = videoRef.current.duration || 0; | ||
| 34 | + } | ||
| 35 | + } | ||
| 36 | + | ||
| 37 | + const handleVideoMetadata = () => { | ||
| 38 | + if (videoRef.current) { | ||
| 39 | + videoRef.current.currentTime = videoRef.current.duration || 0; | ||
| 32 | } | 40 | } |
| 33 | } | 41 | } |
| 34 | 42 | ||
| @@ -50,6 +58,7 @@ const ImageCard: React.FC<ImageCardProps> = ({ image, onClick, onLike, currentUs | @@ -50,6 +58,7 @@ const ImageCard: React.FC<ImageCardProps> = ({ image, onClick, onLike, currentUs | ||
| 50 | ref={videoRef} | 58 | ref={videoRef} |
| 51 | src={image.url} | 59 | src={image.url} |
| 52 | className={`w-full h-auto object-cover transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} | 60 | className={`w-full h-auto object-cover transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} |
| 61 | + onLoadedMetadata={handleVideoMetadata} | ||
| 53 | onLoadedData={() => setIsLoaded(true)} | 62 | onLoadedData={() => setIsLoaded(true)} |
| 54 | loop | 63 | loop |
| 55 | muted | 64 | muted |
-
Please register or login to post a comment