diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index 31b417993..2bf887111 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -151,10 +151,23 @@ const Icon = ({ export class Lightbox extends React.Component { private containerRef: HTMLDivElement | null = null; + private videoRef: HTMLVideoElement | null = null; + + private captureVideoBound: (element: HTMLVideoElement) => void; + private playVideoBound: () => void; + + constructor(props: Props) { + super(props); + + this.captureVideoBound = this.captureVideo.bind(this); + this.playVideoBound = this.playVideo.bind(this); + } public componentDidMount() { const useCapture = true; document.addEventListener('keyup', this.onKeyUp, useCapture); + + this.playVideo(); } public componentWillUnmount() { @@ -162,6 +175,22 @@ export class Lightbox extends React.Component { document.removeEventListener('keyup', this.onKeyUp, useCapture); } + public captureVideo(element: HTMLVideoElement) { + this.videoRef = element; + } + + public playVideo() { + if (!this.videoRef) { + return; + } + + if (this.videoRef.paused) { + this.videoRef.play(); + } else { + this.videoRef.pause(); + } + } + public render() { const { contentType, @@ -237,7 +266,13 @@ export class Lightbox extends React.Component { const isVideoTypeSupported = GoogleChrome.isVideoTypeSupported(contentType); if (isVideoTypeSupported) { return ( -