feat: download quality

Author: christian-fei

client/index.html

@@ -68,6 +68,22 @@ <h2>Settings </h2>
         <div><small>Show the creators chosen thumbnail, or a neutral one based on the actual video frames</small></div>
       </form>
       <br>
+      <form>
+        <div class="flex space-between">
+          <div>
+            Video quality
+          </div>
+          <select name="video-quality" id="video-quality">
+            <option value="360">360</option>
+            <option value="480">480</option>
+            <option value="720">720</option>
+            <option value="1080">1080</option>
+            <option value="1440">1440</option>
+            <option value="2160">2160</option>
+          </select>
+        </div>
+      </form>
+      <br>
       <form>
         <div class="flex space-between">
           <div>

client/lib/router.js

@@ -69,6 +69,29 @@ const routes = {
     $showOriginalThumbnail.addEventListener('click', (event) => {
       store.toggle(store.showOriginalThumbnailKey)
     })
+
+    const $videoQuality = document.getElementById('video-quality')
+    $videoQuality.addEventListener('change', (event) => {
+      console.log('change video quality', event.target.value)
+      window.fetch('/api/video-quality', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: event.target.value
+      })
+    })
+    window.fetch('/api/video-quality', {
+      method: 'GET'
+    }).then(response => response.json())
+    .then((videoQuality) => {
+      console.log('video quality', videoQuality)
+      $videoQuality.value = +videoQuality
+    })
+    .catch(error => console.error('Error:', error))
+
+
+
 
     const $reclaimDiskSpace = document.getElementById('reclaim-disk-space')
     const $diskUsage = document.getElementById('disk-usage')

lib/repository.js

