Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rlancer/emve
Emve.me is a virtual video jukebox! Use your TV as the player and get a group of friends to queue up videos using their phone
https://github.com/rlancer/emve
jukebox music youtube
Last synced: about 2 months ago
JSON representation
Emve.me is a virtual video jukebox! Use your TV as the player and get a group of friends to queue up videos using their phone
- Host: GitHub
- URL: https://github.com/rlancer/emve
- Owner: rlancer
- Created: 2021-06-08T18:54:58.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-06-09T23:51:51.000Z (over 3 years ago)
- Last Synced: 2023-08-11T20:17:34.758Z (over 1 year ago)
- Topics: jukebox, music, youtube
- Language: TypeScript
- Homepage:
- Size: 602 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
emve.me
---
> [Emve.me](https://emve.me) is a personal project of [Robert Lancer](https://github.com/rlancer), developed for just for fun!
> It uses my [gapi-to-graphql](https://github.com/rlancer/gapi-to-graphql) library which converts Google's Data API's to GraphQL
[Emve.me](https://emve.me) is a virtual video jukebox! Use your TV as the player and get a group of friends to queue up videos using their phone.
### Player
### Remote
## Running locally
* Generate an OAuth client ID and secret for Google Login by following [this guide](https://developers.google.com/identity/sign-in/web/sign-in)
* Generate a Google API Key by following [this guide](https://developers.google.com/youtube/registering_an_application)
Create a `.env` file by based on the `.env.example` files under the`emve-client` / `emve-server` directories
```bash
git clone [email protected]:emve-me/emve.git
docker-compose up
```
Visit localhost:3035 to see it in action
## Infrastructure
* Resources
* Google Cloud Run
* CloudSQL
* Google Cloud Pub/Sub
* GitHub Actions - CI / CD
* On pushes to master
* Builds and pushes to Google Container Registry
* Deploys new revision to Google Cloud Run
## Stack
* Universal
* Typescript
* Type gen from GraphQL
* Frontend
* NextJS
* SSR
* Authentication
* Google Login, JWT stored in Cookie
* Redirs based on cookie, a value of SSR
* JWT token send in header to API requests
* [Cookie handling library](https://www.npmjs.com/package/vanilla-cookies)
* React
* Apollo
* Splits API transport into websockets and HTTP requests
* For subscriptions, did not like their suggested implementation so used lower level workaround
* UX
* Responsive
* Kept flows a simple as possible
* Streamline creating a party to one click
* Empty states
* Remote, dead simple, default to showing your parties status or a very familiar search bar to find a song
* Backend
* [gapi-to-graphql](https://github.com/rlancer/gapi-to-graphql)
* Postgres
* Knex for query building
* No ORM
* No GraphQL / DB in one, ex: graph.cool
* Migra* diffing for migrations (have not needed to implement)
* Apollo Server
* Security
* Access to channels are inherently insecure to prioritize convenience, the following precautions have been taken to mitigate this:
* Channel IDs are in a custom base 26 encoded alphabet (the alphabet but scrambled) to avoid users being able to guess channel IDs of an ongoing sessions
* Channels ID start at 26^4 to minimize guessability
## TODO
- Optimistic UI / update cache from mutations, relying on subscription data for channel sate now
- Global style variables
- Pretty errors from gql
- Paging
## Wish list
- Live Queries, would cut down on complexity
- Typescript friendlier database library with typegen from schema, a few systems like that out there
## Roadmap
- Talk to someone at YouTube to see if this is kosher, maybe for YTRed subscribers
- Restore lost player sessions
- If your player closes and you reender, it should know you have a session going on and ask you to continue it
- Export a playlist of your party to YouTube / Spotifiy
- Playback parties
- Shout box
- Up voting
- Native apps