From b112a79113f66956767bd399527ecd7467c3e563 Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Tue, 5 Jan 2021 16:26:26 +0100 Subject: [PATCH] Correctly handling the server side bar --- shared/js/SideBarManager.ts | 4 +++ shared/js/tree/ChannelTree.tsx | 2 +- shared/js/tree/Server.ts | 2 +- shared/js/ui/frames/SideBarController.ts | 10 ++++++ shared/js/ui/frames/SideBarDefinitions.ts | 7 +++- shared/js/ui/frames/SideBarRenderer.tsx | 26 ++++++++++++++ .../js/ui/frames/side/ChannelBarController.ts | 4 +++ shared/js/ui/frames/side/HeaderController.ts | 23 ++++++++++++ shared/js/ui/frames/side/HeaderDefinitions.ts | 11 +++++- shared/js/ui/frames/side/HeaderRenderer.tsx | 36 ++++++++++++++++++- 10 files changed, 120 insertions(+), 5 deletions(-) diff --git a/shared/js/SideBarManager.ts b/shared/js/SideBarManager.ts index f0487177..1a28e15c 100644 --- a/shared/js/SideBarManager.ts +++ b/shared/js/SideBarManager.ts @@ -42,6 +42,10 @@ export class SideBarManager { this.setSideBarContent("channel"); } + showServer() { + this.setSideBarContent("server"); + } + showClientInfo(client: ClientEntry) { this.connection.getSelectedClientInfo().setClient(client); this.setSideBarContent("client-info"); diff --git a/shared/js/tree/ChannelTree.tsx b/shared/js/tree/ChannelTree.tsx index dcc0de62..0757b53f 100644 --- a/shared/js/tree/ChannelTree.tsx +++ b/shared/js/tree/ChannelTree.tsx @@ -189,7 +189,7 @@ export class ChannelTree { if(settings.static_global(Settings.KEY_SWITCH_INSTANT_CHAT)) { const conversation = this.client.getChannelConversations().findOrCreateConversation(0); this.client.getChannelConversations().setSelectedConversation(conversation); - this.client.getSideBar().showChannel(); + this.client.getSideBar().showServer(); } } } diff --git a/shared/js/tree/Server.ts b/shared/js/tree/Server.ts index 25bf0974..4c7bcea8 100644 --- a/shared/js/tree/Server.ts +++ b/shared/js/tree/Server.ts @@ -193,7 +193,7 @@ export class ServerEntry extends ChannelTreeEntry { name: tr("Join server text channel"), callback: () => { this.channelTree.client.getChannelConversations().setSelectedConversation(this.channelTree.client.getChannelConversations().findOrCreateConversation(0)); - this.channelTree.client.getSideBar().showChannel(); + this.channelTree.client.getSideBar().showServer(); }, visible: !settings.static_global(Settings.KEY_SWITCH_INSTANT_CHAT) }, { diff --git a/shared/js/ui/frames/SideBarController.ts b/shared/js/ui/frames/SideBarController.ts index 07c209ef..5863c1a2 100644 --- a/shared/js/ui/frames/SideBarController.ts +++ b/shared/js/ui/frames/SideBarController.ts @@ -118,6 +118,16 @@ export class SideBarController { }); break; + case "server": + this.uiEvents.fire_react("notify_content_data", { + content: "server", + data: this.currentConnection ? { + chatEvents: this.channelBar.getChannelConversationController().getUiEvents(), + handlerId: this.currentConnection.handlerId + } : undefined + }); + break; + case "private-chat": if(!this.currentConnection) { logWarn(LogCategory.GENERAL, tr("Received private chat content data request without an active connection.")); diff --git a/shared/js/ui/frames/SideBarDefinitions.ts b/shared/js/ui/frames/SideBarDefinitions.ts index b5879309..78f4b263 100644 --- a/shared/js/ui/frames/SideBarDefinitions.ts +++ b/shared/js/ui/frames/SideBarDefinitions.ts @@ -5,10 +5,11 @@ import {SideHeaderEvents} from "tc-shared/ui/frames/side/HeaderDefinitions"; import {ChannelBarUiEvents} from "tc-shared/ui/frames/side/ChannelBarDefinitions"; import {MusicBotUiEvents} from "tc-shared/ui/frames/side/MusicBotDefinitions"; import {MusicPlaylistUiEvents} from "tc-shared/ui/frames/side/MusicPlaylistDefinitions"; +import {ChannelConversationUiEvents} from "tc-shared/ui/frames/side/ChannelConversationDefinitions"; /* TODO: Somehow outsource the event registries to IPC? */ -export type SideBarType = "none" | "channel" | "private-chat" | "client-info" | "music-manage"; +export type SideBarType = "none" | "server" | "channel" | "private-chat" | "client-info" | "music-manage"; export interface SideBarTypeData { "none": {}, "channel": { @@ -24,6 +25,10 @@ export interface SideBarTypeData { "music-manage": { botEvents: Registry, playlistEvents: Registry + }, + "server": { + handlerId: string, + chatEvents: Registry } } diff --git a/shared/js/ui/frames/SideBarRenderer.tsx b/shared/js/ui/frames/SideBarRenderer.tsx index 025af3b3..c00790a4 100644 --- a/shared/js/ui/frames/SideBarRenderer.tsx +++ b/shared/js/ui/frames/SideBarRenderer.tsx @@ -10,6 +10,7 @@ import {LogCategory, logWarn} from "tc-shared/log"; import React = require("react"); import {ErrorBoundary} from "tc-shared/ui/react-elements/ErrorBoundary"; import {MusicBotRenderer} from "tc-shared/ui/frames/side/MusicBotRenderer"; +import {ConversationPanel} from "tc-shared/ui/frames/side/AbstractConversationRenderer"; const cssStyle = require("./SideBarRenderer.scss"); @@ -38,6 +39,21 @@ const ContentRendererChannel = () => { ); }; +const ContentRendererServer = () => { + const contentData = useContentData("server"); + if(!contentData) { return null; } + + return ( + + ); +}; + const ContentRendererPrivateConversation = () => { const contentData = useContentData("private-chat"); if(!contentData) { return null; } @@ -75,6 +91,12 @@ const ContentRendererMusicManage = () => { const SideBarFrame = (props: { type: SideBarType }) => { switch (props.type) { + case "server": + return ( + + + + ) case "channel": return ( @@ -116,6 +138,10 @@ const SideBarHeader = (props: { type: SideBarType, eventsHeader: Registry this.sendChannelState(event.mode)); this.uiEvents.on("query_private_conversations", () => this.sendPrivateConversationInfo()); this.uiEvents.on("query_ping", () => this.sendPing()); + this.uiEvents.on("query_server_info", () => this.sendServerInfo()); } private initializeConnection() { @@ -144,6 +145,11 @@ export class SideHeaderController { this.listenerConnection.push(this.connection.getPrivateConversations().events.on("notify_unread_count_changed", () => this.sendPrivateConversationInfo())); this.listenerConnection.push(this.connection.getPrivateConversations().events.on(["notify_conversation_destroyed", "notify_conversation_destroyed"], () => this.sendPrivateConversationInfo())); this.listenerConnection.push(this.connection.getSelectedClientInfo().events.on("notify_client_changed", () => this.sendClientInfoOwnClient())); + this.listenerConnection.push(this.connection.channelTree.server.events.on("notify_properties_updated", event => { + if("virtualserver_icon_id" in event.updated_properties || "virtualserver_name" in event.updated_properties) { + this.sendServerInfo(); + } + })); } setConnectionHandler(connection: ConnectionHandler) { @@ -303,4 +309,21 @@ export class SideHeaderController { this.uiEvents.fire_react("notify_client_info_own_client", { isOwnClient: false }); } } + + private sendServerInfo() { + if(this.connection?.connected) { + this.uiEvents.fire_react("notify_server_info", { + info: { + name: this.connection.channelTree.server.properties.virtualserver_name, + icon: { + handlerId: this.connection.handlerId, + serverUniqueId: this.connection.getCurrentServerUniqueId(), + iconId: this.connection.channelTree.server.properties.virtualserver_icon_id + } + } + }) + } else { + this.uiEvents.fire_react("notify_server_info", { info: undefined }); + } + } } \ No newline at end of file diff --git a/shared/js/ui/frames/side/HeaderDefinitions.ts b/shared/js/ui/frames/side/HeaderDefinitions.ts index f7e98c3b..6a8416ab 100644 --- a/shared/js/ui/frames/side/HeaderDefinitions.ts +++ b/shared/js/ui/frames/side/HeaderDefinitions.ts @@ -7,7 +7,7 @@ export type SideHeaderStateNone = { export type SideHeaderStateConversation = { state: "conversation", - mode: "channel" | "private" + mode: "channel" | "private" | "server" }; export type SideHeaderStateClient = { @@ -38,12 +38,18 @@ export type PrivateConversationInfo = { open: number }; +export type SideHeaderServerInfo = { + name: string, + icon: RemoteIconInfo +} + export interface SideHeaderEvents { action_bot_manage: {}, action_bot_add_song: {}, action_switch_channel_chat: {}, action_open_conversation: {}, + query_server_info: {}, query_current_channel_state: { mode: "voice" | "text" }, query_private_conversations: {}, query_client_info_own_client: {}, @@ -61,5 +67,8 @@ export interface SideHeaderEvents { }, notify_client_info_own_client: { isOwnClient: boolean + }, + notify_server_info: { + info: SideHeaderServerInfo | undefined } } \ No newline at end of file diff --git a/shared/js/ui/frames/side/HeaderRenderer.tsx b/shared/js/ui/frames/side/HeaderRenderer.tsx index 21a87b2a..b4c1e5a8 100644 --- a/shared/js/ui/frames/side/HeaderRenderer.tsx +++ b/shared/js/ui/frames/side/HeaderRenderer.tsx @@ -4,7 +4,7 @@ import { SideHeaderEvents, SideHeaderState, SideHeaderChannelState, - SideHeaderPingInfo, PrivateConversationInfo + SideHeaderPingInfo, PrivateConversationInfo, SideHeaderServerInfo } from "tc-shared/ui/frames/side/HeaderDefinitions"; import {Translatable, VariadicTranslatable} from "tc-shared/ui/react-elements/i18n"; import {useContext, useState} from "react"; @@ -74,6 +74,38 @@ const BlockChannelState = (props: { mode: "voice" | "text" }) => { ); } +const ServerInfoRenderer = React.memo((props: { info: SideHeaderServerInfo | undefined }) => { + if(!props.info) { + return
Not connected
; + } + + let icon; + if(props.info.icon.iconId !== 0) { + const remoteIcon = getIconManager().resolveIcon(props.info.icon.iconId, props.info.icon.serverUniqueId, props.info.icon.handlerId); + icon = ; + } + + return ( +
{icon}{props.info.name}
+ ); +}); + +const BlockServerState = () => { + const events = useContext(EventsContext); + const [ info, setInfo ] = useState(() => { + events.fire("query_server_info"); + return undefined; + }); + + events.reactUse("notify_server_info", event => setInfo(event.info)); + return ( + + You're chatting on Server + + + ); +} + const BlockPing = () => { const events = useContext(EventsContext); const [ pingInfo, setPingInfo ] = useState(() => { @@ -221,6 +253,8 @@ const BlockBottomLeft = () => { case "conversation": if(state.mode === "private") { return ; + } else if(state.mode === "server") { + return } else { return ; }