Post rebase fixes

.github/workflows/nodejs.yml

@@ -27,15 +27,15 @@ jobs:
  - name: Build and test frontend
  run: |
  cd frontend
- npm ci
+ npm install
  npm run build --if-present
  npm test -- --coverage
  env:
  CI: true
  - name: Build and test backend
  run: |
  cd backend
- npm ci
+ npm install
  npm run build --if-present
  npm run test:ci
  env:

frontend/src/components/controls/index.js

@@ -7,39 +7,42 @@ import PropTypes from 'prop-types'
 import { Icon } from 'semantic-ui-react'
 import './styles.scss'
 
-const PlayButton = (props) => (
+const PlayButton = props => (
  <button
  onClick={props.onClick}
- disabled={(props.state === MopidyApi.PLAYING || props.disabled)}
+ disabled={props.state === MopidyApi.PLAYING || props.disabled}
  className={classnames('c-button', {
- 'c-button--disabled': (props.state === MopidyApi.PLAYING || props.disabled),
- 'c-button--active': (props.state === MopidyApi.PLAYING)
+ 'c-button--disabled': props.state === MopidyApi.PLAYING || props.disabled,
+ 'c-button--active': props.state === MopidyApi.PLAYING
  })}
  >
  <Icon name='play' />
  </button>
 )
 
-const PauseButton = (props) => (
+const PauseButton = props => (
  <button
  onClick={props.onClick}
- disabled={(props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled)}
+ disabled={
+ props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled
+ }
  className={classnames('c-button', {
- 'c-button--disabled': (props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled),
- 'c-button--active': (props.state === MopidyApi.PAUSED)
+ 'c-button--disabled':
+ props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled,
+ 'c-button--active': props.state === MopidyApi.PAUSED
  })}
  >
  <Icon name='pause' />
  </button>
 )
 
-const StopButton = (props) => (
+const StopButton = props => (
  <button
  onClick={props.onClick}
- disabled={(props.state === MopidyApi.STOPPED || props.disabled)}
+ disabled={props.state === MopidyApi.STOPPED || props.disabled}
  className={classnames('c-button', {
- 'c-button--disabled': (props.state === MopidyApi.STOPPED || props.disabled),
- 'c-button--active': (props.state === MopidyApi.STOPPED)
+ 'c-button--disabled': props.state === MopidyApi.STOPPED || props.disabled,
+ 'c-button--active': props.state === MopidyApi.STOPPED
  })}
  >
  <Icon name='stop' />
@@ -52,26 +55,10 @@ const Controls = props => {
 
  return (
  <span className='c-controls'>
- <SkipButtons
- disabled={disabled}
- onPrevious={onPrevious}
- onNext={onNext}
- />
- <PlayButton
- onClick={onPlay}
- state={jukebox.playbackState}
- disabled={disabled}
- />
- <PauseButton
- onClick={onPause}
- state={jukebox.playbackState}
- disabled={disabled}
- />
- <StopButton
- onClick={onStop}
- state={jukebox.playbackState}
- disabled={disabled}
- />
+ <SkipButtons disabled={disabled} onPrevious={onPrevious} onNext={onNext} />
+ <PlayButton onClick={onPlay} state={jukebox.playbackState} disabled={disabled} />
+ <PauseButton onClick={onPause} state={jukebox.playbackState} disabled={disabled} />
+ <StopButton onClick={onStop} state={jukebox.playbackState} disabled={disabled} />
  </span>
  )
 }

frontend/src/components/current-track/__snapshots__/index.spec.js.snap

@@ -1463,7 +1463,7 @@ exports[`CurrentTrack render album renders track 1`] = `
  <strong>
  27 Jan 2020 @ 8:19 pm
  </strong>
- -
+ - 
  Duncan Robertson
  </ListDescription>
  </ListContent>
@@ -1592,9 +1592,9 @@ exports[`CurrentTrack render album renders track 1`] = `
  <strong>
  27 Jan 2020 @ 8:20 pm
  </strong>
- -
+ - 
  Duncan Robertson
-
+ 
  <Label
  circular={true}
  size="mini"

frontend/src/components/current-track/index.js

@@ -33,13 +33,22 @@ const spotifyLink = uri => {
 
 const AlbumDescription = props => {
  const year = ` (${props.album.year})`
- return <p>{props.album.name}{year}</p>
+ return (
+ <p>
+ {props.album.name}
+ {year}
+ </p>
+ )
 }
 
 const noTrack = () => (
  <div className='c-nowPlaying'>
  <div>
- <img className='c-nowPlaying__image' src={defaultImage} alt='Kyan Limited Edition Collectors Vinyl' />
+ <img
+ className='c-nowPlaying__image'
+ src={defaultImage}
+ alt='Kyan Limited Edition Collectors Vinyl'
+ />
  <div className='c-nowPlaying__trackInfo'>
  <h6>Now playing</h6>
  <h4>-</h4>
@@ -75,7 +84,7 @@ const AddLabel = props => {
  )
 }
 
-const PlayLabel = (props) => {
+const PlayLabel = props => {
  return (
  <div className='c-nowPlaying__metaItem'>
  <h6>Played</h6>
@@ -84,7 +93,7 @@ const PlayLabel = (props) => {
  )
 }
 
-const VoteLabel = (props) => {
+const VoteLabel = props => {
  return (
  <div className='c-nowPlaying__metaItem'>
  <h6>Votes</h6>
@@ -111,14 +120,16 @@ const CurrentTrack = props => {
  <img
  src={track.image || defaultImage}
  className='c-nowPlaying__image'
- alt={(track.image ? track.name : 'Kyan Limited Edition Collectors Vinyl')}
+ alt={track.image ? track.name : 'Kyan Limited Edition Collectors Vinyl'}
  />
  <div className='c-nowPlaying__trackInfo'>
- <div className='c-nowPlaying__rating'><TrackVotes metrics={track.metrics} /></div>
+ <div className='c-nowPlaying__rating'>
+ <TrackVotes metrics={track.metrics} />
+ </div>
  <h6>Now playing</h6>
- <a className='h4' href={spotifyLink(track.uri)}
- target='_blank'
-  rel='noopener noreferrer'>{track.name}</a>
+ <a className='h4' href={spotifyLink(track.uri)} target='_blank' rel='noopener noreferrer'>
+ {track.name}
+ </a>
  <p>{track.artist.name}</p>
  <AlbumDescription album={track.album} />
  <ProgressBar />
@@ -148,7 +159,12 @@ const CurrentTrack = props => {
  </div>
  <div className='c-nowPlaying__footer'>
  <AddedBy users={track.addedBy} />
- <VotedBy size='mini' show={votes.length > 0} total={calcVoteAverage(votes)} votes={votes} />
+ <VotedBy
+ size='mini'
+ show={votes.length > 0}
+ total={calcVoteAverage(votes)}
+ votes={votes}
+ />
  </div>
  </div>
  </div>

frontend/src/components/progress-bar/index.js

@@ -12,7 +12,9 @@ const ProgressBar = () => {
  return (
  <div className='c-progressBar'>
  <span className='c-progressBar__trackLength'>{millisToMinutesAndSeconds(track.length)}</span>
- <span className='c-progressBar__remainingTime'>{millisToMinutesAndSeconds(timer.remaining)}</span>
+ <span className='c-progressBar__remainingTime'>
+ {millisToMinutesAndSeconds(timer.remaining)}
+ </span>
  <Line percent={progressPercentage} strokeLinecap='square' />
  </div>
  )

frontend/src/components/settings/index.js

@@ -6,26 +6,19 @@ export const Settings = () => {
  const { googleUser, signIn, signOut } = useContext(GoogleAuthContext)
 
  let avatar = (
- <button
- onClick={() => signIn()}
- className='c-button'
- >
+ <button onClick={() => signIn()} className='c-button'>
  <Icon name='power off' />
  </button>
  )
  if (googleUser && googleUser.profileObj) {
  avatar = (
- <button
- onClick={() => signOut()}
- className='c-button c-button--image'
- >
+ <button onClick={() => signOut()} className='c-button c-button--image'>
  <img
  title={googleUser.profileObj.name}
  src={googleUser.profileObj.imageUrl}
  alt={googleUser.profileObj.name}
  />
  </button>
-
  )
  }
 

frontend/src/components/skip-buttons/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { Icon } from 'semantic-ui-react'
 
-const PreviousButton = (props) => (
+const PreviousButton = props => (
  <button
  onClick={props.onClick}
  disabled={props.disabled}
@@ -15,7 +15,7 @@ const PreviousButton = (props) => (
  </button>
 )
 
-const NextButton = (props) => (
+const NextButton = props => (
  <button
  onClick={props.onClick}
  disabled={props.disabled}

frontend/src/components/tracklist/index.js

@@ -9,7 +9,7 @@ import VotedBy from 'components/voted-by'
 import RemoveTrack from 'components/remove-track'
 import './styles.scss'
 
-const TrackImage = (props) => (
+const TrackImage = props => (
  <Comment.Avatar
  src={props.src}
  className={classnames('c-tracklist__image', { 'c-tracklist__image--current': props.isCurrent })}
@@ -22,11 +22,9 @@ const ImageChooser = props => {
  return <TrackImage src={image} isCurrent={props.isCurrent} />
 }
 
-const TrackTitle = (props) => (
- <span className='c-tracklist__title'>{props.name}</span>
-)
+const TrackTitle = props => <span className='c-tracklist__title'>{props.name}</span>
 
-const TrackInfo = (props) => (
+const TrackInfo = props => (
  <React.Fragment>
  <span className='c-tracklist__artist'>
  <Item as='a' className='track-search-link' onClick={props.onClick}>
@@ -94,16 +92,9 @@ const ListItems = props => {
  className={classnames('c-tracklist__item', { 'c-tracklist__item--current': isCurrent })}
  key={`${i}${track.uri}`}
  >
- <ImageChooser
- image={track.image}
- isCurrent={isCurrent}
- />
- <div
- className={classnames({ 'c-tracklist__info': !beenPlayed })}
- >
- <TrackTitle
- name={track.name}
- />
+ <ImageChooser image={track.image} isCurrent={isCurrent} />
+ <div className={classnames({ 'c-tracklist__info': !beenPlayed })}>
+ <TrackTitle name={track.name} />
  <TrackInfo
  artistName={track.artist.name}
  trackLength={track.length}

frontend/src/components/volume-buttons/index.js

@@ -27,7 +27,7 @@ const volumeDown = (volume, cb) => {
  }
 }
 
-const VolumeDownButton = (props) => (
+const VolumeDownButton = props => (
  <button
  onClick={volumeDown(props.volume, props.onChange)}
  disabled={props.disabled}
@@ -39,7 +39,7 @@ const VolumeDownButton = (props) => (
  </button>
 )
 
-const VolumeUpButton = (props) => (
+const VolumeUpButton = props => (
  <button
  onClick={volumeUp(props.volume, props.onChange)}
  disabled={props.disabled}
@@ -56,16 +56,8 @@ const VolumeButtons = ({ disabled, onVolumeChange }) => {
 
  return (
  <div className='c-volumeControls'>
- <VolumeDownButton
- volume={jukebox.volume}
- onChange={onVolumeChange}
- disabled={disabled}
- />
- <VolumeUpButton
- volume={jukebox.volume}
- onChange={onVolumeChange}
- disabled={disabled}
- />
+ <VolumeDownButton volume={jukebox.volume} onChange={onVolumeChange} disabled={disabled} />
+ <VolumeUpButton volume={jukebox.volume} onChange={onVolumeChange} disabled={disabled} />
  <div className='c-volumeControls__indicator'>{jukebox.volume}</div>
  </div>
  )