From 9e63ab4dc9e8e02b593761d6960bb54be3ac7f57 Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Fri, 22 Jan 2021 16:50:55 +0100 Subject: [PATCH] Updating stuff to the new modal functionality --- shared/js/ConnectionHandler.ts | 3 + shared/js/ConnectionManager.ts | 3 + shared/js/events.ts | 264 +++++++----------- shared/js/main.tsx | 3 + shared/js/ui/modal/ModalNewcomer.tsx | 6 +- shared/js/ui/modal/ModalSettings.tsx | 168 ++++++++++- shared/js/ui/modal/channel-edit/Controller.ts | 10 +- shared/js/ui/modal/channel-edit/Renderer.tsx | 13 +- shared/js/ui/modal/css-editor/Controller.ts | 4 +- shared/js/ui/modal/css-editor/Definitions.ts | 4 - shared/js/ui/modal/css-editor/Renderer.tsx | 13 +- shared/js/ui/react-elements/Modal.tsx | 11 - .../js/ui/react-elements/ModalDefinitions.ts | 62 +--- .../external-modal/Controller.ts | 19 +- .../external-modal/IPCMessage.ts | 112 +------- .../external-modal/PopoutController.ts | 35 +-- .../external-modal/PopoutEntrypoint.ts | 13 +- .../external-modal/PopoutRegistry.ts | 38 --- .../external-modal/PopoutRenderer.scss | 2 +- .../external-modal/PopoutRendererClient.tsx | 9 +- .../external-modal/PopoutRendererWeb.tsx | 3 +- .../ui/react-elements/external-modal/index.ts | 12 +- .../internal-modal/Controller.ts | 27 +- .../js/ui/react-elements/modal/Definitions.ts | 119 ++++++++ shared/js/ui/react-elements/modal/Registry.ts | 56 ++++ shared/js/ui/react-elements/modal/index.ts | 31 ++ shared/js/ui/tree/popout/Controller.ts | 18 +- shared/js/ui/tree/popout/Definitions.ts | 13 +- shared/js/ui/tree/popout/RendererModal.tsx | 14 +- shared/js/ui/utils.ts | 23 ++ shared/js/ui/utils/IpcVariable.ts | 1 - shared/js/video-viewer/Controller.ts | 7 +- shared/js/video-viewer/Renderer.scss | 22 +- shared/js/video-viewer/Renderer.tsx | 26 +- web/app/ExternalModalFactory.ts | 15 +- web/app/hooks/ExternalModal.ts | 2 +- 36 files changed, 660 insertions(+), 521 deletions(-) delete mode 100644 shared/js/ui/react-elements/Modal.tsx delete mode 100644 shared/js/ui/react-elements/external-modal/PopoutRegistry.ts create mode 100644 shared/js/ui/react-elements/modal/Definitions.ts create mode 100644 shared/js/ui/react-elements/modal/Registry.ts create mode 100644 shared/js/ui/react-elements/modal/index.ts create mode 100644 shared/js/ui/utils.ts diff --git a/shared/js/ConnectionHandler.ts b/shared/js/ConnectionHandler.ts index 84dcf64c..19bd34cd 100644 --- a/shared/js/ConnectionHandler.ts +++ b/shared/js/ConnectionHandler.ts @@ -41,6 +41,9 @@ import {ServerEventLog} from "tc-shared/connectionlog/ServerEventLog"; import {PlaylistManager} from "tc-shared/music/PlaylistManager"; import {connectionHistory} from "tc-shared/connectionlog/History"; import {ConnectParameters} from "tc-shared/ui/modal/connect/Controller"; +import {assertMainApplication} from "tc-shared/ui/utils"; + +assertMainApplication(); export enum InputHardwareState { MISSING, diff --git a/shared/js/ConnectionManager.ts b/shared/js/ConnectionManager.ts index f86c448b..5ef4f6a9 100644 --- a/shared/js/ConnectionManager.ts +++ b/shared/js/ConnectionManager.ts @@ -2,6 +2,9 @@ import {ConnectionHandler, DisconnectReason} from "./ConnectionHandler"; import {Registry} from "./events"; import {Stage} from "tc-loader"; import * as loader from "tc-loader"; +import {assertMainApplication} from "tc-shared/ui/utils"; + +assertMainApplication(); export interface ConnectionManagerEvents { notify_handler_created: { diff --git a/shared/js/events.ts b/shared/js/events.ts index a41b71e6..561f747e 100644 --- a/shared/js/events.ts +++ b/shared/js/events.ts @@ -1,10 +1,10 @@ import {LogCategory, logTrace} from "./log"; import {guid} from "./crypto/uid"; -import * as React from "react"; import {useEffect} from "react"; import {unstable_batchedUpdates} from "react-dom"; -import { tr } from "./i18n/localize"; +import * as React from "react"; +/* export type EventPayloadObject = { [key: string]: EventPayload } | { @@ -12,6 +12,8 @@ export type EventPayloadObject = { }; export type EventPayload = string | number | bigint | null | undefined | EventPayloadObject; +*/ +export type EventPayloadObject = any; export type EventMap

= { [K in keyof P]: EventPayloadObject & { @@ -41,6 +43,7 @@ namespace EventHelper { /* May inline this somehow? A function call seems to be 3% slower */ export function createEvent

, T extends keyof P>(type: T, payload?: P[T]) : Event { if(payload) { + (payload as any).type = type; let event = payload as any as Event; event.as = as; event.asUnchecked = asUnchecked; @@ -80,7 +83,7 @@ namespace EventHelper { } } -export interface EventSender { +export interface EventSender = EventMap> { fire(event_type: T, data?: Events[T], overrideTypeKey?: boolean); /** @@ -112,7 +115,7 @@ interface EventHandlerRegisterData { } const kEventAnnotationKey = guid(); -export class Registry implements EventSender { +export class Registry = EventMap> implements EventSender { protected readonly registryUniqueId; protected persistentEventHandler: { [key: string]: ((event) => void)[] } = {}; @@ -120,6 +123,8 @@ export class Registry void)[] = []; protected consumer: EventConsumer[] = []; + private ipcConsumer: IpcEventBridge; + private debugPrefix = undefined; private warnUnhandledEvents = false; @@ -129,6 +134,13 @@ export class Registry void }[]; private pendingReactCallbacksFrame: number = 0; + static fromIpcDescription = EventMap>(description: IpcRegistryDescription) : Registry { + const registry = new Registry(); + registry.ipcConsumer = new IpcEventBridge(registry as any, description.ipcChannelId); + registry.registerConsumer(registry.ipcConsumer); + return registry; + } + constructor() { this.registryUniqueId = "evreg_data_" + guid(); } @@ -138,6 +150,9 @@ export class Registry handlers.splice(0, handlers.length)); this.genericEventHandler.splice(0, this.genericEventHandler.length); this.consumer.splice(0, this.consumer.length); + + this.ipcConsumer?.destroy(); + this.ipcConsumer = undefined; } enableDebug(prefix: string) { this.debugPrefix = prefix || "---"; } @@ -148,13 +163,13 @@ export class Registry(eventType: T, data?: Events[T], overrideTypeKey?: boolean) { if(this.debugPrefix) { - logTrace(LogCategory.EVENT_REGISTRY, tr("[%s] Trigger event: %s"), this.debugPrefix, eventType); + logTrace(LogCategory.EVENT_REGISTRY, "[%s] Trigger event: %s", this.debugPrefix, eventType); } if(typeof data === "object" && 'type' in data && !overrideTypeKey) { if((data as any).type !== eventType) { debugger; - throw tr("The keyword 'type' is reserved for the event type and should not be passed as argument"); + throw "The keyword 'type' is reserved for the event type and should not be passed as argument"; } } @@ -250,10 +265,11 @@ export class Registry(event: T, handler: (event?: Events[T] & Event) => void, condition?: boolean, reactEffectDependencies?: any[]) { + reactUse(event: T | T[], handler: (event: Event) => void, condition?: boolean, reactEffectDependencies?: any[]); + reactUse(event, handler, condition?, reactEffectDependencies?) { if(typeof condition === "boolean" && !condition) { useEffect(() => {}); return; @@ -263,8 +279,9 @@ export class Registry { handlers.push(handler); + return () => { - const index = handlers.findIndex(handler); + const index = handlers.indexOf(handler); if(index !== -1) { handlers.splice(index, 1); } @@ -291,7 +308,7 @@ export class Registry { + if(!this.ipcConsumer) { + this.ipcConsumer = new IpcEventBridge(this as any, undefined); + this.registerConsumer(this.ipcConsumer); + } + + return { + ipcChannelId: this.ipcConsumer.ipcChannelId + }; + } } export type RegistryMap = {[key: string]: any /* can't use Registry here since the template parameter is missing */ }; @@ -437,7 +465,7 @@ export function EventHandler(events: (keyof EventTypes) | (keyof Eve } } -export function ReactEventHandler, EventTypes = any>(registry_callback: (object: ObjectClass) => Registry) { +export function ReactEventHandler, Events extends EventMap = EventMap>(registry_callback: (object: ObjectClass) => Registry) { return function (constructor: Function) { if(!React.Component.prototype.isPrototypeOf(constructor.prototype)) throw "Class/object isn't an instance of React.Component"; @@ -470,164 +498,72 @@ export function ReactEventHandler, Event } } -export namespace modal { - export namespace settings { - export type ProfileInfo = { - id: string, - name: string, - nickname: string, - identity_type: "teaforo" | "teamspeak" | "nickname", +export type IpcRegistryDescription = EventMap> = { + ipcChannelId: string +} - identity_forum?: { - valid: boolean, - fallback_name: string - }, - identity_nickname?: { - name: string, - fallback_name: string - }, - identity_teamspeak?: { - unique_id: string, - fallback_name: string - } +class IpcEventBridge implements EventConsumer { + readonly registry: Registry; + readonly ipcChannelId: string; + private readonly ownBridgeId: string; + private broadcastChannel: BroadcastChannel; + + constructor(registry: Registry, ipcChannelId: string | undefined) { + this.registry = registry; + this.ownBridgeId = guid(); + + this.ipcChannelId = ipcChannelId || ("teaspeak-ipc-events-" + guid()); + this.broadcastChannel = new BroadcastChannel(this.ipcChannelId); + this.broadcastChannel.onmessage = event => this.handleIpcMessage(event.data, event.source, event.origin); + } + + destroy() { + if(this.broadcastChannel) { + this.broadcastChannel.onmessage = undefined; + this.broadcastChannel.onmessageerror = undefined; + this.broadcastChannel.close(); } - export interface profiles { - "reload-profile": { profile_id?: string }, - "select-profile": { profile_id: string }, + this.broadcastChannel = undefined; + } - "query-profile-list": { }, - "query-profile-list-result": { - status: "error" | "success" | "timeout", + handleEvent(dispatchType: EventDispatchType, eventType: string, eventPayload: any) { + if(eventPayload && eventPayload[this.ownBridgeId]) { + return; + } - error?: string; - profiles?: ProfileInfo[] + this.broadcastChannel.postMessage({ + type: "event", + source: this.ownBridgeId, + + dispatchType, + eventType, + eventPayload, + }); + } + + private handleIpcMessage(message: any, _source: MessageEventSource | null, _origin: string) { + if(message.source === this.ownBridgeId) { + /* It's our own event */ + return; + } + + if(message.type === "event") { + const payload = message.eventPayload || {}; + payload[this.ownBridgeId] = true; + switch(message.dispatchType as EventDispatchType) { + case "sync": + this.registry.fire(message.eventType, payload); + break; + + case "react": + this.registry.fire_react(message.eventType, payload); + break; + + case "later": + this.registry.fire_later(message.eventType, payload); + break; } - - "query-profile": { profile_id: string }, - "query-profile-result": { - status: "error" | "success" | "timeout", - profile_id: string, - - error?: string; - info?: ProfileInfo - }, - - "select-identity-type": { - profile_id: string, - identity_type: "teamspeak" | "teaforo" | "nickname" | "unset" - }, - - "query-profile-validity": { profile_id: string }, - "query-profile-validity-result": { - profile_id: string, - status: "error" | "success" | "timeout", - - error?: string, - valid?: boolean - } - - "create-profile": { name: string }, - "create-profile-result": { - status: "error" | "success" | "timeout", - name: string; - - profile_id?: string; - error?: string; - }, - - "delete-profile": { profile_id: string }, - "delete-profile-result": { - status: "error" | "success" | "timeout", - profile_id: string, - error?: string - } - - "set-default-profile": { profile_id: string }, - "set-default-profile-result": { - status: "error" | "success" | "timeout", - - /* the profile which now has the id "default" */ - old_profile_id: string, - - /* the "default" profile which now has a new id */ - new_profile_id?: string - - error?: string; - } - - /* profile name events */ - "set-profile-name": { - profile_id: string, - name: string - }, - "set-profile-name-result": { - status: "error" | "success" | "timeout", - profile_id: string, - name?: string - }, - - /* profile nickname events */ - "set-default-name": { - profile_id: string, - name: string | null - }, - "set-default-name-result": { - status: "error" | "success" | "timeout", - profile_id: string, - name?: string | null - }, - - "query-identity-teamspeak": { profile_id: string }, - "query-identity-teamspeak-result": { - status: "error" | "success" | "timeout", - profile_id: string, - - error?: string, - level?: number - } - - "set-identity-name-name": { profile_id: string, name: string }, - "set-identity-name-name-result": { - status: "error" | "success" | "timeout", - profile_id: string, - - error?: string, - name?: string - }, - - "generate-identity-teamspeak": { profile_id: string }, - "generate-identity-teamspeak-result": { - profile_id: string, - status: "error" | "success" | "timeout", - - error?: string, - - level?: number - unique_id?: string - }, - - "improve-identity-teamspeak-level": { profile_id: string }, - "improve-identity-teamspeak-level-update": { - profile_id: string, - new_level: number - }, - - "import-identity-teamspeak": { profile_id: string }, - "import-identity-teamspeak-result": { - profile_id: string, - - level?: number - unique_id?: string - } - - "export-identity-teamspeak": { - profile_id: string, - filename: string - }, - - - "setup-forum-connection": {} } } } \ No newline at end of file diff --git a/shared/js/main.tsx b/shared/js/main.tsx index 4826357c..141e74bc 100644 --- a/shared/js/main.tsx +++ b/shared/js/main.tsx @@ -47,6 +47,9 @@ import "./ui/elements/ContextDivider"; import "./ui/elements/Tab"; import "./clientservice"; import {initializeKeyControl} from "./KeyControl"; +import {assertMainApplication} from "tc-shared/ui/utils"; + +assertMainApplication(); let preventWelcomeUI = false; async function initialize() { diff --git a/shared/js/ui/modal/ModalNewcomer.tsx b/shared/js/ui/modal/ModalNewcomer.tsx index dae4a624..ca625b47 100644 --- a/shared/js/ui/modal/ModalNewcomer.tsx +++ b/shared/js/ui/modal/ModalNewcomer.tsx @@ -1,7 +1,7 @@ import {createModal, Modal} from "tc-shared/ui/elements/Modal"; import {tra} from "tc-shared/i18n/localize"; -import {modal as emodal, Registry} from "tc-shared/events"; -import {modal_settings} from "tc-shared/ui/modal/ModalSettings"; +import {Registry} from "tc-shared/events"; +import {modal_settings, SettingProfileEvents} from "tc-shared/ui/modal/ModalSettings"; import {spawnYesNo} from "tc-shared/ui/modal/ModalYesNo"; import {initialize_audio_microphone_controller, MicrophoneSettingsEvents} from "tc-shared/ui/modal/settings/Microphone"; import {MicrophoneSettings} from "tc-shared/ui/modal/settings/MicrophoneRenderer"; @@ -151,7 +151,7 @@ function initializeStepFinish(tag: JQuery, event_registry: Registry) { - const profile_events = new Registry(); + const profile_events = new Registry(); profile_events.enableDebug("settings-identity"); modal_settings.initialize_identity_profiles_controller(profile_events); modal_settings.initialize_identity_profiles_view(tag, profile_events, {forum_setuppable: false}); diff --git a/shared/js/ui/modal/ModalSettings.tsx b/shared/js/ui/modal/ModalSettings.tsx index 7f6f0224..ebda0a72 100644 --- a/shared/js/ui/modal/ModalSettings.tsx +++ b/shared/js/ui/modal/ModalSettings.tsx @@ -28,6 +28,164 @@ import {NotificationSettings} from "tc-shared/ui/modal/settings/Notifications"; import {initialize_audio_microphone_controller, MicrophoneSettingsEvents} from "tc-shared/ui/modal/settings/Microphone"; import {MicrophoneSettings} from "tc-shared/ui/modal/settings/MicrophoneRenderer"; +type ProfileInfoEvent = { + id: string, + name: string, + nickname: string, + identity_type: "teaforo" | "teamspeak" | "nickname", + + identity_forum?: { + valid: boolean, + fallback_name: string + }, + identity_nickname?: { + name: string, + fallback_name: string + }, + identity_teamspeak?: { + unique_id: string, + fallback_name: string + } +} + +export interface SettingProfileEvents { + "reload-profile": { profile_id?: string }, + "select-profile": { profile_id: string }, + + "query-profile-list": { }, + "query-profile-list-result": { + status: "error" | "success" | "timeout", + + error?: string; + profiles?: ProfileInfoEvent[] + } + + "query-profile": { profile_id: string }, + "query-profile-result": { + status: "error" | "success" | "timeout", + profile_id: string, + + error?: string; + info?: ProfileInfoEvent + }, + + "select-identity-type": { + profile_id: string, + identity_type: "teamspeak" | "teaforo" | "nickname" | "unset" + }, + + "query-profile-validity": { profile_id: string }, + "query-profile-validity-result": { + profile_id: string, + status: "error" | "success" | "timeout", + + error?: string, + valid?: boolean + } + + "create-profile": { name: string }, + "create-profile-result": { + status: "error" | "success" | "timeout", + name: string; + + profile_id?: string; + error?: string; + }, + + "delete-profile": { profile_id: string }, + "delete-profile-result": { + status: "error" | "success" | "timeout", + profile_id: string, + error?: string + } + + "set-default-profile": { profile_id: string }, + "set-default-profile-result": { + status: "error" | "success" | "timeout", + + /* the profile which now has the id "default" */ + old_profile_id: string, + + /* the "default" profile which now has a new id */ + new_profile_id?: string + + error?: string; + } + + /* profile name events */ + "set-profile-name": { + profile_id: string, + name: string + }, + "set-profile-name-result": { + status: "error" | "success" | "timeout", + profile_id: string, + name?: string + }, + + /* profile nickname events */ + "set-default-name": { + profile_id: string, + name: string | null + }, + "set-default-name-result": { + status: "error" | "success" | "timeout", + profile_id: string, + name?: string | null + }, + + "query-identity-teamspeak": { profile_id: string }, + "query-identity-teamspeak-result": { + status: "error" | "success" | "timeout", + profile_id: string, + + error?: string, + level?: number + } + + "set-identity-name-name": { profile_id: string, name: string }, + "set-identity-name-name-result": { + status: "error" | "success" | "timeout", + profile_id: string, + + error?: string, + name?: string + }, + + "generate-identity-teamspeak": { profile_id: string }, + "generate-identity-teamspeak-result": { + profile_id: string, + status: "error" | "success" | "timeout", + + error?: string, + + level?: number + unique_id?: string + }, + + "improve-identity-teamspeak-level": { profile_id: string }, + "improve-identity-teamspeak-level-update": { + profile_id: string, + new_level: number + }, + + "import-identity-teamspeak": { profile_id: string }, + "import-identity-teamspeak-result": { + profile_id: string, + + level?: number + unique_id?: string + } + + "export-identity-teamspeak": { + profile_id: string, + filename: string + }, + + + "setup-forum-connection": {} +} + export function spawnSettingsModal(default_page?: string): Modal { let modal: Modal; modal = createModal({ @@ -449,7 +607,7 @@ function settings_audio_microphone(container: JQuery, modal: Modal) { } function settings_identity_profiles(container: JQuery, modal: Modal) { - const registry = new Registry(); + const registry = new Registry(); //registry.enable_debug("settings-identity"); modal_settings.initialize_identity_profiles_controller(registry); modal_settings.initialize_identity_profiles_view(container, registry, { @@ -689,7 +847,7 @@ export namespace modal_settings { forum_setuppable: boolean } - export function initialize_identity_profiles_controller(event_registry: Registry) { + export function initialize_identity_profiles_controller(event_registry: Registry) { const send_error = (event, profile, text) => event_registry.fire_react(event, { status: "error", profile_id: profile, @@ -997,7 +1155,7 @@ export namespace modal_settings { }); } - export function initialize_identity_profiles_view(container: JQuery, event_registry: Registry, settings: ProfileViewSettings) { + export function initialize_identity_profiles_view(container: JQuery, event_registry: Registry, settings: ProfileViewSettings) { /* profile list */ { const container_profiles = container.find(".container-profiles"); @@ -1007,7 +1165,7 @@ export namespace modal_settings { const overlay_timeout = container_profiles.find(".overlay-timeout"); const overlay_empty = container_profiles.find(".overlay-empty"); - const build_profile = (profile: events.modal.settings.ProfileInfo, selected: boolean) => { + const build_profile = (profile: ProfileInfoEvent, selected: boolean) => { let tag_avatar: JQuery, tag_default: JQuery; let tag = $.spawn("div").addClass("profile").attr("profile-id", profile.id).append( tag_avatar = $.spawn("div").addClass("container-avatar"), @@ -1693,7 +1851,7 @@ export namespace modal_settings { }); } - const create_standard_timeout = (event: keyof events.modal.settings.profiles, response_event: keyof events.modal.settings.profiles, key: string) => { + const create_standard_timeout = (event: keyof SettingProfileEvents, response_event: keyof SettingProfileEvents, key: string) => { const timeouts = {}; event_registry.on(event, event => { clearTimeout(timeouts[event[key]]); diff --git a/shared/js/ui/modal/channel-edit/Controller.ts b/shared/js/ui/modal/channel-edit/Controller.ts index dbe9d45f..d58f5422 100644 --- a/shared/js/ui/modal/channel-edit/Controller.ts +++ b/shared/js/ui/modal/channel-edit/Controller.ts @@ -10,8 +10,7 @@ import {Registry} from "tc-shared/events"; import {ChannelPropertyProviders} from "tc-shared/ui/modal/channel-edit/ControllerProperties"; import {LogCategory, logDebug, logError} from "tc-shared/log"; import {ChannelPropertyPermissionsProviders} from "tc-shared/ui/modal/channel-edit/ControllerPermissions"; -import {spawnReactModal} from "tc-shared/ui/react-elements/Modal"; -import {ChannelEditModal} from "tc-shared/ui/modal/channel-edit/Renderer"; +import {spawnModal} from "tc-shared/ui/react-elements/Modal"; import {PermissionValue} from "tc-shared/permission/PermissionManager"; import {CommandResult} from "tc-shared/connection/ServerConnectionDeclaration"; import PermissionType from "tc-shared/permission/PermissionType"; @@ -25,10 +24,13 @@ export type ChannelEditChangedPermission = { permission: PermissionType, value: export const spawnChannelEditNew = (connection: ConnectionHandler, channel: ChannelEntry | undefined, parent: ChannelEntry | undefined, callback: ChannelEditCallback) => { const controller = new ChannelEditController(connection, channel, parent); - const modal = spawnReactModal(ChannelEditModal, controller.uiEvents, typeof channel !== "object"); + const modal = spawnModal("channel-edit", [controller.uiEvents.generateIpcDescription(), typeof channel !== "object"], { + popedOut: true, + popoutable: true + }); modal.show().then(undefined); - modal.events.on("destroy", () => { + modal.getEvents().on("destroy", () => { controller.destroy(); }); diff --git a/shared/js/ui/modal/channel-edit/Renderer.tsx b/shared/js/ui/modal/channel-edit/Renderer.tsx index 8b62a403..61836f73 100644 --- a/shared/js/ui/modal/channel-edit/Renderer.tsx +++ b/shared/js/ui/modal/channel-edit/Renderer.tsx @@ -2,7 +2,7 @@ import {InternalModal} from "tc-shared/ui/react-elements/internal-modal/Controll import * as React from "react"; import {useContext, useEffect, useRef, useState} from "react"; import {Translatable, VariadicTranslatable} from "tc-shared/ui/react-elements/i18n"; -import {Registry} from "tc-shared/events"; +import {IpcRegistryDescription, Registry} from "tc-shared/events"; import { ChannelEditablePermissions, ChannelEditablePermissionValue, @@ -23,6 +23,7 @@ import {Slider} from "tc-shared/ui/react-elements/Slider"; import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots"; import {RemoteIconRenderer} from "tc-shared/ui/react-elements/Icon"; import {getIconManager} from "tc-shared/file/Icons"; +import {AbstractModal} from "tc-shared/ui/react-elements/modal/Definitions"; const cssStyle = require("./Renderer.scss"); @@ -1138,13 +1139,13 @@ const Buttons = React.memo(() => { ) }); -export class ChannelEditModal extends InternalModal { +class ChannelEditModal extends AbstractModal { private readonly events: Registry; private readonly isChannelCreate: boolean; - constructor(events: Registry, isChannelCreate: boolean) { + constructor(events: IpcRegistryDescription, isChannelCreate: boolean) { super(); - this.events = events; + this.events = Registry.fromIpcDescription(events); this.isChannelCreate = isChannelCreate; } @@ -1174,4 +1175,6 @@ export class ChannelEditModal extends InternalModal { color(): "none" | "blue" { return "blue"; } -} \ No newline at end of file +} + +export = ChannelEditModal; \ No newline at end of file diff --git a/shared/js/ui/modal/css-editor/Controller.ts b/shared/js/ui/modal/css-editor/Controller.ts index 5a1654b8..c1a6e583 100644 --- a/shared/js/ui/modal/css-editor/Controller.ts +++ b/shared/js/ui/modal/css-editor/Controller.ts @@ -1,10 +1,10 @@ import * as loader from "tc-loader"; import {Stage} from "tc-loader"; import {CssEditorEvents, CssVariable} from "../../../ui/modal/css-editor/Definitions"; -import {spawnExternalModal} from "../../../ui/react-elements/external-modal"; import {Registry} from "../../../events"; import {LogCategory, logWarn} from "../../../log"; import {tr} from "tc-shared/i18n/localize"; +import {spawnModal} from "tc-shared/ui/react-elements/modal"; interface CustomVariable { name: string; @@ -172,7 +172,7 @@ export function spawnModalCssVariableEditor() { const events = new Registry(); cssVariableEditorController(events); - const modal = spawnExternalModal("css-editor", { default: events }, {}); + const modal = spawnModal("css-editor", [ events.generateIpcDescription() ], { popedOut: true }); modal.show(); } diff --git a/shared/js/ui/modal/css-editor/Definitions.ts b/shared/js/ui/modal/css-editor/Definitions.ts index 10866edf..859e5bd2 100644 --- a/shared/js/ui/modal/css-editor/Definitions.ts +++ b/shared/js/ui/modal/css-editor/Definitions.ts @@ -6,10 +6,6 @@ export interface CssVariable { customValue?: string; } -export interface CssEditorUserData { - -} - export interface CssEditorEvents { action_set_filter: { filter: string | undefined }, action_select_entry: { variable: CssVariable }, diff --git a/shared/js/ui/modal/css-editor/Renderer.tsx b/shared/js/ui/modal/css-editor/Renderer.tsx index f7ad09b1..ba860580 100644 --- a/shared/js/ui/modal/css-editor/Renderer.tsx +++ b/shared/js/ui/modal/css-editor/Renderer.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import {useState} from "react"; -import {CssEditorEvents, CssEditorUserData, CssVariable} from "tc-shared/ui/modal/css-editor/Definitions"; -import {Registry, RegistryMap} from "tc-shared/events"; +import {CssEditorEvents, CssVariable} from "tc-shared/ui/modal/css-editor/Definitions"; +import {IpcRegistryDescription, Registry} from "tc-shared/events"; import {Translatable} from "tc-shared/ui/react-elements/i18n"; import {BoxedInputField, FlatInputField} from "tc-shared/ui/react-elements/InputField"; import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots"; @@ -391,14 +391,11 @@ const requestFileAsText = async (): Promise => { class PopoutConversationUI extends AbstractModal { private readonly events: Registry; - private readonly userData: CssEditorUserData; - constructor(registryMap: RegistryMap, userData: CssEditorUserData) { + constructor(events: IpcRegistryDescription) { super(); - this.userData = userData; - this.events = registryMap["default"] as any; - + this.events = Registry.fromIpcDescription(events); this.events.on("notify_export_result", event => { createInfoModal(tr("Config exported successfully"), tr("The config has been exported successfully.")).open(); downloadTextAsFile(event.config, "teaweb-style.json"); @@ -421,7 +418,7 @@ class PopoutConversationUI extends AbstractModal { } renderTitle() { - return "CSS Variable editor"; + return "CSS Variable editor"; } } diff --git a/shared/js/ui/react-elements/Modal.tsx b/shared/js/ui/react-elements/Modal.tsx deleted file mode 100644 index 0b28f303..00000000 --- a/shared/js/ui/react-elements/Modal.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {InternalModal, InternalModalController} from "tc-shared/ui/react-elements/internal-modal/Controller"; - -export function spawnReactModal(modalClass: new () => ModalClass) : InternalModalController; -export function spawnReactModal(modalClass: new (..._: [A1]) => ModalClass, arg1: A1) : InternalModalController; -export function spawnReactModal(modalClass: new (..._: [A1, A2]) => ModalClass, arg1: A1, arg2: A2) : InternalModalController; -export function spawnReactModal(modalClass: new (..._: [A1, A2, A3]) => ModalClass, arg1: A1, arg2: A2, arg3: A3) : InternalModalController; -export function spawnReactModal(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4) : InternalModalController; -export function spawnReactModal(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4, arg5: A5) : InternalModalController; -export function spawnReactModal(modalClass: new (..._: any[]) => ModalClass, ...args: any[]) : InternalModalController { - return new InternalModalController(new modalClass(...args)); -} \ No newline at end of file diff --git a/shared/js/ui/react-elements/ModalDefinitions.ts b/shared/js/ui/react-elements/ModalDefinitions.ts index 2f3f4b0c..84354e68 100644 --- a/shared/js/ui/react-elements/ModalDefinitions.ts +++ b/shared/js/ui/react-elements/ModalDefinitions.ts @@ -1,59 +1,3 @@ -import * as React from "react"; -import {ReactElement} from "react"; -import {Registry} from "../../events"; - -export type ModalType = "error" | "warning" | "info" | "none"; - -export interface ModalOptions { - destroyOnClose?: boolean; - - defaultSize?: { width: number, height: number }; -} - -export interface ModalEvents { - "open": {}, - "close": {}, - - /* create is implicitly at object creation */ - "destroy": {} -} - -export enum ModalState { - SHOWN, - HIDDEN, - DESTROYED -} - -export interface ModalController { - getOptions() : Readonly; - getEvents() : Registry; - getState() : ModalState; - - show() : Promise; - hide() : Promise; - - destroy(); -} - -export abstract class AbstractModal { - protected constructor() {} - - abstract renderBody() : ReactElement; - abstract renderTitle() : string | React.ReactElement; - - /* only valid for the "inline" modals */ - type() : ModalType { return "none"; } - color() : "none" | "blue" { return "none"; } - verticalAlignment() : "top" | "center" | "bottom" { return "center"; } - - protected onInitialize() {} - protected onDestroy() {} - - protected onClose() {} - protected onOpen() {} -} - - -export interface ModalRenderer { - renderModal(modal: AbstractModal | undefined); -} \ No newline at end of file +/* TODO: Remove this! */ +import * as definitions from "./modal/Definitions"; +export = definitions; \ No newline at end of file diff --git a/shared/js/ui/react-elements/external-modal/Controller.ts b/shared/js/ui/react-elements/external-modal/Controller.ts index 9bac92eb..2732aa7f 100644 --- a/shared/js/ui/react-elements/external-modal/Controller.ts +++ b/shared/js/ui/react-elements/external-modal/Controller.ts @@ -1,7 +1,7 @@ import {LogCategory, logDebug, logTrace, logWarn} from "../../../log"; import * as ipc from "../../../ipc/BrowserIPC"; import {ChannelMessage} from "../../../ipc/BrowserIPC"; -import {Registry, RegistryMap} from "../../../events"; +import {Registry} from "../../../events"; import { EventControllerBase, Popout2ControllerMessages, @@ -11,7 +11,7 @@ import {ModalController, ModalEvents, ModalOptions, ModalState} from "../../../u export abstract class AbstractExternalModalController extends EventControllerBase<"controller"> implements ModalController { public readonly modalType: string; - public readonly userData: any; + public readonly constructorArguments: any[]; private readonly modalEvents: Registry; private modalState: ModalState = ModalState.DESTROYED; @@ -19,15 +19,13 @@ export abstract class AbstractExternalModalController extends EventControllerBas private readonly documentUnloadListener: () => void; private callbackWindowInitialized: (error?: string) => void; - protected constructor(modal: string, registries: RegistryMap, userData: any) { + protected constructor(modalType: string, constructorArguments: any[]) { super(); - this.initializeRegistries(registries); + this.modalType = modalType; + this.constructorArguments = constructorArguments; this.modalEvents = new Registry(); - this.modalType = modal; - this.userData = userData; - this.ipcChannel = ipc.getIpcInstance().createChannel(); this.ipcChannel.messageHandler = this.handleIPCMessage.bind(this); @@ -156,15 +154,10 @@ export abstract class AbstractExternalModalController extends EventControllerBas this.callbackWindowInitialized = undefined; } - this.sendIPCMessage("hello-controller", { accepted: true, userData: this.userData, registries: Object.keys(this.localRegistries) }); + this.sendIPCMessage("hello-controller", { accepted: true, constructorArguments: this.constructorArguments }); break; } - case "fire-event": - case "fire-event-callback": - /* already handled by out base class */ - break; - case "invoke-modal-action": /* must be handled by the underlying handler */ break; diff --git a/shared/js/ui/react-elements/external-modal/IPCMessage.ts b/shared/js/ui/react-elements/external-modal/IPCMessage.ts index 6b9bc4e6..282293e4 100644 --- a/shared/js/ui/react-elements/external-modal/IPCMessage.ts +++ b/shared/js/ui/react-elements/external-modal/IPCMessage.ts @@ -1,29 +1,15 @@ import {ChannelMessage, IPCChannel} from "../../../ipc/BrowserIPC"; -import {EventSender, RegistryMap} from "../../../events"; export interface PopoutIPCMessage { "hello-popout": { version: string }, - "hello-controller": { accepted: boolean, message?: string, userData?: any, registries?: string[] }, - - "fire-event": { - type: "sync" | "react" | "later"; - eventType: string; - payload: any; - callbackId: string; - registry: string; - }, - - "fire-event-callback": { - callbackId: string - }, - + "hello-controller": { accepted: boolean, message?: string, constructorArguments?: any[] }, "invoke-modal-action": { action: "close" | "minimize" } } -export type Controller2PopoutMessages = "hello-controller" | "fire-event" | "fire-event-callback"; -export type Popout2ControllerMessages = "hello-popout" | "fire-event" | "fire-event-callback" | "invoke-modal-action"; +export type Controller2PopoutMessages = "hello-controller"; +export type Popout2ControllerMessages = "hello-popout" | "invoke-modal-action"; export interface SendIPCMessage { "controller": Controller2PopoutMessages; @@ -35,74 +21,12 @@ export interface ReceivedIPCMessage { "popout": Controller2PopoutMessages; } -let callbackIdIndex = 0; export abstract class EventControllerBase { protected ipcChannel: IPCChannel; protected ipcRemoteId: string; - protected localRegistries: RegistryMap; - private localEventReceiver: {[key: string]: EventSender}; - - private omitEventType: string = undefined; - private omitEventData: any; - private eventFiredListeners: {[key: string]:{ callback: () => void, timeout: number }} = {}; - protected constructor() { } - protected initializeRegistries(registries: RegistryMap) { - if(typeof this.localRegistries !== "undefined") { throw "event registries have already been initialized" }; - - this.localEventReceiver = {}; - this.localRegistries = registries; - - /* FIXME: Modals no longer use RegistryMap instead they should use IPCRegistryDescription */ - /* - for(const key of Object.keys(this.localRegistries)) { - this.localEventReceiver[key] = this.createEventReceiver(key); - this.localRegistries[key].connectAll(this.localEventReceiver[key]); - } - */ - } - - private createEventReceiver(key: string) : EventSender { - let refThis = this; - - const fireEvent = (type: "react" | "later", eventType: any, data?: any[], callback?: () => void) => { - const callbackId = callback ? (++callbackIdIndex) + "-ev-cb" : undefined; - refThis.sendIPCMessage("fire-event", { type: type, eventType: eventType, payload: data, callbackId: callbackId, registry: key }); - if(callbackId) { - const timeout = setTimeout(() => { - delete refThis.eventFiredListeners[callbackId]; - callback(); - }, 2500); - - refThis.eventFiredListeners[callbackId] = { - callback: callback, - timeout: timeout - } - } - }; - - return new class implements EventSender { - fire(eventType: T, data?: any[T], overrideTypeKey?: boolean) { - if(refThis.omitEventType === eventType && refThis.omitEventData === data) { - refThis.omitEventType = undefined; - return; - } - - refThis.sendIPCMessage("fire-event", { type: "sync", eventType: eventType, payload: data, callbackId: undefined, registry: key }); - } - - fire_later(eventType: T, data?: { [p: string]: any }[T], callback?: () => void) { - fireEvent("later", eventType, data, callback); - } - - fire_react(eventType: T, data?: any[T], callback?: () => void) { - fireEvent("react", eventType, data, callback); - } - }; - } - protected handleIPCMessage(remoteId: string, broadcast: boolean, message: ChannelMessage) { if(this.ipcRemoteId !== remoteId) { console.warn("Received message from unknown end: %s. Expected: %s", remoteId, this.ipcRemoteId); @@ -116,38 +40,10 @@ export abstract class EventControllerBase this.ipcChannel.sendMessage(type, payload, this.ipcRemoteId); } - protected handleTypedIPCMessage(type: T, payload: PopoutIPCMessage[T]) { - switch (type) { - case "fire-event": { - const tpayload = payload as PopoutIPCMessage["fire-event"]; - - /* FIXME: Pay respect to the different event types and may bundle react updates! */ - this.omitEventData = tpayload.payload; - this.omitEventType = tpayload.eventType; - this.localRegistries[tpayload.registry].fire(tpayload.eventType, tpayload.payload); - if(tpayload.callbackId) - this.sendIPCMessage("fire-event-callback", { callbackId: tpayload.callbackId }); - break; - } - - case "fire-event-callback": { - const tpayload = payload as PopoutIPCMessage["fire-event-callback"]; - const callback = this.eventFiredListeners[tpayload.callbackId]; - delete this.eventFiredListeners[tpayload.callbackId]; - if(callback) { - clearTimeout(callback.timeout); - callback.callback(); - } - break; - } - } - } + protected handleTypedIPCMessage(type: T, payload: PopoutIPCMessage[T]) {} protected destroyIPC() { - /* FIXME: See above */ - //Object.keys(this.localRegistries).forEach(key => this.localRegistries[key].disconnectAll(this.localEventReceiver[key])); this.ipcChannel = undefined; this.ipcRemoteId = undefined; - this.eventFiredListeners = {}; } } \ No newline at end of file diff --git a/shared/js/ui/react-elements/external-modal/PopoutController.ts b/shared/js/ui/react-elements/external-modal/PopoutController.ts index 7df52555..6c528555 100644 --- a/shared/js/ui/react-elements/external-modal/PopoutController.ts +++ b/shared/js/ui/react-elements/external-modal/PopoutController.ts @@ -5,18 +5,19 @@ import { EventControllerBase, PopoutIPCMessage } from "../../../ui/react-elements/external-modal/IPCMessage"; -import {Registry, RegistryMap} from "../../../events"; let controller: PopoutController; export function getPopoutController() { - if(!controller) + if(!controller) { controller = new PopoutController(); + } + return controller; } class PopoutController extends EventControllerBase<"popout"> { - private userData: any; + private constructorArguments: any[]; private callbackControllerHello: (accepted: boolean | string) => void; constructor() { @@ -27,7 +28,9 @@ class PopoutController extends EventControllerBase<"popout"> { this.ipcChannel.messageHandler = this.handleIPCMessage.bind(this); } - getEventRegistries() : RegistryMap { return this.localRegistries; } + getConstructorArguments() : any[] { + return this.constructorArguments; + } async initialize() { this.sendIPCMessage("hello-popout", { version: __build.version }); @@ -63,39 +66,17 @@ class PopoutController extends EventControllerBase<"popout"> { return; } - if(this.getEventRegistries()) { - const registries = this.getEventRegistries(); - const invalidIndex = tpayload.registries.findIndex(reg => !registries[reg]); - if(invalidIndex !== -1) { - console.error("Received miss matching event registry keys (missing %s)", tpayload.registries[invalidIndex]); - this.callbackControllerHello("miss matching registry keys (locally)"); - } - } else { - let map = {}; - tpayload.registries.forEach(reg => map[reg] = new Registry()); - this.initializeRegistries(map); - } - - this.userData = tpayload.userData; + this.constructorArguments = tpayload.constructorArguments; this.callbackControllerHello(tpayload.accepted ? true : tpayload.message || false); break; } - case "fire-event-callback": - case "fire-event": - /* handled by out base class */ - break; - default: console.warn("Received unknown message type from controller: %s", type); return; } } - getUserData() { - return this.userData; - } - doClose() { this.sendIPCMessage("invoke-modal-action", { action: "close" }); } diff --git a/shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts b/shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts index ff2af0e7..0954cfd5 100644 --- a/shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts +++ b/shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts @@ -5,14 +5,13 @@ import * as i18n from "../../../i18n/localize"; import {AbstractModal, ModalRenderer} from "../../../ui/react-elements/ModalDefinitions"; import {AppParameters} from "../../../settings"; import {getPopoutController} from "./PopoutController"; -import {findPopoutHandler} from "../../../ui/react-elements/external-modal/PopoutRegistry"; -import {RegistryMap} from "../../../events"; import {WebModalRenderer} from "../../../ui/react-elements/external-modal/PopoutRendererWeb"; import {ClientModalRenderer} from "../../../ui/react-elements/external-modal/PopoutRendererClient"; import {setupJSRender} from "../../../ui/jsrender"; import "../../../file/RemoteAvatars"; import "../../../file/RemoteIcons"; +import {findRegisteredModal} from "tc-shared/ui/react-elements/modal/Registry"; if("__native_client_init_shared" in window) { (window as any).__native_client_init_shared(__webpack_require__); @@ -20,7 +19,7 @@ if("__native_client_init_shared" in window) { let modalRenderer: ModalRenderer; let modalInstance: AbstractModal; -let modalClass: new (events: RegistryMap, userData: any) => AbstractModal; +let modalClass: new (...args: any[]) => AbstractModal; loader.register_task(Stage.JAVASCRIPT_INITIALIZING, { name: "setup", @@ -70,13 +69,13 @@ loader.register_task(Stage.JAVASCRIPT_INITIALIZING, { const modalTarget = AppParameters.getValue(AppParameters.KEY_MODAL_TARGET, "unknown"); console.error("Loading modal class %s", modalTarget); try { - const handler = findPopoutHandler(modalTarget); - if(!handler) { + const registeredModal = findRegisteredModal(modalTarget as any); + if(!registeredModal) { loader.critical_error("Missing popout handler", "Handler " + modalTarget + " is missing."); throw "missing handler"; } - modalClass = await handler.loadClass(); + modalClass = await registeredModal.classLoader(); } catch(error) { loader.critical_error("Failed to load modal", "Lookup the console for more detail"); console.error("Failed to load modal %s: %o", modalTarget, error); @@ -89,7 +88,7 @@ loader.register_task(Stage.LOADED, { priority: 100, function: async () => { try { - modalInstance = new modalClass(getPopoutController().getEventRegistries(), getPopoutController().getUserData()); + modalInstance = new modalClass(...getPopoutController().getConstructorArguments()); modalRenderer.renderModal(modalInstance); } catch(error) { loader.critical_error("Failed to invoker modal", "Lookup the console for more detail"); diff --git a/shared/js/ui/react-elements/external-modal/PopoutRegistry.ts b/shared/js/ui/react-elements/external-modal/PopoutRegistry.ts deleted file mode 100644 index 71eed530..00000000 --- a/shared/js/ui/react-elements/external-modal/PopoutRegistry.ts +++ /dev/null @@ -1,38 +0,0 @@ -import {AbstractModal} from "../../../ui/react-elements/ModalDefinitions"; - -export interface PopoutHandler { - name: string; - loadClass: () => Promise; -} - -const registeredHandler: {[key: string]: PopoutHandler} = {}; - -export function findPopoutHandler(name: string) { - return registeredHandler[name]; -} - -function registerHandler(handler: PopoutHandler) { - registeredHandler[handler.name] = handler; -} - -registerHandler({ - name: "video-viewer", - loadClass: async () => await import("tc-shared/video-viewer/Renderer") -}); - - -registerHandler({ - name: "conversation", - loadClass: async () => await import("../../frames/side/PopoutConversationRenderer") -}); - - -registerHandler({ - name: "css-editor", - loadClass: async () => await import("tc-shared/ui/modal/css-editor/Renderer") -}); - -registerHandler({ - name: "channel-tree", - loadClass: async () => await import("tc-shared/ui/tree/popout/RendererModal") -}); diff --git a/shared/js/ui/react-elements/external-modal/PopoutRenderer.scss b/shared/js/ui/react-elements/external-modal/PopoutRenderer.scss index c9bc1107..818cf393 100644 --- a/shared/js/ui/react-elements/external-modal/PopoutRenderer.scss +++ b/shared/js/ui/react-elements/external-modal/PopoutRenderer.scss @@ -53,4 +53,4 @@ html, body { overflow: auto; @include chat-scrollbar(); } -} \ No newline at end of file +} diff --git a/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx b/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx index e9f909ea..9ef5bf20 100644 --- a/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx +++ b/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx @@ -1,6 +1,6 @@ +import {InternalModalContentRenderer} from "tc-shared/ui/react-elements/internal-modal/Renderer"; import {AbstractModal, ModalRenderer} from "tc-shared/ui/react-elements/ModalDefinitions"; import * as ReactDOM from "react-dom"; -import {InternalModalContentRenderer} from "tc-shared/ui/react-elements/internal-modal/Renderer"; import * as React from "react"; export interface ModalControlFunctions { @@ -39,11 +39,13 @@ export class ClientModalRenderer implements ModalRenderer { } renderModal(modal: AbstractModal | undefined) { - if(this.currentModal === modal) + if(this.currentModal === modal) { return; + } this.titleChangeObserver.disconnect(); ReactDOM.unmountComponentAtNode(this.container); + this.currentModal = modal; ReactDOM.render( ModalController; +export type ControllerFactory = (modalType: string, constructorArguments?: any[], options?: ModalOptions) => ModalController; let modalControllerFactory: ControllerFactory; export function setExternalModalControllerFactory(factory: ControllerFactory) { modalControllerFactory = factory; } -export function spawnExternalModal(modal: string, registryMap: RegistryMap, userData: any, uniqueModalId?: string) : ModalController { - if(typeof modalControllerFactory === "undefined") +export function spawnExternalModal(modalType: string, constructorArguments?: any[], options?: ModalOptions) : ModalController { + if(typeof modalControllerFactory === "undefined") { throw tr("No external modal factory has been set"); + } - return modalControllerFactory(modal, registryMap, userData, uniqueModalId); + return modalControllerFactory(modalType, constructorArguments, options); } \ No newline at end of file diff --git a/shared/js/ui/react-elements/internal-modal/Controller.ts b/shared/js/ui/react-elements/internal-modal/Controller.ts index ffaa3f71..7d1c47ee 100644 --- a/shared/js/ui/react-elements/internal-modal/Controller.ts +++ b/shared/js/ui/react-elements/internal-modal/Controller.ts @@ -10,10 +10,14 @@ import { } from "../../../ui/react-elements/ModalDefinitions"; import {InternalModalRenderer} from "../../../ui/react-elements/internal-modal/Renderer"; import {tr} from "tc-shared/i18n/localize"; +import {RegisteredModal} from "tc-shared/ui/react-elements/modal/Registry"; -export class InternalModalController implements ModalController { +export class InternalModalController implements ModalController { readonly events: Registry; - readonly modalInstance: InstanceType; + + private readonly modalType: RegisteredModal; + private readonly constructorArguments: any[]; + private modalInstance: AbstractModal; private initializedPromise: Promise; @@ -21,10 +25,12 @@ export class InternalModalController; private modalState_: ModalState = ModalState.HIDDEN; - constructor(instance: InstanceType) { - this.modalInstance = instance; + constructor(modalType: RegisteredModal, constructorArguments: any[]) { + this.modalType = modalType; + this.constructorArguments = constructorArguments; + this.events = new Registry(); - this.initialize(); + this.initializedPromise = this.initialize(); } getOptions(): Readonly { @@ -40,17 +46,19 @@ export class InternalModalController this.destroy() }); document.body.appendChild(this.domElement); - this.initializedPromise = new Promise(resolve => { + await new Promise(resolve => { ReactDOM.render(element, this.domElement, () => setTimeout(resolve, 0)); }); @@ -59,10 +67,11 @@ export class InternalModalController { await this.initializedPromise; - if(this.modalState_ === ModalState.DESTROYED) + if(this.modalState_ === ModalState.DESTROYED) { throw tr("modal has been destroyed"); - else if(this.modalState_ === ModalState.SHOWN) + } else if(this.modalState_ === ModalState.SHOWN) { return; + } this.refModal.current?.setState({ show: true }); this.modalState_ = ModalState.SHOWN; diff --git a/shared/js/ui/react-elements/modal/Definitions.ts b/shared/js/ui/react-elements/modal/Definitions.ts new file mode 100644 index 00000000..541d503a --- /dev/null +++ b/shared/js/ui/react-elements/modal/Definitions.ts @@ -0,0 +1,119 @@ +import {IpcRegistryDescription, Registry} from "tc-shared/events"; +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"; + +export type ModalType = "error" | "warning" | "info" | "none"; + +export interface ModalOptions { + /** + * Unique modal id. + */ + uniqueId?: string, + + /** + * Destroy the modal if it has been closed. + * If the value is `false` it *might* destroy the modal anyways. + * Default: `true`. + */ + destroyOnClose?: boolean, + + /** + * Default size of the modal in pixel. + * This value might or might not be respected. + */ + defaultSize?: { width: number, height: number }, + + /** + * Determines if the modal is resizeable or now. + * Some browsers might not support non resizeable modals. + * Default: `both` + */ + resizeable?: "none" | "vertical" | "horizontal" | "both", + + /** + * If the modal should be popoutable. + * Default: `false` + */ + popoutable?: boolean, + + /** + * The default popout state. + * Default: `false` + */ + popedOut?: boolean +} + +export interface ModalFunctionController { + minimize(); + supportMinimize() : boolean; + + maximize(); + supportMaximize() : boolean; + + close(); +} + +export interface ModalEvents { + "open": {}, + "close": {}, + + /* create is implicitly at object creation */ + "destroy": {} +} + +export enum ModalState { + SHOWN, + HIDDEN, + DESTROYED +} + +export interface ModalController { + getOptions() : Readonly; + getEvents() : Registry; + getState() : ModalState; + + show() : Promise; + hide() : Promise; + + destroy(); +} + +export abstract class AbstractModal { + protected constructor() {} + + abstract renderBody() : ReactElement; + abstract renderTitle() : string | React.ReactElement; + + /* only valid for the "inline" modals */ + type() : ModalType { return "none"; } + color() : "none" | "blue" { return "none"; } + verticalAlignment() : "top" | "center" | "bottom" { return "center"; } + + protected onInitialize() {} + protected onDestroy() {} + + protected onClose() {} + protected onOpen() {} +} + + +export interface ModalRenderer { + renderModal(modal: AbstractModal | undefined); +} + +export interface ModalConstructorArguments { + "video-viewer": [ + /* events */ IpcRegistryDescription, + /* handlerId */ string, + ], + "channel-edit": [ + /* events */ IpcRegistryDescription, + /* isChannelCreate */ boolean + ], + "conversation": any, + "css-editor": any, + "channel-tree": any, + "modal-connect": any +} \ No newline at end of file diff --git a/shared/js/ui/react-elements/modal/Registry.ts b/shared/js/ui/react-elements/modal/Registry.ts new file mode 100644 index 00000000..5f4ae90f --- /dev/null +++ b/shared/js/ui/react-elements/modal/Registry.ts @@ -0,0 +1,56 @@ +import {AbstractModal} from "../../../ui/react-elements/ModalDefinitions"; +import {ModalConstructorArguments} from "tc-shared/ui/react-elements/modal/Definitions"; + +export interface RegisteredModal { + modalId: T, + classLoader: () => Promise AbstractModal>, + popoutSupported: boolean +} + +const registeredModals: { + [T in keyof ModalConstructorArguments]?: RegisteredModal +} = {}; + +export function findRegisteredModal(name: T) : RegisteredModal | undefined { + return registeredModals[name] as any; +} + +function registerModal(modal: RegisteredModal) { + registeredModals[modal.modalId] = modal as any; +} + +registerModal({ + modalId: "video-viewer", + classLoader: async () => await import("tc-shared/video-viewer/Renderer"), + popoutSupported: true +}); + +registerModal({ + modalId: "channel-edit", + classLoader: async () => await import("tc-shared/ui/modal/channel-edit/Renderer"), + popoutSupported: true +}); + +registerModal({ + modalId: "conversation", + classLoader: async () => await import("../../frames/side/PopoutConversationRenderer"), + popoutSupported: true +}); + +registerModal({ + modalId: "css-editor", + classLoader: async () => await import("tc-shared/ui/modal/css-editor/Renderer"), + popoutSupported: true +}); + +registerModal({ + modalId: "channel-tree", + classLoader: async () => await import("tc-shared/ui/tree/popout/RendererModal"), + popoutSupported: true +}); + +registerModal({ + modalId: "modal-connect", + classLoader: async () => await import("tc-shared/ui/modal/connect/Renderer"), + popoutSupported: true +}); diff --git a/shared/js/ui/react-elements/modal/index.ts b/shared/js/ui/react-elements/modal/index.ts new file mode 100644 index 00000000..c9dec036 --- /dev/null +++ b/shared/js/ui/react-elements/modal/index.ts @@ -0,0 +1,31 @@ +import {ModalConstructorArguments} from "tc-shared/ui/react-elements/modal/Definitions"; +import {ModalController, ModalOptions} from "tc-shared/ui/react-elements/ModalDefinitions"; +import {spawnExternalModal} from "tc-shared/ui/react-elements/external-modal"; +import {InternalModal, InternalModalController} from "tc-shared/ui/react-elements/internal-modal/Controller"; +import {findRegisteredModal} from "tc-shared/ui/react-elements/modal/Registry"; + +export function spawnModal(modal: T, constructorArguments: ModalConstructorArguments[T], options?: ModalOptions) : ModalController { + if(options?.popedOut) { + return spawnExternalModal(modal, constructorArguments, options); + } else { + return spawnInternalModal(modal, constructorArguments, options); + } +} + +export function spawnReactModal(modalClass: new () => ModalClass) : InternalModalController; +export function spawnReactModal(modalClass: new (..._: [A1]) => ModalClass, arg1: A1) : InternalModalController; +export function spawnReactModal(modalClass: new (..._: [A1, A2]) => ModalClass, arg1: A1, arg2: A2) : InternalModalController; +export function spawnReactModal(modalClass: new (..._: [A1, A2, A3]) => ModalClass, arg1: A1, arg2: A2, arg3: A3) : InternalModalController; +export function spawnReactModal(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4) : InternalModalController; +export function spawnReactModal(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4, arg5: A5) : InternalModalController; +export function spawnReactModal(modalClass: new (..._: any[]) => ModalClass, ...args: any[]) : InternalModalController { + return new InternalModalController({ + popoutSupported: false, + modalId: "__internal__unregistered", + classLoader: async () => modalClass + }, args); +} + +export function spawnInternalModal(modal: T, constructorArguments: ModalConstructorArguments[T], options?: ModalOptions) : InternalModalController { + return new InternalModalController(findRegisteredModal(modal), constructorArguments); +} \ No newline at end of file diff --git a/shared/js/ui/tree/popout/Controller.ts b/shared/js/ui/tree/popout/Controller.ts index 782f74eb..3158057c 100644 --- a/shared/js/ui/tree/popout/Controller.ts +++ b/shared/js/ui/tree/popout/Controller.ts @@ -1,14 +1,14 @@ import {Registry} from "tc-shared/events"; import {ChannelTreeUIEvents} from "tc-shared/ui/tree/Definitions"; -import {spawnExternalModal} from "tc-shared/ui/react-elements/external-modal"; import {initializeChannelTreeController} from "tc-shared/ui/tree/Controller"; import {ControlBarEvents} from "tc-shared/ui/frames/control-bar/Definitions"; import {initializePopoutControlBarController} from "tc-shared/ui/frames/control-bar/Controller"; import {ChannelTree} from "tc-shared/tree/ChannelTree"; import {ModalController} from "tc-shared/ui/react-elements/ModalDefinitions"; -import {ChannelTreePopoutEvents} from "tc-shared/ui/tree/popout/Definitions"; +import {ChannelTreePopoutConstructorArguments, ChannelTreePopoutEvents} from "tc-shared/ui/tree/popout/Definitions"; import {ConnectionState} from "tc-shared/ConnectionHandler"; import {tr, tra} from "tc-shared/i18n/localize"; +import {spawnModal} from "tc-shared/ui/react-elements/modal"; export class ChannelTreePopoutController { readonly channelTree: ChannelTree; @@ -58,11 +58,15 @@ export class ChannelTreePopoutController { this.controlBarEvents = new Registry(); initializePopoutControlBarController(this.controlBarEvents, this.channelTree.client); - this.popoutInstance = spawnExternalModal("channel-tree", { - tree: this.treeEvents, - controlBar: this.controlBarEvents, - base: this.uiEvents - }, { handlerId: this.channelTree.client.handlerId }, "channel-tree-" + this.channelTree.client.handlerId); + this.popoutInstance = spawnModal("channel-tree", [{ + events: this.uiEvents.generateIpcDescription(), + eventsTree: this.treeEvents.generateIpcDescription(), + eventsControlBar: this.controlBarEvents.generateIpcDescription(), + handlerId: this.channelTree.client.handlerId + } as ChannelTreePopoutConstructorArguments], { + uniqueId: "channel-tree-" + this.channelTree.client.handlerId, + popedOut: true + }); this.popoutInstance.getEvents().one("destroy", () => { this.treeEvents.fire("notify_destroy"); diff --git a/shared/js/ui/tree/popout/Definitions.ts b/shared/js/ui/tree/popout/Definitions.ts index 22e52813..9fd80a87 100644 --- a/shared/js/ui/tree/popout/Definitions.ts +++ b/shared/js/ui/tree/popout/Definitions.ts @@ -1,4 +1,15 @@ +import {IpcRegistryDescription} from "tc-shared/events"; +import {ChannelTreeUIEvents} from "tc-shared/ui/tree/Definitions"; +import {ControlBarEvents} from "tc-shared/ui/frames/control-bar/Definitions"; + export interface ChannelTreePopoutEvents { query_title: {}, notify_title: { title: string } -} \ No newline at end of file +} + +export type ChannelTreePopoutConstructorArguments = { + events: IpcRegistryDescription, + eventsTree: IpcRegistryDescription, + eventsControlBar: IpcRegistryDescription, + handlerId: string +}; \ No newline at end of file diff --git a/shared/js/ui/tree/popout/RendererModal.tsx b/shared/js/ui/tree/popout/RendererModal.tsx index c8a06305..6f4925f4 100644 --- a/shared/js/ui/tree/popout/RendererModal.tsx +++ b/shared/js/ui/tree/popout/RendererModal.tsx @@ -1,12 +1,12 @@ import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions"; -import {Registry, RegistryMap} from "tc-shared/events"; +import {Registry} from "tc-shared/events"; import {ChannelTreeUIEvents} from "tc-shared/ui/tree/Definitions"; import * as React from "react"; import {useState} from "react"; import {ChannelTreeRenderer} from "tc-shared/ui/tree/Renderer"; import {ControlBarEvents} from "tc-shared/ui/frames/control-bar/Definitions"; import {ControlBar2} from "tc-shared/ui/frames/control-bar/Renderer"; -import {ChannelTreePopoutEvents} from "tc-shared/ui/tree/popout/Definitions"; +import {ChannelTreePopoutConstructorArguments, ChannelTreePopoutEvents} from "tc-shared/ui/tree/popout/Definitions"; const TitleRenderer = (props: { events: Registry }) => { const [ title, setTitle ] = useState(() => { @@ -26,13 +26,13 @@ class ChannelTreeModal extends AbstractModal { readonly handlerId: string; - constructor(registryMap: RegistryMap, userData: any) { + constructor(info: ChannelTreePopoutConstructorArguments) { super(); - this.handlerId = userData.handlerId; - this.eventsUI = registryMap["base"] as any; - this.eventsTree = registryMap["tree"] as any; - this.eventsControlBar = registryMap["controlBar"] as any; + this.handlerId = info.handlerId; + this.eventsUI = Registry.fromIpcDescription(info.events); + this.eventsTree = Registry.fromIpcDescription(info.eventsTree); + this.eventsControlBar = Registry.fromIpcDescription(info.eventsControlBar); this.eventsUI.fire("query_title"); } diff --git a/shared/js/ui/utils.ts b/shared/js/ui/utils.ts new file mode 100644 index 00000000..37c9c9cd --- /dev/null +++ b/shared/js/ui/utils.ts @@ -0,0 +1,23 @@ +import * as loader from "tc-loader"; + +const getUrlParameter = key => { + const match = location.search.match(new RegExp("(.*[?&]|^)" + key + "=([^&]+)($|&.*)")); + if(!match) { + return undefined; + } + + return match[2]; +}; + +/** + * Ensure that the module has been loaded within the main application and not + * within a popout. + */ +export function assertMainApplication() { + /* TODO: get this directly from the loader itself */ + if((getUrlParameter("loader-target") || "app") !== "app") { + debugger; + loader.critical_error("Invalid module context", "Module only available in the main app context"); + throw "invalid module context"; + } +} \ No newline at end of file diff --git a/shared/js/ui/utils/IpcVariable.ts b/shared/js/ui/utils/IpcVariable.ts index c7898083..1bf82315 100644 --- a/shared/js/ui/utils/IpcVariable.ts +++ b/shared/js/ui/utils/IpcVariable.ts @@ -27,7 +27,6 @@ class IpcUiVariableProvider extends UiVariableP } protected doSendVariable(variable: string, customData: any, value: any) { - console.error("Sending variable: %o", variable); this.broadcastChannel.postMessage({ type: "notify", diff --git a/shared/js/video-viewer/Controller.ts b/shared/js/video-viewer/Controller.ts index 757dd3f0..03c7c5de 100644 --- a/shared/js/video-viewer/Controller.ts +++ b/shared/js/video-viewer/Controller.ts @@ -1,6 +1,4 @@ -import * as log from "../log"; import {LogCategory, logError, logWarn} from "../log"; -import {spawnExternalModal} from "../ui/react-elements/external-modal"; import {EventHandler, Registry} from "../events"; import {VideoViewerEvents} from "./Definitions"; import {ConnectionHandler} from "../ConnectionHandler"; @@ -11,6 +9,7 @@ import {createErrorModal} from "../ui/elements/Modal"; import {ModalController} from "../ui/react-elements/ModalDefinitions"; import {server_connections} from "tc-shared/ConnectionManager"; import { tr, tra } from "tc-shared/i18n/localize"; +import {spawnModal} from "tc-shared/ui/react-elements/modal"; const parseWatcherId = (id: string): { clientId: number, clientUniqueId: string} => { const [ clientIdString, clientUniqueId ] = id.split(" - "); @@ -41,7 +40,9 @@ class VideoViewer { throw tr("Missing video viewer plugin"); } - this.modal = spawnExternalModal("video-viewer", { default: this.events }, { handlerId: connection.handlerId }); + this.modal = spawnModal("video-viewer", [ this.events.generateIpcDescription(), connection.handlerId ], { + popedOut: false, + }); this.registerPluginListeners(); this.plugin.getCurrentWatchers().forEach(watcher => this.registerWatcherEvents(watcher)); diff --git a/shared/js/video-viewer/Renderer.scss b/shared/js/video-viewer/Renderer.scss index 42db2d00..e8b5f507 100644 --- a/shared/js/video-viewer/Renderer.scss +++ b/shared/js/video-viewer/Renderer.scss @@ -2,9 +2,7 @@ @import "../../css/static/properties"; $sidebar-width: 20em; -.container { - background: #19191b; - +.outerContainer { display: flex; flex-direction: row; justify-content: stretch; @@ -15,13 +13,29 @@ $sidebar-width: 20em; min-height: 10em; min-width: 20em; - position: absolute; + /* We're using the full with by default */ + width: 100vw; + height: 100vh; + + max-height: 100%; + max-width: 100%; + + position: relative; +} + +.container { + background: #19191b; + + display: flex; + flex-direction: row; + justify-content: stretch; top: 0; left: 0; right: 0; bottom: 0; + position: absolute; overflow: hidden; } diff --git a/shared/js/video-viewer/Renderer.tsx b/shared/js/video-viewer/Renderer.tsx index fb6d0160..c803065a 100644 --- a/shared/js/video-viewer/Renderer.tsx +++ b/shared/js/video-viewer/Renderer.tsx @@ -2,14 +2,12 @@ import {LogCategory, logDebug, logTrace} from "tc-shared/log"; import {Translatable} from "tc-shared/ui/react-elements/i18n"; import * as React from "react"; import {useEffect, useRef, useState} from "react"; -import {Registry, RegistryMap} from "tc-shared/events"; +import {IpcRegistryDescription, Registry} from "tc-shared/events"; import {PlayerStatus, VideoViewerEvents} from "./Definitions"; import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots"; import ReactPlayer from 'react-player' import {HTMLRenderer} from "tc-shared/ui/react-elements/HTMLRenderer"; import {Button} from "tc-shared/ui/react-elements/Button"; - -import "tc-shared/file/RemoteAvatars"; import {AvatarRenderer} from "tc-shared/ui/react-elements/Avatar"; import {getGlobalAvatarManagerFactory} from "tc-shared/file/Avatars"; import {Settings, settings} from "tc-shared/settings"; @@ -491,11 +489,11 @@ class ModalVideoPopout extends AbstractModal { readonly events: Registry; readonly handlerId: string; - constructor(registryMap: RegistryMap, userData: any) { + constructor(events: IpcRegistryDescription, handlerId: any) { super(); - this.handlerId = userData.handlerId; - this.events = registryMap["default"] as any; + this.events = Registry.fromIpcDescription(events); + this.handlerId = handlerId; } renderTitle(): string | React.ReactElement { @@ -503,13 +501,17 @@ class ModalVideoPopout extends AbstractModal { } renderBody(): React.ReactElement { - return

- - -
- + return ( +
+
+ + +
+ +
+
-
; + ); } } diff --git a/web/app/ExternalModalFactory.ts b/web/app/ExternalModalFactory.ts index e7e70593..1b3417b3 100644 --- a/web/app/ExternalModalFactory.ts +++ b/web/app/ExternalModalFactory.ts @@ -4,23 +4,24 @@ import * as ipc from "tc-shared/ipc/BrowserIPC"; import {ChannelMessage} from "tc-shared/ipc/BrowserIPC"; import {LogCategory, logDebug, logWarn} from "tc-shared/log"; import {Popout2ControllerMessages, PopoutIPCMessage} from "tc-shared/ui/react-elements/external-modal/IPCMessage"; -import {RegistryMap} from "tc-shared/events"; import {tr, tra} from "tc-shared/i18n/localize"; +import {ModalOptions} from "tc-shared/ui/react-elements/modal/Definitions"; export class ExternalModalController extends AbstractExternalModalController { - private readonly uniqueModalId: string; + private readonly options: ModalOptions; private currentWindow: Window; private windowClosedTestInterval: number = 0; private windowClosedTimeout: number; - constructor(modal: string, registries: RegistryMap, userData: any, uniqueModalId: string) { - super(modal, registries, userData); - this.uniqueModalId = uniqueModalId || modal; + constructor(modalType: string, constructorArguments: any[] | undefined, options: ModalOptions | undefined) { + super(modalType, constructorArguments); + this.options = options || {}; } protected async spawnWindow() : Promise { - if(this.currentWindow) + if(this.currentWindow) { return true; + } this.currentWindow = this.trySpawnWindow0(); if(!this.currentWindow) { @@ -106,7 +107,7 @@ export class ExternalModalController extends AbstractExternalModalController { let baseUrl = location.origin + location.pathname + "?"; return window.open( baseUrl + Object.keys(parameters).map(e => e + "=" + encodeURIComponent(parameters[e])).join("&"), - this.uniqueModalId, + this.options?.uniqueId || this.modalType, Object.keys(features).map(e => e + "=" + features[e]).join(",") ); } diff --git a/web/app/hooks/ExternalModal.ts b/web/app/hooks/ExternalModal.ts index 5504f55d..2da3f6e5 100644 --- a/web/app/hooks/ExternalModal.ts +++ b/web/app/hooks/ExternalModal.ts @@ -7,6 +7,6 @@ loader.register_task(Stage.JAVASCRIPT_INITIALIZING, { priority: 50, name: "external modal controller factory setup", function: async () => { - setExternalModalControllerFactory((modal, events, userData, uniqueModalId) => new ExternalModalController(modal, events, userData, uniqueModalId)); + setExternalModalControllerFactory((modalType, constructorArguments, options) => new ExternalModalController(modalType, constructorArguments, options)); } }); \ No newline at end of file