Update app.py

app.py

@@ -1,13 +1,24 @@
 import os
+import json
 import gradio as gr
 import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 import random
 
+# ————————————————
+# 1) Redirect URI (must match your Spotify Dashboard)
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
+
+# 2) Scopes now include `streaming`
+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"]
-SCOPE         = "user-read-playback-state user-modify-playback-state playlist-read-private"
 
 sp_oauth = SpotifyOAuth(
     client_id=CLIENT_ID,
@@ -24,82 +35,140 @@ def get_auth_url():
     return sp_oauth.get_authorize_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.
+    """
+    global sp, user_playlists
     if not code:
+        # Wait for the redirect with ?code=
         return gr.update(visible=False), gr.update(visible=False, choices=[])
-    token = sp_oauth.get_access_token(code, as_dict=False)
-    global sp, user_playlists
-    sp = spotipy.Spotify(auth=token)
+    # Exchange for token (as_dict so we can grab the raw access_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}
+
+    # Embed a script to set window.ACCESS_TOKEN for the Web Playback SDK
+    js_token = f"<script>window.ACCESS_TOKEN = '{access_token}';</script>"
+
     return (
-        gr.update(visible=True, value="✅ Logged in! Choose a playlist below."),
+        gr.update(visible=True, value="✅ Logged in! Choose a playlist below." + js_token),
         gr.update(visible=True, choices=list(user_playlists.keys())),
     )
 
-def load_playlist_info(pl_name):
+def load_playlist_info(pl_name: str):
     pid  = user_playlists[pl_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"/><br/>
-               <strong>{pl_name}</strong> by {owner}<br/>{desc}"""
+    html = f"""
+      <img src="{img}" width="300px" style="border-radius:10px;"/><br/>
+      <strong>{pl_name}</strong> by {owner}<br/>{desc}
+    """
     return html, gr.update(visible=True)
 
-def shuffle_and_play(pl_name):
-    pid     = user_playlists[pl_name]
+def shuffle_and_play(pl_name: str):
+    pid = user_playlists[pl_name]
+    # Gather + shuffle URIs
     tracks, results = [], sp.playlist_tracks(pid)
     tracks.extend(results["items"])
     while results["next"]:
         results = sp.next(results)
         tracks.extend(results["items"])
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
-    devs = sp.devices()["devices"]
-    if not devs:
-        return gr.update(value="⚠️ No active Spotify device.", visible=True)
-    sp.start_playback(device_id=devs[0]["id"], uris=uris)
-    now = sp.current_playback()
-    if now and now.get("item"):
-        it      = now["item"]
-        art     = it["album"]["images"][0]["url"]
-        title   = it["name"]
-        artists = ", ".join(a["name"] for a in it["artists"])
-        return f"""<img src="{art}" width="200"/><br/>
-                   ▶️ <strong>{title}</strong><br/>by {artists}"""
-    return "▶️ Playing your shuffled playlist!"
+    random.shuffle(uris)
+
+    # Generate a JS snippet that kicks off playback via the Web Playback SDK
+    uris_json = json.dumps(uris)
+    player_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} }})
+          }}
+        );
+      }})();
+    </script>
+    """
+    return gr.update(value="▶️ Now playing in‐browser!" + player_js, visible=True)
 
 with gr.Blocks() as demo:
+    # Instruction to open in standalone tab
     gr.Markdown("""
-    ⚠️ **View this Space in its own tab!**  
-    Click the 🔗 icon at top-right before logging in.
+    ⚠️ **Please open this Space in its own tab** (click the 🔗 icon top-right)
+    so the OAuth flow and 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
     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")
+
+    # 2️⃣ Playlist selection
     status   = gr.Markdown(visible=False)
     dropdown = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
+
+    # 3️⃣ Playlist info & shuffle
     info_html   = gr.HTML(visible=False)
     shuffle_btn = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
     result      = gr.HTML(visible=False)
 
+    # On page-load: grab `?code=` and run check_login
     demo.load(
         fn=check_login,
         inputs=[code_box],
         outputs=[status, dropdown],
         js="""
           () => {
-            return new URLSearchParams(window.location.search).get('code') || "";
+            const c = new URLSearchParams(window.location.search).get('code') || "";
+            return c;
           }
         """
     )
 
+    # Show playlist info once selected
     dropdown.change(load_playlist_info, [dropdown], [info_html, shuffle_btn])
+
+    # Shuffle & play in-browser
     shuffle_btn.click(shuffle_and_play, [dropdown], [result])
 
 if __name__ == "__main__":
     demo.launch()
-