Merge pull request #3 from Leonetienne/develop

Added support to download specific video qualities/resolutions
2021-03-13 19:01:27 +01:00 · 2021-03-13 19:01:27 +01:00 · 683ed00a53
commit 683ed00a53
parent 8c2b620da5 2914c3762b
31 changed files with 395 additions and 102 deletions
--- a/Tubio/DownloadManager.cpp
+++ b/Tubio/DownloadManager.cpp
@ -17,22 +17,28 @@ void DownloadManager::PreInit()
 	return;
 }

-std::string DownloadManager::QueueDownload(std::string url, DOWNLOAD_MODE mode)
+std::string DownloadManager::QueueDownload(std::string url, DOWNLOAD_MODE mode, DOWNLOAD_QUALITY quality)
 {	
+	// Create uniquie tubio id
 	std::string tubioId = CreateNewTubioID();
-	FetchInformation(url, tubioId);

+	// Fetch metadata
+	FetchInformation(url, tubioId);
 	std::string jsString = FileSystem::ReadFile(XGConfig::downloader.cachedir + "/metadata/" + tubioId + ".json");

+	// Create download entry structure
 	DownloadEntry newDownload;
 	newDownload.tubio_id = tubioId;
 	newDownload.mode = mode;
+	newDownload.quality = quality;
 	newDownload.download_progress = 0;
 	newDownload.queued_timestamp = time(0);
-	newDownload.download_url = "/download/" + newDownload.tubio_id;
+	newDownload.download_url = "download/" + newDownload.tubio_id;

+	// Check for missing dependencies
 	WarnIfMissingDependenciesWIN();

+	// Interpret metadata
 	if (!IsJsonValid(jsString))
 	{
 		newDownload.status = DOWNLOAD_STATUS::FAILED;
@ -92,6 +98,7 @@ std::string DownloadManager::QueueDownload(std::string url, DOWNLOAD_MODE mode)
 		}
 	}

+	// Add to list of unfinished downloads
 	unfinishedCache.push_back(newDownload);

 	return tubioId;
