Update app.py

app.py

@@ -6,13 +6,17 @@ from spotipy.oauth2 import SpotifyOAuth
 import random
 
 # ——————————————————————————————————————————————
+# 1) Redirect URI (must exactly match your Spotify Dashboard)
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
+
+# 2) Include `streaming` in your scopes for Web Playback SDK
 SCOPE = (
     "streaming "
     "user-read-playback-state "
     "user-modify-playback-state "
     "playlist-read-private"
 )
+
 CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
 CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]
 
@@ -23,6 +27,7 @@ sp_oauth = SpotifyOAuth(
     scope=SCOPE,
     show_dialog=True,
 )
+
 sp = None
 user_playlists = {}
 
@@ -34,21 +39,26 @@ 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 Spotify 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)
     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 token + SDK loader + init + debug listeners
+    # Inject token + SDK loader + init + debug listeners
     sdk_js = f"""
     <script>
       console.log("[SDK] Setting ACCESS_TOKEN");
@@ -63,19 +73,21 @@ def check_login(code: str):
           getOAuthToken: cb => cb(window.ACCESS_TOKEN),
           volume: 0.5
         }});
+
         // log errors
         ['initialization_error','authentication_error','account_error','playback_error']
           .forEach(evt => player.addListener(evt, e => console.error('[SDK ' + evt + ']', e)));
-        player.addListener('ready', {{ device_id }} => {{
+
+        player.addListener('ready', ({{ device_id }}) => {{
           console.log('[SDK] Player ready, device_id:', device_id);
           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>
     """
-
     return (
         gr.update(visible=True, value="✅ Logged in! Choose a playlist below."),
         gr.update(visible=True, choices=list(user_playlists.keys())),
@@ -89,7 +101,7 @@ def load_playlist_info(pl_name: str):
     img   = data["images"][0]["url"] if data["images"] else ""
     owner = data["owner"]["display_name"]
     desc  = data.get("description", "")
-    html = f"""
+    html  = f"""
       <img src="{img}" width="300" style="border-radius:8px;"/><br/>
       <strong>{pl_name}</strong> by {owner}<br/>{desc}
     """
@@ -102,18 +114,19 @@ def shuffle_and_play(pl_name: str):
         print("[SERVER] No playlist selected")
         return gr.update(value="⚠️ No playlist selected.", visible=True)
 
-    # collect & shuffle URIs
+    # Gather & shuffle URIs
     tracks, results = [], sp.playlist_tracks(pid)
     tracks.extend(results["items"])
     while results["next"]:
-        results = sp.next(results); tracks.extend(results["items"])
+        results = sp.next(results)
+        tracks.extend(results["items"])
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
     random.shuffle(uris)
     print(f"[SERVER] Shuffled {len(uris)} tracks")
 
-    # JS snippet with debug output in the UI
+    # JS snippet with on‐UI debugging
     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);
@@ -145,37 +158,44 @@ def shuffle_and_play(pl_name: str):
     """
     return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
 
+# ——————————————————————————————————————————————
 with gr.Blocks() as demo:
+    # --- Force users to pop out of the iframe ---
+    gr.Markdown("[🔗 Open this app in a standalone tab](https://jisaacso219-rng-shuffle.hf.space/)")
+    gr.Button("🔗 Open in New Tab", link="https://jisaacso219-rng-shuffle.hf.space/")
+
     gr.Markdown("""
-    ⚠️ **Open in its own tab** (click the 🔗 icon top-right)  
-    after logging in, check your browser console for SDK logs.
+    ⚠️ After opening in a new tab, click **Step 1: Login to Spotify**, 
+    then check your browser console for SDK logs.
     """)
 
+    # Step 1: OAuth
     login_btn = gr.Button(
         "🔐 Step 1: Login to Spotify",
         link=get_auth_url()
     )
 
-    # placeholders for code, status, playlists, sdk scripts
     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)
-    html_token = gr.HTML(visible=False)  # will inject our SDK + init + debug
+    html_token = gr.HTML(visible=False)  # Web Playback SDK injector
 
+    # Step 2 & 3: Playlist info + Shuffle & Play
     info_html  = gr.HTML(visible=False)
     shuffle_btn= gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
     result     = gr.HTML(visible=False)
 
+    # On each load: grab `?code=` and call check_login
     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;
+        }
         """
     )
 
@@ -184,4 +204,3 @@ with gr.Blocks() as demo:
 
 if __name__ == "__main__":
     demo.launch()
-