kopuz-components 0.12.0

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
70
71

use crate::lyrics_view::LyricsView;
use crate::queue_list_view::QueueListView;
use config::AppConfig;
use dioxus::prelude::*;

#[component]
pub(crate) fn Tabs(
    mut config: Signal<AppConfig>,
    items: Vec<reader::Track>,
    current_queue_index: Signal<usize>,
    lyrics: Signal<Option<Option<utils::lyrics::Lyrics>>>,
    current_song_progress: Signal<u64>,
) -> Element {
    let mut active_tab = use_signal(|| 0usize);

    rsx! {
        div {
            class: "flex-1 flex flex-col h-full min-w-0 bg-black/45 border-l border-white/5",

            div {
                class: "flex items-center px-6 pt-4 pb-2",
                div {
                    class: "flex items-center gap-1 p-1 rounded-lg bg-white/10",
                    button {
                        class: if *active_tab.read() == 0 {
                            "px-4 py-1.5 text-xs font-medium rounded-md bg-white/20 text-white transition-colors"
                        } else {
                            "px-4 py-1.5 text-xs font-medium rounded-md text-white/50 hover:text-white/80 transition-colors"
                        },
                        onclick: move |_| active_tab.set(0),
                        "{i18n::t(\"up_next\")}"
                    }

                    button {
                        class: if *active_tab.read() == 1 {
                            "px-4 py-1.5 text-xs font-medium rounded-md bg-white/20 text-white transition-colors"
                        } else {
                            "px-4 py-1.5 text-xs font-medium rounded-md text-white/50 hover:text-white/80 transition-colors"
                        },
                        onclick: move |_| active_tab.set(1),
                        "{i18n::t(\"lyrics\")}"
                    }
                }

                button {
                    class: "ml-auto w-8 h-8 flex items-center justify-center text-white/40 hover:text-white transition-colors",
                    "aria-label": i18n::t("hide_side_panel").to_string(),
                    title: i18n::t("hide_side_panel").to_string(),
                    onclick: move |_| config.write().fullscreen_tabs_collapsed = true,
                    i { class: "fa-solid fa-chevron-right text-sm" }
                }
            }

            if *active_tab.read() == 0 {
                QueueListView {
                    items,
                    config,
                    current_queue_index,
                    layout: crate::queue_list_view::LayoutMode::Fullscreen,
                }
            } else if *active_tab.read() == 1 {
                LyricsView {
                    lyrics,
                    current_song_progress,
                    config,
                    layout: crate::lyrics_view::LayoutMode::Fullscreen,
                }
            }
        }
    }
}