Winampify Feedback

[captbaritone]

I spent some time this morning playing with Winampify in detail. It’s so good! There are so many little details which you get just right. I really admire how you used the operating system analogy to inspire your app design, but didn’t let it constrain you. I love the ways you’ve innovated on top of that analogy and come up with new ideas and patterns.

I took some notes as I played with it, I hope you find them useful. Some are questions, some are suggestions and some are gripes 😄. I want to be clear that these are just my thoughts/opinions and you are welcome to take or leave any of them.

Overall really great work. It’s so gratifying to see someone taking Webamp, which was really just a novelty, and building something that actually serves users. If Webamp was a research project to see if it was possible to implement Winamp in the browser, Winampify is the product that brings that research to market. I’m so grateful for your work. ❤️

A few questions:

1. What is the current status of Winampify? Would you be comfortable with me actively talking about it on Twitter, or are you still considering it “pre alpha”?
2. How close are you to being able to use the NPM module directly?

General Feedback:

Note: I’ve numbered this list not because some are more important than others, but to give an easy way to reference them.

1. I love the new welcome screen that uses a Windows window! ❤️ However, I found the disabled controls (close, search, Spotify, back) confusing.
2. The “X” for closing windows seems too close to the right of the window. I think I expect the right margin to match the top and bottom margin.
3. Loading screen looks great!
4. Transition out of loading screen is very satisfying.
5. I ❤️ that my state is preserved across visits! So cool to drag something to the desktop and have it there when I come back.
6. Is there any way to keep me logged in when I come back or reload the site?
7. Webamp has a (currently private) feature for serializing state. This includes things like window position, volume etc. If you want to make use of that, let me know and I can show you how it works. I’d be happy to make it a public API if you want some promise of stability.
8. The hover state of the close window “X” should have consistent margins
9. The animation when you focus the search input is 💯
10. The fact that the search options popup positions itself smartly is so good!
11. The way long track names go all the way to the side of the window (no margin) seems a bit odd. I looked at OSX and it truncates long file names in the middle with a “…” and then keeps the margin on the right.
12. If end up doing that (the above suggestion) you might also ensure the underline under the search result sections has right margin.
13. Folder icons with album art??? Such a great detail. I didn’t even realize it at first.
14. When a window is loading it has no title. When it finishes loading, the title appears. The height of the title bar changes when the title appears. This causes a weird jump during load, which is a shame since you have such nice loading states. I’m sure it would be pretty easy to ensure the height of the title bar was constant independent of if it has text in it.
15. When I first open a window, it has a back button, but that button does not work. Maybe grey it out like Chrome does? I’m not sure what Explorer does.
16. The placement of the Spotify icon in each window confused me. I thought it was going to be specific to the window that I had open. Similar with search. Given its position, I thought it was going to filter the results in my current window. That said, I don’t have a better suggestion.
17. If I reload Webampify with a smaller window, icons that I’ve placed on my desktop may no-longer be visible. Again, I don’t have a great solution to this. With Webamp I once explored storing the absolute position of each window, but then “normalizing” it to something on screen when I render. That way the user could resize their window and keep all icons/windows on screen and when they return to their original size it would go back to their original intent. Maybe this is too magical. Just one idea.
18. I love that I can move windows, and that I get the right cursor when I hover a window title.
19. Resizing windows works great 🎉
20. There are a number of places where you might be able to use the not-allowed cursor (or something similar):
    1. When dragging a file on top of a window that cannot accept files (is that all of them?)
21. Does Spotify’s API let you create/edit playlists? Would be so cool to allow users to create folders and then add/remove/sort tracks and have those show up as playlists in their native Spotify clients. Or, we could also make use of Winamp’s ability to save playlists to save playlists as some kind of file. Webamp has not implemented it, but it should be possible for Winampify to hack something, and I’d be happy to help you find a way.
22. Should the “eject” button on Webamp open some other kind of file picker that lets users open Spotify tracks? If not, you should probably expand your media class to support local files.
23. It might be worth binding to the “equalizer” button in the main window and calling “stopPropagation” and maybe even showing an alert. It’s confusing that the light turns on and off but the window does not appear.
24. It would be amazing to stick a few skin icons on the desktop which the user could click to change the Webamp skin. If you want to do this, let me know and I just added a method for this.
25. The username and profile picture are visually very significant at all times, but it’s rarely important information for the user. Is there a reason this is so prominent? Somewhat related: Is there a way for the user to log out? I kinda expected clicking on my name/profile picture to give me that option.
26. Dragging folders onto Webamp and dropping them is not prevented, and it seems to cause an error.
27. Do you have any kind of error logging enabled? I’ve had good success with Sentry.
28. It would be cool if I could select multiple tracks with ctrl/shift/cmd+click. That said, when I did this for Webamp it was a HUGE pain in the ass. So many things become more complicated.
29. Why does the “x” close icon on windows have the hand cursor when I hover? It seems like everywhere else you have a button you just use the regular arrow cursor, which makes sense for the operating system analogy.
30. Wow! Such a cool detail that I can rename tracks that I’ve dragged to my desktop.
31. It would be cool to have a Winamp icon on the desktop. At least for when the user closes Webamp. If you don’t want to do this, you might want to prevent users from closing Webamp. You can do this by calling the cancel callback passed to [onWillClose](https://github.com/captbaritone/webamp/blob/master/docs/usage.md#onwillclosecb-cancel---void--void---void)
32. Thanks for making Winampify open source! Makes me so happy.

[remigallego]

Thank you so much for this, this is extremely valuable and I will definitely consider every point of your feedback list carefully! 🙂

1. I was waiting for a stable build of the "unforked" version to go live before updating the status, I guess I'm at that point now so I've removed the pre-alpha status. I'm periodically pushing small fixes and updates right now (see Changelog) before the next big version which would include playlist support as well as some of your suggestions like Winamp skins, or general user settings.
   Please go ahead and advertise the project as much as you want! The more users the better I can get a sense of how to improve it.

2. Very close, I believe the only thing missing in the npm module is __customMediaClass? Or did that go through already?

[captbaritone]

Yay! The most recent version of Webamp beta (webamp@next should have the __customMediaClass code in it.

[captbaritone]

Feel free to close this issue whenever you wish.

[anuras]

I just want to use thread to say how awesome this is. I have been waiting for exactly this for years now! My opinion is that Spotify user experience sucks, especially around building and managing playlists, and as far as I'm concerned nothing has beat Winamp yet in terms of the user experience for a music listener. Congrats on your work!