add choosing port

README.md

@@ -45,7 +45,8 @@ Show Spotify Lyrics via Spotilyrics
 
 1. Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard).
 2. Create an app → copy **Client ID**.
-3. **Important:** set the **Redirect URI** for your app to: `http://127.0.0.1:8000/callback`
+3. **Important:** set the **Redirect URI** for your app to: `http://127.0.0.1:<port>/callback` (default: `8000`).  
+   You can change the port in settings (`spotilyrics.port`) or via the command `Set Spotify OAuth Callback Port`.
 4. Run the `Show Spotify Lyrics via Spotilyrics` command.
 5. Paste your **Client ID** in the panel and log in.
 6. Enjoy synced lyrics while coding! 🎶
@@ -60,6 +61,7 @@ Show Spotify Lyrics via Spotilyrics
 - `Toggle Mobile Mode` (`spotilyrics.toggleMobileMode`) – switch between normal and mobile mode.
 - `Logout from Spotilyrics` (`spotilyrics.logout`) – clear session and re-auth when needed.
 - `Set Tracks Cache Max Size` (`spotilyrics.setTracksCacheMaxSize`) – configure the maximum number of tracks cached for lyrics.
+- `Set Spotify OAuth Callback Port` (`spotilyrics.setPort`) – set the local callback port used for Spotify OAuth.
 
 ---
 

media/signInTemplate.html

@@ -21,7 +21,7 @@ <h1 class="login-title">Sign in to <span class="logo-bold">Spotilyrics</span></h
                         class="link-hint"
                         >here</a
                     ><br />
-                    Note: Use http://127.0.0.1:8000/callback as a Redirect URI
+                    Note: Use http://127.0.0.1:{{PORT}}/callback as a Redirect URI
                 </p>
             </div>
 

package.json

@@ -3,7 +3,7 @@
     "displayName": "spotilyrics",
     "description": "🎧 See synchronized Spotify lyrics inside VS Code while coding",
     "publisher": "therepanic",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "engines": {
         "vscode": "^1.66.0"
     },
@@ -15,7 +15,8 @@
         "onCommand:spotilyrics.lyrics",
         "onCommand:spotilyrics.logout",
         "onCommand:spotilyrics.setTracksCacheMaxSize",
-        "onCommand:spotilyrics.toggleMobileMode"
+        "onCommand:spotilyrics.toggleMobileMode",
+        "onCommand:spotilyrics.setPort"
     ],
     "main": "./out/extension.js",
     "repository": {
@@ -26,6 +27,13 @@
         "configuration": {
             "title": "spotilyrics",
             "properties": {
+                "spotilyrics.port": {
+                    "type": "number",
+                    "default": 8000,
+                    "minimum": 1024,
+                    "maximum": 65535,
+                    "description": "Port used for the Spotify OAuth callback."
+                },
                 "spotilyrics.tracksCacheMaxSize": {
                     "type": "number",
                     "default": 10,
@@ -56,6 +64,10 @@
             {
                 "command": "spotilyrics.toggleMobileMode",
                 "title": "Toggle Mobile Mode"
+            },
+            {
+                "command": "spotilyrics.setPort",
+                "title": "Set Spotify OAuth Callback Port"
             }
         ]
     },

src/api/SpotifyWebApi.ts

@@ -4,12 +4,12 @@ import { SpotifyRefreshTokenResponse } from './response/SpotifyRefreshTokenRespo
 import fetch from 'node-fetch';
 
 export class SpotifyWebApi {
-    static async getAuthUrl(clientId: string, codeChallenge: string) {
+    static async getAuthUrl(port: number, clientId: string, codeChallenge: string) {
         const params = new URLSearchParams({
             response_type: 'code',
             client_id: clientId,
             scope: 'user-read-currently-playing',
-            redirect_uri: 'http://127.0.0.1:8000/callback',
+            redirect_uri: `http://127.0.0.1:${port}/callback`,
             code_challenge: codeChallenge,
             code_challenge_method: 'S256',
         });

src/extension.ts

@@ -80,11 +80,17 @@ export async function activate(context: vscode.ExtensionContext) {
                         codeVerifier,
                         codeChallenge,
                         'authorization_code',
-                        'http://127.0.0.1:8000/callback'
+                        `http://127.0.0.1:${vscode.workspace.getConfiguration('spotilyrics').get('port')}/callback`
                     );
 
                     vscode.env.openExternal(
-                        vscode.Uri.parse(await SpotifyWebApi.getAuthUrl(clientId, codeChallenge))
+                        vscode.Uri.parse(
+                            await SpotifyWebApi.getAuthUrl(
+                                vscode.workspace.getConfiguration('spotilyrics').get('port')!,
+                                clientId,
+                                codeChallenge
+                            )
+                        )
                     );
                 }
             });
@@ -160,6 +166,43 @@ export async function activate(context: vscode.ExtensionContext) {
             }
         })
     );
+    context.subscriptions.push(
+        vscode.commands.registerCommand('spotilyrics.setPort', async () => {
+            const MIN = 1024,
+                MAX = 65535,
+                DEFAULT = 8000;
+            const config = vscode.workspace.getConfiguration('spotilyrics');
+            const input = await vscode.window.showInputBox({
+                prompt: `Port used for the Spotify OAuth callback. Enter an integer ${MIN}–${MAX}`,
+                value: String(config.get<number>('port') ?? DEFAULT),
+                validateInput: (v) => {
+                    if (!/^\d+$/.test(v)) {
+                        return 'Please enter an integer';
+                    }
+                    const n = Number(v);
+                    if (n < MIN) {
+                        return `Minimum is ${MIN}`;
+                    }
+                    if (n > MAX) {
+                        return `Maximum is ${MAX}`;
+                    }
+                    return null;
+                },
+                ignoreFocusOut: true,
+            });
+            if (!input) {
+                return;
+            }
+            const value = Math.max(MIN, Math.min(MAX, parseInt(input, 10)));
+            await config.update('port', value, vscode.ConfigurationTarget.Global);
+            vscode.window.showInformationMessage(`Spotify OAuth callback port set to ${value}`);
+            if (panel) {
+                await deactivate();
+                await createServer(context);
+                await printFrame(context);
+            }
+        })
+    );
 }
 
 export async function deactivate() {
@@ -201,7 +244,9 @@ async function printFrame(context: vscode.ExtensionContext) {
         const scriptUri = panel.webview.asWebviewUri(
             vscode.Uri.joinPath(context.extensionUri, 'media', scriptName)
         );
+        const port = vscode.workspace.getConfiguration('spotilyrics').get<number>('port') ?? 8000;
         panel.webview.html = html
+            .replace('{{PORT}}', String(port))
             .replace('styles.css', cssUri.toString())
             .replace('script.js', scriptUri.toString());
     }
@@ -282,7 +327,7 @@ async function createServer(context: vscode.ExtensionContext) {
             res.end('Not Found');
         }
     });
-    server.listen(8000);
+    server.listen(vscode.workspace.getConfiguration('spotilyrics').get('port'));
 }
 
 async function pollSpotifyStat(context: vscode.ExtensionContext) {