Fix video and audio playback to pause on window close

ts/components/AvatarLightbox.tsx

@@ -32,6 +32,7 @@ export function AvatarLightbox({
       i18n={i18n}
       isViewOnce
       media={[]}
+      playbackDisabled={false}
       saveAttachment={noop}
       toggleForwardMessagesModal={noop}
       onMediaPlaybackStart={noop}

ts/components/Lightbox.stories.tsx

@@ -66,6 +66,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
     media,
     saveAttachment: action('saveAttachment'),
     selectedIndex,
+    playbackDisabled: false,
     toggleForwardMessagesModal: action('toggleForwardMessagesModal'),
     onMediaPlaybackStart: noop,
     onPrevAttachment: () => {

ts/components/Lightbox.tsx

@@ -36,6 +36,7 @@ export type PropsType = {
   i18n: LocalizerType;
   isViewOnce?: boolean;
   media: ReadonlyArray<ReadonlyDeep<MediaItemType>>;
+  playbackDisabled: boolean;
   saveAttachment: SaveAttachmentActionCreatorType;
   selectedIndex: number;
   toggleForwardMessagesModal: (messageIds: ReadonlyArray<string>) => unknown;
@@ -82,6 +83,7 @@ export function Lightbox({
   saveAttachment,
   selectedIndex,
   toggleForwardMessagesModal,
+  playbackDisabled,
   onMediaPlaybackStart,
   onNextAttachment,
   onPrevAttachment,
@@ -250,6 +252,16 @@ export function Lightbox({
     }
   }, [videoElement, onMediaPlaybackStart]);
 
+  useEffect(() => {
+    if (!videoElement || videoElement.paused) {
+      return;
+    }
+
+    if (playbackDisabled) {
+      videoElement.pause();
+    }
+  }, [playbackDisabled, videoElement]);
+
   useEffect(() => {
     const div = document.createElement('div');
     document.body.appendChild(div);