From 661e260022b9ad124a9dc490507214daabb9172f Mon Sep 17 00:00:00 2001
From: Leonetienne <leonetienne@hotmail.de>
Date: Sat, 13 Mar 2021 14:58:30 +0100
Subject: [PATCH] Made frontend support custom quality settings

---
 .../components/DownloadEntry.vue              | 19 +++++--
 tubio-frontend-nuxt-app/layouts/default.vue   |  4 +-
 tubio-frontend-nuxt-app/pages/index.vue       | 37 +++++++++++---
 tubio-frontend-nuxt-app/pages/settings.vue    |  2 +-
 .../static/rest-dummies/cache.json            | 50 +++++++++++++------
 tubio-frontend-nuxt-app/store/dlcache.js      |  2 +
 6 files changed, 85 insertions(+), 29 deletions(-)

diff --git a/tubio-frontend-nuxt-app/components/DownloadEntry.vue b/tubio-frontend-nuxt-app/components/DownloadEntry.vue
index 2f5aff7..9db084a 100644
--- 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 {
diff --git a/tubio-frontend-nuxt-app/layouts/default.vue b/tubio-frontend-nuxt-app/layouts/default.vue
index 78c1986..98fc334 100644
--- 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;
diff --git a/tubio-frontend-nuxt-app/pages/index.vue b/tubio-frontend-nuxt-app/pages/index.vue
index 06a3197..473603c 100644
--- 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;
diff --git a/tubio-frontend-nuxt-app/pages/settings.vue b/tubio-frontend-nuxt-app/pages/settings.vue
index 7550935..015d140 100644
--- 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
     };
   },
 
diff --git a/tubio-frontend-nuxt-app/static/rest-dummies/cache.json b/tubio-frontend-nuxt-app/static/rest-dummies/cache.json
index 2f8973f..d5d4be6 100644
--- 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,
diff --git a/tubio-frontend-nuxt-app/store/dlcache.js b/tubio-frontend-nuxt-app/store/dlcache.js
index 5c0bee5..81157e0 100644
--- 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);