feat: modernize the player and recover from stream dropouts

.github/workflows/ci.yml

@@ -1,67 +1,54 @@
-name: Coderadio-client ci
+name: CI
 
-on: [push, pull_request]
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+permissions:
+  contents: read
 
 jobs:
   lint:
     name: Lint
-    runs-on: ubuntu-20.04
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout Source Files
-        uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2
-
-      - name: Install modules
-        run: npm ci
-
-      - name: Run ESLint
-        run: npm run lint
-
-  cypress-run:
-    name: Cypress Test
-    # Netlify deploys onto Ubuntu 20.04, so we should test on that os:
-    runs-on: ubuntu-20.04
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+
+  test:
+    name: Unit tests and build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - run: npm ci
+      - run: npm test
+      - run: npm run build
+
+  e2e:
+    name: Cypress (${{ matrix.browser }})
+    runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
-        browsers: [chrome, firefox]
-        node-version: [20.x]
+        browser: [chrome, firefox]
     steps:
-      - name: Set Action Environment Variables
-        run: |
-          echo "CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}" >> $GITHUB_ENV
-          echo "GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}" >> $GITHUB_ENV
-          echo "CYPRESS_INSTALL_BINARY=6.0.0" >> $GITHUB_ENV
-
-      - name: Checkout
-        uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2
-
-      - name: Cypress run
-        uses: cypress-io/github-action@v2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          node-version-file: .nvmrc
+      - uses: cypress-io/github-action@18016a55674bd02cabf197de5762a1710cb5577c # v7.4.9
         with:
-          browser: ${{ matrix.browsers }}
+          browser: ${{ matrix.browser }}
           build: npm run build
-          start: npm start
+          start: npm run preview
           wait-on: http://localhost:3001
-          wait-on-timeout: 1200
-
-  unit-test:
-    name: Unit Test
-    runs-on: ubuntu-20.04
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-      - name: Checkout Source Files
-        uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2
-
-      - name: Install modules
-        run: npm ci
-
-      - name: Run tests
-        run: npm test

.gitignore

@@ -18,7 +18,7 @@
 .env.production.local
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -36,3 +36,6 @@ yarn-error.log*
 
 ### Netlify ###
 .netlify
+
+# cypress
+/cypress/screenshots

.npmrc

@@ -1,4 +1 @@
-CYPRESS_INSTALL_BINARY=0
 engine-strict=true
-enable-pre-post-scripts=true
-package-manager-strict=false

.nvmrc

@@ -1 +1 @@
-20.19.0
+24

.prettierignore

@@ -0,0 +1,4 @@
+dist
+package-lock.json
+cypress/videos
+cypress/screenshots

.prettierrc

@@ -1,10 +1,9 @@
 {
-  "endOfLine":"auto",  
+  "endOfLine": "auto",
   "semi": true,
   "singleQuote": true,
   "jsxSingleQuote": true,
   "tabWidth": 2,
   "trailingComma": "none",
   "arrowParens": "avoid"
 }
-

README.md

@@ -2,13 +2,19 @@
 
 ## Coderadio Client UI
 
-This repository powers the current client application for the Code Radio at: <https://coderadio.freecodecamp.org>. 
+This repository powers the current client application for the Code Radio at: <https://coderadio.freecodecamp.org>.
 Eventually we will move this over to our Gatsby based client application for our curriculum and user profiles.
 
 You can learn more about the coderadio here: <https://www.freecodecamp.org/news/code-radio-24-7>
 
 ### Local setup
 
-`npm ci` then `npm start` will open the app.
+Use the Node version in `.nvmrc` (`nvm use`), then:
 
-To send errors to Sentry: `cp sample.env .env.local` and fill in the Sentry DSN from the project settings
+- `npm ci` installs dependencies
+- `npm start` runs the dev server on <http://localhost:3001>
+- `npm test` runs the unit tests
+- `npm run e2e` starts the dev server and runs the Cypress tests
+- `npm run lint` checks ESLint and Prettier
+
+To send errors to Sentry: `cp sample.env .env.local` and fill in the Sentry DSN from the project settings. The same file lets you point a local build at a different AzuraCast server.

cypress.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3001',
+    supportFile: false,
+    video: false
+  }
+});