Batch of views getting replaceableComponent decorators

src/components/views/voip/CallContainer.tsx

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

src/components/views/voip/CallPreview.tsx

@@ -26,6 +26,7 @@ import PersistentApp from "../elements/PersistentApp";
 import SettingsStore from "../../../settings/SettingsStore";
 import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const SHOW_CALL_IN_STATES = [
     CallState.Connected,
@@ -85,6 +86,7 @@ function getPrimarySecondaryCalls(calls: MatrixCall[]): [MatrixCall, MatrixCall[
  * CallPreview 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.CallPreview")
 export default class CallPreview extends React.Component<IProps, IState> {
     private roomStoreToken: any;
     private dispatcherRef: string;

src/components/views/voip/CallView.tsx

@@ -31,6 +31,7 @@ import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} f
 import CallContextMenu from '../context_menus/CallContextMenu';
 import { avatarUrlForMember } from '../../../Avatar';
 import DialpadContextMenu from '../context_menus/DialpadContextMenu';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
         // The call for us to display
@@ -100,6 +101,7 @@ const BOTTOM_PADDING = 10;
 const BOTTOM_MARGIN_TOP_BOTTOM = 10; // top margin plus bottom margin
 const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
 
+@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

@@ -19,6 +19,7 @@ import React from 'react';
 import CallHandler from '../../../CallHandler';
 import CallView from './CallView';
 import dis from '../../../dispatcher/dispatcher';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     // What room we should display the call for
@@ -40,6 +41,7 @@ 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> {
     private dispatcherRef: string;
 

src/components/views/voip/DialPad.tsx

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

src/components/views/voip/DialPadModal.tsx

@@ -25,6 +25,7 @@ import dis from '../../../dispatcher/dispatcher';
 import Modal from "../../../Modal";
 import ErrorDialog from "../../views/dialogs/ErrorDialog";
 import CallHandler from "../../../CallHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     onFinished: (boolean) => void;
@@ -34,6 +35,7 @@ interface IState {
     value: string;
 }
 
+@replaceableComponent("views.voip.DialpadModal")
 export default class DialpadModal extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/voip/IncomingCallBox.tsx

@@ -25,6 +25,7 @@ import CallHandler from '../../../CallHandler';
 import RoomAvatar from '../avatars/RoomAvatar';
 import FormButton from '../elements/FormButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
 }
@@ -33,6 +34,7 @@ interface IState {
     incomingCall: any;
 }
 
+@replaceableComponent("views.voip.IncomingCallBox")
 export default class IncomingCallBox extends React.Component<IProps, IState> {
     private dispatcherRef: string;
 

src/components/views/voip/VideoFeed.tsx

@@ -18,6 +18,7 @@ import classnames from 'classnames';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import React, {createRef} from 'react';
 import SettingsStore from "../../../settings/SettingsStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export enum VideoFeedType {
     Local,
@@ -37,6 +38,7 @@ interface IProps {
     onResize?: (e: Event) => void,
 }
 
+@replaceableComponent("views.voip.VideoFeed")
 export default class VideoFeed extends React.Component<IProps> {
     private vid = createRef<HTMLVideoElement>();