{"id":17993002,"url":"https://github.com/leostera/mixtape","last_synced_at":"2025-03-26T01:31:38.592Z","repository":{"id":141534897,"uuid":"111385252","full_name":"leostera/mixtape","owner":"leostera","description":":headphones: :arrows_counterclockwise: Synchronised Playlist Playback for Spotify","archived":false,"fork":false,"pushed_at":"2018-04-30T02:01:52.000Z","size":832,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-21T01:11:11.525Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leostera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-11-20T08:54:41.000Z","updated_at":"2020-02-11T19:19:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0e3b61e-d985-4721-9007-eb11f37014ea","html_url":"https://github.com/leostera/mixtape","commit_stats":null,"previous_names":["leostera/mixtape"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Fmixtape","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Fmixtape/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Fmixtape/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Fmixtape/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leostera","download_url":"https://codeload.github.com/leostera/mixtape/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245571855,"owners_count":20637411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-29T20:09:53.118Z","updated_at":"2025-03-26T01:31:38.262Z","avatar_url":"https://github.com/leostera.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mixtape.\n\u003e A in-sync listening experience for Spotify\n\n![](https://raw.githubusercontent.com/ostera/mixtape/master/assets/in_app.png)\n\n## How To Run\n\nYou will need:\n\n* make\n* Erlang 20 or better with rebar3\n* node and npm or yarn\n* a web server that can fallback on unknown paths (beefy, apache, nginx)\n\nWith all this setup you can:\n\n1. Start the server with `make run` from the `mixtape_service` folder\n2. Build the client with `make` from the `web_client` folder\n3. Profit!\n\nNow you can open the web server, get the client, connect with Spotify, and start\nlistening to your favorite playlist.\n\n### Trying the Synchronization\n\nBring up someone else, and have them load the client from the browser (could be\nby accessing your local server, or maybe you're running this somewhere public).\n\nOnce they're connected, they just need to paste in the same playlist URI and\nyou're good to go.\n\n## System Description (with pictures!)\n\nAs synchronization can be tricky, and because this is an experiment in both\nsynchronizing state between web players, and also a small thesis on building\nweb applications with typed actions and a minimum set of dependencies, I've\ndescribed some of the flows with swimlane diagrams.\n\n#### Setup, and Authorization Flow\n\n![](http://static.swimlanes.io/59cf3c0ac7eabbf5bd8758d1e8a67a77.png)\n\n#### Web-client Synchronization Flow\n\n![](http://static.swimlanes.io/f4e86175a38867ee12a99966dad9b505.png)\n\n#### Sync-service Flow\n\n![](http://static.swimlanes.io/c026b4300bc47963c16bf5da27a8b161.png)\n\n## What This Thing Experiments With\n\n1. Typed Actions and User-defined Pattern Matching\n2. Effects Pattern \n3. CSS in Javascript\n4. Profunctor Lenses for manipulating Data structures\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleostera%2Fmixtape","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleostera%2Fmixtape","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleostera%2Fmixtape/lists"}