@CyberIntruder

I fixed the issue with the song stopping when the phone screen turned off. It turns out putting a video with a single frame (the thumbnail) into an audio component does some video things and needs the hardware decoder, which was why it was stopping. I fixed it by converting the video file into an audio file in the download route. I also moved the logic that played the songs (next song when the current one finishes, etc.) from the watch page to a context, so it works on every page, not just the watch one.

I tried to add the actual PWA support, and I did get the app to actually install (in chrome, not firefox) and cache the pages. It works offline, but there still are many issues that I don’t know how to fix, for example it reloading (resulting in the audio stopping) when I click a link, which wouldn’t normally happen when online. Also the audio stops playing when the screen turns off in chrome, but it doesn’t in firefox. I can start it again through the media session notification and then it plays.

I made the lists reorderable, added media session support, created this lyrics player and added a three dot menu that now contains the old download functionality and moved the offline data indicators next to the three dots (I also added the option to add/remove the current song from the playlist).

I made the playlist/play next list at the right of the screenshot. The functionality is inspired by youtube music – if the current song finishes, play the next one. If there isn’t a next one in this playlist, play the first from a “suggests” list and move it from the bottom list to the top one. This was really hard to do, because I wanted the url to update the song id without reloading the page, actually autoplaying the next song, etc. I also fixed some UI/layout issues.

I added a responsive sidebar with a downloaded songs list. Later I added this layout to the main layout.tsx so it is on every page. I also made a global system for playing music so it doesn’t pause when you go to another page, and because of that I had to make my own UI controls component for it. And finally, I made the currently playing song to display on the bottom.

I deployed the project to github pages, added an icon, and added this image to the README

I polished the UI with the help of some AI, it looks way better now in my opinion. I also optimized the app a lot by for example downscaling the textures and optimizing some parts of the code, and it loads now a lot faster than before. Then I added a texture to the moon and seasonal textures to earth that change based on what month it is.

Firstly I made this search page that shows the search results, and then later I made this watch page where the user can download a song and play it.

Firstly I fixed some major errors in the solar system simulation, like the planets spinning in the wrong direction, the earth not aligning it’s rotation with the sun correctly, etc. Other than that I improved the UI a little bit, it now also shows the current time in the simulation and I also added a toggle for the orbit paths when the earth is focused. Then I added these lines that show the tilt of planets. I also improved the sun’s shader so it looks better and changed the earth’s atmosphere shader so it doesn’t display those jumps as it did before. (PS: Did you know Uranus has for some reason a massive 98 degree tilt like this?)

I made a simulation of our solar system. It isn’t extremely precise, because when I tested some solar eclipses, it didn’t align completely (well it didn’t align at all…), but I want to improve this in the future. I did use a lot of AI to help me with the position and rotation calculation system, because that was a lot of complex math and it would take me ages to get something working 🙏 . After that I reworked the earth scene to display this more realistic model of earth and hide the orbit paths when I focus it. I also added some movement to the clouds, it looks much better when they move at least somehow.

I didn’t have an idea of what I want to make at the start, so I naturally asked AI. One of the first ideas it gave me was this satellite tracker web app thing, so I decided to start doing that. After some time though I decided to make firstly a super realistic scene with earth, so I worked on that. It’s not done yet, not even close, but I’m slowly getting there! (PS: There’s also a moon in the screenshot!)