@ -146,16 +153,19 @@ void DownloadManager::DownloadNext()

 	std::thread* downloadThread = new std::thread([=]() {
 		DownloadEntry* entry = next;
+		std::string tubioId = entry->tubio_id;

 		std::stringstream ss;
 		if (entry->mode == DOWNLOAD_MODE::VIDEO)
 		{
-			std::string ytdl_call_video_base = 
+			// Call template
+			std::string ytdl_call_video_base =
 				"youtube-dl --newline --no-call-home --no-playlist --no-part --no-warnings --socket-timeout 5 --limit-rate $$DL_RATE"
-				" --no-mtime --no-cache-dir --recode-video mp4 --prefer-ffmpeg"
+				" --no-mtime --no-cache-dir -f \"$$QUALITY\" --recode-video mp4 --prefer-ffmpeg"
 				" -o \"$$DL_FILE\" \"$$DL_URL\" > \"$$DL_PROG_BUF_FILE\"";

-
+			// Fill template
+			ytdl_call_video_base = Internal::StringHelpers::Replace(ytdl_call_video_base, "$$QUALITY", DownloadQualityToStringParams(entry->quality));
 			ytdl_call_video_base = Internal::StringHelpers::Replace(ytdl_call_video_base, "$$DL_RATE", XGConfig::downloader.max_dlrate_per_thread);
 			ytdl_call_video_base = Internal::StringHelpers::Replace(ytdl_call_video_base, "$$DL_FILE", XGConfig::downloader.cachedir + "/download/" + entry->tubio_id + ".%(ext)s");
 			ytdl_call_video_base = Internal::StringHelpers::Replace(ytdl_call_video_base, "$$DL_URL", entry->webpage_url);
@ -167,11 +177,14 @@ void DownloadManager::DownloadNext()
 		}
 		else // DOWNLOAD_MODE::AUDIO
 		{
+			// Call template
 			std::string ytdl_call_audio_base =
 				"youtube-dl --newline --no-call-home --no-playlist --no-part --no-warnings --socket-timeout 5 --limit-rate $$DL_RATE"
-				" --no-mtime --no-cache-dir --audio-format mp3 --audio-quality 0 --extract-audio -o \"$$DL_FILE\""
+				" --no-mtime --no-cache-dir -f worstvideo+bestaudio --audio-format mp3 --audio-quality 0 --extract-audio -o \"$$DL_FILE\""
 				" \"$$DL_URL\" > \"$$DL_PROG_BUF_FILE\"";

+			
+			// Fill template
 			ytdl_call_audio_base = Internal::StringHelpers::Replace(ytdl_call_audio_base, "$$DL_RATE", XGConfig::downloader.max_dlrate_per_thread);
 			ytdl_call_audio_base = Internal::StringHelpers::Replace(ytdl_call_audio_base, "$$DL_FILE", XGConfig::downloader.cachedir + "/download/" + entry->tubio_id + ".%(ext)s");
 			ytdl_call_audio_base = Internal::StringHelpers::Replace(ytdl_call_audio_base, "$$DL_URL", entry->webpage_url);
@ -182,13 +195,21 @@ void DownloadManager::DownloadNext()
 			ss << ytdl_call_audio_base;
 		}

+		// This call takes a good while and is run in a seperate thread (look a few lines above. The lambda function)
 		int returnCode = system(ss.str().c_str());

+		// Fetch new instance
+		// Don't ask me why the old one isn't valid anymore -.-
+		for (std::size_t i = 0; i < unfinishedCache.size(); i++)
+			if (unfinishedCache[i].tubio_id == tubioId)
+				entry = &unfinishedCache[i];
+
 		if (returnCode == 0)
 		{
 			// Download succeeded
 			entry->status = DOWNLOAD_STATUS::FINISHED;
 			entry->download_progress = 100;
+
 			shouldSave = true;
 		}
 		else
@ -555,6 +576,15 @@ std::vector<DownloadEntry> DownloadManager::ParseJsonArrayToEntries(const JasonP
 			newEntry.queued_timestamp = iter["queued_timestamp"].AsInt;
 		}

+		if ((iter.DoesExist("quality")) && (iter["quality"].GetDataType() == JDType::STRING))
+		{
+			newEntry.quality = GetDownloadQualityByName(iter["quality"].AsString);
+			if (newEntry.quality == DOWNLOAD_QUALITY::INVALID)
+				newEntry.quality = DOWNLOAD_QUALITY::_BEST;
+		}
+		else
+			newEntry.quality = DOWNLOAD_QUALITY::_BEST;
+
 		if ((iter.DoesExist("mode")) && (iter["mode"].GetDataType() == JDType::STRING))
 		{
 			std::string cachedStrMode = iter["mode"];
@ -569,6 +599,80 @@ std::vector<DownloadEntry> DownloadManager::ParseJsonArrayToEntries(const JasonP
 	return entries;
 }

+std::string DownloadManager::DownloadQualityToStringParams(DOWNLOAD_QUALITY quality)
+{
+	switch (quality)
+	{
+	case DOWNLOAD_QUALITY::_BEST:
+		return "bestvideo[ext=mp4]+bestaudio";
+	case DOWNLOAD_QUALITY::_1440p:
+		return "bestvideo[ext=mp4][height<=1440]+bestaudio";
+	case DOWNLOAD_QUALITY::_1080p:
+		return "bestvideo[ext=mp4][height<=1080]+bestaudio";
+	case DOWNLOAD_QUALITY::_720p:
+		return "bestvideo[ext=mp4][height<=720]+bestaudio";
+	case DOWNLOAD_QUALITY::_480p:
+		return "bestvideo[ext=mp4][height<=480]+bestaudio";
+	case DOWNLOAD_QUALITY::_360p:
+		return "bestvideo[ext=mp4][height<=360]+bestaudio";
+	case DOWNLOAD_QUALITY::_240p:
+		return "bestvideo[ext=mp4][height<=240]+bestaudio";
+	case DOWNLOAD_QUALITY::_144p:
+		return "bestvideo[ext=mp4][height<=144]+bestaudio";
+	}
+
+	return std::string();
+}
+
+std::string DownloadManager::DownloadQualityToName(DOWNLOAD_QUALITY quality)
+{
+	switch (quality)
+	{
+	case DOWNLOAD_QUALITY::_BEST:
+		return "best";
+	case DOWNLOAD_QUALITY::_1440p:
+		return "1440p";
+	case DOWNLOAD_QUALITY::_1080p:
+		return "1080p";
+	case DOWNLOAD_QUALITY::_720p:
+		return "720p";
+	case DOWNLOAD_QUALITY::_480p:
+		return "480p";
+	case DOWNLOAD_QUALITY::_360p:
+		return "360p";
+	case DOWNLOAD_QUALITY::_240p:
+		return "240p";
+	case DOWNLOAD_QUALITY::_144p:
+		return "144p";
+	case DOWNLOAD_QUALITY::INVALID:
+		return "INVALID";
+	}
+
+	return std::string();
+}
+
+DOWNLOAD_QUALITY DownloadManager::GetDownloadQualityByName(const std::string& qualityName)
+{
+	if (qualityName == "best")
+		return DOWNLOAD_QUALITY::_BEST;
+	else if (qualityName == "1440p")
+		return DOWNLOAD_QUALITY::_1440p;
+	else if (qualityName == "1080p")
+		return DOWNLOAD_QUALITY::_1080p;
+	else if (qualityName == "720p")
+		return DOWNLOAD_QUALITY::_720p;
+	else if (qualityName == "480p")
+		return DOWNLOAD_QUALITY::_480p;
+	else if (qualityName == "360p")
+		return DOWNLOAD_QUALITY::_360p;
+	else if (qualityName == "240p")
+		return DOWNLOAD_QUALITY::_240p;
+	else if (qualityName == "144p")
+		return DOWNLOAD_QUALITY::_144p;
+
+	return DOWNLOAD_QUALITY::INVALID;
+}
+
 void DownloadManager::FetchInformation(std::string url, std::string tubId)
 {
 	std::stringstream ss;
@ -690,6 +794,7 @@ Downloader::DownloadEntry::DownloadEntry()
 	download_url = "";
 	status = DOWNLOAD_STATUS::QUEUED;
 	mode = DOWNLOAD_MODE::AUDIO;
+	quality = DOWNLOAD_QUALITY::INVALID;
 	download_progress = 0;
 	queued_timestamp = 0;

@ -710,6 +815,7 @@ JsonBlock DownloadEntry::GetAsJson()
 	jb.Set(Ele("downloaded_filename", downloaded_filename));
 	jb.Set(Ele("download_url", download_url));
 	jb.Set(Ele("queued_timestamp", (long long int)queued_timestamp));
+	jb.Set(Ele("quality", DownloadManager::DownloadQualityToName(quality)));

 	switch (mode)
 	{
--- a/Tubio/DownloadManager.h
+++ b/Tubio/DownloadManager.h
@ -23,6 +23,18 @@ namespace Downloader
 		FINISHED,
 		FAILED
 	};
+	enum class DOWNLOAD_QUALITY
+	{
+		_BEST,   // best quality
+		_1440p,  // 1440p
+		_1080p,  // 1080p
+		_720p,   // 720p
+		_480p,   // 480p
+		_360p,   // 360p
+		_240p,   // 240p
+		_144p,    // 144p
+		INVALID
+	};

 	class DownloadEntry
 	{
@ -41,6 +53,7 @@ namespace Downloader
 		std::string download_url;
 		DOWNLOAD_STATUS status;
 		DOWNLOAD_MODE mode;
+		DOWNLOAD_QUALITY quality;
 		int download_progress;
 		time_t queued_timestamp;

@ -61,7 +74,7 @@ namespace Downloader
 		/// <param name="url"></param>
 		/// <param name="mode">If video or audio</param>
 		/// <returns>Tubio download id</returns>
-		static std::string QueueDownload(std::string url, DOWNLOAD_MODE mode);
+		static std::string QueueDownload(std::string url, DOWNLOAD_MODE mode, DOWNLOAD_QUALITY quality = DOWNLOAD_QUALITY::_BEST);

 		/// <summary>
 		/// Returns the number of videos queued
@ -102,12 +115,43 @@ namespace Downloader
 		/// <returns></returns>
 		static bool RemoveFromCacheByID(std::string id);

+		/// <summary>
+		/// Will return a name of a download quality. Like, '1080p' or 'best' for example
+		/// </summary>
+		/// <param name="quality">The quality to get the name from</param>
+		/// <returns>The name of the download quality</returns>
+		static std::string DownloadQualityToName(DOWNLOAD_QUALITY quality);
+
+		/// <summary>
+		/// Will return a download quality object based on a name, like '1080p' or 'best' for example
+		/// </summary>
+		/// <param name="qualityName"></param>
+		/// <returns></returns>
+		static DOWNLOAD_QUALITY GetDownloadQualityByName(const std::string& qualityName);
+
 	private:
 		static void Save();
 		static void Load();
 		static std::vector<DownloadEntry> ParseJsonArrayToEntries(const JasonPP::JsonArray& arr);

+		/// <summary>
+		/// Will return a youtube-dl quality string based on 'quality'
+		/// </summary>
+		/// <param name="quality">The download quality to get the parameter from</param>
+		/// <returns>The youtube-dl quality parameter</returns>
+		static std::string DownloadQualityToStringParams(DOWNLOAD_QUALITY quality);
+
+		/// <summary>
+		/// Will fetch metadata of an url
+		/// </summary>
+		/// <param name="url">Url to fetch from</param>
+		/// <param name="tubId">Tubio id to save data to</param>
 		static void FetchInformation(std::string url, std::string tubId);
+
+		/// <summary>
+		/// Will create an unique tubio id (based on time())
+		/// </summary>
+		/// <returns>Unique tubio id</returns>
 		static std::string CreateNewTubioID();

 		/// <summary>
--- a/Tubio/RestQueryHandler.cpp
+++ b/Tubio/RestQueryHandler.cpp
@ -73,6 +73,7 @@ bool RestQueryHandler::Example_Foo(const JsonBlock& request, JsonBlock& response

 bool RestQueryHandler::QueueDownload(const JsonBlock& request, JsonBlock& responseBody, HTTP_STATUS_CODE& responseCode)
 {
+	// Fetch parameters
 	if ((!ValidateField("video_url", JDType::STRING, request, responseBody)) ||
 		(!ValidateField("mode", JDType::STRING, request, responseBody)))
 	{
@ -80,8 +81,22 @@ bool RestQueryHandler::QueueDownload(const JsonBlock& request, JsonBlock& respon
 		return false;
 	}

-	std::string modeParam = request.Get("mode").AsString;
 	std::string videoUrl = request.Get("video_url").AsString;
+	std::string modeParam = request.Get("mode").AsString;
+	std::string qualityParam;
+
+	// 'quality' is an optional parameter. Default value is 'best'
+	if ((ValidateField("quality", JDType::STRING, request, responseBody)))
+	{
+		qualityParam = request.Get("quality").AsString;
+	}
+	else
+	{
+		qualityParam = "best";
+	}
+
+	// Process parameters
+	// Process download mode
 	DOWNLOAD_MODE mode;
 	if (modeParam == "video") mode = DOWNLOAD_MODE::VIDEO;
 	else if (modeParam == "audio") mode = DOWNLOAD_MODE::AUDIO;
@ -92,10 +107,18 @@ bool RestQueryHandler::QueueDownload(const JsonBlock& request, JsonBlock& respon
 		return false;
 	}

+	// Process download quality
+	DOWNLOAD_QUALITY quality = DownloadManager::GetDownloadQualityByName(qualityParam);
+	if (quality == DOWNLOAD_QUALITY::INVALID) {
+		responseCode = HTTP_STATUS_CODE::BAD_REQUEST;
+		responseBody.CloneFrom(RestResponseTemplates::GetByCode(HTTP_STATUS_CODE::BAD_REQUEST, "Parameter 'quality' is of wrong value. Choose either 'best', '1440p', '1080p', '720p', '480p', '360p', '240p', or '144p'."));
+		return false;
+	}
+
 	log->cout << "Queued video \"" << videoUrl << "\"...";
 	log->Flush();

-	std::string tubId = DownloadManager::QueueDownload(videoUrl, mode);
+	std::string tubId = DownloadManager::QueueDownload(videoUrl, mode, quality);

 	responseCode = HTTP_STATUS_CODE::OK;
 	responseBody.CloneFrom(RestResponseTemplates::GetByCode(HTTP_STATUS_CODE::OK));
--- a/Tubio/Version.h
+++ b/Tubio/Version.h
@ -1,2 +1,2 @@
 #pragma once
-#define TUBIO_SERVER_VERSION (0.537)
+#define TUBIO_SERVER_VERSION (0.539)
--- a/Tubio/frontend/200.html
+++ b/Tubio/frontend/200.html
@ -1,9 +1,9 @@
 <!doctype html>
 <html>
  <head>
-    <title>Tubio - Video downloader</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content=""><meta data-n-head="1" name="msapplication-TileColor" content="#031934"><meta data-n-head="1" name="theme-color" content="#031934"><link data-n-head="1" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link data-n-head="1" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link data-n-head="1" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link data-n-head="1" rel="manifest" href="/site.webmanifest"><link data-n-head="1" rel="mask-icon" href="/safari-pinned-tab.svg" color="#031934"><link rel="preload" href="/_nuxt/25d0543.js" as="script"><link rel="preload" href="/_nuxt/8a34dcc.js" as="script"><link rel="preload" href="/_nuxt/5cc2e9d.js" as="script"><link rel="preload" href="/_nuxt/5df429a.js" as="script">
+    <title>Tubio - Video downloader</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content=""><meta data-n-head="1" name="msapplication-TileColor" content="#031934"><meta data-n-head="1" name="theme-color" content="#031934"><link data-n-head="1" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link data-n-head="1" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link data-n-head="1" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link data-n-head="1" rel="manifest" href="/site.webmanifest"><link data-n-head="1" rel="mask-icon" href="/safari-pinned-tab.svg" color="#031934"><link rel="preload" href="/_nuxt/319ed71.js" as="script"><link rel="preload" href="/_nuxt/8a34dcc.js" as="script"><link rel="preload" href="/_nuxt/d640171.js" as="script"><link rel="preload" href="/_nuxt/b2e29d0.js" as="script">
  </head>
  <body>
-    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{app:{basePath:"/",assetsPath:"/_nuxt/",cdnURL:null}},staticAssetsBase:"/_nuxt/static/1614811903"}</script>
-  <script src="/_nuxt/25d0543.js"></script><script src="/_nuxt/8a34dcc.js"></script><script src="/_nuxt/5cc2e9d.js"></script><script src="/_nuxt/5df429a.js"></script></body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{app:{basePath:"/",assetsPath:"/_nuxt/",cdnURL:null}},staticAssetsBase:"/_nuxt/static/1615643415"}</script>
+  <script src="/_nuxt/319ed71.js"></script><script src="/_nuxt/8a34dcc.js"></script><script src="/_nuxt/d640171.js"></script><script src="/_nuxt/b2e29d0.js"></script></body>
 </html>
--- a/Tubio/frontend/_nuxt/0fb9eb4.js
+++ b/Tubio/frontend/_nuxt/0fb9eb4.js
--- a/Tubio/frontend/_nuxt/319ed71.js
+++ b/Tubio/frontend/_nuxt/319ed71.js
@ -1 +1 @@
-!function(e){function r(data){for(var r,n,c=data[0],l=data[1],d=data[2],i=0,h=[];i<c.length;i++)n=c[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(v&&v(data);h.length;)h.shift()();return f.push.apply(f,d||[]),t()}function t(){for(var e,i=0;i<f.length;i++){for(var r=f[i],t=!0,n=1;n<r.length;n++){var l=r[n];0!==o[l]&&(t=!1)}t&&(f.splice(i--,1),e=c(c.s=r[0]))}return e}var n={},o={19:0},f=[];function c(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,c),t.l=!0,t.exports}c.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var f,script=document.createElement("script");script.charset="utf-8",script.timeout=120,c.nc&&script.setAttribute("nonce",c.nc),script.src=function(e){return c.p+""+{2:"fc857d8",3:"fa9d36f",4:"762bd10",5:"f319ef6",6:"99f9b46",7:"5ee7790",8:"282c5a4",9:"b925fa9",10:"98ddc40",11:"6a9af62",12:"be47b68",13:"e42c667",14:"f70744c",15:"1259aff",16:"b995640",17:"0fb9eb4",18:"5262ac7"}[e]+".js"}(e);var l=new Error;f=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),f=r&&r.target&&r.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+f+")",l.name="ChunkLoadError",l.type=n,l.request=f,t[1](l)}o[e]=void 0}};var d=setTimeout((function(){f({type:"timeout",target:script})}),12e4);script.onerror=script.onload=f,document.head.appendChild(script)}return Promise.all(r)},c.m=e,c.c=n,c.d=function(e,r,t){c.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,r){if(1&r&&(e=c(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)c.d(t,n,function(r){return e[r]}.bind(null,n));return t},c.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(r,"a",r),r},c.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},c.p="/_nuxt/",c.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],d=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var v=d;t()}([]);
+!function(e){function r(data){for(var r,n,c=data[0],l=data[1],d=data[2],i=0,h=[];i<c.length;i++)n=c[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(v&&v(data);h.length;)h.shift()();return f.push.apply(f,d||[]),t()}function t(){for(var e,i=0;i<f.length;i++){for(var r=f[i],t=!0,n=1;n<r.length;n++){var l=r[n];0!==o[l]&&(t=!1)}t&&(f.splice(i--,1),e=c(c.s=r[0]))}return e}var n={},o={19:0},f=[];function c(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,c),t.l=!0,t.exports}c.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var f,script=document.createElement("script");script.charset="utf-8",script.timeout=120,c.nc&&script.setAttribute("nonce",c.nc),script.src=function(e){return c.p+""+{2:"8a8f637",3:"8f953c4",4:"762bd10",5:"f319ef6",6:"99f9b46",7:"5ee7790",8:"282c5a4",9:"b925fa9",10:"98ddc40",11:"6a9af62",12:"be47b68",13:"e42c667",14:"f70744c",15:"1259aff",16:"b995640",17:"5f3baa0",18:"8debf85"}[e]+".js"}(e);var l=new Error;f=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),f=r&&r.target&&r.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+f+")",l.name="ChunkLoadError",l.type=n,l.request=f,t[1](l)}o[e]=void 0}};var d=setTimeout((function(){f({type:"timeout",target:script})}),12e4);script.onerror=script.onload=f,document.head.appendChild(script)}return Promise.all(r)},c.m=e,c.c=n,c.d=function(e,r,t){c.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,r){if(1&r&&(e=c(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)c.d(t,n,function(r){return e[r]}.bind(null,n));return t},c.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(r,"a",r),r},c.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},c.p="/_nuxt/",c.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],d=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var v=d;t()}([]);
--- a/Tubio/frontend/_nuxt/5f3baa0.js
+++ b/Tubio/frontend/_nuxt/5f3baa0.js
--- a/Tubio/frontend/_nuxt/8a8f637.js
+++ b/Tubio/frontend/_nuxt/8a8f637.js
--- a/Tubio/frontend/_nuxt/8debf85.js
+++ b/Tubio/frontend/_nuxt/8debf85.js
--- a/Tubio/frontend/_nuxt/8f953c4.js
+++ b/Tubio/frontend/_nuxt/8f953c4.js
--- a/Tubio/frontend/_nuxt/LICENSES
+++ b/Tubio/frontend/_nuxt/LICENSES
@ -1,16 +1,3 @@
-/*!
- * vue-client-only v2.0.0
- * (c) 2019-present egoist <0x142857@gmail.com>
- * Released under the MIT License.
- */
-
-/*!
- * vue-no-ssr v1.1.1
- * (c) 2018-present egoist <0x142857@gmail.com>
- * Released under the MIT License.
- */
-
-
 /*!
  * vue-router v3.5.1
  * (c) 2021 Evan You
@ -28,3 +15,16 @@
 * (c) 2021 Evan You
 * @license MIT
 */
