;
+ else if(icon.status === "error")
+ return ;
}
componentDidMount(): void {
- if(this.icon_ref)
- $(this.icon_ref.current).replaceWith(this.props.icon);
+ this.props.icon?.status_change_callbacks.push(this.callback_state_update);
}
+
componentWillUnmount(): void {
- if(this.icon_ref)
- $(this.icon_ref.current).empty();
+ this.props.icon?.status_change_callbacks.remove(this.callback_state_update);
}
}
\ No newline at end of file
diff --git a/shared/js/ui/react-elements/ReactComponentBase.ts b/shared/js/ui/react-elements/ReactComponentBase.ts
index 48cdab1e..636b79e1 100644
--- a/shared/js/ui/react-elements/ReactComponentBase.ts
+++ b/shared/js/ui/react-elements/ReactComponentBase.ts
@@ -1,22 +1,101 @@
import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export enum BatchUpdateType {
+ UNSET = -1,
+ GENERAL = 0,
+ CHANNEL_TREE = 1
+}
+
+interface UpdateBatch {
+ enabled: boolean;
+ enable_count: number;
+
+ update: {
+ c: any;
+ s: any;
+ b: () => void;
+ }[];
+
+ force: {
+ c: any;
+ b: () => void;
+ }[];
+}
+
+const generate_batch = () => { return { enabled: false, enable_count: 0, update: [], force: [] }};
+let update_batches: {[key: number]:UpdateBatch} = {
+ 0: generate_batch(),
+ 1: generate_batch()
+};
+(window as any).update_batches = update_batches;
+
+export function BatchUpdateAssignment(type: BatchUpdateType) {
+ return function (constructor: Function) {
+ if(!ReactComponentBase.prototype.isPrototypeOf(constructor.prototype))
+ throw "Class/object isn't an instance of ReactComponentBase";
+
+ const didMount = constructor.prototype.componentDidMount;
+ constructor.prototype.componentDidMount = function() {
+ if(typeof this.update_batch === "undefined")
+ this.update_batch = update_batches[type];
+
+ if(typeof didMount === "function")
+ didMount.call(this, arguments);
+ };
+ }
+}
export abstract class ReactComponentBase
+
+
+
);
+ }
+
+ return
+ {icons}
+
+ }
+
+ @EventHandler
+ {text}
+
;
+ }
+
+ @EventHandler {
+ event.preventDefault();
+ props.onToggle();
+ }} />
+};
+
+@ReactEventHandler this.onMouseUp(e)}
+ onDoubleClick={() => this.onDoubleClick()}
+ onContextMenu={e => this.onContextMenu(e)}
+ >
+ this.onCollapsedToggle()} collapsed={this.props.channel.collapsed} />}
+
;
+ }
+
+ private onCollapsedToggle() {
+ this.props.channel.collapsed = !this.props.channel.collapsed;
+ }
+
+ private onMouseUp(event: React.MouseEvent) {
+ if(event.button !== 0) return; /* only left mouse clicks */
+
+ const channel = this.props.channel;
+ if(channel.channelTree.isClientMoveActive()) return;
+
+ channel.channelTree.events.fire("action_select_entries", {
+ entries: [ channel ],
+ mode: "auto"
+ });
+ }
+
+ private onDoubleClick() {
+ const channel = this.props.channel;
+ if(channel.channelTree.selection.is_multi_select()) return;
+
+ channel.joinChannel();
+ }
+
+ private onContextMenu(event: React.MouseEvent) {
+ if(settings.static(Settings.KEY_DISABLE_CONTEXT_MENU))
+ return;
+
+ event.preventDefault();
+ const channel = this.props.channel;
+ if(channel.channelTree.selection.is_multi_select() && channel.isSelected())
+ return;
+
+ channel.channelTree.events.fire("action_select_entries", {
+ entries: [ channel ],
+ mode: "exclusive"
+ });
+ channel.showContextMenu(event.pageX, event.pageY);
+ }
+
+ @EventHandler
+ {icons}
+
+ )
+ }
+
+ @EventHandler
+ {this.state.group_prefix + this.props.client.clientNickName() + this.state.group_suffix + this.state.away_message}
+
+ }
+
+ @EventHandler this.onBlur()}
+ onKeyPress={e => this.onKeyPress(e)}
+ />
+ }
+
+ private onBlur() {
+ this.props.editFinished(this.ref_div.current.textContent);
+ }
+
+ private onKeyPress(event: React.KeyboardEvent) {
+ if(event.key === "Enter") {
+ event.preventDefault();
+ this.onBlur();
+ }
+ }
+}
+
+export interface ClientEntryProperties {
+ client: ClientEntryController;
+ depth: number;
+ offset: number;
+}
+
+export interface ClientEntryState {
+ rename: boolean;
+ renameInitialName?: string;
+}
+
+@ReactEventHandler(e => e.props.client.events)
+@BatchUpdateAssignment(BatchUpdateType.CHANNEL_TREE)
+export class ClientEntry extends TreeEntry {
+ shouldComponentUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): boolean {
+ return nextState.rename !== this.state.rename ||
+ nextProps.offset !== this.props.offset ||
+ nextProps.client !== this.props.client ||
+ nextProps.depth !== this.props.depth;
+ }
+
+ render() {
+ return (
+ ("notify_select_state_change")
+ private handleSelectChangeState() {
+ this.forceUpdate();
+ }
+}
\ No newline at end of file
diff --git a/shared/js/ui/tree/Server.scss b/shared/js/ui/tree/Server.scss
new file mode 100644
index 00000000..4509457c
--- /dev/null
+++ b/shared/js/ui/tree/Server.scss
@@ -0,0 +1,33 @@
+.serverEntry {
+ display: flex;
+ flex-direction: row;
+ justify-content: stretch;
+
+ position: relative;
+
+ cursor: pointer;
+ padding-left: 2px;
+ padding-right: 5px;
+
+ .server_type {
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ margin-right: 2px;
+
+ z-index: 1;
+ }
+
+ .name {
+ flex-grow: 1;
+ flex-shrink: 1;
+
+ align-self: center;
+ color: var(--channel-tree-entry-color);
+
+ min-width: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
\ No newline at end of file
diff --git a/shared/js/ui/tree/Server.tsx b/shared/js/ui/tree/Server.tsx
new file mode 100644
index 00000000..9cc6f8e7
--- /dev/null
+++ b/shared/js/ui/tree/Server.tsx
@@ -0,0 +1,127 @@
+import {
+ BatchUpdateAssignment,
+ BatchUpdateType,
+ ReactComponentBase
+} from "tc-shared/ui/react-elements/ReactComponentBase";
+import {ServerEntry as ServerEntryController, ServerEvents} from "../server";
+import * as React from "react";
+import {LocalIconRenderer} from "tc-shared/ui/react-elements/Icon";
+import {EventHandler, ReactEventHandler} from "tc-shared/events";
+import {Settings, settings} from "tc-shared/settings";
+import {TreeEntry, UnreadMarker} from "tc-shared/ui/tree/TreeEntry";
+import {ConnectionEvents, ConnectionState} from "tc-shared/ConnectionHandler";
+
+const serverStyle = require("./Server.scss");
+const viewStyle = require("./View.scss");
+
+
+export interface ServerEntryProperties {
+ server: ServerEntryController;
+ offset: number;
+}
+
+export interface ServerEntryState {
+ connection_state: "connected" | "connecting" | "disconnected";
+}
+
+@ReactEventHandler(e => e.props.server.events)
+@BatchUpdateAssignment(BatchUpdateType.CHANNEL_TREE)
+export class ServerEntry extends TreeEntry {
+ private handle_connection_state_change;
+
+ protected defaultState(): ServerEntryState {
+ return { connection_state: "disconnected" };
+ }
+
+ protected initialize() {
+ this.handle_connection_state_change = (event: ConnectionEvents["notify_connection_state_changed"]) => {
+ switch (event.new_state) {
+ case ConnectionState.AUTHENTICATING:
+ case ConnectionState.CONNECTING:
+ case ConnectionState.INITIALISING:
+ this.setState({ connection_state: "connecting" });
+ break;
+
+ case ConnectionState.CONNECTED:
+ this.setState({ connection_state: "connected" });
+ break;
+
+ case ConnectionState.DISCONNECTING:
+ case ConnectionState.UNCONNECTED:
+ this.setState({ connection_state: "disconnected" });
+ break;
+ }
+ }
+ }
+
+ shouldComponentUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): boolean {
+ return this.state.connection_state !== nextState.connection_state ||
+ this.props.offset !== nextProps.offset ||
+ this.props.server !== nextProps.server;
+ }
+
+ componentDidMount(): void {
+ this.props.server.channelTree.client.events().on("notify_connection_state_changed", this.handle_connection_state_change);
+ }
+
+ componentWillUnmount(): void {
+ this.props.server.channelTree.client.events().off("notify_connection_state_changed", this.handle_connection_state_change);
+ }
+
+ render() {
+ let name = this.props.server.properties.virtualserver_name;
+ if(this.state.connection_state === "disconnected")
+ name = tr("Not connected to any server");
+ else if(this.state.connection_state === "connecting")
+ name = tr("Connecting to ") + this.props.server.remote_address.host + (this.props.server.remote_address.port !== 9987 ? ":" + this.props.server.remote_address.host : "");
+
+ return ("notify_properties_updated")
+ private handlePropertiesUpdated(event: ServerEvents["notify_properties_updated"]) {
+ if(typeof event.updated_properties.virtualserver_name !== "undefined" || typeof event.updated_properties.virtualserver_icon_id !== "undefined") {
+ this.forceUpdate();
+ }
+ }
+
+ @EventHandler("notify_select_state_change")
+ private handleServerSelectStateChange() {
+ this.forceUpdate();
+ }
+}
\ No newline at end of file
diff --git a/shared/js/ui/tree/TreeEntry.tsx b/shared/js/ui/tree/TreeEntry.tsx
new file mode 100644
index 00000000..efa596e1
--- /dev/null
+++ b/shared/js/ui/tree/TreeEntry.tsx
@@ -0,0 +1,26 @@
+import {ReactComponentBase} from "tc-shared/ui/react-elements/ReactComponentBase";
+import {ChannelTreeEntry, ChannelTreeEntryEvents} from "tc-shared/ui/TreeEntry";
+import * as React from "react";
+import {EventHandler, ReactEventHandler} from "tc-shared/events";
+
+const viewStyle = require("./View.scss");
+
+export interface UnreadMarkerProperties {
+ entry: ChannelTreeEntry;
+}
+
+@ReactEventHandler(e => e.props.entry.events)
+export class UnreadMarker extends ReactComponentBase {
+ render() {
+ if(!this.props.entry.isUnread())
+ return null;
+ return ;
+ }
+
+ @EventHandler("notify_unread_state_change")
+ private handleUnreadStateChange() {
+ this.forceUpdate();
+ }
+}
+
+export class TreeEntry extends ReactComponentBase { }
\ No newline at end of file
diff --git a/shared/js/ui/tree/TreeEntryMove.scss b/shared/js/ui/tree/TreeEntryMove.scss
new file mode 100644
index 00000000..5f2bdb3a
--- /dev/null
+++ b/shared/js/ui/tree/TreeEntryMove.scss
@@ -0,0 +1,22 @@
+html:root {
+ --channel-tree-move-color: hsla(220, 5%, 2%, 1);
+ --channel-tree-move-background: hsla(0, 0%, 25%, 1);
+ --channel-tree-move-border: hsla(220, 4%, 40%, 1);
+}
+
+.moveContainer {
+ position: absolute;
+ display: block;
+
+ border: 2px solid var(--channel-tree-move-border);
+ background-color: var(--channel-tree-move-background);
+
+ z-index: 10000;
+ margin-left: 5px;
+
+ padding-left: .25em;
+ padding-right: .25em;
+
+ border-radius: 2px;
+ color: var(--channel-tree-move-color);
+}
\ No newline at end of file
diff --git a/shared/js/ui/tree/TreeEntryMove.tsx b/shared/js/ui/tree/TreeEntryMove.tsx
new file mode 100644
index 00000000..5035a8c3
--- /dev/null
+++ b/shared/js/ui/tree/TreeEntryMove.tsx
@@ -0,0 +1,95 @@
+import {ReactComponentBase} from "tc-shared/ui/react-elements/ReactComponentBase";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {ChannelTreeView} from "tc-shared/ui/tree/View";
+const moveStyle = require("./TreeEntryMove.scss");
+
+export interface TreeEntryMoveProps {
+ onMoveEnd: (point: { x: number, y: number }) => void;
+}
+
+export interface TreeEntryMoveState {
+ tree_view: ChannelTreeView;
+
+ begin: { x: number, y: number };
+ description: string;
+}
+
+export class TreeEntryMove extends ReactComponentBase {
+ private readonly domContainer;
+ private readonly document_mouse_out_listener;
+ private readonly document_mouse_listener;
+ private readonly ref_container: React.RefObject;
+
+ private current: { x: number, y: number };
+
+ constructor(props) {
+ super(props);
+
+ this.ref_container = React.createRef();
+ this.domContainer = document.getElementById("mouse-move");
+ this.document_mouse_out_listener = (e: MouseEvent) => {
+ if(e.type === "mouseup") {
+ if(e.button !== 0) return;
+
+ this.props.onMoveEnd({ x: e.pageX, y: e.pageY });
+ }
+
+ this.disableEntryMove();
+ };
+
+ this.document_mouse_listener = (e: MouseEvent) => {
+ this.current = { x: e.pageX, y: e.pageY };
+ const container = this.ref_container.current;
+ if(!container) return;
+
+ container.style.top = e.pageY + "px";
+ container.style.left = e.pageX + "px";
+ };
+ }
+
+ enableEntryMove(view: ChannelTreeView, description: string, begin: { x: number, y: null }, current: { x: number, y: null }, callback_enabled?: () => void) {
+ this.setState({
+ tree_view: view,
+ begin: begin,
+ description: description
+ }, callback_enabled);
+
+ this.current = current;
+ document.addEventListener("mousemove", this.document_mouse_listener);
+ document.addEventListener("mouseleave", this.document_mouse_out_listener);
+ document.addEventListener("mouseup", this.document_mouse_out_listener);
+ }
+
+ private disableEntryMove() {
+ this.setState({
+ tree_view: null
+ });
+ document.removeEventListener("mousemove", this.document_mouse_listener);
+ document.removeEventListener("mouseleave", this.document_mouse_out_listener);
+ document.removeEventListener("mouseup", this.document_mouse_out_listener);
+ }
+
+ protected defaultState(): TreeEntryMoveState {
+ return {
+ tree_view: null,
+ begin: { x: 0, y: 0},
+ description: ""
+ }
+ }
+
+ isActive() { return !!this.state.tree_view; }
+
+ render() {
+ if(!this.state.tree_view)
+ return null;
+
+ return ReactDOM.createPortal(this.renderPortal(), this.domContainer);
+ }
+
+ private renderPortal() {
+ return (e => e.props.tree.events)
+@BatchUpdateAssignment(BatchUpdateType.CHANNEL_TREE)
+export class ChannelTreeView extends ReactComponentBase {
+ private static readonly EntryHeight = 18;
+
+ private readonly ref_container = React.createRef();
+ private resize_observer: ResizeObserver;
+
+ private flat_tree: FlatTreeEntry[] = [];
+ private listener_client_change;
+ private listener_channel_change;
+ private listener_state_collapsed;
+ private update_timeout;
+
+ private mouse_move: { x: number, y: number, down: boolean, fired: boolean } = { x: 0, y: 0, down: false, fired: false };
+ private document_mouse_listener;
+
+ private in_view_callbacks: {
+ index: number,
+ callback: () => void,
+ timeout
+ }[] = [];
+
+ protected defaultState(): ChannelTreeViewState {
+ return {
+ scroll_offset: 0,
+ view_height: 0,
+ tree_version: 0
+ };
+ }
+
+ componentDidMount(): void {
+ this.resize_observer = new ResizeObserver(entries => {
+ if(entries.length !== 1) {
+ if(entries.length === 0)
+ console.warn("Channel resize observer fired resize event with no entries!");
+ else
+ console.warn("Channel resize observer fired resize event with more than one entry which should not be possible (%d)!", entries.length);
+ return;
+ }
+ const bounds = entries[0].contentRect;
+ if(this.state.view_height !== bounds.height) {
+ console.log("Handling height update and change tree height to %d from %d", bounds.height, this.state.view_height);
+ this.setState({
+ view_height: bounds.height
+ });
+ }
+ });
+ this.resize_observer.observe(this.ref_container.current);
+ }
+
+ componentWillUnmount(): void {
+ this.resize_observer.disconnect();
+ this.resize_observer = undefined;
+ }
+
+ protected initialize() {
+ (window as any).do_tree_update = () => this.handleTreeUpdate();
+ this.listener_client_change = () => this.handleTreeUpdate();
+ this.listener_channel_change = () => this.handleTreeUpdate();
+ this.listener_state_collapsed = () => this.handleTreeUpdate();
+
+ this.document_mouse_listener = (e: MouseEvent) => {
+ if(e.type !== "mouseleave" && e.button !== 0)
+ return;
+
+ this.mouse_move.down = false;
+ this.mouse_move.fired = false;
+
+ this.removeDocumentMouseListener();
+ }
+ }
+
+ private registerDocumentMouseListener() {
+ document.addEventListener("mouseleave", this.document_mouse_listener);
+ document.addEventListener("mouseup", this.document_mouse_listener);
+ }
+
+ private removeDocumentMouseListener() {
+ document.removeEventListener("mouseleave", this.document_mouse_listener);
+ document.removeEventListener("mouseup", this.document_mouse_listener);
+ }
+
+ private handleTreeUpdate() {
+ clearTimeout(this.update_timeout);
+ this.update_timeout = setTimeout(() => {
+ this.rebuild_tree();
+ this.forceUpdate();
+ }, 50);
+ }
+
+ private visibleEntries() {
+ let view_entry_count = Math.ceil(this.state.view_height / ChannelTreeView.EntryHeight);
+ const view_entry_begin = Math.floor(this.state.scroll_offset / ChannelTreeView.EntryHeight);
+ const view_entry_end = Math.min(this.flat_tree.length, view_entry_begin + view_entry_count);
+
+ return {
+ begin: view_entry_begin,
+ end: view_entry_end
+ }
+ }
+
+ render() {
+ const entry_prerender_count = 5;
+ const entry_postrender_count = 5;
+
+ const elements = [];
+ const renderedRange = this.visibleEntries();
+ const view_entry_begin = Math.max(0, renderedRange.begin - entry_prerender_count);
+ const view_entry_end = Math.min(this.flat_tree.length, renderedRange.end + entry_postrender_count);
+
+ for (let index = view_entry_begin; index < view_entry_end; index++)
+ elements.push(this.flat_tree[index].rendered);
+
+ for(const callback of this.in_view_callbacks.slice(0)) {
+ if(callback.index >= renderedRange.begin && callback.index <= renderedRange.end) {
+ clearTimeout(callback.timeout);
+ callback.callback();
+ this.in_view_callbacks.remove(callback);
+ }
+ }
+
+ return (
+ ("notify_root_channel_changed")
+ private handleRootChannelChanged() {
+ this.handleTreeUpdate();
+ }
+
+ @EventHandler("notify_query_view_state_changed")
+ private handleQueryViewStateChange() {
+ this.handleTreeUpdate();
+ }
+
+ @EventHandler("notify_entry_move_begin")
+ private handleEntryMoveBegin() {
+ this.handleTreeUpdate();
+ }
+
+ @EventHandler("notify_entry_move_end")
+ private handleEntryMoveEnd() {
+ this.handleTreeUpdate();
+ }
+
+ @EventHandler("notify_tree_reset")
+ private handleTreeReset() {
+ this.rebuild_tree();
+ this.setState({
+ tree_version: this.state.tree_version + 1
+ });
+ }
+
+ private onScroll() {
+ this.setState({
+ scroll_offset: this.ref_container.current.scrollTop
+ });
+ }
+
+ private onMouseDown(e: React.MouseEvent) {
+ if(e.button !== 0) return; /* left button only */
+
+ this.mouse_move.down = true;
+ this.mouse_move.x = e.pageX;
+ this.mouse_move.y = e.pageY;
+ this.registerDocumentMouseListener();
+ }
+
+ private onMouseMove(e: React.MouseEvent) {
+ if(!this.mouse_move.down || this.mouse_move.fired) return;
+ if(Math.abs((this.mouse_move.x - e.pageX) * (this.mouse_move.y - e.pageY)) > (this.props.moveThreshold || 9)) {
+ this.mouse_move.fired = true;
+ this.props.onMoveStart({x: this.mouse_move.x, y: this.mouse_move.y}, {x: e.pageX, y: e.pageY});
+ }
+ }
+
+ scrollEntryInView(entry: TreeEntry, callback?: () => void) {
+ const index = this.flat_tree.findIndex(e => e.entry === entry);
+ if(index === -1) {
+ if(callback) callback();
+ console.warn("Failed to scroll tree entry in view because its not registered within the view. Entry: %o", entry);
+ return;
+ }
+
+ let new_index;
+ const currentRange = this.visibleEntries();
+ if(index >= currentRange.end - 1) {
+ new_index = index - (currentRange.end - currentRange.begin) + 2;
+ } else if(index < currentRange.begin) {
+ new_index = index;
+ } else {
+ if(callback) callback();
+ return;
+ }
+
+ this.ref_container.current.scrollTop = new_index * ChannelTreeView.EntryHeight;
+
+ if(callback) {
+ let cb = {
+ index: index,
+ callback: callback,
+ timeout: setTimeout(() => {
+ this.in_view_callbacks.remove(cb);
+ callback();
+ }, (Math.abs(new_index - currentRange.begin) / (currentRange.end - currentRange.begin)) * 1500)
+ };
+ this.in_view_callbacks.push(cb);
+ }
+ }
+
+ getEntryFromPoint(pageX: number, pageY: number) {
+ const container = this.ref_container.current;
+ if(!container) return;
+
+ const bounds = container.getBoundingClientRect();
+ pageY -= bounds.y;
+ pageX -= bounds.x;
+
+ if(pageX < 0 || pageY < 0)
+ return undefined;
+
+ if(pageX > container.clientWidth)
+ return undefined;
+
+ const total_offset = container.scrollTop + pageY;
+ return this.flat_tree[Math.floor(total_offset / ChannelTreeView.EntryHeight)]?.entry;
+ }
+}
\ No newline at end of file
diff --git a/shared/js/ui/view.ts b/shared/js/ui/view.ts
deleted file mode 100644
index e237ba3f..00000000
--- a/shared/js/ui/view.ts
+++ /dev/null
@@ -1,940 +0,0 @@
-import * as contextmenu from "tc-shared/ui/elements/ContextMenu";
-import * as log from "tc-shared/log";
-import {Settings, settings} from "tc-shared/settings";
-import {PermissionType} from "tc-shared/permission/PermissionType";
-import {LogCategory} from "tc-shared/log";
-import {KeyCode, SpecialKey} from "tc-shared/PPTListener";
-import {createInputModal} from "tc-shared/ui/elements/Modal";
-import {Sound} from "tc-shared/sound/Sounds";
-import {Group} from "tc-shared/permission/GroupManager";
-import * as server_log from "tc-shared/ui/frames/server_log";
-import {ServerAddress, ServerEntry} from "tc-shared/ui/server";
-import {ClientMover} from "tc-shared/ui/client_move";
-import {ChannelEntry, ChannelSubscribeMode} from "tc-shared/ui/channel";
-import {ClientEntry, ClientType, LocalClientEntry, MusicClientEntry} from "tc-shared/ui/client";
-import {ConnectionHandler, ViewReasonId} from "tc-shared/ConnectionHandler";
-import {spawnYesNo} from "tc-shared/ui/modal/ModalYesNo";
-import {formatMessage} from "tc-shared/ui/frames/chat";
-import {spawnBanClient} from "tc-shared/ui/modal/ModalBanClient";
-import {createChannelModal} from "tc-shared/ui/modal/ModalCreateChannel";
-import * as ppt from "tc-backend/ppt";
-
-export class ChannelTree {
- client: ConnectionHandler;
- server: ServerEntry;
-
- channels: ChannelEntry[] = [];
- clients: ClientEntry[] = [];
-
- currently_selected: ClientEntry | ServerEntry | ChannelEntry | (ClientEntry | ServerEntry)[] = undefined;
- currently_selected_context_callback: (event) => any = undefined;
- readonly client_mover: ClientMover;
-
- private _tag_container: JQuery;
- private _tag_entries: JQuery;
-
- private _tree_detached: boolean = false;
- private _show_queries: boolean;
- private channel_last?: ChannelEntry;
- private channel_first?: ChannelEntry;
-
- private _focused = false;
- private _listener_document_click;
- private _listener_document_key;
-
- private _scroll_bar/*: SimpleBar*/;
-
- constructor(client) {
- this.client = client;
-
- this._tag_container = $.spawn("div").addClass("channel-tree-container");
- this._tag_entries = $.spawn("div").addClass("channel-tree");
- //if('SimpleBar' in window) /* for MSEdge, and may consider Firefox? */
- // this._scroll_bar = new SimpleBar(this._tag_container[0]);
-
- this.client_mover = new ClientMover(this);
- this.reset();
-
- if(!settings.static(Settings.KEY_DISABLE_CONTEXT_MENU, false)) {
- this._tag_container.on("contextmenu", (event) => {
- if(event.isDefaultPrevented()) return;
-
- for(const element of document.elementsFromPoint(event.pageX, event.pageY))
- if(element.classList.contains("channelLine") || element.classList.contains("client"))
- return;
-
- event.preventDefault();
- if($.isArray(this.currently_selected)) { //Multiselect
- (this.currently_selected_context_callback || ((_) => null))(event);
- } else {
- this.onSelect(undefined);
- this.showContextMenu(event.pageX, event.pageY);
- }
- });
- }
-
- this._tag_container.on('resize', this.handle_resized.bind(this));
- this._listener_document_key = event => this.handle_key_press(event);
- this._listener_document_click = event => {
- this._focused = false;
- let element = event.target as HTMLElement;
- while(element) {
- if(element === this._tag_container[0]) {
- this._focused = true;
- break;
- }
- element = element.parentNode as HTMLElement;
- }
- };
- document.addEventListener('click', this._listener_document_click);
- document.addEventListener('keydown', this._listener_document_key);
- }
-
- tag_tree() : JQuery {
- return this._tag_container;
- }
-
- destroy() {
- this._listener_document_click && document.removeEventListener('click', this._listener_document_click);
- this._listener_document_click = undefined;
-
- this._listener_document_key && document.removeEventListener('keydown', this._listener_document_key);
- this._listener_document_key = undefined;
-
- if(this.server) {
- this.server.destroy();
- this.server = undefined;
- }
- this.reset(); /* cleanup channel and clients */
-
- this.channel_first = undefined;
- this.channel_last = undefined;
-
- this._tag_container.remove();
- this.currently_selected = undefined;
- this.currently_selected_context_callback = undefined;
- }
-
- hide_channel_tree() {
- this._tag_entries.detach();
- this._tree_detached = true;
- }
-
- show_channel_tree() {
- this._tree_detached = false;
- if(this._scroll_bar)
- this._tag_entries.appendTo(this._scroll_bar.getContentElement());
- else
- this._tag_entries.appendTo(this._tag_container);
-
- this.channels.forEach(e => {
- e.recalculate_repetitive_name();
- e.reorderClients();
- });
- this._scroll_bar?.recalculate();
- }
-
- showContextMenu(x: number, y: number, on_close: () => void = undefined) {
- let channelCreate =
- this.client.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_TEMPORARY).granted(1) ||
- this.client.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_SEMI_PERMANENT).granted(1) ||
- this.client.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_PERMANENT).granted(1);
-
- contextmenu.spawn_context_menu(x, y,
- {
- type: contextmenu.MenuEntryType.ENTRY,
- icon_class: "client-channel_create",
- name: tr("Create channel"),
- invalidPermission: !channelCreate,
- callback: () => this.spawnCreateChannel()
- },
- contextmenu.Entry.CLOSE(on_close)
- );
- }
-
- initialiseHead(serverName: string, address: ServerAddress) {
- if(this.server) {
- this.server.destroy();
- this.server = undefined;
- }
- this.server = new ServerEntry(this, serverName, address);
- this.server.htmlTag.appendTo(this._tag_entries);
- this.server.initializeListener();
- }
-
- private __deleteAnimation(element: ChannelEntry | ClientEntry) {
- let tag = element instanceof ChannelEntry ? element.rootTag() : element.tag;
- tag.fadeOut("slow", () => {
- tag.detach();
- element.destroy();
- });
- }
-
- rootChannel() : ChannelEntry[] {
- return this.channels.filter(e => e.parent == undefined);
- }
-
- deleteChannel(channel: ChannelEntry) {
- const _this = this;
- for(let index = 0; index < this.channels.length; index++) {
- let entry = this.channels[index];
- let currentEntry = this.channels[index];
- while(currentEntry != undefined && currentEntry != null) {
- if(currentEntry == channel) {
- _this.channels.remove(entry);
- _this.__deleteAnimation(entry);
- entry.channelTree = null;
- index--;
- break;
- } else currentEntry = currentEntry.parent_channel();
- }
- }
-
- this.channels.remove(channel);
- this.__deleteAnimation(channel);
- channel.channelTree = null;
-
- if(channel.channel_previous)
- channel.channel_previous.channel_next = channel.channel_next;
-
- if(channel.channel_next)
- channel.channel_next.channel_previous = channel.channel_previous;
-
- if(channel == this.channel_first)
- this.channel_first = channel.channel_next;
-
- if(channel == this.channel_last)
- this.channel_last = channel.channel_previous;
-
- if(this._scroll_bar) this._scroll_bar.recalculate();
- }
-
- insertChannel(channel: ChannelEntry) {
- channel.channelTree = this;
- this.channels.push(channel);
-
- let elm = undefined;
- let tag = this._tag_entries;
-
- let previous_channel = null;
- if(channel.hasParent()) {
- let parent = channel.parent_channel();
- let siblings = parent.children();
- if(siblings.length == 0) {
- elm = parent.rootTag();
- previous_channel = null;
- } else {
- previous_channel = siblings.last();
- elm = previous_channel.tag;
- }
- tag = parent.siblingTag();
- } else {
- previous_channel = this.channel_last;
-
- if(!this.channel_last)
- this.channel_last = channel;
-
- if(!this.channel_first)
- this.channel_first = channel;
- }
-
- channel.channel_previous = previous_channel;
- channel.channel_next = undefined;
-
- if(previous_channel) {
- channel.channel_next = previous_channel.channel_next;
- previous_channel.channel_next = channel;
-
- if(channel.channel_next)
- channel.channel_next.channel_previous = channel;
- }
-
- let entry = channel.rootTag();
- if(!this._tree_detached)
- entry.css({display: "none"}).fadeIn("slow");
- entry.appendTo(tag);
-
- if(elm != undefined)
- elm.after(entry);
-
- if(channel.channel_previous == channel) /* shall never happen */
- channel.channel_previous = undefined;
- if(channel.channel_next == channel) /* shall never happen */
- channel.channel_next = undefined;
-
- channel.initializeListener();
- channel.update_family_index();
- if(this._scroll_bar) this._scroll_bar.recalculate();
- }
-
- findChannel(channelId: number) : ChannelEntry | undefined {
- for(let index = 0; index < this.channels.length; index++)
- if(this.channels[index].getChannelId() == channelId) return this.channels[index];
- return undefined;
- }
-
- find_channel_by_name(name: string, parent?: ChannelEntry, force_parent: boolean = true) : ChannelEntry | undefined {
- for(let index = 0; index < this.channels.length; index++)
- if(this.channels[index].channelName() == name && (!force_parent || parent == this.channels[index].parent))
- return this.channels[index];
- return undefined;
- }
-
- moveChannel(channel: ChannelEntry, channel_previous: ChannelEntry, parent: ChannelEntry) {
- if(channel_previous != null && channel_previous.parent != parent) {
- console.error(tr("Invalid channel move (different parents! (%o|%o)"), channel_previous.parent, parent);
- return;
- }
-
- if(channel.channel_next)
- channel.channel_next.channel_previous = channel.channel_previous;
-
- if(channel.channel_previous)
- channel.channel_previous.channel_next = channel.channel_next;
-
- if(channel == this.channel_last)
- this.channel_last = channel.channel_previous;
-
- if(channel == this.channel_first)
- this.channel_first = channel.channel_next;
-
-
- channel.channel_next = undefined;
- channel.channel_previous = channel_previous;
- channel.parent = parent;
-
- if(channel_previous) {
- if(channel_previous == this.channel_last)
- this.channel_last = channel;
-
- channel.channel_next = channel_previous.channel_next;
- channel_previous.channel_next = channel;
- channel_previous.rootTag().after(channel.rootTag());
-
- if(channel.channel_next)
- channel.channel_next.channel_previous = channel;
- } else {
- if(parent) {
- let children = parent.children();
- if(children.length <= 1) { //Self should be already in there
- let left = channel.rootTag();
- left.appendTo(parent.siblingTag());
-
- channel.channel_next = undefined;
- } else {
- channel.channel_previous = undefined;
- channel.rootTag().prependTo(parent.siblingTag());
-
- channel.channel_next = children[1]; /* children 0 shall be the channel itself */
- channel.channel_next.channel_previous = channel;
- }
- } else {
- this._tag_entries.find(".server").after(channel.rootTag());
-
- channel.channel_next = this.channel_first;
- if(this.channel_first)
- this.channel_first.channel_previous = channel;
-
- this.channel_first = channel;
- }
- }
-
- channel.update_family_index();
- channel.children(true).forEach(e => e.update_family_index());
- channel.clients(true).forEach(e => e.update_family_index());
-
- if(channel.channel_previous == channel) { /* shall never happen */
- channel.channel_previous = undefined;
- debugger;
- }
- if(channel.channel_next == channel) { /* shall never happen */
- channel.channel_next = undefined;
- debugger;
- }
- }
-
- deleteClient(client: ClientEntry, animate_tag?: boolean) {
- const old_channel = client.currentChannel();
- this.clients.remove(client);
- if(typeof(animate_tag) !== "boolean" || animate_tag)
- this.__deleteAnimation(client);
- else
- client.tag.detach();
- client.onDelete();
-
- if(old_channel) {
- this.client.side_bar.info_frame().update_channel_client_count(old_channel);
- }
-
- const voice_connection = this.client.serverConnection.voice_connection();
- if(client.get_audio_handle()) {
- if(!voice_connection) {
- log.warn(LogCategory.VOICE, tr("Deleting client with a voice handle, but we haven't a voice connection!"));
- } else {
- voice_connection.unregister_client(client.get_audio_handle());
- }
- }
- client.set_audio_handle(undefined);
- if(this._scroll_bar) this._scroll_bar.recalculate();
- }
-
- registerClient(client: ClientEntry) {
- this.clients.push(client);
- client.channelTree = this;
-
- const voice_connection = this.client.serverConnection.voice_connection();
- if(voice_connection)
- client.set_audio_handle(voice_connection.register_client(client.clientId()));
- }
-
- unregisterClient(client: ClientEntry) {
- if(!this.clients.remove(client))
- return;
- }
-
- private _update_timer: number;
- private _reorder_channels = new Set();
-
- insertClient(client: ClientEntry, channel: ChannelEntry) : ClientEntry {
- let newClient = this.findClient(client.clientId());
- if(newClient)
- client = newClient; //Got new client :)
- else {
- this.registerClient(client);
- }
-
- client["_channel"] = channel;
- let tag = client.tag;
-
- if(!this._show_queries && client.properties.client_type == ClientType.CLIENT_QUERY)
- client.tag.hide();
- else if(!this._tree_detached)
- tag.css("display", "none").fadeIn("slow");
-
- tag.appendTo(channel.clientTag());
- channel.reorderClients();
-
- /* schedule a reorder for this channel. */
- this._reorder_channels.add(client.currentChannel());
- if(!this._update_timer) {
- this._update_timer = setTimeout(() => {
- this._update_timer = undefined;
- for(const channel of this._reorder_channels) {
- channel.updateChannelTypeIcon();
- this.client.side_bar.info_frame().update_channel_client_count(channel);
- }
- this._reorder_channels.clear();
- }, 5) as any;
- }
-
- client.update_family_index(); /* why the hell is this here?! */
- if(this._scroll_bar) this._scroll_bar.recalculate();
- return client;
- }
-
- moveClient(client: ClientEntry, channel: ChannelEntry) {
- let oldChannel = client.currentChannel();
- client["_channel"] = channel;
-
- let tag = client.tag;
- tag.detach();
- tag.appendTo(client.currentChannel().clientTag());
- if(oldChannel) {
- oldChannel.updateChannelTypeIcon();
- this.client.side_bar.info_frame().update_channel_client_count(oldChannel);
- }
- if(channel) {
- channel.reorderClients();
- channel.updateChannelTypeIcon();
- this.client.side_bar.info_frame().update_channel_client_count(channel);
- }
- client.updateClientStatusIcons();
- client.update_family_index();
- }
-
- findClient?(clientId: number) : ClientEntry {
- for(let index = 0; index < this.clients.length; index++) {
- if(this.clients[index].clientId() == clientId)
- return this.clients[index];
- }
- return undefined;
- }
-
- find_client_by_dbid?(client_dbid: number) : ClientEntry {
- for(let index = 0; index < this.clients.length; index++) {
- if(this.clients[index].properties.client_database_id == client_dbid)
- return this.clients[index];
- }
- return undefined;
- }
-
- find_client_by_unique_id?(unique_id: string) : ClientEntry {
- for(let index = 0; index < this.clients.length; index++) {
- if(this.clients[index].properties.client_unique_identifier == unique_id)
- return this.clients[index];
- }
- return undefined;
- }
-
- private static same_selected_type(a, b) {
- if(a instanceof ChannelEntry)
- return b instanceof ChannelEntry;
- if(a instanceof ClientEntry)
- return b instanceof ClientEntry;
- if(a instanceof ServerEntry)
- return b instanceof ServerEntry;
- return a == b;
- }
-
- onSelect(entry?: ChannelEntry | ClientEntry | ServerEntry, enforce_single?: boolean, flag_shift?: boolean) {
- if(this.currently_selected && (ppt.key_pressed(SpecialKey.SHIFT) || flag_shift) && entry instanceof ClientEntry) { //Currently we're only supporting client multiselects :D
- if(!entry) return; //Nowhere
-
- if($.isArray(this.currently_selected)) {
- if(!ChannelTree.same_selected_type(this.currently_selected[0], entry)) return; //Not the same type
- } else if(ChannelTree.same_selected_type(this.currently_selected, entry)) {
- this.currently_selected = [this.currently_selected] as any;
- }
- if(entry instanceof ChannelEntry)
- this.currently_selected_context_callback = this.callback_multiselect_channel.bind(this);
- if(entry instanceof ClientEntry)
- this.currently_selected_context_callback = this.callback_multiselect_client.bind(this);
- } else
- this.currently_selected = undefined;
-
- if(!$.isArray(this.currently_selected) || enforce_single) {
- this.currently_selected = entry;
- this._tag_entries.find(".selected").each(function (idx, e) {
- $(e).removeClass("selected");
- });
- } else {
- for(const e of this.currently_selected)
- if(e == entry) {
- this.currently_selected.remove(e);
- if(entry instanceof ChannelEntry)
- (entry as ChannelEntry).channelTag().removeClass("selected");
- else if(entry instanceof ClientEntry)
- (entry as ClientEntry).tag.removeClass("selected");
- else if(entry instanceof ServerEntry)
- (entry as ServerEntry).htmlTag.removeClass("selected");
- if(this.currently_selected.length == 1)
- this.currently_selected = this.currently_selected[0];
- else if(this.currently_selected.length == 0)
- this.currently_selected = undefined;
- //Already selected
- return;
- }
- this.currently_selected.push(entry as any);
- }
-
- if(entry instanceof ChannelEntry)
- (entry as ChannelEntry).channelTag().addClass("selected");
- else if(entry instanceof ClientEntry)
- (entry as ClientEntry).tag.addClass("selected");
- else if(entry instanceof ServerEntry)
- (entry as ServerEntry).htmlTag.addClass("selected");
-
- if(!$.isArray(this.currently_selected)) {
- if(this.currently_selected instanceof ClientEntry && settings.static_global(Settings.KEY_SWITCH_INSTANT_CLIENT)) {
- if(this.currently_selected instanceof MusicClientEntry)
- this.client.side_bar.show_music_player(this.currently_selected as MusicClientEntry);
- else
- this.client.side_bar.show_client_info(this.currently_selected);
- } else if(this.currently_selected instanceof ChannelEntry && settings.static_global(Settings.KEY_SWITCH_INSTANT_CHAT)) {
- this.client.side_bar.channel_conversations().set_current_channel(this.currently_selected.channelId);
- this.client.side_bar.show_channel_conversations();
- } else if(this.currently_selected instanceof ServerEntry && settings.static_global(Settings.KEY_SWITCH_INSTANT_CHAT)) {
- this.client.side_bar.channel_conversations().set_current_channel(0);
- this.client.side_bar.show_channel_conversations();
- }
- }
- }
-
- private callback_multiselect_channel(event) {
- console.log(tr("Multiselect channel"));
- }
- private callback_multiselect_client(event) {
- console.log(tr("Multiselect client"));
- const clients = this.currently_selected as ClientEntry[];
- const music_only = clients.map(e => e instanceof MusicClientEntry ? 0 : 1).reduce((a, b) => a + b, 0) == 0;
- const music_entry = clients.map(e => e instanceof MusicClientEntry ? 1 : 0).reduce((a, b) => a + b, 0) > 0;
- const local_client = clients.map(e => e instanceof LocalClientEntry ? 1 : 0).reduce((a, b) => a + b, 0) > 0;
- let entries: contextmenu.MenuEntry[] = [];
- if (!music_entry && !local_client) { //Music bots or local client cant be poked
- entries.push({
- type: contextmenu.MenuEntryType.ENTRY,
- icon_class: "client-poke",
- name: tr("Poke clients"),
- callback: () => {
- createInputModal(tr("Poke clients"), tr("Poke message:
"), text => true, result => { - if (typeof(result) === "string") { - for (const client of this.currently_selected as ClientEntry[]) - this.client.serverConnection.send_command("clientpoke", { - clid: client.clientId(), - msg: result - }); - - } - }, {width: 400, maxLength: 512}).open(); - } - }); - } - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-move_client_to_own_channel", - name: tr("Move clients to your channel"), - callback: () => { - const target = this.client.getClient().currentChannel().getChannelId(); - for(const client of clients) - this.client.serverConnection.send_command("clientmove", { - clid: client.clientId(), - cid: target - }); - } - }); - if (!local_client) {//local client cant be kicked and/or banned or kicked - entries.push(contextmenu.Entry.HR()); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-kick_channel", - name: tr("Kick clients from channel"), - callback: () => { - createInputModal(tr("Kick clients from channel"), tr("Kick reason:
"), text => true, result => { - if (result) { - for (const client of clients) - this.client.serverConnection.send_command("clientkick", { - clid: client.clientId(), - reasonid: ViewReasonId.VREASON_CHANNEL_KICK, - reasonmsg: result - }); - - } - }, {width: 400, maxLength: 255}).open(); - } - }); - - if (!music_entry) { //Music bots cant be banned or kicked - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-kick_server", - name: tr("Kick clients fom server"), - callback: () => { - createInputModal(tr("Kick clients from server"), tr("Kick reason:
"), text => true, result => { - if (result) { - for (const client of clients) - this.client.serverConnection.send_command("clientkick", { - clid: client.clientId(), - reasonid: ViewReasonId.VREASON_SERVER_KICK, - reasonmsg: result - }); - - } - }, {width: 400, maxLength: 255}).open(); - } - }, { - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-ban_client", - name: tr("Ban clients"), - invalidPermission: !this.client.permissions.neededPermission(PermissionType.I_CLIENT_BAN_MAX_BANTIME).granted(1), - callback: () => { - spawnBanClient(this.client, (clients).map(entry => { - return { - name: entry.clientNickName(), - unique_id: entry.properties.client_unique_identifier - } - }), (data) => { - for (const client of clients) - this.client.serverConnection.send_command("banclient", { - uid: client.properties.client_unique_identifier, - banreason: data.reason, - time: data.length - }, { - flagset: [data.no_ip ? "no-ip" : "", data.no_hwid ? "no-hardware-id" : "", data.no_name ? "no-nickname" : ""] - }).then(() => { - this.client.sound.play(Sound.USER_BANNED); - }); - }); - } - }); - } - if(music_only) { - entries.push(contextmenu.Entry.HR()); - entries.push({ - name: tr("Delete bots"), - icon_class: "client-delete", - disabled: false, - callback: () => { - const param_string = clients.map((_, index) => "{" + index + "}").join(', '); - const param_values = clients.map(client => client.createChatTag(true)); - const tag = $.spawn("div").append(...formatMessage(tr("Do you really want to delete ") + param_string, ...param_values)); - const tag_container = $.spawn("div").append(tag); - spawnYesNo(tr("Are you sure?"), tag_container, result => { - if(result) { - for(const client of clients) - this.client.serverConnection.send_command("musicbotdelete", { - botid: client.properties.client_database_id - }); - } - }); - }, - type: contextmenu.MenuEntryType.ENTRY - }); - } - } - contextmenu.spawn_context_menu(event.pageX, event.pageY, ...entries); - } - - clientsByGroup(group: Group) : ClientEntry[] { - let result = []; - - for(let client of this.clients) { - if(client.groupAssigned(group)) - result.push(client); - } - - return result; - } - - clientsByChannel(channel: ChannelEntry) : ClientEntry[] { - let result = []; - - for(let client of this.clients) { - if(client.currentChannel() == channel) - result.push(client); - } - - return result; - } - - reset(){ - const voice_connection = this.client.serverConnection ? this.client.serverConnection.voice_connection() : undefined; - for(const client of this.clients) { - if(client.get_audio_handle() && voice_connection) { - voice_connection.unregister_client(client.get_audio_handle()); - client.set_audio_handle(undefined); - } - client.destroy(); - } - this.clients = []; - - for(const channel of this.channels) - channel.destroy(); - this.channels = []; - - this._tag_entries.children().detach(); //Dont remove listeners - - this.channel_first = undefined; - this.channel_last = undefined; - } - - spawnCreateChannel(parent?: ChannelEntry) { - createChannelModal(this.client, undefined, parent, this.client.permissions, (properties?, permissions?) => { - if(!properties) return; - properties["cpid"] = parent ? parent.channelId : 0; - log.debug(LogCategory.CHANNEL, tr("Creating a new channel.\nProperties: %o\nPermissions: %o"), properties); - this.client.serverConnection.send_command("channelcreate", properties).then(() => { - let channel = this.find_channel_by_name(properties.channel_name, parent, true); - if(!channel) { - log.error(LogCategory.CHANNEL, tr("Failed to resolve channel after creation. Could not apply permissions!")); - return; - } - if(permissions && permissions.length > 0) { - let perms = []; - for(let perm of permissions) { - perms.push({ - permvalue: perm.value, - permnegated: false, - permskip: false, - permid: perm.type.id - }); - } - - perms[0]["cid"] = channel.channelId; - return this.client.serverConnection.send_command("channeladdperm", perms, { - flagset: ["continueonerror"] - }).then(() => new Promise(resolve => { resolve(channel); }));
- }
-
- return new Promise(resolve => { resolve(channel); })
- }).then(channel => {
- this.client.log.log(server_log.Type.CHANNEL_CREATE, {
- channel: channel.log_data(),
- creator: this.client.getClient().log_data(),
- own_action: true
- });
- this.client.sound.play(Sound.CHANNEL_CREATED);
- });
- });
- }
-
- handle_resized() {
- for(let channel of this.channels)
- channel.handle_frame_resized();
- }
-
- private select_next_channel(channel: ChannelEntry, select_client: boolean) {
- if(select_client) {
- const clients = channel.clients_ordered();
- if(clients.length > 0) {
- this.onSelect(clients[0], true);
- return;
- }
- }
-
- const children = channel.children();
- if(children.length > 0) {
- this.onSelect(children[0], true);
- return;
- }
-
- const next = channel.channel_next;
- if(next) {
- this.onSelect(next, true);
- return;
- }
-
- let parent = channel.parent_channel();
- while(parent) {
- const p_next = parent.channel_next;
- if(p_next) {
- this.onSelect(p_next, true);
- return;
- }
-
- parent = parent.parent_channel();
- }
- }
-
- handle_key_press(event: KeyboardEvent) {
- //console.log("Keydown: %o | %o | %o", this._focused, this.currently_selected, Array.isArray(this.currently_selected));
- if(!this._focused || !this.currently_selected || Array.isArray(this.currently_selected)) return;
-
- if(event.keyCode == KeyCode.KEY_UP) {
- event.preventDefault();
- if(this.currently_selected instanceof ChannelEntry) {
- let previous = this.currently_selected.channel_previous;
-
- if(previous) {
- while(true) {
- const siblings = previous.children();
- if(siblings.length == 0) break;
- previous = siblings.last();
- }
- const clients = previous.clients_ordered();
- if(clients.length > 0) {
- this.onSelect(clients.last(), true);
- return;
- } else {
- this.onSelect(previous, true);
- return;
- }
- } else if(this.currently_selected.hasParent()) {
- const channel = this.currently_selected.parent_channel();
- const clients = channel.clients_ordered();
- if(clients.length > 0) {
- this.onSelect(clients.last(), true);
- return;
- } else {
- this.onSelect(channel, true);
- return;
- }
- } else
- this.onSelect(this.server, true);
- } else if(this.currently_selected instanceof ClientEntry) {
- const channel = this.currently_selected.currentChannel();
- const clients = channel.clients_ordered();
- const index = clients.indexOf(this.currently_selected);
- if(index > 0) {
- this.onSelect(clients[index - 1], true);
- return;
- }
-
- this.onSelect(channel, true);
- return;
- }
-
- } else if(event.keyCode == KeyCode.KEY_DOWN) {
- event.preventDefault();
- if(this.currently_selected instanceof ChannelEntry) {
- this.select_next_channel(this.currently_selected, true);
- } else if(this.currently_selected instanceof ClientEntry){
- const channel = this.currently_selected.currentChannel();
- const clients = channel.clients_ordered();
- const index = clients.indexOf(this.currently_selected);
- if(index + 1 < clients.length) {
- this.onSelect(clients[index + 1], true);
- return;
- }
-
- this.select_next_channel(channel, false);
- } else if(this.currently_selected instanceof ServerEntry)
- this.onSelect(this.channel_first, true);
- } else if(event.keyCode == KeyCode.KEY_RETURN) {
- if(this.currently_selected instanceof ChannelEntry) {
- this.currently_selected.joinChannel();
- }
- }
- }
-
- toggle_server_queries(flag: boolean) {
- if(this._show_queries == flag) return;
- this._show_queries = flag;
-
- const channels: ChannelEntry[] = []
- for(const client of this.clients)
- if(client.properties.client_type == ClientType.CLIENT_QUERY) {
- if(this._show_queries)
- client.tag.show();
- else
- client.tag.hide();
- if(channels.indexOf(client.currentChannel()) == -1)
- channels.push(client.currentChannel());
- }
- }
-
- get_first_channel?() : ChannelEntry {
- return this.channel_first;
- }
-
- unsubscribe_all_channels(subscribe_specified?: boolean) {
- if(!this.client.serverConnection || !this.client.serverConnection.connected())
- return;
-
- this.client.serverConnection.send_command('channelunsubscribeall').then(() => {
- const channels: number[] = [];
- for(const channel of this.channels) {
- if(channel.subscribe_mode == ChannelSubscribeMode.SUBSCRIBED)
- channels.push(channel.getChannelId());
- }
-
- if(channels.length > 0) {
- this.client.serverConnection.send_command('channelsubscribe', channels.map(e => { return {cid: e}; })).catch(error => {
- console.warn(tr("Failed to subscribe to specific channels (%o)"), channels);
- });
- }
- }).catch(error => {
- console.warn(tr("Failed to unsubscribe to all channels! (%o)"), error);
- });
- }
-
- subscribe_all_channels() {
- if(!this.client.serverConnection || !this.client.serverConnection.connected())
- return;
-
- this.client.serverConnection.send_command('channelsubscribeall').then(() => {
- const channels: number[] = [];
- for(const channel of this.channels) {
- if(channel.subscribe_mode == ChannelSubscribeMode.UNSUBSCRIBED)
- channels.push(channel.getChannelId());
- }
-
- if(channels.length > 0) {
- this.client.serverConnection.send_command('channelunsubscribe', channels.map(e => { return {cid: e}; })).catch(error => {
- console.warn(tr("Failed to unsubscribe to specific channels (%o)"), channels);
- });
- }
- }).catch(error => {
- console.warn(tr("Failed to subscribe to all channels! (%o)"), error);
- });
- }
-}
\ No newline at end of file
diff --git a/shared/js/ui/view.tsx b/shared/js/ui/view.tsx
new file mode 100644
index 00000000..b7b2462e
--- /dev/null
+++ b/shared/js/ui/view.tsx
@@ -0,0 +1,1122 @@
+import * as contextmenu from "tc-shared/ui/elements/ContextMenu";
+import {MenuEntryType} from "tc-shared/ui/elements/ContextMenu";
+import * as log from "tc-shared/log";
+import {LogCategory} from "tc-shared/log";
+import {Settings, settings} from "tc-shared/settings";
+import {PermissionType} from "tc-shared/permission/PermissionType";
+import {KeyCode, SpecialKey} from "tc-shared/PPTListener";
+import {Sound} from "tc-shared/sound/Sounds";
+import {Group} from "tc-shared/permission/GroupManager";
+import * as server_log from "tc-shared/ui/frames/server_log";
+import {ServerAddress, ServerEntry} from "tc-shared/ui/server";
+import {ChannelEntry, ChannelSubscribeMode} from "tc-shared/ui/channel";
+import {ClientEntry, LocalClientEntry, MusicClientEntry} from "tc-shared/ui/client";
+import {ConnectionHandler, ViewReasonId} from "tc-shared/ConnectionHandler";
+import {createChannelModal} from "tc-shared/ui/modal/ModalCreateChannel";
+import {Registry} from "tc-shared/events";
+import {ChannelTreeView} from "tc-shared/ui/tree/View";
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import * as ppt from "tc-backend/ppt";
+
+import {batch_updates, BatchUpdateType, flush_batched_updates} from "tc-shared/ui/react-elements/ReactComponentBase";
+import {ChannelTreeEntry} from "tc-shared/ui/TreeEntry";
+import {createInputModal} from "tc-shared/ui/elements/Modal";
+import {spawnBanClient} from "tc-shared/ui/modal/ModalBanClient";
+import {formatMessage} from "tc-shared/ui/frames/chat";
+import {spawnYesNo} from "tc-shared/ui/modal/ModalYesNo";
+import {tra} from "tc-shared/i18n/localize";
+import {TreeEntryMove} from "tc-shared/ui/tree/TreeEntryMove";
+
+export interface ChannelTreeEvents {
+ action_select_entries: {
+ entries: ChannelTreeEntry[],
+ /**
+ * auto := Select/unselect/add/remove depending on the selected state & shift key state
+ * exclusive := Only selected these entries
+ * append := Append these entries to the current selection
+ * remove := Remove these entries from the current selection
+ */
+ mode: "auto" | "exclusive" | "append" | "remove";
+ },
+
+ notify_selection_changed: {},
+ notify_root_channel_changed: {},
+ notify_tree_reset: {},
+ notify_query_view_state_changed: { queries_shown: boolean },
+
+ notify_entry_move_begin: {},
+ notify_entry_move_end: {}
+}
+
+export class ChannelTreeEntrySelect {
+ readonly handle: ChannelTree;
+ selected_entries: ChannelTreeEntry[] = [];
+
+ private readonly handler_select_entries;
+
+ constructor(handle: ChannelTree) {
+ this.handle = handle;
+
+ this.handler_select_entries = e => {
+ batch_updates(BatchUpdateType.CHANNEL_TREE);
+ try {
+ this.handleSelectEntries(e)
+ } finally {
+ flush_batched_updates(BatchUpdateType.CHANNEL_TREE);
+ }
+ };
+
+ this.handle.events.on("action_select_entries", this.handler_select_entries);
+ }
+
+ reset() {
+ this.selected_entries.splice(0, this.selected_entries.length);
+ }
+
+ destroy() {
+ this.handle.events.off("action_select_entries", this.handler_select_entries);
+ this.selected_entries.splice(0, this.selected_entries.length);
+ }
+
+ is_multi_select() {
+ return this.selected_entries.length > 1;
+ }
+
+ is_anything_selected() {
+ return this.selected_entries.length > 0;
+ }
+
+ clear_selection() {
+ this.handleSelectEntries({
+ entries: [],
+ mode: "exclusive"
+ });
+ }
+
+ private handleSelectEntries(event: ChannelTreeEvents["action_select_entries"]) {
+ if(event.mode === "exclusive") {
+ let deleted_entries = this.selected_entries;
+ let new_entries = [];
+
+ this.selected_entries = [];
+ for(const new_entry of event.entries) {
+ if(!deleted_entries.remove(new_entry))
+ new_entries.push(new_entry);
+ this.selected_entries.push(new_entry);
+ }
+
+ for(const deleted of deleted_entries)
+ deleted["onUnselect"]();
+
+ for(const new_entry of new_entries)
+ new_entry["onSelect"](!this.is_multi_select());
+
+ if(deleted_entries.length !== 0 || new_entries.length !== 0)
+ this.handle.events.fire("notify_selection_changed");
+ } else if(event.mode === "append") {
+ let new_entries = [];
+ for(const entry of event.entries) {
+ if(this.selected_entries.findIndex(e => e === entry) !== -1)
+ continue;
+
+ this.selected_entries.push(entry);
+ new_entries.push(entry);
+ }
+
+ for(const new_entry of new_entries)
+ new_entry["onSelect"](!this.is_multi_select());
+
+ if(new_entries.length !== 0)
+ this.handle.events.fire("notify_selection_changed");
+ } else if(event.mode === "remove") {
+ let deleted_entries = [];
+ for(const entry of event.entries) {
+ if(this.selected_entries.remove(entry))
+ deleted_entries.push(entry);
+ }
+
+ for(const deleted of deleted_entries)
+ deleted["onUnselect"]();
+
+ if(deleted_entries.length !== 0)
+ this.handle.events.fire("notify_selection_changed");
+ } else if(event.mode === "auto") {
+ let deleted_entries = [];
+ let new_entries = [];
+
+ if(ppt.key_pressed(SpecialKey.SHIFT)) {
+ for(const entry of event.entries) {
+ const index = this.selected_entries.findIndex(e => e === entry);
+ if(index === -1) {
+ this.selected_entries.push(entry);
+ new_entries.push(entry);
+ } else {
+ this.selected_entries.splice(index, 1);
+ deleted_entries.push(entry);
+ }
+ }
+ } else {
+ deleted_entries = this.selected_entries.splice(0, this.selected_entries.length);
+ if(event.entries.length !== 0) {
+ const entry = event.entries[event.entries.length - 1];
+ this.selected_entries.push(entry);
+ if(!deleted_entries.remove(entry))
+ new_entries.push(entry); /* entry wans't selected yet */
+ }
+ }
+
+ for(const deleted of deleted_entries)
+ deleted["onUnselect"]();
+
+ for(const new_entry of new_entries)
+ new_entry["onSelect"](!this.is_multi_select());
+
+ if(deleted_entries.length !== 0 || new_entries.length !== 0)
+ this.handle.events.fire("notify_selection_changed");
+ } else {
+ console.warn("Received entry select event with unknown mode: %s", event.mode);
+ }
+
+ if(this.selected_entries.length === 1)
+ this.handle.view.current?.scrollEntryInView(this.selected_entries[0] as any);
+ }
+}
+
+export class ChannelTree {
+ readonly events: Registry;
+
+ client: ConnectionHandler;
+ server: ServerEntry;
+
+ channels: ChannelEntry[] = [];
+ clients: ClientEntry[] = [];
+
+ readonly view: React.RefObject;
+ readonly view_move: React.RefObject;
+ readonly selection: ChannelTreeEntrySelect;
+
+ private readonly _tag_container: JQuery;
+
+ private _show_queries: boolean;
+ private channel_last?: ChannelEntry;
+ private channel_first?: ChannelEntry;
+
+ private _tag_container_focused = false;
+ private _listener_document_click;
+ private _listener_document_key;
+
+ constructor(client) {
+ this.events = new Registry();
+ this.client = client;
+ this.view = React.createRef();
+ this.view_move = React.createRef();
+
+ this.server = new ServerEntry(this, "undefined", undefined);
+ this.selection = new ChannelTreeEntrySelect(this);
+
+ this._tag_container = $.spawn("div").addClass("channel-tree-container");
+ ReactDOM.render([
+ this.onChannelEntryMove(a, b)} tree={this} ref={this.view} />,
+ this.onMoveEnd(point.x, point.y)} ref={this.view_move} />
+ ], this._tag_container[0]);
+
+ this.reset();
+
+ if(!settings.static(Settings.KEY_DISABLE_CONTEXT_MENU, false)) {
+ this._tag_container.on("contextmenu", (event) => {
+ event.preventDefault();
+
+ const entry = this.view.current?.getEntryFromPoint(event.pageX, event.pageY);
+ if(entry) {
+ if(this.selection.is_multi_select())
+ this.open_multiselect_context_menu(this.selection.selected_entries, event.pageX, event.pageY);
+ } else {
+ this.selection.clear_selection();
+ this.showContextMenu(event.pageX, event.pageY);
+ }
+ });
+ }
+
+ this._listener_document_key = event => this.handle_key_press(event);
+ this._listener_document_click = event => {
+ this._tag_container_focused = false;
+ let element = event.target as HTMLElement;
+ while(element) {
+ if(element === this._tag_container[0]) {
+ this._tag_container_focused = true;
+ break;
+ }
+ element = element.parentNode as HTMLElement;
+ }
+ };
+ document.addEventListener('click', this._listener_document_click);
+ document.addEventListener('keydown', this._listener_document_key);
+ }
+
+ tag_tree() : JQuery {
+ return this._tag_container;
+ }
+
+ destroy() {
+ ReactDOM.unmountComponentAtNode(this._tag_container[0]);
+
+ this._listener_document_click && document.removeEventListener('click', this._listener_document_click);
+ this._listener_document_click = undefined;
+
+ this._listener_document_key && document.removeEventListener('keydown', this._listener_document_key);
+ this._listener_document_key = undefined;
+
+ if(this.server) {
+ this.server.destroy();
+ this.server = undefined;
+ }
+ this.reset(); /* cleanup channel and clients */
+
+ this.channel_first = undefined;
+ this.channel_last = undefined;
+
+ this._tag_container.remove();
+ this.selection.destroy();
+ this.events.destroy();
+ }
+
+ initialiseHead(serverName: string, address: ServerAddress) {
+ this.server.reset();
+ this.server.remote_address = Object.assign({}, address);
+ this.server.properties.virtualserver_name = serverName;
+ this.events.fire("notify_root_channel_changed");
+ }
+
+ rootChannel() : ChannelEntry[] {
+ const result = [];
+ let first = this.channel_first;
+ while(first) {
+ result.push(first);
+ first = first.channel_next;
+ }
+ return result;
+ }
+
+ deleteChannel(channel: ChannelEntry) {
+ channel.channelTree = null;
+
+ batch_updates(BatchUpdateType.CHANNEL_TREE);
+ try {
+ if(!this.channels.remove(channel))
+ log.warn(LogCategory.CHANNEL, tr("Deleting an unknown channel!"));
+ channel.children(false).forEach(e => this.deleteChannel(e));
+
+ if(channel.clients(false).length !== 0) {
+ log.warn(LogCategory.CHANNEL, tr("Deleting a non empty channel! This could cause some errors."));
+ for(const client of channel.clients(false))
+ this.deleteClient(client, false);
+ }
+
+ const is_root_tree = !!channel.parent;
+ this.unregisterChannelFromTree(channel);
+ if(is_root_tree) this.events.fire("notify_root_channel_changed");
+ } finally {
+ flush_batched_updates(BatchUpdateType.CHANNEL_TREE);
+ }
+ }
+
+ insertChannel(channel: ChannelEntry, previous: ChannelEntry, parent: ChannelEntry) {
+ channel.channelTree = this;
+ this.channels.push(channel);
+
+ this.moveChannel(channel, previous, parent);
+ }
+
+ findChannel(channelId: number) : ChannelEntry | undefined {
+ if(typeof channelId === "string") /* legacy fix */
+ channelId = parseInt(channelId);
+
+ for(let index = 0; index < this.channels.length; index++)
+ if(this.channels[index].channelId === channelId) return this.channels[index];
+ return undefined;
+ }
+
+ find_channel_by_name(name: string, parent?: ChannelEntry, force_parent: boolean = true) : ChannelEntry | undefined {
+ for(let index = 0; index < this.channels.length; index++)
+ if(this.channels[index].channelName() == name && (!force_parent || parent == this.channels[index].parent))
+ return this.channels[index];
+ return undefined;
+ }
+
+ private unregisterChannelFromTree(channel: ChannelEntry, new_parent?: ChannelEntry) {
+ if(channel.parent) {
+ if(channel.parent.child_channel_head === channel)
+ channel.parent.child_channel_head = channel.channel_next;
+
+ /* We need only trigger this once.
+ If the new parent is equal to the old one with applying the "new" parent this event will get triggered */
+ if(new_parent !== channel.parent)
+ channel.parent.events.fire("notify_children_changed");
+ }
+
+ if(channel.channel_previous)
+ channel.channel_previous.channel_next = channel.channel_next;
+
+ if(channel.channel_next)
+ channel.channel_next.channel_previous = channel.channel_previous;
+
+ if(channel === this.channel_last)
+ this.channel_last = channel.channel_previous;
+
+ if(channel === this.channel_first)
+ this.channel_first = channel.channel_next;
+
+ channel.channel_next = undefined;
+ channel.channel_previous = undefined;
+ channel.parent = undefined;
+ }
+
+ moveChannel(channel: ChannelEntry, channel_previous: ChannelEntry, parent: ChannelEntry) {
+ if(channel_previous != null && channel_previous.parent != parent) {
+ console.error(tr("Invalid channel move (different parents! (%o|%o)"), channel_previous.parent, parent);
+ return;
+ }
+
+ let root_tree_updated = !channel.parent;
+ this.unregisterChannelFromTree(channel, parent);
+ channel.channel_previous = channel_previous;
+ channel.channel_next = undefined;
+ channel.parent = parent;
+
+ if(channel_previous) {
+ if(channel_previous == this.channel_last)
+ this.channel_last = channel;
+
+ channel.channel_next = channel_previous.channel_next;
+ channel_previous.channel_next = channel;
+
+ if(channel.channel_next)
+ channel.channel_next.channel_previous = channel;
+
+ if(!channel.parent_channel())
+ root_tree_updated = true;
+ else
+ channel.parent.events.fire("notify_children_changed");
+ } else {
+ if(parent) {
+ let children = parent.children();
+ parent.child_channel_head = channel;
+ if(children.length === 0) { //Self should be already in there
+ channel.channel_next = undefined;
+ } else {
+ channel.channel_next = children[0];
+ channel.channel_next.channel_previous = channel;
+ }
+ parent.events.fire("notify_children_changed");
+ } else {
+ console.error("No previous & paretn!");
+ channel.channel_next = this.channel_first;
+ if(this.channel_first)
+ this.channel_first.channel_previous = channel;
+
+ this.channel_first = channel;
+ this.channel_last = this.channel_last || channel;
+ root_tree_updated = true;
+ }
+ }
+
+ //channel.update_family_index();
+ //channel.children(true).forEach(e => e.update_family_index());
+ //channel.clients(true).forEach(e => e.update_family_index());
+
+ if(channel.channel_previous == channel) { /* shall never happen */
+ channel.channel_previous = undefined;
+ debugger;
+ }
+ if(channel.channel_next == channel) { /* shall never happen */
+ channel.channel_next = undefined;
+ debugger;
+ }
+
+ if(root_tree_updated)
+ this.events.fire("notify_root_channel_changed");
+ }
+
+ deleteClient(client: ClientEntry, animate_tag?: boolean) {
+ const old_channel = client.currentChannel();
+ old_channel?.unregisterClient(client);
+ this.clients.remove(client);
+
+ if(old_channel) {
+ this.client.side_bar.info_frame().update_channel_client_count(old_channel);
+ }
+
+
+ //FIXME: Trigger the notify_clients_changed event!
+ const voice_connection = this.client.serverConnection.voice_connection();
+ if(client.get_audio_handle()) {
+ if(!voice_connection) {
+ log.warn(LogCategory.VOICE, tr("Deleting client with a voice handle, but we haven't a voice connection!"));
+ } else {
+ voice_connection.unregister_client(client.get_audio_handle());
+ }
+ }
+ client.set_audio_handle(undefined);
+ client.destroy();
+ }
+
+ registerClient(client: ClientEntry) {
+ this.clients.push(client);
+ client.channelTree = this;
+
+ const voice_connection = this.client.serverConnection.voice_connection();
+ if(voice_connection)
+ client.set_audio_handle(voice_connection.register_client(client.clientId()));
+ }
+
+ unregisterClient(client: ClientEntry) {
+ if(!this.clients.remove(client))
+ return;
+ }
+
+ insertClient(client: ClientEntry, channel: ChannelEntry) : ClientEntry {
+ batch_updates(BatchUpdateType.CHANNEL_TREE);
+ try {
+ let newClient = this.findClient(client.clientId());
+ if(newClient)
+ client = newClient; //Got new client :)
+ else {
+ this.registerClient(client);
+ }
+
+ client.currentChannel()?.unregisterClient(client);
+ client["_channel"] = channel;
+ channel.registerClient(client);
+
+ return client;
+ } finally {
+ flush_batched_updates(BatchUpdateType.CHANNEL_TREE);
+ }
+ }
+
+ moveClient(client: ClientEntry, channel: ChannelEntry) {
+ batch_updates(BatchUpdateType.CHANNEL_TREE);
+ try {
+ let oldChannel = client.currentChannel();
+ oldChannel?.unregisterClient(client);
+ client["_channel"] = channel;
+ channel?.registerClient(client);
+
+ if(oldChannel) {
+ this.client.side_bar.info_frame().update_channel_client_count(oldChannel);
+ }
+ if(channel) {
+ this.client.side_bar.info_frame().update_channel_client_count(channel);
+ }
+ client.speaking = false;
+ } finally {
+ flush_batched_updates(BatchUpdateType.CHANNEL_TREE);
+ }
+ }
+
+ findClient?(clientId: number) : ClientEntry {
+ for(let index = 0; index < this.clients.length; index++) {
+ if(this.clients[index].clientId() == clientId)
+ return this.clients[index];
+ }
+ return undefined;
+ }
+
+ find_client_by_dbid?(client_dbid: number) : ClientEntry {
+ for(let index = 0; index < this.clients.length; index++) {
+ if(this.clients[index].properties.client_database_id == client_dbid)
+ return this.clients[index];
+ }
+ return undefined;
+ }
+
+ find_client_by_unique_id?(unique_id: string) : ClientEntry {
+ for(let index = 0; index < this.clients.length; index++) {
+ if(this.clients[index].properties.client_unique_identifier == unique_id)
+ return this.clients[index];
+ }
+ return undefined;
+ }
+
+ showContextMenu(x: number, y: number, on_close: () => void = undefined) {
+ let channelCreate =
+ this.client.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_TEMPORARY).granted(1) ||
+ this.client.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_SEMI_PERMANENT).granted(1) ||
+ this.client.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_PERMANENT).granted(1);
+
+ contextmenu.spawn_context_menu(x, y,
+ {
+ type: contextmenu.MenuEntryType.ENTRY,
+ icon_class: "client-channel_create",
+ name: tr("Create channel"),
+ invalidPermission: !channelCreate,
+ callback: () => this.spawnCreateChannel()
+ },
+ contextmenu.Entry.HR(),
+ {
+ type: contextmenu.MenuEntryType.ENTRY,
+ icon_class: "client-channel_collapse_all",
+ name: tr("Collapse all channels"),
+ callback: () => this.collapse_channels()
+ },
+ {
+ type: contextmenu.MenuEntryType.ENTRY,
+ icon_class: "client-channel_expand_all",
+ name: tr("Expend all channels"),
+ callback: () => this.expand_channels()
+ },
+ contextmenu.Entry.CLOSE(on_close)
+ );
+ }
+ private open_multiselect_context_menu(entries: ChannelTreeEntry[], x: number, y: number) {
+ const clients = entries.filter(e => e instanceof ClientEntry) as ClientEntry[];
+ const channels = entries.filter(e => e instanceof ChannelEntry) as ChannelEntry[];
+ const server = entries.find(e => e instanceof ServerEntry) as ServerEntry;
+
+ let client_menu: contextmenu.MenuEntry[];
+ let channel_menu: contextmenu.MenuEntry[];
+ let server_menu: contextmenu.MenuEntry[];
+
+ if(clients.length > 0) {
+ client_menu = [];
+
+ const music_only = clients.map(e => e instanceof MusicClientEntry ? 0 : 1).reduce((a, b) => a + b, 0) == 0;
+ const music_entry = clients.map(e => e instanceof MusicClientEntry ? 1 : 0).reduce((a, b) => a + b, 0) > 0;
+ const local_client = clients.map(e => e instanceof LocalClientEntry ? 1 : 0).reduce((a, b) => a + b, 0) > 0;
+
+ if (!music_entry && !local_client) { //Music bots or local client cant be poked
+ client_menu.push({
+ type: contextmenu.MenuEntryType.ENTRY,
+ icon_class: "client-poke",
+ name: tr("Poke clients"),
+ callback: () => {
+ createInputModal(tr("Poke clients"), tr("Poke message:
"), text => true, result => { + if (typeof(result) === "string") { + for (const client of clients) + this.client.serverConnection.send_command("clientpoke", { + clid: client.clientId(), + msg: result + }); + + this.selection.clear_selection(); + } + }, {width: 400, maxLength: 512}).open(); + } + }); + } + client_menu.push({ + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-move_client_to_own_channel", + name: tr("Move clients to your channel"), + callback: () => { + const target = this.client.getClient().currentChannel().getChannelId(); + for(const client of clients) + this.client.serverConnection.send_command("clientmove", { + clid: client.clientId(), + cid: target + }); + this.selection.clear_selection(); + } + }); + if (!local_client) {//local client cant be kicked and/or banned or kicked + client_menu.push(contextmenu.Entry.HR()); + client_menu.push({ + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-kick_channel", + name: tr("Kick clients from channel"), + callback: () => { + createInputModal(tr("Kick clients from channel"), tr("Kick reason:
"), text => true, result => { + if (result) { + for (const client of clients) + this.client.serverConnection.send_command("clientkick", { + clid: client.clientId(), + reasonid: ViewReasonId.VREASON_CHANNEL_KICK, + reasonmsg: result + }); + } + }, {width: 400, maxLength: 255}).open(); + this.selection.clear_selection(); + } + }); + + if (!music_entry) { //Music bots cant be banned or kicked + client_menu.push({ + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-kick_server", + name: tr("Kick clients fom server"), + callback: () => { + this.selection.clear_selection(); + createInputModal(tr("Kick clients from server"), tr("Kick reason:
"), text => true, result => { + if (result) { + for (const client of clients) + this.client.serverConnection.send_command("clientkick", { + clid: client.clientId(), + reasonid: ViewReasonId.VREASON_SERVER_KICK, + reasonmsg: result + }); + } + }, {width: 400, maxLength: 255}).open(); + } + }, { + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-ban_client", + name: tr("Ban clients"), + invalidPermission: !this.client.permissions.neededPermission(PermissionType.I_CLIENT_BAN_MAX_BANTIME).granted(1), + callback: () => { + this.selection.clear_selection(); + spawnBanClient(this.client, (clients).map(entry => { + return { + name: entry.clientNickName(), + unique_id: entry.properties.client_unique_identifier + } + }), (data) => { + for (const client of clients) + this.client.serverConnection.send_command("banclient", { + uid: client.properties.client_unique_identifier, + banreason: data.reason, + time: data.length + }, { + flagset: [data.no_ip ? "no-ip" : "", data.no_hwid ? "no-hardware-id" : "", data.no_name ? "no-nickname" : ""] + }).then(() => { + this.client.sound.play(Sound.USER_BANNED); + }); + }); + } + }); + } + if(music_only) { + client_menu.push(contextmenu.Entry.HR()); + client_menu.push({ + name: tr("Delete bots"), + icon_class: "client-delete", + disabled: false, + callback: () => { + const param_string = clients.map((_, index) => "{" + index + "}").join(', '); + const param_values = clients.map(client => client.createChatTag(true)); + const tag = $.spawn("div").append(...formatMessage(tr("Do you really want to delete ") + param_string, ...param_values)); + const tag_container = $.spawn("div").append(tag); + spawnYesNo(tr("Are you sure?"), tag_container, result => { + if(result) { + for(const client of clients) + this.client.serverConnection.send_command("musicbotdelete", { + botid: client.properties.client_database_id + }); + this.selection.clear_selection(); + } + }); + }, + type: contextmenu.MenuEntryType.ENTRY + }); + } + } + } + if(channels.length > 0) { + channel_menu = []; + + //TODO: Subscribe mode settings + channel_menu.push({ + type: MenuEntryType.ENTRY, + name: tr("Delete all channels"), + icon_class: "client-delete", + callback: () => { + spawnYesNo(tr("Are you sure?"), tra("Do you really want to delete {0} channels?", channels.length), result => { + if(typeof result === "boolean" && result) { + for(const channel of channels) + this.client.serverConnection.send_command("channeldelete", { cid: channel.channelId }); + this.selection.clear_selection(); + } + }); + } + }); + } + if(server) + server_menu = server.contextMenuItems(); + + const menus = [ + { + text: tr("Apply to all clients"), + menu: client_menu, + icon: "client-user-account" + }, + { + text: tr("Apply to all channels"), + menu: channel_menu, + icon: "client-channel_green" + }, + { + text: tr("Server actions"), + menu: server_menu, + icon: "client-server_green" + } + ].filter(e => !!e.menu); + if(menus.length === 1) { + contextmenu.spawn_context_menu(x, y, ...menus[0].menu); + } else { + contextmenu.spawn_context_menu(x, y, ...menus.map(e => { + return { + icon_class: e.icon, + name: e.text, + type: MenuEntryType.SUB_MENU, + sub_menu: e.menu + } as contextmenu.MenuEntry + })); + } + } + + clientsByGroup(group: Group) : ClientEntry[] { + let result = []; + + for(let client of this.clients) { + if(client.groupAssigned(group)) + result.push(client); + } + + return result; + } + + clientsByChannel(channel: ChannelEntry) : ClientEntry[] { + let result = []; + + for(let client of this.clients) { + if(client.currentChannel() == channel) + result.push(client); + } + + return result; + } + + reset() { + batch_updates(BatchUpdateType.CHANNEL_TREE); + + try { + this.selection.reset(); + + const voice_connection = this.client.serverConnection ? this.client.serverConnection.voice_connection() : undefined; + for(const client of this.clients) { + if(client.get_audio_handle() && voice_connection) { + voice_connection.unregister_client(client.get_audio_handle()); + client.set_audio_handle(undefined); + } + client.destroy(); + } + this.clients = []; + + for(const channel of this.channels) + channel.destroy(); + + this.channels = []; + this.channel_last = undefined; + this.channel_first = undefined; + this.events.fire("notify_tree_reset"); + } finally { + flush_batched_updates(BatchUpdateType.CHANNEL_TREE); + } + } + + spawnCreateChannel(parent?: ChannelEntry) { + createChannelModal(this.client, undefined, parent, this.client.permissions, (properties?, permissions?) => { + if(!properties) return; + properties["cpid"] = parent ? parent.channelId : 0; + log.debug(LogCategory.CHANNEL, tr("Creating a new channel.\nProperties: %o\nPermissions: %o"), properties); + this.client.serverConnection.send_command("channelcreate", properties).then(() => { + let channel = this.find_channel_by_name(properties.channel_name, parent, true); + if(!channel) { + log.error(LogCategory.CHANNEL, tr("Failed to resolve channel after creation. Could not apply permissions!")); + return; + } + if(permissions && permissions.length > 0) { + let perms = []; + for(let perm of permissions) { + perms.push({ + permvalue: perm.value, + permnegated: false, + permskip: false, + permid: perm.type.id + }); + } + + perms[0]["cid"] = channel.channelId; + return this.client.serverConnection.send_command("channeladdperm", perms, { + flagset: ["continueonerror"] + }).then(() => new Promise(resolve => { resolve(channel); }));
+ }
+
+ return new Promise(resolve => { resolve(channel); })
+ }).then(channel => {
+ this.client.log.log(server_log.Type.CHANNEL_CREATE, {
+ channel: channel.log_data(),
+ creator: this.client.getClient().log_data(),
+ own_action: true
+ });
+ this.client.sound.play(Sound.CHANNEL_CREATED);
+ });
+ });
+ }
+
+ private select_next_channel(channel: ChannelEntry, select_client: boolean) {
+ if(select_client) {
+ const clients = channel.clients_ordered();
+ if(clients.length > 0) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ clients[0] ]
+ });
+ return;
+ }
+ }
+
+ const children = channel.children();
+ if(children.length > 0) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ children[0] ]
+ });
+ return;
+ }
+
+ const next = channel.channel_next;
+ if(next) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ next ]
+ });
+ return;
+ }
+
+ let parent = channel.parent_channel();
+ while(parent) {
+ const p_next = parent.channel_next;
+ if(p_next) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ p_next ]
+ });
+ return;
+ }
+
+ parent = parent.parent_channel();
+ }
+ }
+
+ handle_key_press(event: KeyboardEvent) {
+ if(!this._tag_container_focused || !this.selection.is_anything_selected() || this.selection.is_multi_select()) return;
+
+ const selected = this.selection.selected_entries[0];
+ if(event.keyCode == KeyCode.KEY_UP) {
+ event.preventDefault();
+ if(selected instanceof ChannelEntry) {
+ let previous = selected.channel_previous;
+
+ if(previous) {
+ while(true) {
+ const siblings = previous.children();
+ if(siblings.length == 0) break;
+ previous = siblings.last();
+ }
+ const clients = previous.clients_ordered();
+ if(clients.length > 0) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ clients.last() ]
+ });
+ return;
+ } else {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ previous ]
+ });
+ return;
+ }
+ } else if(selected.hasParent()) {
+ const channel = selected.parent_channel();
+ const clients = channel.clients_ordered();
+ if(clients.length > 0) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ clients.last() ]
+ });
+ return;
+ } else {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ channel ]
+ });
+ return;
+ }
+ } else {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ this.server ]
+ });
+ }
+ } else if(selected instanceof ClientEntry) {
+ const channel = selected.currentChannel();
+ const clients = channel.clients_ordered();
+ const index = clients.indexOf(selected);
+ if(index > 0) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ clients[index - 1] ]
+ });
+ return;
+ }
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ channel ]
+ });
+ return;
+ }
+
+ } else if(event.keyCode == KeyCode.KEY_DOWN) {
+ event.preventDefault();
+ if(selected instanceof ChannelEntry) {
+ this.select_next_channel(selected, true);
+ } else if(selected instanceof ClientEntry){
+ const channel = selected.currentChannel();
+ const clients = channel.clients_ordered();
+ const index = clients.indexOf(selected);
+ if(index + 1 < clients.length) {
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ clients[index + 1] ]
+ });
+ return;
+ }
+
+ this.select_next_channel(channel, false);
+ } else if(selected instanceof ServerEntry)
+ this.events.fire("action_select_entries", {
+ mode: "exclusive",
+ entries: [ this.channel_first ]
+ });
+ } else if(event.keyCode == KeyCode.KEY_RETURN) {
+ if(selected instanceof ChannelEntry) {
+ selected.joinChannel();
+ }
+ }
+ }
+
+ toggle_server_queries(flag: boolean) {
+ if(this._show_queries == flag) return;
+ this._show_queries = flag;
+
+ this.events.fire("notify_query_view_state_changed", { queries_shown: flag });
+ }
+ areServerQueriesShown() { return this._show_queries; }
+
+ get_first_channel?() : ChannelEntry {
+ return this.channel_first;
+ }
+
+ unsubscribe_all_channels(subscribe_specified?: boolean) {
+ if(!this.client.serverConnection || !this.client.serverConnection.connected())
+ return;
+
+ this.client.serverConnection.send_command('channelunsubscribeall').then(() => {
+ const channels: number[] = [];
+ for(const channel of this.channels) {
+ if(channel.subscribe_mode == ChannelSubscribeMode.SUBSCRIBED)
+ channels.push(channel.getChannelId());
+ }
+
+ if(channels.length > 0) {
+ this.client.serverConnection.send_command('channelsubscribe', channels.map(e => { return {cid: e}; })).catch(error => {
+ console.warn(tr("Failed to subscribe to specific channels (%o)"), channels);
+ });
+ }
+ }).catch(error => {
+ console.warn(tr("Failed to unsubscribe to all channels! (%o)"), error);
+ });
+ }
+
+ subscribe_all_channels() {
+ if(!this.client.serverConnection || !this.client.serverConnection.connected())
+ return;
+
+ this.client.serverConnection.send_command('channelsubscribeall').then(() => {
+ const channels: number[] = [];
+ for(const channel of this.channels) {
+ if(channel.subscribe_mode == ChannelSubscribeMode.UNSUBSCRIBED)
+ channels.push(channel.getChannelId());
+ }
+
+ if(channels.length > 0) {
+ this.client.serverConnection.send_command('channelunsubscribe', channels.map(e => { return {cid: e}; })).catch(error => {
+ console.warn(tr("Failed to unsubscribe to specific channels (%o)"), channels);
+ });
+ }
+ }).catch(error => {
+ console.warn(tr("Failed to subscribe to all channels! (%o)"), error);
+ });
+ }
+
+ expand_channels(root?: ChannelEntry) {
+ if(typeof root === "undefined")
+ this.rootChannel().forEach(e => this.expand_channels(e));
+ else {
+ root.collapsed = false;
+ for(const child of root.children(false))
+ this.expand_channels(child);
+ }
+ }
+
+ collapse_channels(root?: ChannelEntry) {
+ if(typeof root === "undefined")
+ this.rootChannel().forEach(e => this.collapse_channels(e));
+ else {
+ root.collapsed = true;
+ for(const child of root.children(false))
+ this.collapse_channels(child);
+ }
+ }
+
+ private onChannelEntryMove(start, current) {
+ const move = this.view_move.current;
+ if(!move) return;
+
+ const target = this.view.current.getEntryFromPoint(start.x, start.y);
+ if(target && this.selection.selected_entries.findIndex(e => e === target) === -1)
+ this.events.fire("action_select_entries", { mode: "auto", entries: [ target ]});
+
+ const selection = this.selection.selected_entries;
+ if(selection.length === 0 || selection.filter(e => !(e instanceof ClientEntry)).length > 0)
+ return;
+
+ move.enableEntryMove(this.view.current, selection.map(e => e as ClientEntry).map(e => e.clientNickName()).join(","), start, current, () => {
+ this.events.fire("notify_entry_move_begin");
+ });
+ }
+
+ private onMoveEnd(x: number, y: number) {
+ batch_updates(BatchUpdateType.CHANNEL_TREE);
+ try {
+ this.events.fire("notify_entry_move_end");
+
+ const selection = this.selection.selected_entries.filter(e => e instanceof ClientEntry) as ClientEntry[];
+ if(selection.length === 0) return;
+ this.selection.clear_selection();
+
+ const target = this.view.current.getEntryFromPoint(x, y);
+ let target_channel: ChannelEntry;
+ if(target instanceof ClientEntry)
+ target_channel = target.currentChannel();
+ else if(target instanceof ChannelEntry)
+ target_channel = target;
+ if(!target_channel) return;
+
+ selection.filter(e => e.currentChannel() !== target_channel).forEach(e => {
+ this.client.serverConnection.send_command("clientmove", {
+ clid: e.clientId(),
+ cid: target_channel.channelId
+ });
+ });
+ } finally {
+ flush_batched_updates(BatchUpdateType.CHANNEL_TREE);
+ }
+ }
+
+ isClientMoveActive() {
+ return !!this.view_move.current?.isActive();
+ }
+}
\ No newline at end of file
diff --git a/tools/dtsgen/declare_fixup.ts b/tools/dtsgen/declare_fixup.ts
index b39eea28..cc9b0f12 100644
--- a/tools/dtsgen/declare_fixup.ts
+++ b/tools/dtsgen/declare_fixup.ts
@@ -12,4 +12,6 @@ export function fix_declare_global(nodes: ts.Node[]) : ts.Node[] {
if(has_export) return nodes;
return [];
-}
\ No newline at end of file
+}
+
+SyntaxKind.PlusEqualsToken
\ No newline at end of file
diff --git a/tsbaseconfig.json b/tsbaseconfig.json
index 167763c2..2d9d3f12 100644
--- a/tsbaseconfig.json
+++ b/tsbaseconfig.json
@@ -16,6 +16,7 @@
"webpack/ManifestPlugin.ts",
"webpack/EJSGenerator.ts",
"webpack/WatLoader.ts",
+ "webpack/DevelBlocks.ts",
"file.ts"
],
diff --git a/web/js/codec/CodecWrapperWorker.ts b/web/js/codec/CodecWrapperWorker.ts
index 7350bbdb..91526a66 100644
--- a/web/js/codec/CodecWrapperWorker.ts
+++ b/web/js/codec/CodecWrapperWorker.ts
@@ -54,19 +54,22 @@ export class CodecWrapperWorker extends BasicCodec {
async initialise() : Promise {
if(this._initialized) return;
+ if(this._initialize_promise)
+ return await this._initialize_promise;
this._initialize_promise = this.spawn_worker().then(() => this.execute("initialise", {
type: this.type,
channelCount: this.channelCount,
})).then(result => {
- if(result.success)
+ if(result.success) {
+ this._initialized = true;
return Promise.resolve(true);
+ }
log.error(LogCategory.VOICE, tr("Failed to initialize codec %s: %s"), CodecType[this.type], result.error);
return Promise.reject(result.error);
});
- this._initialized = true;
await this._initialize_promise;
}
@@ -81,6 +84,8 @@ export class CodecWrapperWorker extends BasicCodec {
}
async decode(data: Uint8Array): Promise {
+ if(!this.initialized()) throw "codec not initialized/initialize failed";
+
const result = await this.execute("decodeSamples", { data: data, length: data.length });
if(result.timings.downstream > 5 || result.timings.upstream > 5 || result.timings.handle > 5)
log.warn(LogCategory.VOICE, tr("Worker message stock time: {downstream: %dms, handle: %dms, upstream: %dms}"), result.timings.downstream, result.timings.handle, result.timings.upstream);
@@ -102,6 +107,8 @@ export class CodecWrapperWorker extends BasicCodec {
}
async encode(data: AudioBuffer) : Promise {
+ if(!this.initialized()) throw "codec not initialized/initialize failed";
+
let buffer = new Float32Array(this.channelCount * data.length);
for (let offset = 0; offset < data.length; offset++) {
for (let channel = 0; channel < this.channelCount; channel++)
diff --git a/web/js/connection/ServerConnection.ts b/web/js/connection/ServerConnection.ts
index 7eb3ba2c..ccd2898b 100644
--- a/web/js/connection/ServerConnection.ts
+++ b/web/js/connection/ServerConnection.ts
@@ -345,9 +345,11 @@ export class ServerConnection extends AbstractServerConnection {
return;
}
if(json["type"] === "command") {
+ /* devel-block(log-networking-commands) */
let group = log.group(log.LogType.DEBUG, LogCategory.NETWORKING, tr("Handling command '%s'"), json["command"]);
group.log(tr("Handling command '%s'"), json["command"]);
group.group(log.LogType.TRACE, tr("Json:")).collapsed(true).log("%o", json).end();
+ /* devel-block-end */
this._command_boss.invoke_handle({
command: json["command"],
@@ -361,7 +363,9 @@ export class ServerConnection extends AbstractServerConnection {
if(this._voice_connection)
this._voice_connection.start_rtc_session(); /* FIXME: Move it to a handler boss and not here! */
}
+ /* devel-block(log-networking-commands) */
group.end();
+ /* devel-block-end */
} else if(json["type"] === "WebRTC") {
if(this._voice_connection)
this._voice_connection.handleControlPacket(json);
diff --git a/web/js/voice/VoiceHandler.ts b/web/js/voice/VoiceHandler.ts
index c4077273..0eef79c4 100644
--- a/web/js/voice/VoiceHandler.ts
+++ b/web/js/voice/VoiceHandler.ts
@@ -77,10 +77,7 @@ export namespace codec {
this.entries[index].instance.initialise().then((flag) => {
//TODO test success flag
this.ownCodec(clientId, callback_encoded, false).then(resolve).catch(reject);
- }).catch(error => {
- log.error(LogCategory.VOICE, tr("Could not initialize codec!\nError: %o"), error);
- reject(typeof(error) === 'string' ? error : tr("Could not initialize codec!"));
- });
+ }).catch(reject);
}
return;
} else if(this.entries[index].owner == 0) {
@@ -388,8 +385,9 @@ export class VoiceConnection extends AbstractVoiceConnection {
let config: RTCConfiguration = {};
config.iceServers = [];
config.iceServers.push({ urls: 'stun:stun.l.google.com:19302' });
+ //config.iceServers.push({ urls: "stun:stun.teaspeak.de:3478" });
this.rtcPeerConnection = new RTCPeerConnection(config);
- const dataChannelConfig = { ordered: true, maxRetransmits: 0 };
+ const dataChannelConfig = { ordered: false, maxRetransmits: 0 };
this.dataChannel = this.rtcPeerConnection.createDataChannel('main', dataChannelConfig);
this.dataChannel.onmessage = this.on_data_channel_message.bind(this);
@@ -401,6 +399,8 @@ export class VoiceConnection extends AbstractVoiceConnection {
sdpConstraints.offerToReceiveVideo = false;
sdpConstraints.voiceActivityDetection = true;
+ this.rtcPeerConnection.onicegatheringstatechange = () => console.log("ICE gathering state changed to %s", this.rtcPeerConnection.iceGatheringState);
+ this.rtcPeerConnection.oniceconnectionstatechange = () => console.log("ICE connection state changed to %s", this.rtcPeerConnection.iceConnectionState);
this.rtcPeerConnection.onicecandidate = this.on_local_ice_candidate.bind(this);
if(this.local_audio_stream) { //May a typecheck?
this.rtcPeerConnection.addStream(this.local_audio_stream.stream);
@@ -431,8 +431,26 @@ export class VoiceConnection extends AbstractVoiceConnection {
this.connection.client.update_voice_status(undefined);
}
+ private registerRemoteICECandidate(candidate: RTCIceCandidate) {
+ if(candidate.candidate === "") {
+ console.log("Adding end candidate");
+ this.rtcPeerConnection.addIceCandidate(null).catch(error => {
+ log.info(LogCategory.VOICE, tr("Failed to add remote cached ice candidate finish: %o"), error);
+ });
+ return;
+ }
+
+ const pcandidate = new RTCIceCandidate(candidate);
+ if(pcandidate.protocol !== "tcp") return; /* UDP does not work currently */
+
+ log.info(LogCategory.VOICE, tr("Add remote ice! (%o)"), pcandidate);
+ this.rtcPeerConnection.addIceCandidate(pcandidate).catch(error => {
+ log.info(LogCategory.VOICE, tr("Failed to add remote cached ice candidate %o: %o"), candidate, error);
+ });
+ }
+
private _ice_use_cache: boolean = true;
- private _ice_cache: any[] = [];
+ private _ice_cache: RTCIceCandidate[] = [];
handleControlPacket(json) {
if(json["request"] === "answer") {
const session_description = new RTCSessionDescription(json["msg"]);
@@ -440,24 +458,20 @@ export class VoiceConnection extends AbstractVoiceConnection {
this.rtcPeerConnection.setRemoteDescription(session_description).then(() => {
log.info(LogCategory.VOICE, tr("Answer applied successfully. Applying ICE candidates (%d)."), this._ice_cache.length);
this._ice_use_cache = false;
- for(let msg of this._ice_cache) {
- this.rtcPeerConnection.addIceCandidate(new RTCIceCandidate(msg)).catch(error => {
- log.info(LogCategory.VOICE, tr("Failed to add remote cached ice candidate %s: %o"), msg, error);
- });
- }
+
+ for(let candidate of this._ice_cache)
+ this.registerRemoteICECandidate(candidate);
this._ice_cache = [];
}).catch(error => {
log.info(LogCategory.VOICE, tr("Failed to apply remote description: %o"), error); //FIXME error handling!
});
- } else if(json["request"] === "ice") {
+ } else if(json["request"] === "ice" || json["request"] === "ice_finish") {
+ const candidate = new RTCIceCandidate(json["msg"]);
if(!this._ice_use_cache) {
- log.info(LogCategory.VOICE, tr("Add remote ice! (%o)"), json["msg"]);
- this.rtcPeerConnection.addIceCandidate(new RTCIceCandidate(json["msg"])).catch(error => {
- log.info(LogCategory.VOICE, tr("Failed to add remote ice candidate %s: %o"), json["msg"], error);
- });
+ this.registerRemoteICECandidate(candidate);
} else {
log.info(LogCategory.VOICE, tr("Cache remote ice! (%o)"), json["msg"]);
- this._ice_cache.push(json["msg"]);
+ this._ice_cache.push(candidate);
}
} else if(json["request"] == "status") {
if(json["state"] == "failed") {
@@ -472,22 +486,25 @@ export class VoiceConnection extends AbstractVoiceConnection {
}
//TODO handle fail specially when its not allowed to reconnect
}
+ } else {
+ log.warn(LogCategory.NETWORKING, tr("Received unknown web client control packet: %s"), json["request"]);
}
}
private on_local_ice_candidate(event: RTCPeerConnectionIceEvent) {
if (event) {
- //if(event.candidate && event.candidate.protocol !== "udp")
- // return;
+ if(event.candidate && event.candidate.protocol !== "tcp")
+ return;
- log.info(LogCategory.VOICE, tr("Gathered local ice candidate %o."), event.candidate);
if(event.candidate) {
+ log.info(LogCategory.VOICE, tr("Gathered local ice candidate for stream %d: %s"), event.candidate.sdpMLineIndex, event.candidate.candidate);
this.connection.sendData(JSON.stringify({
type: 'WebRTC',
request: "ice",
msg: event.candidate,
}));
} else {
+ log.info(LogCategory.VOICE, tr("Local ICE candidate gathering finish."));
this.connection.sendData(JSON.stringify({
type: 'WebRTC',
request: "ice_finish"
diff --git a/web/js/workers/codec/CodecWorker.ts b/web/js/workers/codec/CodecWorker.ts
index 9ef301b4..e27ddad3 100644
--- a/web/js/workers/codec/CodecWorker.ts
+++ b/web/js/workers/codec/CodecWorker.ts
@@ -64,6 +64,9 @@ async function handle_message(command: string, data: any) : Promise { return {
{
loader: 'css-loader',
options: {
- modules: true,
+ modules: {
+ mode: "local",
+ localIdentName: isDevelopment ? "[path][name]__[local]--[hash:base64:5]" : "[hash:base64]",
+ },
sourceMap: isDevelopment
}
},
@@ -141,6 +144,12 @@ export const config = async (target: "web" | "client") => { return {
};
}
}
+ },
+ {
+ loader: "./webpack/DevelBlocks.js",
+ options: {
+ enabled: true
+ }
}
]
},
diff --git a/webpack/DevelBlocks.ts b/webpack/DevelBlocks.ts
new file mode 100644
index 00000000..06431988
--- /dev/null
+++ b/webpack/DevelBlocks.ts
@@ -0,0 +1,27 @@
+import {RawSourceMap} from "source-map";
+import * as webpack from "webpack";
+import * as loaderUtils from "loader-utils";
+
+import LoaderContext = webpack.loader.LoaderContext;
+
+export default function loader(this: LoaderContext, source: string | Buffer, sourceMap?: RawSourceMap): string | Buffer | void | undefined {
+ this.cacheable();
+
+ const options = loaderUtils.getOptions(this);
+ if(!options.enabled) {
+ this.callback(null, source);
+ return;
+ }
+
+ const start_regex = "devel-block\\((?\\S+)\\)";
+ const end_regex = "devel-block-end";
+
+ const pattern = new RegExp("[\\t ]*\\/\\* ?" + start_regex + " ?\\*\\/[\\s\\S]*?\\/\\* ?" + end_regex + " ?\\*\\/[\\t ]*\\n?", "g");
+ source = (source as string).replace(pattern, (value, type) => {
+ if(type === "log-networking-commands")
+ return value;
+
+ return "/* snipped block \"" + type + "\" */";
+ });
+ this.callback(null, source);
+}
\ No newline at end of file
diff --git a/webpack/ManifestPlugin.ts b/webpack/ManifestPlugin.ts
index d0e3d0a3..42d57b3e 100644
--- a/webpack/ManifestPlugin.ts
+++ b/webpack/ManifestPlugin.ts
@@ -1,5 +1,5 @@
import * as webpack from "webpack";
-import * as fs from "fs";
+import * as fs from "fs-extra";
import * as path from "path";
interface Options {
@@ -79,6 +79,8 @@ class ManifestGenerator {
});
compiler.hooks.done.tap(this.constructor.name, () => {
+ const file = this.options.file || "manifest.json";
+ fs.mkdirpSync(path.dirname(file));
fs.writeFileSync(this.options.file || "manifest.json", JSON.stringify(this.manifest_content));
});
}
this.onDoubleClick()}
+ onMouseUp={e => this.onMouseUp(e)}
+ onContextMenu={e => this.onContextMenu(e)}
+ >
+ this.onEditFinished(name)} initialName={this.state.renameInitialName || this.props.client.properties.client_nickname} /> :
+ [
+ )
+ }
+
+ private onDoubleClick() {
+ const client = this.props.client;
+ if(client.channelTree.selection.is_multi_select()) return;
+
+ if(this.props.client instanceof LocalClientEntry) {
+ this.props.client.openRename();
+ } else if(this.props.client instanceof MusicClientEntry) {
+ /* no action defined yet */
+ } else {
+ this.props.client.open_text_chat();
+ }
+ }
+
+ private onEditFinished(new_name?: string) {
+ if(!(this.props.client instanceof LocalClientEntry))
+ throw "Only local clients could be renamed";
+
+ if(new_name && new_name !== this.state.renameInitialName) {
+ const client = this.props.client;
+ client.renameSelf(new_name).then(result => {
+ if(!result)
+ this.setState({ rename: true, renameInitialName: new_name }); //TODO: Keep last name?
+ });
+ }
+ this.setState({ rename: false });
+ }
+
+ private onMouseUp(event: React.MouseEvent) {
+ if(event.button !== 0) return; /* only left mouse clicks */
+ const tree = this.props.client.channelTree;
+ if(tree.isClientMoveActive()) return;
+
+ tree.events.fire("action_select_entries", { entries: [this.props.client], mode: "auto" });
+ }
+
+ private onContextMenu(event: React.MouseEvent) {
+ if(settings.static(Settings.KEY_DISABLE_CONTEXT_MENU))
+ return;
+
+ event.preventDefault();
+ const client = this.props.client;
+ if(client.channelTree.selection.is_multi_select() && client.isSelected()) return;
+
+ client.channelTree.events.fire("action_select_entries", {
+ entries: [ client ],
+ mode: "exclusive"
+ });
+ client.showContextMenu(event.pageX, event.pageY);
+ }
+
+ @EventHandler this.onMouseUp(e)}
+ onContextMenu={e => this.onContextMenu(e)}
+ >
+
+ }
+
+ private onMouseUp(event: React.MouseEvent) {
+ if(event.button !== 0) return; /* only left mouse clicks */
+ if(this.props.server.channelTree.isClientMoveActive()) return;
+
+ this.props.server.channelTree.events.fire("action_select_entries", {
+ entries: [ this.props.server ],
+ mode: "auto"
+ });
+ }
+
+ private onContextMenu(event: React.MouseEvent) {
+ if(settings.static(Settings.KEY_DISABLE_CONTEXT_MENU))
+ return;
+
+ event.preventDefault();
+ const server = this.props.server;
+ if(server.channelTree.selection.is_multi_select() && server.isSelected())
+ return;
+
+ server.channelTree.events.fire("action_select_entries", {
+ entries: [ server ],
+ mode: "exclusive"
+ });
+ server.spawnContextMenu(event.pageX, event.pageY);
+ }
+
+ @EventHandler{name}
+
+ {this.state.description}
+
;
+ }
+}
\ No newline at end of file
diff --git a/shared/js/ui/tree/View.scss b/shared/js/ui/tree/View.scss
new file mode 100644
index 00000000..c0139b05
--- /dev/null
+++ b/shared/js/ui/tree/View.scss
@@ -0,0 +1,122 @@
+@import "../../../css/static/properties";
+@import "../../../css/static/mixin";
+
+html:root {
+ --channel-tree-entry-move: #313235;
+ --channel-tree-entry-selected: #2d2d2d;
+ --channel-tree-entry-hovered: #393939;
+ --channel-tree-entry-color: #828282;
+
+ --channel-tree-entry-marker-unread: rgba(168, 20, 20, 0.5);
+}
+
+@if 0 {
+ /* the channel tree */
+ .channel-tree {
+
+ .tree-entry {
+ &.client {
+
+ }
+ }
+ }
+}
+
+.channelTree {
+ @include user-select(none);
+ width: 100%;
+
+ min-width: 10em;
+ min-height: 5em;
+
+ display: flex;
+ flex-direction: column;
+
+ flex-shrink: 0;
+ flex-grow: 1;
+
+ * {
+ font-family: sans-serif;
+ font-size: 12px;
+ white-space: pre;
+ line-height: 1;
+ }
+
+ .treeEntry {
+ position: absolute;
+ left: 0;
+ right: 0;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: stretch;
+
+ height: 18px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ &:hover {
+ background-color: var(--channel-tree-entry-hovered);
+ }
+
+ &.selected {
+ background-color: var(--channel-tree-entry-selected);
+ }
+
+
+ .markerUnread {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+
+ width: 1px;
+ background-color: var(--channel-tree-entry-marker-unread);
+
+ opacity: 1;
+
+ &:before {
+ content: '';
+ position: absolute;
+
+ left: 0;
+ top: 0;
+ bottom: 0;
+
+ width: 24px;
+
+ background: linear-gradient(to right, var(--channel-tree-entry-marker-unread) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+ }
+
+ &.hidden {
+ opacity: 0;
+ }
+
+ @include transition(opacity $button_hover_animation_time);
+ }
+ }
+
+ &.move {
+ .treeEntry.selected {
+ background-color: var(--channel-tree-entry-move);
+ }
+ }
+}
+
+.channelTreeContainer {
+ @include chat-scrollbar-vertical();
+
+ scroll-behavior: smooth;
+
+ position: relative;
+ height: 100%;
+
+ flex-grow: 1;
+ flex-shrink: 1;
+
+ overflow: hidden;
+ overflow-y: auto;
+}
\ No newline at end of file
diff --git a/shared/js/ui/tree/View.tsx b/shared/js/ui/tree/View.tsx
new file mode 100644
index 00000000..20201f83
--- /dev/null
+++ b/shared/js/ui/tree/View.tsx
@@ -0,0 +1,331 @@
+import {
+ BatchUpdateAssignment,
+ BatchUpdateType,
+ ReactComponentBase
+} from "tc-shared/ui/react-elements/ReactComponentBase";
+import {ChannelTree, ChannelTreeEvents} from "tc-shared/ui/view";
+import ResizeObserver from 'resize-observer-polyfill';
+
+import * as React from "react";
+
+import {EventHandler, ReactEventHandler} from "tc-shared/events";
+
+import {ChannelEntryView as ChannelEntryView} from "./Channel";
+import {ServerEntry as ServerEntryView} from "./Server";
+import {ClientEntry as ClientEntryView} from "./Client";
+
+import {ChannelEntry} from "tc-shared/ui/channel";
+import {ServerEntry} from "tc-shared/ui/server";
+import {ClientEntry, ClientType} from "tc-shared/ui/client";
+
+const viewStyle = require("./View.scss");
+
+
+export interface ChannelTreeViewProperties {
+ tree: ChannelTree;
+ onMoveStart: (start: { x: number, y: number }, current: { x: number, y: number }) => void;
+ moveThreshold?: number;
+}
+
+export interface ChannelTreeViewState {
+ element_scroll_offset?: number; /* in px */
+ scroll_offset: number; /* in px */
+ view_height: number; /* in px */
+
+ tree_version: number;
+}
+
+type TreeEntry = ChannelEntry | ServerEntry | ClientEntry;
+type FlatTreeEntry = {
+ rendered: any;
+ entry: TreeEntry;
+}
+
+//TODO: Only register listeners when channel is in view ;)
+@ReactEventHandler this.onScroll()}
+ ref={this.ref_container}
+ onMouseDown={e => this.onMouseDown(e)}
+ onMouseMove={e => this.onMouseMove(e)} >
+
+ )
+ }
+
+ private build_top_offset: number;
+ private build_sub_tree(entry: ChannelEntry, depth: number) {
+ entry.events.on("notify_clients_changed", this.listener_client_change);
+ entry.events.on("notify_children_changed", this.listener_channel_change);
+ entry.events.on("notify_collapsed_state_changed", this.listener_state_collapsed);
+
+ this.flat_tree.push({
+ entry: entry,
+ rendered:
+ {elements}
+
+ "), text => true, result => { - if (typeof(result) === "string") { - for (const client of this.currently_selected as ClientEntry[]) - this.client.serverConnection.send_command("clientpoke", { - clid: client.clientId(), - msg: result - }); - - } - }, {width: 400, maxLength: 512}).open(); - } - }); - } - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-move_client_to_own_channel", - name: tr("Move clients to your channel"), - callback: () => { - const target = this.client.getClient().currentChannel().getChannelId(); - for(const client of clients) - this.client.serverConnection.send_command("clientmove", { - clid: client.clientId(), - cid: target - }); - } - }); - if (!local_client) {//local client cant be kicked and/or banned or kicked - entries.push(contextmenu.Entry.HR()); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-kick_channel", - name: tr("Kick clients from channel"), - callback: () => { - createInputModal(tr("Kick clients from channel"), tr("Kick reason:
"), text => true, result => { - if (result) { - for (const client of clients) - this.client.serverConnection.send_command("clientkick", { - clid: client.clientId(), - reasonid: ViewReasonId.VREASON_CHANNEL_KICK, - reasonmsg: result - }); - - } - }, {width: 400, maxLength: 255}).open(); - } - }); - - if (!music_entry) { //Music bots cant be banned or kicked - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-kick_server", - name: tr("Kick clients fom server"), - callback: () => { - createInputModal(tr("Kick clients from server"), tr("Kick reason:
"), text => true, result => { - if (result) { - for (const client of clients) - this.client.serverConnection.send_command("clientkick", { - clid: client.clientId(), - reasonid: ViewReasonId.VREASON_SERVER_KICK, - reasonmsg: result - }); - - } - }, {width: 400, maxLength: 255}).open(); - } - }, { - type: contextmenu.MenuEntryType.ENTRY, - icon_class: "client-ban_client", - name: tr("Ban clients"), - invalidPermission: !this.client.permissions.neededPermission(PermissionType.I_CLIENT_BAN_MAX_BANTIME).granted(1), - callback: () => { - spawnBanClient(this.client, (clients).map(entry => { - return { - name: entry.clientNickName(), - unique_id: entry.properties.client_unique_identifier - } - }), (data) => { - for (const client of clients) - this.client.serverConnection.send_command("banclient", { - uid: client.properties.client_unique_identifier, - banreason: data.reason, - time: data.length - }, { - flagset: [data.no_ip ? "no-ip" : "", data.no_hwid ? "no-hardware-id" : "", data.no_name ? "no-nickname" : ""] - }).then(() => { - this.client.sound.play(Sound.USER_BANNED); - }); - }); - } - }); - } - if(music_only) { - entries.push(contextmenu.Entry.HR()); - entries.push({ - name: tr("Delete bots"), - icon_class: "client-delete", - disabled: false, - callback: () => { - const param_string = clients.map((_, index) => "{" + index + "}").join(', '); - const param_values = clients.map(client => client.createChatTag(true)); - const tag = $.spawn("div").append(...formatMessage(tr("Do you really want to delete ") + param_string, ...param_values)); - const tag_container = $.spawn("div").append(tag); - spawnYesNo(tr("Are you sure?"), tag_container, result => { - if(result) { - for(const client of clients) - this.client.serverConnection.send_command("musicbotdelete", { - botid: client.properties.client_database_id - }); - } - }); - }, - type: contextmenu.MenuEntryType.ENTRY - }); - } - } - contextmenu.spawn_context_menu(event.pageX, event.pageY, ...entries); - } - - clientsByGroup(group: Group) : ClientEntry[] { - let result = []; - - for(let client of this.clients) { - if(client.groupAssigned(group)) - result.push(client); - } - - return result; - } - - clientsByChannel(channel: ChannelEntry) : ClientEntry[] { - let result = []; - - for(let client of this.clients) { - if(client.currentChannel() == channel) - result.push(client); - } - - return result; - } - - reset(){ - const voice_connection = this.client.serverConnection ? this.client.serverConnection.voice_connection() : undefined; - for(const client of this.clients) { - if(client.get_audio_handle() && voice_connection) { - voice_connection.unregister_client(client.get_audio_handle()); - client.set_audio_handle(undefined); - } - client.destroy(); - } - this.clients = []; - - for(const channel of this.channels) - channel.destroy(); - this.channels = []; - - this._tag_entries.children().detach(); //Dont remove listeners - - this.channel_first = undefined; - this.channel_last = undefined; - } - - spawnCreateChannel(parent?: ChannelEntry) { - createChannelModal(this.client, undefined, parent, this.client.permissions, (properties?, permissions?) => { - if(!properties) return; - properties["cpid"] = parent ? parent.channelId : 0; - log.debug(LogCategory.CHANNEL, tr("Creating a new channel.\nProperties: %o\nPermissions: %o"), properties); - this.client.serverConnection.send_command("channelcreate", properties).then(() => { - let channel = this.find_channel_by_name(properties.channel_name, parent, true); - if(!channel) { - log.error(LogCategory.CHANNEL, tr("Failed to resolve channel after creation. Could not apply permissions!")); - return; - } - if(permissions && permissions.length > 0) { - let perms = []; - for(let perm of permissions) { - perms.push({ - permvalue: perm.value, - permnegated: false, - permskip: false, - permid: perm.type.id - }); - } - - perms[0]["cid"] = channel.channelId; - return this.client.serverConnection.send_command("channeladdperm", perms, { - flagset: ["continueonerror"] - }).then(() => new Promise
"), text => true, result => { + if (typeof(result) === "string") { + for (const client of clients) + this.client.serverConnection.send_command("clientpoke", { + clid: client.clientId(), + msg: result + }); + + this.selection.clear_selection(); + } + }, {width: 400, maxLength: 512}).open(); + } + }); + } + client_menu.push({ + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-move_client_to_own_channel", + name: tr("Move clients to your channel"), + callback: () => { + const target = this.client.getClient().currentChannel().getChannelId(); + for(const client of clients) + this.client.serverConnection.send_command("clientmove", { + clid: client.clientId(), + cid: target + }); + this.selection.clear_selection(); + } + }); + if (!local_client) {//local client cant be kicked and/or banned or kicked + client_menu.push(contextmenu.Entry.HR()); + client_menu.push({ + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-kick_channel", + name: tr("Kick clients from channel"), + callback: () => { + createInputModal(tr("Kick clients from channel"), tr("Kick reason:
"), text => true, result => { + if (result) { + for (const client of clients) + this.client.serverConnection.send_command("clientkick", { + clid: client.clientId(), + reasonid: ViewReasonId.VREASON_CHANNEL_KICK, + reasonmsg: result + }); + } + }, {width: 400, maxLength: 255}).open(); + this.selection.clear_selection(); + } + }); + + if (!music_entry) { //Music bots cant be banned or kicked + client_menu.push({ + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-kick_server", + name: tr("Kick clients fom server"), + callback: () => { + this.selection.clear_selection(); + createInputModal(tr("Kick clients from server"), tr("Kick reason:
"), text => true, result => { + if (result) { + for (const client of clients) + this.client.serverConnection.send_command("clientkick", { + clid: client.clientId(), + reasonid: ViewReasonId.VREASON_SERVER_KICK, + reasonmsg: result + }); + } + }, {width: 400, maxLength: 255}).open(); + } + }, { + type: contextmenu.MenuEntryType.ENTRY, + icon_class: "client-ban_client", + name: tr("Ban clients"), + invalidPermission: !this.client.permissions.neededPermission(PermissionType.I_CLIENT_BAN_MAX_BANTIME).granted(1), + callback: () => { + this.selection.clear_selection(); + spawnBanClient(this.client, (clients).map(entry => { + return { + name: entry.clientNickName(), + unique_id: entry.properties.client_unique_identifier + } + }), (data) => { + for (const client of clients) + this.client.serverConnection.send_command("banclient", { + uid: client.properties.client_unique_identifier, + banreason: data.reason, + time: data.length + }, { + flagset: [data.no_ip ? "no-ip" : "", data.no_hwid ? "no-hardware-id" : "", data.no_name ? "no-nickname" : ""] + }).then(() => { + this.client.sound.play(Sound.USER_BANNED); + }); + }); + } + }); + } + if(music_only) { + client_menu.push(contextmenu.Entry.HR()); + client_menu.push({ + name: tr("Delete bots"), + icon_class: "client-delete", + disabled: false, + callback: () => { + const param_string = clients.map((_, index) => "{" + index + "}").join(', '); + const param_values = clients.map(client => client.createChatTag(true)); + const tag = $.spawn("div").append(...formatMessage(tr("Do you really want to delete ") + param_string, ...param_values)); + const tag_container = $.spawn("div").append(tag); + spawnYesNo(tr("Are you sure?"), tag_container, result => { + if(result) { + for(const client of clients) + this.client.serverConnection.send_command("musicbotdelete", { + botid: client.properties.client_database_id + }); + this.selection.clear_selection(); + } + }); + }, + type: contextmenu.MenuEntryType.ENTRY + }); + } + } + } + if(channels.length > 0) { + channel_menu = []; + + //TODO: Subscribe mode settings + channel_menu.push({ + type: MenuEntryType.ENTRY, + name: tr("Delete all channels"), + icon_class: "client-delete", + callback: () => { + spawnYesNo(tr("Are you sure?"), tra("Do you really want to delete {0} channels?", channels.length), result => { + if(typeof result === "boolean" && result) { + for(const channel of channels) + this.client.serverConnection.send_command("channeldelete", { cid: channel.channelId }); + this.selection.clear_selection(); + } + }); + } + }); + } + if(server) + server_menu = server.contextMenuItems(); + + const menus = [ + { + text: tr("Apply to all clients"), + menu: client_menu, + icon: "client-user-account" + }, + { + text: tr("Apply to all channels"), + menu: channel_menu, + icon: "client-channel_green" + }, + { + text: tr("Server actions"), + menu: server_menu, + icon: "client-server_green" + } + ].filter(e => !!e.menu); + if(menus.length === 1) { + contextmenu.spawn_context_menu(x, y, ...menus[0].menu); + } else { + contextmenu.spawn_context_menu(x, y, ...menus.map(e => { + return { + icon_class: e.icon, + name: e.text, + type: MenuEntryType.SUB_MENU, + sub_menu: e.menu + } as contextmenu.MenuEntry + })); + } + } + + clientsByGroup(group: Group) : ClientEntry[] { + let result = []; + + for(let client of this.clients) { + if(client.groupAssigned(group)) + result.push(client); + } + + return result; + } + + clientsByChannel(channel: ChannelEntry) : ClientEntry[] { + let result = []; + + for(let client of this.clients) { + if(client.currentChannel() == channel) + result.push(client); + } + + return result; + } + + reset() { + batch_updates(BatchUpdateType.CHANNEL_TREE); + + try { + this.selection.reset(); + + const voice_connection = this.client.serverConnection ? this.client.serverConnection.voice_connection() : undefined; + for(const client of this.clients) { + if(client.get_audio_handle() && voice_connection) { + voice_connection.unregister_client(client.get_audio_handle()); + client.set_audio_handle(undefined); + } + client.destroy(); + } + this.clients = []; + + for(const channel of this.channels) + channel.destroy(); + + this.channels = []; + this.channel_last = undefined; + this.channel_first = undefined; + this.events.fire("notify_tree_reset"); + } finally { + flush_batched_updates(BatchUpdateType.CHANNEL_TREE); + } + } + + spawnCreateChannel(parent?: ChannelEntry) { + createChannelModal(this.client, undefined, parent, this.client.permissions, (properties?, permissions?) => { + if(!properties) return; + properties["cpid"] = parent ? parent.channelId : 0; + log.debug(LogCategory.CHANNEL, tr("Creating a new channel.\nProperties: %o\nPermissions: %o"), properties); + this.client.serverConnection.send_command("channelcreate", properties).then(() => { + let channel = this.find_channel_by_name(properties.channel_name, parent, true); + if(!channel) { + log.error(LogCategory.CHANNEL, tr("Failed to resolve channel after creation. Could not apply permissions!")); + return; + } + if(permissions && permissions.length > 0) { + let perms = []; + for(let perm of permissions) { + perms.push({ + permvalue: perm.value, + permnegated: false, + permskip: false, + permid: perm.type.id + }); + } + + perms[0]["cid"] = channel.channelId; + return this.client.serverConnection.send_command("channeladdperm", perms, { + flagset: ["continueonerror"] + }).then(() => new Promise