749 lines
23 KiB
Rust
749 lines
23 KiB
Rust
#![allow(non_snake_case)]
|
|
|
|
use dioxus::prelude::*;
|
|
use mime_guess::Mime;
|
|
use mumble_web2_common::{ProxyOverides, ServerStatus};
|
|
use ordermap::OrderSet;
|
|
use std::collections::HashMap;
|
|
|
|
use crate::imp;
|
|
|
|
pub type ChannelId = u32;
|
|
pub type UserId = u32;
|
|
|
|
pub enum ConnectionState {
|
|
Disconnected,
|
|
Connecting,
|
|
Connected,
|
|
Failed(String),
|
|
}
|
|
|
|
#[derive(Debug)]
|
|
pub enum Command {
|
|
Connect {
|
|
address: String,
|
|
username: String,
|
|
config: ProxyOverides,
|
|
},
|
|
SendChat {
|
|
markdown: String,
|
|
channels: Vec<ChannelId>,
|
|
},
|
|
SendFile {
|
|
bytes: Vec<u8>,
|
|
name: String,
|
|
mime: Option<Mime>,
|
|
channels: Vec<ChannelId>,
|
|
},
|
|
SetMute {
|
|
mute: bool,
|
|
},
|
|
SetDeaf {
|
|
deaf: bool,
|
|
},
|
|
EnterChannel {
|
|
channel: ChannelId,
|
|
user: UserId,
|
|
},
|
|
UpdateMicEffects {
|
|
denoise: bool,
|
|
},
|
|
Disconnect,
|
|
}
|
|
|
|
use Command::*;
|
|
use ConnectionState::*;
|
|
|
|
#[derive(Default)]
|
|
pub struct ChannelState {
|
|
pub name: String,
|
|
pub children: OrderSet<ChannelId>,
|
|
pub users: OrderSet<UserId>,
|
|
pub parent: Option<ChannelId>,
|
|
}
|
|
|
|
#[derive(Default)]
|
|
pub struct UserState {
|
|
pub name: String,
|
|
pub channel: ChannelId,
|
|
pub deaf: bool,
|
|
pub mute: bool,
|
|
pub self_deaf: bool,
|
|
pub self_mute: bool,
|
|
}
|
|
|
|
impl UserState {
|
|
pub fn icon(&self) -> UserIcon {
|
|
match (self.mute || self.self_mute, self.deaf || self.self_deaf) {
|
|
(false, false) => UserIcon::Normal,
|
|
(true, false) => UserIcon::Muted,
|
|
(_, true) => UserIcon::Deafened,
|
|
}
|
|
}
|
|
}
|
|
|
|
pub struct Chat {
|
|
pub raw: String,
|
|
pub dangerous_html: String,
|
|
pub sender: Option<UserId>,
|
|
}
|
|
|
|
#[derive(Default)]
|
|
pub struct ServerState {
|
|
pub channels: HashMap<ChannelId, ChannelState>,
|
|
pub users: HashMap<UserId, UserState>,
|
|
pub chat: Vec<Chat>,
|
|
pub session: Option<UserId>,
|
|
}
|
|
|
|
impl ServerState {
|
|
pub fn this_user(&self) -> Option<&UserState> {
|
|
self.users.get(&self.session?)
|
|
}
|
|
}
|
|
|
|
pub struct State {
|
|
pub status: GlobalSignal<ConnectionState>,
|
|
pub server: GlobalSignal<ServerState>,
|
|
}
|
|
|
|
pub static STATE: State = State {
|
|
status: Signal::global(|| Disconnected),
|
|
server: Signal::global(|| Default::default()),
|
|
};
|
|
|
|
#[derive(Clone, Copy, PartialEq, Eq)]
|
|
pub enum UserIcon {
|
|
Normal,
|
|
Muted,
|
|
Deafened,
|
|
None,
|
|
}
|
|
|
|
impl UserIcon {
|
|
pub fn url(self) -> Option<Asset> {
|
|
// speaker from https://www.svgrepo.com/collection/ikono-bold-line-icons/
|
|
// mic from https://www.svgrepo.com/collection/hashicorp-line-interface-icons/
|
|
|
|
use UserIcon::*;
|
|
Some(match self {
|
|
Normal => asset!("assets/mic-svgrepo-com.svg"),
|
|
Muted => asset!("assets/mic-off-svgrepo-com.svg"),
|
|
Deafened => asset!("assets/speaker-muted-svgrepo-com.svg"),
|
|
None => return Option::None,
|
|
})
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
|
|
let color = match icon {
|
|
UserIcon::Normal => "var(--accent-normal)",
|
|
UserIcon::Muted => "var(--accent-muted)",
|
|
UserIcon::Deafened => "var(--accent-deafened)",
|
|
UserIcon::None => "var(--accent-normal)",
|
|
};
|
|
|
|
rsx!(
|
|
div {
|
|
class: match isself { true => "userpil is_self", false => "userpil" },
|
|
style: "background-color: {color}",
|
|
{ icon.url().map(|url| rsx!(img { src: url })) }
|
|
"\u{00A0}{name}\u{00A0}"
|
|
}
|
|
)
|
|
}
|
|
|
|
#[component]
|
|
pub fn User(id: UserId) -> Element {
|
|
let server = STATE.server.read();
|
|
match server.users.get(&id) {
|
|
Some(state) => rsx!(UserPill {
|
|
name: state.name.clone(),
|
|
icon: state.icon(),
|
|
isself: server.session.unwrap() == id,
|
|
}),
|
|
None => rsx!(UserPill {
|
|
name: format!("unknown user ({id})"),
|
|
icon: UserIcon::None,
|
|
isself: false,
|
|
}),
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
pub fn Channel(id: ChannelId) -> Element {
|
|
let net: Coroutine<Command> = use_coroutine_handle();
|
|
let server = STATE.server.read();
|
|
let user = server.session.unwrap();
|
|
let Some(state) = server.channels.get(&id) else {
|
|
return rsx!("missing channel {id}");
|
|
};
|
|
|
|
rsx!(
|
|
details {
|
|
class: "channel_details",
|
|
open: true,
|
|
summary {
|
|
span {
|
|
role: "button",
|
|
ondoubleclick: move |evt| {
|
|
evt.stop_propagation();
|
|
evt.prevent_default();
|
|
net.send(EnterChannel { channel: id, user })
|
|
},
|
|
"{state.name}"
|
|
}
|
|
}
|
|
if state.users.len() + state.children.len() > 0 {
|
|
div {
|
|
class: "channel_children",
|
|
for id in state.users.iter() {
|
|
User { id: *id }
|
|
}
|
|
for child in state.children.iter() {
|
|
Channel { id: *child }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
pub fn pick_and_send_file(net: &Coroutine<Command>) {
|
|
let channels = if let Some(user) = STATE.server.read().this_user() {
|
|
vec![user.channel]
|
|
} else {
|
|
return;
|
|
};
|
|
let dialog = rfd::AsyncFileDialog::new().pick_file();
|
|
let sender = net.tx();
|
|
spawn(async move {
|
|
let Some(handle) = dialog.await else { return };
|
|
let name = handle.file_name();
|
|
let bytes = handle.read().await;
|
|
let mime = mime_guess::from_path(&name).first();
|
|
let _ = sender.unbounded_send(SendFile {
|
|
bytes,
|
|
name,
|
|
mime,
|
|
channels,
|
|
});
|
|
});
|
|
}
|
|
|
|
#[component]
|
|
pub fn ChatView() -> Element {
|
|
let net: Coroutine<Command> = use_coroutine_handle();
|
|
let server = STATE.server.read();
|
|
let mut draft = use_signal(|| "".to_string());
|
|
|
|
let mut do_send = move || {
|
|
if let Some(user) = STATE.server.read().this_user() {
|
|
net.send(SendChat {
|
|
markdown: draft.write().split_off(0),
|
|
channels: vec![user.channel],
|
|
});
|
|
}
|
|
};
|
|
|
|
rsx!(
|
|
div {
|
|
class: "chat_panel",
|
|
div {
|
|
class: "chat_history",
|
|
for chat in server.chat.iter() {
|
|
div {
|
|
class: "chat_message",
|
|
if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
|
|
UserPill {
|
|
name: sender.name.clone(),
|
|
icon: UserIcon::None,
|
|
isself: false,
|
|
}
|
|
}
|
|
span {
|
|
dangerous_inner_html: "{chat.dangerous_html}",
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div {
|
|
class: "chat_box_wrapper",
|
|
div {
|
|
class: "chat_box",
|
|
input {
|
|
placeholder: "say something",
|
|
value: "{draft.read()}",
|
|
oninput: move |evt| draft.set(evt.value().clone()),
|
|
onkeypress: move |evt: Event<KeyboardData>| {
|
|
if evt.code() == Code::Enter && evt.modifiers().is_empty() {
|
|
do_send();
|
|
}
|
|
}
|
|
}
|
|
div {
|
|
span {
|
|
onclick: move |_| pick_and_send_file(&net),
|
|
class: "material-symbols-outlined",
|
|
style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
|
|
"attach_file",
|
|
}
|
|
}
|
|
div {
|
|
span {
|
|
onclick: move |_| do_send(),
|
|
class: "material-symbols-outlined",
|
|
style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
|
|
"send",
|
|
}
|
|
}
|
|
}
|
|
//button {
|
|
// onclick: move |_| do_send(),
|
|
// "Send"
|
|
//}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
#[component]
|
|
pub fn ControlView(config: Resource<Option<ProxyOverides>>) -> Element {
|
|
let net: Coroutine<Command> = use_coroutine_handle();
|
|
let status = &STATE.status;
|
|
let server = STATE.server.read();
|
|
let Some(&UserState {
|
|
deaf,
|
|
self_deaf,
|
|
mute,
|
|
self_mute,
|
|
ref name,
|
|
channel,
|
|
..
|
|
}) = server.this_user()
|
|
else {
|
|
return rsx!();
|
|
};
|
|
|
|
let current_channel_name = server.channels[&channel].name.clone();
|
|
|
|
let proxy_url = config
|
|
.read_unchecked()
|
|
.as_ref()
|
|
.and_then(|opt| opt.as_ref())
|
|
.map(|gui_config| gui_config.proxy_url.clone());
|
|
|
|
let connecting_color = "yellow";
|
|
let connected_color = "oklch(0.55 0.1184 141.35)";
|
|
let disconnected_color = "gray";
|
|
let failed_color = "red";
|
|
|
|
let connection_status = match &*status.read() {
|
|
Connecting => rsx! {
|
|
div {
|
|
style: "color: \"{connecting_color}\";",
|
|
span {
|
|
class: "material-symbols-outlined",
|
|
style: "vertical-align: middle; font-size: 30px;",
|
|
"signal_cellular_alt_2_bar"
|
|
}
|
|
span {
|
|
style: "width: 5px; display: inline-block;"
|
|
}
|
|
span {
|
|
style: "vertical-align: middle; font-size: 30px;",
|
|
"Connecting"
|
|
}
|
|
}
|
|
},
|
|
Connected => rsx! {
|
|
div {
|
|
div {
|
|
style: "color: \"{connected_color}\";",
|
|
span {
|
|
class: "material-symbols-outlined",
|
|
style: "vertical-align: middle; font-size: 30px;",
|
|
"signal_cellular_alt"
|
|
}
|
|
span {
|
|
style: "width: 5px; display: inline-block;"
|
|
}
|
|
span {
|
|
style: "vertical-align: middle; font-size: 25px;",
|
|
"Connected"
|
|
}
|
|
}
|
|
div {
|
|
span { style: "width: 3px; display: inline-block;"}
|
|
span { "{current_channel_name}" }
|
|
if let Some(proxy_url) = proxy_url {
|
|
span { " — " }
|
|
span { "{proxy_url}" }
|
|
}
|
|
}
|
|
}
|
|
},
|
|
Disconnected => rsx! {
|
|
div {
|
|
style: "color: \"{disconnected_color}\";",
|
|
span {
|
|
class: "material-symbols-outlined",
|
|
style: "vertical-align: middle;",
|
|
"signal_disconnected"
|
|
}
|
|
span {
|
|
style: "width: 5px; display: inline-block;"
|
|
}
|
|
span {
|
|
style: "vertical-align: middle;",
|
|
"Disconnected"
|
|
}
|
|
}
|
|
},
|
|
Failed(_) => rsx! {
|
|
div {
|
|
style: "color: \"{failed_color}\";",
|
|
span {
|
|
class: "material-symbols-outlined",
|
|
style: "vertical-align: middle;",
|
|
"error"
|
|
}
|
|
span {
|
|
style: "width: 5px; display: inline-block;"
|
|
}
|
|
span {
|
|
style: "vertical-align: middle;",
|
|
"Failed"
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
let denoise = use_signal(|| false);
|
|
rsx!(
|
|
// Server control
|
|
div {
|
|
class: "button_row",
|
|
div {
|
|
{connection_status}
|
|
}
|
|
span { class: "spacer" }
|
|
button {
|
|
class: "toggle_button",
|
|
onclick: move |_| net.send(Disconnect),
|
|
span {
|
|
class: "material-symbols-outlined",
|
|
"signal_disconnected"
|
|
}
|
|
}
|
|
}
|
|
hr { style: "width: 100%;" }
|
|
// User control
|
|
div {
|
|
class: "button_row",
|
|
button {
|
|
class: "user_edit_button",
|
|
span {
|
|
class: "material-symbols-outlined",
|
|
style: "color: oklch(0.65 0.2245 28.06); font-size: 45px; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;",
|
|
"person_edit"
|
|
}
|
|
}
|
|
div {
|
|
div {
|
|
span { style: "font-size: 25px;", "{name}" }
|
|
}
|
|
div {
|
|
span { style: "font-size: 20px; color: gray;", "some data" }
|
|
}
|
|
}
|
|
span { class: "spacer" }
|
|
button {
|
|
class: match denoise() {
|
|
true => "toggle_button is_on",
|
|
false => "toggle_button",
|
|
},
|
|
role: "switch",
|
|
aria_checked: denoise(),
|
|
onclick: move |_| {
|
|
let new_denoise = !denoise();
|
|
*denoise.write_unchecked() = new_denoise;
|
|
net.send(UpdateMicEffects { denoise: new_denoise })
|
|
},
|
|
match denoise() {
|
|
true => rsx!(span { class: "material-symbols-outlined", "cadence"}),
|
|
false => rsx!(span { class: "material-symbols-outlined", "graphic_eq"}),
|
|
}
|
|
}
|
|
button {
|
|
class: match mute || self_mute {
|
|
true => "toggle_button is_on",
|
|
false => "toggle_button",
|
|
},
|
|
role: "switch",
|
|
aria_checked: mute || self_mute,
|
|
disabled: mute,
|
|
onclick: move |_| net.send(SetMute { mute: !self_mute }),
|
|
match mute || self_mute {
|
|
true => rsx!(span { class: "material-symbols-outlined", "mic_off"}),
|
|
false => rsx!(span { class: "material-symbols-outlined", "mic"}),
|
|
}
|
|
}
|
|
button {
|
|
class: match deaf || self_deaf {
|
|
true => "toggle_button in_on",
|
|
false => "toggle_button",
|
|
},
|
|
role: "switch",
|
|
aria_checked: deaf || self_deaf,
|
|
disabled: deaf,
|
|
onclick: move |_| net.send(SetDeaf { deaf: !self_deaf }),
|
|
match deaf || self_deaf {
|
|
true => rsx!(span { class: "material-symbols-outlined", "volume_off"}),
|
|
false => rsx!(span { class: "material-symbols-outlined", "volume_up"}),
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
#[component]
|
|
pub fn ServerView(config: Resource<Option<ProxyOverides>>) -> Element {
|
|
let net: Coroutine<Command> = use_coroutine_handle();
|
|
let server = STATE.server.read();
|
|
let Some(&UserState {
|
|
deaf,
|
|
self_deaf,
|
|
mute,
|
|
self_mute,
|
|
..
|
|
}) = server.this_user()
|
|
else {
|
|
return rsx!();
|
|
};
|
|
|
|
rsx!(
|
|
div {
|
|
class: "server_grid",
|
|
div {
|
|
class: "server_channel_box",
|
|
for (id, state) in server.channels.iter() {
|
|
if state.parent.is_none() {
|
|
Channel { id: *id }
|
|
}
|
|
}
|
|
}
|
|
div {
|
|
class: "server_chat_box",
|
|
ChatView {}
|
|
}
|
|
div {
|
|
class: "server_control_box",
|
|
ControlView { config }
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
#[component]
|
|
pub fn LoginView(config: Resource<Option<ProxyOverides>>) -> Element {
|
|
let net: Coroutine<Command> = use_coroutine_handle();
|
|
|
|
let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
|
|
use_resource(move || async move {
|
|
let client = reqwest::Client::new();
|
|
loop {
|
|
*last_status.write_unchecked() = Some(imp::get_status(&client).await);
|
|
imp::sleep(std::time::Duration::from_secs_f32(1.0)).await;
|
|
}
|
|
});
|
|
|
|
let mut address_input = use_signal(|| imp::load_server_url());
|
|
let address = use_memo(move || {
|
|
if let Some(addr) = address_input() {
|
|
addr.clone()
|
|
} else {
|
|
config()
|
|
.flatten()
|
|
.map(|c| c.proxy_url.clone())
|
|
.unwrap_or_default()
|
|
}
|
|
});
|
|
|
|
let previous_username = imp::load_username();
|
|
let mut username = use_signal(|| previous_username.unwrap_or(String::new()));
|
|
|
|
let do_connect = move |_| {
|
|
//let _ = set_default_username(&username.read());
|
|
let _ = imp::set_default_username(&username.read());
|
|
if config.read().as_ref().is_some_and(|opt| opt.is_none()) {
|
|
imp::set_default_server(&address.read());
|
|
}
|
|
net.send(Connect {
|
|
address: address.read().clone(),
|
|
username: username.read().clone(),
|
|
config: config.read().clone().flatten().unwrap_or_default(),
|
|
})
|
|
};
|
|
let status = &STATE.status;
|
|
let bottom = match &*status.read() {
|
|
Disconnected => rsx! {
|
|
button {
|
|
class: "login_bttn",
|
|
onclick: do_connect.clone(),
|
|
"Connect"
|
|
}
|
|
},
|
|
Connecting => rsx! {
|
|
div {
|
|
class: "login_bttn",
|
|
"Connecting..."
|
|
}
|
|
},
|
|
Failed(msg) => rsx!(
|
|
button {
|
|
class: "login_bttn",
|
|
onclick: do_connect.clone(),
|
|
"Reconnect"
|
|
}
|
|
div {
|
|
class: "login_error",
|
|
"Failed to connect:"
|
|
pre {
|
|
"{msg}"
|
|
}
|
|
}
|
|
),
|
|
Connected => unreachable!(),
|
|
};
|
|
let version = option_env!("MUMBLE_WEB2_VERSION");
|
|
rsx!(
|
|
div {
|
|
class: "login",
|
|
h1 {
|
|
"Mumble Web"
|
|
match version {
|
|
Some(v) => rsx!(" " span { class: "login_version", "({v})" }),
|
|
None => rsx!(),
|
|
}
|
|
}
|
|
if config.read().as_ref().is_some_and(|opt| opt.is_none()) {
|
|
div {
|
|
label {
|
|
for: "address-entry",
|
|
"Server Address:"
|
|
}
|
|
input {
|
|
id: "address-entry",
|
|
placeholder: "address",
|
|
value: "{address.read()}",
|
|
autofocus: "true",
|
|
oninput: move |evt| address_input.set(Some(evt.value().clone())),
|
|
}
|
|
}
|
|
}
|
|
div {
|
|
label {
|
|
for: "username-entry",
|
|
"Username:"
|
|
//style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
|
|
}
|
|
input {
|
|
id: "username-entry",
|
|
placeholder: "username",
|
|
value: "{username.read()}",
|
|
autofocus: "true",
|
|
oninput: move |evt| username.set(evt.value().clone()),
|
|
}
|
|
}
|
|
div {
|
|
match &*last_status.read() {
|
|
None => rsx!(div {
|
|
class: "login_status",
|
|
span {"···"}
|
|
}),
|
|
Some(Ok(ServerStatus { success: false, .. })) => rsx!(div {
|
|
class: "login_status is_error",
|
|
span {
|
|
"Could not reach server"
|
|
}
|
|
}),
|
|
Some(Ok(status)) => rsx!(div {
|
|
class: "login_status",
|
|
if let (Some(users), Some(max_users)) = (status.users, status.max_users) {
|
|
span {"{users}/{max_users} Online"}
|
|
} else {
|
|
span {"Unknown Online"}
|
|
}
|
|
span {"-"}
|
|
if let Some((maj, min, pat)) = status.version {
|
|
span {"Version: {maj}.{min}.{pat}"}
|
|
} else {
|
|
span {"Unknown Version"}
|
|
}
|
|
}),
|
|
Some(Err(_)) => rsx!(div {
|
|
class: "login_status is_error",
|
|
span {
|
|
"Could not reach proxy server"
|
|
}
|
|
}),
|
|
}
|
|
div {
|
|
{bottom}
|
|
}
|
|
|
|
}
|
|
}
|
|
)
|
|
// rsx!(
|
|
// div {
|
|
// class: "{login_box}",
|
|
// h1 {
|
|
// "Mumble Web"
|
|
// }
|
|
// input {
|
|
// placeholder: "username",
|
|
// value: "{username.read()}",
|
|
// autofocus: "true",
|
|
// oninput: move |evt| username.set(evt.value().clone()),
|
|
// }
|
|
// input {
|
|
// placeholder: "server address",
|
|
// value: "{address.read()}",
|
|
// autofocus: "true",
|
|
// oninput: move |evt| address_input.set(Some(evt.value().clone())),
|
|
// }
|
|
// {bottom}
|
|
// }
|
|
// )
|
|
}
|
|
|
|
pub fn app() -> Element {
|
|
static STYLE: Asset = asset!("/assets/main.scss");
|
|
|
|
use_coroutine(|rx: UnboundedReceiver<Command>| super::network_entrypoint(rx));
|
|
let config = use_resource(|| async move {
|
|
match imp::load_proxy_overides().await {
|
|
Ok(config) => config,
|
|
Err(_) => None,
|
|
}
|
|
});
|
|
|
|
rsx!(
|
|
document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" }
|
|
document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" }
|
|
document::Link{ rel: "stylesheet", href: STYLE }
|
|
|
|
if config.read().is_none() {
|
|
div { class: "loading", "Loading..." }
|
|
} else {
|
|
match *STATE.status.read() {
|
|
Connected => rsx!(ServerView { config }),
|
|
_ => rsx!(LoginView { config }),
|
|
}
|
|
}
|
|
)
|
|
}
|