Update app.py

app.py

@@ -3,6 +3,7 @@ import gradio as gr
 import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 
+# ——————————————————————————————————————————————
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
 SCOPE = (
     "streaming "
@@ -27,94 +28,115 @@ user_playlists = {}
 def get_auth_url():
     return sp_oauth.get_authorize_url()
 
-def check_login(code):
+def check_login(code: str):
     global sp, user_playlists
     if not code:
-        return gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
+        return (gr.update(visible=False),
+                gr.update(visible=False),
+                gr.update(visible=False))
     tokinfo      = sp_oauth.get_access_token(code, as_dict=True)
     access_token = tokinfo["access_token"]
-    sp = spotipy.Spotify(auth=access_token)
-    items = sp.current_user_playlists(limit=50)["items"]
-    user_playlists = {p["name"]: p["id"] for p in items}
-    # inject token + SDK
+    sp            = spotipy.Spotify(auth=access_token)
+    items         = sp.current_user_playlists(limit=50)["items"]
+    user_playlists= {p["name"]: p["id"] for p in items}
+
+    # Inject the Web Playback SDK + escape any iframe
     sdk_js = f"""
-    <script>window.ACCESS_TOKEN="{access_token}";</script>
+    <script>
+      if (window.self !== window.top) {{
+        window.top.location.href = window.location.href;
+      }}
+      window.ACCESS_TOKEN = "{access_token}";
+    </script>
     <script src="https://sdk.scdn.co/spotify-player.js"></script>
     <script>
       window.onSpotifyWebPlaybackSDKReady = () => {{
+        console.log("[SDK] Ready");
         const player = new Spotify.Player({{
           name: 'RNG Web Player',
           getOAuthToken: cb => cb(window.ACCESS_TOKEN),
           volume: 0.5
         }});
-        player.addListener('ready', ({{ device_id }}) => {{ window._webDeviceId = device_id; }});
+        player.addListener('ready', ({ device_id }) => {{
+          console.log('[SDK] device_id:', device_id);
+          window._webDeviceId = device_id;
+        }});
         player.connect();
       }};
     </script>
     """
+
     return (
-        gr.update(visible=True, value="✅ Logged in! Pick a playlist."),
-        gr.update(visible=True, choices=list(user_playlists.keys())),
-        gr.update(visible=True, value=sdk_js),
+      gr.update(visible=True, value="✅ Logged in! Pick a playlist."),
+      gr.update(visible=True, choices=list(user_playlists.keys())),
+      gr.update(visible=True, value=sdk_js)
     )
 
 def load_playlist_info(name):
-    pid = user_playlists[name]
+    pid  = user_playlists[name]
     data = sp.playlist(pid)
-    img = data["images"][0]["url"] if data["images"] else ""
-    owner = data["owner"]["display_name"]
+    img  = data["images"][0]["url"] if data["images"] else ""
+    owner= data["owner"]["display_name"]
     desc = data.get("description","")
-    return (
-      f"<img src='{img}' width='300'/><br/><strong>{name}</strong> by {owner}<br/>{desc}",
-      gr.update(visible=True),
+    html = (
+      f"<img src='{img}' width='300'/><br/>"
+      f"<strong>{name}</strong> by {owner}<br/>{desc}"
     )
+    return html, gr.update(visible=True)
 
 def shuffle_and_play(name):
-    pid = user_playlists[name]
+    pid     = user_playlists[name]
     tracks, res = [], sp.playlist_tracks(pid)
-    tracks += res["items"]
+    tracks.extend(res["items"])
     while res["next"]:
-        res = sp.next(res)
-        tracks += res["items"]
+        res = sp.next(res); tracks.extend(res["items"])
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
     random.shuffle(uris)
-    uris_json = json.dumps(uris)
-    return gr.update(
-      value=(
-        "▶️ Now playing in-browser!"
-        f"<script>(async()=>{{"
-        f"await fetch('https://api.spotify.com/v1/me/player/play?device_id='+window._webDeviceId,{{"
-        f"method:'PUT',headers:{{'Authorization':'Bearer '+window.ACCESS_TOKEN}},"
-        f"body:JSON.stringify({{'uris':{uris_json}}})}});"
-        f"}})();</script>"
-      ),
-      visible=True
-    )
+
+    # Kick off in-browser playback
+    js = json.dumps(uris)
+    play_js = f"""
+    <script>
+      (async () => {{
+        const token     = window.ACCESS_TOKEN;
+        const device_id = window._webDeviceId;
+        console.log("[JS] PLAY", device_id, {len(uris)},"URIs");
+        const resp = 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':{js}}})
+          }}
+        );
+        console.log("[JS] status:", resp.status);
+      }})();
+    </script>
+    """
+    return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
 
 with gr.Blocks() as demo:
-    gr.Markdown("[🔗 Open standalone](https://jisaacso219-rng-shuffle.hf.space/)")
-    gr.Markdown("1) Click **Login**  2) Pick a playlist  3) Shuffle & play in-browser")
-    login = gr.Button("🔐 Step 1: Login", link=get_auth_url())
-    code_box = gr.Textbox(visible=False, elem_id="auth_code")
-    status, playlist_dd, sdk_html = [
-        gr.Markdown(visible=False),
-        gr.Dropdown([], label="Select Playlist", visible=False),
-        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)
+    gr.HTML(
+      '<a href="https://jisaacso219-rng-shuffle.hf.space/" '
+      'target="_blank">🔗 Open standalone</a>'
+    )
+    gr.Button("🔐 Step 1: Login", link=get_auth_url())
+    code_box   = gr.Textbox(visible=False, elem_id="auth_code")
+    status     = gr.Markdown(visible=False)
+    dropdown   = gr.Dropdown([], 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)
 
     demo.load(
-      fn=check_login,
-      inputs=[code_box],
-      outputs=[status, playlist_dd, sdk_html],
-      js="() => new URLSearchParams(window.location.search).get('code') || ''"
+        fn=check_login,
+        inputs=[code_box],
+        outputs=[status, dropdown, sdk_html],
+        js="() => new URLSearchParams(window.location.search).get('code')||''"
     )
-
-    playlist_dd.change(load_playlist_info, [playlist_dd], [info_html, shuffle_btn])
-    shuffle_btn.click(shuffle_and_play, [playlist_dd], [result])
+    dropdown.change(load_playlist_info, [dropdown], [info_html, shuffle_btn])
+    shuffle_btn.click(shuffle_and_play, [dropdown], [result])
 
 if __name__ == "__main__":
     demo.launch(ssr_mode=False)
-