@@ -8,6 +8,7 @@ export default class Repository {
     this.paths = {
       videos: `${this.basePath}/videos.json`,
       channels: `${this.basePath}/channels.json`,
+      settings: `${this.basePath}/settings.json`
     }
 
     fs.mkdirSync(`${this.basePath}/videos`, { recursive: true })
@@ -19,12 +20,18 @@ export default class Repository {
       console.log('initializing ', this.paths.channels)
       fs.writeFileSync(this.paths.channels, '[]')
     }
+    if (!fs.existsSync(this.paths.settings)) {
+      console.log('initializing ', this.paths.settings)
+      fs.writeFileSync(this.paths.settings, JSON.stringify({"videoQuality":720}, null, 2))
+    }
 
     try {
       this.videos = JSON.parse(fs.readFileSync(this.paths.videos))
       console.log('read videos', this.videos.length)
       this.channels = JSON.parse(fs.readFileSync(this.paths.channels))
       console.log('read channels', this.channels.length)
+      this.settings = JSON.parse(fs.readFileSync(this.paths.settings))
+      console.log('read settings', this.settings)
     } catch (err) {
       console.error(err)
     }
@@ -53,6 +60,10 @@ export default class Repository {
     fs.writeFileSync(this.paths.channels, JSON.stringify(this.channels, null, 2))
     console.log('saving channels', this.channels.length)
   }
+  saveSettings() {
+    fs.writeFileSync(this.paths.settings, JSON.stringify(this.settings, null, 2))
+    console.log('saving settings', this.settings)
+  }
   getVideos () {
     const videos = this.videos
     .sort((a, b) => +new Date(b.publishedAt) - +new Date(a.publishedAt))
@@ -142,4 +153,16 @@ export default class Repository {
     if (this.getVideo(video.id)) return video
     return Object.assign(video, {addedAt: Date.now()})
   }
+  getVideoQuality() {
+    return this.settings.videoQuality
+  }
+  setVideoQuality(videoQuality) {
+    if ([360, 480, 720, 1080, 1440, 2160].includes(videoQuality)) {
+      this.settings.videoQuality = videoQuality
+      this.saveSettings()
+    } else {
+      console.log('Invalid video quality', videoQuality)
+    }
+    return this.settings.videoQuality
+  }
 }

lib/server.js

@@ -48,14 +48,18 @@ export function createServer ({repo, connections = []}) {
       return deleteVideoHandler(req, res, repo, connections)
     if (url.pathname === '/api/videos' && req.method === 'GET') 
       return allVideosHandler(req, res, repo, connections)
-    if (url.pathname.match(/\/videos\/.*/) && req.method === 'GET') 
-      return watchVideoHandler(req, res)
-    if (url.pathname.match(/\/captions\/.*/) && req.method === 'GET') 
-      return captionsHandler(req, res)
+    if (url.pathname === '/api/video-quality' && req.method === 'GET') 
+      return getVideoQualityHandler(req, res, repo, connections)
+    if (url.pathname === '/api/video-quality' && req.method === 'POST') 
+      return setVideoQualityHandler(req, res, repo, connections)
     if (url.pathname === '/api/disk-usage' && req.method === 'GET') 
       return diskUsageHandler(req, res, repo, connections)
     if (url.pathname === '/api/reclaim-disk-space' && req.method === 'POST') 
       return reclaimDiskSpaceHandler(req, res, repo, connections)
+    if (url.pathname.match(/\/videos\/.*/) && req.method === 'GET') 
+      return watchVideoHandler(req, res)
+    if (url.pathname.match(/\/captions\/.*/) && req.method === 'GET') 
+      return captionsHandler(req, res)
 
     /* client */
     if (url.pathname === '/main.css') 
@@ -222,6 +226,8 @@ export function createServer ({repo, connections = []}) {
       }
     }
     res.setHeader("content-type", contentType)
+    // bust cache
+    res.setHeader('cache-control', 'public, max-age=0')
     const stat = fs.statSync(location)
 
     let contentLength = stat.size
@@ -267,6 +273,24 @@ export function createServer ({repo, connections = []}) {
     res.end(JSON.stringify(videos))
   }
 
+  function getVideoQualityHandler(req, res) {
+    const videoQuality = repo.getVideoQuality()
+    res.writeHead(200, { 'Content-Type': 'application/json' })
+    res.end(JSON.stringify(videoQuality))
+  }
+  async function setVideoQualityHandler(req, res) {
+    const body = await getBody(req)
+    const videoQuality = JSON.parse(body)
+
+    const newQuality = repo.setVideoQuality(videoQuality)
+    if (!newQuality) {
+      res.writeHead(400)
+      return res.end()
+    }
+    res.writeHead(200, { 'Content-Type': 'application/json' })
+    res.end(JSON.stringify(newQuality))
+  }
+
   function diskUsageHandler(req, res) {
     const videos = repo.getVideos()
     const ignoredVideos = videos.filter(video => video.downloaded)

lib/youtube.js

@@ -8,7 +8,8 @@ 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 --merge-output-format webm/mp4 -f bestvideo[height<=720]+bestaudio/best[height<=720] --sponsorblock-remove sponsor`
+const videoYTDLPArgs = quality => `--concurrent-fragments 5 --merge-output-format webm/mp4 -f bestvideo[height<=${quality}]+bestaudio/best[height<=${quality}] --sponsorblock-remove sponsor`
+
 
 function getOptionalCookiesPath() {
   if (fs.existsSync('/app/cookies.txt')) return '/app/cookies.txt'
@@ -25,7 +26,8 @@ export async function downloadVideo(id, repo, callback = () => {}) {
     try {
       const cookiesPath = getOptionalCookiesPath()
       let cookiesOption = cookiesPath ? `--cookies ${cookiesPath}` : ''
-      const commandArgs = `-o ./data/videos/${id}.%(ext)s ${cookiesOption} ${videoYTDLPArgs} ${subtitlesYTDLPArgs} -- ${id}`.split(/ +/)
+      const quality = repo.getVideoQuality()
+      const commandArgs = `-o ./data/videos/${id}.%(ext)s ${cookiesOption} ${videoYTDLPArgs(quality)} ${subtitlesYTDLPArgs} -- ${id}`.split(/ +/)
       console.log('running yt-dlp', commandArgs.join(' '))
       let location, format
       for await (const line of spawn('yt-dlp', commandArgs)) {

test/repository.test.js

@@ -98,4 +98,12 @@ test('updates single video by id', () => {
   repo.upsertVideos(video1)
   const updatedVideo = repo.updateVideo(video1.id, { title: 'Updated Title' })
   assert.equal(updatedVideo.title, 'Updated Title')
+})
+
+test('gets video quality', () => {
+  assert.equal(repo.getVideoQuality(), 720)
+})
+test('sets video quality', () => {
+  assert.ok(repo.setVideoQuality(1080))
+  assert.equal(repo.getVideoQuality(), 1080)
 })