Update app.py

app.py

@@ -6,17 +6,13 @@ from spotipy.oauth2 import SpotifyOAuth
 import random
 
 # ——————————————————————————————————————————————
-# 1) Redirect URI (must exactly match your Spotify Dashboard)
 REDIRECT_URI = "https://jisaacso219-rng-shuffle.hf.space/"
-
-# 2) Include `streaming` in your scopes for Web Playback SDK
 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"]
 
@@ -39,28 +35,28 @@ def get_auth_url():
 def check_login(code: str):
     print("[SERVER] check_login code:", code)
     global sp, user_playlists
-
     if not code:
-        # still waiting for Spotify redirect
         return (
-            gr.update(visible=False),  # status
-            gr.update(visible=False),  # dropdown
-            gr.update(visible=False),  # html_token
+            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"]
     print("[SERVER] Received token:", access_token[:8], "…")
-
     sp = spotipy.Spotify(auth=access_token)
+
     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 token + SDK loader + init + debug listeners
     sdk_js = f"""
     <script>
+      // Break out of any iframe after login
+      if (window.self !== window.top) {{
+        console.log("⚠️ Breaking out of iframe post-login");
+        window.top.location.href = window.location.href;
+      }}
       console.log("[SDK] Setting ACCESS_TOKEN");
       window.ACCESS_TOKEN = "{access_token}";
     </script>
@@ -73,21 +69,18 @@ def check_login(code: str):
           getOAuthToken: cb => cb(window.ACCESS_TOKEN),
           volume: 0.5
         }});
-
-        // log errors
         ['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.connect().then(s => console.log('[SDK] connect()', s));
       }};
     </script>
     """
+
     return (
         gr.update(visible=True, value="✅ Logged in! Choose a playlist below."),
         gr.update(visible=True, choices=list(user_playlists.keys())),
@@ -114,7 +107,6 @@ def shuffle_and_play(pl_name: str):
         print("[SERVER] No playlist selected")
         return gr.update(value="⚠️ No playlist selected.", visible=True)
 
-    # Gather & shuffle URIs
     tracks, results = [], sp.playlist_tracks(pid)
     tracks.extend(results["items"])
     while results["next"]:
@@ -124,9 +116,8 @@ def shuffle_and_play(pl_name: str):
     random.shuffle(uris)
     print(f"[SERVER] Shuffled {len(uris)} tracks")
 
-    # JS snippet with on‐UI debugging
     uris_json = json.dumps(uris)
-    play_js   = f"""
+    play_js = f"""
     <div id="player_debug" style="color:white;font-family:monospace;"></div>
     <script>
       console.log("[JS] Starting playback, device_id:", window._webDeviceId);
@@ -160,16 +151,26 @@ def shuffle_and_play(pl_name: str):
 
 # ——————————————————————————————————————————————
 with gr.Blocks() as demo:
-    # --- Force users to pop out of the iframe ---
-    gr.Markdown("[🔗 Open this app in a standalone tab](https://jisaacso219-rng-shuffle.hf.space/)")
-    gr.Button("🔗 Open in New Tab", link="https://jisaacso219-rng-shuffle.hf.space/")
-
-    gr.Markdown("""
-    ⚠️ After opening in a new tab, click **Step 1: Login to Spotify**, 
-    then check your browser console for SDK logs.
+    # 1) Auto-breakout for any iframe
+    gr.HTML("""
+    <script>
+      if (window.self !== window.top) {
+        console.log("⚠️ Auto-busting out of iframe");
+        window.top.location.href = window.location.href;
+      }
+    </script>
     """)
 
-    # Step 1: OAuth
+    # 2) Fallback link with target="_blank"
+    gr.HTML(
+      '<a href="https://jisaacso219-rng-shuffle.hf.space/" target="_blank" '
+      'style="font-size:16px;">🔗 Open in a standalone tab</a>'
+    )
+
+    # 3) Instructions
+    gr.Markdown("After opening in its own tab, click **Step 1: Login to Spotify**…")
+
+    # 4) OAuth
     login_btn = gr.Button(
         "🔐 Step 1: Login to Spotify",
         link=get_auth_url()
@@ -178,24 +179,24 @@ with gr.Blocks() as demo:
     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)  # Web Playback SDK injector
+    html_token = gr.HTML(visible=False)
 
-    # Step 2 & 3: Playlist info + Shuffle & Play
-    info_html  = gr.HTML(visible=False)
-    shuffle_btn= gr.Button("🔀 Step 3: Shuffle & Play", visible=False)
-    result     = gr.HTML(visible=False)
+    # 5) 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 each load: grab `?code=` and call check_login
+    # 6) demo.load for OAuth callback
     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;
-        }
+          () => {
+            const c = new URLSearchParams(window.location.search).get('code') || "";
+            console.log("[JS] demo.load code:", c);
+            return c;
+          }
         """
     )
 
@@ -204,3 +205,4 @@ with gr.Blocks() as demo:
 
 if __name__ == "__main__":
     demo.launch()
+