kopuz-pages 0.8.2

A modern, lightweight music player built with Rust and Dioxus.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

use config::{AppConfig, UiStyle};
use dioxus::prelude::*;

use crate::home_body::HomeBody;

#[component]
pub fn Home(
    on_select_album: EventHandler<String>,
    on_play_album: EventHandler<String>,
    on_select_playlist: EventHandler<String>,
    on_search_artist: EventHandler<String>,
) -> Element {
    let mut config = use_context::<Signal<AppConfig>>();
    let is_vaxry = config.read().ui_style == UiStyle::Vaxry;
    let mut edit_mode = use_signal(|| false);

    rsx! {
        div {
            class: if cfg!(target_os = "android") {
                "px-4 pt-2 pb-28 space-y-8 w-full"
            } else if is_vaxry {
                "px-6 pt-4 pb-24 w-full"
            } else {
                "p-8 space-y-12 pb-32 animate-fade-in w-full"
            },

            div { class: "flex items-center justify-between mb-4",
                if !is_vaxry {
                    h1 { class: "text-4xl font-black text-white tracking-tight", "{i18n::t(\"home\")}" }
                } else {
                    div {}
                }
                div { class: "flex items-center gap-2",
                    if *edit_mode.read() {
                        button {
                            class: "px-3 h-8 rounded-full bg-white/5 hover:bg-white/10 border border-white/10 text-white/70 hover:text-white text-xs font-semibold transition-colors",
                            onclick: move |_| {
                                config.write().home_sections = config::default_home_sections();
                            },
                            i { class: "fa-solid fa-rotate-left mr-1 text-[10px]" }
                            "{i18n::t(\"reset_home\")}"
                        }
                        button {
                            class: "px-4 h-8 rounded-full bg-indigo-500 hover:bg-indigo-400 text-white text-xs font-bold transition-colors",
                            onclick: move |_| edit_mode.set(false),
                            i { class: "fa-solid fa-check mr-1 text-[10px]" }
                            "{i18n::t(\"done_editing\")}"
                        }
                    } else {
                        button {
                            class: "px-3 h-8 rounded-full bg-white/5 hover:bg-white/10 border border-white/10 text-white/70 hover:text-white text-xs font-semibold transition-colors flex items-center gap-2",
                            onclick: move |_| edit_mode.set(true),
                            i { class: "fa-solid fa-sliders text-[10px]" }
                            "{i18n::t(\"customize_home\")}"
                        }
                    }
                }
            }

            HomeBody {
                edit_mode,
                on_select_album,
                on_play_album,
                on_select_playlist,
                on_search_artist,
            }
        }
    }
}