Fix lightbox for tap-to-view GIFs

This commit is contained in:
Fedor Indutny 2021-09-02 14:38:46 -07:00 committed by GitHub
parent ddc591e962
commit 30075f18fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 16 deletions

View file

@ -170,22 +170,29 @@ export function Lightbox({
};
}, [onKeyDown]);
const { attachment, contentType, loop = false, objectURL, message } =
media[selectedIndex] || {};
const isAttachmentGIF = isGIF([attachment]);
useEffect(() => {
playVideo();
if (videoElement && isViewOnce) {
videoElement.addEventListener('timeupdate', onTimeUpdate);
return () => {
videoElement.removeEventListener('timeupdate', onTimeUpdate);
};
if (!videoElement || !isViewOnce) {
return noop;
}
return noop;
}, [isViewOnce, onTimeUpdate, playVideo, videoElement]);
if (isAttachmentGIF) {
return noop;
}
videoElement.addEventListener('timeupdate', onTimeUpdate);
return () => {
videoElement.removeEventListener('timeupdate', onTimeUpdate);
};
}, [isViewOnce, isAttachmentGIF, onTimeUpdate, playVideo, videoElement]);
const { attachment, contentType, loop = false, objectURL, message } =
media[selectedIndex] || {};
const caption = attachment?.caption;
let content: JSX.Element;
@ -239,7 +246,8 @@ export function Lightbox({
);
}
} else if (isVideoTypeSupported) {
const shouldLoop = loop || isGIF([attachment]) || isViewOnce;
const shouldLoop = loop || isAttachmentGIF || isViewOnce;
content = (
<video
className="Lightbox__object"

View file

@ -1062,6 +1062,25 @@ story.add('TapToView Video', () => {
return renderBothDirections(props);
});
story.add('TapToView GIF', () => {
const props = createProps({
attachments: [
{
contentType: VIDEO_MP4,
flags: SignalService.AttachmentPointer.Flags.GIF,
fileName: 'cat-gif.mp4',
url: '/fixtures/cat-gif.mp4',
width: 400,
height: 332,
},
],
isTapToView: true,
status: 'sent',
});
return renderBothDirections(props);
});
story.add('TapToView Expired', () => {
const props = createProps({
attachments: [

View file

@ -2122,11 +2122,6 @@ export class Message extends React.PureComponent<Props, State> {
const isAttachmentPending = this.isAttachmentPending();
if (isGIF(attachments)) {
window.log.info("<Message> handleOpen: lightbox doesn't open for GIFs");
return;
}
if (isTapToView) {
if (isAttachmentPending) {
window.log.info(