Ideas for improvement

[StreakyCobra]

Hi there!

As you can guess from the timing I discovered your project on HN today. I was positively surprised to see that it's not only working well, but that you can actually use it as a real player with external music providers. Congrats and thanks for the work :bow: And an extra thanks to make it opensource :100: !

Spotify is quite oriented towards individual songs and playlists, so with time I kind of forgot the notions of artists and albums. Using this "old" iPod reminded me about them and now I want to start "adding" artists and albums just for the pleasure to navigate them. Having this simple, easy and efficient interface is refreshing in comparison with Spotify!

After trying it a bit on my phone (Android) here are a few ideas for improvements:

Haptic feedback

The wheel works well. Having a haptic feedback (vibration) would make it even more enjoyable. I don't know what latency can be obtained with the haptic feedback though.

Centering on screen

The vertical centering on desktop is correct but on mobile phone the iPod get stuck on top of the screen:

On big screen like my Note 10 the wheel is quite difficult to reach with the thumb, so having it centered would make it more comfortable to use.

Appearance when installed as an application

This is probably a personal preference. I think I would like having it full-screen when installing it as an app from the website. This means without notification bar and home buttons. I think there is a "display": "fullscreen" option that can be put in the manifest.json for that. It helps to feel you have a "real" device and not just an app on the phone (side note that's what I like about my DM42 calculator skin full-screen, it looks like a real calculator).

A second point would be to set the background to black also when installed as an app. This would look more fancy than white, especially on OLED screens.

Liked songs

Right now I have a long list of "Liked songs" on Spotify that is difficult to navigate. As far as I saw these songs are not shown in this player. Maybe it could be possible to have a section "Music » Liked songs" that automatically organize them by artists/albums and can be navigated like the rest? That would be awesome!

---

Feel free to do whatever you want with this list and issue, these are just feedback and I'm not expecting you to change/fix things on demand 😄

[tvillarete]

Hey @StreakyCobra, thanks for the fantastic write-up. Glad you like the project! Here are my thoughts on each of your points:

Haptic feedback

A PR has already been filed to add this feature to Android. I'd love to get your feedback on it once it's live as I don't actually have an Android device to test on

Centering on screen

This one's a tricky issue to solve as there are so many different sizes and it's hard to get the experience completely right on all of them. My implementation was built around iPhone screens, which come in way fewer varieties. More thoughts on this over in this thread

Appearance when installed as an application

Would you mind sending a screenshot of what this looks like on Android? This must be an Android-specific issue, because iOS takes up the full screen when added to the homescreen.

Liked songs

This is a great suggestion. I'll see if Spotify's Web API exposes something along those lines 👍

[RaulGF92]

Hi! Actually, I'm doing a fork for use electron.js and use the pod-like desktop app.

One of the things I would like to improve is the use of the MusicKit and SpotifyKit, I was reading the code and I see that it is using TypeScript. Why don't place an interface for des capsules the UI with the different music providers?

This is the only bad thing I see in this amazing project. These layers have a high dependencies injection between UI and music providers.

We keep in touch!

I put you a proof of what I'm doing:

[StreakyCobra]

@tvillarete Thanks for you reply :)

---

Haptic feedback

Sure, feel free to ping me when it's merged if you need feedback.

Centering on screen

Yes I guess it's difficult to optimize for all sizes. My thinking is not to do advanced optimizations, simply to use centered/bottom alignment. That should already be better than top alignment on most devices. Conceptually screen size varies a lot, but the thumb size is limited and people hold their phone from the bottom, so it would make sense to have the wheel close to the bottom to have it reachable with the thumb whatever big the screen is.

I think I would not mind a stretched version as discussed on the other thread, to be tried. Maybe the form factor of 4th generation iPod nano would be more adapted to nowadays phone screens?

At the end of the day the ideal would be to let user decide about this, that could be done through the "Settings" menu (Appearance: Top, middle, bottom, stretched) and different CSS classes.

Appearance when installed as an application

Sure, it looks like this once installed on my phone:

And personally the way I would see it is the following:

This is:

• No status bar and no navigation bar with "display": "fullscreen"
• Black background for OLED screens
• Bottom alignment for easy thumb access
• The form factor is fine

Liked songs

Glad to see you like the idea :smiley:

[tvillarete]

Hey @StreakyCobra, I wanted to update you on this issue. Most of what you've suggested has been implemented! Specifically:

• Manifest now includes "display": "fullscreen" and uses a black background
• Mobile view takes advantage of the full height
• Haptic feedback (working on merging that very soon)

The last item on my agenda is to look into displaying liked songs. I'll file a separate issue for that and close this one. Thanks a bunch for your suggestions!

[StreakyCobra]

Thanks @tvillarete :bow: I tried it quickly and that looks nice!