Update app.py

app.py

@@ -4,11 +4,7 @@ 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         = (
@@ -32,25 +28,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:
+        # hide everything until we actually get a 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())),
     )
 
 def load_playlist_info(pl_name: str):
-    pid = user_playlists[pl_name]
+    pid  = user_playlists[pl_name]
     data = sp.playlist(pid)
     img   = data["images"][0]["url"] if data["images"] else ""
     owner = data["owner"]["display_name"]
@@ -69,12 +61,10 @@ def shuffle_and_play(pl_name: str):
     while results["next"]:
         results = sp.next(results)
         tracks.extend(results["items"])
-
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
     devices = sp.devices()["devices"]
     if not devices:
         return gr.update(value="⚠️ No active device. Open Spotify and try again.", visible=True)
-
     sp.start_playback(device_id=devices[0]["id"], uris=uris)
     now = sp.current_playback()
     if now and now.get("item"):
@@ -94,45 +84,32 @@ with gr.Blocks() as demo:
     gr.Markdown("## 🎵 RNG Spotify Playlist Shuffler")
     gr.Markdown("Login, pick a playlist, then shuffle & play—all in one flow.")
 
-    # 1️⃣ Login button
-    login_btn = gr.Button(
-        "🔐 Step 1: Login to Spotify",
-        link=get_auth_url()
-    )
+    # Step 1: Login button
+    login_btn = gr.Button("🔐 Step 1: Login to Spotify", link=get_auth_url())
 
-    # 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)
+    # ←–– here’s the hidden Textbox that JS will write into:
+    code_box   = gr.Textbox(visible=False, elem_id="auth_code")
 
-    # 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)
+    status     = gr.Markdown(visible=False)
+    dropdown   = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
+    info_html  = gr.HTML(visible=False)
+    shuffle_btn= gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
+    result     = gr.HTML(visible=False)
 
-    # 🔄 On every page-load: grab `?code=…` and hand it to check_login()
+    # On page-load, grab the ?code=… and feed it into `code_box`, then call check_login
     demo.load(
         fn=check_login,
-        inputs=[],                   # no Components are bound client→server
+        inputs=[code_box],              # single input to match check_login(code)
         outputs=[status, dropdown],
-        js="""() => {
-            const code = new URLSearchParams(window.location.search).get('code');
-            return code;
-        }"""
-    )
-
-    # 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]
+        js="""
+          const code = new URLSearchParams(window.location.search).get('code');
+          return code;
+        """
     )
 
-    # Shuffle & play, then display currently playing track
-    shuffle_btn.click(
-        fn=shuffle_and_play,
-        inputs=[dropdown],
-        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()
+