diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index c94e62857..662706020 100644 --- a/src/components/PhotoFrame.tsx +++ b/src/components/PhotoFrame.tsx @@ -101,6 +101,7 @@ const PhotoFrame = ({ const filteredDataRef = useRef([]); const filteredData = filteredDataRef?.current ?? []; const router = useRouter(); + const [livePhotoLoaded, setLivePhotoLoaded] = useState(false); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { @@ -241,6 +242,28 @@ const PhotoFrame = ({ } }, [open]); + useEffect(() => { + const livePhotoVideo: HTMLVideoElement = + document.querySelector('video'); + const livePhotoBtn: HTMLButtonElement = + document.querySelector('.live-photo-btn'); + if (livePhotoVideo && livePhotoBtn) { + livePhotoBtn.addEventListener('mouseout', function () { + livePhotoVideo.pause(); + }); + livePhotoBtn.addEventListener('mouseover', function () { + livePhotoVideo.play().catch(() => { + livePhotoVideo.pause(); + }); + }); + livePhotoBtn.addEventListener('click', function () { + livePhotoVideo.play().catch(() => { + livePhotoVideo.pause(); + }); + }); + } + }, [livePhotoLoaded]); + const updateURL = (index: number) => (url: string) => { files[index] = { ...files[index], @@ -301,11 +324,34 @@ const PhotoFrame = ({ } else if (files[index].metadata.fileType === FILE_TYPE.LIVE_PHOTO) { if (await isPlaybackPossible(url)) { files[index].html = ` - - `; +