Merge pull request #63 from Pogify/dev-deploy

Start of Pogify Alpha. Onto Pogify Beta 0.1.0

Author: jeongY-Cho

.dockerignore

@@ -0,0 +1 @@
+node_modules

.env.development

@@ -0,0 +1,3 @@
+REACT_APP_CLOUD_FUNCTION_EMULATOR_BASE_URL=http://localhost:5001/fakeproject/us-central1
+REACT_APP_SPOTIFY_CLIENT_ID=
+REACT_APP_SUB=http://localhost

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,20 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
+**Do you understand that Pogify does not support Safari, Mobile, or Spotify Free at this time?**
+(Yes / No)
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +27,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,12 +1,14 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
+**Do you understand that Pogify does not support Safari, Mobile, or Spotify Free at this time?**
+(Yes / No)
+
 **Is your feature request related to a problem? Please describe.**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 

.github/config.yml

@@ -0,0 +1,3 @@
+todo:
+  autoAssign: false
+  keyword: ["@todo","TODO","TODO:", "FIXME", "FIXME:"]

.github/workflows/dev-deploy.yml

@@ -0,0 +1,31 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Deploy develop branch
+
+# Controls when the action will run. Triggers the workflow on push or pull request
+# events but only for the develop branch
+on:
+  push:
+    branches: [ develop ]
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  Merge:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+        
+      - name: Merge develop -> dev-deploy
+        # You may pin to the exact commit or the version.
+        # uses: devmasx/merge-branch@f469882817d277403efcfba82a62fe96a61a6805
+        uses: devmasx/[email protected]
+        with:
+          type: now
+          head_to_merge: develop
+          target_branch: dev-deploy
+          github_token: ${{ secrets.GITHUB_TOKEN }}

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

CONTRIBUTING.md

@@ -49,6 +49,9 @@ If you are looking to help with UI/UX, please note that we do not have a style g
    {
      "jwt": {
        "secret": "anysecretyoudlike"
+     },
+     "pubsub": {
+       "url": "https://anystringyoudlike.itdoesntmatteritsnotusedinemulation.com"
      }
    }
    ```
@@ -63,8 +66,8 @@ Congratulations, you should now be running a local environment for the backend o
 
 1. Clone this repo (`git clone https://github.com/Pogify/pogify.git`)
 2. Switch to the `develop` branch (`git checkout develop`)
