Update app.py

app.py

@@ -1,19 +1,22 @@
-import os, json, random
+import os
+import 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"
-)
+# ——————————————————————————————
+# 1) Spotify App Credentials (in HF secrets)
 CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
 CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]
 
+# 2) Redirect URI must exactly match your Spotify Dashboard
+REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
+
+# 3) Scopes for controlling playback & reading playlists
+SCOPE = "user-read-playback-state user-modify-playback-state playlist-read-private"
+
+# ——————————————————————————————
+# Spotify OAuth helper
 sp_oauth = SpotifyOAuth(
     client_id=CLIENT_ID,
     client_secret=CLIENT_SECRET,
@@ -31,112 +34,86 @@ def get_auth_url():
 def check_login(code: str):
     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 the Web Playback SDK + escape any iframe
-    sdk_js = f"""
-    <script>
-      if (window.self !== window.top) {{
-        window.top.location.href = window.location.href;
-      }}
-      window.ACCESS_TOKEN = "{access_token}";
-    </script>
-    <script src="https://sdk.scdn.co/spotify-player.js"></script>
-    <script>
-      window.onSpotifyWebPlaybackSDKReady = () => {{
-        console.log("[SDK] Ready");
-        const player = new Spotify.Player({{
-          name: 'RNG Web Player',
-          getOAuthToken: cb => cb(window.ACCESS_TOKEN),
-          volume: 0.5
-        }});
-        player.addListener('ready', ({ device_id }) => {{
-          console.log('[SDK] device_id:', device_id);
-          window._webDeviceId = device_id;
-        }});
-        player.connect();
-      }};
-    </script>
-    """
+        # Still waiting for Spotify to redirect back with ?code=
+        return (
+            gr.update(visible=False),  # status
+            gr.update(visible=False),  # playlist dropdown
+            gr.update(visible=False),  # shuffle button
+        )
+
+    # Exchange code for an access token
+    token = sp_oauth.get_access_token(code)
+    sp = spotipy.Spotify(auth=token)
+
+    # Fetch first 50 playlists
+    items = sp.current_user_playlists(limit=50)["items"]
+    user_playlists = {p["name"]: p["id"] for p in items}
 
     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)
+        gr.update(visible=True, value="✅ Logged in! Pick a playlist below."),
+        gr.update(visible=True, choices=list(user_playlists.keys())),
+        gr.update(visible=True),
     )
 
-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","")
-    html = (
-      f"<img src='{img}' width='300'/><br/>"
-      f"<strong>{name}</strong> by {owner}<br/>{desc}"
-    )
-    return html, gr.update(visible=True)
-
-def shuffle_and_play(name):
-    pid     = user_playlists[name]
-    tracks, res = [], sp.playlist_tracks(pid)
-    tracks.extend(res["items"])
-    while res["next"]:
-        res = sp.next(res); tracks.extend(res["items"])
+def shuffle_and_play(playlist_name: str):
+    pid = user_playlists.get(playlist_name)
+    if not pid:
+        return "⚠️ No playlist selected. Please choose one.", 
+
+    # Gather all track 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"]]
+
+    # RNG shuffle
     random.shuffle(uris)
 
-    # Kick off in-browser playback
-    js = json.dumps(uris)
-    play_js = f"""
-    <script>
-      (async () => {{
-        const token     = window.ACCESS_TOKEN;
-        const device_id = window._webDeviceId;
-        console.log("[JS] PLAY", device_id, {len(uris)},"URIs");
-        const resp = 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':{js}}})
-          }}
-        );
-        console.log("[JS] status:", resp.status);
-      }})();
-    </script>
-    """
-    return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
+    # Send to first active device
+    devices = sp.devices().get("devices", [])
+    if not devices:
+        return "⚠️ No active Spotify device found. Open your Spotify app and try again."
 
+    sp.start_playback(device_id=devices[0]["id"], uris=uris)
+    return f"▶️ Playing shuffled **{playlist_name}** on your active device!"
+
+# ——————————————————————————————
 with gr.Blocks() as demo:
-    gr.HTML(
-      '<a href="https://jisaacso219-rng-shuffle.hf.space/" '
-      'target="_blank">🔗 Open standalone</a>'
+    gr.Markdown("## 🎵 RNG Spotify Playlist Shuffler")
+    gr.Markdown("1) Login → 2) Pick a playlist → 3) Shuffle & play")
+
+    # Step 1: Login button (same tab)
+    login_btn = gr.Button("🔐 Step 1: Login to Spotify")
+    login_btn.click(
+        None, None, None,
+        js=f"() => window.location.href = '{get_auth_url()}'"
     )
-    gr.Button("🔐 Step 1: Login", link=get_auth_url())
-    code_box   = gr.Textbox(visible=False, elem_id="auth_code")
-    status     = gr.Markdown(visible=False)
-    dropdown   = gr.Dropdown([], 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)
 
+    # Hidden textbox to capture OAuth code
+    code_box       = gr.Textbox(visible=False, elem_id="auth_code")
+    login_status   = gr.Markdown(visible=False)
+    playlist_dd    = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
+    shuffle_button = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
+    result         = gr.Markdown(visible=False)
+
+    # On every load (or redirect back with ?code=), call check_login
     demo.load(
         fn=check_login,
         inputs=[code_box],
-        outputs=[status, dropdown, sdk_html],
-        js="() => new URLSearchParams(window.location.search).get('code')||''"
+        outputs=[login_status, playlist_dd, shuffle_button],
+        js="() => new URLSearchParams(window.location.search).get('code') || ''"
+    )
+
+    # Finally: when they click Shuffle & Play
+    shuffle_button.click(
+        shuffle_and_play,
+        inputs=[playlist_dd],
+        outputs=[result]
     )
-    dropdown.change(load_playlist_info, [dropdown], [info_html, shuffle_btn])
-    shuffle_btn.click(shuffle_and_play, [dropdown], [result])
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False)
+    # No SSR, default port
+    demo.launch(server_name="0.0.0.0", ssr_mode=False)
+