app.py

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

REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
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):
    global sp, user_playlists
    if not code:
        return gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
    tokinfo      = sp_oauth.get_access_token(code, as_dict=True)
    access_token = tokinfo["access_token"]
    sp = spotipy.Spotify(auth=access_token)
    items = sp.current_user_playlists(limit=50)["items"]
    user_playlists = {p["name"]: p["id"] for p in items}
    # inject token + SDK
    sdk_js = f"""
    <script>window.ACCESS_TOKEN="{access_token}";</script>
    <script src="https://sdk.scdn.co/spotify-player.js"></script>
    <script>
      window.onSpotifyWebPlaybackSDKReady = () => {{
        const player = new Spotify.Player({{
          name: 'RNG Web Player',
          getOAuthToken: cb => cb(window.ACCESS_TOKEN),
          volume: 0.5
        }});
        player.addListener('ready', ({{ device_id }}) => {{ window._webDeviceId = device_id; }});
        player.connect();
      }};
    </script>
    """
    return (
        gr.update(visible=True, value="✅ Logged in! Pick a playlist."),
        gr.update(visible=True, choices=list(user_playlists.keys())),
        gr.update(visible=True, value=sdk_js),
    )

def load_playlist_info(name):
    pid = user_playlists[name]
    data = sp.playlist(pid)
    img = data["images"][0]["url"] if data["images"] else ""
    owner = data["owner"]["display_name"]
    desc = data.get("description","")
    return (
      f"<img src='{img}' width='300'/><br/><strong>{name}</strong> by {owner}<br/>{desc}",
      gr.update(visible=True),
    )

def shuffle_and_play(name):
    pid = user_playlists[name]
    tracks, res = [], sp.playlist_tracks(pid)
    tracks += res["items"]
    while res["next"]:
        res = sp.next(res)
        tracks += res["items"]
    uris = [t["track"]["uri"] for t in tracks if t["track"]]
    random.shuffle(uris)
    uris_json = json.dumps(uris)
    return gr.update(
      value=(
        "▶️ Now playing in-browser!"
        f"<script>(async()=>{{"
        f"await fetch('https://api.spotify.com/v1/me/player/play?device_id='+window._webDeviceId,{{"
        f"method:'PUT',headers:{{'Authorization':'Bearer '+window.ACCESS_TOKEN}},"
        f"body:JSON.stringify({{'uris':{uris_json}}})}});"
        f"}})();</script>"
      ),
      visible=True
    )

with gr.Blocks() as demo:
    gr.Markdown("[🔗 Open standalone](https://jisaacso219-rng-shuffle.hf.space/)")
    gr.Markdown("1) Click **Login**  2) Pick a playlist  3) Shuffle & play in-browser")
    login = gr.Button("🔐 Step 1: Login", link=get_auth_url())
    code_box = gr.Textbox(visible=False, elem_id="auth_code")
    status, playlist_dd, sdk_html = [
        gr.Markdown(visible=False),
        gr.Dropdown([], label="Select Playlist", visible=False),
        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)

    demo.load(
      fn=check_login,
      inputs=[code_box],
      outputs=[status, playlist_dd, sdk_html],
      js="() => new URLSearchParams(window.location.search).get('code') || ''"
    )

    playlist_dd.change(load_playlist_info, [playlist_dd], [info_html, shuffle_btn])
    shuffle_btn.click(shuffle_and_play, [playlist_dd], [result])

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