Step 1: Remove all usage of @replaceableComponent

src/components/views/voip/CallView.tsx

@@ -30,7 +30,6 @@ import VideoFeed from './VideoFeed';
 import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleButton from '../elements/AccessibleButton';
 import { avatarUrlForMember } from '../../../Avatar';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import DesktopCapturerSourcePicker from "../elements/DesktopCapturerSourcePicker";
 import Modal from '../../../Modal';
 import CallViewSidebar from './CallViewSidebar';
@@ -103,7 +102,6 @@ function exitFullscreen() {
     if (exitMethod) exitMethod.call(document);
 }
 
-@replaceableComponent("views.voip.CallView")
 export default class CallView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private contentRef = createRef<HTMLDivElement>();

src/components/views/voip/CallViewForRoom.tsx

@@ -21,7 +21,6 @@ import { Resizable } from "re-resizable";
 import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
 import CallView from './CallView';
 import ResizeNotifier from "../../../utils/ResizeNotifier";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // What room we should display the call for
@@ -40,7 +39,6 @@ interface IState {
  * Wrapper for CallView that always display the call in a given room,
  * or nothing if there is no call in that room.
  */
-@replaceableComponent("views.voip.CallViewForRoom")
 export default class CallViewForRoom extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/voip/DialPad.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import * as React from "react";
 
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { _t } from "../../../languageHandler";
 
 const BUTTONS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
@@ -66,7 +65,6 @@ interface IProps {
     onDialPress?: () => void;
 }
 
-@replaceableComponent("views.voip.DialPad")
 export default class Dialpad extends React.PureComponent<IProps> {
     render() {
         const buttonNodes = [];

src/components/views/voip/DialPadModal.tsx

@@ -20,7 +20,6 @@ import { createRef } from "react";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 import DialPad from './DialPad';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
 import CallHandler from "../../../CallHandler";
 
@@ -32,7 +31,6 @@ interface IState {
     value: string;
 }
 
-@replaceableComponent("views.voip.DialPadModal")
 export default class DialpadModal extends React.PureComponent<IProps, IState> {
     private numberEntryFieldRef: React.RefObject<Field> = createRef();
 

src/components/views/voip/PictureInPictureDragger.tsx

@@ -19,7 +19,6 @@ import React, { createRef } from 'react';
 import UIStore from '../../../stores/UIStore';
 import { lerp } from '../../../utils/AnimationUtils';
 import { MarkedExecution } from '../../../utils/MarkedExecution';
-import { replaceableComponent } from '../../../utils/replaceableComponent';
 
 const PIP_VIEW_WIDTH = 336;
 const PIP_VIEW_HEIGHT = 232;
@@ -56,7 +55,6 @@ interface IState {
  * PictureInPictureDragger shows a small version of CallView hovering over the UI in 'picture-in-picture'
  * (PiP mode). It displays the call(s) which is *not* in the room the user is currently viewing.
  */
-@replaceableComponent("views.voip.PictureInPictureDragger")
 export default class PictureInPictureDragger extends React.Component<IProps, IState> {
     private callViewWrapper = createRef<HTMLDivElement>();
     private initX = 0;

src/components/views/voip/PipContainer.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 import React from 'react';
 
 import PipView from './PipView';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
 
@@ -28,7 +27,6 @@ interface IState {
 
 }
 
-@replaceableComponent("views.voip.PiPContainer")
 export default class PiPContainer extends React.PureComponent<IProps, IState> {
     public render() {
         return <div className="mx_PiPContainer">

src/components/views/voip/PipView.tsx

@@ -26,7 +26,6 @@ import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
 import PersistentApp from "../elements/PersistentApp";
 import SettingsStore from "../../../settings/SettingsStore";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import PictureInPictureDragger from './PictureInPictureDragger';
 import dis from '../../../dispatcher/dispatcher';
 import { Action } from "../../../dispatcher/actions";
@@ -105,7 +104,6 @@ function getPrimarySecondaryCallsForPip(roomId: string): [MatrixCall, MatrixCall
  * and all widgets that are active but not shown in any other possible container.
  */
 
-@replaceableComponent("views.voip.PipView")
 export default class PipView extends React.Component<IProps, IState> {
     private roomStoreToken: EventSubscription;
     private settingsWatcherRef: string;

src/components/views/voip/VideoFeed.tsx

@@ -23,7 +23,6 @@ import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventType
 
 import SettingsStore from "../../../settings/SettingsStore";
 import MemberAvatar from "../avatars/MemberAvatar";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     call: MatrixCall;
@@ -48,7 +47,6 @@ interface IState {
     videoMuted: boolean;
 }
 
-@replaceableComponent("views.voip.VideoFeed")
 export default class VideoFeed extends React.PureComponent<IProps, IState> {
     private element: HTMLVideoElement;