Update app.py

app.py

@@ -6,17 +6,13 @@ 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"]
 
@@ -27,60 +23,55 @@ sp_oauth = SpotifyOAuth(
     scope=SCOPE,
     show_dialog=True,
 )
-
 sp = None
 user_playlists = {}
 
 def get_auth_url():
-    return sp_oauth.get_authorize_url()
+    url = sp_oauth.get_authorize_url()
+    print("[SERVER] Auth URL:", url)
+    return url
 
 def check_login(code: str):
-    """
-    Called via demo.load on every page‐load. Once we have `code`,
-    exchange it, fetch playlists, _and_ inject our Web Playback SDK.
-    """
+    print("[SERVER] check_login code:", code)
     global sp, user_playlists
-
     if not code:
-        # still waiting for Spotify to redirect back
         return (
-            gr.update(visible=False),    # status
-            gr.update(visible=False),    # dropdown
-            gr.update(visible=False),    # html_token
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=False),
         )
-
-    # 1) 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)
-
-    # 2) 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()))
 
-    # 3) Build the script injection:
-    #    - set window.ACCESS_TOKEN
-    #    - load the SDK
-    #    - initialize the player and grab device_id
+    # inject token + SDK loader + init + debug listeners
     sdk_js = f"""
     <script>
+      console.log("[SDK] Setting ACCESS_TOKEN");
       window.ACCESS_TOKEN = "{access_token}";
     </script>
     <script src="https://sdk.scdn.co/spotify-player.js"></script>
     <script>
       window.onSpotifyWebPlaybackSDKReady = () => {{
+        console.log("[SDK] SDK Ready");
         const player = new Spotify.Player({{
           name: 'RNG Web Player',
-          getOAuthToken: cb => {{ cb(window.ACCESS_TOKEN); }},
+          getOAuthToken: cb => cb(window.ACCESS_TOKEN),
           volume: 0.5
         }});
-        player.addListener('ready', ({{
-          device_id
-        }}) => {{
-          console.log('🟢 Web Playback ready, device_id:', device_id);
+        // 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 }} => {{
+          console.log('[SDK] Player ready, device_id:', device_id);
           window._webDeviceId = device_id;
         }});
-        player.connect();
+        player.addListener('player_state_changed', state => console.log('[SDK] state_changed', state));
+        player.connect().then(s => console.log('[SDK] connect()', s));
       }};
     </script>
     """
@@ -88,10 +79,11 @@ def check_login(code: str):
     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, value=sdk_js)
+        gr.update(visible=True, value=sdk_js),
     )
 
 def load_playlist_info(pl_name: str):
+    print("[SERVER] load_playlist_info:", pl_name)
     pid  = user_playlists[pl_name]
     data = sp.playlist(pid)
     img   = data["images"][0]["url"] if data["images"] else ""
@@ -104,92 +96,91 @@ def load_playlist_info(pl_name: str):
     return html, gr.update(visible=True)
 
 def shuffle_and_play(pl_name: str):
-    pid = user_playlists[pl_name]
+    print("[SERVER] shuffle_and_play:", pl_name)
+    pid = user_playlists.get(pl_name)
+    if not pid:
+        print("[SERVER] No playlist selected")
+        return gr.update(value="⚠️ No playlist selected.", visible=True)
 
-    # gather & shuffle URIs
+    # collect & 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")
 
-    # now hand off to the in‐page player via fetch()
+    # JS snippet with debug output in the UI
     uris_json = json.dumps(uris)
     play_js = f"""
+    <div id="player_debug" style="color:white;font-family:monospace;"></div>
     <script>
-    (async () => {{
-      const token     = window.ACCESS_TOKEN;
-      const device_id = window._webDeviceId;
-      console.log("▶️ Playing {len(uris)} tracks on", device_id);
-      await fetch(
-        'https://api.spotify.com/v1/me/player/play?device_id=' + device_id,
-        {{
-          method: 'PUT',
-          headers: {{
-            'Authorization': 'Bearer ' + token,
-            'Content-Type': 'application/json'
-          }},
-          body: JSON.stringify({{ uris: {uris_json} }})
+      console.log("[JS] Starting playback, device_id:", window._webDeviceId);
+      console.log("[JS] URIs length:", {len(uris)});
+      (async () => {{
+        try {{
+          const resp = await fetch(
+            'https://api.spotify.com/v1/me/player/play?device_id=' + window._webDeviceId,
+            {{
+              method: 'PUT',
+              headers: {{
+                'Authorization': 'Bearer ' + window.ACCESS_TOKEN,
+                'Content-Type': 'application/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}`;
+        }} catch(e) {{
+          console.error("[JS] Playback error:", e);
+          document.getElementById("player_debug").innerText =
+            "[JS] Playback error: " + e;
         }}
-      );
-    }})();
+      }})();
     </script>
     """
     return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
 
-# ——————————————————————————————————————————————
 with gr.Blocks() as demo:
     gr.Markdown("""
-    ⚠️ **Please open this Space in its own tab** (click the 🔗 icon top-right)
-    so that OAuth and the embedded player can work correctly.
+    ⚠️ **Open in its own tab** (click the 🔗 icon top-right)  
+    after logging in, check your browser console for SDK logs.
     """)
 
-    # — Step 1: Login — opens a new Tab outside the Hugging Face iframe
     login_btn = gr.Button(
         "🔐 Step 1: Login to Spotify",
         link=get_auth_url()
     )
 
-    # — demo.load() needs a “code” placeholder to call check_login(code)
+    # 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
 
-    # — this hidden HTML will receive our SDK + init scripts
-    html_token = gr.HTML(visible=False)
-
-    # — Step 3a: show playlist info once they choose one
     info_html  = gr.HTML(visible=False)
+    shuffle_btn= gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
+    result     = gr.HTML(visible=False)
 
-    # — Step 3b: shuffle & play
-    shuffle_btn = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
-    result      = gr.HTML(visible=False)
-
-    # — on every load, grab ?code=… and call check_login
     demo.load(
         fn=check_login,
         inputs=[code_box],
         outputs=[status, dropdown, html_token],
         js="""
           () => {
-            return new URLSearchParams(window.location.search).get('code') || "";
+            const c = new URLSearchParams(window.location.search).get('code') || "";
+            console.log("[JS] demo.load code:", c);
+            return c;
           }
         """
     )
 
-    dropdown.change(
-        fn=load_playlist_info,
-        inputs=[dropdown],
-        outputs=[info_html, shuffle_btn]
-    )
-
-    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()