Ask for re download previously downloaded song (#67)

naqushab · Mar 18, 2021 · 6de7b1c · 6de7b1c
1 parent 187bff8
commit 6de7b1c
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ This extension requires JioSaavn API in the backend to fetch Download Links in r
 - Download an Album **(in progress)**
 - Download a Playlist **(in progress)**
 - JioSaavn Ad Block
+- Ask for re download previously downloaded song
 
 ## How to use it
 

diff --git a/downloader.js b/downloader.js
@@ -140,6 +140,7 @@ var getSongBlob = async function(song, bit, callback) {
         callback(blob);
         console.log(`${song.song} has been downloaded...`);
         notify(`${song.song} has been downloaded...`, 'success');
+        localStorage.setItem('all_downloaded_song', (localStorage.getItem('all_downloaded_song') + ', ' + song.perma_url))
     } catch (err) {
         notify(`Sorry, That's an error !`, 'error');
     }

diff --git a/src/inject/inject.css b/src/inject/inject.css
@@ -49,4 +49,88 @@
 
 .toast.error {
     color: red;
+}
+
+.ask_for_download {
+    z-index: 10000;
+    position: fixed;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.245);
+}
+
+.ask_for_download .container_dld {
+    width: 350px;
+    border-radius: 10px;
+    padding: .9rem .6rem;
+    background-color: white;
+    animation: hover_up .6s;
+}
+
+.ask_for_download .container_dld h2 {
+    text-align: center;
+    margin: 0;
+    margin-bottom: .8rem;
+    padding: .5rem;
+    font-family: Lato;
+    font-size: 1.2rem;
+    color: #1c1d1d;
+    font-weight: normal;
+}
+
+.ask_for_download .container_dld .button_download {
+    float: right;
+    padding: .4rem;
+}
+
+.ask_for_download .container_dld .button_download button {
+    padding: .5rem 1rem;
+    margin-right: .5rem;
+    cursor: pointer;
+    border-radius: .2rem;
+}
+
+.download_yes {
+    background-color: #2BC5B4;
+    color: white;
+    font-family: Lato;
+    border: 2px solid #2BC5B4;
+}
+
+.download_yes:hover {
+    background-color: #ffffff;
+    color: #2BC5B4;
+}
+
+.download_yes:focus {
+    outline: none;
+}
+
+.download_no {
+    font-family: Lato;
+    background-color: #efefef;
+    border: 2px solid #efefef;
+    color: rgba(0, 0, 0, 0.673);
+}
+
+.download_no:hover {
+    background-color: rgba(0, 0, 0, 0.673);
+    color: #efefef;
+    border: 2px solid rgba(0, 0, 0, 0.673);
+}
+
+.download_no:focus {
+    outline: none;
+}
+
+@keyframes hover_up {
+    0% {
+        transform: translate(0px, 25vh);
+    }
+    100% {
+        transform: translate(0);
+    }
 }
