fix: fix youtube downloading "bad" file paths and video segmentation broken,

add support for 720p and 480p downloads

Author: seveibar

package.json

@@ -82,7 +82,7 @@
     "react-data-table-component": "^6.2.2",
     "react-dropzone": "^10.1.8",
     "react-icons": "^3.9.0",
-    "react-image-annotate": "^0.2.4",
+    "react-image-annotate": "^1.0.4",
     "react-scripts": "^3.4.1",
     "react-select": "^3.0.8",
     "rfc6902": "^3.0.4",

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

@@ -1,3 +1,9 @@
+const idify = (s) =>
+  s
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "_")
+    .replace(/_+/g, "_")
+
 export default ({
   youtubeUrl,
   title: videoTitle,
@@ -6,16 +12,16 @@ export default ({
   downloadPath,
   onProgress,
   onComplete,
-  overallProgress,
+  onChangeOverallProgress,
 }) => {
   let starttime = Date.now()
 
   const ytdl = remote.require("ytdl-core")
   const path = remote.require("path")
 
   const videoName = videoQuality.includes("audio")
-    ? `${videoTitle + ".mp3"}`
-    : `${videoTitle + ".mp4"}`
+    ? `${idify(videoTitle) + ".mp3"}`
+    : `${idify(videoTitle) + ".mp4"}`
 
   const fullVideoPath = path.join(downloadPath, videoName)
   const writableVideoFile = remote
@@ -53,7 +59,7 @@ export default ({
       progress: percent * 100,
     })
 
-    overallProgress(percent * 100)
+    onChangeOverallProgress(percent * 100)
   })
 
   youtubeVideoWithOptions.on("end", () => onComplete(fullVideoPath))

src/components/ImportFromYoutubeUrls/index.js

@@ -42,9 +42,12 @@ const CompletedVideoTitle = styled("h3")({
 })
 
 const qualityOptions = [
+  { value: "136", label: "720p" },
+  { value: "135", label: "480p" },
   { value: "lowestvideo", label: "Lowest Video Only" },
-  { value: "lowest", label: "lowest" },
-  { value: "highest", label: "Highest" },
+  // TODO these did not seem to work in a local test (missing video)
+  // { value: "lowest", label: "lowest" },
+  // { value: "highest", label: "Highest" },
   { value: "highestvideo", label: "Highest Video Only" },
   { value: "lowestaudio", label: "Lowest Audio Only" },
   { value: "highestaudio", label: "Highest Audio Only" },
@@ -54,7 +57,7 @@ const ImportFromYoutubeUrls = ({ open, onClose, onAddSamples }) => {
   const { remote } = useElectron() || {}
 
   const [urlsFromTextArea, setUrlsFromTextArea] = useState([])
-  const [videoQuality, setVideoQuality] = useState("lowest")
+  const [videoQuality, setVideoQuality] = useState(qualityOptions[0].value)
   const [downloadPath, setDownloadPath] = useState(null)
   const [error, setError] = useState(null)
 
@@ -136,7 +139,7 @@ const ImportFromYoutubeUrls = ({ open, onClose, onAddSamples }) => {
                   youtubeUrl: youtubeVideoInfo.url,
                   title: youtubeVideoInfo.title,
                   videoQuality,
-                  overallProgress: (currentProgress) =>
+                  onChangeOverallProgress: (currentProgress) =>
                     setOverallProgress(
                       ((completedVideoTitlesArray.length * 100 +
                         currentProgress) /