@involvex/youtube-music-cli 0.0.18 → 0.0.19

package/dist/source/services/web/websocket.server.js

@@ -0,0 +1,253 @@
+// WebSocket server for web UI
+import { createServer as createHttpServer, } from 'node:http';
+import { WebSocketServer, WebSocket } from 'ws';
+import { getWebStreamingService } from "./web-streaming.service.js";
+import { getStaticFileService } from "./static-file.service.js";
+import { logger } from "../logger/logger.service.js";
+class WebSocketServerClass {
+    httpServer = null;
+    wsServer = null;
+    config;
+    streamingService = getWebStreamingService();
+    staticFileService = getStaticFileService();
+    onCommand;
+    onImportRequest;
+    constructor() {
+        this.config = {
+            enabled: false,
+            host: 'localhost',
+            port: 8080,
+            enableCors: true,
+            allowedOrigins: ['*'],
+            auth: { enabled: false },
+        };
+    }
+    /**
+     * Start the WebSocket server
+     */
+    async start(options) {
+        this.config = options.config;
+        this.onCommand = options.onCommand;
+        this.onImportRequest = options.onImportRequest;
+        logger.info('WebSocketServer', 'Starting server', {
+            host: this.config.host,
+            port: this.config.port,
+            auth: this.config.auth.enabled,
+        });
+        // Create HTTP server
+        this.httpServer = createHttpServer((req, res) => {
+            this.handleHttpRequest(req, res);
+        });
+        // Create WebSocket server
+        this.wsServer = new WebSocketServer({
+            server: this.httpServer,
+            path: '/ws',
+        });
+        // Handle WebSocket connections
+        this.wsServer.on('connection', (ws, req) => {
+            this.handleWebSocketConnection(ws, req);
+        });
+        // Handle HTTP server errors
+        this.httpServer.on('error', error => {
+            logger.error('WebSocketServer', 'HTTP server error', {
+                error: error instanceof Error ? error.message : String(error),
+            });
+        });
+        // Handle WebSocket server errors
+        this.wsServer.on('error', error => {
+            logger.error('WebSocketServer', 'WebSocket server error', {
+                error: error instanceof Error ? error.message : String(error),
+            });
+        });
+        // Start listening
+        return new Promise((resolve, reject) => {
+            this.httpServer.listen({
+                host: this.config.host,
+                port: this.config.port,
+            }, () => {
+                logger.info('WebSocketServer', 'Server started', {
+                    url: `http://${this.config.host}:${this.config.port}`,
+                });
+                resolve();
+            });
+            this.httpServer.on('error', reject);
+        });
+    }
+    /**
+     * Handle HTTP requests (for static file serving)
+     */
+    handleHttpRequest(req, res) {
+        // Set CORS headers if enabled
+        if (this.config.enableCors) {
+            const origin = req.headers.origin;
+            if (origin &&
+                (this.config.allowedOrigins.includes('*') ||
+                    this.config.allowedOrigins.includes(origin))) {
+                res.setHeader('Access-Control-Allow-Origin', origin);
+                res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+                res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+            }
+        }
+        // Handle preflight requests
+        if (req.method === 'OPTIONS') {
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        // Serve static files
+        const url = req.url ?? '/';
+        this.staticFileService.serve(url, req, res);
+    }
+    /**
+     * Handle WebSocket connection
+     */
+    handleWebSocketConnection(ws, req) {
+        const clientId = this.generateClientId();
+        logger.info('WebSocketServer', 'New connection', {
+            clientId,
+            ip: req.socket.remoteAddress,
+        });
+        // Handle authentication if enabled
+        if (this.config.auth.enabled) {
+            const token = this.extractAuthToken(req);
+            if (!token || token !== this.config.auth.token) {
+                logger.warn('WebSocketServer', 'Authentication failed', { clientId });
+                ws.close(1008, 'Authentication failed');
+                return;
+            }
+        }
+        // Add client to streaming service
+        this.streamingService.addClient(clientId, ws, true);
+        // Send welcome message
+        this.sendToClient(ws, {
+            type: 'auth',
+            success: true,
+            message: 'Connected to YouTube Music CLI',
+        });
+        // Handle incoming messages
+        ws.on('message', (data) => {
+            try {
+                const message = JSON.parse(data.toString());
+                this.streamingService.handleClientMessage(clientId, message);
+                this.handleClientCommand(clientId, message);
+            }
+            catch (error) {
+                logger.error('WebSocketServer', 'Failed to parse message', {
+                    clientId,
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+        // Handle close
+        ws.on('close', () => {
+            this.streamingService.removeClient(clientId);
+        });
+        // Handle errors
+        ws.on('error', error => {
+            logger.error('WebSocketServer', 'WebSocket error', {
+                error: error instanceof Error ? error.message : String(error),
+            });
+        });
+    }
+    /**
+     * Handle commands from clients
+     */
+    handleClientCommand(_clientId, message) {
+        switch (message.type) {
+            case 'command':
+                if (this.onCommand) {
+                    this.onCommand(message.action);
+                }
+                break;
+            case 'import-request':
+                if (this.onImportRequest) {
+                    this.onImportRequest(message.source, message.url, message.name);
+                }
+                break;
+            case 'auth-request':
+                // Already handled in connection phase
+                break;
+        }
+    }
+    /**
+     * Send message to a specific WebSocket client
+     */
+    sendToClient(ws, message) {
+        if (ws.readyState === WebSocket.OPEN) {
+            try {
+                ws.send(JSON.stringify(message));
+            }
+            catch (error) {
+                logger.error('WebSocketServer', 'Failed to send message', {
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+        }
+    }
+    /**
+     * Generate a unique client ID
+     */
+    generateClientId() {
+        return `client_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+    }
+    /**
+     * Extract auth token from request
+     */
+    extractAuthToken(req) {
+        // Check Authorization header
+        const authHeader = req.headers.authorization;
+        if (authHeader?.startsWith('Bearer ')) {
+            return authHeader.substring(7);
+        }
+        // Check query parameter
+        const url = req.url ?? '';
+        const urlObj = new URL(url, `http://${req.headers.host}`);
+        return urlObj.searchParams.get('token');
+    }
+    /**
+     * Stop the server
+     */
+    async stop() {
+        logger.info('WebSocketServer', 'Stopping server');
+        // Disconnect all clients
+        this.streamingService.disconnectAll();
+        // Close WebSocket server
+        if (this.wsServer) {
+            this.wsServer.close();
+            this.wsServer = null;
+        }
+        // Close HTTP server
+        if (this.httpServer) {
+            return new Promise(resolve => {
+                this.httpServer.close(() => {
+                    this.httpServer = null;
+                    logger.info('WebSocketServer', 'Server stopped');
+                    resolve();
+                });
+            });
+        }
+    }
+    /**
+     * Check if server is running
+     */
+    isRunning() {
+        return this.httpServer !== null;
+    }
+    /**
+     * Get server URL
+     */
+    getServerUrl() {
+        if (!this.isRunning()) {
+            throw new Error('Server is not running');
+        }
+        return `http://${this.config.host}:${this.config.port}`;
+    }
+}
+// Singleton instance
+let webSocketServerInstance = null;
+export function getWebSocketServer() {
+    if (!webSocketServerInstance) {
+        webSocketServerInstance = new WebSocketServerClass();
+    }
+    return webSocketServerInstance;
+}

package/dist/source/stores/player.store.js

@@ -8,6 +8,8 @@ import { getNotificationService } from "../services/notification/notification.se
 import { getScrobblingService } from "../services/scrobbling/scrobbling.service.js";
 import { getDiscordRpcService } from "../services/discord/discord-rpc.service.js";
 import { getMprisService } from "../services/mpris/mpris.service.js";
+import { getWebServerManager } from "../services/web/web-server-manager.js";
+import { getWebStreamingService } from "../services/web/web-streaming.service.js";
 const initialState = {
     currentTrack: null,
     isPlaying: false,
@@ -551,6 +553,28 @@ export function PlayerProvider({ children }) {
         // Only register handlers once, update via ref
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // Web streaming: Broadcast state changes to connected clients
+    useEffect(() => {
+        // Initialize web streaming service and set up command handler
+        const streamingService = getWebStreamingService();
+        // Set up handler for incoming commands from web clients
+        const unsubscribe = streamingService.onMessage(message => {
+            if (message.type === 'command') {
+                dispatch(message.action);
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [dispatch]);
+    // Broadcast state changes to web clients
+    useEffect(() => {
+        const webServerManager = getWebServerManager();
+        if (webServerManager.isServerRunning()) {
+            const streamingService = getWebStreamingService();
+            streamingService.onStateChange(state);
+        }
+    }, [state]);
     const actions = useMemo(() => ({
         play: (track) => {
             logger.info('PlayerProvider', 'play() action dispatched', {

package/dist/source/types/cli.types.d.ts

@@ -11,4 +11,12 @@ export interface Flags {
     showSuggestions?: boolean;
     headless?: boolean;
     action?: 'pause' | 'resume' | 'next' | 'previous';
+    importSource?: 'spotify' | 'youtube';
+    importUrl?: string;
+    importName?: string;
+    web?: boolean;
+    webHost?: string;
+    webPort?: number;
+    webOnly?: boolean;
+    webAuth?: string;
 }

package/dist/source/types/config.types.d.ts

@@ -1,5 +1,6 @@
 import type { Playlist } from './youtube-music.types.ts';
 import type { Theme } from './theme.types.ts';
+import type { WebServerConfig } from './web.types.ts';
 export type RepeatMode = 'off' | 'all' | 'one';
 export type DownloadFormat = 'mp3' | 'm4a';
 export interface KeybindingConfig {
@@ -34,4 +35,5 @@ export interface Config {
     downloadsEnabled?: boolean;
     downloadDirectory?: string;
     downloadFormat?: DownloadFormat;
+    webServer?: WebServerConfig;
 }

package/dist/source/types/import.types.d.ts

@@ -0,0 +1,72 @@
+import type { Track } from './youtube-music.types.ts';
+/** Supported import sources */
+export type ImportSource = 'spotify' | 'youtube';
+/** Import operation status */
+export type ImportStatus = 'idle' | 'fetching' | 'matching' | 'creating' | 'completed' | 'failed' | 'cancelled';
+/** Match confidence level */
+export type MatchConfidence = 'high' | 'medium' | 'low' | 'none';
+/** Import progress information */
+export interface ImportProgress {
+    status: ImportStatus;
+    current: number;
+    total: number;
+    currentTrack?: string;
+    message: string;
+}
+/** Track match result */
+export interface TrackMatch {
+    originalTrack: SpotifyTrack | YouTubeTrack;
+    matchedTrack: Track | null;
+    confidence: MatchConfidence;
+    error?: string;
+}
+/** Import result summary */
+export interface ImportResult {
+    playlistId: string;
+    playlistName: string;
+    source: ImportSource;
+    total: number;
+    matched: number;
+    failed: number;
+    matches: TrackMatch[];
+    errors: string[];
+    duration: number;
+}
+/** Spotify track data */
+export interface SpotifyTrack {
+    id: string;
+    name: string;
+    artists: string[];
+    album?: string;
+    duration: number;
+    trackNumber?: number;
+}
+/** Spotify playlist data */
+export interface SpotifyPlaylist {
+    id: string;
+    name: string;
+    description?: string;
+    tracks: SpotifyTrack[];
+    isPublic: boolean;
+    owner?: string;
+    url?: string;
+}
+/** YouTube track data (for import) */
+export interface YouTubeTrack {
+    id: string;
+    title: string;
+    name: string;
+    artists: string[];
+    album?: string;
+    duration: number;
+    thumbnail?: string;
+}
+/** YouTube playlist data (for import) */
+export interface YouTubePlaylist {
+    id: string;
+    name: string;
+    description?: string;
+    tracks: YouTubeTrack[];
+    channelTitle?: string;
+    url?: string;
+}

package/dist/source/types/import.types.js

@@ -0,0 +1,2 @@
+// Playlist import type definitions
+export {};

package/dist/source/types/web.types.d.ts

@@ -0,0 +1,89 @@
+import type { PlayerAction, PlayerState } from './player.types.ts';
+import type { ImportProgress, ImportResult } from './import.types.ts';
+/** WebSocket server message types */
+export type ServerMessage = StateUpdateMessage | EventMessage | ErrorMessage | AuthMessage | ImportProgressMessage | ImportResultMessage;
+/** Player state update message */
+export interface StateUpdateMessage {
+    type: 'state-update';
+    state: Partial<PlayerState>;
+}
+/** Event message for one-time events */
+export interface EventMessage {
+    type: 'event';
+    event: 'connected' | 'disconnected' | 'client-connected' | 'client-disconnected';
+    data?: unknown;
+}
+/** Error message from server */
+export interface ErrorMessage {
+    type: 'error';
+    error: string;
+    code?: string;
+}
+/** Authentication message */
+export interface AuthMessage {
+    type: 'auth';
+    success: boolean;
+    message?: string;
+}
+/** Import progress message */
+export interface ImportProgressMessage {
+    type: 'import-progress';
+    data: ImportProgress;
+}
+/** Import result message */
+export interface ImportResultMessage {
+    type: 'import-result';
+    data: ImportResult;
+}
+/** WebSocket client message types */
+export type ClientMessage = CommandMessage | AuthRequestMessage | ImportRequestMessage;
+/** Command message from client */
+export interface CommandMessage {
+    type: 'command';
+    action: PlayerAction;
+}
+/** Authentication request from client */
+export interface AuthRequestMessage {
+    type: 'auth-request';
+    token: string;
+}
+/** Import request from client */
+export interface ImportRequestMessage {
+    type: 'import-request';
+    source: 'spotify' | 'youtube';
+    url: string;
+    name?: string;
+}
+/** WebSocket client information */
+export interface WebSocketClient {
+    id: string;
+    authenticated: boolean;
+    connectedAt: number;
+    lastHeartbeat: number;
+}
+/** Web server configuration */
+export interface WebServerConfig {
+    enabled: boolean;
+    host: string;
+    port: number;
+    enableCors: boolean;
+    allowedOrigins: string[];
+    auth: {
+        enabled: boolean;
+        token?: string;
+    };
+}
+/** Web server options for CLI flags */
+export interface WebServerOptions {
+    enabled: boolean;
+    host?: string;
+    port?: number;
+    webOnly?: boolean;
+    auth?: string;
+}
+/** Server statistics */
+export interface ServerStats {
+    uptime: number;
+    clients: number;
+    totalConnections: number;
+}

package/dist/source/types/web.types.js

@@ -0,0 +1,2 @@
+// Web UI and WebSocket type definitions
+export {};

package/dist/source/utils/constants.d.ts

@@ -18,6 +18,7 @@ export declare const VIEW: {
     readonly KEYBINDINGS: "keybindings";
     readonly TRENDING: "trending";
     readonly EXPLORE: "explore";
+    readonly IMPORT: "import";
 };
 export declare const SEARCH_TYPE: {
     readonly ALL: "all";

package/dist/source/utils/constants.js

@@ -23,6 +23,7 @@ export const VIEW = {
     KEYBINDINGS: 'keybindings',
     TRENDING: 'trending',
     EXPLORE: 'explore',
+    IMPORT: 'import',
 };
 // Search types
 export const SEARCH_TYPE = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@involvex/youtube-music-cli",
-	"version": "0.0.18",
+	"version": "0.0.19",
 	"description": "- A Commandline music player for youtube-music",
 	"repository": {
 		"type": "git",
@@ -51,7 +51,10 @@
 		"typecheck": "tsc --noEmit",
 		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
 		"clean": "rimraf dist",
-		"release": "powershell -File scripts/release.ps1"
+		"release": "powershell -File scripts/release.ps1",
+		"build:web": "cd web && bun run build",
+		"dev:web": "cd web && bun run dev",
+		"build:all": "bun run build && bun run build:web"
 	},
 	"prettier": "@vdemedes/prettier-config",
 	"ava": {
@@ -73,7 +76,8 @@
 		"play-sound": "^1.1.6",
 		"react": "^19.2.4",
 		"youtube-ext": "^1.1.25",
-		"youtubei.js": "^16.0.1"
+		"youtubei.js": "^16.0.1",
+		"ws": "^8.18.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
@@ -81,6 +85,7 @@
 		"@types/node": "^25.2.3",
 		"@types/node-notifier": "^8.0.5",
 		"@types/react": "^19.2.14",
+		"@types/ws": "^8.5.13",
 		"@vdemedes/prettier-config": "^2.0.1",
 		"ava": "^6.4.1",
 		"chalk": "^5.6.2",