Made the echo test popoutable

shared/js/ui/modal/echo-test/Controller.tsx

@@ -1,8 +1,5 @@
-import {spawnReactModal} from "tc-shared/ui/react-elements/Modal";
+import {spawnModal} from "tc-shared/ui/react-elements/Modal";
-import {InternalModal} from "tc-shared/ui/react-elements/internal-modal/Controller";
 import * as React from "react";
-import {Translatable} from "tc-shared/ui/react-elements/i18n";
-import {EchoTestEventRegistry, EchoTestModal} from "tc-shared/ui/modal/echo-test/Renderer";
 import {Registry} from "tc-shared/events";
 import {EchoTestEvents, TestState} from "tc-shared/ui/modal/echo-test/Definitions";
 import {ConnectionHandler} from "tc-shared/ConnectionHandler";
@@ -18,30 +15,13 @@ export function spawnEchoTestModal(connection: ConnectionHandler) {
 
     initializeController(connection, events);
 
-    const modal = spawnReactModal(class extends InternalModal {
+    const modal = spawnModal("echo-test", [ events.generateIpcDescription() ], { popedOut: false });
-        constructor() {
-            super();
-        }
-
-        renderBody(): React.ReactElement {
-            return (
-                <EchoTestEventRegistry.Provider value={events}>
-                    <EchoTestModal/>
-                </EchoTestEventRegistry.Provider>
-            );
-        }
-
-        renderTitle(): string | React.ReactElement<Translatable> {
-            return <Translatable>Voice echo test</Translatable>;
-        }
-    });
-
     events.on("action_close", () => {
         modal.destroy();
     });
 
-    modal.events.on("close", () => events.fire_react("notify_close"));
+    modal.getEvents().on("close", () => events.fire_react("notify_close"));
-    modal.events.on("destroy", () => {
+    modal.getEvents().on("destroy", () => {
         events.fire("notify_destroy");
         events.destroy();
     });

shared/js/ui/modal/echo-test/Renderer.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import {useContext, useState} from "react";
-import {Registry} from "tc-shared/events";
+import {IpcRegistryDescription, Registry} from "tc-shared/events";
 import {EchoTestEvents, TestState, VoiceConnectionState} from "./Definitions";
 import {Translatable, VariadicTranslatable} from "tc-shared/ui/react-elements/i18n";
 import {ClientIcon} from "svg-sprites/client-icons";
@@ -8,10 +8,11 @@ import {ClientIconRenderer} from "tc-shared/ui/react-elements/Icons";
 import {Checkbox} from "tc-shared/ui/react-elements/Checkbox";
 import {Button} from "tc-shared/ui/react-elements/Button";
 import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots";
+import {AbstractModal} from "tc-shared/ui/react-elements/modal/Definitions";
 
 const cssStyle = require("./Renderer.scss");
 
-export const EchoTestEventRegistry = React.createContext<Registry<EchoTestEvents>>(undefined);
+const EchoTestEventRegistry = React.createContext<Registry<EchoTestEvents>>(undefined);
 
 const VoiceStateOverlay = () => {
     const events = useContext(EchoTestEventRegistry);
@@ -235,7 +236,7 @@ const TroubleshootingSoundOverlay = () => {
     )
 }
 
-export const TestToggle = () => {
+const TestToggle = () => {
     const events = useContext(EchoTestEventRegistry);
 
     const [state, setState] = useState<"loading" | boolean>(() => {
@@ -255,7 +256,7 @@ export const TestToggle = () => {
     )
 }
 
-export const EchoTestModal = () => {
+const EchoTestModalRenderer = () => {
     const events = useContext(EchoTestEventRegistry);
 
     return (
@@ -291,3 +292,27 @@ export const EchoTestModal = () => {
         </div>
     );
 };
+
+class ModalEchoTest extends AbstractModal {
+    private readonly events: Registry<EchoTestEvents>;
+
+    constructor(events: IpcRegistryDescription<EchoTestEvents>) {
+        super();
+
+        this.events = Registry.fromIpcDescription(events);
+    }
+
+    renderBody(): React.ReactElement {
+        return (
+            <EchoTestEventRegistry.Provider value={this.events}>
+                <EchoTestModalRenderer />
+            </EchoTestEventRegistry.Provider>
+        );
+    }
+
+    renderTitle(): string | React.ReactElement<Translatable> {
+        return <Translatable>Voice echo test</Translatable>;
+    }
+}
+
+export = ModalEchoTest;

shared/js/ui/react-elements/external-modal/PopoutRenderer.scss

@@ -13,7 +13,8 @@ html, body {
     height: 100vh;
     width: 100vw;
 
-    background: #212529;
+    background: #19191b;
+    color: #999;
 }
 
 .container {

shared/js/ui/react-elements/modal/Definitions.ts

@@ -3,6 +3,7 @@ import {VideoViewerEvents} from "tc-shared/video-viewer/Definitions";
 import {ReactElement} from "react";
 import * as React from "react";
 import {ChannelEditEvents} from "tc-shared/ui/modal/channel-edit/Definitions";
+import {EchoTestEvents} from "tc-shared/ui/modal/echo-test/Definitions";
 
 export type ModalType = "error" | "warning" | "info" | "none";
 
@@ -112,6 +113,9 @@ export interface ModalConstructorArguments {
         /* events */ IpcRegistryDescription<ChannelEditEvents>,
         /* isChannelCreate */ boolean
     ],
+    "echo-test": [
+        /* events */ IpcRegistryDescription<EchoTestEvents>
+    ],
     "conversation": any,
     "css-editor": any,
     "channel-tree": any,

shared/js/ui/react-elements/modal/Registry.ts

@@ -28,7 +28,13 @@ registerModal({
 registerModal({
     modalId: "channel-edit",
     classLoader: async () => await import("tc-shared/ui/modal/channel-edit/Renderer"),
-    popoutSupported: true
+    popoutSupported: false /* TODO: Needs style fixing */
+});
+
+registerModal({
+    modalId: "echo-test",
+    classLoader: async () => await import("tc-shared/ui/modal/echo-test/Renderer"),
+    popoutSupported: false /* TODO: Needs style fixing */
 });
 
 registerModal({