Create some Mockups about spotifube

[zainimran]

I tried something on proto.io since I am using that tool on another project right now.
Link to the prototype: https://pr.to/O2X7Z9/

[djalmaaraujo]

@zainimran Thanks for your contribution. Here's my 2 cents for the simplest MVP ever:

[sdhutchins]

I think we could break the app into phases with goals for each phase.

Phase 1

• Download to a user selected folder by pasting a link of an album, song, or playlist.

Phase 2

• Selecting which songs from a playlist or album to download.

Phase 3

• Searching for a song, album, playlist and downloading it.

[djalmaaraujo]

@linusg Sure. I will try to provide some mockups. Let's try to have some "user oriented stories"? How you want to use this UI?

• We want to drag and drop a playlist/song/album link?
• We want to drang and drop a *.txt file generated?
• A very simple UI would be enough?
• What would be the most important feature for the MVP?

Example of user stories:

" As a user I want to be able to open the app and already drag a playlist link and get the list of songs loaded with a button to download the *.txt "

" As a user I want to be able to drag a *.txt file with a list of spotify songs and download the mp3s to a default folder "

[djalmaaraujo]

👍

I will deliver some mockups by the end of the week, maybe. Let's see how it goes

[sdhutchins]

Hello! I'm still interested in contributing. I have a solid background in html/css and some javascript. I agree with starting with a very simple UI as well & copy/paste of a link.

[djalmaaraujo]

We won't have mockups for today. I will try for next week, trying to find the right schedule for this.

[zainimran]

Hey guys. I have been following this conversation and I feel like contributing too. I have experience in front end development and knowledge of the mean stack. Plus i can make really good hifi prototypes too. @sdhutchins<https://github.com/sdhutchins> and others please let me know how i can assist. Zain. On Nov 25, 2017, at 6:09 AM, Shaurita D. Hutchins <[email protected]<mailto:[email protected]>> wrote: I am @linusg<https://github.com/linusg>. I'll have some stuff tomorrow afternoon — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#1 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AQ-p_VuHbjwIShuWuprjURDY5ngHcC6-ks5s52jPgaJpZM4P8F8Q>.

[linusg]

Talking about the CLI integration is important from the beginning on I think. For a quick start we should assume all required scripts and binaries are in $PATH. Next, we could work with this code:

const ChildProcess = require('child_process');

ChildProcess.exec('python3 -V', (err, stdout, stderr) => {
  if (err)
    console.error(err);
  console.log(stdout);
  // console.log(stderr);
});

Which works like a charm in my electron-react setup:

[linusg]

I will close this one for now, as we have reached this issue's aim: having some mockups 🎉
Please have a further discussion in #4.

I will add the mockups to the issue mentioned in a few seconds.

[linusg]

I won't go for a tray application but rather for a single-window application you manually invoke and close when done.

Even though I do not draw mockups that often, I would be happy starting on one and then move on to the actual coding stuff after having some of these decided.

[djalmaaraujo]

@linusg I agree. Tray is more like a daily-use app, this one is for a few usage.

[linusg]

...or for applications where a real windowed-UI would be overkill, e.g. Redshift or Diodon (clipboard manager) 😉
I better leave making the mockup to you as I currently have no great tool for this. Bringing life into the UI then is what I really love doing 😄

Also I will leave the decision completely to you, but as I'm planning to actively contribute to this project as I do on the spotify-downloader repo (where I also thought about starting a UI wrapper as this one some time ago), you may add me as a collaborator.

[linusg]

We want to drag and drop a playlist/song/album link?

Drag and drop is a great thing, but I think dragging links is rather unintuitive. I would go for an <input> here.

We want to drang and drop a *.txt file generated?

Let's do this. Even though I guess most users would use use a feature like "enter playlist url here and click download". Still useful though.

A very simple UI would be enough?

Let's start with a simple one, adding more features as time goes on. I would set the goal to a fully-functional wrapper of all spotify-downloader features, meaning there should be continued work on this particular project as development on our side goes on.

Another idea I have in mind and don't want to forget, therefore writing it down: what about asking for a target path the first time one presses the "download and convert" (or whatever) button, stating the input will be saved and can be changed later? Most will probably store all their music at one place.

[djalmaaraujo]

I like your suggestions, but while I like the idea of having all features, this is not good for MVP or to have a good pace for a version 0.1, you know?

I think the idea of pasting a playlist link/song/album and hit download to a specific folder is a good start.

Also, we need to find a way to embed the CLI into this app or as a first version, we just put a link with instructions to the user have the CLI installed already.

[linusg]

Sure, it's meant to be the long-time goal, the final aim 😉
Surely we have to start small with v0.1. Indeed, making a working download button for a given playlist url seems to be a good start.

For the beginning invoking python and passing the necessary parameters to the script would be sufficient. Later I would even add a check, if python, the script (which we could possibly embed, yes) and ffmpeg are accessible.

[djalmaaraujo]

@sdhutchins Feel free to contribute. We will have some mockups in the next days

[linusg]

Probably @sdhutchins is working on something?

[sdhutchins]

I am @linusg. I'll have some stuff tomorrow afternoon

