Add blitz feature for Dioxus Native rendering support
Add an orthogonal `blitz` feature flag that switches the rendering framework from dioxus webview to dioxus-native (Blitz). Can be combined with `desktop` or `mobile` features. Also bumps rfd to ^0.17.0 (upstream git moved forward), removes stale gui-level [patch.crates-io] section, and adds xdotool to the Dockerfile for libxdo (blitz-shell dependency). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Builder
+74
-38
@@ -1,5 +1,8 @@
|
||||
#![allow(non_snake_case)]
|
||||
|
||||
#[cfg(feature = "blitz")]
|
||||
use dioxus_native::prelude::*;
|
||||
#[cfg(not(feature = "blitz"))]
|
||||
use dioxus::prelude::*;
|
||||
use mime_guess::Mime;
|
||||
use mumble_web2_common::{ProxyOverrides, ServerStatus};
|
||||
@@ -8,6 +11,63 @@ use std::collections::{HashMap, HashSet};
|
||||
|
||||
use crate::imp::{ConfigSystem, ConfigSystemInterface as _, Platform, PlatformInterface as _};
|
||||
|
||||
// Material Symbols icon component.
|
||||
// On blitz builds, renders <img> with a data URI SVG containing the explicit fill color,
|
||||
// since web fonts aren't available and <img> can't inherit CSS color.
|
||||
// On non-blitz builds, renders the icon font span as usual.
|
||||
|
||||
fn icon_svg_path(name: &str) -> &'static str {
|
||||
// Paths from Google Material Symbols Outlined, weight 700, FILL 1, 24px.
|
||||
// Coordinate space: viewBox="0 -960 960 960"
|
||||
match name {
|
||||
"attach_file" => "M772-320q0 117-87 195.5T479-46q-119 0-205-78.5T188-320v-392q0-86 63.5-144T403-914q88 0 150.5 58T616-712v371q0 55-40.5 92.5T479-211q-56 0-95.5-37.5T344-341v-370h116v370q0 7 5.5 11t13.5 4q8 0 14.5-3.5T500-341v-370q0-38-29-63t-68-25q-39 0-69 24.5T304-712v392q0 69 52.5 114T480-161q71 0 123.5-45T656-320v-429h116v429Z",
|
||||
"cadence" => "M417-86v-555h125v555H417ZM252-210v-308h125v308H252Zm330 0v-308h125v308H582ZM86-301v-126h126v126H86Zm661 0v-126h126v126H747ZM46-542v-125h69q37.98 0 70.99-18.5T239-737q37.96-64.01 102.17-100.5 64.2-36.5 139.02-36.5 74.81 0 138.87 36.5Q683.12-801.01 721-737q19.75 32.31 52.52 51.15Q806.29-667 844-667h70v125h-69q-72 0-133-34.5T614-672q-20.82-35.75-56.59-56.38Q521.65-749 480-749q-42 0-77.63 20.62Q366.75-707.75 346-672q-37 61-98 95.5T115-542H46Z",
|
||||
"error" => "M479.77-246Q509-246 529-265.77q20-19.77 20-49t-19.77-49.73q-19.77-20.5-49-20.5T431-364.5q-20 20.5-20 49.73 0 29.23 19.77 49t49 19.77ZM417-438h126v-263H417v263Zm63 392q-91 0-169.99-34.08-78.98-34.09-137.41-92.52-58.43-58.43-92.52-137.41Q46-389 46-480q0-91 34.08-169.99 34.09-78.98 92.52-137.41 58.43-58.43 137.41-92.52Q389-914 480-914q91 0 169.99 34.08 78.98 34.09 137.41 92.52 58.43 58.43 92.52 137.41Q914-571 914-480q0 91-34.08 169.99-34.09 78.98-92.52 137.41-58.43 58.43-137.41 92.52Q571-46 480-46Z",
|
||||
"graphic_eq" => "M255-215v-530h111v530H255ZM425-46v-868h110v868H425ZM86-385v-190h111v190H86Zm507 170v-530h111v530H593Zm170-170v-190h111v190H763Z",
|
||||
"mic" => "M479.88-354Q414-354 368-400.08 322-446.17 322-512v-233q0-65.83 46.12-111.92 46.12-46.08 112-46.08T592-856.92q46 46.09 46 111.92v233q0 65.83-46.12 111.92-46.12 46.08-112 46.08ZM425-59v-127q-121-16-199-109.12T148-512h111q0 92 64.7 156.5T480.2-291q91.8 0 156.3-64.64Q701-420.29 701-512h111q0 124-78 217T535-186v127H425Z",
|
||||
"mic_off" => "m772-347-82-82q9-18 13-37.5t4-45.5h110q0 44-11 87t-34 78ZM639-480 336-783v-11q13-44 54-76.5t95-32.5q66 0 112.5 46T644-745v233q0 9-1.5 18t-3.5 14ZM430-59v-127q-121-16-199-109t-78-217h111q0 92 64.5 156.5T485-291q43 0 81.5-15.5T634-349l80 80q-35 33-79 54.5T540-186v127H430Zm357-5L51-800l66-66 736 736-66 66Z",
|
||||
"person_edit" => "M554-86v-151l227-226q12-12.18 26.67-17.59Q822.33-486 837-486q16 0 30.55 6T894-462l37 37q10.82 12 16.91 26.67Q954-383.67 954-369q0 16-5.5 30.5T931-312L705-86H554Zm-428-23v-148q0-43.3 22.7-79.6 22.69-36.3 60.3-55.4 65-32 132.96-48.5Q409.92-457 480-457q42 0 81.33 4.97Q600.67-447.05 640-436L474-270v161H126Zm721-231 27-29-37-37-28 28 38 38ZM480-497q-81 0-137.5-56.5T286-691q0-81 56.5-137T480-884q81 0 137.5 56T674-691q0 81-56.5 137.5T480-497Z",
|
||||
"send" => "M89-128v-244l366-108L89-588v-244l831 352L89-128Z",
|
||||
"signal_cellular_alt" => "M176-126v-208h166v208H176Zm246 0v-408h166v408H422Zm246 0v-708h166v708H668Z",
|
||||
"signal_cellular_alt_2_bar" => "M176-126v-208h166v208H176Zm246 0v-408h166v408H422Z",
|
||||
"signal_disconnected" => "m703-385-66-66q17-24 26-52t9-57q0-38-15-73t-42-62l65-65q40 40 62.5 91.5T765-560q0 48-16.5 92.5T703-385ZM588-500 420-668q14-8 29-11.5t31-3.5q51 0 87 36t36 87q0 16-3.5 31T588-500Zm225 224-66-66q38-46 58.5-102T826-560q0-69-26.5-132.5T724-804l65-66q62 62 95.5 142T918-560q0 78-27 151t-78 133Zm16 263L543-299v202H417v-328L288-554v2q2 36 16.5 68.5T345-425l-65 65q-41-40-63-91.5T195-560q0-20 2.5-38.5T206-636l-48-48q-11 30-17.5 61t-6.5 63q0 69 26.5 132T236-316l-66 66q-60-63-94-142.5T42-560q0-51 11-100t34-94l-74-75 67-67L896-80l-67 67Z",
|
||||
"volume_off" => "M802-24 L679-149q-21 12-44.5 21T585-114v-99l12-4q6-2 12-5L505-328v249L258-326H78v-308h130L22-826l66-66L869-91l-67 67Zm18-253-69-71q17-30 25.5-63.5T785-481q0-93-56-166.5T585-749v-99q130 29 213 131.5T881-481q0 57-16 108t-45 96ZM687-413 585-517v-137q51 24 83.5 70.5T701-480q0 18-3.5 35T687-413ZM505-600 367-743l138-138v281Z",
|
||||
"volume_up" => "M586-114v-99q89-28 144.5-101.5T786-481q0-93-55.5-166.5T586-749v-99q130 29 212.5 131.5T881-481q0 133-82.5 235.5T586-114ZM79-326v-308h180l247-247v802L259-326H79Zm507 18v-346q51 25 83 71t32 103q0 56-32 102t-83 70Z",
|
||||
_ => panic!("unknown icon: {name}"),
|
||||
}
|
||||
}
|
||||
|
||||
fn icon_data_uri(name: &str, color: &str, opacity: f64) -> String {
|
||||
use base64::Engine;
|
||||
let path_d = icon_svg_path(name);
|
||||
let opacity_attr = if opacity < 1.0 {
|
||||
format!(r#" fill-opacity="{opacity}""#)
|
||||
} else {
|
||||
String::new()
|
||||
};
|
||||
let svg = format!(
|
||||
r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="{color}"{opacity_attr} d="{path_d}"/></svg>"#
|
||||
);
|
||||
let b64 = base64::engine::general_purpose::STANDARD.encode(svg.as_bytes());
|
||||
format!("data:image/svg+xml;base64,{b64}")
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn Icon(
|
||||
name: String,
|
||||
#[props(default)] style: String,
|
||||
#[props(default)] color: String,
|
||||
#[props(default = 1.0)] opacity: f64,
|
||||
) -> Element {
|
||||
let fill = if color.is_empty() { "white" } else { &color };
|
||||
let src = icon_data_uri(&name, fill, opacity);
|
||||
rsx!(img {
|
||||
class: "material-symbols-outlined",
|
||||
style: "{style}",
|
||||
src: "{src}",
|
||||
})
|
||||
}
|
||||
|
||||
pub type ChannelId = u32;
|
||||
pub type UserId = u32;
|
||||
|
||||
@@ -430,17 +490,13 @@ pub fn ChatView() -> Element {
|
||||
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",
|
||||
Icon { name: "attach_file", color: "#ffffff", opacity: 0.5 }
|
||||
}
|
||||
}
|
||||
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",
|
||||
Icon { name: "send", color: "#ffffff", opacity: 0.5 }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -490,10 +546,7 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
class: "connection_status",
|
||||
style: "color: {connecting_color};",
|
||||
div {
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"signal_cellular_alt_2_bar"
|
||||
}
|
||||
Icon { name: "signal_cellular_alt_2_bar", color: "yellow" }
|
||||
span {
|
||||
class: "status_text",
|
||||
" Connecting"
|
||||
@@ -506,10 +559,7 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
class: "connection_status",
|
||||
div {
|
||||
style: "color: {connected_color};",
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"signal_cellular_alt"
|
||||
}
|
||||
Icon { name: "signal_cellular_alt", color: "#46823e" }
|
||||
span {
|
||||
class: "status_text",
|
||||
" Connected"
|
||||
@@ -526,10 +576,7 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
class: "connection_status",
|
||||
style: "color: {disconnected_color};",
|
||||
div {
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"signal_disconnected"
|
||||
}
|
||||
Icon { name: "signal_disconnected", color: "gray" }
|
||||
span {
|
||||
class: "status_text",
|
||||
" Disconnected"
|
||||
@@ -542,10 +589,7 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
class: "connection_status",
|
||||
style: "color: {failed_color};",
|
||||
div {
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"error"
|
||||
}
|
||||
Icon { name: "error", color: "red" }
|
||||
span {
|
||||
class: "status_text",
|
||||
" Failed"
|
||||
@@ -567,10 +611,7 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
button {
|
||||
class: "toggle_button",
|
||||
onclick: move |_| net.send(Disconnect),
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"signal_disconnected"
|
||||
}
|
||||
Icon { name: "signal_disconnected", color: "#ffffff", opacity: 0.5 }
|
||||
}
|
||||
}
|
||||
hr { style: "width: 100%;" }
|
||||
@@ -579,11 +620,7 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
class: "button_row",
|
||||
button {
|
||||
class: "user_edit_button",
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
style: "color: oklch(0.65 0.2245 28.06);",
|
||||
"person_edit"
|
||||
}
|
||||
Icon { name: "person_edit", color: "#fa3f36" }
|
||||
}
|
||||
div {
|
||||
class: "user_info",
|
||||
@@ -608,8 +645,8 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
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"}),
|
||||
true => rsx!(Icon { name: "cadence", color: "#b23f43", opacity: 0.8938 }),
|
||||
false => rsx!(Icon { name: "graphic_eq", color: "#ffffff", opacity: 0.5 }),
|
||||
}
|
||||
}
|
||||
button {
|
||||
@@ -622,8 +659,8 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
disabled: mute || suppress,
|
||||
onclick: move |_| net.send(SetMute { mute: !self_mute }),
|
||||
match mute || suppress || self_mute {
|
||||
true => rsx!(span { class: "material-symbols-outlined", "mic_off"}),
|
||||
false => rsx!(span { class: "material-symbols-outlined", "mic"}),
|
||||
true => rsx!(Icon { name: "mic_off", color: "#b23f43", opacity: 0.8938 }),
|
||||
false => rsx!(Icon { name: "mic", color: "#ffffff", opacity: 0.5 }),
|
||||
}
|
||||
}
|
||||
button {
|
||||
@@ -636,8 +673,8 @@ pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
|
||||
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"}),
|
||||
true => rsx!(Icon { name: "volume_off", color: "#b23f43", opacity: 0.8938 }),
|
||||
false => rsx!(Icon { name: "volume_up", color: "#ffffff", opacity: 0.5 }),
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -871,7 +908,6 @@ pub fn app() -> Element {
|
||||
|
||||
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 }
|
||||
|
||||
match *STATE.status.read() {
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
use crossbeam::atomic::AtomicCell;
|
||||
use df::tract::{mut_slice_as_arrayviewmut, slice_as_arrayview};
|
||||
use df::tract::{DfParams, DfTract, RuntimeParams};
|
||||
#[cfg(feature = "blitz")]
|
||||
use dioxus_native::prelude::{asset, manganis, Asset};
|
||||
#[cfg(not(feature = "blitz"))]
|
||||
use dioxus::prelude::{asset, manganis, Asset};
|
||||
use dioxus_asset_resolver::read_asset_bytes;
|
||||
use std::cell::RefCell;
|
||||
|
||||
@@ -5,6 +5,9 @@ use app::STATE;
|
||||
use asynchronous_codec::FramedRead;
|
||||
use asynchronous_codec::FramedWrite;
|
||||
use color_eyre::eyre::{bail, Error};
|
||||
#[cfg(feature = "blitz")]
|
||||
use dioxus_native::prelude::*;
|
||||
#[cfg(not(feature = "blitz"))]
|
||||
use dioxus::prelude::*;
|
||||
use futures::select;
|
||||
use futures::AsyncRead;
|
||||
|
||||
@@ -2,5 +2,8 @@ use mumble_web2_gui::{app, imp::Platform, imp::PlatformInterface as _};
|
||||
|
||||
pub fn main() {
|
||||
Platform::init_logging();
|
||||
#[cfg(feature = "blitz")]
|
||||
dioxus_native::launch(app::app);
|
||||
#[cfg(not(feature = "blitz"))]
|
||||
dioxus::launch(app::app);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user