+
+
+/*!
+ * vue-client-only v2.0.0
+ * (c) 2019-present egoist <0x142857@gmail.com>
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-no-ssr v1.1.1
+ * (c) 2018-present egoist <0x142857@gmail.com>
+ * Released under the MIT License.
+ */
--- a/Tubio/frontend/_nuxt/b2e29d0.js
+++ b/Tubio/frontend/_nuxt/b2e29d0.js
--- a/Tubio/frontend/_nuxt/d640171.js
+++ b/Tubio/frontend/_nuxt/d640171.js
--- a/Tubio/frontend/_nuxt/fa9d36f.js
+++ b/Tubio/frontend/_nuxt/fa9d36f.js
--- a/Tubio/frontend/_nuxt/fc857d8.js
+++ b/Tubio/frontend/_nuxt/fc857d8.js
--- a/Tubio/frontend/_nuxt/static/1615643415/manifest.js
+++ b/Tubio/frontend/_nuxt/static/1615643415/manifest.js
--- a/Tubio/frontend/_nuxt/static/1615643415/payload.js
+++ b/Tubio/frontend/_nuxt/static/1615643415/payload.js
--- a/Tubio/frontend/_nuxt/static/1615643415/settings/payload.js
+++ b/Tubio/frontend/_nuxt/static/1615643415/settings/payload.js
--- a/Tubio/frontend/_nuxt/static/1615643415/settings/state.js
+++ b/Tubio/frontend/_nuxt/static/1615643415/settings/state.js
@ -1 +1 @@
-window.__NUXT__=(function(a){return {staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1614811903",layout:"default",error:a,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},serverVersion:{serverVersion:-1},settings:{config:{}}},serverRendered:true,routePath:"\u002Fsettings",config:{app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:a}}}}(null));
+window.__NUXT__=(function(a){return {staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1615643415",layout:"default",error:a,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},serverVersion:{serverVersion:-1},settings:{config:{}}},serverRendered:true,routePath:"\u002Fsettings",config:{app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:a}}}}(null));
--- a/Tubio/frontend/_nuxt/static/1615643415/state.js
+++ b/Tubio/frontend/_nuxt/static/1615643415/state.js
@ -1 +1 @@
-window.__NUXT__=(function(a,b){return {staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1614811903",layout:"default",error:a,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},serverVersion:{serverVersion:-1},settings:{config:{}}},serverRendered:true,routePath:b,config:{app:{basePath:b,assetsPath:"\u002F_nuxt\u002F",cdnURL:a}}}}(null,"\u002F"));
+window.__NUXT__=(function(a,b){return {staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1615643415",layout:"default",error:a,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},serverVersion:{serverVersion:-1},settings:{config:{}}},serverRendered:true,routePath:b,config:{app:{basePath:b,assetsPath:"\u002F_nuxt\u002F",cdnURL:a}}}}(null,"\u002F"));
--- a/Tubio/frontend/index.html
+++ b/Tubio/frontend/index.html
--- a/Tubio/frontend/rest-dummies/cache.json
+++ b/Tubio/frontend/rest-dummies/cache.json
@ -1,5 +1,21 @@
 {
  "cache": [
+    {
+      "description": "Stream or buy the track here: https://umg.lnk.to/Knebel\n\n\"F & M\", the new Lindemann album \u2013 out now: https://umg.lnk.to/FundM\n\nVideo Director: Zoran Bihac\nVideo Producer: Nafta Films & Zoki.tv\n\nhttps://www.instagram.com/lindemannofficial/\nhttps://www.facebook.com/Lindemann\nhttps://www.lindemann.band\n\n#LINDEMANN #Knebel",
+      "download_progress": 100,
+      "download_url": "/download/1Ll3WR",
+      "downloaded_filename": "dlcache/download/1Ll3WR.mp4",
+      "duration": 232,
+      "mode": "video",
+      "queued_timestamp": 1615640695,
+      "status": "finished",
+      "thumbnail_url": "https://i.ytimg.com/vi/p64X_5GX0J8/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAmnCY71V_pUKqziS-9ceQrjuLszg",
+      "title": "LINDEMANN - Knebel (Official Video)",
+      "tubio_id": "1Ll3WR",
+      "uploader": "Lindemann Official",
+      "webpage_url": "https://www.youtube.com/watch?v=p64X_5GX0J8",
+      "quality": "best"
+    },
    {
      "description": "Download Eminem's 'MMLP2' Album on iTunes now:http://smarturl.it/MMLP2\n\nCredits below\nVideo Director: Rich Lee\nVideo Producer: Justin Diener\nVideo Producer: Kathy Angstadt\n\nPlaylist Best of Eminem: https://goo.gl/AquNpo\nSubscribe for more: https://goo.gl/DxCrDV\n\n#Eminem #RapGod #Vevo",
      "download_progress": 0,
@ -13,22 +29,24 @@
      "title": "Eminem - Rap God (Explicit) [Official Video]",
      "tubio_id": "1KnEwh",
      "uploader": "EminemVEVO",
-      "webpage_url": "https://www.youtube.com/watch?v=XbGs_qK2PQA"
+      "webpage_url": "https://www.youtube.com/watch?v=XbGs_qK2PQA",
+      "quality": "1080p"
    },
    {
-      "description": "Check out my SoundCloud Channel for more music: https://soundcloud.com/user-411907790\n\u266c  \u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u266c \nA big thank you to everyone who voluntarily financially supports my work and thus makes it possible:\n\u26abPaypal: https://www.paypal.me/KarlSternau\n\u26abPatreon: https://www.patreon.com/karlsternau\n\u266c \u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012 \u266c",
-      "download_progress": 98,
-      "download_url": "/download/1KnEwb",
-      "downloaded_filename": "dlcache/download/1KnEwb.mp4",
-      "duration": 413,
+      "description": "Rick Astley's official music video for \u201cNever Gonna Give You Up\u201d \nListen to Rick Astley: https://RickAstley.lnk.to/_listenYD\n\nSubscribe to the official Rick Astley YouTube channel: https://RickAstley.lnk.to/subscribeYD\n\nFollow Rick Astley:\nFacebook: https://RickAstley.lnk.to/followFI\nTwitter: https://RickAstley.lnk.to/followTI\nInstagram: https://RickAstley.lnk.to/followII\nWebsite: https://RickAstley.lnk.to/followWI\nSpotify: https://RickAstley.lnk.to/followSI\n\nLyrics:\nNever gonna give you up\nNever gonna let you down\nNever gonna run around and desert you\nNever gonna make you cry\nNever gonna say goodbye\nNever gonna tell a lie and hurt you\n\n#RickAstley #NeverGonnaGiveYouUp #DancePop",
+      "download_progress": 100,
+      "download_url": "/download/1Lij6Z",
+      "downloaded_filename": "dlcache/download/1Lij6Z.mp4",
+      "duration": 212,
      "mode": "video",
-      "queued_timestamp": 1601481591,
-      "status": "downloading",
-      "thumbnail_url": "https://i.ytimg.com/vi/c3wRzxiQ8Zk/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLC4MWTAc7sY5uF6hFzNk2D0tawTSA",
-      "title": "Sing with Karl - Des Morgens Um Halb Viere [Old soldier and student way][All Stanzas]",
-      "tubio_id": "1KnEwb",
-      "uploader": "Karl Sternau",
-      "webpage_url": "https://www.youtube.com/watch?v=c3wRzxiQ8Zk"
+      "queued_timestamp": 1614984000,
+      "status": "finished",
+      "thumbnail_url": "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB_p0PncTtkrhaNDZtntrE3gKkoYw",
+      "title": "Rick Astley - Never Gonna Give You Up (Video)",
+      "tubio_id": "1Lij6Z",
+      "uploader": "RickAstleyVEVO",
+      "webpage_url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+      "quality": "720p"
    },
    {
      "description": "Latest video off of Lil Dicky's debut album \"Professional Rapper.\" Download the album here: http://smarturl.it/LilDickyiTunes \n\nWatch Lil Dicky create the most epic rap video, all while he $aves Dat Money! Click here for the documentary: https://www.youtube.com/watch?v=zkXpb20b-NQ\n\nDirector\nTony Yacenda\nwww.TonyYacenda.com\n\nProducer\nJim Cummings\n\nCinematographer\nAlan Gwizdowski\n\nMusic Video Editor\nBrian Vannucci\n\nDocumentary Editor\nBrad Allen Wilde\n\nPost Supervisor\nRyan Ross\n\nColorist\nSean Wells\n\nSound Mixers\nDi Le\nDarrell Tung\n\nSecond Unit DPs\nAdam Lee\nJeff Kulig\nLuc Delamare\n\nBoat Girls\nMelissa Soria\nSuzanne Quast\nJulia Misaki\n\nSpecial Thanks\n\"The Study\u201d Hollywood\nAvilaVIP\nMrs. \u201cK\u201d\nThe Noho Diner\nFrosty Treats/Amp Entertainment\n\nWeedmaps\nMaster and Dynamic\nRGF Productions\nJash\nMeUndies (www.meundies.com)\n\nand\n\nSarah Silverman\nKevin Durant\nDillon Francis\nHannibal Buress\nAbbi Jacobson\nIlana Glazer\nMark Cuban\nTom Petty\n\nSong produced by Money Alwayz\nSong Mixed by Rob Kinelski at The Fortress of Amplitude\nAssistant Engineer: David Baker",
@ -43,7 +61,8 @@
      "title": "Lil Dicky - $ave Dat Money feat. Fetty Wap and Rich Homie Quan (Official Music Video)",
      "tubio_id": "1KnEw2",
      "uploader": "Lil Dicky",
-      "webpage_url": "https://www.youtube.com/watch?v=yvHYWD29ZNY"
+      "webpage_url": "https://www.youtube.com/watch?v=yvHYWD29ZNY",
+      "quality": "360p"
    },
    {
      "description": "Get the new album \"Wintersaga\" here: https://smarturl.it/Wintersaga-NPR\n\nWind Rose states:\n\u201cMining is one of the most important activities for a Dwarf, naturally Wind Rose needed a theme song for this great honor of collecting these jewels from the soil, so sing with us with pride!!\u201c \n\n\"Diggy Diggy Hole\" originally written by Yogscast\n\nMixed and Mastered by Lasse Lammert",
@ -58,7 +77,8 @@
      "title": "WIND ROSE - Diggy Diggy Hole (Official Video) | Napalm Records",
      "tubio_id": "1KnEvV",
      "uploader": "Napalm Records",
-      "webpage_url": "https://www.youtube.com/watch?v=34CZjsEI1yU"
+      "webpage_url": "https://www.youtube.com/watch?v=34CZjsEI1yU",
+      "quality": "144p"
    }
  ],
  "cache_size": 4,
--- a/Tubio/frontend/settings/index.html
+++ b/Tubio/frontend/settings/index.html
--- a/Tubio_rest.postman_collection.json
+++ b/Tubio_rest.postman_collection.json
@ -32,6 +32,33 @@
 			},
 			"response": []
 		},
+		{
+			"name": "GetServerVersion",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\r\n    \"request\": \"get_server_version\"\r\n}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "localhost:6969/api",
+					"host": [
+						"localhost"
+					],
+					"port": "6969",
+					"path": [
+						"api"
+					]
+				}
+			},
+			"response": []
+		},
 		{
 			"name": "DownloadVideo",
 			"request": {
@ -182,12 +209,9 @@
 					}
 				},
 				"url": {
-					"raw": "192.168.1.12:6969/api",
+					"raw": "localhost:6969/api",
 					"host": [
-						"192",
-						"168",
-						"1",
-						"12"
+						"localhost"
 					],
 					"port": "6969",
 					"path": [
@ -212,12 +236,9 @@
 					}
 				},
 				"url": {
-					"raw": "192.168.1.12:6969/api",
+					"raw": "localhost:6969/api",
 					"host": [
-						"192",
-						"168",
-						"1",
-						"12"
+						"localhost"
 					],
 					"port": "6969",
 					"path": [
@ -323,12 +344,9 @@
 					}
 				},
 				"url": {
-					"raw": "192.168.1.12:6969/api",
+					"raw": "localhost:6969/api",
 					"host": [
-						"192",
-						"168",
-						"1",
-						"12"
+						"localhost"
 					],
 					"port": "6969",
 					"path": [
@ -499,7 +517,33 @@
 				}
 			},
 			"response": []
+		},
+		{
+			"name": "ResetConfig to default",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\r\n    \"request\": \"reset_config_to_default_values\"\r\n}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "localhost:6969/api",
+					"host": [
+						"localhost"
+					],
+					"port": "6969",
+					"path": [
+						"api"
+					]
+				}
+			},
+			"response": []
 		}
-	],
-	"protocolProfileBehavior": {}
+	]
 }
--- a/tubio-frontend-nuxt-app/components/DownloadEntry.vue
+++ b/tubio-frontend-nuxt-app/components/DownloadEntry.vue
@ -5,12 +5,15 @@

            <div class="flex items-end justify-between w-full md:w-auto">

-              <div class="flex flex-col">
+              <div class="flex flex-row">
                <div class="icon--mode">
                  <IconFilm v-if="downloadEntry.mode === 'video'" />
                  <IconMusic v-else />
                </div>
-                <div class="timestamp">
+                <div class="smalltext-metadata ml-1">
+                    {{typeof(downloadEntry.quality) != 'undefined' ? downloadEntry.quality : 'best'}} <!-- I also need to support older downloads that may not have a value for quality. These were downlaoded at the best quality possible. -->
+                </div>
+                <div class="smalltext-metadata ml-1">
                    {{getQueuedDateString(downloadEntry.queued_timestamp)}}
                </div>
              </div>
@ -146,10 +149,14 @@ export default {
  width: 100%;
  border-bottom: 2px solid theme("colors.gray-1");

-  & .timestamp {
+  & .smalltext-metadata {
    font-family: ZillaSlab, serif;
    font-size: 12pt;
    color: theme("colors.text-gray-1");
+
+    &::before {
+      content: '|';
+    }
  }

  & .thumbnail {
@ -162,6 +169,10 @@ export default {
    position: relative;
    cursor: pointer;
    scrollbar-width: none;
+    backface-visibility: hidden;    // prevent flickering on mover
+    transform: translate3d(0, 0, 0);// prevent flickering on mover
+    transform-style: preserve-3d;   // prevent flickering on mover
+    transition: transform 0.2s ease;

    @media (max-width: theme('screens.md')) {
      width: 100%;
@ -169,7 +180,7 @@ export default {
    }

    &:hover {
-      // transform: scale(1.05); /* shit causes flickering */
+      transform: scale(1.05); /* shit causes flickering */
    }

    &__vignette {
--- a/tubio-frontend-nuxt-app/layouts/default.vue
+++ b/tubio-frontend-nuxt-app/layouts/default.vue
@ -24,8 +24,8 @@ export default {

 <style lang="scss" scoped>
 .main-column {
-  width: 80%;
-  padding: 0 20% 50px 20%;
+  width: 70%;
+  padding: 0 0 50px 0;
  background-color: #0005;
  box-shadow: 0 0 50px 50px #0005;
  min-height: 100vh;
--- a/tubio-frontend-nuxt-app/pages/index.vue
+++ b/tubio-frontend-nuxt-app/pages/index.vue
@ -8,8 +8,10 @@
        <Spacer height="2em" m_height="2em" />
      </div>

+      <!-- URL-Field -->
      <div class="flex flex-row flex-wrap md:flex-no-wrap  input-flex justify-between md:justify-center">
-        <input class="flex-grow md:mr-4 mb-2 md:mb-0 w-full"
+
+        <input class="flex-grow mb-2 md:mb-0 w-full"
          type="url"
          name="video_url"
          id="video_url"
@ -18,15 +20,35 @@
          v-on:keydown="keyMonitor"
        />

+        <!-- Flex-Break on mobile -->
        <div class="w-full md:hidden" />

-        <div class="flex-shrink button-submit flex-grow-0">
-          <select name="mode" id="mode" ref="mode" class="dropdown">
-            <option value="video">Video</option>
-            <option value="audio">Audio</option>
-          </select>
+        <div class="flex">
+          <!-- Mode selector -->
+          <div class="flex-shrink button-submit flex-grow-0 md:ml-4">
+            <select name="mode" id="mode" ref="mode" class="dropdown">
+              <option value="video">Video</option>
+              <option value="audio">Audio</option>
+            </select>
+          </div>
+
+          <!-- Quality selector -->
+          <div class="flex-shrink button-submit flex-grow-0 ml-3">
+            <select name="mode" id="quality" ref="quality" class="dropdown">
+              <option value="best">Best</option>
+              <option value="1440p">1440p</option>
+              <option value="1080p">1080p</option>
+              <option value="720p">720p</option>
+              <option value="480p">480p</option>
+              <option value="360p">360p</option>
+              <option value="240p">240p</option>
+              <option value="144p">144p</option>
+            </select>
+          </div>
+
        </div>

+        <!-- Download button -->
        <div class="button flex-shrink button-submit flex-grow-0 ml-3" v-on:click="downloadButtonClicked">
          <IconArrowRightSquare class="icon-button" />
        </div>
@ -75,7 +97,8 @@ export default {
        axios.post("/api", {
          request: "queue_download",
          video_url: url,
-          mode: this.$refs.mode.options[this.$refs.mode.selectedIndex].value
+          mode: this.$refs.mode.options[this.$refs.mode.selectedIndex].value,
+          quality: this.$refs.quality.options[this.$refs.quality.selectedIndex].value
        }).then(function(response){
          if (response.data.status === "OK") {
            that.isWaitingForResponse = false;
--- a/tubio-frontend-nuxt-app/pages/settings.vue
+++ b/tubio-frontend-nuxt-app/pages/settings.vue
@ -165,7 +165,7 @@ export default {
  data: function() {
    return {
      canUpdate: {type: Boolean, default: true},
-      version__webUI: 0.761
+      version__webUI: 0.762
    };
  },

--- a/tubio-frontend-nuxt-app/static/rest-dummies/cache.json
+++ b/tubio-frontend-nuxt-app/static/rest-dummies/cache.json
@ -1,5 +1,21 @@
 {
  "cache": [
+    {
+      "description": "Stream or buy the track here: https://umg.lnk.to/Knebel\n\n\"F & M\", the new Lindemann album \u2013 out now: https://umg.lnk.to/FundM\n\nVideo Director: Zoran Bihac\nVideo Producer: Nafta Films & Zoki.tv\n\nhttps://www.instagram.com/lindemannofficial/\nhttps://www.facebook.com/Lindemann\nhttps://www.lindemann.band\n\n#LINDEMANN #Knebel",
+      "download_progress": 100,
+      "download_url": "/download/1Ll3WR",
+      "downloaded_filename": "dlcache/download/1Ll3WR.mp4",
+      "duration": 232,
+      "mode": "video",
+      "queued_timestamp": 1615640695,
+      "status": "finished",
+      "thumbnail_url": "https://i.ytimg.com/vi/p64X_5GX0J8/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAmnCY71V_pUKqziS-9ceQrjuLszg",
+      "title": "LINDEMANN - Knebel (Official Video)",
+      "tubio_id": "1Ll3WR",
+      "uploader": "Lindemann Official",
+      "webpage_url": "https://www.youtube.com/watch?v=p64X_5GX0J8",
+      "quality": "best"
+    },
    {
      "description": "Download Eminem's 'MMLP2' Album on iTunes now:http://smarturl.it/MMLP2\n\nCredits below\nVideo Director: Rich Lee\nVideo Producer: Justin Diener\nVideo Producer: Kathy Angstadt\n\nPlaylist Best of Eminem: https://goo.gl/AquNpo\nSubscribe for more: https://goo.gl/DxCrDV\n\n#Eminem #RapGod #Vevo",
      "download_progress": 0,
@ -13,22 +29,24 @@
      "title": "Eminem - Rap God (Explicit) [Official Video]",
      "tubio_id": "1KnEwh",
      "uploader": "EminemVEVO",
-      "webpage_url": "https://www.youtube.com/watch?v=XbGs_qK2PQA"
+      "webpage_url": "https://www.youtube.com/watch?v=XbGs_qK2PQA",
+      "quality": "1080p"
    },
    {
-      "description": "Check out my SoundCloud Channel for more music: https://soundcloud.com/user-411907790\n\u266c  \u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u266c \nA big thank you to everyone who voluntarily financially supports my work and thus makes it possible:\n\u26abPaypal: https://www.paypal.me/KarlSternau\n\u26abPatreon: https://www.patreon.com/karlsternau\n\u266c \u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012\u2012 \u266c",
-      "download_progress": 98,
-      "download_url": "/download/1KnEwb",
-      "downloaded_filename": "dlcache/download/1KnEwb.mp4",
-      "duration": 413,
+      "description": "Rick Astley's official music video for \u201cNever Gonna Give You Up\u201d \nListen to Rick Astley: https://RickAstley.lnk.to/_listenYD\n\nSubscribe to the official Rick Astley YouTube channel: https://RickAstley.lnk.to/subscribeYD\n\nFollow Rick Astley:\nFacebook: https://RickAstley.lnk.to/followFI\nTwitter: https://RickAstley.lnk.to/followTI\nInstagram: https://RickAstley.lnk.to/followII\nWebsite: https://RickAstley.lnk.to/followWI\nSpotify: https://RickAstley.lnk.to/followSI\n\nLyrics:\nNever gonna give you up\nNever gonna let you down\nNever gonna run around and desert you\nNever gonna make you cry\nNever gonna say goodbye\nNever gonna tell a lie and hurt you\n\n#RickAstley #NeverGonnaGiveYouUp #DancePop",
+      "download_progress": 100,
+      "download_url": "/download/1Lij6Z",
+      "downloaded_filename": "dlcache/download/1Lij6Z.mp4",
+      "duration": 212,
      "mode": "video",
-      "queued_timestamp": 1601481591,
-      "status": "downloading",
-      "thumbnail_url": "https://i.ytimg.com/vi/c3wRzxiQ8Zk/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLC4MWTAc7sY5uF6hFzNk2D0tawTSA",
-      "title": "Sing with Karl - Des Morgens Um Halb Viere [Old soldier and student way][All Stanzas]",
-      "tubio_id": "1KnEwb",
-      "uploader": "Karl Sternau",
-      "webpage_url": "https://www.youtube.com/watch?v=c3wRzxiQ8Zk"
+      "queued_timestamp": 1614984000,
+      "status": "finished",
+      "thumbnail_url": "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB_p0PncTtkrhaNDZtntrE3gKkoYw",
+      "title": "Rick Astley - Never Gonna Give You Up (Video)",
+      "tubio_id": "1Lij6Z",
+      "uploader": "RickAstleyVEVO",
+      "webpage_url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+      "quality": "720p"
    },
    {
      "description": "Latest video off of Lil Dicky's debut album \"Professional Rapper.\" Download the album here: http://smarturl.it/LilDickyiTunes \n\nWatch Lil Dicky create the most epic rap video, all while he $aves Dat Money! Click here for the documentary: https://www.youtube.com/watch?v=zkXpb20b-NQ\n\nDirector\nTony Yacenda\nwww.TonyYacenda.com\n\nProducer\nJim Cummings\n\nCinematographer\nAlan Gwizdowski\n\nMusic Video Editor\nBrian Vannucci\n\nDocumentary Editor\nBrad Allen Wilde\n\nPost Supervisor\nRyan Ross\n\nColorist\nSean Wells\n\nSound Mixers\nDi Le\nDarrell Tung\n\nSecond Unit DPs\nAdam Lee\nJeff Kulig\nLuc Delamare\n\nBoat Girls\nMelissa Soria\nSuzanne Quast\nJulia Misaki\n\nSpecial Thanks\n\"The Study\u201d Hollywood\nAvilaVIP\nMrs. \u201cK\u201d\nThe Noho Diner\nFrosty Treats/Amp Entertainment\n\nWeedmaps\nMaster and Dynamic\nRGF Productions\nJash\nMeUndies (www.meundies.com)\n\nand\n\nSarah Silverman\nKevin Durant\nDillon Francis\nHannibal Buress\nAbbi Jacobson\nIlana Glazer\nMark Cuban\nTom Petty\n\nSong produced by Money Alwayz\nSong Mixed by Rob Kinelski at The Fortress of Amplitude\nAssistant Engineer: David Baker",
@ -43,7 +61,8 @@
      "title": "Lil Dicky - $ave Dat Money feat. Fetty Wap and Rich Homie Quan (Official Music Video)",
      "tubio_id": "1KnEw2",
      "uploader": "Lil Dicky",
-      "webpage_url": "https://www.youtube.com/watch?v=yvHYWD29ZNY"
+      "webpage_url": "https://www.youtube.com/watch?v=yvHYWD29ZNY",
+      "quality": "360p"
    },
    {
      "description": "Get the new album \"Wintersaga\" here: https://smarturl.it/Wintersaga-NPR\n\nWind Rose states:\n\u201cMining is one of the most important activities for a Dwarf, naturally Wind Rose needed a theme song for this great honor of collecting these jewels from the soil, so sing with us with pride!!\u201c \n\n\"Diggy Diggy Hole\" originally written by Yogscast\n\nMixed and Mastered by Lasse Lammert",
@ -58,7 +77,8 @@
      "title": "WIND ROSE - Diggy Diggy Hole (Official Video) | Napalm Records",
      "tubio_id": "1KnEvV",
      "uploader": "Napalm Records",
-      "webpage_url": "https://www.youtube.com/watch?v=34CZjsEI1yU"
+      "webpage_url": "https://www.youtube.com/watch?v=34CZjsEI1yU",
+      "quality": "144p"
    }
  ],
  "cache_size": 4,
--- a/tubio-frontend-nuxt-app/store/dlcache.js
+++ b/tubio-frontend-nuxt-app/store/dlcache.js
@ -15,6 +15,8 @@ export const actions = {
        axios.post("/api", {
            request: "fetch_alltime_cache"
        })
+        //axios.get("/rest-dummies/cache.json", {
+        //})
        .then(function(response) {
            if (response.data.status === "OK") {
                context.commit("update", response.data.cache);