Update app.py

app.py

@@ -4,7 +4,11 @@ import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 import random
 
+# ——————————————————————————————
+# 1. Hard-code your Redirect URI here:
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
+
+# 2. Keep only your client creds in Secrets:
 CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
 CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]
 SCOPE         = (
@@ -28,16 +32,21 @@ def get_auth_url():
     return sp_oauth.get_authorize_url()
 
 def check_login(code: str):
+    """Receives the `code` directly from the page-load JS."""
     global sp, user_playlists
+    # No code → hide everything until they come back from Spotify
     if not code:
         return gr.update(visible=False), gr.update(visible=False, choices=[])
+
+    # Exchange for token, fetch playlists
     token = sp_oauth.get_access_token(code, as_dict=False)
     sp = spotipy.Spotify(auth=token)
     pls = sp.current_user_playlists(limit=50)["items"]
     user_playlists = {p["name"]: p["id"] for p in pls}
+
     return (
         gr.update(visible=True, value="✅ Logged in! Choose a playlist below."),
-        gr.update(visible=True, choices=list(user_playlists.keys()))
+        gr.update(visible=True, choices=list(user_playlists.keys())),
     )
 
 def load_playlist_info(pl_name: str):
@@ -85,44 +94,40 @@ with gr.Blocks() as demo:
     gr.Markdown("## 🎵 RNG Spotify Playlist Shuffler")
     gr.Markdown("Login, pick a playlist, then shuffle & play—all in one flow.")
 
-    # Step 1: Login button using `link=` (Gradio ≥5.14.0)
+    # 1️⃣ Login button
     login_btn = gr.Button(
         "🔐 Step 1: Login to Spotify",
         link=get_auth_url()
     )
 
-    # Hidden container for the ?code=… Spotify will append on redirect
-    code_box  = gr.Textbox(visible=False, elem_id="auth_code")
-    status    = gr.Markdown(visible=False)
-    dropdown  = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
-    info_html = gr.HTML(visible=False)
+    # 2️⃣ Status message & playlist dropdown (hidden until login completes)
+    status   = gr.Markdown(visible=False)
+    dropdown = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
+
+    # 3️⃣ Show playlist info, then shuffle controls
+    info_html   = gr.HTML(visible=False)
     shuffle_btn = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
     result      = gr.HTML(visible=False)
 
-    # Run on every page-load: grab ?code=… via JS and call check_login
+    # 🔄 On every page-load: grab `?code=…` and hand it to check_login()
     demo.load(
         fn=check_login,
-        inputs=[code_box],
+        inputs=[],                   # no Components are bound client→server
         outputs=[status, dropdown],
-        js="""
-          const params = new URLSearchParams(window.location.search);
-          const code = params.get("code");
-          if (code) {
-            document
-              .getElementById("component-auth_code")
-              .querySelector("textarea").value = code;
-          }
-        """
+        js="""() => {
+            const code = new URLSearchParams(window.location.search).get('code');
+            return code;
+        }"""
     )
 
-    # When user picks a playlist, show its artwork/info and reveal the shuffle button
+    # When they pick a playlist, show its artwork/info and reveal “Shuffle”
     dropdown.change(
         fn=load_playlist_info,
         inputs=[dropdown],
         outputs=[info_html, shuffle_btn]
     )
 
-    # Shuffle & start playback, then show track info
+    # Shuffle & play, then display currently playing track
     shuffle_btn.click(
         fn=shuffle_and_play,
         inputs=[dropdown],
@@ -131,4 +136,3 @@ with gr.Blocks() as demo:
 
 if __name__ == "__main__":
     demo.launch()
-