Update app.py

app.py

@@ -5,15 +5,10 @@ import gradio as gr
 import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 
-# ——————————————————————————————————————————————
-# 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/"
 
-# 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 "
@@ -21,7 +16,6 @@ SCOPE = (
     "playlist-read-private"
 )
 
-# Spotify OAuth helper
 sp_oauth = SpotifyOAuth(
     client_id=CLIENT_ID,
     client_secret=CLIENT_SECRET,
@@ -37,59 +31,44 @@ 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
-
-    # still waiting for Spotify to redirect back…
     if not code:
         return (
-            gr.update(visible=False),  # status message
-            gr.update(visible=False),  # playlist dropdown
-            gr.update(visible=False),  # SDK injection HTML
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=False),
         )
 
-    # exchange code for token
-    tokinfo      = sp_oauth.get_access_token(code, as_dict=True)
+    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
     items = sp.current_user_playlists(limit=50)["items"]
     user_playlists = {p["name"]: p["id"] for p in items}
 
-    # 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) {{
-    window.top.location.href = window.location.href;
-  }}
-  console.log("[SDK] ACCESS_TOKEN set");
-  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] device_id:', device_id);
-      window._webDeviceId = device_id;
-    }});
-    player.connect().then(ok => console.log('[SDK] connect()', ok));
-  }};
-</script>
-"""
+    <script>
+      window.ACCESS_TOKEN = "{access_token}";
+      if (window.self !== window.top) {{
+        window.top.location.href = window.location.href;
+      }}
+    </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 }) => {{
+          window._webDeviceId = device_id;
+          console.log('device_id:', device_id);
+        }});
+        player.connect();
+      }};
+    </script>
+    """
 
     return (
         gr.update(visible=True, value="✅ Logged in! Select a playlist below."),
@@ -104,87 +83,63 @@ def load_playlist_info(playlist_name: str):
     owner= data["owner"]["display_name"]
     desc = data.get("description","")
     html = f"""
-      <img src="{img}" width="300" style="border-radius:8px;"/><br/>
+      <img src="{img}" width="300"/><br/>
       <strong>{playlist_name}</strong> by {owner}<br/>{desc}
     """
     return html, gr.update(visible=True)
 
 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"])
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
-    random.shuffle(uris)  # your RNG shuffle
+    random.shuffle(uris)
 
     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)}, "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] 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>
-"""
+    <script>
+      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} }})
+      }});
+    </script>
+    """
     return gr.update(value="▶️ Now playing in-browser!" + play_js, visible=True)
 
 with gr.Blocks() as demo:
-    # 0) iframe-bust on initial load
     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 → **2)** Pick a playlist → **3)** Shuffle & Play in-browser")
-
-    # Step 1: Login in the same tab
+      <script>
+      if (window.self !== window.top) {
+        window.top.location.href = window.location.href;
+      }
+      </script>
+    """)
+    gr.HTML('<a href="https://jisaacso219-rng-shuffle.hf.space/" target="_blank">Open standalone</a>')
+
+    gr.Markdown("Login → Select playlist → Shuffle & Play")
+
     login_btn = gr.Button("🔐 Step 1: Login to Spotify")
     login_btn.click(
         fn=None, inputs=None, outputs=None,
         js=f"() => window.location.href = '{get_auth_url()}'"
     )
 
-    # 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)
+    code_state = gr.Textbox(visible=False)  # ✅ Critical Fix
+    status = gr.Markdown(visible=False)
+    playlist_dd = gr.Dropdown([], label="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)
+    info_html = gr.HTML(visible=False)
+    shuffle_btn = gr.Button("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],
@@ -197,3 +152,4 @@ with gr.Blocks() as demo:
 
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", ssr_mode=False)
+