Instant re-sort sounds

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "realraum_ui"
-version = "0.1.0"
+version = "0.1.1"
 edition = "2021"
 authors = ["Tanja <[email protected]>"]
 description = "A frontend for Realraum"
@@ -20,8 +20,8 @@ chrono = { version = "0.4.26", features = ["serde"] }
 console_error_panic_hook = "0.1.7"
 console_log = "1.0.0"
 gloo-storage = "0.3.0"
-leptos = "0.4.10"
-leptos_router = { version = "0.4.10", features = ["csr"] }
+leptos = "0.6.5"
+leptos_router = { version = "0.6.5", features = ["csr"] }
 log = "0.4.19"
 serde = { version = "1.0.166", features = ["derive", "rc"] }
 uuid = { version = "1.3.4", features = ["serde", "v4", "js"] }
@@ -30,6 +30,6 @@ lazy_static = "1.4.0"
 wasm-bindgen = "0.2.87"
 web-sys = "0.3.64"
 wasm-bindgen-futures = "0.4.37"
-gloo-net = { version = "0.4.0", features = ["http"] }
+gloo-net = { version = "0.5.0", features = ["http"] }
 gloo-console = "0.3.0"
 serde_json = "1.0.105"

Trunk.toml

@@ -5,3 +5,7 @@ command_arguments = [
     "-c",
     "tailwindcss -i src/styles/main.css -o target/styles/tailwind_output.css",
 ]
+
+[[proxy]]
+rewrite = "/api/"
+backend = "http://0.0.0.0:4242/api"

rust-toolchain.toml

@@ -1,4 +1,4 @@
 # This project uses the nightly channel of Rust, as recommended by the Leptos documentation.
 
 [toolchain]
-channel = "nightly"
+channel = "stable"

src/app/mod.rs

@@ -3,26 +3,17 @@ mod sound_button;
 mod sounds;
 mod url_button;
 
-use leptos::{ev::close, *};
+use leptos::*;
 use leptos_router::*;
 
-use crate::app::sound_button::SoundButton;
 use crate::app::{projector::Projector, sounds::Sounds};