-2. Change directory `cd` to the newly created `pogify` repo and install dependencies with `yarn install`.
-3. Create a file in the directory named `.env` or `.env.development.local`, replace {URL} with the URL of your emulated functions (from your Firebase CLI window) and {CLIENT_ID} with your Spotify API Client ID from the prerequisites.
+3. Change directory `cd` to the newly created `pogify` repo and install dependencies with `yarn install`.
+4. Create a file in the directory named `.env` or `.env.development.local`, replace {URL} with the URL of your emulated functions (from your Firebase CLI window) and {CLIENT_ID} with your Spotify API Client ID from the prerequisites.
    ```
      REACT_APP_SUB=https://messages.pogify.net
      REACT_APP_CLOUD_FUNCTION_EMULATOR_BASE_URL={URL}
@@ -78,6 +81,7 @@ Congratulations, you should now be running a local environment for the backend o
    Congratulations, you should now be running a local environment for the frontend of Pogify!
 
 ###### A couple notes:
+
 - Sessions hosted from local environments cannot be joined from the pogify.net production deployment.
 - Sessions hosted on a pogify.net production deployment can be joined from a local environment.
 - Missing any one step wil throw an error. Be sure to read each and every single instruction carefully.
@@ -94,4 +98,38 @@ Congratulations, you should now be running a local environment for the backend o
 4. Change directory `cd` into the `pogify` repo.
 5. Run `yarn start`.
 
-**Thanks for contributing to Pogify! We can't wait to see what you do with it!**
+## Naming Scheme Conventions
+
+- React components are PascalCased
+- non React js files are camelCased
+- folders are hyphen-cased
+- test files are cased according to the file that the test runs
+- CSS files are PascalCased
+  - Note: please avoid using global namespaced stylesheets and use [css modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/) instead.
+  - [Styled-components](https://styled-components.com/) are also acceptable.
+  - Just avoid using inline styles
+  - We are transitioning away from inline styles.
+
+## Directory structure
+
+- `/src` all source files
+  - `/src/routes` components that react-router
+  - `/src/components` other components
+    - Components can be just jsx files or PascalCased folders with an index.jsx and index.module.css
+  - `/src/components/utils` components
+  - `/src/layouts` layout related HOCs
+  - `/src/modals` modal components
+  - `/src/stores` mobx stores
+  - `/src/context` contexts
+  - `/src/hooks` react hooks
+  - `/src/styles` CSS files for global or reused styles
+    - _Note:_ Please try avoid writing global CSS styles (ie. \[something\].css) and use css modules instead (ie. \[something\]._module_.css)
+  - `/src/utils` utility functions
+- `src/__tests__` all tests
+  - `src/__tests__/unit` unit tests
+    - follows structure of src files
+  - `src/__tests__/integration` integration tests
+- `src/__mocks__` test mocks
+- `src/__utils__` test utils
+
+## **Thanks for contributing to Pogify! We can't wait to see what you do with it!**

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:dubnium-alpine
+
+WORKDIR /app
+
+COPY package.json ./
+COPY yarn.lock ./
+RUN yarn install
+
+COPY . ./
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]
+
+
+

README.md

@@ -55,7 +55,7 @@ Pogify does **NOT** stream audio from the host of a listening session. Instead,
 - Nginx
   - with [push_stream_module](https://github.com/wandenberg/nginx-push-stream-module)
     - module enables us to handle 60k connections on one VPS (single core, 1GB).
-- Google Firebase 
+- Google Firebase
   - Realtime Database & Authentication
     - uses anonymous sign in and the realtime database to implement a rate limiter for cloud functions
   - Cloud Functions
@@ -90,34 +90,36 @@ Pogify uses Google Firebase's Authentication service to use its anonymous sign i
 
 ## Known Issues / Limitations
 
-This project is still in alpha and as such there are still lots of bugs.
+This project is still in alpha and as such, there are still lots of bugs.
+
+If you have an issue that isn't listed below or does not have an open issue, please help us by [opening a new one](https://github.com/Pogify/pogify/issues/new/choose).
 
 Currently the project is deployed on a free tier heroku dyno. Thus, we cannot use SSL with a custom domain. Thus, www.pogify.net redirects to the non-custom pogify.herokuapp.com for the moment.
 
-1. ### Pogify does **NOT** work on Safari, or Mobile Browsers
-
-   - This is a limitation of the Spotify Web Playback SDK.
-   - ref 1: https://developer.spotify.com/documentation/web-playback-sdk/#supported-browsers
-   - ref 2: https://github.com/spotify/web-playback-sdk/issues/10
-
-2. Listeners cannot play pause their local spotify
-3. Session member count is always 0.
-4. Listener Player will stutter.
-5. Listener player unexpectedly seek to beginning of track.
-6. Seeking on a listener player will de-synchronize a listener from the host and will not resynchronize until an update from host.
-7. ~~Volume Control is not good.~~
-8. 'Join Session' / 'Start session' buttons sometimes do not work
-9. Incomplete error handling
-10. Leftover console.logs
-11. No nav bar or alternative
-12. Sessions may timeout even if its active.
-13. Navigating away from player screen shows an alert.
-14. Pogify will unexpectedly automatically redirect to the Spotify login page if it fails to refresh the login session.
-15. State updates by the Spotify Web Player SDK makes two plus updates per state change. There is not yet a solution to consolidate and/or drop an update and not post an update.
-16. ~~Pogify does not yet comply 100% with Spotify Developer Agreement. We are working as fast as possible to remedy this shortfall.~~
-17. there are no tests.
-18. sparse code commenting
-19. And probably many more I forgot about
+### Note: Pogify does **NOT** work on Safari, or Mobile Browsers
+
+- This is a limitation of the Spotify Web Playback SDK.
+- ref 1: https://developer.spotify.com/documentation/web-playback-sdk/#supported-browsers
+- ref 2: https://github.com/spotify/web-playback-sdk/issues/10
+
+### Major Issues
+
+2. Listener player may cut out a couple seconds to the end of a track.
+   - diagnosis: because of latency and things of this nature, host may send a new track update before the end of the listener's current track.
+   - short-term solution: if the update is for the next track (ie position = 0) have player wait till end of track _or_ add as next song in queue for continuous playback.
+   - long-term solution: listener player's queue should be synchronized with host's. If host updates with the start of the next track, listener should just continue.
+3. 'Join Session' / 'Start session' buttons sometimes do not work
+4. Incomplete error handling
+5. Leftover console.logs
+6. No nav bar or alternative
+7. Sessions may timeout even if its active.
+8. Excessive skipping forward or backwards will break listener.
+   - diagnosis: repeated skips aren't captured by debouncer, probably because updates take longer than 300 to fire thus every skip is sent to the listener.
+   - solution:
+9. ~~there are no tests.~~ there are two tests.
+10. Pogify can't recognize seeks to 0 ~~sometimes~~ most of the time.
+    - diagnosis: Spotify doesn't fire a state change event when seeking to 0 if already seeked to 0 once, so Pogify misses it.
+    - solution: poll for spotify data periodically (ie once a second) using player.getCurrentState()
 
 ## Contributing and Communication
 
@@ -126,15 +128,37 @@ Currently, Pogify is open to contributors but please note that Pogify is stil in
 The above paragraph is verbatim from the [Contributing Guidelines](https://github.com/Pogify/pogify/blob/master/CONTRIBUTING.md) which all contributors must read before attempting to contribute!
 All Pogify contributors are bound by the [Contributor Covenant Code of Conduct](https://github.com/Pogify/pogify/blob/develop/CONTRIBUTING.md).
 
+## Dev-ing
+
+1. Execute `yarn` into the folder of this repository
+2. Copy the file `.env.development` to `.env.development.local` and edit the following:
+   - the URL in the env variable `REACT_APP_CLOUD_FUNCTION_EMULATOR_BASE_URL` to match the URL of the functions endpoint in the Firebase emulator (typically of the form: `http://localhost:5001/theprojectyoucreated/us-central1`)
+   - The client ID of the Spotify App in `REACT_APP_SPOTIFY_CLIENT_ID`, obtainable from their developer website here: https://developer.spotify.com/dashboard/applications <br>
+     Do not forget to also whitelist the redirect URI (`/auth`, so you can put `http://localhost:3000/auth` with the default settings)
+   - If needed, also set the Nginx SSE endpoint via the `REACT_APP_SUB` variable
+3. Run `yarn start-dev`
+
 ## Todo List
 
-- [ ] Make a looping script or something that people can use to develop the listener player without 2 accounts.
-- [ ] code comments
+- [x] Make a looping script or something that people can use to develop the listener player without 2 accounts. (available in pogify/pogify-nginx-container)
+- [x] code comments
 - [ ] tests
-- [ ] debouncer for client events (would fix no. 15 of Known Issues)
+- [x] debouncer for client events (would fix no. 15 of Known Issues)
+- [ ] verified sessions
+  - [ ] twitch
+- [ ] move all player (host and listener) logic into stores so that player can be used outside of `/session/{id}`.
+  - [x] player logic moved to mobx store.
+- [ ] readme `Fixed by {SHA}` should have proper links to commits.
+- [ ] `'playImmediately'` button
 
 ## Related Repos
 
 ### [Pogify/pogify-functions](https://github.com/Pogify/pogify-functions)
 
-    Repo housing pogify's Google Cloud functions
+Repo housing Pogify's Google Cloud functions
+<br>
+<br>
+
+### [Pogify/pogify-nginx-container](https://github.com/Pogify/pogify-nginx-container)
+
+Repo housing Pogify's message broadcaster system