app.py

import os
import json
import random
import gradio as gr
import spotipy
from spotipy.oauth2 import SpotifyOAuth

# ——————————————————————————————————————————————
# 1) Spotify credentials (stored in HF Secrets)
CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]

# 2) Your Space’s URL must match this Redirect URI exactly
REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"

# 3) Include `streaming` for Web Playback SDK + playback scopes
SCOPE = (
    "streaming "
    "user-read-playback-state "
    "user-modify-playback-state "
    "playlist-read-private"
)

sp_oauth = SpotifyOAuth(
    client_id=CLIENT_ID,
    client_secret=CLIENT_SECRET,
    redirect_uri=REDIRECT_URI,
    scope=SCOPE,
    show_dialog=True,
)

sp = None
user_playlists = {}

def get_auth_url():
    return sp_oauth.get_authorize_url()

def check_login(code: str):
    """
    Called on page‐load via demo.load(). Once we have a `code`:
     - exchange it for an access token
     - fetch playlists
     - inject the Web Playback SDK + token + debug hooks
    """
    global sp, user_playlists
    if not code:
        return (
            gr.update(visible=False),  # status
            gr.update(visible=False),  # dropdown
            gr.update(visible=False),  # sdk_html
        )

    # 1) Exchange code for token
    tokinfo      = sp_oauth.get_access_token(code, as_dict=True)
    access_token = tokinfo["access_token"]
    sp = spotipy.Spotify(auth=access_token)

    # 2) Fetch your playlists
    items = sp.current_user_playlists(limit=50)["items"]
    user_playlists = {p["name"]: p["id"] for p in items}

    # 3) Build SDK + injection scripts
    sdk_js = f"""
    <script>
      // If still sandboxed in an iframe, break out:
      if (window.self !== window.top) {{
        window.top.location.href = window.location.href;
      }}
      console.log("[SDK] Setting ACCESS_TOKEN");
      window.ACCESS_TOKEN = "{access_token}";
    </script>
    <script src="https://sdk.scdn.co/spotify-player.js"></script>
    <script>
      window.onSpotifyWebPlaybackSDKReady = () => {{
        console.log("[SDK] SDK Ready");
        const player = new Spotify.Player({{
          name: 'RNG Web Player',
          getOAuthToken: cb => cb(window.ACCESS_TOKEN),
          volume: 0.5
        }});
        ['initialization_error','authentication_error','account_error','playback_error']
          .forEach(evt => player.addListener(evt, e => console.error(`[SDK ${evt}]`, e)));
        player.addListener('ready', ({ device_id }) => {{
          console.log('[SDK] Player ready, device_id:', device_id);
          window._webDeviceId = device_id;
        }});
        player.connect().then(success => console.log('[SDK] connect()', success));
      }};
    </script>
    """

    return (
        gr.update(visible=True, value="✅ Logged in! Select a playlist below."),
        gr.update(visible=True, choices=list(user_playlists.keys())),
        gr.update(visible=True, value=sdk_js),
    )

def load_playlist_info(playlist_name: str):
    """
    When a playlist is selected, show its artwork, name, and description.
    """
    pid  = user_playlists[playlist_name]
    data = sp.playlist(pid)
    img   = data["images"][0]["url"] if data["images"] else ""
    owner = data["owner"]["display_name"]
    desc  = data.get("description", "")
    html  = f"""
      <img src="{img}" width="300" style="border-radius:8px;"/><br/>
      <strong>{playlist_name}</strong> by {owner}<br/>{desc}
    """
    return html, gr.update(visible=True)

def shuffle_and_play(playlist_name: str):
    """
    Gather all track URIs, RNG-shuffle them, then fire off the Web Playback SDK
    to play them in-browser on window._webDeviceId.
    """
    pid = user_playlists.get(playlist_name)
    if not pid:
        return gr.update(value="⚠️ No playlist selected.", visible=True)

    # fetch + shuffle
    tracks, results = [], sp.playlist_tracks(pid)
    tracks.extend(results["items"])
    while results["next"]:
        results = sp.next(results)
        tracks.extend(results["items"])
    uris = [t["track"]["uri"] for t in tracks if t["track"]]
    random.shuffle(uris)

    # in-page JS to start playback
    uris_json = json.dumps(uris)
    play_js = f"""
    <div id="player_debug" style="color:white;font-family:monospace;"></div>
    <script>
      console.log("[JS] Starting playback with", window._webDeviceId);
      console.log("[JS] URIs count:", {len(uris)});
      (async () => {{
        try {{
          const resp = await fetch(
            'https://api.spotify.com/v1/me/player/play?device_id=' + window._webDeviceId,
            {{
              method: 'PUT',
              headers: {{
                'Authorization': 'Bearer ' + window.ACCESS_TOKEN,
                'Content-Type': 'application/json'
              }},
              body: JSON.stringify({{ uris: {uris_json} }})
            }}
          );
          const text = await resp.text();
          console.log("[JS] fetch status:", resp.status, text);
          document.getElementById("player_debug").innerText =
            `[JS] status: ${{resp.status}} – ${{text}}`;
        }} catch(e) {{
          console.error("[JS] Playback error:", e);
          document.getElementById("player_debug").innerText =
            "[JS] Playback error: " + e;
        }}
      }})();
    </script>
    """
    return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)

# ——————————————————————————————————————————————
with gr.Blocks() as demo:
    # 0) Auto-bust from any huggingface.co iframe
    gr.HTML("""
    <script>
      if (window.self !== window.top) {
        window.top.location.href = window.location.href;
      }
    </script>
    """)
    # 0b) Fallback standalone link
    gr.HTML('<a href="https://jisaacso219-rng-shuffle.hf.space/" '
            'target="_blank">🔗 Open in standalone tab</a>')

    gr.Markdown("**1)** Login &nbsp;&nbsp; **2)** Select a playlist &nbsp;&nbsp; **3)** Shuffle & Play in-browser")

    # Step 1: Login to Spotify in SAME tab
    login_btn = gr.Button("🔐 Step 1: Login to Spotify")
    login_btn.click(
        fn=None, inputs=None, outputs=None,
        js=f"() => window.location.href = '{get_auth_url()}'"
    )

    # These will be revealed after login
    code_box   = gr.Textbox(visible=False, elem_id="auth_code")
    status     = gr.Markdown(visible=False)
    playlist_dd= gr.Dropdown(choices=[], label="Select Playlist", visible=False)
    sdk_html   = gr.HTML(visible=False)

    info_html  = gr.HTML(visible=False)
    shuffle_btn= gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
    result     = gr.HTML(visible=False)

    # On page-load (or after redirect with ?code), run check_login
    demo.load(
        fn=check_login,
        inputs=[code_box],
        outputs=[status, playlist_dd, sdk_html],
        js="() => new URLSearchParams(window.location.search).get('code') || ''"
    )

    # Show playlist info, then reveal shuffle button
    playlist_dd.change(load_playlist_info, [playlist_dd], [info_html, shuffle_btn])

    # Shuffle & play via Web Playback SDK
    shuffle_btn.click(shuffle_and_play, [playlist_dd], [result])

if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", ssr_mode=False)