Update app.py

app.py

@@ -1,22 +1,26 @@
 import os
+import json
 import random
 import gradio as gr
 import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 
-# ——————————————————————————————
-# 1) Spotify App Credentials (in HF secrets)
+# ——————————————————————————————————————————————
+# 1) Spotify credentials (stored in HF Secrets)
 CLIENT_ID     = os.environ["SPOTIFY_CLIENT_ID"]
 CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]
 
-# 2) Redirect URI must exactly match your Spotify Dashboard
+# 2) Your Space’s URL must match this Redirect URI exactly
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
 
-# 3) Scopes for controlling playback & reading playlists
-SCOPE = "user-read-playback-state user-modify-playback-state playlist-read-private"
+# 3) Include `streaming` for Web Playback SDK + playback scopes
+SCOPE = (
+    "streaming "
+    "user-read-playback-state "
+    "user-modify-playback-state "
+    "playlist-read-private"
+)
 
-# ——————————————————————————————
-# Spotify OAuth helper
 sp_oauth = SpotifyOAuth(
     client_id=CLIENT_ID,
     client_secret=CLIENT_SECRET,
@@ -32,88 +36,178 @@ def get_auth_url():
     return sp_oauth.get_authorize_url()
 
 def check_login(code: str):
+    """
+    Called on page‐load via demo.load(). Once we have a `code`:
+     - exchange it for an access token
+     - fetch playlists
+     - inject the Web Playback SDK + token + debug hooks
+    """
     global sp, user_playlists
     if not code:
-        # Still waiting for Spotify to redirect back with ?code=
         return (
             gr.update(visible=False),  # status
-            gr.update(visible=False),  # playlist dropdown
-            gr.update(visible=False),  # shuffle button
+            gr.update(visible=False),  # dropdown
+            gr.update(visible=False),  # sdk_html
         )
 
-    # Exchange code for an access token
-    token = sp_oauth.get_access_token(code)
-    sp = spotipy.Spotify(auth=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 first 50 playlists
+    # 2) Fetch your playlists
     items = sp.current_user_playlists(limit=50)["items"]
     user_playlists = {p["name"]: p["id"] for p in items}
 
+    # 3) Build SDK + injection scripts
+    sdk_js = f"""
+    <script>
+      // If still sandboxed in an iframe, break out:
+      if (window.self !== window.top) {{
+        window.top.location.href = window.location.href;
+      }}
+      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),
+          volume: 0.5
+        }});
+        ['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().then(success => console.log('[SDK] connect()', success));
+      }};
+    </script>
+    """
+
     return (
-        gr.update(visible=True, value="✅ Logged in! Pick a playlist below."),
+        gr.update(visible=True, value="✅ Logged in! Select a playlist below."),
         gr.update(visible=True, choices=list(user_playlists.keys())),
-        gr.update(visible=True),
+        gr.update(visible=True, value=sdk_js),
     )
 
+def load_playlist_info(playlist_name: str):
+    """
+    When a playlist is selected, show its artwork, name, and description.
+    """
+    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>{playlist_name}</strong> by {owner}<br/>{desc}
+    """
+    return html, gr.update(visible=True)
+
 def shuffle_and_play(playlist_name: str):
+    """
+    Gather all track URIs, RNG-shuffle them, then fire off the Web Playback SDK
+    to play them in-browser on window._webDeviceId.
+    """
     pid = user_playlists.get(playlist_name)
     if not pid:
-        return "⚠️ No playlist selected. Please choose one.", 
+        return gr.update(value="⚠️ No playlist selected.", visible=True)
 
-    # Gather all track URIs
+    # fetch + shuffle
     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"]]
-
-    # RNG shuffle
     random.shuffle(uris)
 
-    # Send to first active device
-    devices = sp.devices().get("devices", [])
-    if not devices:
-        return "⚠️ No active Spotify device found. Open your Spotify app and try again."
-
-    sp.start_playback(device_id=devices[0]["id"], uris=uris)
-    return f"▶️ Playing shuffled **{playlist_name}** on your active device!"
-
-# ——————————————————————————————
+    # in-page JS to start playback
+    uris_json = json.dumps(uris)
+    play_js = f"""
+    <div id="player_debug" style="color:white;font-family:monospace;"></div>
+    <script>
+      console.log("[JS] Starting playback with", window._webDeviceId);
+      console.log("[JS] URIs count:", {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] 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("## 🎵 RNG Spotify Playlist Shuffler")
-    gr.Markdown("1) Login → 2) Pick a playlist → 3) Shuffle & play")
-
-    # Step 1: Login button (same tab)
+    # 0) Auto-bust from any huggingface.co iframe
+    gr.HTML("""
+    <script>
+      if (window.self !== window.top) {
+        window.top.location.href = window.location.href;
+      }
+    </script>
+    """)
+    # 0b) Fallback standalone link
+    gr.HTML('<a href="https://jisaacso219-rng-shuffle.hf.space/" '
+            'target="_blank">🔗 Open in standalone tab</a>')
+
+    gr.Markdown("**1)** Login &nbsp;&nbsp; **2)** Select a playlist &nbsp;&nbsp; **3)** Shuffle & Play in-browser")
+
+    # Step 1: Login to Spotify in SAME tab
     login_btn = gr.Button("🔐 Step 1: Login to Spotify")
     login_btn.click(
-        None, None, None,
+        fn=None, inputs=None, outputs=None,
         js=f"() => window.location.href = '{get_auth_url()}'"
     )
 
-    # Hidden textbox to capture OAuth code
-    code_box       = gr.Textbox(visible=False, elem_id="auth_code")
-    login_status   = gr.Markdown(visible=False)
-    playlist_dd    = gr.Dropdown(choices=[], label="Step 2: Select a Playlist", visible=False)
-    shuffle_button = gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
-    result         = gr.Markdown(visible=False)
+    # These will be revealed after login
+    code_box   = gr.Textbox(visible=False, elem_id="auth_code")
+    status     = gr.Markdown(visible=False)
+    playlist_dd= gr.Dropdown(choices=[], label="Select 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 every load (or redirect back with ?code=), call check_login
+    # On page-load (or after redirect with ?code), run check_login
     demo.load(
         fn=check_login,
         inputs=[code_box],
-        outputs=[login_status, playlist_dd, shuffle_button],
+        outputs=[status, playlist_dd, sdk_html],
         js="() => new URLSearchParams(window.location.search).get('code') || ''"
     )
 
-    # Finally: when they click Shuffle & Play
-    shuffle_button.click(
-        shuffle_and_play,
-        inputs=[playlist_dd],
-        outputs=[result]
-    )
+    # Show playlist info, then reveal shuffle button
+    playlist_dd.change(load_playlist_info, [playlist_dd], [info_html, shuffle_btn])
+
+    # Shuffle & play via Web Playback SDK
+    shuffle_btn.click(shuffle_and_play, [playlist_dd], [result])
 
 if __name__ == "__main__":
-    # No SSR, default port
     demo.launch(server_name="0.0.0.0", ssr_mode=False)
-