Fix video and audio playback to pause on window close

ts/state/ducks/lightbox.ts

@@ -49,11 +49,14 @@ export type LightboxStateType =
       hasPrevMessage: boolean;
       hasNextMessage: boolean;
       selectedIndex: number | undefined;
+      playbackDisabled: boolean;
     };
 
 const CLOSE_LIGHTBOX = 'lightbox/CLOSE';
 const SHOW_LIGHTBOX = 'lightbox/SHOW';
 const SET_SELECTED_LIGHTBOX_INDEX = 'lightbox/SET_SELECTED_LIGHTBOX_INDEX';
+const SET_LIGHTBOX_PLAYBACK_DISABLED =
+  'lightbox/SET_LIGHTBOX_PLAYBACK_DISABLED';
 
 type CloseLightboxActionType = ReadonlyDeep<{
   type: typeof CLOSE_LIGHTBOX;
@@ -71,6 +74,11 @@ type ShowLightboxActionType = {
   };
 };
 
+type SetLightboxPlaybackDisabledActionType = ReadonlyDeep<{
+  type: typeof SET_LIGHTBOX_PLAYBACK_DISABLED;
+  payload: boolean;
+}>;
+
 type SetSelectedLightboxIndexActionType = ReadonlyDeep<{
   type: typeof SET_SELECTED_LIGHTBOX_INDEX;
   payload: number;
@@ -83,7 +91,8 @@ type LightboxActionType =
   | MessageDeletedActionType
   | MessageExpiredActionType
   | ShowLightboxActionType
-  | SetSelectedLightboxIndexActionType;
+  | SetSelectedLightboxIndexActionType
+  | SetLightboxPlaybackDisabledActionType;
 
 function closeLightbox(): ThunkAction<
   void,
@@ -115,6 +124,28 @@ function closeLightbox(): ThunkAction<
   };
 }
 
+function setPlaybackDisabled(
+  playbackDisabled: boolean
+): ThunkAction<
+  void,
+  RootStateType,
+  unknown,
+  SetLightboxPlaybackDisabledActionType
+> {
+  return (dispatch, getState) => {
+    const { lightbox } = getState();
+
+    if (!lightbox.isShowingLightbox) {
+      return;
+    }
+
+    dispatch({
+      type: SET_LIGHTBOX_PLAYBACK_DISABLED,
+      payload: playbackDisabled,
+    });
+  };
+}
+
 function showLightboxWithMedia(
   selectedIndex: number | undefined,
   media: ReadonlyArray<ReadonlyDeep<MediaItemType>>
@@ -340,6 +371,7 @@ function showLightbox(opts: {
           older.length > 0 && filterValidAttachments(older[0]).length > 0,
         hasNextMessage:
           newer.length > 0 && filterValidAttachments(newer[0]).length > 0,
+        playbackDisabled: false,
       },
     });
   };
@@ -481,6 +513,7 @@ export const actions = {
   showLightboxForPrevMessage,
   showLightboxForNextMessage,
   setSelectedLightboxIndex,
+  setPlaybackDisabled,
 };
 
 export const useLightboxActions = (): BoundActionCreatorsMapObject<
@@ -505,6 +538,7 @@ export function reducer(
     return {
       ...action.payload,
       isShowingLightbox: true,
+      playbackDisabled: false,
     };
   }
 
@@ -522,6 +556,17 @@ export function reducer(
     };
   }
 
+  if (action.type === SET_LIGHTBOX_PLAYBACK_DISABLED) {
+    if (!state.isShowingLightbox) {
+      return state;
+    }
+
+    return {
+      ...state,
+      playbackDisabled: action.payload,
+    };
+  }
+
   if (
     action.type === MESSAGE_CHANGED ||
     action.type === MESSAGE_DELETED ||

ts/state/selectors/lightbox.ts

@@ -46,3 +46,8 @@ export const getHasNextMessage = createSelector(
   getLightboxState,
   (state): boolean => state.isShowingLightbox && state.hasNextMessage
 );
+
+export const getPlaybackDisabled = createSelector(
+  getLightboxState,
+  (state): boolean => state.isShowingLightbox && state.playbackDisabled
+);

ts/state/smart/Lightbox.tsx

@@ -21,6 +21,7 @@ import {
   getMedia,
   getHasPrevMessage,
   getHasNextMessage,
+  getPlaybackDisabled,
   getSelectedIndex,
   shouldShowLightbox,
 } from '../selectors/lightbox';
@@ -50,6 +51,7 @@ export function SmartLightbox(): JSX.Element | null {
   const hasPrevMessage = useSelector<StateType, boolean>(getHasPrevMessage);
   const hasNextMessage = useSelector<StateType, boolean>(getHasNextMessage);
   const selectedIndex = useSelector<StateType, number>(getSelectedIndex);
+  const playbackDisabled = useSelector<StateType, boolean>(getPlaybackDisabled);
 
   const onPrevAttachment = useCallback(() => {
     if (selectedIndex <= 0) {
@@ -93,6 +95,7 @@ export function SmartLightbox(): JSX.Element | null {
       i18n={i18n}
       isViewOnce={isViewOnce}
       media={media}
+      playbackDisabled={playbackDisabled}
       saveAttachment={saveAttachment}
       selectedIndex={selectedIndex || 0}
       toggleForwardMessagesModal={toggleForwardMessagesModal}