-use crate::core::{
-    get_sounds, get_sounds_strings, kill_mplayer, parse_sounds, Sound, HL_SOUNDS_STRING,
-};
-
-async fn load_data() -> i32 {
-    42
-}
+use crate::core::kill_mplayer;
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
-    let version_info = env!("CARGO_PKG_VERSION");
-
-    let kill_action = create_action(cx, |_: &()| async move { kill_mplayer().await.unwrap() });
+pub fn App() -> impl IntoView {
+    let kill_action = create_action(|_: &()| async move { kill_mplayer().await.unwrap() });
 
-    view! { cx,
+    view! {
         <div class="h-fit min-h-screen bg-slate-600 text-white ">
             <div id="topbar" class="sticky top-0 left-0 bg-slate-500 p-1 flex flex-row justify-end gap-2">
                 <span class="mr-auto">
@@ -55,8 +46,8 @@ pub fn App(cx: Scope) -> impl IntoView {
                         <Route path="/projector" view=Projector/>
                         <Route
                             path="/*any"
-                            view=|cx| {
-                                view! { cx,
+                            view= || {
+                                view! {
                                     <p class="text-lg p-3">
                                         "Visit "
                                         <a class="text-blue-500" href="/sounds">"/sounds"</a>
@@ -70,7 +61,7 @@ pub fn App(cx: Scope) -> impl IntoView {
                         // <Route
                         //     path="/"
                         //     view=|cx| {
-                        //         view! { cx, <a href="welcome">{"Go to the welcome page"}</a> }
+                        //         view! {   <a href="welcome">{"Go to the welcome page"}</a> }
                         //     }
                         // />
                     </Routes>

src/app/projector.rs

@@ -6,8 +6,8 @@ use crate::{
 };
 
 #[component]
-pub fn Projector(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn Projector() -> impl IntoView {
+    view! {
         <div class="
             grid gap-2
             grid-cols-2

src/app/sound_button.rs

@@ -3,10 +3,11 @@ use leptos::*;
 use crate::core::{play_sound, Sound};
 
 #[component]
-pub fn SoundButton(cx: Scope, sound: Sound) -> impl IntoView {
-    let play_action = create_action(cx, |snd: &Sound| {
+pub fn SoundButton(sound: Sound, #[prop(into)] on_click: Callback<()>) -> impl IntoView {
+    let play_action = create_action(move |snd: &Sound| {
         let url = snd.url.clone();
         log::info!("play_action: {}", url);
+        on_click.call(());
         async move { play_sound(url).await.unwrap() }
     });
 
@@ -19,7 +20,7 @@ pub fn SoundButton(cx: Scope, sound: Sound) -> impl IntoView {
         play_count,
     } = sound.clone();
 
-    view! { cx,
+    view! {
         <button
             class="bg-slate-500 hover:bg-slate-400 text-white py-2 px-4 rounded overflow-x-auto"
             on:click=move |_| {

src/app/sounds.rs

@@ -1,24 +1,24 @@
+use std::time::Duration;
+
 use leptos::*;
-use leptos_router::*;
 
 use crate::{
     app::sound_button::SoundButton,
     core::{get_sounds, Sound, HL_SOUNDS_STRING},
 };
 
 #[component]
-pub fn Sounds(cx: Scope) -> impl IntoView {
+pub fn Sounds() -> impl IntoView {
     let test_sound = Sound {
         name: "Loading...".to_string(),
         url: "/test_sound.ogg".to_string(),
         play_count: -420,
     };
-    let (count, set_count) = create_signal(cx, 0);
-    let (show_hl_sounds, set_show_hl_sounds) = create_signal(cx, false);
+    let (count, _set_count) = create_signal(0);
+    let (show_hl_sounds, _set_show_hl_sounds) = create_signal(false);
 
     // create_resource takes two arguments after its scope
     let async_data = create_resource(
-        cx,
         // the first is the "source signal"
         move || count.get(),
         // the second is the loader
@@ -36,7 +36,7 @@ pub fn Sounds(cx: Scope) -> impl IntoView {
     // and update to Some(T) when it has resolved
     let async_result = move || {
         let mut sounds = async_data
-            .read(cx)
+            .read()
             // This loading state will only show before the first load
             .unwrap_or_else(|| vec![test_sound.clone()]);
 
@@ -50,21 +50,23 @@ pub fn Sounds(cx: Scope) -> impl IntoView {
     // the resource's loading() method gives us a
     // signal to indicate whether it's currently loading
     let loading = async_data.loading();
-    let is_loading = move || if loading.get() { "Loading..." } else { "Idle." };
+    let _is_loading = move || if loading.get() { "Loading..." } else { "Idle." };
 
-    view! { cx,
+    view! {
         <div class="
             grid gap-2
             grid-cols-2 sm:grid-cols-3 md:grid-cols-4
             m-2 max-w-[1400px] min-[1416px]:mx-auto
         ">
         <For
             each=async_result
-            key=|sound| sound.name.clone()
-            view=move |cx, sound: Sound| {
-                view! { cx,
-                    //   <button>"Value: " {move || counter.count.get()}</button>
-                    <SoundButton sound/>
+            key=|sound| (sound.name.clone(), sound.play_count)
+            children=move |sound: Sound| {
+                view! {
+                    <SoundButton
+                        sound
+                        on_click=move |_| set_timeout(move || async_data.refetch(), Duration::from_millis(10))
+                    />
                 }
             }
         />

src/app/url_button.rs

@@ -3,8 +3,8 @@ use leptos::*;
 use web_sys::{RequestCache, RequestMode};
 
 #[component]
-pub fn UrlButton(cx: Scope, url: &'static str, children: Children) -> impl IntoView {
-    let play_action = create_action(cx, move |_| async move {
+pub fn UrlButton(url: &'static str, children: Children) -> impl IntoView {
+    let play_action = create_action(move |_| async move {
         let req = RequestBuilder::new(&url)
             .method(Method::GET)
             .mode(RequestMode::NoCors)
@@ -15,14 +15,14 @@ pub fn UrlButton(cx: Scope, url: &'static str, children: Children) -> impl IntoV
         req.send().await.unwrap();
     });
 
-    view! { cx,
+    view! {
         <button
             class="bg-slate-500 hover:bg-slate-400 text-white font-bold py-2 px-4 rounded overflow-x-auto"
             on:click=move |_| {
                 play_action.dispatch(());
             }
             >
-            {children(cx)}
+            {children()}
             // ", " {url}
         </button>
         // <div class="bg-slate-500 hover:bg-slate-400 text-white font-bold py-2 px-4 rounded">

src/core.rs

@@ -1,13 +1,15 @@
-use std::future::Future;
-
-use gloo_net::http::{Method, Request, RequestBuilder, Response};
+use gloo_net::http::{Method, RequestBuilder};
 use lazy_static::lazy_static;
+use leptos::window;
 // use regex::Regex;
 use serde::{Deserialize, Serialize};
 use web_sys::{RequestCache, RequestMode};
 
 lazy_static! {
     // // static ref SOUND_RX: Regex = Regex::new(r#"href='([^']*)'.*?>([^<]*)"#).unwrap();
+    static ref BASE_URL: String = window().origin();
+    static ref SOUNDS_API_PATH: String = format!("{}/api/v1/sounds", BASE_URL.as_str());
+    static ref KILLALL_URL: String = format!("{}/api/v1/killall_mplayer", BASE_URL.as_str());
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -23,7 +25,7 @@ pub async fn _get_sounds_strings() -> String {
 }
 
 pub async fn get_sounds_strings() -> Result<String, gloo_net::Error> {
-    let req = RequestBuilder::new("http://licht.realraum.at:4242/api/v1/sounds")
+    let req = RequestBuilder::new(&SOUNDS_API_PATH)
         .method(Method::GET)
         .mode(RequestMode::Cors)
         .build()?;
@@ -75,7 +77,7 @@ pub async fn get_sounds() -> Result<Vec<Sound>, gloo_net::Error> {
 }
 
 pub async fn play_sound(url: String) -> Result<(), gloo_net::Error> {
-    let url = format!("http://licht.realraum.at:4242/api/v1/play/{}", url);
+    let url = format!("{}/api/v1/play/{}", BASE_URL.as_str(), url);
     let req = RequestBuilder::new(&url)
         .method(Method::GET)
         .mode(RequestMode::Cors)
@@ -88,8 +90,7 @@ pub async fn play_sound(url: String) -> Result<(), gloo_net::Error> {
 }
 
 pub async fn kill_mplayer() -> Result<(), gloo_net::Error> {
-    let url = format!("http://licht.realraum.at:4242/api/v1/killall_mplayer");
-    let req = RequestBuilder::new(&url)
+    let req = RequestBuilder::new(&(&KILLALL_URL))
         .method(Method::GET)
         .cache(RequestCache::NoCache)
         .build()?;

src/main.rs

@@ -14,5 +14,5 @@ fn main() {
 
     license_notice::log_license_notice();
 
-    mount_to_body(|cx| view! { cx, <App/> })
+    mount_to_body(|| view! { <App/> })
 }