Starting with react
This commit is contained in:
WolverinDEV
parent
d30b0c1a27
commit
e5c7342182
12 changed files with 818 additions and 663 deletions
0
shared/js/events/ClientGlobalControlHandler.ts
Normal file
0
shared/js/events/ClientGlobalControlHandler.ts
Normal file
0
shared/js/events/GlobalEvents.ts
Normal file
0
shared/js/events/GlobalEvents.ts
Normal file
|
|
@ -26,6 +26,10 @@ import * as aplayer from "tc-backend/audio/player";
|
|||
import * as arecorder from "tc-backend/audio/recorder";
|
||||
import * as ppt from "tc-backend/ppt";
|
||||
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import * as cbar from "./ui/frames/control-bar";
|
||||
|
||||
/* required import for init */
|
||||
require("./proto").initialize();
|
||||
require("./ui/elements/ContextDivider").initialize();
|
||||
|
|
@ -156,6 +160,13 @@ async function initialize_app() {
|
|||
}
|
||||
|
||||
control_bar.set_control_bar(new control_bar.ControlBar($("#control_bar"))); /* setup the control bar */
|
||||
{
|
||||
const bar = (
|
||||
<cbar.ControlBar multiSession={true} />
|
||||
);
|
||||
|
||||
ReactDOM.render(bar, $(".container-control-bar")[0]);
|
||||
}
|
||||
|
||||
if(!aplayer.initialize())
|
||||
console.warn(tr("Failed to initialize audio controller!"));
|
||||
|
|
@ -334,7 +345,7 @@ function main() {
|
|||
server_connections.set_active_connection_handler(server_connections.server_connection_handlers()[0]);
|
||||
|
||||
|
||||
(<any>window).test_upload = (message?: string) => {
|
||||
(window as any).test_upload = (message?: string) => {
|
||||
message = message || "Hello World";
|
||||
|
||||
const connection = server_connections.active_connection_handler();
|
||||
28
shared/js/ui/elements/ReactComponentBase.ts
Normal file
28
shared/js/ui/elements/ReactComponentBase.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import * as React from "react";
|
||||
|
||||
export abstract class ReactComponentBase<Properties, State> extends React.Component<Properties, State> {
|
||||
constructor(props: Properties) {
|
||||
super(props);
|
||||
|
||||
this.state = this.default_state();
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
protected initialize() { }
|
||||
protected abstract default_state() : State;
|
||||
|
||||
updateState(updates: {[key in keyof State]?: State[key]}) {
|
||||
this.setState(Object.assign(this.state, updates));
|
||||
}
|
||||
|
||||
protected classList(...classes: (string | undefined)[]) {
|
||||
return [...classes].filter(e => typeof e === "string" && e.length > 0).join(" ");
|
||||
}
|
||||
|
||||
protected hasChildren() {
|
||||
const type = typeof this.props.children;
|
||||
if(type === "undefined") return false;
|
||||
|
||||
return Array.isArray(this.props.children) ? this.props.children.length > 0 : true;
|
||||
}
|
||||
}
|
||||
14
shared/js/ui/elements/i18n/index.tsx
Normal file
14
shared/js/ui/elements/i18n/index.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import * as React from "react";
|
||||
|
||||
export class Translatable extends React.Component<{ message: string }, { translated: string }> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
translated: /* @tr-ignore */ tr(props.message)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.state.translated;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,662 +0,0 @@
|
|||
import {ConnectionHandler, DisconnectReason} from "tc-shared/ConnectionHandler";
|
||||
import {createErrorModal, createInfoModal, createInputModal} from "tc-shared/ui/elements/Modal";
|
||||
import {manager, Sound} from "tc-shared/sound/Sounds";
|
||||
import {default_recorder} from "tc-shared/voice/RecorderProfile";
|
||||
import {Settings, settings} from "tc-shared/settings";
|
||||
import {spawnSettingsModal} from "tc-shared/ui/modal/ModalSettings";
|
||||
import {spawnConnectModal} from "tc-shared/ui/modal/ModalConnect";
|
||||
import {CommandResult} from "tc-shared/connection/ServerConnectionDeclaration";
|
||||
import PermissionType from "tc-shared/permission/PermissionType";
|
||||
import {spawnPermissionEdit} from "tc-shared/ui/modal/permission/ModalPermissionEdit";
|
||||
import {openBanList} from "tc-shared/ui/modal/ModalBanList";
|
||||
import {
|
||||
add_current_server,
|
||||
Bookmark,
|
||||
bookmarks,
|
||||
BookmarkType,
|
||||
boorkmak_connect,
|
||||
DirectoryBookmark
|
||||
} from "tc-shared/bookmarks";
|
||||
import {IconManager} from "tc-shared/FileManager";
|
||||
import {spawnBookmarkModal} from "tc-shared/ui/modal/ModalBookmarks";
|
||||
import {spawnQueryCreate} from "tc-shared/ui/modal/ModalQuery";
|
||||
import {spawnQueryManage} from "tc-shared/ui/modal/ModalQueryManage";
|
||||
import {spawnPlaylistManage} from "tc-shared/ui/modal/ModalPlaylistList";
|
||||
import * as contextmenu from "tc-shared/ui/elements/ContextMenu";
|
||||
import {server_connections} from "tc-shared/ui/frames/connection_handlers";
|
||||
import {formatMessage} from "tc-shared/ui/frames/chat";
|
||||
import * as slog from "tc-shared/ui/frames/server_log";
|
||||
import * as top_menu from "./MenuBar";
|
||||
|
||||
export let control_bar: ControlBar; /* global variable to access the control bar */
|
||||
export function set_control_bar(bar: ControlBar) { control_bar = bar; }
|
||||
|
||||
export type MicrophoneState = "disabled" | "muted" | "enabled";
|
||||
export type HeadphoneState = "muted" | "enabled";
|
||||
export type AwayState = "away-global" | "away" | "online";
|
||||
export class ControlBar {
|
||||
private _button_away_active: AwayState;
|
||||
private _button_microphone: MicrophoneState;
|
||||
private _button_speakers: HeadphoneState;
|
||||
private _button_subscribe_all: boolean;
|
||||
private _button_query_visible: boolean;
|
||||
|
||||
private connection_handler: ConnectionHandler | undefined;
|
||||
|
||||
private _button_hostbanner: JQuery;
|
||||
|
||||
htmlTag: JQuery;
|
||||
constructor(htmlTag: JQuery) {
|
||||
this.htmlTag = htmlTag;
|
||||
}
|
||||
|
||||
initialize_connection_handler_state(handler?: ConnectionHandler) {
|
||||
/* setup the state like the last displayed one */
|
||||
handler.client_status.output_muted = this._button_speakers === "muted";
|
||||
handler.client_status.input_muted = this._button_microphone === "muted";
|
||||
|
||||
handler.client_status.channel_subscribe_all = this._button_subscribe_all;
|
||||
handler.client_status.queries_visible = this._button_query_visible;
|
||||
}
|
||||
|
||||
set_connection_handler(handler?: ConnectionHandler) {
|
||||
if(this.connection_handler == handler)
|
||||
return;
|
||||
|
||||
this.connection_handler = handler;
|
||||
this.apply_server_state();
|
||||
this.update_connection_state();
|
||||
}
|
||||
|
||||
apply_server_state() {
|
||||
if(!this.connection_handler)
|
||||
return;
|
||||
|
||||
|
||||
const flag_away = typeof(this.connection_handler.client_status.away) === "string" || this.connection_handler.client_status.away;
|
||||
if(!flag_away)
|
||||
this.button_away_active = "online";
|
||||
else if(flag_away && this._button_away_active === "online")
|
||||
this.button_away_active = "away";
|
||||
|
||||
this.button_query_visible = this.connection_handler.client_status.queries_visible;
|
||||
this.button_subscribe_all = this.connection_handler.client_status.channel_subscribe_all;
|
||||
|
||||
this.apply_server_hostbutton();
|
||||
this.apply_server_voice_state();
|
||||
}
|
||||
|
||||
apply_server_hostbutton() {
|
||||
const server = this.connection_handler.channelTree.server;
|
||||
if(server && server.properties.virtualserver_hostbutton_gfx_url) {
|
||||
this._button_hostbanner
|
||||
.attr("title", server.properties.virtualserver_hostbutton_tooltip || server.properties.virtualserver_hostbutton_gfx_url)
|
||||
.attr("href", server.properties.virtualserver_hostbutton_url);
|
||||
this._button_hostbanner.find("img").attr("src", server.properties.virtualserver_hostbutton_gfx_url);
|
||||
this._button_hostbanner.each((_, e) => { e.style.display = null; });
|
||||
} else {
|
||||
this._button_hostbanner.each((_, e) => { e.style.display = "none"; });
|
||||
}
|
||||
}
|
||||
|
||||
apply_server_voice_state() {
|
||||
if(!this.connection_handler)
|
||||
return;
|
||||
|
||||
this.button_microphone = !this.connection_handler.client_status.input_hardware ? "disabled" : this.connection_handler.client_status.input_muted ? "muted" : "enabled";
|
||||
this.button_speaker = this.connection_handler.client_status.output_muted ? "muted" : "enabled";
|
||||
top_menu.update_state(); //TODO: Only run "small" update?
|
||||
}
|
||||
|
||||
current_connection_handler() {
|
||||
return this.connection_handler;
|
||||
}
|
||||
|
||||
initialise() {
|
||||
let dropdownify = (tag: JQuery) => {
|
||||
tag.find(".dropdown-arrow").on('click', () => {
|
||||
tag.addClass("displayed");
|
||||
}).hover(() => {
|
||||
tag.addClass("displayed");
|
||||
}, () => {
|
||||
if(tag.find(".dropdown:hover").length > 0)
|
||||
return;
|
||||
tag.removeClass("displayed");
|
||||
});
|
||||
tag.on('mouseleave', () => {
|
||||
tag.removeClass("displayed");
|
||||
});
|
||||
};
|
||||
|
||||
this.htmlTag.find(".btn_connect").on('click', this.on_open_connect.bind(this));
|
||||
this.htmlTag.find(".btn_connect_new_tab").on('click', this.on_open_connect_new_tab.bind(this));
|
||||
this.htmlTag.find(".btn_disconnect").on('click', this.on_execute_disconnect.bind(this));
|
||||
|
||||
this.htmlTag.find(".btn_mute_input").on('click', this.on_toggle_microphone.bind(this));
|
||||
this.htmlTag.find(".btn_mute_output").on('click', this.on_toggle_sound.bind(this));
|
||||
this.htmlTag.find(".button-subscribe-mode").on('click', this.on_toggle_channel_subscribe.bind(this));
|
||||
this.htmlTag.find(".btn_query_toggle").on('click', this.on_toggle_query_view.bind(this));
|
||||
|
||||
this.htmlTag.find(".btn_open_settings").on('click', this.on_open_settings.bind(this));
|
||||
this.htmlTag.find(".btn_permissions").on('click', this.on_open_permissions.bind(this));
|
||||
this.htmlTag.find(".btn_banlist").on('click', this.on_open_banslist.bind(this));
|
||||
this.htmlTag.find(".button-playlist-manage").on('click', this.on_open_playlist_manage.bind(this));
|
||||
|
||||
this.htmlTag.find(".btn_token_use").on('click', this.on_token_use.bind(this));
|
||||
this.htmlTag.find(".btn_token_list").on('click', this.on_token_list.bind(this));
|
||||
|
||||
(this._button_hostbanner = this.htmlTag.find(".button-hostbutton")).hide().on('click', () => {
|
||||
if(!this.connection_handler) return;
|
||||
|
||||
const server = this.connection_handler.channelTree.server;
|
||||
if(!server || !server.properties.virtualserver_hostbutton_url) return;
|
||||
|
||||
window.open(server.properties.virtualserver_hostbutton_url, '_blank');
|
||||
});
|
||||
|
||||
|
||||
{
|
||||
this.htmlTag.find(".btn_away_disable").on('click', this.on_away_disable.bind(this));
|
||||
this.htmlTag.find(".btn_away_disable_global").on('click', this.on_away_disable_global.bind(this));
|
||||
|
||||
this.htmlTag.find(".btn_away_enable").on('click', this.on_away_enable.bind(this));
|
||||
this.htmlTag.find(".btn_away_enable_global").on('click', this.on_away_enable_global.bind(this));
|
||||
|
||||
this.htmlTag.find(".btn_away_message").on('click', this.on_away_set_message.bind(this));
|
||||
this.htmlTag.find(".btn_away_message_global").on('click', this.on_away_set_message_global.bind(this));
|
||||
|
||||
this.htmlTag.find(".btn_away_toggle").on('click', this.on_away_toggle.bind(this));
|
||||
}
|
||||
|
||||
dropdownify(this.htmlTag.find(".container-connect"));
|
||||
dropdownify(this.htmlTag.find(".container-disconnect"));
|
||||
dropdownify(this.htmlTag.find(".btn_token"));
|
||||
dropdownify(this.htmlTag.find(".btn_away"));
|
||||
dropdownify(this.htmlTag.find(".btn_bookmark"));
|
||||
dropdownify(this.htmlTag.find(".btn_query"));
|
||||
dropdownify(this.htmlTag.find(".dropdown-audio"));
|
||||
dropdownify(this.htmlTag.find(".dropdown-servertools"));
|
||||
|
||||
{
|
||||
|
||||
}
|
||||
{
|
||||
|
||||
this.htmlTag.find(".btn_bookmark_list").on('click', this.on_bookmark_manage.bind(this));
|
||||
this.htmlTag.find(".btn_bookmark_add").on('click', this.on_bookmark_server_add.bind(this));
|
||||
|
||||
}
|
||||
{
|
||||
|
||||
/* search for query buttons not only on the large device button */
|
||||
this.htmlTag.find(".btn_query_create").on('click', this.on_open_query_create.bind(this));
|
||||
this.htmlTag.find(".btn_query_manage").on('click', this.on_open_query_manage.bind(this));
|
||||
}
|
||||
|
||||
|
||||
this.update_bookmarks();
|
||||
this.update_bookmark_status();
|
||||
|
||||
//Need an initialise
|
||||
this.button_speaker = settings.static_global(Settings.KEY_CONTROL_MUTE_OUTPUT, false) ? "muted" : "enabled";
|
||||
this.button_microphone = settings.static_global(Settings.KEY_CONTROL_MUTE_INPUT, false) ? "muted" : "enabled";
|
||||
this.button_subscribe_all = true;
|
||||
this.button_query_visible = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Update the UI */
|
||||
set button_away_active(flag: AwayState) {
|
||||
if(this._button_away_active === flag)
|
||||
return;
|
||||
this._button_away_active = flag;
|
||||
this.update_button_away();
|
||||
}
|
||||
update_button_away() {
|
||||
const button_away_enable = this.htmlTag.find(".btn_away_enable");
|
||||
const button_away_disable = this.htmlTag.find(".btn_away_disable");
|
||||
const button_away_toggle = this.htmlTag.find(".btn_away_toggle");
|
||||
|
||||
const button_away_disable_global = this.htmlTag.find(".btn_away_disable_global");
|
||||
const button_away_enable_global = this.htmlTag.find(".btn_away_enable_global");
|
||||
const button_away_message_global = this.htmlTag.find(".btn_away_message_global");
|
||||
|
||||
button_away_toggle.toggleClass("activated", this._button_away_active !== "online");
|
||||
button_away_enable.toggle(this._button_away_active === "online");
|
||||
button_away_disable.toggle(this._button_away_active !== "online");
|
||||
|
||||
const connections = server_connections.server_connection_handlers();
|
||||
if(connections.length <= 1) {
|
||||
button_away_disable_global.hide();
|
||||
button_away_enable_global.hide();
|
||||
button_away_message_global.hide();
|
||||
} else {
|
||||
button_away_message_global.show();
|
||||
button_away_enable_global.toggle(server_connections.server_connection_handlers().filter(e => !e.client_status.away).length > 0);
|
||||
button_away_disable_global.toggle(
|
||||
this._button_away_active === "away-global" ||
|
||||
server_connections.server_connection_handlers().filter(e => typeof(e.client_status.away) === "string" || e.client_status.away).length > 0
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
set button_microphone(state: MicrophoneState) {
|
||||
if(this._button_microphone === state)
|
||||
return;
|
||||
this._button_microphone = state;
|
||||
|
||||
let tag = this.htmlTag.find(".btn_mute_input");
|
||||
const tag_icon = tag.find(".icon_em, .icon");
|
||||
tag.toggleClass('activated', state === "muted");
|
||||
|
||||
/*
|
||||
tag_icon
|
||||
.toggleClass('client-input_muted', state === "muted")
|
||||
.toggleClass('client-capture', state === "enabled")
|
||||
.toggleClass('client-activate_microphone', state === "disabled");
|
||||
*/
|
||||
|
||||
tag_icon
|
||||
.toggleClass('client-input_muted', state !== "disabled")
|
||||
.toggleClass('client-capture', false)
|
||||
.toggleClass('client-activate_microphone', state === "disabled");
|
||||
|
||||
if(state === "disabled")
|
||||
tag_icon.attr('title', tr("Enable your microphone on this server"));
|
||||
else if(state === "enabled")
|
||||
tag_icon.attr('title', tr("Mute microphone"));
|
||||
else
|
||||
tag_icon.attr('title', tr("Unmute microphone"));
|
||||
}
|
||||
|
||||
set button_speaker(state: HeadphoneState) {
|
||||
if(this._button_speakers === state)
|
||||
return;
|
||||
this._button_speakers = state;
|
||||
|
||||
let tag = this.htmlTag.find(".btn_mute_output");
|
||||
const tag_icon = tag.find(".icon_em, .icon");
|
||||
|
||||
tag.toggleClass('activated', state === "muted");
|
||||
/*
|
||||
tag_icon
|
||||
.toggleClass('client-output_muted', state !== "enabled")
|
||||
.toggleClass('client-volume', state === "enabled");
|
||||
*/
|
||||
tag_icon
|
||||
.toggleClass('client-output_muted', true)
|
||||
.toggleClass('client-volume', false);
|
||||
|
||||
if(state === "enabled")
|
||||
tag_icon.attr('title', tr("Mute sound"));
|
||||
else
|
||||
tag_icon.attr('title', tr("Unmute sound"));
|
||||
}
|
||||
|
||||
set button_subscribe_all(state: boolean) {
|
||||
if(this._button_subscribe_all === state)
|
||||
return;
|
||||
this._button_subscribe_all = state;
|
||||
|
||||
this.htmlTag
|
||||
.find(".button-subscribe-mode")
|
||||
.toggleClass('activated', this._button_subscribe_all)
|
||||
.find('.icon_em')
|
||||
.toggleClass('client-unsubscribe_from_all_channels', !this._button_subscribe_all)
|
||||
.toggleClass('client-subscribe_to_all_channels', this._button_subscribe_all);
|
||||
}
|
||||
|
||||
set button_query_visible(state: boolean) {
|
||||
if(this._button_query_visible === state)
|
||||
return;
|
||||
this._button_query_visible = state;
|
||||
|
||||
const button = this.htmlTag.find(".btn_query_toggle");
|
||||
button.toggleClass('activated', this._button_query_visible);
|
||||
if(this._button_query_visible)
|
||||
button.find(".query-text").text(tr("Hide server queries"));
|
||||
else
|
||||
button.find(".query-text").text(tr("Show server queries"));
|
||||
}
|
||||
|
||||
/* UI listener */
|
||||
private on_away_toggle() {
|
||||
if(this._button_away_active === "away" || this._button_away_active === "away-global")
|
||||
this.button_away_active = "online";
|
||||
else
|
||||
this.button_away_active = "away";
|
||||
if(this.connection_handler)
|
||||
this.connection_handler.set_away_status(this._button_away_active !== "online");
|
||||
}
|
||||
|
||||
private on_away_enable() {
|
||||
this.button_away_active = "away";
|
||||
if(this.connection_handler)
|
||||
this.connection_handler.set_away_status(true);
|
||||
}
|
||||
|
||||
private on_away_disable() {
|
||||
this.button_away_active = "online";
|
||||
if(this.connection_handler)
|
||||
this.connection_handler.set_away_status(false);
|
||||
}
|
||||
|
||||
private on_away_set_message() {
|
||||
createInputModal(tr("Set away message"), tr("Please enter your away message"), message => true, message => {
|
||||
if(typeof(message) === "string") {
|
||||
this.button_away_active = "away";
|
||||
if(this.connection_handler)
|
||||
this.connection_handler.set_away_status(message);
|
||||
}
|
||||
}).open();
|
||||
}
|
||||
|
||||
private on_away_enable_global() {
|
||||
this.button_away_active = "away-global";
|
||||
for(const connection of server_connections.server_connection_handlers())
|
||||
connection.set_away_status(true);
|
||||
}
|
||||
|
||||
private on_away_disable_global() {
|
||||
this.button_away_active = "online";
|
||||
for(const connection of server_connections.server_connection_handlers())
|
||||
connection.set_away_status(false);
|
||||
}
|
||||
|
||||
private on_away_set_message_global() {
|
||||
createInputModal(tr("Set global away message"), tr("Please enter your global away message"), message => true, message => {
|
||||
if(typeof(message) === "string") {
|
||||
this.button_away_active = "away";
|
||||
for(const connection of server_connections.server_connection_handlers())
|
||||
connection.set_away_status(message);
|
||||
}
|
||||
}).open();
|
||||
}
|
||||
|
||||
|
||||
|
||||
private on_toggle_microphone() {
|
||||
if(this._button_microphone === "disabled" || this._button_microphone === "muted") {
|
||||
this.button_microphone = "enabled";
|
||||
manager.play(Sound.MICROPHONE_ACTIVATED);
|
||||
} else {
|
||||
this.button_microphone = "muted";
|
||||
manager.play(Sound.MICROPHONE_MUTED);
|
||||
}
|
||||
|
||||
if(this.connection_handler) {
|
||||
this.connection_handler.client_status.input_muted = this._button_microphone !== "enabled";
|
||||
if(!this.connection_handler.client_status.input_hardware)
|
||||
this.connection_handler.acquire_recorder(default_recorder, true); /* acquire_recorder already updates the voice status */
|
||||
else
|
||||
this.connection_handler.update_voice_status(undefined);
|
||||
|
||||
/* just update the last changed value */
|
||||
settings.changeGlobal(Settings.KEY_CONTROL_MUTE_INPUT, this.connection_handler.client_status.input_muted)
|
||||
}
|
||||
}
|
||||
|
||||
private on_toggle_sound() {
|
||||
if(this._button_speakers === "muted") {
|
||||
this.button_speaker = "enabled";
|
||||
manager.play(Sound.SOUND_ACTIVATED);
|
||||
} else {
|
||||
this.button_speaker = "muted";
|
||||
manager.play(Sound.SOUND_MUTED);
|
||||
}
|
||||
|
||||
if(this.connection_handler) {
|
||||
this.connection_handler.client_status.output_muted = this._button_speakers !== "enabled";
|
||||
this.connection_handler.update_voice_status(undefined);
|
||||
|
||||
/* just update the last changed value */
|
||||
settings.changeGlobal(Settings.KEY_CONTROL_MUTE_OUTPUT, this.connection_handler.client_status.output_muted)
|
||||
}
|
||||
}
|
||||
|
||||
private on_toggle_channel_subscribe() {
|
||||
this.button_subscribe_all = !this._button_subscribe_all;
|
||||
if(this.connection_handler) {
|
||||
this.connection_handler.client_status.channel_subscribe_all = this._button_subscribe_all;
|
||||
if(this._button_subscribe_all)
|
||||
this.connection_handler.channelTree.subscribe_all_channels();
|
||||
else
|
||||
this.connection_handler.channelTree.unsubscribe_all_channels(true);
|
||||
this.connection_handler.settings.changeServer(Settings.KEY_CONTROL_CHANNEL_SUBSCRIBE_ALL, this._button_subscribe_all);
|
||||
}
|
||||
}
|
||||
|
||||
private on_toggle_query_view() {
|
||||
this.button_query_visible = !this._button_query_visible;
|
||||
if(this.connection_handler) {
|
||||
this.connection_handler.client_status.queries_visible = this._button_query_visible;
|
||||
this.connection_handler.channelTree.toggle_server_queries(this._button_query_visible);
|
||||
this.connection_handler.settings.changeServer(Settings.KEY_CONTROL_SHOW_QUERIES, this._button_subscribe_all);
|
||||
}
|
||||
}
|
||||
|
||||
private on_open_settings() {
|
||||
spawnSettingsModal();
|
||||
}
|
||||
|
||||
private on_open_connect() {
|
||||
if(this.connection_handler)
|
||||
this.connection_handler.cancel_reconnect(true);
|
||||
spawnConnectModal({}, {
|
||||
url: "ts.TeaSpeak.de",
|
||||
enforce: false
|
||||
});
|
||||
}
|
||||
|
||||
private on_open_connect_new_tab() {
|
||||
spawnConnectModal({
|
||||
default_connect_new_tab: true
|
||||
}, {
|
||||
url: "ts.TeaSpeak.de",
|
||||
enforce: false
|
||||
});
|
||||
}
|
||||
|
||||
update_connection_state() {
|
||||
if(this.connection_handler.serverConnection && this.connection_handler.serverConnection.connected()) {
|
||||
this.htmlTag.find(".container-disconnect").show();
|
||||
this.htmlTag.find(".container-connect").hide();
|
||||
} else {
|
||||
this.htmlTag.find(".container-disconnect").hide();
|
||||
this.htmlTag.find(".container-connect").show();
|
||||
}
|
||||
/*
|
||||
switch (this.connection_handler.serverConnection ? this.connection_handler.serverConnection.connected() : ConnectionState.UNCONNECTED) {
|
||||
case ConnectionState.CONNECTED:
|
||||
case ConnectionState.CONNECTING:
|
||||
case ConnectionState.INITIALISING:
|
||||
this.htmlTag.find(".container-disconnect").show();
|
||||
this.htmlTag.find(".container-connect").hide();
|
||||
break;
|
||||
default:
|
||||
this.htmlTag.find(".container-disconnect").hide();
|
||||
this.htmlTag.find(".container-connect").show();
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
private on_execute_disconnect() {
|
||||
this.connection_handler.cancel_reconnect(true);
|
||||
this.connection_handler.handleDisconnect(DisconnectReason.REQUESTED); //TODO message?
|
||||
this.update_connection_state();
|
||||
this.connection_handler.sound.play(Sound.CONNECTION_DISCONNECTED);
|
||||
this.connection_handler.log.log(slog.Type.DISCONNECTED, {});
|
||||
}
|
||||
|
||||
private on_token_use() {
|
||||
createInputModal(tr("Use token"), tr("Please enter your token/privilege key"), message => message.length > 0, result => {
|
||||
if(!result) return;
|
||||
if(this.connection_handler.serverConnection.connected)
|
||||
this.connection_handler.serverConnection.send_command("tokenuse", {
|
||||
token: result
|
||||
}).then(() => {
|
||||
createInfoModal(tr("Use token"), tr("Toke successfully used!")).open();
|
||||
}).catch(error => {
|
||||
//TODO tr
|
||||
createErrorModal(tr("Use token"), formatMessage(tr("Failed to use token: {}"), error instanceof CommandResult ? error.message : error)).open();
|
||||
});
|
||||
}).open();
|
||||
}
|
||||
|
||||
private on_token_list() {
|
||||
createErrorModal(tr("Not implemented"), tr("Token list is not implemented yet!")).open();
|
||||
}
|
||||
|
||||
private on_open_permissions() {
|
||||
let button = this.htmlTag.find(".btn_permissions");
|
||||
button.addClass("activated");
|
||||
setTimeout(() => {
|
||||
if(this.connection_handler)
|
||||
spawnPermissionEdit(this.connection_handler).open();
|
||||
else
|
||||
createErrorModal(tr("You have to be connected"), tr("You have to be connected!")).open();
|
||||
button.removeClass("activated");
|
||||
}, 0);
|
||||
}
|
||||
|
||||
private on_open_banslist() {
|
||||
if(!this.connection_handler.serverConnection) return;
|
||||
|
||||
if(this.connection_handler.permissions.neededPermission(PermissionType.B_CLIENT_BAN_LIST).granted(1)) {
|
||||
openBanList(this.connection_handler);
|
||||
} else {
|
||||
createErrorModal(tr("You dont have the permission"), tr("You dont have the permission to view the ban list")).open();
|
||||
this.connection_handler.sound.play(Sound.ERROR_INSUFFICIENT_PERMISSIONS);
|
||||
}
|
||||
}
|
||||
|
||||
private on_bookmark_server_add() {
|
||||
add_current_server();
|
||||
}
|
||||
|
||||
update_bookmark_status() {
|
||||
this.htmlTag.find(".btn_bookmark_add").removeClass("hidden").addClass("disabled");
|
||||
this.htmlTag.find(".btn_bookmark_remove").addClass("hidden");
|
||||
}
|
||||
|
||||
|
||||
update_bookmarks() {
|
||||
//<div class="btn_bookmark_connect" target="localhost"><a>Localhost</a></div>
|
||||
let tag_bookmark = this.htmlTag.find(".btn_bookmark > .dropdown");
|
||||
tag_bookmark.find(".bookmark, .directory").remove();
|
||||
|
||||
const build_entry = (bookmark: DirectoryBookmark | Bookmark) => {
|
||||
if(bookmark.type == BookmarkType.ENTRY) {
|
||||
const mark = <Bookmark>bookmark;
|
||||
|
||||
const bookmark_connect = (new_tab: boolean) => {
|
||||
this.htmlTag.find(".btn_bookmark").find(".dropdown").removeClass("displayed"); //FIXME Not working
|
||||
boorkmak_connect(mark, new_tab);
|
||||
};
|
||||
|
||||
return $.spawn("div")
|
||||
.addClass("bookmark")
|
||||
.append(
|
||||
//$.spawn("div").addClass("icon client-server")
|
||||
IconManager.generate_tag(IconManager.load_cached_icon(mark.last_icon_id || 0), {animate: false}) /* must be false */
|
||||
)
|
||||
.append(
|
||||
$.spawn("div")
|
||||
.addClass("name")
|
||||
.text(bookmark.display_name)
|
||||
.on('click', event => {
|
||||
if(event.isDefaultPrevented())
|
||||
return;
|
||||
bookmark_connect(false);
|
||||
})
|
||||
.on('contextmenu', event => {
|
||||
if(event.isDefaultPrevented())
|
||||
return;
|
||||
event.preventDefault();
|
||||
|
||||
contextmenu.spawn_context_menu(event.pageX, event.pageY, {
|
||||
type: contextmenu.MenuEntryType.ENTRY,
|
||||
name: tr("Connect"),
|
||||
icon_class: 'client-connect',
|
||||
callback: () => bookmark_connect(false)
|
||||
}, {
|
||||
type: contextmenu.MenuEntryType.ENTRY,
|
||||
name: tr("Connect in a new tab"),
|
||||
icon_class: 'client-connect',
|
||||
callback: () => bookmark_connect(true),
|
||||
visible: !settings.static_global(Settings.KEY_DISABLE_MULTI_SESSION)
|
||||
}, contextmenu.Entry.CLOSE(() => {
|
||||
setTimeout(() => {
|
||||
this.htmlTag.find(".btn_bookmark.dropdown-arrow").removeClass("force-show")
|
||||
}, 250);
|
||||
}));
|
||||
|
||||
this.htmlTag.find(".btn_bookmark.dropdown-arrow").addClass("force-show");
|
||||
})
|
||||
)
|
||||
} else {
|
||||
const mark = <DirectoryBookmark>bookmark;
|
||||
const container = $.spawn("div").addClass("sub-menu dropdown");
|
||||
|
||||
const result = $.spawn("div")
|
||||
.addClass("directory")
|
||||
.append(
|
||||
$.spawn("div").addClass("icon client-folder")
|
||||
)
|
||||
.append(
|
||||
$.spawn("div")
|
||||
.addClass("name")
|
||||
.text(bookmark.display_name)
|
||||
)
|
||||
.append(
|
||||
$.spawn("div").addClass("arrow right")
|
||||
)
|
||||
.append(
|
||||
$.spawn("div").addClass("sub-container")
|
||||
.append(container)
|
||||
);
|
||||
|
||||
/* we've to keep it this order because we're then keeping the reference of the loading icons... */
|
||||
for(const member of mark.content)
|
||||
container.append(build_entry(member));
|
||||
|
||||
return result;
|
||||
}
|
||||
};
|
||||
|
||||
for(const bookmark of bookmarks().content) {
|
||||
const entry = build_entry(bookmark);
|
||||
tag_bookmark.append(entry);
|
||||
}
|
||||
}
|
||||
|
||||
private on_bookmark_manage() {
|
||||
spawnBookmarkModal();
|
||||
}
|
||||
|
||||
private on_open_query_create() {
|
||||
if(this.connection_handler.permissions.neededPermission(PermissionType.B_CLIENT_CREATE_MODIFY_SERVERQUERY_LOGIN).granted(1)) {
|
||||
spawnQueryCreate(this.connection_handler);
|
||||
} else {
|
||||
createErrorModal(tr("You dont have the permission"), tr("You dont have the permission to create a server query login")).open();
|
||||
this.connection_handler.sound.play(Sound.ERROR_INSUFFICIENT_PERMISSIONS);
|
||||
}
|
||||
}
|
||||
|
||||
private on_open_query_manage() {
|
||||
if(this.connection_handler && this.connection_handler.connected) {
|
||||
spawnQueryManage(this.connection_handler);
|
||||
} else {
|
||||
createErrorModal(tr("You have to be connected"), tr("You have to be connected!")).open();
|
||||
}
|
||||
}
|
||||
|
||||
private on_open_playlist_manage() {
|
||||
if(this.connection_handler && this.connection_handler.connected) {
|
||||
spawnPlaylistManage(this.connection_handler);
|
||||
} else {
|
||||
createErrorModal(tr("You have to be connected"), tr("You have to be connected to use this function!")).open();
|
||||
}
|
||||
}
|
||||
}
|
||||
0
shared/js/ui/frames/control-bar/actions.ts
Normal file
0
shared/js/ui/frames/control-bar/actions.ts
Normal file
252
shared/js/ui/frames/control-bar/button.scss
Normal file
252
shared/js/ui/frames/control-bar/button.scss
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
@import "../../../../css/static/properties";
|
||||
@import "../../../../css/static/mixin";
|
||||
|
||||
$border_color_activated: rgba(255, 255, 255, .75);
|
||||
|
||||
/* border etc */
|
||||
.button, .dropdownArrow {
|
||||
text-align: center;
|
||||
|
||||
border: .05em solid rgba(0, 0, 0, 0);
|
||||
border-radius: $border_radius_small;
|
||||
|
||||
background-color: #454545;
|
||||
|
||||
&:hover {
|
||||
background-color: #393c43;
|
||||
border-color: #4a4c55;
|
||||
/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: #2f3841;
|
||||
border-color: #005fa1;
|
||||
|
||||
&:hover {
|
||||
background-color: #263340;
|
||||
border-color: #005fa1;
|
||||
}
|
||||
|
||||
&.theme-red {
|
||||
background-color: #412f2f;
|
||||
border-color: #a10000;
|
||||
|
||||
&:hover {
|
||||
background-color: #402626;
|
||||
border-color: #a10000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include transition(background-color $button_hover_animation_time ease-in-out, border-color $button_hover_animation_time ease-in-out);
|
||||
|
||||
:global(.icon_em) {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
|
||||
&.buttonHostbutton {
|
||||
img {
|
||||
min-width: 1.5em;
|
||||
max-width: 1.5em;
|
||||
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
padding: .25em;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonDropdown {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.buttons {
|
||||
height: 2em;
|
||||
|
||||
align-items: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.dropdownArrow {
|
||||
height: 2em;
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
width: 1.5em;
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 0 $border_radius_small $border_radius_small 0;
|
||||
align-items: center;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.button, .dropdownArrow {
|
||||
background-color: #393c43;
|
||||
border-color: #4a4c55;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-right-color: transparent;
|
||||
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin-left: 5px;
|
||||
|
||||
color: #c4c5c5;
|
||||
|
||||
background-color: #2d3032;
|
||||
align-items: center;
|
||||
border: .05em solid #2c2525;
|
||||
border-radius: 0 $border_radius_middle $border_radius_middle $border_radius_middle;
|
||||
|
||||
width: 15em; /* fallback */
|
||||
width: max-content;
|
||||
|
||||
max-width: 25em;
|
||||
|
||||
z-index: 1000;
|
||||
/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
|
||||
|
||||
&:global(.right) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
:global {
|
||||
.icon, .icon-container, .icon_em {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.icon-empty {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownEntry {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
padding: 1px 2px 1px 4px;
|
||||
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
|
||||
.entryName {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
vertical-align: text-top;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.icon, .arrow {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
|
||||
&:first-of-type {
|
||||
border-radius: .1em .1em 0 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-radius: 0 0 .1em .1em;
|
||||
}
|
||||
|
||||
> .dropdown {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #252729;
|
||||
|
||||
> .dropdown {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.displayLeft {
|
||||
margin-left: -179px;
|
||||
border-radius: $border_radius_middle 0 $border_radius_middle $border_radius_middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdownDisplayed {
|
||||
> .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button, .dropdown-arrow {
|
||||
background-color: #393c43;
|
||||
border-color: #4a4c55;
|
||||
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-right-color: transparent;
|
||||
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonBookmarks {
|
||||
.dropdown {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
84
shared/js/ui/frames/control-bar/button.tsx
Normal file
84
shared/js/ui/frames/control-bar/button.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import * as React from "react";
|
||||
import {ReactComponentBase} from "tc-shared/ui/elements/ReactComponentBase";
|
||||
import {DropdownContainer} from "tc-shared/ui/frames/control-bar/dropdown";
|
||||
const cssStyle = require("./button.scss");
|
||||
|
||||
export interface ButtonState {
|
||||
switched: boolean;
|
||||
dropdownShowed: boolean;
|
||||
}
|
||||
|
||||
export interface ButtonProperties {
|
||||
colorTheme?: "red" | "default";
|
||||
|
||||
autoSwitch: boolean;
|
||||
|
||||
tooltip?: string;
|
||||
|
||||
iconNormal: string;
|
||||
iconSwitched?: string;
|
||||
|
||||
onToggle?: (state: boolean) => boolean | void;
|
||||
|
||||
dropdownButtonExtraClass?: string;
|
||||
|
||||
switched?: boolean;
|
||||
}
|
||||
|
||||
export class Button extends ReactComponentBase<ButtonProperties, ButtonState> {
|
||||
protected default_state(): ButtonState {
|
||||
return {
|
||||
switched: false,
|
||||
dropdownShowed: false
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const switched = this.props.switched || this.state.switched;
|
||||
const buttonRootClass = this.classList(
|
||||
cssStyle.button,
|
||||
switched ? cssStyle.activated : "",
|
||||
typeof this.props.colorTheme === "string" ? cssStyle["theme-" + this.props.colorTheme] : "");
|
||||
const button = (
|
||||
<div className={buttonRootClass} title={this.props.tooltip} onClick={this.onClick.bind(this)}>
|
||||
<div className={this.classList("icon_em ", (switched ? this.props.iconSwitched : "") || this.props.iconNormal)} />
|
||||
</div>
|
||||
);
|
||||
|
||||
if(!this.hasChildren())
|
||||
return button;
|
||||
|
||||
return (
|
||||
<div className={this.classList(cssStyle.buttonDropdown, this.state.dropdownShowed ? cssStyle.dropdownDisplayed : "", this.props.dropdownButtonExtraClass)} onMouseLeave={this.onMouseLeave.bind(this)}>
|
||||
<div className={cssStyle.buttons}>
|
||||
{button}
|
||||
<div className={cssStyle.dropdownArrow} onMouseEnter={this.onMouseEnter.bind(this)}>
|
||||
<div className={this.classList("arrow", "down")} />
|
||||
</div>
|
||||
</div>
|
||||
<DropdownContainer>
|
||||
{this.props.children}
|
||||
</DropdownContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private onMouseEnter() {
|
||||
this.updateState({
|
||||
dropdownShowed: true
|
||||
});
|
||||
}
|
||||
|
||||
private onMouseLeave() {
|
||||
this.updateState({
|
||||
dropdownShowed: false
|
||||
});
|
||||
}
|
||||
|
||||
private onClick() {
|
||||
const new_state = !this.state.switched;
|
||||
const result = this.props.onToggle?.call(undefined, new_state);
|
||||
if(this.props.autoSwitch)
|
||||
this.updateState({ switched: typeof result === "boolean" ? result : new_state });
|
||||
}
|
||||
}
|
||||
54
shared/js/ui/frames/control-bar/dropdown.tsx
Normal file
54
shared/js/ui/frames/control-bar/dropdown.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import * as React from "react";
|
||||
import {ReactComponentBase} from "tc-shared/ui/elements/ReactComponentBase";
|
||||
const cssStyle = require("./button.scss");
|
||||
|
||||
export interface DropdownEntryProperties {
|
||||
icon?: string;
|
||||
text: JSX.Element;
|
||||
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export class DropdownEntry extends ReactComponentBase<DropdownEntryProperties, {}> {
|
||||
protected default_state() { return {}; }
|
||||
|
||||
render() {
|
||||
const icon = this.props.icon ? this.classList("icon", this.props.icon) : this.classList("icon-container", "icon-empty");
|
||||
if(this.props.children) {
|
||||
return (
|
||||
<div className={cssStyle.dropdownEntry} onClick={this.props.onClick}>
|
||||
<div className={icon} />
|
||||
<a className={cssStyle.entryName}>{this.props.text}</a>
|
||||
<div className={this.classList("arrow", "right")} />
|
||||
<DropdownContainer>
|
||||
{this.props.children}
|
||||
</DropdownContainer>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={cssStyle.dropdownEntry} onClick={this.props.onClick}>
|
||||
<div className={icon} />
|
||||
<a className={cssStyle.entryName}>{this.props.text}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface DropdownContainerProperties { }
|
||||
export interface DropdownContainerState { }
|
||||
|
||||
export class DropdownContainer extends ReactComponentBase<DropdownContainerProperties, DropdownContainerState> {
|
||||
protected default_state() {
|
||||
return { };
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={this.classList(cssStyle.dropdown)}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
32
shared/js/ui/frames/control-bar/index.scss
Normal file
32
shared/js/ui/frames/control-bar/index.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
@import "../../../../css/static/properties";
|
||||
@import "../../../../css/static/mixin";
|
||||
|
||||
/* max height is 2em */
|
||||
.controlBar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@include user-select(none);
|
||||
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
/* tmp fix for ultra small devices */
|
||||
overflow-y: visible;
|
||||
|
||||
.divider {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
border-left:2px solid #393838;
|
||||
height: calc(100% - 3px);
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
342
shared/js/ui/frames/control-bar/index.tsx
Normal file
342
shared/js/ui/frames/control-bar/index.tsx
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
import * as React from "react";
|
||||
import {Button} from "./button";
|
||||
import {DropdownEntry} from "tc-shared/ui/frames/control-bar/dropdown";
|
||||
import {Translatable} from "tc-shared/ui/elements/i18n";
|
||||
import {ReactComponentBase} from "tc-shared/ui/elements/ReactComponentBase";
|
||||
import {ConnectionHandler} from "tc-shared/ConnectionHandler";
|
||||
import {EventHandler, ReactEventHandler, Registry} from "tc-shared/events";
|
||||
const cssStyle = require("./index.scss");
|
||||
const cssButtonStyle = require("./button.scss");
|
||||
|
||||
export interface ControlBarProperties {
|
||||
multiSession: boolean;
|
||||
}
|
||||
|
||||
export interface ConnectionState {
|
||||
connected: boolean;
|
||||
connectedAnywhere: boolean;
|
||||
}
|
||||
|
||||
@ReactEventHandler(obj => obj.props.event_registry)
|
||||
class ConnectButton extends ReactComponentBase<{ multiSession: boolean; event_registry: Registry<ControlBarEvents> }, ConnectionState> {
|
||||
protected default_state(): ConnectionState {
|
||||
return {
|
||||
connected: false,
|
||||
connectedAnywhere: false
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let subentries = [];
|
||||
if(this.props.multiSession) {
|
||||
if(!this.state.connected) {
|
||||
subentries.push(
|
||||
<DropdownEntry key={"connect-server"} icon={"client-connect"} text={<Translatable message={"Connect to a server"} />} />
|
||||
);
|
||||
} else {
|
||||
subentries.push(
|
||||
<DropdownEntry key={"disconnect-current"} icon={"client-disconnect"} text={<Translatable message={"Disconnect from current server"} />} />
|
||||
);
|
||||
}
|
||||
subentries.push(
|
||||
<DropdownEntry key={"connect-new-tab"} icon={"client-connect"} text={<Translatable message={"Connect to a server in another tab"} />} />
|
||||
);
|
||||
}
|
||||
|
||||
if(!this.state.connected) {
|
||||
return (
|
||||
<Button colorTheme={"default"} autoSwitch={false} iconNormal={"client-connect"} tooltip={tr("Connect to a server")}>
|
||||
{subentries}
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button colorTheme={"default"} autoSwitch={false} iconNormal={"client-disconnect"} tooltip={tr("Disconnect from server")}>
|
||||
{subentries}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_connect_state")
|
||||
private handleStateUpdate(state: ConnectionState) {
|
||||
this.updateState(state);
|
||||
}
|
||||
}
|
||||
|
||||
class BookmarkButton extends ReactComponentBase<{ event_registry: Registry<ControlBarEvents> }, {}> {
|
||||
protected default_state() {
|
||||
return {};
|
||||
}
|
||||
|
||||
render() {
|
||||
//TODO: <DropdownEntry icon={"client-bookmark_remove"} text={<Translatable message={"Remove current server to bookmarks"} />} />
|
||||
return (
|
||||
<Button dropdownButtonExtraClass={cssButtonStyle.buttonBookmarks} autoSwitch={false} iconNormal={"client-bookmark_manager"}>
|
||||
<DropdownEntry icon={"client-bookmark_manager"} text={<Translatable message={"Manage bookmarks"} />} />
|
||||
<DropdownEntry icon={"client-bookmark_add"} text={<Translatable message={"Add current server to bookmarks"} />} />
|
||||
<hr />
|
||||
<DropdownEntry text={<Translatable message={"Bookmark X"} />} />
|
||||
<DropdownEntry text={<Translatable message={"Bookmark Y"} />} />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export interface AwayState {
|
||||
away: boolean;
|
||||
awayAnywhere: boolean;
|
||||
awayAll: boolean;
|
||||
}
|
||||
|
||||
@ReactEventHandler(obj => obj.props.event_registry)
|
||||
class AwayButton extends ReactComponentBase<{ event_registry: Registry<ControlBarEvents> }, AwayState> {
|
||||
protected default_state(): AwayState {
|
||||
return {
|
||||
away: false,
|
||||
awayAnywhere: false,
|
||||
awayAll: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let dropdowns = [];
|
||||
if(this.state.away) {
|
||||
dropdowns.push(<DropdownEntry key={"cgo"} icon={"client-present"} text={<Translatable message={"Go online"} />} />);
|
||||
dropdowns.push(<DropdownEntry key={"sam"} icon={"client-away"} text={<Translatable message={"Set away message on this server"} />} />);
|
||||
} else {
|
||||
dropdowns.push(<DropdownEntry key={"sas"} icon={"client-away"} text={<Translatable message={"Set away on this server"} />} />);
|
||||
}
|
||||
|
||||
dropdowns.push(<hr key={"-hr"} />);
|
||||
if(!this.state.awayAll) {
|
||||
dropdowns.push(<DropdownEntry key={"saa"} icon={"client-away"} text={<Translatable message={"Set away on all servers"} />} />);
|
||||
}
|
||||
if(this.state.awayAnywhere) {
|
||||
dropdowns.push(<DropdownEntry key={"goa"} icon={"client-present"} text={<Translatable message={"Go online for all servers"} />} />);
|
||||
dropdowns.push(<DropdownEntry key={"sama"} icon={"client-present"} text={<Translatable message={"Set away message for all servers"} />} />);
|
||||
} else {
|
||||
dropdowns.push(<DropdownEntry key={"goas"} icon={"client-away"} text={<Translatable message={"Go away for all servers"} />} />);
|
||||
}
|
||||
|
||||
/* switchable because we're switching it manually */
|
||||
return (
|
||||
<Button autoSwitch={false} iconNormal={this.state.away ? "client-present" : "client-away"}>
|
||||
{dropdowns}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_away_state")
|
||||
private handleStateUpdate(state: AwayState) {
|
||||
this.updateState(state);
|
||||
}
|
||||
}
|
||||
|
||||
export interface ChannelSubscribeState {
|
||||
subscribeEnabled: boolean;
|
||||
}
|
||||
|
||||
@ReactEventHandler(obj => obj.props.event_registry)
|
||||
class ChannelSubscribeButton extends ReactComponentBase<{ event_registry: Registry<ControlBarEvents> }, ChannelSubscribeState> {
|
||||
protected default_state(): ChannelSubscribeState {
|
||||
return { subscribeEnabled: false };
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Button switched={this.state.subscribeEnabled} autoSwitch={false} iconNormal={"client-unsubscribe_from_all_channels"} iconSwitched={"client-subscribe_to_all_channels"} onToggle={this.onToggle.bind(this)} />;
|
||||
}
|
||||
|
||||
private onToggle() {
|
||||
this.updateState({
|
||||
subscribeEnabled: !this.state.subscribeEnabled
|
||||
});
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_subscribe_state")
|
||||
private handleStateUpdate(state: ChannelSubscribeState) {
|
||||
this.updateState(state);
|
||||
}
|
||||
}
|
||||
|
||||
export interface MicrophoneState {
|
||||
enabled: boolean;
|
||||
muted: boolean;
|
||||
}
|
||||
|
||||
@ReactEventHandler(obj => obj.props.event_registry)
|
||||
class MicrophoneButton extends ReactComponentBase<{ event_registry: Registry<ControlBarEvents> }, MicrophoneState> {
|
||||
protected default_state(): MicrophoneState {
|
||||
return {
|
||||
enabled: false,
|
||||
muted: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
if(!this.state.enabled)
|
||||
return <Button autoSwitch={false} iconNormal={"client-activate_microphone"} tooltip={tr("Enable your microphone on this server")} />;
|
||||
if(this.state.muted)
|
||||
return <Button switched={true} colorTheme={"red"} autoSwitch={false} iconNormal={"client-input_muted"} tooltip={tr("Unmute microphone")} />;
|
||||
return <Button colorTheme={"red"} autoSwitch={false} iconNormal={"client-input_muted"} tooltip={tr("Mute microphone")} />;
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_microphone_state")
|
||||
private handleStateUpdate(state: MicrophoneState) {
|
||||
this.updateState(state);
|
||||
}
|
||||
}
|
||||
|
||||
export interface SpeakerState {
|
||||
muted: boolean;
|
||||
}
|
||||
|
||||
@ReactEventHandler(obj => obj.props.event_registry)
|
||||
class SpeakerButton extends ReactComponentBase<{ event_registry: Registry<ControlBarEvents> }, SpeakerState> {
|
||||
protected default_state(): SpeakerState {
|
||||
return {
|
||||
muted: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.state.muted)
|
||||
return <Button switched={true} colorTheme={"red"} autoSwitch={false} iconNormal={"client-output_muted"} tooltip={tr("Unmute headphones")} />;
|
||||
return <Button colorTheme={"red"} autoSwitch={false} iconNormal={"client-output_muted"} tooltip={tr("Mute headphones")} />;
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_speaker_state")
|
||||
private handleStateUpdate(state: SpeakerState) {
|
||||
this.updateState(state);
|
||||
}
|
||||
}
|
||||
|
||||
export interface QueryState {
|
||||
queryShown: boolean;
|
||||
}
|
||||
|
||||
@ReactEventHandler(obj => obj.props.event_registry)
|
||||
class QueryButton extends ReactComponentBase<{ event_registry: Registry<ControlBarEvents> }, QueryState> {
|
||||
protected default_state() {
|
||||
return {
|
||||
queryShown: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let toggle;
|
||||
if(this.state.queryShown)
|
||||
toggle = <DropdownEntry icon={""} text={<Translatable message={"Hide server queries"} />}/>;
|
||||
else
|
||||
toggle = <DropdownEntry icon={"client-toggle_server_query_clients"} text={<Translatable message={"Show server queries"} />}/>;
|
||||
return (
|
||||
<Button autoSwitch={false} iconNormal={"client-server_query"}>
|
||||
{toggle}
|
||||
<DropdownEntry icon={"client-server_query"} text={<Translatable message={"Manage server queries"} />}/>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_query_state")
|
||||
private handleStateUpdate(state: QueryState) {
|
||||
this.updateState(state);
|
||||
}
|
||||
}
|
||||
|
||||
export interface HostButtonState {
|
||||
url?: string;
|
||||
title?: string;
|
||||
target_url?: string;
|
||||
}
|
||||
|
||||
@ReactEventHandler(obj => obj.props.event_registry)
|
||||
class HostButton extends ReactComponentBase<{ event_registry: Registry<ControlBarEvents> }, HostButtonState> {
|
||||
protected default_state() {
|
||||
return {
|
||||
url: undefined,
|
||||
target_url: undefined
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
if(!this.state.url)
|
||||
return null;
|
||||
|
||||
return (
|
||||
<a
|
||||
className={this.classList(cssButtonStyle.button, cssButtonStyle.buttonHostbutton)}
|
||||
title={this.state.title || tr("Hostbutton")}
|
||||
href={this.state.target_url || this.state.url}>
|
||||
<img alt={tr("Hostbutton")} src={this.state.url} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_host_button")
|
||||
private handleStateUpdate(state: HostButtonState) {
|
||||
this.updateState(state);
|
||||
}
|
||||
}
|
||||
|
||||
@ReactEventHandler<ControlBar>(obj => obj.event_registry)
|
||||
export class ControlBar extends React.Component<ControlBarProperties, {}> {
|
||||
private readonly event_registry: Registry<ControlBarEvents>;
|
||||
private connection: ConnectionHandler;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.event_registry = new Registry<ControlBarEvents>();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={cssStyle.controlBar}>
|
||||
<ConnectButton event_registry={this.event_registry} multiSession={this.props.multiSession} />
|
||||
<BookmarkButton event_registry={this.event_registry} />
|
||||
<div className={cssStyle.divider} />
|
||||
<AwayButton event_registry={this.event_registry} />
|
||||
<MicrophoneButton event_registry={this.event_registry} />
|
||||
<SpeakerButton event_registry={this.event_registry} />
|
||||
<div className={cssStyle.divider} />
|
||||
<ChannelSubscribeButton event_registry={this.event_registry} />
|
||||
<QueryButton event_registry={this.event_registry} />
|
||||
<div className={cssStyle.spacer} />
|
||||
<HostButton event_registry={this.event_registry} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>("set_connection_handler")
|
||||
private handleSetConnectionHandler(event: ControlBarEvents["set_connection_handler"]) {
|
||||
if(this.connection == event.handler) return;
|
||||
|
||||
this.connection = event.handler;
|
||||
this.event_registry.fire("update_all_states");
|
||||
}
|
||||
|
||||
@EventHandler<ControlBarEvents>(["update_all_states", "update_state"])
|
||||
private updateStateHostButton(event) {
|
||||
}
|
||||
}
|
||||
|
||||
export interface ControlBarEvents {
|
||||
set_host_button: HostButtonState;
|
||||
set_subscribe_state: ChannelSubscribeState;
|
||||
set_connect_state: ConnectionState;
|
||||
set_away_state: AwayState;
|
||||
set_microphone_state: MicrophoneState;
|
||||
set_speaker_state: SpeakerState;
|
||||
set_query_state: QueryState;
|
||||
|
||||
update_state: {
|
||||
states: "host-button" | "subscribe-mode" | "connect-state" | "away" | "microphone" | "speaker" | "query"
|
||||
}
|
||||
|
||||
update_all_states: {},
|
||||
|
||||
set_connection_handler: {
|
||||
handler?: ConnectionHandler
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue