为使用Rust针对wasm封装的Spotify Web播放SDK

所有方法现在都是函数

因为每个页面只能有一个播放器，所以不需要显式类，Rust通过JS调用类的所有方法 首先使用 init 函数 此函数将脚本添加到文档中，并创建一个 Spotify.Player 类的实例，如果您不调用此函数，则其他所有函数都将无效

文档

仓库

Crates.io

leptos中的示例

use leptos::*;
#[component]
fn Player() -> impl IntoView {
    use leptos::logging::log;
    use rust_spotify_web_playback_sdk::prelude as sp;

    let (current_song_name, set_current_song_name) = create_signal(String::new());

    let token = "BQAdHQqBLczVFdCIM58tVbF0eaztF-83cXczNdz2Aua-U7JyOdIlpiG5M7oEww-dK7jo3qjcpMJ4isuyU2RYy3EoD_SWEOX1uW39bpR-KDbjSYeBPb0Jn4QtwXQw2yjQ33oRzVdyRufKF8o7kwXYW-ij6rtio6oDq0PNYIGIyMsDxKhgM5ijt4LXWz-iWQykftBMXdeSWZuU-Z51VyFOPuznUBQj";

    let connect = create_action(|_| async {
        match sp::connect().await {
            Ok(_) => log!("connected"),
            Err(e) => log!("error {:?}", e),
        };
    });

    create_effect(move |_| {
        sp::init(
            || {
                log!("oauth was called");
                token.to_string()
            },
            move || {
                log!("ready");
                connect.dispatch(());

                sp::add_listener!("player_state_changed", move |state: sp::StateChange| {
                    log!("state changed, {}", state.track_window.current_track.name);
                    set_current_song_name(state.track_window.current_track.name);
                });
            },
            "example player",
            1.0,
            false,
        );
    });

    let get_state = create_action(|_| async {
        let state = sp::get_current_state().await.unwrap();
        log!("{:#?}", state);
    });

    let activate_player = create_action(|_| async {
       sp::activate_element().await
    });

    
    view! {
        <h1>"Welcome to Leptos"</h1>
        <button on:click=move |_| activate_player.dispatch(())>
            "activate player"
        </button>
        {
            move || match activate_player.value().get() {
            Some(Ok(_)) => {
                view! {
                    <button  on:click=move |_| get_state.dispatch(())>
                        "log state in console"
                    </button>
                    <p>"Current song: " {current_song_name}</p>
                }.into_view()
            }
            Some(Err(e)) => {
                view! {
                    <p>"Error activating player: " {e}</p>
                }.into_view()
            }
            None => {
                view! {
                    <p>"Activating player..."</p>
                }.into_view()
            }
        }
    }
     
    }
}