Update app.py

app.py

@@ -5,11 +5,11 @@ import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 import random
 
-# ————————————————
-# 1) Redirect URI (must match your Spotify Dashboard)
+# ——————————————————————————————————————————————
+# 1) Redirect URI (must exactly match your Spotify Dashboard)
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
 
-# 2) Scopes now include `streaming`
+# 2) Include `streaming` in your scopes for Web Playback SDK
 SCOPE = (
     "streaming "
     "user-read-playback-state "
@@ -36,28 +36,59 @@ def get_auth_url():
 
 def check_login(code: str):
     """
-    Called on page‐load (demo.load). Exchanges the `code` for an access token,
-    then writes that token into window.ACCESS_TOKEN for the SDK.
+    Called via demo.load on every page‐load. Once we have `code`,
+    exchange it, fetch playlists, _and_ inject our Web Playback SDK.
     """
     global sp, user_playlists
+
     if not code:
-        # Wait for the redirect with ?code=
-        return gr.update(visible=False), gr.update(visible=False, choices=[])
-    # Exchange for token (as_dict so we can grab the raw access_token)
+        # still waiting for Spotify to redirect back
+        return (
+            gr.update(visible=False),    # status
+            gr.update(visible=False),    # dropdown
+            gr.update(visible=False),    # html_token
+        )
+
+    # 1) 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
-    pls = sp.current_user_playlists(limit=50)["items"]
-    user_playlists = {p["name"]: p["id"] for p in pls}
+    # 2) Fetch playlists
+    items = sp.current_user_playlists(limit=50)["items"]
+    user_playlists = {p["name"]: p["id"] for p in items}
 
-    # Embed a script to set window.ACCESS_TOKEN for the Web Playback SDK
-    js_token = f"<script>window.ACCESS_TOKEN = '{access_token}';</script>"
+    # 3) Build the script injection:
+    #    - set window.ACCESS_TOKEN
+    #    - load the SDK
+    #    - initialize the player and grab device_id
+    sdk_js = f"""
+    <script>
+      window.ACCESS_TOKEN = "{access_token}";
+    </script>
+    <script src="https://sdk.scdn.co/spotify-player.js"></script>
+    <script>
+      window.onSpotifyWebPlaybackSDKReady = () => {{
+        const player = new Spotify.Player({{
+          name: 'RNG Web Player',
+          getOAuthToken: cb => {{ cb(window.ACCESS_TOKEN); }},
+          volume: 0.5
+        }});
+        player.addListener('ready', ({{
+          device_id
+        }}) => {{
+          console.log('🟢 Web Playback ready, device_id:', device_id);
+          window._webDeviceId = device_id;
+        }});
+        player.connect();
+      }};
+    </script>
+    """
 
     return (
-        gr.update(visible=True, value="✅ Logged in! Choose a playlist below." + js_token),
+        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)
     )
 
 def load_playlist_info(pl_name: str):
@@ -67,14 +98,15 @@ def load_playlist_info(pl_name: str):
     owner = data["owner"]["display_name"]
     desc  = data.get("description", "")
     html = f"""
-      <img src="{img}" width="300px" style="border-radius:10px;"/><br/>
+      <img src="{img}" width="300" style="border-radius:8px;"/><br/>
       <strong>{pl_name}</strong> by {owner}<br/>{desc}
     """
     return html, gr.update(visible=True)
 
 def shuffle_and_play(pl_name: str):
     pid = user_playlists[pl_name]
-    # Gather + shuffle URIs
+
+    # gather & shuffle URIs
     tracks, results = [], sp.playlist_tracks(pid)
     tracks.extend(results["items"])
     while results["next"]:
@@ -83,92 +115,82 @@ def shuffle_and_play(pl_name: str):
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
     random.shuffle(uris)
 
-    # Generate a JS snippet that kicks off playback via the Web Playback SDK
+    # now hand off to the in‐page player via fetch()
     uris_json = json.dumps(uris)
-    player_js = f"""
+    play_js = f"""
     <script>
-      (async () => {{
-        const token     = window.ACCESS_TOKEN;
-        const device_id = window._webDeviceId;
-        console.log("▶️ Playing 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} }})
-          }}
-        );
-      }})();
+    (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} }})
+        }}
+      );
+    }})();
     </script>
     """
-    return gr.update(value="▶️ Now playing in‐browser!" + player_js, visible=True)
+    return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
 
+# ——————————————————————————————————————————————
 with gr.Blocks() as demo:
-    # Instruction to open in standalone tab
     gr.Markdown("""
     ⚠️ **Please open this Space in its own tab** (click the 🔗 icon top-right)
-    so the OAuth flow and embedded player can work correctly.
+    so that OAuth and the embedded player can work correctly.
     """)
 
-    # Inject the Web Playback SDK
-    gr.HTML("""
-    <script src="https://sdk.scdn.co/spotify-player.js"></script>
-    <script>
-      window.onSpotifyWebPlaybackSDKReady = () => {
-        window._player = new Spotify.Player({
-          name: 'RNG Web Player',
-          getOAuthToken: cb => { cb(window.ACCESS_TOKEN); },
-          volume: 0.5
-        });
-        _player.addListener('ready', ({ device_id }) => {
-          console.log('🟢 Web Playback ready, device_id:', device_id);
-          window._webDeviceId = device_id;
-        });
-        _player.connect();
-      };
-    </script>
-    """)
-
-    # 1️⃣ Login
+    # — 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()
     )
 
-    # Hidden box for the OAuth `code`
-    code_box = gr.Textbox(visible=False, elem_id="auth_code")
+    # — demo.load() needs a “code” placeholder to call check_login(code)
+    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)
+
+    # — this hidden HTML will receive our SDK + init scripts
+    html_token = gr.HTML(visible=False)
 
-    # 2️⃣ Playlist selection
-    status   = gr.Markdown(visible=False)
-    dropdown = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
+    # — Step 3a: show playlist info once they choose one
+    info_html  = gr.HTML(visible=False)
 
-    # 3️⃣ Playlist info & shuffle
-    info_html   = gr.HTML(visible=False)
+    # — Step 3b: shuffle & play
     shuffle_btn = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
     result      = gr.HTML(visible=False)
 
-    # On page-load: grab `?code=` and run check_login
+    # — on every load, grab ?code=… and call check_login
     demo.load(
         fn=check_login,
         inputs=[code_box],
-        outputs=[status, dropdown],
+        outputs=[status, dropdown, html_token],
         js="""
           () => {
-            const c = new URLSearchParams(window.location.search).get('code') || "";
-            return c;
+            return new URLSearchParams(window.location.search).get('code') || "";
           }
         """
     )
 
-    # Show playlist info once selected
-    dropdown.change(load_playlist_info, [dropdown], [info_html, shuffle_btn])
+    dropdown.change(
+        fn=load_playlist_info,
+        inputs=[dropdown],
+        outputs=[info_html, shuffle_btn]
+    )
 
-    # Shuffle & play in-browser
-    shuffle_btn.click(shuffle_and_play, [dropdown], [result])
+    shuffle_btn.click(
+        fn=shuffle_and_play,
+        inputs=[dropdown],
+        outputs=[result]
+    )
 
 if __name__ == "__main__":
     demo.launch()
+