Update app.py

app.py

@@ -1,15 +1,19 @@
-import os, json, random
+import os
+import json
+import random
 import gradio as gr
 import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 
 # ——————————————————————————————————————————————
-# Spotify app creds in HF Secrets
+# 1) Spotify credentials (in Hugging Face Secrets)
 CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
 CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]
-REDIRECT_URI  = "https://jisaacso219-rng-shuffle.hf.space/"
 
-# streaming scope for Web Playback SDK + playback
+# 2) This must match exactly in your Spotify Dashboard
+REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
+
+# 3) Include `streaming` for the Web Playback SDK
 SCOPE = (
     "streaming "
     "user-read-playback-state "
@@ -17,6 +21,7 @@ SCOPE = (
     "playlist-read-private"
 )
 
+# Spotify OAuth helper
 sp_oauth = SpotifyOAuth(
     client_id=CLIENT_ID,
     client_secret=CLIENT_SECRET,
@@ -32,26 +37,35 @@ def get_auth_url():
     return sp_oauth.get_authorize_url()
 
 def check_login(code: str):
+    """
+    Called via demo.load on every page-load.
+    When `code` is non-empty, exchanges it, fetches playlists,
+    and injects the Web Playback SDK + token + iframe-bust.
+    """
     global sp, user_playlists
-    # hide UI until we get a code
+
+    # still waiting for Spotify to redirect back…
     if not code:
         return (
-            gr.update(visible=False),
-            gr.update(visible=False),
-            gr.update(visible=False),
+            gr.update(visible=False),  # status message
+            gr.update(visible=False),  # playlist dropdown
+            gr.update(visible=False),  # SDK injection HTML
         )
+
     # exchange code for token
     tokinfo      = sp_oauth.get_access_token(code, as_dict=True)
     access_token = tokinfo["access_token"]
     sp = spotipy.Spotify(auth=access_token)
-    # fetch playlists
+
+    # fetch first 50 playlists
     items = sp.current_user_playlists(limit=50)["items"]
     user_playlists = {p["name"]: p["id"] for p in items}
-    # inject SDK + auto-bust + debug
+
+    # inject Web Playback SDK + debug scripts + iframe bust
     sdk_js = f"""
 <script>
+  // bust out of HF iframe if still sand-boxed
   if (window.self !== window.top) {{
-    console.log("⚠️ Busting out of iframe");
     window.top.location.href = window.location.href;
   }}
   console.log("[SDK] ACCESS_TOKEN set");
@@ -60,7 +74,7 @@ def check_login(code: str):
 <script src="https://sdk.scdn.co/spotify-player.js"></script>
 <script>
   window.onSpotifyWebPlaybackSDKReady = () => {{
-    console.log("[SDK] Ready");
+    console.log("[SDK] SDK Ready");
     const player = new Spotify.Player({{
       name: 'RNG Web Player',
       getOAuthToken: cb => cb(window.ACCESS_TOKEN),
@@ -76,47 +90,52 @@ def check_login(code: str):
   }};
 </script>
 """
+
     return (
         gr.update(visible=True, value="✅ Logged in! Select a playlist below."),
         gr.update(visible=True, choices=list(user_playlists.keys())),
         gr.update(visible=True, value=sdk_js),
     )
 
-def load_playlist_info(name: str):
-    pid  = user_playlists[name]
+def load_playlist_info(playlist_name: str):
+    pid  = user_playlists[playlist_name]
     data = sp.playlist(pid)
     img  = data["images"][0]["url"] if data["images"] else ""
     owner= data["owner"]["display_name"]
     desc = data.get("description","")
     html = f"""
       <img src="{img}" width="300" style="border-radius:8px;"/><br/>
-      <strong>{name}</strong> by {owner}<br/>{desc}
+      <strong>{playlist_name}</strong> by {owner}<br/>{desc}
     """
     return html, gr.update(visible=True)
 
-def shuffle_and_play(name: str):
-    pid = user_playlists[name]
-    # gather & shuffle URIs
+def shuffle_and_play(playlist_name: str):
+    pid = user_playlists[playlist_name]
+    # gather tracks
     tracks, res = [], sp.playlist_tracks(pid)
     tracks.extend(res["items"])
     while res["next"]:
-        res = sp.next(res); tracks.extend(res["items"])
+        res = sp.next(res)
+        tracks.extend(res["items"])
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
-    random.shuffle(uris)
-    # fire Web Playback SDK
-    js_uris = json.dumps(uris)
+    random.shuffle(uris)  # your RNG shuffle
+
+    uris_json = json.dumps(uris)
     play_js = f"""
 <div id="player_debug" style="color:white;font-family:monospace;"></div>
 <script>
-  console.log("[JS] play→", window._webDeviceId, {len(uris)}, "tracks");
+  console.log("[JS] play→", window._webDeviceId, {len(uris)}, "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:{js_uris}}})
+          method: 'PUT',
+          headers: {{
+            'Authorization': 'Bearer ' + window.ACCESS_TOKEN,
+            'Content-Type': 'application/json'
+          }},
+          body: JSON.stringify({{ uris: {uris_json} }})
         }}
       );
       const text = await resp.text();
@@ -131,64 +150,50 @@ def shuffle_and_play(name: str):
   }})();
 </script>
 """
-    return gr.update(value="▶️ Now playing in-browser!"+play_js, visible=True)
+    return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
 
 with gr.Blocks() as demo:
-    # iframe-bust on initial load
+    # 0) iframe-bust on initial load
     gr.HTML("""
 <script>
   if (window.self !== window.top) {
     window.top.location.href = window.location.href;
   }
-</script>""")
-    # fallback link
+</script>
+""")
+    # 0b) fallback standalone link
     gr.HTML('<a href="https://jisaacso219-rng-shuffle.hf.space/" target="_blank">'
-            '🔗 Open standalone tab</a>')
-    gr.Markdown("1) Login → 2) Pick a playlist → 3) Shuffle & Play in-browser")
+            '🔗 Open in standalone tab</a>')
+
+    gr.Markdown("**1)** Login → **2)** Pick a playlist → **3)** Shuffle & Play in-browser")
 
-    # Step 1: Login (same tab)
+    # Step 1: Login in the same tab
     login_btn = gr.Button("🔐 Step 1: Login to Spotify")
-    login_btn.click(None, None, None,
+    login_btn.click(
+        fn=None, inputs=None, outputs=None,
         js=f"() => window.location.href = '{get_auth_url()}'"
     )
 
-    # hidden components
-    code_box    = gr.Textbox(visible=False, elem_id="auth_code")
-    status      = gr.Markdown(visible=False)
-    playlist_dd = gr.Dropdown([], label="Step 2: Select a Playlist", visible=False)
-    sdk_html    = 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)
-
-    # hidden button to trigger check_login
-    check_btn = gr.Button(visible=False, elem_id="check_code_btn")
-    check_btn.click(
-        check_login,
-        inputs=[code_box],
+    # State & UI placeholders
+    code_state = gr.State()  # receives the OAuth `code`
+    status     = gr.Markdown(visible=False)
+    playlist_dd= gr.Dropdown([], label="Step 2: Select a Playlist", visible=False)
+    sdk_html   = 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)
+
+    # On page-load (or after redirect), grab `code` and run check_login
+    demo.load(
+        fn=check_login,
+        inputs=[code_state],
         outputs=[status, playlist_dd, sdk_html],
+        js="() => new URLSearchParams(window.location.search).get('code') || ''"
     )
 
-    # playlist info → reveal shuffle
     playlist_dd.change(load_playlist_info, [playlist_dd], [info_html, shuffle_btn])
     shuffle_btn.click(shuffle_and_play, [playlist_dd], [result])
 
-    # auto-fill & auto-click on load
-    gr.HTML("""
-<script>
-  window.addEventListener('load',() => {
-    const code = new URLSearchParams(window.location.search).get('code');
-    console.log('[JS] got code:', code);
-    if (code) {
-      const ta  = document.getElementById('component-auth_code')?.querySelector('textarea');
-      const btn = document.getElementById('component-check_code_btn');
-      if (ta)  ta.value = code;
-      if (btn) btn.click();
-    }
-  });
-</script>
-""")
-
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", ssr_mode=False)