Update app.py

app.py

@@ -1,12 +1,8 @@
-import os
-import json
-import random
+import os, json, random
 import gradio as gr
 import spotipy
 from spotipy.oauth2 import SpotifyOAuth
 
-# ——————————————————————————————————————————————
-# Configuration
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
 SCOPE = (
     "streaming "
@@ -29,182 +25,96 @@ sp = None
 user_playlists = {}
 
 def get_auth_url():
-    url = sp_oauth.get_authorize_url()
-    print("[SERVER] Auth URL:", url)
-    return url
+    return sp_oauth.get_authorize_url()
 
-def check_login(code: str):
-    print("[SERVER] check_login code:", code)
+def check_login(code):
     global sp, user_playlists
-
     if not code:
-        # still waiting for OAuth redirect
-        return (
-            gr.update(visible=False),  # status
-            gr.update(visible=False),  # dropdown
-            gr.update(visible=False),  # html_token
-        )
-
-    # Exchange code for token
+        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"]
-    print("[SERVER] Received token:", access_token[:8], "…")
     sp = spotipy.Spotify(auth=access_token)
-
-    # Fetch playlists
     items = sp.current_user_playlists(limit=50)["items"]
     user_playlists = {p["name"]: p["id"] for p in items}
-    print("[SERVER] Playlists:", list(user_playlists.keys()))
-
-    # Inject SDK + debug scripts + iframe escape
+    # inject token + SDK
     sdk_js = f"""
-    <script>
-      if (window.self !== window.top) {{
-        console.log("⚠️ Busting out of iframe…");
-        window.top.location.href = window.location.href;
-      }}
-      console.log("[SDK] Setting ACCESS_TOKEN");
-      window.ACCESS_TOKEN = "{access_token}";
-    </script>
+    <script>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.addListener('player_state_changed', state => console.log('[SDK] state_changed', state));
-        player.connect().then(success => console.log('[SDK] connect()', success));
+        player.addListener('ready', ({{ device_id }}) => {{ window._webDeviceId = device_id; }});
+        player.connect();
       }};
     </script>
     """
-
     return (
-        gr.update(visible=True, value="✅ Logged in! Choose a playlist below."),
+        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(pl_name: str):
-    print("[SERVER] load_playlist_info:", pl_name)
-    pid  = user_playlists[pl_name]
+def load_playlist_info(name):
+    pid = user_playlists[name]
     data = sp.playlist(pid)
-    img   = data["images"][0]["url"] if data["images"] else ""
+    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>{pl_name}</strong> by {owner}<br/>{desc}
-    """
-    return html, gr.update(visible=True)
-
-def shuffle_and_play(pl_name: str):
-    print("[SERVER] shuffle_and_play:", pl_name)
-    pid = user_playlists.get(pl_name)
-    if not pid:
-        print("[SERVER] No playlist selected")
-        return gr.update(value="⚠️ No playlist selected.", visible=True)
+    desc = data.get("description","")
+    return (
+      f"<img src='{img}' width='300'/><br/><strong>{name}</strong> by {owner}<br/>{desc}",
+      gr.update(visible=True),
+    )
 
-    # Gather & shuffle URIs
-    tracks, results = [], sp.playlist_tracks(pid)
-    tracks.extend(results["items"])
-    while results["next"]:
-        results = sp.next(results)
-        tracks.extend(results["items"])
+def shuffle_and_play(name):
+    pid = user_playlists[name]
+    tracks, res = [], sp.playlist_tracks(pid)
+    tracks += res["items"]
+    while res["next"]:
+        res = sp.next(res)
+        tracks += res["items"]
     uris = [t["track"]["uri"] for t in tracks if t["track"]]
     random.shuffle(uris)
-    print(f"[SERVER] Shuffled {len(uris)} tracks")
-
     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, device_id:", window._webDeviceId);
-      console.log("[JS] URIs length:", {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] fetch 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:
-    # Auto-bust iframe on load
-    gr.HTML("""
-    <script>
-      if (window.self !== window.top) {
-        console.log("⚠️ Busting out of iframe on load");
-        window.top.location.href = window.location.href;
-      }
-    </script>
-    """)
-    # Fallback link
-    gr.HTML(
-      '<a href="https://jisaacso219-rng-shuffle.hf.space/" '
-      'target="_blank" style="font-size:16px;">🔗 Open standalone</a>'
-    )
-    gr.Markdown("After opening standalone, click **Step 1: Login to Spotify**…")
-
-    # OAuth button (same tab)
-    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()}'"
+    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
     )
 
-    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)
-    html_token = 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)
+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)
 
     demo.load(
-        fn=check_login,
-        inputs=[code_box],
-        outputs=[status, dropdown, html_token],
-        js="""
-        () => {
-          const c = new URLSearchParams(window.location.search).get('code') || "";
-          console.log("[JS] demo.load code:", c);
-          return c;
-        }
-        """
+      fn=check_login,
+      inputs=[code_box],
+      outputs=[status, playlist_dd, sdk_html],
+      js="() => new URLSearchParams(window.location.search).get('code') || ''"
     )
 
-    dropdown.change(load_playlist_info, [dropdown], [info_html, shuffle_btn])
-    shuffle_btn.click(shuffle_and_play, [dropdown], [result])
+    playlist_dd.change(load_playlist_info, [playlist_dd], [info_html, shuffle_btn])
+    shuffle_btn.click(shuffle_and_play, [playlist_dd], [result])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=False)