Download all fixes

[julesmoretti]

Hello @fzakaria

I have added some google chrome in order for the download all to work:

https://github.com/julesmoretti/HypeMachine-Extension

look at the jules branch.

Also I have started to look into ways to have the download file be properly named as the download attribute is not currently working.

The closest solution (but not functional yet) is using the following:

jQuery('ul.tools').on('click', '.DownloadJulesSongButton', function() {
    console.log( "Downloading JULES - " + jQuery(this)[0].title, jQuery(this)[0].id );

    var title = jQuery(this)[0].title;
    var url = jQuery(this)[0].id;

    jQuery.get( url, function( data, textStatus, xhr ){
        console.log("JQUERY RESPONSE");
        var blob = new Blob([data]);
        var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = title;
                link.click();
    });
});

Where the .DownloadJulesSongButton is a simple span.

It sounds like you are busy these days but I would really love your help with this to get this back and working fully.

Cheers :)

[julesmoretti]

Been hacking at it further.... Some good progress but unfortunately I am missing something. I can open the song in another tab successfully, but downloading it fails... No idea why. Here is the code:

jQuery('ul.tools').on('click', '.DownloadJulesSongButton', function() {
    var title = jQuery(this).attr('id');
    var url = jQuery(this).attr('url');

    console.log( "Downloading JULES - " + title, url );

    var xhrfile = function(i,title, f) {
        var title = title;
        var c = new XMLHttpRequest();
                c.open('GET',i);
                c.responseType='arraybuffer';
                c.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        var percentComplete = Math.round( e.loaded / e.total * 100);
                        console.log('Downloading: ' + percentComplete + '%');
                    }
                });
                c.onreadystatechange = function (oEvent) {
                 if (c.readyState === 4) {
                     if (c.status === 200) {
                         console.log(c.responseText)
                     } else {
                         console.log("Error", c.statusText)
                     }
                 }
                }
                c.onload = function(e){

                    console.log("IN ONLOAD");

                    var u8 = new Uint8Array(this.response),
                            ic = u8.length,
                            bs = [];

                    while (ic--) {
                        bs[ic] = String.fromCharCode( u8[ic]);
                    };

                    f( title, 'data:audio/mpeg;base64,'+btoa( bs.join('')));
                };
                c.send(null);
    };

    var filefunc = function( title, mp3data ) {
        var anchor = $("<a />", {
                id : "id5",
                name : title,
                href : mp3data,
                download : title,
                target: "_blank"
        });

        anchor[0].click();
        window.open(anchor[0], "_top");
    }

    xhrfile( url, title, filefunc);
});

[fzakaria]

I don't think you'll be able to modify the file name unless they change something with the Blob API as part of Chrome.
The random file-naming was forced if you are downloading from a non-origin site.
(I think to help prevent cross site scripting attacks).

The download all button was borked ?

[julesmoretti]

@fzakaria ok I will see if I can keep on cracking on it because this whole renaming process is tedious. And yes the select all was broken.

[someburner]

@julesmoretti +1. If I get some time I can probably help out with this.

I think pre-pending the ID3 tag might not be that difficult. And actually a quick github search turned up a decent amount of things, enough to get started at least. Something like this might be good.

More info on wikipedia and id3.org.

As for how to do it cleanly with the current implementation, we could perhaps use the optional dataFilter method on the first response to insert the tag and just return the data untouched for the rest.

"The dataFilter callback option is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success."

[fzakaria]

I think the problem was Google chrome doesn't let you set the filename for files downloaded from a different domain.
Not sure if that has changed if they added new support through a plugin API

[julesmoretti]

@someburner - I love where your heads at, and the solutions you are suggesting. I also love the fact that they used Justice as an example Lol.

I will see if I can integrate this in the next week or two. Unless if @someburner you feel like giving it a stab first? If so just keep me in the look and I can try to chime in.

[someburner]

@fzakaria - I've seen filenames be strange before too and yeah I'd rather not mess with it. If you set the ID3 properly then filenames don't matter. The user can import with any music library program and have the library customize the name. Plus having weird stuff in the ID3 is OK vs. in a filename where special characters could cause problems.

@julesmoretti - Haha I didn't notice that. Hopefully good taste in music == good taste in code! I'll give it a stab in the next 2-3 days and report back. If it works out like it is in my head it shouldn't be too bad.

[julesmoretti]

@someburner - For sure it does! hahaha and thank you so much, you rock!