diff --git a/src/components/PhotoSwipe/PhotoSwipe.tsx b/src/components/PhotoSwipe/PhotoSwipe.tsx index 62b2a21fd..1a5313b65 100644 --- a/src/components/PhotoSwipe/PhotoSwipe.tsx +++ b/src/components/PhotoSwipe/PhotoSwipe.tsx @@ -93,7 +93,7 @@ const Pre = styled.pre` padding: 7px 15px; `; -const LivePhotoBtn = styled.button` +const LivePhotoBtn = styled.button<{ disabled: boolean }>` position: absolute; bottom: 6vh; right: 6vh; @@ -104,12 +104,15 @@ const LivePhotoBtn = styled.button` border: none; border-radius: 10%; z-index: 10; + cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; + } `; const livePhotoDefaultOptions = { click: () => {}, hide: () => {}, show: () => {}, + loading: false, visible: false, }; @@ -582,11 +585,13 @@ function PhotoSwipe(props: Iprops) { await playVideo(video, image); }, visible: true, + loading: false, }); } else { setLivePhotoBtnOptions({ ...livePhotoDefaultOptions, visible: true, + loading: true, }); } @@ -820,6 +825,7 @@ function PhotoSwipe(props: Iprops) { onClick={livePhotoBtnOptions.click} onMouseEnter={livePhotoBtnOptions.show} onMouseLeave={livePhotoBtnOptions.hide} + disabled={livePhotoBtnOptions.loading} style={{ display: livePhotoBtnOptions.visible ? 'block'