Step 1: Remove all usage of @replaceableComponent

src/components/views/audio_messages/AudioPlayer.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { createRef, ReactNode, RefObject } from "react";
 
 import PlayPauseButton from "./PlayPauseButton";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { formatBytes } from "../../../utils/FormattingUtils";
 import DurationClock from "./DurationClock";
 import { _t } from "../../../languageHandler";
@@ -27,7 +26,6 @@ import AudioPlayerBase from "./AudioPlayerBase";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 
-@replaceableComponent("views.audio_messages.AudioPlayer")
 export default class AudioPlayer extends AudioPlayerBase {
     private playPauseRef: RefObject<PlayPauseButton> = createRef();
     private seekRef: RefObject<SeekBar> = createRef();

src/components/views/audio_messages/AudioPlayerBase.tsx

@@ -19,7 +19,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { Playback, PlaybackState } from "../../../audio/Playback";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { _t } from "../../../languageHandler";
 
 interface IProps {
@@ -35,7 +34,6 @@ interface IState {
     error?: boolean;
 }
 
-@replaceableComponent("views.audio_messages.AudioPlayerBase")
 export default abstract class AudioPlayerBase extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/audio_messages/Clock.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { HTMLProps } from "react";
 
 import { formatSeconds } from "../../../DateUtils";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export interface IProps extends Pick<HTMLProps<HTMLSpanElement>, "aria-live"> {
     seconds: number;
@@ -27,7 +26,6 @@ export interface IProps extends Pick<HTMLProps<HTMLSpanElement>, "aria-live"> {
  * Simply converts seconds into minutes and seconds. Note that hours will not be
  * displayed, making it possible to see "82:29".
  */
-@replaceableComponent("views.audio_messages.Clock")
 export default class Clock extends React.Component<IProps> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/DurationClock.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
 import { Playback } from "../../../audio/Playback";
 
@@ -31,7 +30,6 @@ interface IState {
 /**
  * A clock which shows a clip's maximum duration.
  */
-@replaceableComponent("views.audio_messages.DurationClock")
 export default class DurationClock extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 
 import { IRecordingUpdate, VoiceRecording } from "../../../audio/VoiceRecording";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
 
@@ -32,7 +31,6 @@ interface IState {
 /**
  * A clock for a live recording.
  */
-@replaceableComponent("views.audio_messages.LiveRecordingClock")
 export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
     private seconds = 0;
     private scheduledUpdate = new MarkedExecution(

src/components/views/audio_messages/LiveRecordingWaveform.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 
 import { IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording } from "../../../audio/VoiceRecording";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { arrayFastResample, arraySeed } from "../../../utils/arrays";
 import Waveform from "./Waveform";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
@@ -33,7 +32,6 @@ interface IState {
 /**
  * A waveform which shows the waveform of a live recording
  */
-@replaceableComponent("views.audio_messages.LiveRecordingWaveform")
 export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
     public static defaultProps = {
         progress: 1,

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { ReactNode } from "react";
 import classNames from "classnames";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import { Playback, PlaybackState } from "../../../audio/Playback";
@@ -35,7 +34,6 @@ interface IProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButto
  * Displays a play/pause button (activating the play/pause function of the recorder)
  * to be displayed in reference to a recording.
  */
-@replaceableComponent("views.audio_messages.PlayPauseButton")
 export default class PlayPauseButton extends React.PureComponent<IProps> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/PlaybackClock.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
 import { Playback, PlaybackState } from "../../../audio/Playback";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@@ -39,7 +38,6 @@ interface IState {
 /**
  * A clock for a playback of a recording.
  */
-@replaceableComponent("views.audio_messages.PlaybackClock")
 export default class PlaybackClock extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/PlaybackWaveform.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { arraySeed, arrayTrimFill } from "../../../utils/arrays";
 import Waveform from "./Waveform";
 import { Playback, PLAYBACK_WAVEFORM_SAMPLES } from "../../../audio/Playback";
@@ -34,7 +33,6 @@ interface IState {
 /**
  * A waveform which shows the waveform of a previously recorded recording
  */
-@replaceableComponent("views.audio_messages.PlaybackWaveform")
 export default class PlaybackWaveform extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/RecordingPlayback.tsx

@@ -18,12 +18,10 @@ import React, { ReactNode } from "react";
 
 import PlayPauseButton from "./PlayPauseButton";
 import PlaybackClock from "./PlaybackClock";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import PlaybackWaveform from "./PlaybackWaveform";
 import AudioPlayerBase from "./AudioPlayerBase";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 
-@replaceableComponent("views.audio_messages.RecordingPlayback")
 export default class RecordingPlayback extends AudioPlayerBase {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/audio_messages/SeekBar.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { ChangeEvent, CSSProperties, ReactNode } from "react";
 
 import { Playback, PlaybackState } from "../../../audio/Playback";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
 import { percentageOf } from "../../../utils/numbers";
 
@@ -43,7 +42,6 @@ interface ISeekCSS extends CSSProperties {
 
 const ARROW_SKIP_SECONDS = 5; // arbitrary
 
-@replaceableComponent("views.audio_messages.SeekBar")
 export default class SeekBar extends React.PureComponent<IProps, IState> {
     // We use an animation frame request to avoid overly spamming prop updates, even if we aren't
     // really using anything demanding on the CSS front.

src/components/views/audio_messages/Waveform.tsx

@@ -17,8 +17,6 @@ limitations under the License.
 import React, { CSSProperties } from "react";
 import classNames from "classnames";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 interface WaveformCSSProperties extends CSSProperties {
     '--barHeight': number;
 }
@@ -39,7 +37,6 @@ interface IState {
  * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
  * "filled", as a demonstration of the progress property.
  */
-@replaceableComponent("views.audio_messages.Waveform")
 export default class Waveform extends React.PureComponent<IProps, IState> {
     public static defaultProps = {
         progress: 1,