[linusg]

@zainimran surely, let's wait for the mockups. Later on we will have enought to do for sure.

@sdhutchins so exited!

[sdhutchins]

@linusg won't get to it tonight. le sigh I have some emergency lab work to do.

[linusg]

No problem, take your time. For me it's not that important for now as it's pretty late here. These timezones suck though. Until then 😴

[djalmaaraujo]

I feel like everybody wants to do something. Let's do this..

I will deliver some mockups today and we create a schedule for the rest. Btw, feel free to post what ever you want here, @zainimran, you can start and we can review. It won't be a waste of time.

[linusg]

I'll have some stuff tomorrow afternoon

I will deliver some mockups today

Any update here? 😉

[linusg]

@zainimran
Boom, here we go! Thanks for your work! What about moving the download button to below the list? And I find the down facing arrow rather confusing, seems like a second download button... However, I like the expected usage workflow, pasting a playlist link, (de) selecting some songs and hitting download 👍

So, who agrees with this design along with my proposed change and who's willed working on what? 😊

[linusg]

Uh, and I think we might not use their icon for the application 😐

[zainimran]

Yeah, the Spotify icon is there just as a placeholder until we design our own icon (assuming if we do). The download button right next to the input box was intended as a button to fetch the playlist once there was a link in the input box. Let’s see what others think too. I’ll be happy to make any changes which could improve our workflow 😊 Zain. On Nov 28, 2017, at 3:22 AM, Linus Groh <[email protected]<mailto:[email protected]>> wrote: Uh, and I think we might not use their icon for the application 😐 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AQ-p_UL1f2abydun7bfkWuwi61Ko_3xYks5s6zYMgaJpZM4P8F8Q>.

[djalmaaraujo]

Leave comments, suggestions. This is the simplest MVP possible and simple. Because we can test the communication with the CLI and see how it's going to work.

[djalmaaraujo]

To be honest, as a final user of this application, I can't see myself doing anything different than pasting a playlist link, pressing download and choosing a folder. Sure we can do more after the mvp, but for me, that would be more than enough.

[linusg]

Because we can test the communication with the CLI and see how it's going to work.

That's true. BUT I would love the feature of de-selecting songs, it's what annoys me with spotify-downloader the most. About the CLI, if we need more options ore output I'm sure I can do something about it 😉

Most important for me right now: who will make the first step, starting with code? I think you had react in mind, but I would rather start with some simple markup, basic styles and JS.

Thoughts?
And, I highly vote for switching to npm which I love :P

[djalmaaraujo]

BUT I would love the feature of de-selecting songs, it's

Sure, we can try to put this feature. But this would require more stuff, because the CLI don't return the artist name, album, etc, we only get the *.txt. It's a LOT of work to put in place api keys for spotify, a spotify application in developers console, etc.

who will make the first step, starting with code?

This repo is open, feel free to jump. The code in place right now is already READY to go... react is installed, you can add css, html, etc.

And, I highly vote for switching to npm which I love :P

What? I don't understand what you are saying. Are you talking about yarn? I don't think it's a safe approach to remove yarn, just because yarn exists because npm failed a lot with the community in the past year. Every project these days uses yarn as an alternative (that uses npm under the hood), so I strongly recommend to keep yarn. If you have any questions about how to use, feel free to ping me.

[djalmaaraujo]

@linusg If you feel more confortable with with just plain html/css/js, feel free to put some codepen, jsfiddle, etc and I will port to the existing code for you, so you don't have to deal with react right now.

[linusg]

Sure, we can try to put this feature. But this would require more stuff, because the CLI don't return the artist name, album, etc, we only get the *.txt. It's a LOT of work to put in place api keys for spotify, a spotify application in developers console, etc.

As I said, I can easily add a flag to give us desired output we can parse.

This repo is open, feel free to jump. The code in place right now is already READY to go... react is installed, you can add css, html, etc.

Sure. I will try starting tomorrow morning, when I have some hours open. (Now it's 0:20 here, so...)

What? I don't understand what you are saying. Are you talking about yarn? I don't think it's a safe approach to remove yarn, just because yarn exists because npm failed a lot with the community in the past year. Every project these days uses yarn as an alternative (that uses npm under the hood), so I strongly recommend to keep yarn. If you have any questions about how to use, feel free to ping me.

So, this is a misunderstanding of mine, sorry. Didn't knew yarn uses npm under the hood, I will have to read up on that a little. Have you an example or two of how npm failed?
So, keeping yarn 😄

@linusg If you feel more confortable with with just plain html/css/js, feel free to put some codepen, jsfiddle, etc and I will port to the existing code for you, so you don't have to deal with react right now.

I am comfortable with react but not as efficient as with oldschool HTML. 😉
No problem with directly moving on to react, but expect some structuring issues soon or later...

[sdhutchins]

Breaking things into phases could help us better focus our efforts on the different features we'd like to see with the app. We could make all of those phases 1 phase and work towards implementation. Obviously, someone needs to be focusing on integrating the cli with the desktop app (I'm open to that).

[sdhutchins]

This is my vision for the app - at least the first/initial release.