[v2.0] - UI Revamp and Soundcloud Support (#24)

* Update dependencies

* Add eslint and prettier

* Linters

* WIP

* Style

* Update icons

* Add palette settings and theme

* Update theme for bg color

* Camera auto orbit controls

* Update controls and perf improvements

* feat(create-turbo): install dependencies

* Move to app directory

* Add missing dep

* Remove extra build

* Updates for dropzone

* Update build script args

* Reorganize code

* Add soundcloud api proxy

* Updates api

* Test api

* Updates for api

* Test soundcloud track streaming

* WIP sc search

* Switch to context in anticipation of ditching leva

* Saturated colors

* Add additional audio sources

* Consolidate code

* Updates

* Update controls

* Cleanup

* Bugfix

---------

Co-authored-by: Turbobot <[email protected]>

.env.example

@@ -0,0 +1,2 @@
+SOUNDCLOUD_CLIENT_ID=CHANGE_ME
+SOUNDCLOUD_SECRET=CHANGE_ME

.github/workflows/pr_staging_deploy.yml

@@ -34,11 +34,14 @@ jobs:
         uses: actions/checkout@v2
         with:
           path: "pr-build"
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Install and Build
         run: |
-          cd pr-build
-          npm install
-          npm run build -- --base=/${{ env.PR_REPO_NAME }}/
+          cd pr-build/app
+          pnpm i
+          pnpm run build --base=/${{ env.PR_REPO_NAME }}/
         env:
           CI: ""
       - name: Checkout temporary deployment target repo
@@ -50,7 +53,7 @@ jobs:
           token: ${{ secrets.PAT }}
       - name: Push files to target
         run: |
-          cp -r pr-build/dist/* pr-deploy
+          cp -r pr-build/app/dist/* pr-deploy
           cd pr-deploy
           git add .
           git commit -m $GITHUB_SHA
@@ -61,4 +64,4 @@ jobs:
         with:
           message: |
             **Staging Preview:**
-            https://dcyoung.github.io/${{ env.PR_REPO_NAME }}/
+            https://dcyoung.github.io/${{ env.PR_REPO_NAME }}/

.github/workflows/publish.yml

@@ -11,15 +11,18 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Install and Build
         run: |
-          npm install
-          npm run build
+          cd app
+          pnpm i
+          pnpm build
         env:
           CI: ""
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          folder: dist # The folder the action should deploy.
-
+          folder: app/dist # The folder the action should deploy.
 

.gitignore

@@ -1,26 +1,5 @@
-scratch.md
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.env
+.vscode/
+scratch.sh
+scratch/
+notes/

README.md

@@ -17,6 +17,7 @@ git clone https://github.com/dcyoung/r3f-audio-visualizer.git
 
 cd r3f-audio-visualizer
 
-npm install
-npm run dev
+cd app/
+pnpm i
+pnpm dev
 ```

api/.dockerignore

@@ -0,0 +1,5 @@
+**
+!package*.json
+!src/
+!tsconfig.json
+!.esclintrc.js

api/.eslintrc.js

@@ -0,0 +1,46 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+    root: true,
+    parser: "@typescript-eslint/parser",
+    ignorePatterns: [
+        "dist/",
+        "node_modules/",
+        "notes/"
+    ],
+    parserOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      tsconfigRootDir: __dirname,
+      project: [
+        "./tsconfig.json",
+      ],
+    },
+    env: {
+        "browser": true,
+        "es2021": true
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    overrides: [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    plugins: [
+        "@typescript-eslint"
+    ],
+    rules: {
+    }
+}
+
+module.exports = config;

api/.gitignore

@@ -0,0 +1,29 @@
+scratch.md
+scratch/
+notes/
+.env
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

api/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:18.16.0-alpine as base
+
+WORKDIR /app
+
+# Add package file
+COPY package*.json .
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+FROM node:18.16.0-alpine as server
+# Start production image build
+# Copy node modules and build directory
+COPY --from=base /app/node_modules /app/node_modules
+COPY --from=base /app/dist /app/dist
+
+ENV NODE_ENV=production
+ENV PORT=8080
+EXPOSE 8080
+CMD ["/app/dist/app.js"]

api/README.md

@@ -0,0 +1,66 @@
+# API
+
+An application accessible API proxy to the soundcloud API.   
+
+## Quickstart
+
+```bash
+npm install
+npm run dev
+```
+
+## Run with docker:
+
+```bash
+docker build -t api-server .
+docker run -t -i \
+      --env SOUNDCLOUD_CLIENT_ID=... \
+      --env SOUNDCLOUD_SECRET=... \
+      -p 3000:8080 \
+      api-server
+```
+
+Then, the equivalent of:
+
+```bash
+curl "https://api.soundcloud.com/playlists?q=test" \
+      -H "Authorization: OAuth <AUTH_TOKEN>" \
+      | jq
+```
+
+becomes...
+
+```bash
+curl "localhost:3000/proxy/playlists?q=test" | jq
+```
+
+## Fly Deployment
+
+```bash
+APP_NAME="CHANGE_ME"
+REGION="CHANGE_ME"
+ORG="CHANGE_ME"
+
+flyctl launch \
+      --remote-only \
+      --no-deploy \
+      --auto-confirm \
+      --dockerfile Dockerfile \
+      --path . \
+      -r $REGION \
+      --copy-config \
+      --org $ORG \
+      --name $APP_NAME
+
+flyctl secrets set \
+      -a $APP_NAME \
+      --stage \
+      SOUNDCLOUD_CLIENT_ID=CHANGE_ME \
+      SOUNDCLOUD_SECRET=CHANGE_ME
+
+flyctl deploy \
+      --remote-only \
+      -a $APP_NAME \
+      --config fly.toml \
+      --dockerfile Dockerfile
+```

api/fly.toml

@@ -0,0 +1,45 @@
+kill_signal = "SIGINT"
+kill_timeout = 5
+processes = []
+
+[env]
+PORT = "8080"
+
+[experimental]
+auto_rollback = true
+
+[[services]]
+internal_port = 8080
+processes = ["app"]
+protocol = "tcp"
+script_checks = []
+
+[services.concurrency]
+hard_limit = 25
+soft_limit = 20
+type = "connections"
+
+[[services.ports]]
+force_https = true
+handlers = ["http"]
+port = 80
+
+[[services.ports]]
+handlers = ["tls", "http"]
+port = 443
+
+[[services.tcp_checks]]
+grace_period = "1s"
+interval = "15s"
+restart_limit = 0
+timeout = "2s"
+
+[[services.http_checks]]
+interval = "15s"
+grace_period = "5s"
+method = "get"
+path = "/healthz"
+protocol = "http"
+restart_limit = 0
+timeout = 2000
+tls_skip_verify = false