app.py

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

# ————————————————
# 1) Redirect URI (must match your Spotify Dashboard)
REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"

# 2) Scopes now include `streaming`
SCOPE = (
    "streaming "
    "user-read-playback-state "
    "user-modify-playback-state "
    "playlist-read-private"
)

CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]

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 (demo.load). Exchanges the `code` for an access token,
    then writes that token into window.ACCESS_TOKEN for the SDK.
    """
    global sp, user_playlists
    if not code:
        # Wait for the redirect with ?code=
        return gr.update(visible=False), gr.update(visible=False, choices=[])
    # Exchange for token (as_dict so we can grab the raw access_token)
    tokinfo = sp_oauth.get_access_token(code, as_dict=True)
    access_token = tokinfo["access_token"]
    sp = spotipy.Spotify(auth=access_token)

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

    # Embed a script to set window.ACCESS_TOKEN for the Web Playback SDK
    js_token = f"<script>window.ACCESS_TOKEN = '{access_token}';</script>"

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

def load_playlist_info(pl_name: str):
    pid  = user_playlists[pl_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="300px" style="border-radius:10px;"/><br/>
      <strong>{pl_name}</strong> by {owner}<br/>{desc}
    """
    return html, gr.update(visible=True)

def shuffle_and_play(pl_name: str):
    pid = user_playlists[pl_name]
    # Gather + shuffle URIs
    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)

    # Generate a JS snippet that kicks off playback via the Web Playback SDK
    uris_json = json.dumps(uris)
    player_js = f"""
    <script>
      (async () => {{
        const token     = window.ACCESS_TOKEN;
        const device_id = window._webDeviceId;
        console.log("▶️ Playing on", device_id);
        await fetch(
          'https://api.spotify.com/v1/me/player/play?device_id=' + device_id,
          {{
            method: 'PUT',
            headers: {{
              'Authorization': 'Bearer ' + token,
              'Content-Type': 'application/json'
            }},
            body: JSON.stringify({{ uris: {uris_json} }})
          }}
        );
      }})();
    </script>
    """
    return gr.update(value="▶️ Now playing in‐browser!" + player_js, visible=True)

with gr.Blocks() as demo:
    # Instruction to open in standalone tab
    gr.Markdown("""
    ⚠️ **Please open this Space in its own tab** (click the 🔗 icon top-right)
    so the OAuth flow and embedded player can work correctly.
    """)

    # Inject the Web Playback SDK
    gr.HTML("""
    <script src="https://sdk.scdn.co/spotify-player.js"></script>
    <script>
      window.onSpotifyWebPlaybackSDKReady = () => {
        window._player = new Spotify.Player({
          name: 'RNG Web Player',
          getOAuthToken: cb => { cb(window.ACCESS_TOKEN); },
          volume: 0.5
        });
        _player.addListener('ready', ({ device_id }) => {
          console.log('🟢 Web Playback ready, device_id:', device_id);
          window._webDeviceId = device_id;
        });
        _player.connect();
      };
    </script>
    """)

    # 1️⃣ Login
    login_btn = gr.Button(
        "🔐 Step 1: Login to Spotify",
        link=get_auth_url()
    )

    # Hidden box for the OAuth `code`
    code_box = gr.Textbox(visible=False, elem_id="auth_code")

    # 2️⃣ Playlist selection
    status   = gr.Markdown(visible=False)
    dropdown = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)

    # 3️⃣ Playlist info & shuffle
    info_html   = gr.HTML(visible=False)
    shuffle_btn = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
    result      = gr.HTML(visible=False)

    # On page-load: grab `?code=` and run check_login
    demo.load(
        fn=check_login,
        inputs=[code_box],
        outputs=[status, dropdown],
        js="""
          () => {
            const c = new URLSearchParams(window.location.search).get('code') || "";
            return c;
          }
        """
    )

    # Show playlist info once selected
    dropdown.change(load_playlist_info, [dropdown], [info_html, shuffle_btn])

    # Shuffle & play in-browser
    shuffle_btn.click(shuffle_and_play, [dropdown], [result])

if __name__ == "__main__":
    demo.launch()