[ { "path": ".eslintrc", "content": "{\n \"extends\": [\n \"react-app\",\n \"./.eslintrc-base.json\",\n \"plugin:prettier/recommended\"\n ],\n \"globals\": {\n \"Promise\": true,\n \"window\": true,\n \"$\": true,\n \"ga\": true,\n \"jQuery\": true,\n \"router\": true\n },\n \"settings\": {\n \"import/ignore\": [\"node_modules\", \"\\\\.json$\"],\n \"import/extensions\": [\".js\", \".jsx\"]\n }\n}\n" }, { "path": ".eslintrc-base.json", "content": "{\n \"rules\": {\n \"max-len\": [\n \"error\",\n { \"code\": 80, \"ignoreUrls\": true, \"ignoreTemplateLiterals\": true }\n ],\n \"block-scoped-var\": 0,\n \"brace-style\": [2, \"1tbs\", { \"allowSingleLine\": true }],\n \"camelcase\": 2,\n \"comma-dangle\": 2,\n \"comma-spacing\": [2, { \"before\": false, \"after\": true }],\n \"comma-style\": [2, \"last\"],\n \"complexity\": 0,\n \"consistent-return\": 2,\n \"consistent-this\": 0,\n \"curly\": 2,\n \"default-case\": 2,\n \"dot-notation\": 0,\n \"eol-last\": 2,\n \"eqeqeq\": 2,\n \"func-call-spacing\": 2,\n \"func-names\": 0,\n \"func-style\": 0,\n \"guard-for-in\": 2,\n \"handle-callback-err\": 2,\n \"import/default\": 2,\n \"import/export\": 2,\n \"import/extensions\": [0, \"always\"],\n \"import/first\": 2,\n \"import/named\": 2,\n \"import/namespace\": 2,\n \"import/newline-after-import\": 2,\n \"import/no-duplicates\": 2,\n \"import/no-unresolved\": 2,\n \"import/unambiguous\": 2,\n \"jsx-quotes\": [2, \"prefer-single\"],\n \"key-spacing\": [2, { \"beforeColon\": false, \"afterColon\": true }],\n \"keyword-spacing\": [2],\n \"max-depth\": 0,\n \"max-nested-callbacks\": 0,\n \"max-params\": 0,\n \"max-statements\": 0,\n \"new-cap\": 0,\n \"new-parens\": 2,\n \"no-alert\": 2,\n \"no-array-constructor\": 2,\n \"no-bitwise\": 2,\n \"no-caller\": 2,\n \"no-cond-assign\": 2,\n \"no-console\": 0,\n \"no-constant-condition\": 2,\n \"no-control-regex\": 2,\n \"no-debugger\": 2,\n \"no-delete-var\": 2,\n \"no-div-regex\": 2,\n \"no-dupe-keys\": 2,\n \"no-else-return\": 0,\n \"no-empty\": 2,\n \"no-empty-character-class\": 2,\n \"no-eq-null\": 2,\n \"no-eval\": 2,\n \"no-ex-assign\": 2,\n \"no-extend-native\": 2,\n \"no-extra-bind\": 2,\n \"no-extra-boolean-cast\": 2,\n \"no-extra-parens\": 0,\n \"no-extra-semi\": 2,\n \"no-fallthrough\": 2,\n \"no-floating-decimal\": 2,\n \"no-func-assign\": 2,\n \"no-global-assign\": 2,\n \"no-implied-eval\": 2,\n \"no-inline-comments\": 2,\n \"no-inner-declarations\": 2,\n \"no-invalid-regexp\": 2,\n \"no-irregular-whitespace\": 2,\n \"no-iterator\": 2,\n \"no-label-var\": 2,\n \"no-labels\": 2,\n \"no-lone-blocks\": 2,\n \"no-lonely-if\": 2,\n \"no-loop-func\": 2,\n \"no-mixed-requires\": 0,\n \"no-mixed-spaces-and-tabs\": 2,\n \"no-multi-spaces\": 2,\n \"no-multi-str\": 2,\n \"no-multiple-empty-lines\": [2, { \"max\": 2 }],\n \"no-nested-ternary\": 2,\n \"no-new\": 2,\n \"no-new-func\": 2,\n \"no-new-object\": 2,\n \"no-new-require\": 2,\n \"no-new-wrappers\": 2,\n \"no-obj-calls\": 2,\n \"no-octal\": 2,\n \"no-octal-escape\": 2,\n \"no-path-concat\": 2,\n \"no-plusplus\": 0,\n \"no-process-env\": 0,\n \"no-process-exit\": 2,\n \"no-proto\": 2,\n \"no-regex-spaces\": 2,\n \"no-reserved-keys\": 0,\n \"no-restricted-modules\": 0,\n \"no-return-assign\": 2,\n \"no-script-url\": 2,\n \"no-self-compare\": 2,\n \"no-sequences\": 2,\n \"no-shadow\": 0,\n \"no-shadow-restricted-names\": 2,\n \"no-sparse-arrays\": 2,\n \"no-sync\": 0,\n \"no-ternary\": 0,\n \"no-trailing-spaces\": 2,\n \"no-undef\": 2,\n \"no-undef-init\": 2,\n \"no-undefined\": 2,\n \"no-underscore-dangle\": 0,\n \"no-unreachable\": 2,\n \"no-unsafe-negation\": 2,\n \"no-unused-expressions\": 2,\n \"no-unused-vars\": 2,\n \"no-use-before-define\": 0,\n \"no-void\": 0,\n \"no-warning-comments\": [2, { \"terms\": [\"fixme\"], \"location\": \"start\" }],\n \"no-with\": 2,\n \"one-var\": 0,\n \"operator-assignment\": 0,\n \"padded-blocks\": 0,\n \"prettier/prettier\": \"error\",\n \"quote-props\": [2, \"as-needed\"],\n \"quotes\": [2, \"single\", \"avoid-escape\"],\n \"radix\": 2,\n \"react/display-name\": 2,\n \"react/jsx-boolean-value\": [2, \"always\"],\n \"react/jsx-closing-bracket-location\": [\n 2,\n { \"selfClosing\": \"line-aligned\", \"nonEmpty\": \"props-aligned\" }\n ],\n \"react/jsx-no-undef\": 2,\n \"react/jsx-sort-props\": [2, { \"ignoreCase\": true }],\n \"react/jsx-uses-react\": 2,\n \"react/jsx-uses-vars\": 2,\n \"react/jsx-wrap-multilines\": 2,\n \"react/no-did-mount-set-state\": 2,\n \"react/no-did-update-set-state\": 2,\n \"react/no-multi-comp\": [2, { \"ignoreStateless\": true }],\n \"react/no-unescaped-entities\": 0,\n \"react/no-unknown-property\": 2,\n \"react/prop-types\": 2,\n \"react/react-in-jsx-scope\": 2,\n \"react/self-closing-comp\": 2,\n \"react/sort-prop-types\": 2,\n \"react-hooks/rules-of-hooks\": \"error\",\n \"react-hooks/exhaustive-deps\": \"error\",\n \"semi\": [2, \"always\"],\n \"semi-spacing\": [2, { \"before\": false, \"after\": true }],\n \"sort-vars\": 0,\n \"space-before-blocks\": [2, \"always\"],\n \"space-before-function-paren\": [2, \"never\"],\n \"space-in-brackets\": 0,\n \"space-in-parens\": 0,\n \"space-infix-ops\": 2,\n \"space-unary-ops\": [2, { \"words\": true, \"nonwords\": false }],\n \"spaced-comment\": [2, \"always\", { \"exceptions\": [\"-\"] }],\n \"strict\": 0,\n \"use-isnan\": 2,\n \"valid-jsdoc\": 0,\n \"valid-typeof\": 2,\n \"vars-on-top\": 0,\n \"wrap-iife\": [2, \"any\"],\n \"wrap-regex\": 2,\n \"yoda\": 0\n }\n}\n" }, { "path": ".github/workflows/ci.yml", "content": "name: Coderadio-client ci\n\non: [push, pull_request]\n\njobs:\n lint:\n name: Lint\n runs-on: ubuntu-20.04\n\n strategy:\n matrix:\n node-version: [20.x]\n\n steps:\n - name: Checkout Source Files\n uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2\n\n - name: Install modules\n run: npm ci\n\n - name: Run ESLint\n run: npm run lint\n\n cypress-run:\n name: Cypress Test\n # Netlify deploys onto Ubuntu 20.04, so we should test on that os:\n runs-on: ubuntu-20.04\n strategy:\n matrix:\n browsers: [chrome, firefox]\n node-version: [20.x]\n steps:\n - name: Set Action Environment Variables\n run: |\n echo \"CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}\" >> $GITHUB_ENV\n echo \"GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}\" >> $GITHUB_ENV\n echo \"CYPRESS_INSTALL_BINARY=6.0.0\" >> $GITHUB_ENV\n\n - name: Checkout\n uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2\n\n - name: Cypress run\n uses: cypress-io/github-action@v2\n with:\n browser: ${{ matrix.browsers }}\n build: npm run build\n start: npm start\n wait-on: http://localhost:3001\n wait-on-timeout: 1200\n\n unit-test:\n name: Unit Test\n runs-on: ubuntu-20.04\n\n strategy:\n matrix:\n node-version: [20.x]\n\n steps:\n - name: Checkout Source Files\n uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2\n\n - name: Install modules\n run: npm ci\n\n - name: Run tests\n run: npm test\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n/cypress/videos\n\n# dotenv environment variables file\n.env\n.env.test\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# production\n/build\n\n# misc\n.DS_Store\n.vscode\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Optional eslint cache\n.eslintcache\n\n### Netlify ###\n.netlify\n" }, { "path": ".husky/.gitignore", "content": "_\n" }, { "path": ".husky/pre-commit", "content": "npx lint-staged\n" }, { "path": ".npmrc", "content": "CYPRESS_INSTALL_BINARY=0\nengine-strict=true\nenable-pre-post-scripts=true\npackage-manager-strict=false\n" }, { "path": ".nvmrc", "content": "20.19.0\n" }, { "path": ".prettierrc", "content": "{\n \"endOfLine\":\"auto\", \n \"semi\": true,\n \"singleQuote\": true,\n \"jsxSingleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"none\",\n \"arrowParens\": \"avoid\"\n}\n " }, { "path": "LICENSE", "content": "BSD 3-Clause License\n\nCopyright (c) 2018, freeCodeCamp.org\n\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n* Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n\n* Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the documentation\n and/or other materials provided with the distribution.\n\n* Neither the name of the copyright holder nor the names of its\n contributors may be used to endorse or promote products derived from\n this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\nFOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\nDAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\nSERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\nCAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\nOR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." }, { "path": "README.md", "content": "![freeCodeCamp.org Social Banner](https://s3.amazonaws.com/freecodecamp/wide-social-banner.png)\n\n## Coderadio Client UI\n\nThis repository powers the current client application for the Code Radio at: . \nEventually we will move this over to our Gatsby based client application for our curriculum and user profiles.\n\nYou can learn more about the coderadio here: \n\n### Local setup\n\n`npm ci` then `npm start` will open the app.\n\nTo send errors to Sentry: `cp sample.env .env.local` and fill in the Sentry DSN from the project settings" }, { "path": "cypress/fixtures/example.json", "content": "{\n \"name\": \"Using fixtures to represent data\",\n \"email\": \"hello@cypress.io\",\n \"body\": \"Fixtures are a great way to mock data for responses to routes\"\n}" }, { "path": "cypress/integration/home.js", "content": "/* global cy */\ndescribe('Landing page', () => {\n it('Should render', () => {\n cy.visit('http://localhost:3001');\n cy.title().should('eq', 'freeCodeCamp.org Code Radio');\n });\n});\n" }, { "path": "cypress/integration/play-button.js", "content": "describe('Stop and play the music', () => {\n beforeEach(() => {\n cy.visit('http://localhost:3001');\n });\n\n it('Click play button', () => {\n cy.get('audio')\n .invoke('attr', 'src')\n .should('contain', '.mp3')\n .then(() => {\n cy.get('#toggle-play-pause').should('be.visible').click();\n cy.get('audio').should(audioElements => {\n const audioIsPaused = audioElements[0].paused;\n expect(audioIsPaused).to.eq(false);\n });\n });\n });\n});\n" }, { "path": "cypress/plugins/index.js", "content": "/* eslint-disable no-unused-vars */\n// / \n// ***********************************************************\n// This example plugins/index.js can be used to load plugins\n//\n// You can change the location of this file or turn off loading\n// the plugins file with the 'pluginsFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/plugins-guide\n// ***********************************************************\n\n// This function is called when a project is opened or re-opened (e.g. due to\n// the project's config changing)\n\n/**\n * @type {Cypress.PluginConfig}\n */\nmodule.exports = (on, config) => {\n // `on` is used to hook into various events Cypress emits\n // `config` is the resolved Cypress config\n};\n" }, { "path": "cypress/support/commands.js", "content": "// ***********************************************\n// This example commands.js shows you how to\n// create various custom commands and overwrite\n// existing commands.\n//\n// For more comprehensive examples of custom\n// commands please read more here:\n// https://on.cypress.io/custom-commands\n// ***********************************************\n//\n//\n// -- This is a parent command --\n// Cypress.Commands.add(\"login\", (email, password) => { ... })\n//\n//\n// -- This is a child command --\n// Cypress.Commands.add(\"drag\", { prevSubject: 'element'}, (subject, options) => { ... })\n//\n//\n// -- This is a dual command --\n// Cypress.Commands.add(\"dismiss\", { prevSubject: 'optional'}, (subject, options) => { ... })\n//\n//\n// -- This will overwrite an existing command --\n// Cypress.Commands.overwrite(\"visit\", (originalFn, url, options) => { ... })\n" }, { "path": "cypress/support/index.js", "content": "// ***********************************************************\n// This example support/index.js is processed and\n// loaded automatically before your test files.\n//\n// This is a great place to put global configuration and\n// behavior that modifies Cypress.\n//\n// You can change the location of this file or turn off\n// automatically serving support files with the\n// 'supportFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/configuration\n// ***********************************************************\n\n// Import commands.js using ES2015 syntax:\nimport './commands';\n\n// Alternatively you can use CommonJS syntax:\n// require('./commands')\n" }, { "path": "cypress-install.js", "content": "const util = require('cypress/lib/util');\nconst execa = require('execa');\n\nconst pkg = util.pkgVersion();\n\n(async () => {\n console.log('Installing Cypress ' + pkg);\n await execa('npm', ['run', 'cypress:install'], {\n env: { CYPRESS_INSTALL_BINARY: pkg }\n });\n console.log('Cypress installed');\n})();\n" }, { "path": "cypress.json", "content": "{\n \"projectId\": \"kqzjwp\"\n}" }, { "path": "netlify.toml", "content": "\n[build]\n base = \"\"\n publish = \"/build\"\n command = \"npm run build\"" }, { "path": "package.json", "content": "{\n \"name\": \"coderadio\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@fortawesome/fontawesome-svg-core\": \"6.7.2\",\n \"@fortawesome/free-solid-svg-icons\": \"6.7.2\",\n \"@fortawesome/react-fontawesome\": \"0.2.2\",\n \"@sentry/react\": \"8.55.0\",\n \"@sentry/tracing\": \"7.120.3\",\n \"react\": \"18.3.1\",\n \"react-device-detect\": \"2.2.3\",\n \"react-dom\": \"18.3.1\",\n \"react-page-visibility\": \"7.0.0\",\n \"react-scripts\": \"5.0.1\",\n \"store\": \"2.0.12\"\n },\n \"scripts\": {\n \"start\": \"PORT=3001 react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test --watchAll=false\",\n \"test:watch\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\",\n \"precypress\": \"node cypress-install.js\",\n \"cypress\": \"cypress\",\n \"cypress:open\": \"npm run cypress open\",\n \"cypress:install\": \"cypress install && echo 'for use with ./cypress-install.js'\",\n \"lint\": \"prettier --check \\\"src/**/*.{md,js}\\\"\",\n \"lint:fix\": \"prettier --write \\\"src/**/*.{md,js}\\\"\",\n \"prepare\": \"husky\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@testing-library/jest-dom\": \"6.6.3\",\n \"@testing-library/react\": \"16.3.0\",\n \"cypress\": \"13.17.0\",\n \"eslint-config-prettier\": \"9.1.0\",\n \"eslint-plugin-prettier\": \"5.2.6\",\n \"execa\": \"9.5.2\",\n \"husky\": \"9.1.7\",\n \"lint-staged\": \"15.5.1\",\n \"prettier\": \"3.5.3\"\n },\n \"lint-staged\": {\n \"*.js\": \"npm run lint:fix\"\n }\n}\n" }, { "path": "public/_redirects", "content": "# Optional: Redirect default Netlify subdomain to primary domain\nhttps://freecodecamp-code-radio.netlify.com/* https://coderadio.freecodecamp.org/:splat 301!\n" }, { "path": "public/index.html", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n freeCodeCamp.org Code Radio\n \n \n \n \n
\n \n \n\n" }, { "path": "renovate.json", "content": "{\n \"extends\": [\"github>freecodecamp/renovate-config\"]\n}\n" }, { "path": "sample.env", "content": "# Sentry DSN - a public id that identifies your app to Sentry\nREACT_APP_SENTRY_DSN=" }, { "path": "src/components/App.js", "content": "import React from 'react';\nimport * as Sentry from '@sentry/react';\nimport store from 'store';\nimport { isIOS, isDesktop } from 'react-device-detect';\n\nimport Nav from './Nav';\nimport Main from './Main';\nimport Footer from './Footer';\nimport { buildEventSource } from '../utils/buildEventSource';\n\nimport '../css/App.css';\n\nconst sseUri =\n 'https://coderadio-admin-v2.freecodecamp.org/api/live/nowplaying/sse?cf_connect=%7B%22subs%22%3A%7B%22station%3Acoderadio%22%3A%7B%22recover%22%3Atrue%7D%7D%7D';\nconst jsonUri = `https://coderadio-admin-v2.freecodecamp.org/api/nowplaying_static/coderadio.json`;\n\nlet sse = buildEventSource(sseUri);\n\nconst CODERADIO_VOLUME = 'coderadio-volume';\n\nsse.onerror = ({ message, error }) => {\n Sentry.addBreadcrumb({\n message: 'WebSocket error: ' + message\n });\n Sentry.captureException(error);\n};\n\nexport default class App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // General configuration options\n config: {\n metadataTimer: 1000\n },\n fastConnection: navigator.connection\n ? navigator.connection.downlink > 1.5\n : false,\n\n /**\n * The equalizer data is held as a separate data set\n * to allow for easy implementation of visualizers.\n * With the ultimate goal of this allowing plug and\n * play visualizers.\n */\n eq: {},\n\n /**\n * Potentially removing the visualizer from this class\n * to build it as a stand alone element that can be\n * replaced by community submissions.\n */\n visualizer: {},\n\n /**\n * Some basic configuration for nicer audio transitions\n * (Used in earlier projects and just maintained).\n */\n audioConfig: {\n targetVolume: 0,\n maxVolume: 0.5,\n volumeSteps: 0.05,\n fadeSteps: 0.01,\n currentVolume: 0.5,\n volumeTransitionSpeed: 10\n },\n\n /**\n * This is where all the audio is pumped through. Due\n * to it being a single audio element, there should be\n * no memory leaks of extra floating audio elements.\n */\n url: '',\n mounts: [],\n remotes: [],\n playing: null,\n captions: null,\n pausing: null,\n pullMeta: false,\n erroredStreams: [],\n\n // Note: the crossOrigin is needed to fix a CORS JavaScript requirement\n\n // There are a few *private* variables used\n currentSong: {},\n songStartedAt: 0,\n songDuration: 0,\n listeners: 0,\n songHistory: []\n };\n\n this.togglePlay = this.togglePlay.bind(this);\n this.setUrl = this.setUrl.bind(this);\n this.setTargetVolume = this.setTargetVolume.bind(this);\n this.getNowPlaying = this.getNowPlaying.bind(this);\n this.updateVolume = this.updateVolume.bind(this);\n this.increaseVolume = this.increaseVolume.bind(this);\n this.decreaseVolume = this.decreaseVolume.bind(this);\n\n // Keyboard handlers\n this.addKeyboardHotKeysListener =\n this.addKeyboardHotKeysListener.bind(this);\n this.removeKeyboardHotKeysListener =\n this.removeKeyboardHotKeysListener.bind(this);\n this.handleKeyboardHotKeys = this.handleKeyboardHotKeys.bind(this);\n }\n\n isSpacePressed(event) {\n return event.key === ' ';\n }\n\n canTogglePlayPause() {\n // Prevent play/pause toggle when elements with ids in the following list are pressed.\n const disallowedIds = [\n 'recent-song-history',\n 'toggle-play-pause',\n 'stream-select',\n 'keyboard-controls',\n 'toggle-button-nav'\n ];\n return !disallowedIds.includes(document.activeElement.id);\n }\n\n isUpDownArrowPressed(event) {\n return event.key === 'ArrowUp' || event.key === 'ArrowDown';\n }\n\n canAdjustVolume() {\n // Ignore arrow hot keys if focus is on volume slider or stream selector.\n const disallowedIds = ['volume-input', 'stream-select'];\n return !disallowedIds.includes(document.activeElement.id);\n }\n\n handleKeyboardHotKeys(event) {\n const keyMap = new Map();\n keyMap.set(' ', this.togglePlay);\n keyMap.set('k', this.togglePlay);\n keyMap.set('ArrowUp', this.increaseVolume);\n keyMap.set('ArrowDown', this.decreaseVolume);\n\n if (!keyMap.has(event.key)) return;\n\n if (this.isSpacePressed(event) && !this.canTogglePlayPause()) return;\n\n if (this.isUpDownArrowPressed(event) && !this.canAdjustVolume()) return;\n\n try {\n keyMap.get(event.key)();\n } catch (err) {\n console.log(`Bad callback for hotkey '${event.key}': ${err.message}`);\n }\n }\n\n addKeyboardHotKeysListener() {\n window.addEventListener('keydown', this.handleKeyboardHotKeys);\n }\n\n removeKeyboardHotKeysListener() {\n window.removeEventListener('keydown', this.handleKeyboardHotKeys);\n }\n\n // Set the players initial vol and crossOrigin\n setPlayerInitial() {\n /**\n * Get user volume level from local storage\n * if not available set to default 0.5.\n */\n const maxVolume =\n store.get(CODERADIO_VOLUME) || this.state.audioConfig.maxVolume;\n this.setState(\n {\n audioConfig: {\n ...this.state.audioConfig,\n maxVolume,\n currentVolume: maxVolume\n }\n },\n () => {\n this._player.volume = maxVolume;\n }\n );\n }\n\n componentDidMount() {\n this.setPlayerInitial();\n this.getNowPlaying();\n if (isDesktop) {\n this.addKeyboardHotKeysListener();\n }\n }\n\n componentWillUnmount() {\n if (isDesktop) {\n this.removeKeyboardHotKeysListener();\n }\n sse.close();\n }\n\n /**\n * If we ever change the URL, we need to update the player\n * and begin playing it again. This can happen if the server\n * resets the URL.\n */\n async setUrl(url = false) {\n if (!url) return;\n\n if (this.state.playing) await this.pause();\n\n this._player.src = url;\n this.setState({\n url\n });\n\n /**\n * Since the `playing` state is initially `null` when the app first loads\n * and is set to boolean when there is an user interaction,\n * we prevent the app from auto-playing the music\n * by only calling `this.play()` if the `playing` state is not `null`.\n */\n if (this.state.playing !== null) {\n this.play();\n }\n }\n\n play() {\n const { mounts, remotes } = this.state;\n\n let streamUrls = Array.from([...mounts, ...remotes], stream => stream.url);\n\n // Check if the url has been reset by pause\n if (!streamUrls.includes(this._player.src)) {\n this._player.src = this.state.url;\n this._player.load();\n }\n\n this._player.volume = 0;\n this._player.play().then(() => {\n this.setState(state => {\n return {\n audioConfig: { ...state.audioConfig, currentVolume: 0 },\n playing: true,\n pullMeta: true\n };\n });\n\n this.fadeUp();\n });\n }\n\n pause() {\n // Completely stop the audio element\n if (!this.state.playing) return Promise.resolve();\n\n return new Promise(resolve => {\n this._player.pause();\n this._player.load();\n\n this.setState(\n {\n playing: false,\n pausing: false\n },\n () => {\n // socket.close();\n resolve();\n }\n );\n });\n }\n\n /**\n * Very basic method that acts like the play/pause button\n * of a standard player. It loads in a new song if there\n * isn't already one loaded.\n */\n togglePlay() {\n // If there already is a source, confirm it's playing or not\n if (this._player.src) {\n // If the player is paused, set the volume to 0 and fade up\n if (!this.state.playing) {\n this.play();\n }\n // If it is already playing, fade the music out (resulting in a pause)\n else {\n this.fadeDown();\n }\n }\n }\n\n setTargetVolume(volume) {\n let audioConfig = { ...this.state.audioConfig };\n let maxVolume = parseFloat(Math.max(0, Math.min(1, volume).toFixed(2)));\n audioConfig.maxVolume = maxVolume;\n audioConfig.currentVolume = maxVolume;\n this._player.volume = audioConfig.maxVolume;\n this.setState(\n {\n audioConfig\n },\n () => {\n // Save user volume to local storage\n store.set(CODERADIO_VOLUME, maxVolume);\n }\n );\n }\n\n /**\n * Simple fade command to initiate the playing and pausing\n * in a more fluid method.\n */\n fade(direction) {\n let audioConfig = { ...this.state.audioConfig };\n audioConfig.targetVolume =\n direction.toLowerCase() === 'up' ? this.state.audioConfig.maxVolume : 0;\n this.setState(\n {\n audioConfig,\n pausing: direction === 'down'\n },\n this.updateVolume\n );\n }\n\n fadeUp() {\n this.fade('up');\n }\n\n fadeDown() {\n this.fade('down');\n }\n\n /**\n * In order to have nice fading,\n * this method adjusts the volume dynamically over time.\n */\n updateVolume() {\n /**\n * In order to fix floating math issues,\n * we set the toFixed in order to avoid 0.999999999999 increments.\n */\n let currentVolume = parseFloat(this._player.volume.toFixed(2));\n /**\n * If the volume is correctly set to the target, no need to change it\n *\n * Note: On iOS devices, volume level is totally under user's control and cannot be programmatically set.\n * We pause the music immediately in this case.\n * (https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html)\n */\n if (currentVolume === this.state.audioConfig.targetVolume || isIOS) {\n // If the audio is set to 0 and it’s been met, pause the audio\n if (this.state.audioConfig.targetVolume === 0 && this.state.pausing)\n this.pause();\n\n // Unmet audio volume settings require it to be changed\n } else {\n /**\n * We capture the value of the next increment by either the configuration\n * or the difference between the current and target\n * if it's smaller than the increment.\n */\n let volumeNextIncrement = Math.min(\n this.state.audioConfig.fadeSteps,\n Math.abs(this.state.audioConfig.targetVolume - this._player.volume)\n );\n\n /**\n * Adjust the audio based on if the target is\n * higher or lower than the current.\n */\n let volumeAdjust =\n this.state.audioConfig.targetVolume > this._player.volume\n ? volumeNextIncrement\n : -volumeNextIncrement;\n\n this._player.volume += volumeAdjust;\n\n let audioConfig = this.state.audioConfig;\n audioConfig.currentVolume += volumeAdjust;\n\n this.setState({\n audioConfig\n });\n // The speed at which the audio lowers is also controlled.\n setTimeout(\n this.updateVolume,\n this.state.audioConfig.volumeTransitionSpeed\n );\n }\n }\n\n sortStreams = (streams, lowBitrate = false, shuffle = false) => {\n if (shuffle) {\n /**\n * Shuffling should only happen among streams with similar bitrates\n * since each relay displays listener numbers across relays. Shuffling\n * should be used to spread the load on initial stream selection.\n */\n let bitrates = streams.map(stream => stream.bitrate);\n let maxBitrate = Math.max(...bitrates);\n return streams\n .filter(stream => {\n if (!lowBitrate) return stream.bitrate === maxBitrate;\n else return stream.bitrate !== maxBitrate;\n })\n .sort(() => Math.random() - 0.5);\n } else {\n return streams.sort((a, b) => {\n if (lowBitrate) {\n // Sort by bitrate from low to high\n if (parseFloat(a.bitrate) < parseFloat(b.bitrate)) return -1;\n if (parseFloat(a.bitrate) > parseFloat(b.bitrate)) return 1;\n } else {\n // Sort by bitrate, from high to low\n if (parseFloat(a.bitrate) < parseFloat(b.bitrate)) return 1;\n if (parseFloat(a.bitrate) > parseFloat(b.bitrate)) return -1;\n }\n\n // If both items have the same bitrate, sort by listeners from low to high\n if (a.listeners.current < b.listeners.current) return -1;\n if (a.listeners.current > b.listeners.current) return 1;\n return 0;\n });\n }\n };\n\n getStreamUrl = (streams, lowBitrate) => {\n const sorted = this.sortStreams(streams, lowBitrate, true);\n return sorted[0].url;\n };\n\n // Choose the stream based on the connection and availability of relay(remotes)\n setMountToConnection(mounts = [], remotes = []) {\n let url = null;\n if (this.state.fastConnection === false && remotes.length > 0) {\n url = this.getStreamUrl(remotes, true);\n } else if (this.state.fastConnection && remotes.length > 0) {\n url = this.getStreamUrl(remotes);\n } else if (this.state.fastConnection === false) {\n url = this.getStreamUrl(mounts, true);\n } else {\n url = this.getStreamUrl(mounts);\n }\n this._player.src = url;\n this.setState({\n url\n });\n }\n\n fetchJSON() {\n fetch(jsonUri)\n .then(response => {\n return response.json();\n })\n .then(np => {\n this.setState({\n mounts: np.station.mounts,\n remotes: np.station.remotes,\n listeners: np.listeners.current,\n currentSong: np.now_playing.song,\n songStartedAt: np.now_playing.played_at * 1000,\n songDuration: np.now_playing.duration,\n pullMeta: false,\n songHistory: np.song_history\n });\n this.setMountToConnection(np.station.mounts, np.station.remotes);\n })\n .catch(() => {});\n }\n\n getNowPlaying() {\n // Since json recives data faster than sse, set the data initially\n this.fetchJSON();\n\n // Reconnect Timeout needs to be added\n sse.onmessage = event => {\n const data = JSON.parse(event.data);\n const np = data?.pub?.data?.np || null;\n if (np) {\n // Process Now Playing data in `np` var.\n // We look through the available mounts to find the default mount\n if (this.state.url === '') {\n this.setState({\n mounts: np.station.mounts,\n remotes: np.station.remotes\n });\n this.setMountToConnection(np.station.mounts, np.station.remotes);\n }\n if (this.state.listeners !== np.listeners.current) {\n this.setState({\n listeners: np.listeners.current\n });\n }\n // We only need to update the metadata if the song has been changed\n if (\n np.now_playing.song.id !== this.state.currentSong.id ||\n this.state.pullMeta\n ) {\n this.setState({\n currentSong: np.now_playing.song,\n songStartedAt: np.now_playing.played_at * 1000,\n songDuration: np.now_playing.duration,\n pullMeta: false,\n songHistory: np.song_history\n });\n }\n }\n };\n }\n\n increaseVolume = () =>\n this.setTargetVolume(\n Math.min(\n this.state.audioConfig.maxVolume + this.state.audioConfig.volumeSteps,\n 1\n )\n );\n\n decreaseVolume = () =>\n this.setTargetVolume(\n Math.max(\n this.state.audioConfig.maxVolume - this.state.audioConfig.volumeSteps,\n 0\n )\n );\n\n onPlayerError = async () => {\n /**\n * This error handler works as follows:\n * - When the player cannot play the url:\n * - If the player's src is falsy and the `playing` state is being false,\n * return early. (It means the user has paused the player and\n * the src has been reset to an empty string).\n * - If the url is already in the `erroredStreams` list: Try another url.\n * - If the url is not in `erroredStreams`: Add the url to the list and\n * try another url.\n * - If `erroredStreams` has as many items as the list of available streams:\n * Pause the player because this means all of our urls are having issues.\n */\n if (!this.state.playing && !this._player.src) return;\n\n const { mounts, remotes, erroredStreams, url } = this.state;\n const sortedStreams = this.sortStreams([...remotes, ...mounts]);\n const currentStream = sortedStreams.find(stream => stream.url === url);\n const isStreamInErroredList = erroredStreams.some(\n stream => stream.url === url\n );\n const newErroredStreams = isStreamInErroredList\n ? erroredStreams\n : [...erroredStreams, currentStream];\n\n // Pause if all streams are in the errored list\n if (newErroredStreams.length === sortedStreams.length) {\n await this.pause();\n return;\n }\n\n /**\n * Available streams are those in `sortedStreams`\n * that don't exist in the errored list.\n */\n const availableUrls = sortedStreams\n .filter(\n stream =>\n !newErroredStreams.some(\n erroredStream => erroredStream.url === stream.url\n )\n )\n .map(({ url }) => url);\n\n // If the url is already in the errored list, use another url\n if (isStreamInErroredList) {\n this.setUrl(availableUrls[0]);\n } else {\n // Otherwise, add the url to the errored list, then use another url\n this.setState({ erroredStreams: newErroredStreams }, () =>\n this.setUrl(availableUrls[0])\n );\n }\n };\n\n render() {\n return (\n
\n
\n );\n }\n}\n" }, { "path": "src/components/App.test.js", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nit('renders without crashing', () => {\n const div = document.createElement('div');\n ReactDOM.render(, div);\n ReactDOM.unmountComponentAtNode(div);\n});\n" }, { "path": "src/components/CurrentSong.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst DEFAULT_ART =\n 'https://cdn-media-1.freecodecamp.org/code-radio/cover_placeholder.gif';\n\nconst CurrentSong = props => (\n \n \n
\n
\n
\n
{props.currentSong.title}
\n
{props.currentSong.artist}
\n
{props.currentSong.album}
\n
Listeners: {props.listeners}
\n {props.mountOptions}\n
\n \n);\n\nCurrentSong.propTypes = {\n currentSong: PropTypes.object,\n fastConnection: PropTypes.bool,\n listeners: PropTypes.number,\n mountOptions: PropTypes.node,\n playing: PropTypes.bool,\n progressVal: PropTypes.number,\n songDuration: PropTypes.number\n};\n\nexport default CurrentSong;\n" }, { "path": "src/components/Footer.js", "content": "/* eslint-disable react/jsx-sort-props */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport PageVisibility from 'react-page-visibility';\nimport CurrentSong from './CurrentSong';\nimport Slider from './Slider';\nimport PlayPauseButton from './PlayPauseButton';\nimport SongHistory from './SongHistory';\n\nexport default class Footer extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n progressVal: 0,\n currentSong: {},\n progressInterval: null,\n alternativeMounts: null,\n isTabVisible: true\n };\n this.updateProgress = this.updateProgress.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n /**\n * If the song is new and we have all required props,\n * reset setInterval and currentSong.\n */\n if (\n this.state.currentSong.id !== prevProps.currentSong.id &&\n this.props.songStartedAt &&\n this.props.playing\n ) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({\n currentSong: this.props.currentSong,\n alternativeMounts: [].concat(this.props.remotes, this.props.mounts)\n });\n this.toggleInterval();\n } else if (prevProps.playing !== this.props.playing) {\n this.toggleInterval();\n }\n }\n\n componentWillUnmount() {\n this.stopCurrentInterval();\n }\n\n startInterval() {\n this.stopCurrentInterval();\n this.setState({\n progressInterval: setInterval(this.updateProgress, 100)\n });\n }\n\n stopCurrentInterval() {\n if (this.state.progressInterval) {\n clearInterval(this.state.progressInterval);\n }\n }\n\n toggleInterval() {\n if (this.props.playing && this.state.isTabVisible) this.startInterval();\n else this.stopCurrentInterval();\n }\n\n updateProgress() {\n let progressVal = parseInt(\n ((new Date().valueOf() - this.props.songStartedAt) / 1000).toFixed(2),\n 10\n );\n this.setState({ progressVal });\n }\n\n handleChange(event) {\n let { value } = event.target;\n this.props.setUrl(value);\n }\n\n handleVisibilityChange = isTabVisible => {\n this.setState({ isTabVisible }, () => {\n this.toggleInterval();\n });\n };\n\n getMountOptions() {\n let mountOptions = '';\n let { alternativeMounts } = this.state;\n if (alternativeMounts && this.props.url) {\n mountOptions = (\n \n {alternativeMounts.map((mount, index) => (\n \n ))}\n \n );\n }\n return mountOptions;\n }\n\n render() {\n let { progressVal, currentSong, isTabVisible } = this.state;\n let {\n playing,\n songDuration,\n togglePlay,\n currentVolume,\n setTargetVolume,\n listeners,\n fastConnection,\n url\n } = this.props;\n\n return (\n \n
\n {isTabVisible && (\n \n )}\n \n \n \n
\n \n );\n }\n}\n\nFooter.propTypes = {\n currentSong: PropTypes.object,\n currentVolume: PropTypes.number,\n fastConnection: PropTypes.bool,\n listeners: PropTypes.number,\n mounts: PropTypes.array,\n playing: PropTypes.bool,\n remotes: PropTypes.array,\n setTargetVolume: PropTypes.func,\n setUrl: PropTypes.func,\n songDuration: PropTypes.number,\n songHistory: PropTypes.array,\n songStartedAt: PropTypes.number,\n togglePlay: PropTypes.func,\n url: PropTypes.string\n};\n" }, { "path": "src/components/Main.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { isBrowser } from 'react-device-detect';\n\nimport Visualizer from './Visualizer';\nimport Video from '../assets/Saron3.webm';\n\nconst Main = props => {\n return (\n
\n
\n

Welcome to Code Radio.

\n

24/7 music designed for coding.

\n
\n {isBrowser && (\n <>\n
\n \n \n \n
\n \n
\n Keyboard Controls\n
\n
Play/Pause:
\n
Spacebar or \"k\"
\n
Volume:
\n
Up Arrow / Down Arrow
\n
\n
\n \n )}\n
\n );\n};\n\nMain.propTypes = {\n fastConnection: PropTypes.bool,\n player: PropTypes.object,\n playing: PropTypes.bool\n};\n\nexport default Main;\n" }, { "path": "src/components/Nav.js", "content": "import React, { useState } from 'react';\n\nexport default function Nav() {\n const [isOpen, setIsOpen] = useState(false);\n\n const toggleSidenav = () => {\n setIsOpen(!isOpen);\n };\n\n const links = [\n { href: 'https://www.freecodecamp.org/news/', text: 'News' },\n { href: 'https://www.freecodecamp.org/forum/', text: 'Forum' },\n { href: 'https://www.freecodecamp.org/learn/', text: 'Learn' }\n ];\n\n return (\n \n );\n}\n" }, { "path": "src/components/Nav.test.js", "content": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\n\nimport Nav from './Nav';\n\ndescribe('