Update app.py

app.py

@@ -1,11 +1,12 @@
 import os
 import json
+import random
 import gradio as gr
 import spotipy
 from spotipy.oauth2 import SpotifyOAuth
-import random
 
 # ——————————————————————————————————————————————
+# Configuration
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
 SCOPE = (
     "streaming "
@@ -35,26 +36,31 @@ def get_auth_url():
 def check_login(code: str):
     print("[SERVER] check_login code:", code)
     global sp, user_playlists
+
     if not code:
+        # still waiting for OAuth redirect
         return (
-            gr.update(visible=False),
-            gr.update(visible=False),
-            gr.update(visible=False),
+            gr.update(visible=False),  # status
+            gr.update(visible=False),  # dropdown
+            gr.update(visible=False),  # html_token
         )
+
+    # Exchange code for token
     tokinfo      = sp_oauth.get_access_token(code, as_dict=True)
     access_token = tokinfo["access_token"]
     print("[SERVER] Received token:", access_token[:8], "…")
     sp = spotipy.Spotify(auth=access_token)
 
+    # Fetch playlists
     items = sp.current_user_playlists(limit=50)["items"]
     user_playlists = {p["name"]: p["id"] for p in items}
     print("[SERVER] Playlists:", list(user_playlists.keys()))
 
+    # Inject SDK + debug scripts + iframe escape
     sdk_js = f"""
     <script>
-      // Break out of any iframe after login
       if (window.self !== window.top) {{
-        console.log("⚠️ Breaking out of iframe post-login");
+        console.log("⚠️ Busting out of iframe…");
         window.top.location.href = window.location.href;
       }}
       console.log("[SDK] Setting ACCESS_TOKEN");
@@ -76,7 +82,7 @@ def check_login(code: str):
           window._webDeviceId = device_id;
         }});
         player.addListener('player_state_changed', state => console.log('[SDK] state_changed', state));
-        player.connect().then(s => console.log('[SDK] connect()', s));
+        player.connect().then(success => console.log('[SDK] connect()', success));
       }};
     </script>
     """
@@ -107,6 +113,7 @@ def shuffle_and_play(pl_name: str):
         print("[SERVER] No playlist selected")
         return gr.update(value="⚠️ No playlist selected.", visible=True)
 
+    # Gather & shuffle URIs
     tracks, results = [], sp.playlist_tracks(pid)
     tracks.extend(results["items"])
     while results["next"]:
@@ -117,7 +124,7 @@ def shuffle_and_play(pl_name: str):
     print(f"[SERVER] Shuffled {len(uris)} tracks")
 
     uris_json = json.dumps(uris)
-    play_js = f"""
+    play_js   = f"""
     <div id="player_debug" style="color:white;font-family:monospace;"></div>
     <script>
       console.log("[JS] Starting playback, device_id:", window._webDeviceId);
@@ -132,13 +139,13 @@ def shuffle_and_play(pl_name: str):
                 'Authorization': 'Bearer ' + window.ACCESS_TOKEN,
                 'Content-Type': 'application/json'
               }},
-              body: JSON.stringify({{uris: {uris_json}}})
+              body: JSON.stringify({{uris:{uris_json}}})
             }}
           );
           const text = await resp.text();
           console.log("[JS] fetch status:", resp.status, text);
           document.getElementById("player_debug").innerText =
-            `[JS] fetch status: ${resp.status} – ${text}`;
+            `[JS] fetch status: ${{resp.status}} – ${{text}}`;
         }} catch(e) {{
           console.error("[JS] Playback error:", e);
           document.getElementById("player_debug").innerText =
@@ -149,31 +156,28 @@ def shuffle_and_play(pl_name: str):
     """
     return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
 
-# ——————————————————————————————————————————————
 with gr.Blocks() as demo:
-    # 1) Auto-breakout for any iframe
+    # Auto-bust iframe on load
     gr.HTML("""
     <script>
       if (window.self !== window.top) {
-        console.log("⚠️ Auto-busting out of iframe");
+        console.log("⚠️ Busting out of iframe on load");
         window.top.location.href = window.location.href;
       }
     </script>
     """)
-
-    # 2) Fallback link with target="_blank"
+    # Fallback link
     gr.HTML(
-      '<a href="https://jisaacso219-rng-shuffle.hf.space/" target="_blank" '
-      'style="font-size:16px;">🔗 Open in a standalone tab</a>'
+      '<a href="https://jisaacso219-rng-shuffle.hf.space/" '
+      'target="_blank" style="font-size:16px;">🔗 Open standalone</a>'
     )
+    gr.Markdown("After opening standalone, click **Step 1: Login to Spotify**…")
 
-    # 3) Instructions
-    gr.Markdown("After opening in its own tab, click **Step 1: Login to Spotify**…")
-
-    # 4) OAuth
-    login_btn = gr.Button(
-        "🔐 Step 1: Login to Spotify",
-        link=get_auth_url()
+    # OAuth button (same tab)
+    login_btn = gr.Button("🔐 Step 1: Login to Spotify")
+    login_btn.click(
+        fn=None, inputs=None, outputs=None,
+        js=f"() => window.location.href = '{get_auth_url()}'"
     )
 
     code_box   = gr.Textbox(visible=False, elem_id="auth_code")
@@ -181,22 +185,20 @@ with gr.Blocks() as demo:
     dropdown   = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
     html_token = gr.HTML(visible=False)
 
-    # 5) Playlist info & Shuffle
-    info_html   = gr.HTML(visible=False)
-    shuffle_btn = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
-    result      = 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)
 
-    # 6) demo.load for OAuth callback
     demo.load(
         fn=check_login,
         inputs=[code_box],
         outputs=[status, dropdown, html_token],
         js="""
-          () => {
-            const c = new URLSearchParams(window.location.search).get('code') || "";
-            console.log("[JS] demo.load code:", c);
-            return c;
-          }
+        () => {
+          const c = new URLSearchParams(window.location.search).get('code') || "";
+          console.log("[JS] demo.load code:", c);
+          return c;
+        }
         """
     )