From c229636910deece5c6ec8ad5d66ec335300820f6 Mon Sep 17 00:00:00 2001
From: Ricky Z <107789200+Rikidink@users.noreply.github.com>
Date: Sat, 23 Nov 2024 04:39:53 +1100
Subject: [PATCH] Create README.md
---
README.md | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 115 insertions(+)
create mode 100644 README.md
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..381e16f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,115 @@
+# YouTube Video Downloader Electron Desktop App
+
+
+
+## Built using:
+- Vite + React + Joy UI Components (Frontend)
+- NodeJS + Express (Backend REST Api)
+- Electron (Desktop app)
+
+The app was first made as a traditional web app using React and Express communicated through REST Api calls.
+
+The desktop app is currently just for Windows (I haven't actually tested it on other platforms but electron-packager should have OS-specific options).
+
+Functionally, the app utilises two main dependencies:
+- [distubejs/ytdl-core](https://github.com/distubejs/ytdl-core) (YouTube downloader node module)
+- [ffmpeg](https://www.ffmpeg.org/) (video + audio processing software) which is interfaced using the fluent-ffmpeg node module
+
+YouTube "videos" are actually formed by their respective video and audio counterparts so these parts are individually downloaded by ytdl-core and are combined using ffmpeg.
+As a result **ffmpeg.exe** needs to be dowwnloaded externally from the ffmpeg website and added in a folder named "ffmpeg" in the backend directory (and electron directory if building the desktop app from source).
+
+For sake of categorisation, the electron directory is basically a copy and paste of the backend along with a static build of the frontend and the main.js electron entry point file.
+I just thought it'd be nice to have every seperate component of the app in different folders :)
+
+## Usage:
+It's pretty straightforward, just input the url and press the get resolutions button.
+
+From there, you can see the available resolutions for the video (the app supports all resolutions up to and including 4k/2160p!).
+
+Press download and the video gets downloaded depending on if using the web app or desktop app:
+
+#### Desktop app:
+Downloaded into the `resources/app/` folder (look for the `.mp4` file with the video title).
+
+#### Web app:
+Downloaded into the backend folder.
+
+**NOTE:** It might take a little while for longer videos at resolutions greater than 1080p, this is because merging audio + video just takes a long time :(
+
+
+
+
+## Build/Run:
+
+### Desktop app (packaged zip file)
+1. Download the zipped app file in the releases.
+2. Extract it and go into the app folder.
+3. Run `RYTDL.exe`
+(The zipped app includes ffmpeg so no need to download it)
+
+### Traditional Web App:
+1. Install node modules for frontend and backend:
+```bash
+cd frontend
+npm install
+
+cd ../backend
+npm install
+```
+2. Install [ffmpeg](https://www.ffmpeg.org/) and place ffmpeg.exe into a ffmpeg folder in the backend.
+3. Run the backend and frontend in seperate terminals
+```bash
+# backend
+node index.js
+
+# frontend (in a seperate terminal)
+npm run dev
+```
+4. Go to `localhost:5173` in a browser and you should see the interface.
+
+---
+
+### Desktop app (Electron)
+1. Install node modules for the electron app:
+```bash
+cd electron
+npm install
+```
+2. Install [ffmpeg](https://www.ffmpeg.org/) and place ffmpeg.exe into a ffmpeg folder in the electron folder.
+3. Run the Electron app using `npx electron .` OR package it into an executable app with `npx electron-packager .`
+4. The interface should pop up in a desktop window if just running it using `npx electron .`, otherwise, a folder containing the `.exe` for the app will be created if packaged.
+
+## Implementation Notes/Details:
+- The static build of the frontend is included in the electron folder (but not in the frontend folder). If you want to build the frontend yourself using `npm run build` you'll have to modify the `index.html` for it to work with Electron.
+On line 8 and 9 where it says `src="/assets/index-Ccy0lpz4.js"` and `href="/assets/index-Cp3wgTPn.css"`, you must remove the prefixed `/` on the `/assets` so after removing it should look like this:
+```html
+
+
+
+
+
+
+ Youtube Downloader
+
+
+
+
+
+
+
+```
+After that, you can copy and paste the `dist` folder into the Electron folder for it to display the interface. I'm pretty sure there is a way to prevent this without manually modifying it but after trying a couple methods I found online, I gave up.
+
+- _Why does the downloaded video get downloaded to `resources/app/` in the desktop app and not somewhere more convenient?_
+It should be possible for user custom download path if the user inputs the full path to the folder in the interface which is then given to the backend but I wanted to do it through a dialog window by using
+[window.showDirectoryPicker()](https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker)
+but I believe its impossible because of security issues. I probably will implement the manual download path though.
+
+- _Having the API and frontend both in the Electron app seems weird..._
+Yes, it's pretty scuffed. If you take a look in the `main.js` file in the Electron app you'll see that the backend is actually run as a seperate node process that is forked from the main Electron node process.
+Optimally, the Electron app would have just been the frontend that made calls to the API that is externally hosted somewhere else but I really didn't want to host it somewhere.
+I could have also had the backend and frontend run in Electron's main and renderer processes but I would have had to redesign the whole backend to use IPC communication instead of HTTP requests.
+
+
+
+