@supasayan/ytm 1.0.0

package/client/src/pages/SearchPage.jsx

@@ -0,0 +1,63 @@
+import { useSearch } from '../hooks/useSearch';
+import { useEffect, useState, useCallback } from 'react';
+import SearchBar from '../components/Search/SearchBar';
+import SearchResults from '../components/Search/SearchResults';
+
+export default function SearchPage({ outputDir, onDownload, onFlyAnimation, downloads, onPlay, currentSong, searchQueryPreset, onClearPreset }) {
+  const { results, isLoading, error, search } = useSearch();
+  const [isDefaultTrending, setIsDefaultTrending] = useState(true);
+
+  // Load world top trending English songs by default on mount
+  useEffect(() => {
+    search('Trending English Songs');
+  }, [search]);
+
+  // Sync state if searchQueryPreset is injected
+  useEffect(() => {
+    if (searchQueryPreset) {
+      setIsDefaultTrending(false);
+    }
+  }, [searchQueryPreset]);
+
+  const handleDownload = (song) => {
+    onDownload(song, outputDir);
+  };
+
+  const handleSearch = useCallback((query) => {
+    if (!query.trim()) {
+      setIsDefaultTrending(true);
+      search('Trending English Songs');
+    } else {
+      setIsDefaultTrending(false);
+      search(query);
+    }
+  }, [search]);
+
+  return (
+    <div className="search-page">
+      <SearchBar 
+        onSearch={handleSearch} 
+        searchQueryPreset={searchQueryPreset}
+        onClearPreset={onClearPreset}
+        isLoading={isLoading}
+      />
+      
+      {error && (
+        <div className="error-message">
+          <p>⚠️ {error}</p>
+        </div>
+      )}
+
+      <SearchResults 
+        results={results} 
+        isLoading={isLoading} 
+        onDownload={handleDownload}
+        onFlyAnimation={onFlyAnimation}
+        downloads={downloads}
+        onPlay={onPlay}
+        currentSong={currentSong}
+        isDefaultTrending={isDefaultTrending}
+      />
+    </div>
+  );
+}

package/client/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "module": "esnext",
+    "lib": ["ES2023", "DOM"],
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/client/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:3001'
+    }
+  }
+})

package/main.js

@@ -0,0 +1,79 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const { fork } = require('child_process');
+
+let serverProcess = null;
+let mainWindow = null;
+
+function startBackend() {
+  const serverPath = path.join(__dirname, 'server/index.js');
+  
+  // Fork the Express backend process
+  serverProcess = fork(serverPath, [], {
+    env: {
+      ...process.env,
+      NODE_ENV: 'production',
+      PORT: '3001'
+    }
+  });
+
+  serverProcess.on('exit', (code, signal) => {
+    console.log(`Backend process exited with code ${code} and signal ${signal}`);
+  });
+
+  serverProcess.on('error', (err) => {
+    console.error('Backend process error:', err);
+  });
+}
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    title: 'YTM',
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true
+    }
+  });
+
+  const isDev = !app.isPackaged;
+  
+  const loadURL = () => {
+    const url = isDev ? 'http://127.0.0.1:5173' : 'http://127.0.0.1:3001';
+    mainWindow.loadURL(url).catch((err) => {
+      console.log(`Frontend port not ready yet, retrying in 200ms...`);
+      setTimeout(loadURL, 200);
+    });
+  };
+
+  loadURL();
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+app.whenReady().then(() => {
+  startBackend();
+  createWindow();
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('will-quit', () => {
+  if (serverProcess) {
+    console.log('[Electron] Killing backend child process...');
+    serverProcess.kill('SIGTERM');
+  }
+});

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@supasayan/ytm",
+  "version": "1.0.0",
+  "description": "Root package to run both client and server",
+  "main": "main.js",
+  "productName": "YTM",
+  "bin": {
+    "ytm": "./bin/cli.js"
+  },
+  "scripts": {
+    "start": "npx concurrently \"npm run start --prefix server\" \"npm run dev --prefix client\"",
+    "dev": "npx concurrently \"npm run dev --prefix server\" \"npm run dev --prefix client\"",
+    "install-all": "npm install --prefix server && npm install --prefix client",
+    "app:dev": "npx concurrently \"npm run dev --prefix server\" \"npm run dev --prefix client\" \"npx wait-on http://localhost:5173 && npx wait-on http://localhost:3001 && npx electron .\"",
+    "app:build": "npm run build --prefix client && npx electron-builder --mac"
+  },
+  "build": {
+    "appId": "com.sayan.ytm",
+    "productName": "YTM",
+    "directories": {
+      "output": "dist-app"
+    },
+    "mac": {
+      "target": [
+        "dmg"
+      ],
+      "category": "public.app-category.music"
+    },
+    "dmg": {
+      "title": "Install YTM"
+    },
+    "asar": true,
+    "asarUnpack": [
+      "**/node_modules/ffmpeg-static/**/*"
+    ],
+    "files": [
+      "main.js",
+      "server/**/*",
+      "client/dist/**/*",
+      "package.json"
+    ]
+  },
+  "devDependencies": {
+    "electron": "^43.1.0",
+    "electron-builder": "^26.15.3",
+    "wait-on": "^9.0.10"
+  }
+}

package/server/index.js

@@ -0,0 +1,54 @@
+import express from 'express';
+import cors from 'cors';
+import path from 'path';
+import os from 'os';
+import { fileURLToPath } from 'url';
+
+import searchRoutes from './routes/search.js';
+import playlistRoutes from './routes/playlist.js';
+import downloadRoutes from './routes/download.js';
+import browseRoutes from './routes/browse.js';
+import streamRoutes from './routes/stream.js';
+import playLocalRoutes from './routes/playLocal.js';
+import { checkAndSetupDependencies, getDependencyStatus } from './utils/dependencyChecker.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Serve static assets from the client build folder in production
+const clientDistPath = path.join(__dirname, '../client/dist');
+app.use(express.static(clientDistPath));
+
+// Routes
+app.use('/api/search', searchRoutes);
+app.use('/api/playlist', playlistRoutes);
+app.use('/api/download', downloadRoutes);
+app.use('/api/browse', browseRoutes);
+app.use('/api/stream', streamRoutes);
+app.use('/api/play-local', playLocalRoutes);
+
+// System Check Endpoint
+app.get('/api/system-check', (req, res) => {
+  res.json({
+    ...getDependencyStatus(),
+    defaultOutputDir: path.join(os.homedir(), 'Downloads')
+  });
+});
+
+// Fallback for Single Page App routing (redirect all non-api routes to index.html)
+app.get('*', (req, res) => {
+  res.sendFile(path.join(clientDistPath, 'index.html'));
+});
+
+app.listen(PORT, async () => {
+  console.log(`YTMDownloader Backend running on http://127.0.0.1:${PORT}`);
+  // Run async setup check
+  await checkAndSetupDependencies();
+});