Move voice message components to audio-generic directory

res/css/_components.scss

@@ -37,6 +37,9 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";
+@import "./views/audio_messages/_PlayPauseButton.scss";
+@import "./views/audio_messages/_PlaybackContainer.scss";
+@import "./views/audio_messages/_Waveform.scss";
 @import "./views/auth/_AuthBody.scss";
 @import "./views/auth/_AuthButtons.scss";
 @import "./views/auth/_AuthFooter.scss";
@@ -254,9 +257,6 @@
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
-@import "./views/voice_messages/_PlayPauseButton.scss";
-@import "./views/voice_messages/_PlaybackContainer.scss";
-@import "./views/voice_messages/_Waveform.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";

src/components/views/audio_messages/Clock.tsx

@@ -28,7 +28,7 @@ interface IState {
  * Simply converts seconds into minutes and seconds. Note that hours will not be
  * displayed, making it possible to see "82:29".
  */
-@replaceableComponent("views.voice_messages.Clock")
+@replaceableComponent("views.audio_messages.Clock")
 export default class Clock extends React.Component<IProps, IState> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -30,7 +30,7 @@ interface IState {
 /**
  * A clock for a live recording.
  */
-@replaceableComponent("views.voice_messages.LiveRecordingClock")
+@replaceableComponent("views.audio_messages.LiveRecordingClock")
 export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/LiveRecordingWaveform.tsx

@@ -32,7 +32,7 @@ interface IState {
 /**
  * A waveform which shows the waveform of a live recording
  */
-@replaceableComponent("views.voice_messages.LiveRecordingWaveform")
+@replaceableComponent("views.audio_messages.LiveRecordingWaveform")
 export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -33,7 +33,7 @@ interface IProps {
  * Displays a play/pause button (activating the play/pause function of the recorder)
  * to be displayed in reference to a recording.
  */
-@replaceableComponent("views.voice_messages.PlayPauseButton")
+@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

@@ -33,7 +33,7 @@ interface IState {
 /**
  * A clock for a playback of a recording.
  */
-@replaceableComponent("views.voice_messages.PlaybackClock")
+@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

@@ -33,7 +33,7 @@ interface IState {
 /**
  * A waveform which shows the waveform of a previously recorded recording
  */
-@replaceableComponent("views.voice_messages.PlaybackWaveform")
+@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

@@ -20,6 +20,7 @@ import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import PlaybackWaveform from "./PlaybackWaveform";
 import PlayPauseButton from "./PlayPauseButton";
 import PlaybackClock from "./PlaybackClock";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // Playback instance to render. Cannot change during component lifecycle: create
@@ -31,6 +32,7 @@ interface IState {
     playbackPhase: PlaybackState;
 }
 
+@replaceableComponent("views.audio_messages.RecordingPlayback")
 export default class RecordingPlayback extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/audio_messages/Waveform.tsx

@@ -34,7 +34,7 @@ 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.voice_messages.Waveform")
+@replaceableComponent("views.audio_messages.Waveform")
 export default class Waveform extends React.PureComponent<IProps, IState> {
     public static defaultProps = {
         progress: 1,

src/components/views/messages/MAudioBody.tsx

@@ -23,7 +23,7 @@ import InlineSpinner from '../elements/InlineSpinner';
 import {_t} from "../../../languageHandler";
 import {mediaFromContent} from "../../../customisations/Media";
 import {decryptFile} from "../../../utils/DecryptFile";
-import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent";
 
 interface IProps {

src/components/views/messages/MVoiceMessageBody.tsx

@@ -23,7 +23,7 @@ import InlineSpinner from '../elements/InlineSpinner';
 import {_t} from "../../../languageHandler";
 import {mediaFromContent} from "../../../customisations/Media";
 import {decryptFile} from "../../../utils/DecryptFile";
-import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent";
 
 interface IProps {

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -21,12 +21,12 @@ import {RecordingState, VoiceRecording} from "../../../voice/VoiceRecording";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import classNames from "classnames";
-import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
+import LiveRecordingWaveform from "../audio_messages/LiveRecordingWaveform";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
-import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
+import LiveRecordingClock from "../audio_messages/LiveRecordingClock";
 import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import {MsgType} from "matrix-js-sdk/src/@types/event";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";