Fix WebUI crash when a toot with a playing video gets deleted (#16384)

* Fix WebUI crash when a toot with a playing video gets deleted

* Fix pop-up player not closing the moment a status is deleted

2 files changed, 17 insertions, 7 deletions

diff --git a/app/javascript/mastodon/actions/picture_in_picture.js b/app/javascript/mastodon/actions/picture_in_picture.js
index 4085cb59e..33d8d57d4 100644
--- a/app/javascript/mastodon/actions/picture_in_picture.js
+++ b/app/javascript/mastodon/actions/picture_in_picture.js
@@ -22,13 +22,20 @@ export const PICTURE_IN_PICTURE_REMOVE = 'PICTURE_IN_PICTURE_REMOVE';
  * @param {MediaProps} props
  * @return {object}
  */
-export const deployPictureInPicture = (statusId, accountId, playerType, props) => ({
-  type: PICTURE_IN_PICTURE_DEPLOY,
-  statusId,
-  accountId,
-  playerType,
-  props,
-});
+export const deployPictureInPicture = (statusId, accountId, playerType, props) => {
+  return (dispatch, getState) => {
+    // Do not open a player for a toot that does not exist
+    if (getState().hasIn(['statuses', statusId])) {
+      dispatch({
+        type: PICTURE_IN_PICTURE_DEPLOY,
+        statusId,
+        accountId,
+        playerType,
+        props,
+      });
+    }
+  };
+};
 
 /*
  * @return {object}
diff --git a/app/javascript/mastodon/reducers/picture_in_picture.js b/app/javascript/mastodon/reducers/picture_in_picture.js
index 06cd8c5e8..48772ae7f 100644
--- a/app/javascript/mastodon/reducers/picture_in_picture.js
+++ b/app/javascript/mastodon/reducers/picture_in_picture.js
@@ -1,4 +1,5 @@
 import { PICTURE_IN_PICTURE_DEPLOY, PICTURE_IN_PICTURE_REMOVE } from 'mastodon/actions/picture_in_picture';
+import { TIMELINE_DELETE } from '../actions/timelines';
 
 const initialState = {
   statusId: null,
@@ -16,6 +17,8 @@ export default function pictureInPicture(state = initialState, action) {
     return { statusId: action.statusId, accountId: action.accountId, type: action.playerType, ...action.props };
   case PICTURE_IN_PICTURE_REMOVE:
     return { ...initialState };
+  case TIMELINE_DELETE:
+    return (state.statusId === action.id) ? { ...initialState } : state;
   default:
     return state;
   }