feat: set video location and format, download using bestvideo and --merge-output-format webm/mp4

Author: christian-fei

client/components/video-element.js

@@ -91,7 +91,7 @@ class VideoElement extends HTMLElement {
   watchVideoHandler (event) {
     event.preventDefault()
     this.querySelector('.play.video-placeholder').outerHTML = /*html*/`<video controls width="400">
-      <source src="/videos/${this.video.id}" type="video/mp4" />
+      <source src="/videos/${this.video.id}" type="video/${this.video.format}" />
       <track
         default
         kind="captions"

lib/repository.js

@@ -30,9 +30,13 @@ export default class Repository {
     }
 
     fs.readdirSync(`${this.basePath}/videos`).forEach(file => {
-      if (!file.endsWith('.mp4') || file.endsWith('.uncut.mp4')) return
-      const videoId = file.replace('.mp4', '')
-      this.setVideoDownloaded(videoId)
+      const format = file.substring(file.lastIndexOf('.') + 1)
+      if (!['mp4', 'webm'].includes(format)) return
+      if (file.includes('.uncut.')) return
+      const videoId = file.replace('.mp4', '').replace('.webm', '')
+      if (videoId.includes('.')) return // skip formats
+      const location = `${this.basePath}/videos/${file}`
+      this.updateVideo(videoId, {downloaded: true, location, format})
     })
     this.saveVideos()
   }

lib/server.js

@@ -187,8 +187,11 @@ export function createServer ({repo, connections = []}) {
   }
 
   function watchVideoHandler(req, res) {
-    const videoPath = './data' + req.url + '.mp4'
-    if (!fs.existsSync(videoPath)) {
+    const id = req.url.replace('/videos/', '')
+    const video = repo.getVideo(id)
+    const location = video.location || `./data/videos/${id}.mp4`
+    const contentType = video.format ? `video/${video.format}` : "video/mp4"
+    if (!fs.existsSync(location)) {
       res.writeHead(404, { 'Content-Type': 'text/plain' })
       res.end('Video not found')
       return
@@ -218,8 +221,8 @@ export function createServer ({repo, connections = []}) {
         }
       }
     }
-    res.setHeader("content-type", "video/mp4")
-    const stat = fs.statSync(videoPath)
+    res.setHeader("content-type", contentType)
+    const stat = fs.statSync(location)
 
     let contentLength = stat.size
 
@@ -246,9 +249,9 @@ export function createServer ({repo, connections = []}) {
         res.setHeader("accept-ranges", "bytes")
       }
 
-      const fileStream = fs.createReadStream(videoPath, options)
+      const fileStream = fs.createReadStream(location, options)
       fileStream.on("error", error => {
-        console.log(`Error reading file ${videoPath}.`)
+        console.log(`Error reading file ${location}.`)
         console.log(error)
         res.writeHead(500)
         res.end()

lib/youtube.js

@@ -8,7 +8,7 @@ const fetchYoutubeHeaders = {
   'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36'
 }
 const subtitlesYTDLPArgs = `--write-subs --write-auto-subs --sub-format vtt --convert-subs srt -k`
-const videoYTDLPArgs = `--concurrent-fragments 5 -f best[ext=mp4] --sponsorblock-remove sponsor`
+const videoYTDLPArgs = `--concurrent-fragments 5 --merge-output-format webm/mp4 -f bestvideo[height<=480]+bestaudio/best[height<=480] --sponsorblock-remove sponsor`
 
 function getOptionalCookiesPath() {
   if (fs.existsSync('/app/cookies.txt')) return '/app/cookies.txt'
@@ -25,22 +25,31 @@ export async function downloadVideo(id, repo, callback = () => {}) {
     try {
       const cookiesPath = getOptionalCookiesPath()
       let cookiesOption = cookiesPath ? `--cookies ${cookiesPath}` : ''
-      const commandArgs = `-o ./data/videos/${id}.mp4 ${cookiesOption} ${videoYTDLPArgs} ${subtitlesYTDLPArgs} -- ${id}`.split(/ +/)
+      const commandArgs = `-o ./data/videos/${id}.%(ext)s ${cookiesOption} ${videoYTDLPArgs} ${subtitlesYTDLPArgs} -- ${id}`.split(/ +/)
       console.log('running yt-dlp', commandArgs.join(' '))
+      let location, format
       for await (const line of spawn('yt-dlp', commandArgs)) {
         console.log(line)
         callback(line)
+        if (line.startsWith('[Merger] Merging formats into')) {
+          location = line.substring(line.lastIndexOf(' ') + 1).replace(/"/g,'')
+          format = location.substring(location.lastIndexOf('.') + 1)
+        }
       }
+      console.log('downloaded file to', location)
 
       if (!repo.getVideo(id)) {
         const video = await getVideo(id)
+        video.location = location
+        video.format = format
         repo.upsertVideos([video])
         callback(`downloaded external video ${id}`)
       }
+
+      repo.updateVideo(id, {downloaded: true, location, format})
 
       normalizeSubtitleFiles(id)
 
-      repo.setVideoDownloaded(id)
       console.log('Download completed')
       resolve(id)
     } catch (error) {