Spotify Mobile Svelte

souriya777

A clone of Spotify mobile app, in svelte 🚀

Demo Download

spotify-mobile-svelte

A clone of Spotify mobile app, in svelte 🚀

Demo: https://spotify-mobile-svelte.vercel.app/

philosophie ⚜️

KISS DRY ACID ETC (Easier To Change) : decoupling, single responsability principle No broken windows Stone soup

TODO

mvp

configure a PREPROD env in VERCEL
refactor(string-utils & souriya-utils)
feat(stack-ui): change background-color depending on view -- works :) => make it independent
update "store-utils.writableLocalStorage" => chrome extension zenblock
feat(stack-ui): add slide in -🔴 feat(stack-ui): add slide out when clicking back button -🔴 feat(stack-ui): resolve child, grand-child etc... -🔴 feat(stack-ui): store navigation in an object -🔴 feat(stack-ui): "switch view" when click tab, create view when "detail" -🔴 remove StackUIManagerOLD
feat(layout): one stack views by route
feat(ux): can I have native vibration ? (eg. move song in queue)
feat(ui): drag'n drop
feat(ui): use use:onTap
position fixed : player & menu
feat(navigation): improve player & menu
+end content height === player + nav
feat(button): onTap ? TRANSITION
utiliser le view transition API à la "svelte menu"
feat(effects): fade effect when switch
feat(effects): slide-left when in
feat(effects): slide-right when out
implement
feat(player): can seek position by drag'n'drop progress bar
feat(ui): add waiting visual indication when fetching is too long
feat(mylib): can select other song
feat(search): design
feat(queue): design -- feat(player): what is default queue ? -- extract track_window next_tracks ?
feat(detail): design
space
color
px
feat(cache): find a strategy -- how knowing which track are contained in liked playlist ? -- invalid cache, when rename playlist -- invalid cache, when create playlist
feat(cache): optimize it
feat(service-worker): invalidate when add like song ?
feat(whaou): use transition https://www.youtube.com/watch?v=q_2irZO4SS8

perf

manage 429 cases => when someone has a lot of playlists, or have a lots of songs in playlists
feat(service-worker): strategy what, when
feat(realtime) : sync when ?
lazy load images
fix BetaLikedImg
lighthouse

demo

how puting karaoke at first ?
answer https://stackoverflow.com/questions/70540783/spotify-playlist-items-sorting-mechanism-in-web-api
feat(service-worker): automate swVersion when building app ?
force refresh by reload '/'
found in code where can I use isEmpty from string-utils
move $player.activateElement() elsewhere (because we want to auto-sync without clicking)
reflect a "car" presentation (audible-like)
test synchronize... hard...
TODO test ?
TODO feat(store): refactor store in multiple files
ERRORS feat(spotify-api): implement quota-limit with code 429
TODO/FIXME uncomment
how to test on mobile/desktop ?
feat(>iphone): make responsive for desktop ?
feat(app): add a direct shortcut
present it to Svelte Society
make article
live coding

bonus

feat(logout): can logout
feat(browser): manage back search (no dependent of char by char input)
can't delete playlist...
playwrite to ket "pinned" or "sort" functionnality (mathieu) ? https://playwright.dev/docs/running-tests
fix in SpotifyApi.test.js const actual = await SpotifyApi.extractPlayerStateFrom({ ...PLAYER_STATE_API_JSON });
feat(player): can manage other players
fix(spotify-connect): only a single instance in devices...
TODO do I use refresh_token ?
🚀 EXTRA : tag liked songs
🚀 EXTRA : shuffle from all playlist
feat(player): load song in advance ?
test-unit on CI
feat(loading) : add spotify logo (ball)
pause écouteurs bluetooth ?
make scroll lib by date ?
make vibration
fix(js): removeEventListener on store localStorage => works ???
🟢//learn.svelte.dev/tutorial/updating-arrays-and-objects "...won't trigger reactivity on obj.foo.bar, unless you follow it up with obj = obj"
use svelte animation ?
// TODO refactor in smaller function or custom stores ?
spotify bug "recently-added" order
implement accessibility (eg. aria-hidden)

spotify flow

check token validity

GET /me => if 401 the access_token is obsolete => force authentication flow

authentication flow

GET /authorize => authorization code in redirect URL
GET /token => access_token
new Spotify.Player(), then player.connect() => if ready, obtain a device_id & player (we can interact with play(), seek())

WHEN SYNC : after transfert-playback --> sync : hack settimeout set device

player flow

synchronize(spotifyPlayerState) --> if spotifyPlayerState, we extract playbackState & track(fromplaybackState, queueorrecently-played) --> otherwise, we call api

if 204 => playback not available or active (when no device playing something), we transfert-playback to us

spotify

Has 2 APIs : one PUBLIC (api.spotify.com/v1) & one PRIVATE (api-partner.spotify.com/pathfinder/v1/query).

Note for private API :

Some operation, like sorting playlist, are unavailable in PUBLIC API... So we can't have exactly the same functionnalities or results as native client spotify or web player spotify
"pinning" a playlist is unvailable too

commit message

build : changements qui affectent le système de build ou des dépendances externes (npm, make...)
ci : changements concernant les fichiers et scripts d'intégration ou de configuration (Travis, Ansible, BrowserStack...)
feat : ajout d'une nouvelle fonctionnalité
fix : correction d'un bug
perf : amélioration des performances
refactor : modification qui n'apporte ni nouvelle fonctionalité ni d'amélioration de performances
style : changement qui n'apporte aucune alteration fonctionnelle ou sémantique (indentation, mise en forme, ajout d'espace, renommante d'une variable...)
docs : rédaction ou mise à jour de documentation
test : ajout ou modification de tests


# tech

- optimize with chrome
  -- view transition API (chrome)
  -- offline API ?
- own simple router (`<svelte:component>`)

external lib

https://jariz.github.io/vibrant.js/

RUN

pnpm dev

Top categories