https://github.com/franklioxygen/mytube
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.
https://github.com/franklioxygen/mytube
bilibili bilibili-download docker nas video-hosting video-player youtube youtube-dl youtube-downloader
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/franklioxygen/mytube
- Owner: franklioxygen
- Created: 2025-03-09T03:33:55.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-03-21T14:09:07.000Z (8 months ago)
- Last Synced: 2025-10-07T07:35:09.592Z (about 2 months ago)
- Topics: bilibili, bilibili-download, docker, nas, video-hosting, video-player, youtube, youtube-dl, youtube-downloader
- Language: JavaScript
- Homepage:
- Size: 180 KB
- Stars: 45
- Watchers: 1
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MyTube
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.
[中文](README-zh.md)
## Features
- 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 videos to multiple collections
- Responsive design that works on all devices
## Directory Structure
```
mytube/
├── backend/ # Express.js backend
│ ├── uploads/ # Uploaded files directory
│ │ ├── videos/ # Downloaded videos
│ │ └── images/ # Downloaded thumbnails
│ └── server.js # Main server file
├── frontend/ # React.js frontend
│ ├── src/ # Source code
│ │ ├── components/ # React components
│ │ └── pages/ # Page components
│ └── index.html # HTML entry point
├── start.sh # Unix/Mac startup script
├── start.bat # Windows startup script
└── package.json # Root package.json for running both apps
```
## Getting Started
### Prerequisites
- Node.js (v14 or higher)
- npm (v6 or higher)
### Installation
1. Clone the repository:
```
git clone
cd mytube
```
2. Install dependencies:
```
npm install
cd frontend && npm install
cd ../backend && npm install
```
This will install dependencies for the root project, frontend, and backend.
#### Using npm Scripts
Alternatively, you can use npm scripts:
```
npm run dev # Start both frontend and backend in development mode
```
Other available scripts:
```
npm run start # Start both frontend and backend in production mode
npm run build # Build the frontend for production
```
### Accessing the Application
- Frontend: http://localhost:5556
- Backend API: http://localhost:5551
## API Endpoints
- `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 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
## User Interface
The application features a modern, dark-themed UI with:
- Responsive design that works on desktop and mobile devices
- Video grid layout for easy browsing
- Video player with collection management
- Author and collection filtering
- Search functionality for finding videos
## Environment Variables
The application uses environment variables for configuration. Here's how to set them up:
### Frontend (.env file in frontend directory)
```
VITE_API_URL=http://localhost:5551/api
VITE_BACKEND_URL=http://localhost:5551
VITE_APP_PORT=5556
```
### Backend (.env file in backend directory)
```
PORT=5551
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.
## License
MIT