Made frontend support custom quality settings

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 {

tubio-frontend-nuxt-app/layouts/default.vue

@@ -24,8 +24,8 @@ export default {
 
 <style lang="scss" scoped>
 .main-column {
-  width: 80%;
+  width: 70%;
-  padding: 0 20% 50px 20%;
+  padding: 0 0 50px 0;
   background-color: #0005;
   box-shadow: 0 0 50px 50px #0005;
   min-height: 100vh;

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">
+        <div class="flex">
-          <select name="mode" id="mode" ref="mode" class="dropdown">
+          <!-- Mode selector -->
-            <option value="video">Video</option>
+          <div class="flex-shrink button-submit flex-grow-0 md:ml-4">
-            <option value="audio">Audio</option>
+            <select name="mode" id="mode" ref="mode" class="dropdown">
-          </select>
+              <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;

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
     };
   },
 

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",
+      "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": 98,
+      "download_progress": 100,
-      "download_url": "/download/1KnEwb",
+      "download_url": "/download/1Lij6Z",
-      "downloaded_filename": "dlcache/download/1KnEwb.mp4",
+      "downloaded_filename": "dlcache/download/1Lij6Z.mp4",
-      "duration": 413,
+      "duration": 212,
       "mode": "video",
-      "queued_timestamp": 1601481591,
+      "queued_timestamp": 1614984000,
-      "status": "downloading",
+      "status": "finished",
-      "thumbnail_url": "https://i.ytimg.com/vi/c3wRzxiQ8Zk/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLC4MWTAc7sY5uF6hFzNk2D0tawTSA",
+      "thumbnail_url": "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB_p0PncTtkrhaNDZtntrE3gKkoYw",
-      "title": "Sing with Karl - Des Morgens Um Halb Viere [Old soldier and student way][All Stanzas]",
+      "title": "Rick Astley - Never Gonna Give You Up (Video)",
-      "tubio_id": "1KnEwb",
+      "tubio_id": "1Lij6Z",
-      "uploader": "Karl Sternau",
+      "uploader": "RickAstleyVEVO",
-      "webpage_url": "https://www.youtube.com/watch?v=c3wRzxiQ8Zk"
+      "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,

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);