Fix video playback in StoryViewer for multiple videos

This commit is contained in:
Josh Perez 2022-05-02 12:24:41 -04:00 committed by GitHub
parent e078a2ae54
commit a77861e5c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 1 deletions

View file

@ -1,7 +1,7 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useEffect } from 'react';
import React, { useEffect, useRef } from 'react';
import classNames from 'classnames';
import { Blurhash } from 'react-blurhash';
@ -23,6 +23,7 @@ import { isVideoTypeSupported } from '../util/GoogleChrome';
export type PropsType = {
readonly attachment?: AttachmentType;
readonly i18n: LocalizerType;
readonly isPaused?: boolean;
readonly isThumbnail?: boolean;
readonly label: string;
readonly moduleClassName?: string;
@ -33,6 +34,7 @@ export type PropsType = {
export const StoryImage = ({
attachment,
i18n,
isPaused,
isThumbnail,
label,
moduleClassName,
@ -44,12 +46,26 @@ export const StoryImage = ({
!isDownloading(attachment) &&
!hasNotResolved(attachment);
const videoRef = useRef<HTMLVideoElement | null>(null);
useEffect(() => {
if (shouldDownloadAttachment) {
queueStoryDownload(storyId);
}
}, [queueStoryDownload, shouldDownloadAttachment, storyId]);
useEffect(() => {
if (!videoRef.current) {
return;
}
if (isPaused) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
}, [isPaused]);
if (!attachment) {
return null;
}
@ -85,7 +101,9 @@ export const StoryImage = ({
autoPlay
className={getClassName('__image')}
controls={false}
key={attachment.url}
loop={shouldLoop}
ref={videoRef}
>
<source src={attachment.url} />
</video>