Rewrite PIP state in Typescript (#27645)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/mastodon/reducers/index.ts

@@ -28,7 +28,7 @@ import { modalReducer } from './modal';
 import { notificationPolicyReducer } from './notification_policy';
 import { notificationRequestsReducer } from './notification_requests';
 import notifications from './notifications';
-import picture_in_picture from './picture_in_picture';
+import { pictureInPictureReducer } from './picture_in_picture';
 import polls from './polls';
 import push_notifications from './push_notifications';
 import { relationshipsReducer } from './relationships';
@@ -78,7 +78,7 @@ const reducers = {
   polls,
   trends,
   markers: markersReducer,
-  picture_in_picture,
+  picture_in_picture: pictureInPictureReducer,
   history,
   tags,
   followed_tags,

app/javascript/mastodon/reducers/picture_in_picture.js

@@ -1,26 +0,0 @@
-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,
-  accountId: null,
-  type: null,
-  src: null,
-  muted: false,
-  volume: 0,
-  currentTime: 0,
-};
-
-export default function pictureInPicture(state = initialState, action) {
-  switch(action.type) {
-  case PICTURE_IN_PICTURE_DEPLOY:
-    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;
-  }
-}

app/javascript/mastodon/reducers/picture_in_picture.ts

@@ -0,0 +1,56 @@
+import type { Reducer } from '@reduxjs/toolkit';
+
+import {
+  deployPictureInPictureAction,
+  removePictureInPicture,
+} from 'mastodon/actions/picture_in_picture';
+
+import { TIMELINE_DELETE } from '../actions/timelines';
+
+export interface PIPMediaProps {
+  src: string;
+  muted: boolean;
+  volume: number;
+  currentTime: number;
+  poster: string;
+  backgroundColor: string;
+  foregroundColor: string;
+  accentColor: string;
+}
+
+interface PIPStateWithValue extends Partial<PIPMediaProps> {
+  statusId: string;
+  accountId: string;
+  type: 'audio' | 'video';
+}
+
+interface PIPStateEmpty extends Partial<PIPMediaProps> {
+  type: null;
+}
+
+type PIPState = PIPStateWithValue | PIPStateEmpty;
+
+const initialState = {
+  type: null,
+  muted: false,
+  volume: 0,
+  currentTime: 0,
+};
+
+export const pictureInPictureReducer: Reducer<PIPState> = (
+  state = initialState,
+  action,
+) => {
+  if (deployPictureInPictureAction.match(action))
+    return {
+      statusId: action.payload.statusId,
+      accountId: action.payload.accountId,
+      type: action.payload.playerType,
+      ...action.payload.props,
+    };
+  else if (removePictureInPicture.match(action)) return initialState;
+  else if (action.type === TIMELINE_DELETE)
+    if (state.type && state.statusId === action.id) return initialState;
+
+  return state;
+};