Merge pull request #68 from zembrodt/develop

Merge 0.6.1-dev into main

.circleci/config.yml

@@ -1,8 +1,8 @@
 version: 2.1
 
 orbs:
-  browser-tools: circleci/[email protected].2
-  codecov: codecov/codecov@3.2.5
+  browser-tools: circleci/[email protected].8
+  codecov: codecov/codecov@4.1.0
 
 jobs:
   build:
@@ -33,6 +33,8 @@ jobs:
       - run:
           name: "Run unit tests and code coverage"
           command: npm run test -- --no-watch --no-progress --browsers=ChromeHeadless --code-coverage
+      - store_test_results:
+          path: ./test-results
       - store_artifacts:
           path: coverage
       - codecov/upload:

.gitignore

@@ -44,7 +44,11 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+/test-results
 
 # System Files
 .DS_Store
 Thumbs.db
+
+# Build generated files
+src/environments/*.json

README.md

@@ -74,15 +74,30 @@ Explanation of configurations (**^** denotes required config):
   - `"name"` - (*string*) the name of the environment
   - **^**`"domain"` - (*string*) the domain this app is running on
   - **^**`"spotifyApiUrl"` - (*string*) Spotify's API url
+  - **^**`"spotifyAccountsUrl"` - (*string*) Spotify's Accounts url
+  - `"playbackPolling"` - (*number*) polling interval (in ms) to Spotify when a track is currently playing (default: 1000)
+  - `"idlePolling"` -(*number*) polling interval (in ms) to Spotify when no track is currently playing (default: 5000)
 - `"auth"`
   - **^**`"clientId"` (*string*) the client ID for accessing Spotify's API
   - `"clientSecret"` - (*string*) the client secret for accessing Spotify's API (if using non-PKCE method)
   - **^**`"scopes"` - (*string*) space-separated list of API Spotify scopes needed to grant the application access during OAuth 
   - `"tokenUrl"` - (*string*) the 3rd party backend URL for authentication if not using direct authorization with Spotify
   - `"forcePkce"` - (*boolean*) used to force the application to use PKCE for authentication disregarding what other configs are set
   - `"showDialog"` - (*boolean*) determines if Spotify's OAuth page is opened in a new window or not
+  - `"expiryThreshold"` - (*number*) the threshold (in ms) between the current time and an auth token's expiry time to attempt to refresh the token before it expires (default: 0)
 
 These configurations can also be set as environment variables instead of a json file. The names for each config will be `SHOWTUNES_{configName}` where `configName` will be in
 upper camel case. For example: `spotifyApiUrl` as an environment variable will be `SHOWTUNES_SPOTIFY_API_URL`.
+See `gulpfile.js` for exact usage.
 
 Environment variables will always overwrite anything in the config file.
+
+## Deployment
+
+When deploying the application, run the command `npm run build -- -c {environment}`.
+
+Current possible environments:
+- `production`
+- `staging`
+
+Omitting the environment configuration will default to a development release.

angular.json

@@ -68,6 +68,33 @@
                   "maximumError": "15kb"
                 }
               ]
+            },
+            "staging": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.staging.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "10kb",
+                  "maximumError": "15kb"
+                }
+              ]
             }
           },
           "defaultConfiguration": ""
@@ -80,6 +107,9 @@
           "configurations": {
             "production": {
               "browserTarget": "showtunes:build:production"
+            },
+            "staging": {
+              "browserTarget": "showtunes:build:staging"
             }
           }
         },

gulpfile.js

@@ -33,6 +33,27 @@ gulp.task('generate-config', () => {
     if ('SHOWTUNES_SPOTIFY_API_URL' in process.env) {
       configJson.env.spotifyApiUrl = process.env.SHOWTUNES_SPOTIFY_API_URL;
     }
+    if ('SHOWTUNES_SPOTIFY_ACCOUNTS_URL' in process.env) {
+      configJson.env.spotifyAccountsUrl = process.env.SHOWTUNES_SPOTIFY_ACCOUNTS_URL;
+    }
+    if ('SHOWTUNES_PLAYBACK_POLLING' in process.env) {
+      const playbackPolling = parseInt(process.env.SHOWTUNES_PLAYBACK_POLLING);
+      if (!isNaN(playbackPolling)) {
+        configJson.env.playbackPolling = playbackPolling;
+      }
+    }
+    if ('SHOWTUNES_IDLE_POLLING' in process.env) {
+      const idlePolling = parseInt(process.env.SHOWTUNES_IDLE_POLLING);
+      if (!isNaN(idlePolling)) {
+        configJson.env.idlePolling = idlePolling;
+      }
+    }
+    if ('SHOWTUNES_THROTTLE_DELAY' in process.env) {
+      const throttleDelay = parseInt(process.env.SHOWTUNES_THROTTLE_DELAY);
+      if (!isNaN(throttleDelay)) {
+        configJson.env.throttleDelay = throttleDelay;
+      }
+    }
     if ('SHOWTUNES_CLIENT_ID' in process.env) {
       configJson.auth.clientId = process.env.SHOWTUNES_CLIENT_ID;
     }
@@ -51,6 +72,12 @@ gulp.task('generate-config', () => {
     if ('SHOWTUNES_AUTH_SHOW_DIALOG' in process.env) {
       configJson.auth.showDialog = process.env.SHOWTUNES_AUTH_SHOW_DIALOG;
     }
+    if ('SHOWTUNES_AUTH_EXPIRY_THRESHOLD' in process.env) {
+      const expiryThreshold = parseInt(process.env.SHOWTUNES_AUTH_EXPIRY_THRESHOLD);
+      if (!isNaN(expiryThreshold)) {
+        configJson.auth.expiryThreshold = expiryThreshold;
+      }
+    }
     console.log('In gulp :: After OS Env: ' + JSON.stringify(configJson));
 
     if (!configJson.env.name) {

karma.conf.js

@@ -11,7 +11,8 @@ module.exports = function (config) {
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma'),
-      'karma-spec-reporter'
+      'karma-spec-reporter',
+      'karma-junit-reporter'
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
@@ -26,7 +27,12 @@ module.exports = function (config) {
         return browser.toLowerCase().split(/[ /-]/)[0];
       }
     },
-    reporters: ['spec', 'coverage'],
+    junitReporter: {
+      outputDir: './test-results',
+      outputFile: 'results.xml',
+      useBrowserName: false
+    },
+    reporters: ['spec', 'coverage', 'junit'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -1,10 +1,12 @@
 {
   "name": "showtunes",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "prebuild": "npx ts-node src/environments/create-build-date.ts",
     "build": "ng build",
+    "postbuild": "gulp generate-config",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -54,6 +56,7 @@
     "karma-coverage": "^2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.7.0",
+    "karma-junit-reporter": "^2.0.1",
     "karma-spec-reporter": "^0.0.36",
     "ng-mocks": "^13.0.0-alpha.4",
     "protractor": "~7.0.0",