diff --git a/src/inject/inject.js b/src/inject/inject.js
@@ -8,7 +8,7 @@ var addDownloadButtonToAllSongs = function() {
 
     songsEle.each(function() {
         var $this = $(this);
-        var btn = $('<div class="o-snippet__item single-download-button"><span class="u-link"><i class="o-icon--large u-pop-in o-icon-download"></i></span></div>');
+        var btn = $('<div id="the_progressive_button" class="o-snippet__item single-download-button"><span class="u-link"><i class="o-icon--large u-pop-in o-icon-download"></i></span></div>');
 
         try {
             var song = this.href;
@@ -18,34 +18,63 @@ var addDownloadButtonToAllSongs = function() {
             e.preventDefault();
             var $btn = $(this);
 
-            $btn.find('span').find('i.o-icon--large').removeClass('o-icon-download');
-            $btn.find('span').find('i.o-icon--large').addClass('o-icon-download-progress');
-
-            try {
-                var result = await (await fetch(`https://jiosaavn-api.vercel.app/link?query=${song}`)).json();
-                if (result.result === 'false') {
-                    $btn.find('.o-icon--large').removeClass('o-icon-download-progress');
-                    $btn.find('.o-icon--large').addClass('o-icon-close');
-                    notify(`Sorry, That's an error`, 'error');
-                    console.log('Failed to download song' + $this.href)
-                } else {
-                    downloadWithData(result, function() {
-                        $btn.find('span').find('i.o-icon--large').removeClass('o-icon-download-progress');
-                        $btn.find('span').find('i.o-icon--large').addClass('o-icon-download');
-                    });
-                }
-            } catch (err) {
-                $btn.find('.o-icon--large').removeClass('o-icon-download-progress');
-                $btn.find('.o-icon--large').addClass('o-icon-close');
-                notify(`Sorry, That's an error`, 'error');
-                console.log('Failed to download song')
+            if (localStorage.getItem('all_downloaded_song').includes(song)) {
+                const re_download_ask = document.createElement('div');
+                re_download_ask.classList.add('ask_for_download');
+                re_download_ask.id = 're_download_ask_id';
+                re_download_ask.innerHTML = `<div class="container_dld">
+                        <h2>You previously downloaded this song. Would you like to download this song again?</h2>
+                        <div class="button_download">
+                            <button onclick="document.getElementById('re_download_ask_id').remove();" class="download_no">Cancel</button>
+                            <button id="re_download_ask_yes" song_url="${song}" class="download_yes">Download</button>
+                        </div>
+                    </div>`
+
+                $('div[id=root]').prepend(re_download_ask)
+
+                document.getElementById('re_download_ask_yes').addEventListener("click", async function() {
+                    $btn.find('span').find('i.o-icon--large').removeClass('o-icon-download');
+                    $btn.find('span').find('i.o-icon--large').addClass('o-icon-download-progress');
+                    var song_url = document.getElementById('re_download_ask_yes').getAttribute('song_url')
+                    download_song_main(song_url, $btn)
+                    document.getElementById('re_download_ask_id').remove()
+                })
+            } else {
+                $btn.find('span').find('i.o-icon--large').removeClass('o-icon-download');
+                $btn.find('span').find('i.o-icon--large').addClass('o-icon-download-progress');
+                download_song_main(song, $btn)
             }
         });
 
         $this.parent().parent().parent().parent().parent().last().append(btn);
     });
 };
 
+
+
+var download_song_main = async function(song, $btn) {
+
+    try {
+        var result = await (await fetch(`https://jiosaavn-api.vercel.app/link?query=${song}`)).json();
+        if (result.result === 'false') {
+            $btn.find('.o-icon--large').removeClass('o-icon-download-progress');
+            $btn.find('.o-icon--large').addClass('o-icon-close');
+            notify(`Sorry, That's an error`, 'error');
+            console.log('Failed to download song')
+        } else {
+            downloadWithData(result, function() {
+                $btn.find('span').find('i.o-icon--large').removeClass('o-icon-download-progress');
+                $btn.find('span').find('i.o-icon--large').addClass('o-icon-download');
+            });
+        }
+    } catch (err) {
+        $btn.find('.o-icon--large').removeClass('o-icon-download-progress');
+        $btn.find('.o-icon--large').addClass('o-icon-close');
+        notify(`Sorry, That's an error`, 'error');
+        console.log('Failed to download song')
+    }
+}
+
 /**
  * Add Album Download Button on Albums
  */
@@ -152,6 +181,11 @@ var hideAds = function() {
 };
 
 $(document).ready(function() {
+
+    if (localStorage.getItem('all_downloaded_song') === null) {
+        localStorage.setItem('all_downloaded_song', 'https://github.com/naqushab/saavn-downloader-extension')
+    }
+
     document.querySelectorAll("nav.c-nav > ul.c-nav__list > li.c-nav__item")[2].innerHTML = `<a href="https://github.com/naqushab/saavn-downloader-extension" target="_blank" class="c-nav__link">Star this</a>`;
 
     hideAds();