fix: import youtube urls on desktop v0.2.0 (#69)

* Added configurable dev mode url for remote server usage

* Restructured all download process

* Deleted unnecessery console.log

* Made total progress bar better, deleted current progress text, component cleaned with splitting up to new files, added collapsable list for downloaded videos

* Made pr prettier 🎉

* Added check for not showing 'information is loading' without isDownloading

Author: puskuruk

desktop/main.js

@@ -22,7 +22,8 @@ function createWindow() {
 
   // and load the index.html of the app.
   if (process.env.USE_DEV_SERVER) {
-    mainWindow.loadURL("http://localhost:6001")
+    // USAGE: DEV_SERVER_URL=https://e2a6dfb7.ngrok.io npm run start:desktop:dev
+    mainWindow.loadURL(process.env.DEV_SERVER_URL || "http://localhost:6001")
   } else {
     mainWindow.loadURL(
       formatUrl({

src/components/ImportFromYoutubeUrls/download-youtube-video.js

@@ -0,0 +1,66 @@
+export default ({
+  youtubeUrl,
+  title: videoTitle,
+  remote,
+  videoQuality,
+  downloadPath,
+  onProgress,
+  onComplete,
+  overallProgress,
+}) => {
+  let starttime = Date.now()
+
+  const ytdl = remote.require("ytdl-core")
+  const path = remote.require("path")
+
+  const videoName = videoQuality.includes("audio")
+    ? `${videoTitle + ".mp3"}`
+    : `${videoTitle + ".mp4"}`
+
+  const fullVideoPath = path.join(downloadPath, videoName)
+  const writableVideoFile = remote
+    .require("fs")
+    .createWriteStream(fullVideoPath)
+
+  const videoFormat = videoName.endsWith(".mp3") ? "audio/mp3" : "video/mp4"
+
+  const youtubeVideoWithOptions = ytdl(youtubeUrl, {
+    format: videoFormat,
+    quality: videoQuality !== null ? videoQuality : "highest",
+  })
+
+  youtubeVideoWithOptions.pipe(writableVideoFile)
+
+  youtubeVideoWithOptions.once("response", () => {
+    starttime = Date.now()
+  })
+
+  youtubeVideoWithOptions.on("progress", (chunkLength, downloaded, total) => {
+    const percent = downloaded / total
+    // const downloadedMinutes = (Date.now() - starttime) / 1000 / 60
+
+    // const downloadedPercentage = (percent * 100).toFixed(2)
+    // const downloadedSize = (downloaded / 1024 / 1024).toFixed(2)
+    // const downloadedMBs = (
+    //   downloaded /
+    //   1024 /
+    //   1024
+    // ).toFixed(2)
+    // const totalSize = (total / 1024 / 1024).toFixed(2)
+    // const informationText = `${downloadedPercentage}% downloaded (${downloadedMBs}MB of ${totalSize}MB)\nestimated time left: ${(downloadedMinutes / percent -downloadedMinutes).toFixed(2)}minutes`
+
+    onProgress({
+      progress: percent * 100,
+    })
+
+    overallProgress(percent * 100)
+  })
+
+  youtubeVideoWithOptions.on("end", () => onComplete(fullVideoPath))
+
+  return {
+    cancel: () => {
+      youtubeVideoWithOptions.destroy()
+    },
+  }
+}

src/components/ImportFromYoutubeUrls/get-youtube-video-information.js

@@ -0,0 +1,34 @@
+const getYoutubeVideoInformation = async (
+  remote,
+  splittedURLsArray,
+  progressCallback = () => null
+) => {
+  const ytdl = remote.require("ytdl-core")
+  const checkedVideos = []
+  if (splittedURLsArray.length > 0) {
+    for (let i = 0; i < splittedURLsArray.length; i++) {
+      const url = splittedURLsArray[i]
+      const video = await new Promise((resolve, reject) => {
+        ytdl.getBasicInfo(url, (err, info) => {
+          if (info && !err) {
+            resolve({
+              url,
+              title: info.title,
+            })
+          } else {
+            const errorText = `Error with video at "${url}"\n\n${err.toString()}`
+            reject(new Error(errorText))
+          }
+        })
+      })
+      checkedVideos.push(video)
+      progressCallback({
+        progress: (i / (splittedURLsArray.length - 1)) * 100,
+        text: "Inspecting Video Information...",
+      })
+    }
+  }
+  return checkedVideos
+}
+
+export default getYoutubeVideoInformation