TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

Updating stuff to the new modal functionality

Browse source
This commit is contained in:
WolverinDEV 2021-01-22 16:50:55 +01:00
parent b819f358f9
commit 9e63ab4dc9
36 changed files with 660 additions and 521 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
shared/js/ConnectionHandler.ts
View file

@ -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,

3
shared/js/ConnectionManager.ts
View file

@ -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: {

264
shared/js/events.ts
View file

@ -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<P> = {
[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<P extends EventMap<P>, T extends keyof P>(type: T, payload?: P[T]) : Event<P, T> {
if(payload) {
(payload as any).type = type;
let event = payload as any as Event<P, T>;
event.as = as;
event.asUnchecked = asUnchecked;
@ -80,7 +83,7 @@ namespace EventHelper {
}
}
export interface EventSender<Events extends { [key: string]: any } = { [key: string]: any }> {
export interface EventSender<Events extends EventMap<Events> = EventMap<any>> {
fire<T extends keyof Events>(event_type: T, data?: Events[T], overrideTypeKey?: boolean);
/**
@ -112,7 +115,7 @@ interface EventHandlerRegisterData {
}
const kEventAnnotationKey = guid();
export class Registry<Events extends { [key: string]: any } = { [key: string]: any }> implements EventSender<Events> {
export class Registry<Events extends EventMap<Events> = EventMap<any>> implements EventSender<Events> {
protected readonly registryUniqueId;
protected persistentEventHandler: { [key: string]: ((event) => void)[] } = {};
@ -120,6 +123,8 @@ export class Registry<Events extends { [key: string]: any } = { [key: string]: a
protected genericEventHandler: ((event) => void)[] = [];
protected consumer: EventConsumer[] = [];
private ipcConsumer: IpcEventBridge;
private debugPrefix = undefined;
private warnUnhandledEvents = false;
@ -129,6 +134,13 @@ export class Registry<Events extends { [key: string]: any } = { [key: string]: a
private pendingReactCallbacks: { type: any, data: any, callback: () => void }[];
private pendingReactCallbacksFrame: number = 0;
static fromIpcDescription<Events extends EventMap<Events> = EventMap<any>>(description: IpcRegistryDescription<Events>) : Registry<Events> {
const registry = new Registry<Events>();
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<Events extends { [key: string]: any } = { [key: string]: a
Object.values(this.oneShotEventHandler).forEach(handlers => 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<Events extends { [key: string]: any } = { [key: string]: a
fire<T extends keyof Events>(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<Events extends { [key: string]: any } = { [key: string]: a
/**
* @param event
* @param handler
* @param condition
* @param condition If a boolean the event handler will only be registered if the condition is true
* @param reactEffectDependencies
*/
reactUse<T extends keyof Events>(event: T, handler: (event?: Events[T] & Event<Events, T>) => void, condition?: boolean, reactEffectDependencies?: any[]) {
reactUse<T extends keyof Events>(event: T | T[], handler: (event: Event<Events, T>) => void, condition?: boolean, reactEffectDependencies?: any[]);
reactUse(event, handler, condition?, reactEffectDependencies?) {
if(typeof condition === "boolean" && !condition) {
useEffect(() => {});
return;
@ -263,8 +279,9 @@ export class Registry<Events extends { [key: string]: any } = { [key: string]: a
useEffect(() => {
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<Events extends { [key: string]: any } = { [key: string]: a
/*
let invokeCount = 0;
if(this.warnUnhandledEvents && invokeCount === 0) {
logWarn(LogCategory.EVENT_REGISTRY, tr("Event handler (%s) triggered event %s which has no consumers."), this.debugPrefix, event.type);
logWarn(LogCategory.EVENT_REGISTRY, "Event handler (%s) triggered event %s which has no consumers.", this.debugPrefix, event.type);
}
*/
}
@ -405,7 +422,7 @@ export class Registry<Events extends { [key: string]: any } = { [key: string]: a
for(const event of Object.keys(data.registeredHandler)) {
for(const handler of data.registeredHandler[event]) {
this.off(event, handler);
this.off(event as any, handler);
}
}
}
@ -420,6 +437,17 @@ export class Registry<Events extends { [key: string]: any } = { [key: string]: a
unregisterConsumer(consumer: EventConsumer) {
this.consumer.remove(consumer);
}
generateIpcDescription() : IpcRegistryDescription<Events> {
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<EventTypes>(events: (keyof EventTypes) | (keyof Eve
}
}
export function ReactEventHandler<ObjectClass = React.Component<any, any>, EventTypes = any>(registry_callback: (object: ObjectClass) => Registry<EventTypes>) {
export function ReactEventHandler<ObjectClass = React.Component<any, any>, Events extends EventMap<Events> = EventMap<any>>(registry_callback: (object: ObjectClass) => Registry<Events>) {
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<ObjectClass = React.Component<any, any>, Event
}
}
export namespace modal {
export namespace settings {
export type ProfileInfo = {
id: string,
name: string,
nickname: string,
identity_type: "teaforo" | "teamspeak" | "nickname",
export type IpcRegistryDescription<Events extends EventMap<Events> = EventMap<any>> = {
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": {}
}
}
}

3
shared/js/main.tsx
View file

@ -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() {

6
shared/js/ui/modal/ModalNewcomer.tsx
View file

@ -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<EventModalNe
}
function initializeStepIdentity(tag: JQuery, event_registry: Registry<EventModalNewcomer>) {
const profile_events = new Registry<emodal.settings.profiles>();
const profile_events = new Registry<SettingProfileEvents>();
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});

168
shared/js/ui/modal/ModalSettings.tsx
View file

@ -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<events.modal.settings.profiles>();
const registry = new Registry<SettingProfileEvents>();
//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<events.modal.settings.profiles>) {
export function initialize_identity_profiles_controller(event_registry: Registry<SettingProfileEvents>) {
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<events.modal.settings.profiles>, settings: ProfileViewSettings) {
export function initialize_identity_profiles_view(container: JQuery, event_registry: Registry<SettingProfileEvents>, 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]]);

10
shared/js/ui/modal/channel-edit/Controller.ts
View file

@ -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();
});

13
shared/js/ui/modal/channel-edit/Renderer.tsx
View file

@ -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<ChannelEditEvents>;
private readonly isChannelCreate: boolean;
constructor(events: Registry<ChannelEditEvents>, isChannelCreate: boolean) {
constructor(events: IpcRegistryDescription<ChannelEditEvents>, 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";
}
}
}
export = ChannelEditModal;

4
shared/js/ui/modal/css-editor/Controller.ts
View file

@ -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<CssEditorEvents>();
cssVariableEditorController(events);
const modal = spawnExternalModal("css-editor", { default: events }, {});
const modal = spawnModal("css-editor", [ events.generateIpcDescription() ], { popedOut: true });
modal.show();
}

4
shared/js/ui/modal/css-editor/Definitions.ts
View file

@ -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 },

13
shared/js/ui/modal/css-editor/Renderer.tsx
View file

@ -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<string> => {
class PopoutConversationUI extends AbstractModal {
private readonly events: Registry<CssEditorEvents>;
private readonly userData: CssEditorUserData;
constructor(registryMap: RegistryMap, userData: CssEditorUserData) {
constructor(events: IpcRegistryDescription<CssEditorEvents>) {
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 <Translatable>"CSS Variable editor"</Translatable>;
}
}

11
shared/js/ui/react-elements/Modal.tsx
View file

@ -1,11 +0,0 @@
import {InternalModal, InternalModalController} from "tc-shared/ui/react-elements/internal-modal/Controller";
export function spawnReactModal<ModalClass extends InternalModal, A1>(modalClass: new () => ModalClass) : InternalModalController<ModalClass>;
export function spawnReactModal<ModalClass extends InternalModal, A1>(modalClass: new (..._: [A1]) => ModalClass, arg1: A1) : InternalModalController<ModalClass>;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2>(modalClass: new (..._: [A1, A2]) => ModalClass, arg1: A1, arg2: A2) : InternalModalController<ModalClass>;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2, A3>(modalClass: new (..._: [A1, A2, A3]) => ModalClass, arg1: A1, arg2: A2, arg3: A3) : InternalModalController<ModalClass>;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2, A3, A4>(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4) : InternalModalController<ModalClass>;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2, A3, A4, A5>(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4, arg5: A5) : InternalModalController<ModalClass>;
export function spawnReactModal<ModalClass extends InternalModal>(modalClass: new (..._: any[]) => ModalClass, ...args: any[]) : InternalModalController<ModalClass> {
return new InternalModalController(new modalClass(...args));
}

62
shared/js/ui/react-elements/ModalDefinitions.ts
View file

@ -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<ModalOptions>;
getEvents() : Registry<ModalEvents>;
getState() : ModalState;
show() : Promise<void>;
hide() : Promise<void>;
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);
}
/* TODO: Remove this! */
import * as definitions from "./modal/Definitions";
export = definitions;

19
shared/js/ui/react-elements/external-modal/Controller.ts
View file

@ -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<ModalEvents>;
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<ModalEvents>();
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;

112
shared/js/ui/react-elements/external-modal/IPCMessage.ts
View file

@ -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<Type extends "controller" | "popout"> {
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<T extends keyof {}>(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<T extends keyof { [p: string]: any }>(eventType: T, data?: { [p: string]: any }[T], callback?: () => void) {
fireEvent("later", eventType, data, callback);
}
fire_react<T extends keyof {}>(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<Type extends "controller" | "popout">
this.ipcChannel.sendMessage(type, payload, this.ipcRemoteId);
}
protected handleTypedIPCMessage<T extends ReceivedIPCMessage[Type]>(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<T extends ReceivedIPCMessage[Type]>(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 = {};
}
}

35
shared/js/ui/react-elements/external-modal/PopoutController.ts
View file

@ -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" });
}

13
shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts
View file

@ -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");

38
shared/js/ui/react-elements/external-modal/PopoutRegistry.ts
View file

@ -1,38 +0,0 @@
import {AbstractModal} from "../../../ui/react-elements/ModalDefinitions";
export interface PopoutHandler {
name: string;
loadClass: <T extends AbstractModal>() => Promise<any>;
}
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")
});

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

@ -53,4 +53,4 @@ html, body {
overflow: auto;
@include chat-scrollbar();
}
}
}

9
shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx
View file

@ -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(
<InternalModalContentRenderer
@ -71,8 +73,9 @@ export class ClientModalRenderer implements ModalRenderer {
}
private updateTitle() {
if(!this.titleContainer)
if(!this.titleContainer) {
return;
}
this.titleElement.innerText = this.titleContainer.textContent;
}

3
shared/js/ui/react-elements/external-modal/PopoutRendererWeb.tsx
View file

@ -65,8 +65,9 @@ export class WebModalRenderer implements ModalRenderer {
}
renderModal(modal: AbstractModal | undefined) {
if(this.currentModal === modal)
if(this.currentModal === modal) {
return;
}
this.currentModal = modal;
this.titleRenderer.setInstance(modal);

12
shared/js/ui/react-elements/external-modal/index.ts
View file

@ -1,17 +1,17 @@
import {RegistryMap} from "../../../events";
import "./Controller";
import {ModalController} from "../../../ui/react-elements/ModalDefinitions"; /* we've to reference him here, else the client would not */
import {ModalController, ModalOptions} from "../ModalDefinitions";
export type ControllerFactory = (modal: string, registryMap: RegistryMap, userData: any, uniqueModalId: string) => ModalController;
export type ControllerFactory = (modalType: string, constructorArguments?: any[], options?: ModalOptions) => ModalController;
let modalControllerFactory: ControllerFactory;
export function setExternalModalControllerFactory(factory: ControllerFactory) {
modalControllerFactory = factory;
}
export function spawnExternalModal<EventClass extends { [key: string]: any }>(modal: string, registryMap: RegistryMap, userData: any, uniqueModalId?: string) : ModalController {
if(typeof modalControllerFactory === "undefined")
export function spawnExternalModal<EventClass extends { [key: string]: any }>(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);
}

27
shared/js/ui/react-elements/internal-modal/Controller.ts
View file

@ -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<InstanceType extends InternalModal = InternalModal> implements ModalController {
export class InternalModalController implements ModalController {
readonly events: Registry<ModalEvents>;
readonly modalInstance: InstanceType;
private readonly modalType: RegisteredModal<any>;
private readonly constructorArguments: any[];
private modalInstance: AbstractModal;
private initializedPromise: Promise<void>;
@ -21,10 +25,12 @@ export class InternalModalController<InstanceType extends InternalModal = Intern
private refModal: React.RefObject<InternalModalRenderer>;
private modalState_: ModalState = ModalState.HIDDEN;
constructor(instance: InstanceType) {
this.modalInstance = instance;
constructor(modalType: RegisteredModal<any>, constructorArguments: any[]) {
this.modalType = modalType;
this.constructorArguments = constructorArguments;
this.events = new Registry<ModalEvents>();
this.initialize();
this.initializedPromise = this.initialize();
}
getOptions(): Readonly<ModalOptions> {
@ -40,17 +46,19 @@ export class InternalModalController<InstanceType extends InternalModal = Intern
return this.modalState_;
}
private initialize() {
private async initialize() {
this.refModal = React.createRef();
this.domElement = document.createElement("div");
this.modalInstance = new (await this.modalType.classLoader())(...this.constructorArguments);
console.error(this.modalInstance);
const element = React.createElement(InternalModalRenderer, {
ref: this.refModal,
modal: this.modalInstance,
onClose: () => this.destroy()
});
document.body.appendChild(this.domElement);
this.initializedPromise = new Promise<void>(resolve => {
await new Promise<void>(resolve => {
ReactDOM.render(element, this.domElement, () => setTimeout(resolve, 0));
});
@ -59,10 +67,11 @@ export class InternalModalController<InstanceType extends InternalModal = Intern
async show() : Promise<void> {
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;

119
shared/js/ui/react-elements/modal/Definitions.ts Normal file
View file

@ -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<ModalOptions>;
getEvents() : Registry<ModalEvents>;
getState() : ModalState;
show() : Promise<void>;
hide() : Promise<void>;
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<VideoViewerEvents>,
/* handlerId */ string,
],
"channel-edit": [
/* events */ IpcRegistryDescription<ChannelEditEvents>,
/* isChannelCreate */ boolean
],
"conversation": any,
"css-editor": any,
"channel-tree": any,
"modal-connect": any
}

56
shared/js/ui/react-elements/modal/Registry.ts Normal file
View file

@ -0,0 +1,56 @@
import {AbstractModal} from "../../../ui/react-elements/ModalDefinitions";
import {ModalConstructorArguments} from "tc-shared/ui/react-elements/modal/Definitions";
export interface RegisteredModal<T extends keyof ModalConstructorArguments> {
modalId: T,
classLoader: () => Promise<new (...args: ModalConstructorArguments[T]) => AbstractModal>,
popoutSupported: boolean
}
const registeredModals: {
[T in keyof ModalConstructorArguments]?: RegisteredModal<T>
} = {};
export function findRegisteredModal<T extends keyof ModalConstructorArguments>(name: T) : RegisteredModal<T> | undefined {
return registeredModals[name] as any;
}
function registerModal<T extends keyof ModalConstructorArguments>(modal: RegisteredModal<T>) {
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
});

31
shared/js/ui/react-elements/modal/index.ts Normal file
View file

@ -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<T extends keyof ModalConstructorArguments>(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 extends InternalModal, A1>(modalClass: new () => ModalClass) : InternalModalController;
export function spawnReactModal<ModalClass extends InternalModal, A1>(modalClass: new (..._: [A1]) => ModalClass, arg1: A1) : InternalModalController;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2>(modalClass: new (..._: [A1, A2]) => ModalClass, arg1: A1, arg2: A2) : InternalModalController;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2, A3>(modalClass: new (..._: [A1, A2, A3]) => ModalClass, arg1: A1, arg2: A2, arg3: A3) : InternalModalController;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2, A3, A4>(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4) : InternalModalController;
export function spawnReactModal<ModalClass extends InternalModal, A1, A2, A3, A4, A5>(modalClass: new (..._: [A1, A2, A3, A4]) => ModalClass, arg1: A1, arg2: A2, arg3: A3, arg4: A4, arg5: A5) : InternalModalController;
export function spawnReactModal<ModalClass extends InternalModal>(modalClass: new (..._: any[]) => ModalClass, ...args: any[]) : InternalModalController {
return new InternalModalController({
popoutSupported: false,
modalId: "__internal__unregistered",
classLoader: async () => modalClass
}, args);
}
export function spawnInternalModal<T extends keyof ModalConstructorArguments>(modal: T, constructorArguments: ModalConstructorArguments[T], options?: ModalOptions) : InternalModalController {
return new InternalModalController(findRegisteredModal(modal), constructorArguments);
}

18
shared/js/ui/tree/popout/Controller.ts
View file

@ -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<ControlBarEvents>();
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");

13
shared/js/ui/tree/popout/Definitions.ts
View file

@ -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 }
}
}
export type ChannelTreePopoutConstructorArguments = {
events: IpcRegistryDescription<ChannelTreePopoutEvents>,
eventsTree: IpcRegistryDescription<ChannelTreeUIEvents>,
eventsControlBar: IpcRegistryDescription<ControlBarEvents>,
handlerId: string
};

14
shared/js/ui/tree/popout/RendererModal.tsx
View file

@ -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<ChannelTreePopoutEvents> }) => {
const [ title, setTitle ] = useState<string>(() => {
@ -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");
}

23
shared/js/ui/utils.ts Normal file
View file

@ -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";
}
}

1
shared/js/ui/utils/IpcVariable.ts
View file

@ -27,7 +27,6 @@ class IpcUiVariableProvider<Variables extends UiVariableMap> extends UiVariableP
}
protected doSendVariable(variable: string, customData: any, value: any) {
console.error("Sending variable: %o", variable);
this.broadcastChannel.postMessage({
type: "notify",

7
shared/js/video-viewer/Controller.ts
View file

@ -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));

22
shared/js/video-viewer/Renderer.scss
View file

@ -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;
}

26
shared/js/video-viewer/Renderer.tsx
View file

@ -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<VideoViewerEvents>;
readonly handlerId: string;
constructor(registryMap: RegistryMap, userData: any) {
constructor(events: IpcRegistryDescription<VideoViewerEvents>, 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<Translatable> {
@ -503,13 +501,17 @@ class ModalVideoPopout extends AbstractModal {
}
renderBody(): React.ReactElement {
return <div className={cssStyle.container} >
<Sidebar events={this.events} handlerId={this.handlerId} />
<ToggleSidebarButton events={this.events} />
<div className={cssStyle.containerPlayer}>
<PlayerController events={this.events} />
return (
<div className={cssStyle.outerContainer}>
<div className={cssStyle.container} >
<Sidebar events={this.events} handlerId={this.handlerId} />
<ToggleSidebarButton events={this.events} />
<div className={cssStyle.containerPlayer}>
<PlayerController events={this.events} />
</div>
</div>
</div>
</div>;
);
}
}

15
web/app/ExternalModalFactory.ts
View file

@ -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<boolean> {
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(",")
);
}

2
web/app/hooks/ExternalModal.ts
View file

@ -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));
}
});