Update app.py

app.py

@@ -4,10 +4,11 @@ import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 import random
 
-# 1. Hard‐code your redirect URI here:
+# ——————————————————————————————
+# 1. Hard-code your Redirect URI here:
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
 
-# 2. Keep your client creds in Secrets, as before:
+# 2. Keep only your client creds in Secrets:
 CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
 CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]
 SCOPE         = (
@@ -30,88 +31,99 @@ user_playlists = {}
 def get_auth_url():
     return sp_oauth.get_authorize_url()
 
+
 def check_login(code: str):
+    """Called on every page-load to see if Spotify has redirected us back with ?code=…"""
     global sp, user_playlists
+    if not code:
+        return (
+            gr.update(visible=False),  # hide status until code arrives
+            gr.update(visible=False, choices=[]),
+        )
     token = sp_oauth.get_access_token(code, as_dict=False)
     sp = spotipy.Spotify(auth=token)
-    # pull their first 50 playlists
     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):
+
+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 ""
+    img   = data["images"][0]["url"] if data["images"] else ""
     owner = data["owner"]["display_name"]
-    desc = data.get("description", "")
+    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 gr.update(visible=True, value=html), gr.update(visible=True)
+    return html, gr.update(visible=True)
 
-def shuffle_and_play(pl_name):
+
+def shuffle_and_play(pl_name: str):
     pid = user_playlists[pl_name]
-    # grab all tracks
     tracks, results = [], sp.playlist_tracks(pid)
-    tracks += results["items"]
+    tracks.extend(results["items"])
     while results["next"]:
         results = sp.next(results)
-        tracks += results["items"]
-    uris = [t["track"]["uri"] for t in tracks if t["track"]]
-    random.shuffle(uris)
+        tracks.extend(results["items"])
 
-    # send to their first active device
-    devs = sp.devices()["devices"]
-    if not devs:
-        return gr.update(value="⚠️ No active Spotify device found. Start Spotify on one of your devices.", visible=True)
-    sp.start_playback(device_id=devs[0]["id"], uris=uris)
+    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)
 
-    # show the first shuffled track’s info:
+    sp.start_playback(device_id=devices[0]["id"], uris=uris)
     now = sp.current_playback()
     if now and now.get("item"):
-        it = now["item"]
-        art = it["album"]["images"][0]["url"]
-        title = it["name"]
+        it      = now["item"]
+        art     = it["album"]["images"][0]["url"]
+        title   = it["name"]
         artists = ", ".join(a["name"] for a in it["artists"])
         html = f"""
           <img src="{art}" width="200px" style="border-radius:8px;"/><br/>
           ▶️ <strong>{title}</strong><br/>
           by {artists}
         """
-        return gr.update(value=html, visible=True)
-    return gr.update(value="▶️ Playing your shuffled playlist!", visible=True)
+        return html
+    return "▶️ Playing your shuffled playlist!"
+
 
 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. Launch the login page
-    login_btn = gr.Button("🔐 Step 1: Login to Spotify")
-    login_btn.click(
-        lambda: get_auth_url(), None, None,
-        _js="(url) => window.open(url, '_blank')"
+    # Step 1: Login button using `link=` (Gradio ≥5.14.0)
+    login_btn = gr.Button(
+        "🔐 Step 1: Login to Spotify",
+        link=get_auth_url()
     )
 
-    # 2. Hidden “code” container (we’ll fill it automatically via JS)
+    # Hidden container for the ?code=… Spotify will append on redirect
     code_box = gr.Textbox(visible=False, elem_id="auth_code")
 
-    # 3. When we have a code, finish the OAuth step…
-    status = gr.Markdown(visible=False)
-    demo.load(  # run on every page‐load
+    # Status message + playlist dropdown (populated after login)
+    status   = gr.Markdown(visible=False)
+    dropdown = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
+
+    # Playlist info + 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
+    demo.load(
         fn=check_login,
         inputs=[code_box],
-        outputs=[status, gr.State()],
+        outputs=[status, dropdown],
         _js="""
-          // on-load JS: grab ?code= from URL and stuff it into the hidden box
           const p = new URLSearchParams(window.location.search);
           const c = p.get("code");
-          if(c) {
+          if (c) {
             document
               .getElementById("component-auth_code")
               .querySelector("textarea").value = c;
@@ -119,15 +131,19 @@ with gr.Blocks() as demo:
         """
     )
 
-    # 4. Playlist dropdown + info
-    dropdown = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
-    info_html = gr.HTML(visible=False)
-    dropdown.change(load_playlist_info, [dropdown], [info_html, gr.update(dropdown, visible=True)])
+    # When user picks a playlist, show its artwork/info and reveal the shuffle button
+    dropdown.change(
+        fn=load_playlist_info,
+        inputs=[dropdown],
+        outputs=[info_html, shuffle_btn]
+    )
 
-    # 5. Shuffle & play
-    result = gr.HTML(visible=False)
-    shuffle_btn = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
-    shuffle_btn.click(shuffle_and_play, [dropdown], [result])
+    # Shuffle & start playback, then show track info
+    shuffle_btn.click(
+        fn=shuffle_and_play,
+        inputs=[dropdown],
+        outputs=[result]
+    )
 
 if __name__ == "__main__":
     demo.launch()