feat: Add Bilibili video download support and frontend build fix

README.md

@@ -2,26 +2,20 @@
 
 A YouTube/Bilibili video downloader and player application that allows you to download and save YouTube/Bilibili videos locally, along with their thumbnails. Organize your videos into collections for easy access and management.
 
-
-
 ![Mar-08-2025 22-51-31](https://github.com/user-attachments/assets/1ca764ce-2787-4611-a5b6-a5f70413ea52)
 
 ![Screenshot 2025-03-08 at 11 12 54 PM](https://github.com/user-attachments/assets/434adbdf-4b08-4641-86e3-c43c1592aea6)
 ![Screenshot 2025-03-08 at 11 13 01 PM](https://github.com/user-attachments/assets/2b38a711-da32-4fc5-baa5-be66e3b8dcfa)
 ![Screenshot 2025-03-08 at 11 13 16 PM](https://github.com/user-attachments/assets/7d010b67-6dac-45db-82d2-b9620915e2e2)
 
-
-
-
-
 ## Features
 
-- Download YouTube videos with a simple URL input
+- Download YouTube and Bilibili videos with a simple URL input
 - Automatically save video thumbnails
 - Browse and play downloaded videos
 - View videos by specific authors
 - Organize videos into collections
-- Add or remove videos from collections
+- Add videos to multiple collections
 - Responsive design that works on all devices
 
 ## Directory Structure
@@ -62,7 +56,9 @@ mytube/
 2. Install dependencies:
 
    ```
-   npm run install:all
+   npm install
+   cd frontend && npm install
+   cd ../backend && npm install
    ```
 
    This will install dependencies for the root project, frontend, and backend.
@@ -84,25 +80,31 @@ npm run build     # Build the frontend for production
 
 ### Accessing the Application
 
-- Frontend: http://localhost:5556
-- Backend API: http://localhost:5551
+- Frontend: http://localhost:3000
+- Backend API: http://localhost:5000
 
 ## API Endpoints
 
-- `POST /api/download` - Download a YouTube video
+- `POST /api/download/youtube` - Download a YouTube video
+- `POST /api/download/bilibili` - Download a Bilibili video
 - `GET /api/videos` - Get all downloaded videos
 - `GET /api/videos/:id` - Get a specific video
 - `DELETE /api/videos/:id` - Delete a video
+- `GET /api/collections` - Get all collections
+- `POST /api/collections` - Create a new collection
+- `PUT /api/collections/:id` - Update a collection
+- `DELETE /api/collections/:id` - Delete a collection
+- `POST /api/collections/:id/videos` - Add a video to a collection
+- `DELETE /api/collections/:id/videos/:videoId` - Remove a video from a collection
 
 ## Collections Feature
 
 MyTube allows you to organize your videos into collections:
 
 - **Create Collections**: Create custom collections to categorize your videos
-- **Add to Collections**: Add videos to collections directly from the video player
+- **Add to Collections**: Add videos to one or more collections directly from the video player
 - **Remove from Collections**: Remove videos from collections with a single click
 - **Browse Collections**: View all your collections in the sidebar and browse videos by collection
-- **Note**: A video can only belong to one collection at a time
 
 ## User Interface
 
@@ -121,14 +123,19 @@ The application uses environment variables for configuration. Here's how to set
 ### Frontend (.env file in frontend directory)
 
 ```
-VITE_API_URL=http://{host}:{backend_port}/api
-VITE_BACKEND_URL=http://{host}:{backend_port}
+VITE_API_URL=http://localhost:5000/api
+VITE_BACKEND_URL=http://localhost:5000
+VITE_APP_PORT=3000
 ```
 
 ### Backend (.env file in backend directory)
 
 ```
-PORT={backend_port}
+PORT=5000
+UPLOAD_DIR=uploads
+VIDEO_DIR=uploads/videos
+IMAGE_DIR=uploads/images
+MAX_FILE_SIZE=500000000
 ```
 
 Copy the `.env.example` files in both frontend and backend directories to create your own `.env` files and replace the placeholders with your desired values.

backend/data/status.json

@@ -1,5 +1,5 @@
 {
   "isDownloading": false,
   "title": "",
-  "timestamp": 1741836609758
+  "timestamp": 1742524470654
 }

frontend/src/App.css

@@ -184,8 +184,7 @@ body {
   box-shadow: var(--shadow);
   transition: box-shadow 0.2s;
   color: inherit;
-  height: 330px;
-  /* max-height: 400px; */
+  min-height: 290px;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--border-color);