├── .dockerignore
├── .editorconfig
├── .gitignore
├── Dockerfile
├── LICENSE
├── Procfile
├── README.md
├── actions
    ├── devicesActions.js
    ├── playbackActions.js
    ├── queueActions.js
    ├── searchActions.js
    ├── sessionActions.js
    ├── usersActions.js
    └── voteActions.js
├── components
    ├── AddToQueue.js
    ├── ButtonDarkStyle.js
    ├── ButtonStyle.js
    ├── Devices.js
    ├── Header.js
    ├── MyLayout.js
    ├── NowPlaying.js
    ├── PageWithIntl.js
    ├── Queue.js
    ├── QueueItem.js
    └── Users.js
├── config
    ├── app.js
    └── auth.js
├── constants
    └── ActionTypes.js
├── lang
    ├── ca.json
    ├── en.json
    └── es.json
├── middlewares
    ├── devicesMiddleware.js
    ├── loggerMiddleware.js
    ├── playbackMiddleware.js
    ├── searchMiddleware.js
    ├── sessionMiddleware.js
    └── socketMiddleware.js
├── next.config.js
├── package.json
├── pages
    ├── _document.js
    ├── about.js
    └── index.js
├── reducers
    ├── devicesReducer.js
    ├── index.js
    ├── playbackReducer.js
    ├── queueReducer.js
    ├── searchReducer.js
    ├── sessionReducer.js
    └── usersReducer.js
├── server
    ├── api.js
    ├── auth.js
    ├── models
    │   ├── Bot.js
    │   ├── QueueItem.js
    │   └── QueueManager.js
    ├── server.js
    └── views
    │   └── pages
    │       └── callback.ejs
├── static
    ├── c-icon-128.png
    ├── c-icon.png
    ├── robot-icon.png
    └── user-icon.png
└── store
    └── store.js


/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .env
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # See editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [**.js]
12 | indent_style = space
13 | indent_size = 2
14 | 
15 | [**.json]
16 | indent_style = space
17 | indent_size = 2


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | node_modules
3 | queue.json
4 | package-lock.json
5 | .env
6 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:13
 2 | 
 3 | COPY package*.json ./
 4 | RUN npm ci --only=production
 5 | 
 6 | COPY . .
 7 | RUN npm run build
 8 | 
 9 | EXPOSE 3000
10 | 
11 | CMD [ "npm", "run", "start" ]
12 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 José Manuel Pérez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: npm run build && npm run start


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # C - A collaborative listening room using Spotify
 2 | 
 3 | This project is a site where multiple users can propose songs and vote for them, having them played in a synchronised way through Spotify.
 4 | 
 5 | ## Setting up
 6 | 
 7 | The server can be run locally and also deployed to Heroku. You will need to register your own Spotify app and set the credentials in a couple of config files. For that:
 8 | 
 9 | 1. Create an application on [Spotify's Developer Site](https://developer.spotify.com/my-applications/).
10 | 
11 | 2. Add as redirect uris both http://localhost:3000/auth/callback (for development) and <production_domain>/auth/callback (if you want to deploy your app somewhere).
12 | 
13 | 3. Create a `.env` file in the root of the project with the following variables;
14 | 
15 |     - `HOST`
16 |     - `CLIENT_ID`
17 |     - `CLIENT_SECRET`
18 | 
19 | Example:
20 | ```
21 | HOST=http://localhost:3000
22 | CLIENT_ID=<your_client_id>
23 | CLIENT_SECRET=<your_client_secret>
24 | ```
25 | 
26 | 
27 | 
28 | ## Dependencies
29 | 
30 | Install the dependencies running `npm install`.
31 | 
32 | ## Running
33 | 
34 | During development, run `npm run dev`.
35 | 
36 | When running on production, run `npm run build && npm run start`.
37 | 
38 | 
39 | ### Run with Docker
40 | 
41 | To run this app in Docker use the following steps
42 | 
43 | 1. Build the image run:
44 | `docker build -t c .`
45 | 
46 | 2. Run the image:
47 | ```
48 | docker run -p 3000:3000 \
49 |     -e HOST=http://localhost:3000 \
50 |     -e CLIENT_ID=<your_client_id> \
51 |     -e CLIENT_SECRET=<your_client_secret> \
52 |     c
53 | ```
54 | 


--------------------------------------------------------------------------------
/actions/devicesActions.js:
--------------------------------------------------------------------------------
 1 | import * as types from '../constants/ActionTypes';
 2 | 
 3 | export const fetchAvailableDevices = () => ({
 4 |   type: types.FETCH_AVAILABLE_DEVICES
 5 | });
 6 | export const fetchAvailableDevicesSuccess = list => ({
 7 |   type: types.FETCH_AVAILABLE_DEVICES_SUCCESS,
 8 |   list
 9 | });
10 | export const fetchAvailableDevicesError = error => ({
11 |   type: types.FETCH_AVAILABLE_DEVICES_ERROR,
12 |   error
13 | });
14 | 
15 | export const transferPlaybackToDevice = deviceId => ({
16 |   type: types.TRANSFER_PLAYBACK_TO_DEVICE,
17 |   deviceId
18 | });
19 | export const transferPlaybackToDeviceSuccess = list => ({
20 |   type: types.TRANSFER_PLAYBACK_TO_DEVICE_SUCCESS
21 | });
22 | export const transferPlaybackToDeviceError = list => ({
23 |   type: types.TRANSFER_PLAYBACK_TO_DEVICE_ERROR,
24 |   error
25 | });
26 | 


--------------------------------------------------------------------------------
/actions/playbackActions.js:
--------------------------------------------------------------------------------
 1 | import fetch from 'isomorphic-unfetch';
 2 | 
 3 | import Config from '../config/app';
 4 | import * as types from '../constants/ActionTypes';
 5 | 
 6 | // playback
 7 | export const playTrack = (track, user, position) => ({
 8 |   type: types.PLAY_TRACK,
 9 |   track,
10 |   user,
11 |   position
12 | });
13 | export const updateNowPlaying = (track, user, position) => ({
14 |   type: types.UPDATE_NOW_PLAYING,
15 |   track,
16 |   user,
17 |   position
18 | });
19 | export const playTrackSuccess = (track, user, position) => ({
20 |   type: types.PLAY_TRACK_SUCCESS,
21 |   track,
22 |   user,
23 |   position
24 | });
25 | 
26 | export const mutePlayback = () => ({ type: types.MUTE_PLAYBACK });
27 | export const unmutePlayback = () => ({ type: types.UNMUTE_PLAYBACK });
28 | 
29 | export const fetchPlayingContextSuccess = playingContext => ({
30 |   type: types.FETCH_PLAYING_CONTEXT_SUCCESS,
31 |   playingContext
32 | });
33 | 
34 | export const fetchPlayingContext = () => dispatch =>
35 |   fetch(`${Config.HOST}/api/now-playing`)
36 |     .then(res => res.json())
37 |     .then(res => dispatch(fetchPlayingContextSuccess(res)));
38 | 


--------------------------------------------------------------------------------
/actions/queueActions.js:
--------------------------------------------------------------------------------
 1 | import fetch from 'isomorphic-unfetch';
 2 | 
 3 | import Config from '../config/app';
 4 | import * as types from '../constants/ActionTypes';
 5 | 
 6 | export const queueTrack = id => ({ type: types.QUEUE_TRACK, id });
 7 | export const updateQueue = queue => ({ type: types.UPDATE_QUEUE, data: queue });
 8 | export const queueEnded = () => ({ type: types.QUEUE_ENDED });
 9 | export const queueRemoveTrack = id => ({
10 |   type: types.QUEUE_REMOVE_TRACK,
11 |   id
12 | });
13 | 
14 | export const fetchQueue = () => dispatch =>
15 |   fetch(`${Config.HOST}/api/queue`).then(res => res.json()).then(res => dispatch(updateQueue(res)));
16 | 


--------------------------------------------------------------------------------
/actions/searchActions.js:
--------------------------------------------------------------------------------
 1 | import * as types from '../constants/ActionTypes';
 2 | 
 3 | export const searchTracks = query => ({ type: types.SEARCH_TRACKS, query });
 4 | export const searchTracksSuccess = (query, results) => ({
 5 |   type: types.SEARCH_TRACKS_SUCCESS,
 6 |   query,
 7 |   results
 8 | });
 9 | export const searchTracksReset = () => ({ type: types.SEARCH_TRACKS_RESET });
10 | export const fetchTrack = id => ({ type: types.FETCH_TRACK, id });
11 | export const fetchTrackSuccess = (id, track) => ({
12 |   type: types.FETCH_TRACK_SUCCESS,
13 |   id
14 | });
15 | 


--------------------------------------------------------------------------------
/actions/sessionActions.js:
--------------------------------------------------------------------------------
 1 | import * as types from '../constants/ActionTypes';
 2 | 
 3 | export const load = () => ({ type: types.LOAD });
 4 | export const login = () => ({ type: types.LOGIN });
 5 | export const loginSuccess = () => ({
 6 |   type: types.LOGIN_SUCCESS
 7 | });
 8 | export const loginFailure = refresh_token => ({
 9 |   type: types.LOGIN_FAILURE,
10 |   refresh_token
11 | });
12 | export const updateToken = refreshToken => ({
13 |   type: types.UPDATE_TOKEN,
14 |   refreshToken
15 | });
16 | export const updateTokenSuccess = access_token => ({
17 |   type: types.UPDATE_TOKEN_SUCCESS,
18 |   access_token
19 | });
20 | export const updateCurrentUser = user => ({
21 |   type: types.UPDATE_CURRENT_USER,
22 |   user
23 | });
24 | 


--------------------------------------------------------------------------------
/actions/usersActions.js:
--------------------------------------------------------------------------------
 1 | import fetch from 'isomorphic-unfetch';
 2 | 
 3 | import Config from '../config/app';
 4 | import * as types from '../constants/ActionTypes';
 5 | 
 6 | export const updateUsers = users => ({ type: types.UPDATE_USERS, data: users });
 7 | 
 8 | export const fetchUsers = () => dispatch =>
 9 |   fetch(`${Config.HOST}/api/users`).then(res => res.json()).then(res => dispatch(updateUsers(res)));
10 | 


--------------------------------------------------------------------------------
/actions/voteActions.js:
--------------------------------------------------------------------------------
 1 | import * as types from '../constants/ActionTypes';
 2 | 
 3 | export const voteUp = id => ({
 4 |   type: types.VOTE_UP,
 5 |   id
 6 | });
 7 | 
 8 | export const voteUpSuccess = () => ({
 9 |   type: types.VOTE_UP_SUCCESS
10 | });
11 | 


--------------------------------------------------------------------------------
/components/AddToQueue.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { connect } from 'react-redux';
  3 | import { injectIntl } from 'react-intl';
  4 | 
  5 | import { searchTracks, searchTracksReset } from '../actions/searchActions';
  6 | import { queueTrack } from '../actions/queueActions';
  7 | 
  8 | class ResultsList extends Component {
  9 |   render() {
 10 |     const { results, focus } = this.props;
 11 |     return (
 12 |       <ul className="add-to-queue__search-results">
 13 |         <style jsx>{`
 14 |           .add-to-queue__search-results {
 15 |             border: 1px solid #999;
 16 |             list-style: none;
 17 |             margin: 0;
 18 |             padding: 0;
 19 |           }
 20 |           .add-to-queue__search-results-item {
 21 |             padding: 5px 0 5px 5px;
 22 |           }
 23 |           .add-to-queue__search-results-item--focused {
 24 |             background-color: #eee;
 25 |           }
 26 |           .container{
 27 |             display: flex;
 28 |           }
 29 |           .album-img{
 30 |               width: 64;
 31 |               padding-right: 1em;
 32 |           }
 33 |           .flex-item{
 34 |               flex-grow: 1;
 35 |           }
 36 | 
 37 |           .song-name {
 38 |             font-size: 1.3em;
 39 |             margin-bottom: 0.3em;
 40 |           }
 41 |         `}</style>
 42 |         {results.map((r, index) => {
 43 |           const isFocused = focus === index;
 44 |           const className =
 45 |             'add-to-queue__search-results-item' + (isFocused ? ' add-to-queue__search-results-item--focused' : '');
 46 |           return (
 47 |             <li key={r.id} className={className} onClick={() => this.props.onSelect(r.id)}>
 48 |               <div className="container">
 49 |                 <div className="album-img">
 50 |                   <img src={r.album.images[2].url}/>
 51 |                 </div>
 52 |                 <div className="flex-item">
 53 |                   <div className="song-name">{r.name}</div>
 54 |                   <div>{r.artists[0].name}</div>
 55 |                 </div>
 56 |               </div>
 57 |             </li>
 58 |           );
 59 |         })}
 60 |       </ul>
 61 |     );
 62 |   }
 63 | }
 64 | 
 65 | class AddToQueue extends Component {
 66 |   state = {
 67 |     text: this.props.text || '',
 68 |     focus: -1
 69 |   };
 70 | 
 71 |   handleChange = e => {
 72 |     const text = e.target.value;
 73 |     this.setState({ text: text });
 74 |     if (text !== '') {
 75 |       this.props.searchTracks(text);
 76 |     } else {
 77 |       this.setState({ focus: -1 });
 78 |       this.props.searchTracksReset();
 79 |     }
 80 |   };
 81 | 
 82 |   handleSelectElement = id => {
 83 |     this.setState({ text: '' });
 84 |     this.props.queueTrack(id);
 85 |     this.props.searchTracksReset();
 86 |   };
 87 | 
 88 |   handleBlur = e => {
 89 |     // todo: this happens before the item from the list is selected, hiding the
 90 |     // list of results. We need to do this in a different way.
 91 |     /*    this.setState({ focus: -1 });
 92 |     this.props.searchTracksReset(); */
 93 |   };
 94 | 
 95 |   handleFocus = e => {
 96 |     if (e.target.value !== '') {
 97 |       this.props.searchTracks(e.target.value);
 98 |     }
 99 |   };
100 | 
101 |   handleKeyDown = e => {
102 |     switch (e.keyCode) {
103 |       case 38: // up
104 |         this.setState({ focus: this.state.focus - 1 });
105 |         break;
106 |       case 40: // down
107 |         this.setState({ focus: this.state.focus + 1 });
108 |         break;
109 |       case 13: {
110 |         let correct = false;
111 |         if (this.state.focus !== -1) {
112 |           this.props.queueTrack(this.props.search.results[this.state.focus].id);
113 |           correct = true;
114 |         } else {
115 |           const text = e.target.value.trim();
116 |           if (text.length !== 0) {
117 |             this.props.queueTrack(text);
118 |             correct = true;
119 |           }
120 |         }
121 |         if (correct) {
122 |           this.setState({ text: '' });
123 |           this.props.searchTracksReset();
124 |           this.setState({ focus: -1 });
125 |         }
126 |         break;
127 |       }
128 |     }
129 |   };
130 | 
131 |   render() {
132 |     const placeholder = this.props.intl.formatMessage({id: 'queue.add'});
133 |     const results = this.props.search.results;
134 |     return (
135 |       <div className="add-to-queue" onBlur={this.handleBlur}>
136 |         <style jsx>{`
137 |           .add-to-queue__input {
138 |             padding: 5px;
139 |             width: 400px;
140 |           }
141 |         `}</style>
142 |         <input
143 |           className="add-to-queue__input"
144 |           placeholder={placeholder}
145 |           value={this.state.text}
146 |           onChange={this.handleChange}
147 |           onKeyDown={this.handleKeyDown}
148 |           onFocus={this.handleFocus}
149 |         />
150 |         {results && <ResultsList results={results} onSelect={this.handleSelectElement} focus={this.state.focus} />}
151 |       </div>
152 |     );
153 |   }
154 | }
155 | 
156 | const mapDispatchToProps = dispatch => ({
157 |   queueTrack: text => dispatch(queueTrack(text)),
158 |   searchTracks: query => dispatch(searchTracks(query)),
159 |   searchTracksReset: () => dispatch(searchTracksReset())
160 | });
161 | 
162 | const mapStateToProps = state => ({
163 |   search: state.search
164 | });
165 | 
166 | export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(AddToQueue));
167 | 


--------------------------------------------------------------------------------
/components/ButtonDarkStyle.js:
--------------------------------------------------------------------------------
1 | import css from 'styled-jsx/css';
2 | 
3 | export default css`.btn--dark {
4 |   background-color: #bbc8d5;
5 |   border: 1px solid #bbc8d5;
6 |   color: #333;
7 | }`;
8 | 


--------------------------------------------------------------------------------
/components/ButtonStyle.js:
--------------------------------------------------------------------------------
 1 | import css from 'styled-jsx/css';
 2 | 
 3 | export default css`.btn {
 4 |   background-color: transparent;
 5 |   border: 1px solid #666;
 6 |   border-radius: 50px;
 7 |   color: #666;
 8 |   cursor: pointer;
 9 |   line-height: 28px;
10 |   padding: 0 15px;
11 | }`;
12 | 


--------------------------------------------------------------------------------
/components/Devices.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import { FormattedMessage } from 'react-intl';
 4 | 
 5 | import ButtonStyle from './ButtonStyle';
 6 | import ButtonDarkStyle from './ButtonDarkStyle';
 7 | import { fetchAvailableDevices, transferPlaybackToDevice } from '../actions/devicesActions';
 8 | import { getIsFetchingDevices } from '../reducers';
 9 | import { getDevices } from '../reducers';
10 | class Devices extends React.PureComponent {
11 |   render() {
12 |     const { devices, isFetching, fetchAvailableDevices, transferPlaybackToDevice } = this.props;
13 |     return (
14 |       <div style={{ paddingBottom: '10px' }}>
15 |         <h2><FormattedMessage id="devices.title" /></h2>
16 |         <style jsx>
17 |           {ButtonStyle}
18 |         </style>
19 |         <style jsx>
20 |           {ButtonDarkStyle}
21 |         </style>
22 |         <button
23 |           className="btn btn--dark"
24 |           disabled={isFetching}
25 |           onClick={() => {
26 |             fetchAvailableDevices();
27 |           }}
28 |         >
29 |           <FormattedMessage id="devices.fetch" />
30 |         </button>
31 |         {devices.length === 0
32 |           ? <p><FormattedMessage id="devices.empty" /></p>
33 |           : <table>
34 |               <tbody>
35 |                 {devices.map(device => (
36 |                   <tr>
37 |                     <td>
38 |                       {device.is_active
39 |                         ? <strong>Active -&gt;</strong>
40 |                         : <button
41 |                             onClick={() => {
42 |                               transferPlaybackToDevice(device.id);
43 |                             }}
44 |                           >
45 |                             <FormattedMessage id="devices.transfer" />
46 |                           </button>}
47 |                     </td>
48 |                     <td>
49 |                       {device.name}
50 |                     </td>
51 |                     <td>
52 |                       {device.type}
53 |                     </td>
54 |                     <td>
55 |                       {device.volume}
56 |                     </td>
57 |                   </tr>
58 |                 ))}
59 |               </tbody>
60 |             </table>}
61 |       </div>
62 |     );
63 |   }
64 | }
65 | 
66 | const mapDispatchToProps = dispatch => ({
67 |   fetchAvailableDevices: index => dispatch(fetchAvailableDevices(index)),
68 |   transferPlaybackToDevice: deviceId => dispatch(transferPlaybackToDevice(deviceId))
69 | });
70 | 
71 | const mapStateToProps = state => ({
72 |   isFetching: getIsFetchingDevices(state),
73 |   devices: getDevices(state)
74 | });
75 | 
76 | export default connect(mapStateToProps, mapDispatchToProps)(Devices);
77 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
  1 | import Link from 'next/link';
  2 | import { connect } from 'react-redux';
  3 | import { FormattedMessage } from 'react-intl';
  4 | import { login } from '../actions/sessionActions';
  5 | import { mutePlayback, unmutePlayback } from '../actions/playbackActions';
  6 | import ButtonStyle from './ButtonStyle';
  7 | import ButtonDarkStyle from './ButtonDarkStyle';
  8 | 
  9 | const linkStyle = {
 10 |   lineHeight: '30px',
 11 |   marginRight: 15
 12 | };
 13 | 
 14 | const mainLinkStyle = {
 15 |   float: 'left',
 16 |   marginRight: '10px'
 17 | };
 18 | 
 19 | const headerStyle = {
 20 |   backgroundColor: '#e3ebf4',
 21 |   padding: '20px 40px'
 22 | };
 23 | 
 24 | const getNameFromUser = user => {
 25 |   return user.display_name || user.id;
 26 | };
 27 | 
 28 | const Header = ({ session, muted, mutePlayback, unmutePlayback, login }) => (
 29 |   <div style={headerStyle}>
 30 |     <Link href="/">
 31 |       <a style={Object.assign({}, linkStyle, mainLinkStyle)}>
 32 |         <img src="/static/c-icon-128.png" height="30" />
 33 |       </a>
 34 |     </Link>
 35 |     <Link href="/about">
 36 |       <a style={linkStyle}><FormattedMessage id="about" /></a>
 37 |     </Link>
 38 |     {session.user
 39 |       ? <div className="media user-header">
 40 |           <style jsx>{`
 41 |             .user-header {
 42 |               float: right;
 43 |               width: 150px;
 44 |             }
 45 |             .user-image {
 46 |               border-radius: 50%;
 47 |             }
 48 |             .user-name {
 49 |               line-height: 30px;
 50 |             }
 51 |             .media,
 52 |             .media__bd {
 53 |               overflow: hidden;
 54 |               _overflow: visible;
 55 |               zoom: 1;
 56 |             }
 57 |             .media .media__img {
 58 |               float: left;
 59 |               margin-right: 10px;
 60 |             }
 61 |           `}</style>
 62 |           <div className="media__img">
 63 |             <img
 64 |               className="user-image"
 65 |               src={
 66 |                 (session.user.images && session.user.images.length && session.user.images[0].url) ||
 67 |                   '/static/user-icon.png'
 68 |               }
 69 |               width="30"
 70 |               height="30"
 71 |               alt={getNameFromUser(session.user)}
 72 |             />
 73 |           </div>
 74 |           <div className="user-name media__bd">
 75 |             {getNameFromUser(session.user)}
 76 |           </div>
 77 |         </div>
 78 |       : <button className="btn btn--dark" style={{ float: 'right' }} onClick={login}>
 79 |           <style jsx>{ButtonStyle}</style>
 80 |           <style jsx>{ButtonDarkStyle}</style>
 81 |           <FormattedMessage id="login" />
 82 |         </button>}
 83 |     {session.user
 84 |       ? <div className="playback-control">
 85 |           <style jsx>
 86 |             {ButtonStyle}
 87 |           </style>
 88 |           <style jsx>
 89 |             {ButtonDarkStyle}
 90 |           </style>
 91 |           <style jsx>{`
 92 |             .playback-control {
 93 |               float: right;
 94 |               width: 200px;
 95 |             }
 96 |           `}</style>
 97 |           <button
 98 |             className="btn btn--dark"
 99 |             onClick={() => {
100 |               muted ? unmutePlayback() : mutePlayback();
101 |             }}
102 |           >
103 |             {muted ? 'Unmute' : 'Mute'}
104 |           </button>
105 |         </div>
106 |       : null}
107 |   </div>
108 | );
109 | 
110 | const mapDispatchToProps = dispatch => ({
111 |   login: () => dispatch(login()),
112 |   mutePlayback: () => dispatch(mutePlayback()),
113 |   unmutePlayback: () => dispatch(unmutePlayback())
114 | });
115 | 
116 | const mapStateToProps = state => ({
117 |   session: state.session,
118 |   muted: state.playback.muted
119 | });
120 | 
121 | export default connect(mapStateToProps, mapDispatchToProps)(Header);
122 | 


--------------------------------------------------------------------------------
/components/MyLayout.js:
--------------------------------------------------------------------------------
 1 | import Header from './Header';
 2 | import Head from 'next/head';
 3 | 
 4 | const Layout = props => (
 5 |   <div>
 6 |     <style jsx>{`
 7 |       div {
 8 |         color: #333;
 9 |         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10 |         font-size: 15px;
11 |       }
12 |     `}</style>
13 |     <Header />
14 |     <div>
15 |       {props.children}
16 |     </div>
17 |   </div>
18 | );
19 | 
20 | export default Layout;
21 | 


--------------------------------------------------------------------------------
/components/NowPlaying.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | class NowPlaying extends React.PureComponent {
  4 |   constructor() {
  5 |     super();
  6 |     this.state = {
  7 |       start: Date.now(),
  8 |       currentPosition: 0
  9 |     };
 10 |     this.timer = null;
 11 |     this.tick = () => {
 12 |       this.setState({
 13 |         currentPosition: Date.now() - this.state.start + (this.props.position || 0)
 14 |       });
 15 |     };
 16 |   }
 17 |   componentWillReceiveProps(props) {
 18 |     if (this.props.position !== props.position || this.props.track !== props.track) {
 19 |       this.setState({
 20 |         start: Date.now(),
 21 |         currentPosition: 0
 22 |       });
 23 |     }
 24 |   }
 25 |   componentDidMount() {
 26 |     this.timer = setInterval(this.tick, 300);
 27 |   }
 28 |   componentWillUnmount() {
 29 |     clearInterval(this.timer);
 30 |   }
 31 |   render() {
 32 |     const percentage = +(this.state.currentPosition * 100 / this.props.track.duration_ms).toFixed(2) + '%';
 33 |     const userName = this.props.user.display_name || this.props.user.id;
 34 |     return (
 35 |       <div className="now-playing">
 36 |         <style jsx>{`
 37 |           .now-playing {
 38 |             background-color: #424d58;
 39 |             color: #fff;
 40 |             height: 250px;
 41 |             position: relative;
 42 |             width: 100%;
 43 |           }
 44 |           .now-playing__text {
 45 |             padding: 40px;
 46 |           }
 47 |           .now-playing__bd {
 48 |             padding-left: 30px;
 49 |           }
 50 |           .now-playing__track-name {
 51 |             font-size: 2em;
 52 |             padding-top: 1.2em;
 53 |           }
 54 |           .now-playing__artist-name {
 55 |             font-size: 1.2em;
 56 |             padding-bottom: 2em;
 57 |             padding-top: 0.5em;
 58 |           }
 59 |           .now-playing__user {
 60 |             padding-top: 0.5em;
 61 |           }
 62 |           .now-playing__progress_bar {
 63 |             bottom: 0;
 64 |             background-color: #222;
 65 |             height: 5px;
 66 |             position: absolute;
 67 |             width: 100%;
 68 |           }
 69 |           .media,
 70 |           .media__bd {
 71 |             overflow: hidden;
 72 |             _overflow: visible;
 73 |             zoom: 1;
 74 |           }
 75 |           .media .media__img {
 76 |             float: left;
 77 |             margin-right: 10px;
 78 |           }
 79 |           .user-image {
 80 |             border-radius: 50%;
 81 |           }
 82 |           .user-name {
 83 |             line-height: 30px;
 84 |           }
 85 |         `}</style>
 86 |         <div className="now-playing__text media">
 87 |           <div className="media__img">
 88 |             <img src={this.props.track.album.images[1].url} width="170" height="170" />
 89 |           </div>
 90 |           <div className="now-playing__bd media__bd">
 91 |             <div className="now-playing__track-name">
 92 |               {this.props.track.name}
 93 |             </div>
 94 |             <div className="now-playing__artist-name">
 95 |               {this.props.track.artists.map(a => a.name).join(', ')}
 96 |             </div>
 97 |             <div className="media__img">
 98 |               <img
 99 |                 className="user-image"
100 |                 src={
101 |                   (this.props.user.images && this.props.user.images.length && this.props.user.images[0].url) ||
102 |                     '/static/user-icon.png'
103 |                 }
104 |                 width="30"
105 |                 height="30"
106 |                 alt={userName}
107 |                 title={userName}
108 |               />
109 |             </div>
110 |             <div className="user-name media__bd">
111 |               {userName}
112 |             </div>
113 |           </div>
114 |         </div>
115 |         <div className="now-playing__progress">
116 |           <div className="now-playing__progress_bar" style={{ width: percentage }} />
117 |         </div>
118 |       </div>
119 |     );
120 |   }
121 | }
122 | 
123 | export default NowPlaying;
124 | 


--------------------------------------------------------------------------------
/components/PageWithIntl.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { IntlProvider, addLocaleData, injectIntl } from 'react-intl';
 3 | 
 4 | // Register React Intl's locale data for the user's locale in the browser. This
 5 | // locale data was added to the page by `pages/_document.js`. This only happens
 6 | // once, on initial page load in the browser.
 7 | if (typeof window !== 'undefined' && window.ReactIntlLocaleData) {
 8 |   Object.keys(window.ReactIntlLocaleData).forEach(lang => {
 9 |     addLocaleData(window.ReactIntlLocaleData[lang]);
10 |   });
11 | }
12 | 
13 | export default Page => {
14 |   const IntlPage = injectIntl(Page);
15 |   return class PageWithIntl extends Component {
16 |     static async getInitialProps(context) {
17 |       let props;
18 |       if (typeof Page.getInitialProps === 'function') {
19 |         props = await Page.getInitialProps(context);
20 |       }
21 | 
22 |       // Get the `locale` and `messages` from the request object on the server.
23 |       // In the browser, use the same values that the server serialized.
24 |       const { req } = context;
25 |       // todo: for some reason it is not props.initialProps, but props in the example
26 |       const { locale, messages } = req || window.__NEXT_DATA__.props.initialProps;
27 | 
28 |       // Always update the current time on page load/transition because the
29 |       // <IntlProvider> will be a new instance even with pushState routing.
30 |       const now = Date.now();
31 | 
32 |       return { ...props, locale, messages, now };
33 |     }
34 | 
35 |     render() {
36 |       const { locale, messages, now, ...props } = this.props;
37 |       return (
38 |         <IntlProvider locale={locale} messages={messages} initialNow={now}>
39 |           <IntlPage {...props} />
40 |         </IntlProvider>
41 |       );
42 |     }
43 |   };
44 | };
45 | 


--------------------------------------------------------------------------------
/components/Queue.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import { FormattedMessage } from 'react-intl';
 4 | 
 5 | import QueueItem from './QueueItem';
 6 | import { queueRemoveTrack } from '../actions/queueActions';
 7 | import { voteUp } from '../actions/voteActions';
 8 | 
 9 | class Queue extends React.PureComponent {
10 |   render() {
11 |     const { items, session } = this.props;
12 |     return (
13 |       <div style={{ paddingBottom: '10px' }}>
14 |         <h2><FormattedMessage id="queue.title" /></h2>
15 |         {items.length === 0
16 |           ? <p><FormattedMessage id="queue.empty" /></p>
17 |           : <table className="queue">
18 |               <style jsx>{`
19 |                 .queue {
20 |                   max-width: 550px;
21 |                 }
22 |               `}</style>
23 |               <tbody>
24 |                 {items.map((i, index) => (
25 |                   <QueueItem
26 |                     item={i}
27 |                     session={session}
28 |                     index={index}
29 |                     key={index}
30 |                     onVoteUp={() => this.props.voteUp(i.id)}
31 |                     onRemoveItem={() => this.props.queueRemoveTrack(i.id)}
32 |                   />
33 |                 ))}
34 |               </tbody>
35 |             </table>}
36 |       </div>
37 |     );
38 |   }
39 | }
40 | 
41 | const mapDispatchToProps = dispatch => ({
42 |   voteUp: id => dispatch(voteUp(id)),
43 |   queueRemoveTrack: id => dispatch(queueRemoveTrack(id))
44 | });
45 | 
46 | const mapStateToProps = state => ({
47 |   queue: state.queue
48 | });
49 | 
50 | export default connect(mapStateToProps, mapDispatchToProps)(Queue);
51 | 


--------------------------------------------------------------------------------
/components/QueueItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default ({ index, item, session, onRemoveItem, onVoteUp }) => {
 4 |   const voteUp = item.voters && session.user && item.voters.filter(v => v.id === session.user.id).length === 0
 5 |     ? <button onClick={onVoteUp}>▲</button>
 6 |     : null;
 7 |   return (
 8 |     <tr>
 9 |       <td style={{ paddingRight: '10px' }}>
10 |         <img src={item.track.album.images[2].url} width="40" height="40" />
11 |       </td>
12 |       <td style={{ paddingRight: '10px' }}>
13 |         {index + 1}
14 |       </td>
15 |       <td style={{ paddingRight: '10px' }}>
16 |         {item.track.name}
17 |       </td>
18 |       <td style={{ paddingRight: '10px' }}>
19 |         {item.track.artists.map(a => a.name).join(', ')}
20 |       </td>
21 |       <td style={{ paddingRight: '10px' }}>
22 |         {item.user && (item.user.display_name || item.user.id)}
23 |       </td>
24 |       <td>
25 |         {item.user && session.user && item.user.id === session.user.id
26 |           ? <button
27 |               onClick={() => {
28 |                 onRemoveItem(item.id);
29 |               }}
30 |             >
31 |               X
32 |             </button>
33 |           : voteUp}
34 |       </td>
35 |       <td>
36 |         {item.voters && item.voters.length > 0
37 |           ? <span>
38 |               {item.voters.length === 1 ? '1 vote' : item.voters.length + ' votes'}
39 |             </span>
40 |           : ''}
41 |       </td>
42 |     </tr>
43 |   );
44 | };
45 | 


--------------------------------------------------------------------------------
/components/Users.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { FormattedMessage } from 'react-intl';
 3 | 
 4 | export default ({ items }) => {
 5 |   return (
 6 |     <div>
 7 |       <style jsx>{`
 8 |         .user-list {
 9 |           list-style: none;
10 |           margin: 0;
11 |           padding: 0;
12 |         }
13 |         .user-list__item {
14 |           display: block;
15 |           margin-bottom: 0.5em;
16 |         }
17 |         .user-image {
18 |           border-radius: 50%;
19 |         }
20 |         .user-name {
21 |           line-height: 30px;
22 |         }
23 |         .media,
24 |         .media__bd {
25 |           overflow: hidden;
26 |           _overflow: visible;
27 |           zoom: 1;
28 |         }
29 |         .media .media__img {
30 |           float: left;
31 |           margin-right: 10px;
32 |         }
33 |         .header-2 {
34 |           color: #999;
35 |           font-size: 11px;
36 |           text-transform: uppercase;
37 |         }
38 |       `}</style>
39 |       <h2 className="header-2"><FormattedMessage id="online" /></h2>
40 |       <ul className="user-list">
41 |         {items.map((i, index) => {
42 |           const userName = i.display_name || i.id;
43 |           return (
44 |             <li key={index} className="user-list__item media">
45 |               <div className="media__img">
46 |                 <img
47 |                   className="user-image"
48 |                   src={(i.images && i.images.length && i.images[0].url) || '/static/user-icon.png'}
49 |                   width="30"
50 |                   height="30"
51 |                   alt={userName}
52 |                   title={userName}
53 |                 />
54 |               </div>
55 |               <div className="user-name media__bd">
56 |                 {userName}
57 |               </div>
58 |             </li>
59 |           );
60 |         })}
61 |       </ul>
62 |       <div style={{ clear: 'both' }} />
63 |     </div>
64 |   );
65 | };
66 | 


--------------------------------------------------------------------------------
/config/app.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   HOST: process.env.HOST
3 | };
4 | 


--------------------------------------------------------------------------------
/config/auth.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   CLIENT_ID: process.env.CLIENT_ID,
3 |   CLIENT_SECRET: process.env.CLIENT_SECRET
4 | };
5 | 


--------------------------------------------------------------------------------
/constants/ActionTypes.js:
--------------------------------------------------------------------------------
 1 | export const QUEUE_TRACK = 'QUEUE_TRACK';
 2 | export const UPDATE_QUEUE = 'UPDATE_QUEUE';
 3 | export const QUEUE_ENDED = 'QUEUE_ENDED';
 4 | export const QUEUE_REMOVE_TRACK = 'QUEUE_REMOVE_TRACK';
 5 | 
 6 | export const SEARCH_TRACKS = 'SEARCH_TRACKS';
 7 | export const SEARCH_TRACKS_SUCCESS = 'SEARCH_TRACKS_SUCCESS';
 8 | export const SEARCH_TRACKS_RESET = 'SEARCH_TRACKS_RESET';
 9 | 
10 | export const FETCH_TRACK = 'FETCH_TRACK';
11 | export const FETCH_TRACK_SUCCESS = 'FETCH_TRACK_SUCCESS';
12 | export const FETCH_PLAYING_CONTEXT_SUCCESS = 'FETCH_PLAYING_CONTEXT_SUCCESS';
13 | 
14 | export const UPDATE_USERS = 'UPDATE_USERS';
15 | 
16 | export const LOAD = 'LOAD';
17 | export const LOGIN = 'LOGIN';
18 | export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
19 | export const LOGIN_FAILURE = 'LOGIN_FAILURE';
20 | 
21 | export const UPDATE_TOKEN = 'UPDATE_TOKEN';
22 | export const UPDATE_TOKEN_SUCCESS = 'UPDATE_TOKEN_SUCCESS';
23 | export const UPDATE_CURRENT_USER = 'UPDATE_CURRENT_USER';
24 | export const PLAY_TRACK = 'PLAY_TRACK';
25 | export const UPDATE_NOW_PLAYING = 'UPDATE_NOW_PLAYING';
26 | export const PLAY_TRACK_SUCCESS = 'PLAY_TRACK_SUCCESS';
27 | 
28 | export const MUTE_PLAYBACK = 'MUTE_PLAYBACK';
29 | export const UNMUTE_PLAYBACK = 'UNMUTE_PLAYBACK';
30 | 
31 | export const FETCH_AVAILABLE_DEVICES = 'FETCH_AVAILABLE_DEVICES';
32 | export const FETCH_AVAILABLE_DEVICES_SUCCESS = 'FETCH_AVAILABLE_DEVICES_SUCCESS';
33 | export const FETCH_AVAILABLE_DEVICES_ERROR = 'FETCH_AVAILABLE_DEVICES_ERROR';
34 | 
35 | export const TRANSFER_PLAYBACK_TO_DEVICE = 'TRANSFER_PLAYBACK_TO_DEVICE';
36 | export const TRANSFER_PLAYBACK_TO_DEVICE_SUCCESS = 'TRANSFER_PLAYBACK_TO_DEVICE_SUCCESS';
37 | export const TRANSFER_PLAYBACK_TO_DEVICE_ERROR = 'TRANSFER_PLAYBACK_TO_DEVICE_ERROR';
38 | 
39 | export const VOTE_UP = 'VOTE_UP';
40 | export const VOTE_UP_SUCCESS = 'VOTE_UP_SUCCESS';
41 | 


--------------------------------------------------------------------------------
/lang/ca.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "about": "Quant a",
 3 |   "login": "Accedir amb Spotify",
 4 |   "online": "Conectats",
 5 |   "queue.title": "Llista de reproducció",
 6 |   "queue.empty": "La llista està buida, afegeix una cançó.",
 7 |   "queue.add": "Afegir una cançó",
 8 |   "devices.title": "Dispositius",
 9 |   "devices.fetch": "Obtenir dispositius",
10 |   "devices.transfer": "Transferir",
11 |   "devices.empty": "La llista de dispositius està buida"
12 | }
13 | 


--------------------------------------------------------------------------------
/lang/en.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "about": "About",
 3 |   "login": "Log in with Spotify",
 4 |   "online": "Online",
 5 |   "queue.title": "Queue",
 6 |   "queue.empty": "The queue is empty, add a song.",
 7 |   "queue.add": "Add a song",
 8 |   "devices.title": "Devices",
 9 |   "devices.fetch": "Fetch devices",
10 |   "devices.transfer": "Transfer",
11 |   "devices.empty": "The list of devices is empty,"
12 | }
13 | 


--------------------------------------------------------------------------------
/lang/es.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "about": "Acerca de",
 3 |   "login": "Acceder con Spotify",
 4 |   "online": "Conectados",
 5 |   "queue.title": "Lista de reproducción",
 6 |   "queue.empty": "La lista está vacía, añade una canción.",
 7 |   "queue.add": "Añadir una canción",
 8 |   "devices.title": "Dispositivos",
 9 |   "devices.fetch": "Obtener dispositivos",
10 |   "devices.transfer": "Transferir",
11 |   "devices.empty": "La lista de dispositivos está vacía"
12 | }
13 | 


--------------------------------------------------------------------------------
/middlewares/devicesMiddleware.js:
--------------------------------------------------------------------------------
 1 | import fetch from 'isomorphic-unfetch';
 2 | 
 3 | import { FETCH_AVAILABLE_DEVICES, TRANSFER_PLAYBACK_TO_DEVICE } from '../constants/ActionTypes';
 4 | import {
 5 |   fetchAvailableDevices,
 6 |   fetchAvailableDevicesSuccess,
 7 |   fetchAvailableDevicesError,
 8 |   transferPlaybackToDeviceSuccess,
 9 |   transferPlaybackToDeviceError
10 | } from '../actions/devicesActions';
11 | 
12 | const SPOTIFY_API_BASE = 'https://api.spotify.com/v1';
13 | 
14 | export default store => next => action => {
15 |   const result = next(action);
16 |   switch (action.type) {
17 |     case FETCH_AVAILABLE_DEVICES: {
18 |       fetch(`${SPOTIFY_API_BASE}/me/player/devices`, {
19 |         method: 'GET',
20 |         headers: {
21 |           Authorization: `Bearer ${store.getState().session.access_token}`
22 |         }
23 |       })
24 |         .then(r => r.json())
25 |         .then(r => {
26 |           if (r.error) {
27 |             store.dispatch(fetchAvailableDevicesError(r.error));
28 |           } else {
29 |             store.dispatch(fetchAvailableDevicesSuccess(r.devices));
30 |           }
31 |         });
32 |       break;
33 |     }
34 |     case TRANSFER_PLAYBACK_TO_DEVICE: {
35 |       fetch(`${SPOTIFY_API_BASE}/me/player`, {
36 |         method: 'PUT',
37 |         headers: {
38 |           Authorization: `Bearer ${store.getState().session.access_token}`
39 |         },
40 |         body: JSON.stringify({
41 |           device_ids: [action.deviceId]
42 |         })
43 |       })
44 |         .then(r => r.json())
45 |         .then(r => {
46 |           if (r.error) {
47 |             store.dispatch(transferPlaybackToDeviceError(r.error));
48 |           } else {
49 |             store.dispatch(transferPlaybackToDeviceSuccess());
50 |             store.dispatch(fetchAvailableDevices());
51 |           }
52 |         });
53 |       break;
54 |     }
55 | 
56 |     default:
57 |       break;
58 |   }
59 | 
60 |   return result;
61 | };
62 | 


--------------------------------------------------------------------------------
/middlewares/loggerMiddleware.js:
--------------------------------------------------------------------------------
1 | export default store => next => action => {
2 |   const result = next(action);
3 |   console.log(action);
4 | };
5 | 


--------------------------------------------------------------------------------
/middlewares/playbackMiddleware.js:
--------------------------------------------------------------------------------
 1 | import fetch from 'isomorphic-unfetch';
 2 | 
 3 | import { PLAY_TRACK, UNMUTE_PLAYBACK } from '../constants/ActionTypes';
 4 | import { playTrack, playTrackSuccess } from '../actions/playbackActions';
 5 | import { fetchAvailableDevicesError, fetchAvailableDevicesSuccess } from '../actions/devicesActions';
 6 | 
 7 | const SPOTIFY_API_BASE = 'https://api.spotify.com/v1';
 8 | 
 9 | export default store => next => action => {
10 |   const result = next(action);
11 |   switch (action.type) {
12 |     case PLAY_TRACK: {
13 |       if (process.browser && !store.getState().playback.muted) {
14 |         fetch(`${SPOTIFY_API_BASE}/me/player/play`, {
15 |           method: 'PUT',
16 |           headers: {
17 |             Authorization: `Bearer ${store.getState().session.access_token}`
18 |           },
19 |           body: JSON.stringify({
20 |             uris: [`spotify:track:${action.track.id}`]
21 |           })
22 |         }).then(() => {
23 |           if (action.position) {
24 |             fetch(`${SPOTIFY_API_BASE}/me/player/seek?position_ms=${action.position}`, {
25 |               method: 'PUT',
26 |               headers: {
27 |                 Authorization: `Bearer ${store.getState().session.access_token}`
28 |               }
29 |             }).then(() => {
30 |               store.dispatch(playTrackSuccess(action.track, action.user, action.position));
31 |             });
32 |           } else {
33 |             store.dispatch(playTrackSuccess(action.track, action.user));
34 |           }
35 |         });
36 |       }
37 |       break;
38 |     }
39 |     case UNMUTE_PLAYBACK: {
40 |       const { track, user, position, startTime } = store.getState().playback;
41 |       const currentPosition = Date.now() - startTime + position;
42 |       store.dispatch(playTrack(track, user, currentPosition));
43 |       break;
44 |     }
45 |     default:
46 |       break;
47 |   }
48 | 
49 |   return result;
50 | };
51 | 


--------------------------------------------------------------------------------
/middlewares/searchMiddleware.js:
--------------------------------------------------------------------------------
 1 | import fetch from 'isomorphic-unfetch';
 2 | 
 3 | import { SEARCH_TRACKS } from '../constants/ActionTypes';
 4 | import { searchTracksSuccess } from '../actions/searchActions';
 5 | 
 6 | const SPOTIFY_API_BASE = 'https://api.spotify.com/v1';
 7 | 
 8 | const searchTracks = query => (dispatch, getState) => {
 9 |   let shouldAddWildcard = false;
10 |   if (query.length > 1) {
11 |     const words = query.split(' ');
12 |     const lastWord = words[words.length - 1];
13 |     if (/^[a-z0-9\s]+$/i.test(lastWord) && query.lastIndexOf('*') !== query.length - 1) {
14 |       shouldAddWildcard = true;
15 |     }
16 |   }
17 | 
18 |   const wildcardQuery = `${query}${shouldAddWildcard ? '*' : ''}`; // Trick to improve search results
19 | 
20 |   return fetch(`${SPOTIFY_API_BASE}/search?q=${encodeURIComponent(wildcardQuery)}&type=track&limit=10`, {
21 |     headers: {
22 |       Authorization: 'Bearer ' + getState().session.access_token
23 |     }
24 |   })
25 |     .then(res => res.json())
26 |     .then(res => {
27 |       dispatch(searchTracksSuccess(query, res.tracks.items));
28 |     });
29 | };
30 | 
31 | export default store => next => action => {
32 |   const result = next(action);
33 |   switch (action.type) {
34 |     case SEARCH_TRACKS: {
35 |       return store.dispatch(searchTracks(action.query));
36 |       break;
37 |     }
38 |     default:
39 |       break;
40 |   }
41 |   return result;
42 | };
43 | 


--------------------------------------------------------------------------------
/middlewares/sessionMiddleware.js:
--------------------------------------------------------------------------------
  1 | import fetch from 'isomorphic-unfetch';
  2 | 
  3 | import { LOAD, LOGIN } from '../constants/ActionTypes';
  4 | import { loginSuccess, updateCurrentUser, updateTokenSuccess } from '../actions/sessionActions';
  5 | 
  6 | import * as Config from '../config/app';
  7 | 
  8 | const SPOTIFY_API_BASE = 'https://api.spotify.com/v1';
  9 | 
 10 | const getCurrentUser = () => (dispatch, getState) =>
 11 |   fetch(`${SPOTIFY_API_BASE}/me`, {
 12 |     headers: {
 13 |       Authorization: 'Bearer ' + getState().session.access_token
 14 |     }
 15 |   })
 16 |     .then(res => res.json())
 17 |     .then(res => {
 18 |       dispatch(updateCurrentUser(res));
 19 |     });
 20 | 
 21 | const updateToken = () => (dispatch, getState) => {
 22 |   return fetch(`${Config.HOST}/auth/token`, {
 23 |     method: 'POST',
 24 |     body: JSON.stringify({
 25 |       refresh_token: getState().session.refresh_token
 26 |     }),
 27 |     headers: new Headers({
 28 |       'Content-Type': 'application/json'
 29 |     })
 30 |   })
 31 |     .then(res => res.json())
 32 |     .then(res => {
 33 |       console.log(res);
 34 |       dispatch(updateTokenSuccess(res.access_token));
 35 |     });
 36 | };
 37 | 
 38 | // todo: set a timer, both client-side and server-side
 39 | 
 40 | export default store => next => action => {
 41 |   const result = next(action);
 42 |   switch (action.type) {
 43 |     case LOAD: {
 44 |       const session = store.getState().session;
 45 |       const expiresIn = session.expires_in;
 46 |       const needsToUpdate = !expiresIn || expiresIn - Date.now() < 10 * 60 * 1000;
 47 |       if (needsToUpdate) {
 48 |         console.log('sessionMiddleware > needs to update access token');
 49 |         const refreshToken = session.refresh_token;
 50 |         if (refreshToken) {
 51 |           console.log('sessionMiddleware > using refresh token');
 52 |           store
 53 |             .dispatch(updateToken())
 54 |             .then(() => {
 55 |               return store.dispatch(getCurrentUser());
 56 |             })
 57 |             .then(() => {
 58 |               store.dispatch(loginSuccess());
 59 |             });
 60 |         }
 61 |       } else {
 62 |         console.log('sessionMiddleware > no need to update access token');
 63 |         store.dispatch(getCurrentUser()).then(() => {
 64 |           store.dispatch(loginSuccess());
 65 |         });
 66 |       }
 67 |       break;
 68 |     }
 69 |     case LOGIN: {
 70 |       const getLoginURL = scopes => {
 71 |         return `${Config.HOST}/auth/login?scope=${encodeURIComponent(scopes.join(' '))}`;
 72 |       };
 73 | 
 74 |       const width = 450,
 75 |         height = 730,
 76 |         left = window.screen.width / 2 - width / 2,
 77 |         top = window.screen.height / 2 - height / 2;
 78 | 
 79 |       const messageFn = event => {
 80 |         try {
 81 |           const hash = JSON.parse(event.data);
 82 |           if (hash.type === 'access_token') {
 83 |             window.removeEventListener('message', messageFn, false);
 84 |             const accessToken = hash.access_token;
 85 |             const expiresIn = hash.expires_in;
 86 |             if (accessToken === '') {
 87 |               // todo: implement login error
 88 |             } else {
 89 |               const refreshToken = hash.refresh_token;
 90 |               localStorage.setItem('refreshToken', refreshToken);
 91 |               localStorage.setItem('accessToken', accessToken);
 92 |               localStorage.setItem('expiresIn', Date.now() + expiresIn * 1000);
 93 |               store.dispatch(updateTokenSuccess(accessToken));
 94 |               store.dispatch(getCurrentUser()).then(() => store.dispatch(loginSuccess()));
 95 |             }
 96 |           }
 97 |         } catch (e) {
 98 |           // do nothing
 99 |           console.error(e);
100 |         }
101 |       };
102 |       window.addEventListener('message', messageFn, false);
103 | 
104 |       const url = getLoginURL(['user-read-playback-state', 'user-modify-playback-state']);
105 |       window.open(
106 |         url,
107 |         'Spotify',
108 |         'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' +
109 |           width +
110 |           ', height=' +
111 |           height +
112 |           ', top=' +
113 |           top +
114 |           ', left=' +
115 |           left
116 |       );
117 | 
118 |       break;
119 |     }
120 |     default:
121 |       break;
122 |   }
123 |   return result;
124 | };
125 | 


--------------------------------------------------------------------------------
/middlewares/socketMiddleware.js:
--------------------------------------------------------------------------------
 1 | import { VOTE_UP, LOGIN_SUCCESS, QUEUE_REMOVE_TRACK, QUEUE_TRACK } from '../constants/ActionTypes';
 2 | import { updateUsers } from '../actions/usersActions';
 3 | import { updateQueue, queueEnded } from '../actions/queueActions';
 4 | import { playTrack, updateNowPlaying } from '../actions/playbackActions';
 5 | import Config from '../config/app';
 6 | 
 7 | import io from 'socket.io-client';
 8 | 
 9 | var socket = null;
10 | 
11 | const getIdFromTrackString = (trackString = '') => {
12 |   let matches = trackString.match(/^https:\/\/open\.spotify\.com\/track\/(.*)/);
13 |   if (matches) {
14 |     return matches[1];
15 |   }
16 | 
17 |   matches = trackString.match(/^https:\/\/play\.spotify\.com\/track\/(.*)/);
18 |   if (matches) {
19 |     return matches[1];
20 |   }
21 | 
22 |   matches = trackString.match(/^spotify:track:(.*)/);
23 |   if (matches) {
24 |     return matches[1];
25 |   }
26 | 
27 |   return null;
28 | };
29 | 
30 | export function socketMiddleware(store) {
31 |   return next => action => {
32 |     const result = next(action);
33 | 
34 |     if (socket) {
35 |       switch (action.type) {
36 |         case QUEUE_TRACK: {
37 |           let trackId = getIdFromTrackString(action.id);
38 |           if (trackId === null) {
39 |             trackId = action.id;
40 |           }
41 |           socket.emit('queue track', trackId);
42 |           break;
43 |         }
44 |         case QUEUE_REMOVE_TRACK: {
45 |           socket.emit('remove track', action.id);
46 |           break;
47 |         }
48 |         case LOGIN_SUCCESS:
49 |           const user = store.getState().session.user;
50 |           socket.emit('user login', user);
51 |           break;
52 |         case VOTE_UP:
53 |           socket.emit('vote up', action.id);
54 |           break;
55 |         default:
56 |           break;
57 |       }
58 |     }
59 | 
60 |     return result;
61 |   };
62 | }
63 | export default function(store) {
64 |   socket = io.connect(Config.HOST);
65 | 
66 |   socket.on('update queue', data => {
67 |     store.dispatch(updateQueue(data));
68 |   });
69 | 
70 |   socket.on('queue ended', () => {
71 |     store.dispatch(queueEnded());
72 |   });
73 | 
74 |   socket.on('play track', (track, user, position) => {
75 |     // we should also set repeat to false!
76 |     store.dispatch(playTrack(track, user, position));
77 |   });
78 | 
79 |   socket.on('update users', data => {
80 |     store.dispatch(updateUsers(data));
81 |   });
82 | 
83 |   socket.on('update now playing', (track, user, position) => {
84 |     store.dispatch(updateNowPlaying(track, user, position));
85 |   });
86 | 
87 |   // todo: manage end song, end queue
88 | }
89 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 2 | const { EnvironmentPlugin } = require('webpack');
 3 | const { ANALYZE } = process.env;
 4 | 
 5 | module.exports = {
 6 |   webpack: function(config, { dev }) {
 7 |     if (ANALYZE) {
 8 |       config.plugins.push(
 9 |         new BundleAnalyzerPlugin({
10 |           analyzerMode: 'server',
11 |           analyzerPort: 8888,
12 |           openAnalyzer: true
13 |         })
14 |       );
15 |     }
16 | 
17 |     config.plugins.push(new EnvironmentPlugin(['HOST']));
18 | 
19 |     // For the development version, we'll use React.
20 |     // Because, it supports react hot loading and so on.
21 |     if (dev) {
22 |       return config;
23 |     }
24 | 
25 |     return config;
26 |   }
27 | };
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "c-next",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "next build",
 8 |     "dev": "node server/server.js",
 9 |     "start": "NODE_ENV=production node server/server.js",
10 |     "test": "echo \"Error: no test specified\" && exit 1",
11 |     "analyze": "cross-env ANALYZE=1 next build",
12 |     "precommit": "lint-staged"
13 |   },
14 |   "lint-staged": {
15 |     "*.js": [
16 |       "prettier --write --single-quote --print-width 120",
17 |       "git add"
18 |     ]
19 |   },
20 |   "keywords": [],
21 |   "author": "",
22 |   "license": "ISC",
23 |   "dependencies": {
24 |     "accepts": "^1.3.4",
25 |     "body-parser": "^1.18.2",
26 |     "compression": "^1.7.1",
27 |     "cookie-parser": "^1.4.3",
28 |     "cross-env": "^5.0.5",
29 |     "dotenv": "^8.2.0",
30 |     "ejs": "^2.5.7",
31 |     "express": "^4.16.2",
32 |     "glob": "^7.1.2",
33 |     "isomorphic-unfetch": "^2.0.0",
34 |     "next": "^9.3.3",
35 |     "next-redux-wrapper": "^1.3.4",
36 |     "promise-retry": "^1.1.1",
37 |     "react": "^16.0.0",
38 |     "react-dom": "^16.0.0",
39 |     "react-intl": "^2.4.0",
40 |     "react-redux": "^5.0.6",
41 |     "redux": "^3.7.2",
42 |     "redux-thunk": "^2.2.0",
43 |     "request": "^2.88.0",
44 |     "socket.io": "^2.0.3",
45 |     "socket.io-client": "^2.0.3",
46 |     "spotify-web-api-node": "^4.0.0",
47 |     "uuid": "^3.1.0",
48 |     "webpack-bundle-analyzer": "^2.9.0"
49 |   },
50 |   "devDependencies": {
51 |     "husky": "^0.14.3",
52 |     "lint-staged": "^4.2.3",
53 |     "prettier": "^1.7.4"
54 |   },
55 |   "engines": {
56 |     "node": "8.4.x"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Main, NextScript } from 'next/document';
 2 | import flush from 'styled-jsx/server';
 3 | 
 4 | // The document (which is SSR-only) needs to be customized to expose the locale
 5 | // data for the user's locale for React Intl to work in the browser.
 6 | export default class IntlDocument extends Document {
 7 |   static async getInitialProps(context) {
 8 |     const props = await super.getInitialProps(context);
 9 |     const { req: { locale, localeDataScript } } = context;
10 |     const { html, head, errorHtml, chunks } = context.renderPage();
11 |     const styles = flush();
12 |     return { html, head, errorHtml, chunks, styles, locale, localeDataScript };
13 |   }
14 | 
15 |   render() {
16 |     return (
17 |       <html>
18 |         <Head>
19 |           <title>C - Collaborative listening on Spotify</title>
20 |           <meta
21 |             name="description"
22 |             content="A collaborative queue where you propose and vote what's going to play next. Use your Spotify account to log in"
23 |           />
24 |           <link rel="shortcut icon" href="/static/c-icon-128.png" />
25 |           <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
26 |           <style>{`body { margin: 0 } /* custom! */`}</style>
27 |           <script async src="https://www.googletagmanager.com/gtag/js?id=UA-39254352-3" />
28 |           <script
29 |             dangerouslySetInnerHTML={{
30 |               __html:
31 |                 "window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments)} gtag('js', new Date()); gtag('config', 'UA-39254352-3');"
32 |             }}
33 |           />
34 |         </Head>
35 |         <body className="custom_class">
36 |           {this.props.customValue}
37 |           <Main />
38 |           <script
39 |             dangerouslySetInnerHTML={{
40 |               __html: this.props.localeDataScript
41 |             }}
42 |           />
43 |           <NextScript />
44 |         </body>
45 |       </html>
46 |     );
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
 1 | import Layout from '../components/MyLayout.js';
 2 | import withRedux from 'next-redux-wrapper';
 3 | 
 4 | import { initStore } from '../store/store';
 5 | import PageWithIntl from '../components/PageWithIntl';
 6 | 
 7 | const About = () => (
 8 |   <Layout>
 9 |     <style jsx>
10 |       {`
11 |         p {
12 |           margin: 20px 40px 0;
13 |         }
14 |       `}
15 |     </style>
16 | 
17 |     <p>
18 |       This is a personal project by <a href="https://jmperezperez.com">José M. Pérez</a> that uses{' '}
19 |       <a href="https://github.com/zeit/next.js">Next.js</a> and{' '}
20 |       <a href="https://developer.spotify.com/web-api/web-api-connect-endpoint-reference/">
21 |         Spotify's Connect API endpoints
22 |       </a>.
23 |     </p>
24 |     <p>
25 |       Read more about it on{' '}
26 |       <a href="https://medium.com/@jmperezperez/collaborative-listening-on-spotify-using-connect-endpoints-7695603e17d1">
27 |         my blog post on Medium
28 |       </a>.
29 |     </p>
30 |     <p>
31 |       You can see the source code <a href="https://github.com/JMPerez/c">on GitHub</a>.
32 |     </p>
33 |   </Layout>
34 | );
35 | 
36 | export default withRedux(initStore, null, null)(PageWithIntl(About));
37 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import React from 'react';
 3 | import withRedux from 'next-redux-wrapper';
 4 | import Layout from '../components/MyLayout.js';
 5 | import { initStore } from '../store/store';
 6 | import { fetchQueue } from '../actions/queueActions';
 7 | import { fetchUsers } from '../actions/usersActions';
 8 | import { fetchPlayingContext } from '../actions/playbackActions';
 9 | import Users from '../components/Users';
10 | import Queue from '../components/Queue';
11 | import AddToQueue from '../components/AddToQueue';
12 | import NowPlaying from '../components/NowPlaying';
13 | import Devices from '../components/Devices';
14 | import PageWithIntl from '../components/PageWithIntl';
15 | import { FormattedMessage } from 'react-intl';
16 | 
17 | class Main extends React.Component {
18 |   static getInitialProps({ req, store, isServer }) {
19 |     return Promise.all([
20 |       store.dispatch(fetchQueue()),
21 |       store.dispatch(fetchUsers()),
22 |       store.dispatch(fetchPlayingContext())
23 |     ]);
24 |   }
25 |   render() {
26 |     return (
27 |       <Layout>
28 |         {this.props.playing.track
29 |           ? <NowPlaying
30 |               track={this.props.playing.track}
31 |               user={this.props.playing.user}
32 |               position={this.props.playing.position}
33 |             />
34 |           : null}
35 |         <div className="app">
36 |           <style jsx>
37 |             {`
38 |               .app {
39 |                 margin: 20px;
40 |                 padding: 20px;
41 |               }
42 |             `}
43 |           </style>
44 |           <div style={{ float: 'left' }}>
45 |             <Queue items={this.props.queue} session={this.props.session} />
46 |             {this.props.session.user !== null ? <AddToQueue /> : null}
47 |             {this.props.session.user !== null ? <Devices /> : null}
48 |           </div>
49 |           <div style={{ float: 'right', width: '150px' }}>
50 |             <Users items={this.props.users} />
51 |           </div>
52 |         </div>
53 |       </Layout>
54 |     );
55 |   }
56 | }
57 | 
58 | const mapStateToProps = state => ({
59 |   playing: state.playback,
60 |   queue: state.queue,
61 |   users: state.users,
62 |   session: state.session
63 | });
64 | 
65 | export default withRedux(initStore, mapStateToProps, null)(PageWithIntl(Main));
66 | 


--------------------------------------------------------------------------------
/reducers/devicesReducer.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   FETCH_AVAILABLE_DEVICES,
 3 |   FETCH_AVAILABLE_DEVICES_ERROR,
 4 |   FETCH_AVAILABLE_DEVICES_SUCCESS
 5 | } from '../constants/ActionTypes';
 6 | 
 7 | const initialState = {
 8 |   isFetching: false,
 9 |   data: []
10 | };
11 | 
12 | export default (state, action) => {
13 |   switch (action.type) {
14 |     case FETCH_AVAILABLE_DEVICES:
15 |       return {
16 |         ...state,
17 |         isFetching: true
18 |       };
19 |     case FETCH_AVAILABLE_DEVICES_SUCCESS:
20 |       return {
21 |         ...state,
22 |         isFetching: false,
23 |         data: action.list
24 |       };
25 |     case FETCH_AVAILABLE_DEVICES_ERROR:
26 |       return initialState;
27 |     default:
28 |       return state ? state : initialState;
29 |   }
30 | };
31 | 
32 | export const getIsFetching = state => {
33 |   return state.isFetching;
34 | };
35 | 
36 | export const getDevices = state => {
37 |   return state.data;
38 | };
39 | 


--------------------------------------------------------------------------------
/reducers/index.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | 
 3 | import queueReducer from '../reducers/queueReducer';
 4 | import sessionReducer from '../reducers/sessionReducer';
 5 | import playbackReducer from '../reducers/playbackReducer';
 6 | import devicesReducer, * as fromDevices from '../reducers/devicesReducer';
 7 | import usersReducer from '../reducers/usersReducer';
 8 | import searchReducer from '../reducers/searchReducer';
 9 | 
10 | export const reducers = () =>
11 |   combineReducers({
12 |     queue: queueReducer,
13 |     playback: playbackReducer,
14 |     session: sessionReducer,
15 |     users: usersReducer,
16 |     search: searchReducer,
17 |     devices: devicesReducer
18 |   });
19 | 
20 | export const getDevices = state => fromDevices.getDevices(state.devices);
21 | 
22 | export const getIsFetchingDevices = state => fromDevices.getIsFetching(state.devices);
23 | 


--------------------------------------------------------------------------------
/reducers/playbackReducer.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   FETCH_PLAYING_CONTEXT_SUCCESS,
 3 |   PLAY_TRACK_SUCCESS,
 4 |   QUEUE_ENDED,
 5 |   MUTE_PLAYBACK,
 6 |   UNMUTE_PLAYBACK,
 7 |   UPDATE_NOW_PLAYING
 8 | } from '../constants/ActionTypes';
 9 | 
10 | const initialState = {
11 |   muted: false
12 | };
13 | 
14 | export default (state, action) => {
15 |   switch (action.type) {
16 |     case FETCH_PLAYING_CONTEXT_SUCCESS:
17 |       return {
18 |         ...state,
19 |         track: action.playingContext.track,
20 |         user: action.playingContext.user,
21 |         position: 0
22 |       };
23 |     case PLAY_TRACK_SUCCESS:
24 |       return {
25 |         ...state,
26 |         track: action.track,
27 |         user: action.user,
28 |         position: action.position,
29 |         startTime: new Date()
30 |       };
31 |     case UPDATE_NOW_PLAYING:
32 |       return {
33 |         ...state,
34 |         track: action.track,
35 |         user: action.user,
36 |         position: action.position,
37 |         startTime: new Date()
38 |       };
39 |     case QUEUE_ENDED: {
40 |       return initialState;
41 |     }
42 |     case MUTE_PLAYBACK:
43 |       return { ...state, muted: true };
44 |     case UNMUTE_PLAYBACK:
45 |       return { ...state, muted: false };
46 |     default:
47 |       return state ? state : initialState;
48 |   }
49 | };
50 | 


--------------------------------------------------------------------------------
/reducers/queueReducer.js:
--------------------------------------------------------------------------------
 1 | import { UPDATE_QUEUE } from '../constants/ActionTypes';
 2 | 
 3 | const initialState = [];
 4 | 
 5 | export default (state, action) => {
 6 |   switch (action.type) {
 7 |     case UPDATE_QUEUE:
 8 |       return action.data;
 9 |     default:
10 |       return state ? state : initialState;
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/reducers/searchReducer.js:
--------------------------------------------------------------------------------
 1 | import { SEARCH_TRACKS, SEARCH_TRACKS_SUCCESS, SEARCH_TRACKS_RESET } from '../constants/ActionTypes';
 2 | 
 3 | const initialState = {};
 4 | 
 5 | export default (state, action) => {
 6 |   switch (action.type) {
 7 |     case SEARCH_TRACKS:
 8 |       return { query: action.query };
 9 |     case SEARCH_TRACKS_SUCCESS:
10 |       if (state.query === action.query) {
11 |         return {
12 |           query: action.query,
13 |           results: action.results
14 |         };
15 |       } else {
16 |         return state;
17 |       }
18 |     case SEARCH_TRACKS_RESET:
19 |       return initialState;
20 | 
21 |     default:
22 |       return state ? state : initialState;
23 |   }
24 | };
25 | 


--------------------------------------------------------------------------------
/reducers/sessionReducer.js:
--------------------------------------------------------------------------------
 1 | import { LOAD, LOGIN_SUCCESS, UPDATE_TOKEN_SUCCESS, UPDATE_CURRENT_USER } from '../constants/ActionTypes';
 2 | 
 3 | const initialState = {
 4 |   refresh_token: null, //'localStorage' in window && localStorage.getItem('refreshToken'),
 5 |   user: null
 6 | };
 7 | 
 8 | export default (state, action) => {
 9 |   switch (action.type) {
10 |     case LOAD:
11 |       if (process.browser) {
12 |         const refreshToken = localStorage.getItem('refreshToken');
13 |         const accessToken = localStorage.getItem('accessToken');
14 |         const expiresIn = localStorage.getItem('expiresIn');
15 |         return Object.assign({}, state, {
16 |           access_token: accessToken,
17 |           refresh_token: refreshToken,
18 |           expires_in: expiresIn ? +expiresIn : null
19 |         });
20 |       } else {
21 |         return state;
22 |       }
23 |     case UPDATE_TOKEN_SUCCESS:
24 |       return Object.assign({}, state, { access_token: action.access_token });
25 |     case LOGIN_SUCCESS:
26 |       if (action.refresh_token) {
27 |         return Object.assign({}, state, {
28 |           refresh_token: action.refresh_token
29 |         });
30 |       }
31 |       return state;
32 |     case UPDATE_CURRENT_USER:
33 |       return Object.assign({}, state, { user: action.user });
34 |     default:
35 |       return state ? state : initialState;
36 |   }
37 | };
38 | 


--------------------------------------------------------------------------------
/reducers/usersReducer.js:
--------------------------------------------------------------------------------
 1 | import { UPDATE_USERS } from '../constants/ActionTypes';
 2 | 
 3 | const initialState = [
 4 |   {
 5 |     id: 'something',
 6 |     name: 'Adrian'
 7 |   },
 8 |   {
 9 |     id: 'something',
10 |     name: 'Bea'
11 |   },
12 |   {
13 |     id: 'something',
14 |     name: 'Carlos'
15 |   }
16 | ];
17 | 
18 | export default (state, action) => {
19 |   switch (action.type) {
20 |     case UPDATE_USERS:
21 |       return action.data;
22 |     default:
23 |       return state ? state : initialState;
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/server/api.js:
--------------------------------------------------------------------------------
  1 | const express = require('express');
  2 | const fs = require('fs');
  3 | const SpotifyWebApi = require('spotify-web-api-node');
  4 | 
  5 | const AuthConfig = require('../config/auth');
  6 | 
  7 | const Bot = require('./models/Bot');
  8 | const QueueItem = require('./models/QueueItem');
  9 | const QueueManager = require('./models/QueueManager');
 10 | 
 11 | const spotifyApi = new SpotifyWebApi({
 12 |   clientId: AuthConfig.CLIENT_ID,
 13 |   clientSecret: AuthConfig.CLIENT_SECRET
 14 | });
 15 | 
 16 | const Router = express.Router;
 17 | 
 18 | let accessToken = null;
 19 | 
 20 | // fetches a new token
 21 | const fetchNewToken = callback => {
 22 |   console.log('Fetching new token');
 23 |   spotifyApi
 24 |     .clientCredentialsGrant()
 25 |     .then(data => {
 26 |       accessToken = data.body['access_token'];
 27 |       const expires_in = data.body['expires_in'];
 28 |       spotifyApi.setAccessToken(accessToken);
 29 |       callback && callback(accessToken);
 30 |       setTimeout(() => {
 31 |         fetchNewToken();
 32 |       }, (expires_in - 10 * 60) * 1000); // refresh it in expires_in - 10 min
 33 |     })
 34 |     .catch(e => {
 35 |       console.error('fetchNewToken > Error fetching new token', e);
 36 |     });
 37 | };
 38 | 
 39 | // returns a new token or the cached one if still valid
 40 | const getToken = callback => {
 41 |   if (accessToken !== null) {
 42 |     callback && callback(accessToken);
 43 |   } else {
 44 |     fetchNewToken(callback);
 45 |   }
 46 | };
 47 | 
 48 | const botUser = new Bot({
 49 |   getToken: getToken,
 50 |   spotifyApi: spotifyApi
 51 | });
 52 | 
 53 | let users = [botUser.toJSON()];
 54 | 
 55 | let globalSocket = null;
 56 | 
 57 | let globalIo = null;
 58 | 
 59 | const queueManager = new QueueManager({
 60 |   onPlay: () => {
 61 |     const { track, user } = queueManager.getPlayingContext();
 62 |     // if one user logs in on multiple tabs, just send 'play track' message to one tab,
 63 |     // but need to send 'update now playing' to other tabs
 64 |     users.forEach(u => {
 65 |       u.socketIdArray.forEach((socketId, index) => {
 66 |         if (index === 0) {
 67 |           globalIo.to(socketId).emit('play track', track, user);
 68 |         } else {
 69 |           globalIo.to(socketId).emit('update now playing', track, user);
 70 |         }
 71 |       });
 72 |     });
 73 |   },
 74 |   onQueueChanged: () => {
 75 |     globalSocket && globalSocket.emit('update queue', queueManager.getQueue());
 76 |     globalSocket && globalSocket.broadcast.emit('update queue', queueManager.getQueue());
 77 |   },
 78 |   onQueueEnded: async () => {
 79 |     globalSocket && globalSocket.emit('update queue', queueManager.getQueue());
 80 |     globalSocket && globalSocket.broadcast.emit('update queue', queueManager.getQueue());
 81 | 
 82 |     const botRecommendation = await botUser.generateRecommendation(queueManager.playedHistory, getToken, spotifyApi);
 83 |     if (botRecommendation !== null) {
 84 |       queueManager.addItem(
 85 |         new QueueItem({
 86 |           track: botRecommendation,
 87 |           user: botUser
 88 |         }).toJSON()
 89 |       );
 90 |     }
 91 |   }
 92 | });
 93 | 
 94 | queueManager.read();
 95 | queueManager.init();
 96 | 
 97 | const exportedApi = io => {
 98 |   let api = Router();
 99 | 
100 |   globalIo = io;
101 | 
102 |   api.get('/', (req, res) => {
103 |     res.json({ version });
104 |   });
105 | 
106 |   api.get('/now-playing', (req, res) => {
107 |     res.json(queueManager.playingContext);
108 |   });
109 | 
110 |   api.get('/queue', (req, res) => {
111 |     res.json(queueManager.queue);
112 |   });
113 | 
114 |   api.get('/users', (req, res) => {
115 |     res.json(users);
116 |   });
117 | 
118 |   api.get('/me', async (req, res) => {
119 |     await getToken();
120 |     try {
121 |       const resApi = spotifyApi.getMe();
122 |       res.json(resApi.body);
123 |     } catch (e) {
124 |       console.log('error', e);
125 |       res.status(500);
126 |     }
127 |   });
128 | 
129 |   // web socket interface!
130 |   io.on('connection', socket => {
131 |     globalSocket = socket;
132 |     socket.on('queue track', trackId => {
133 |       console.log('queueing track ' + trackId);
134 |       getToken(() => {
135 |         spotifyApi
136 |           .getTrack(trackId)
137 |           .then(resApi => {
138 |             queueManager.addItem(
139 |               new QueueItem({
140 |                 user: socket.user,
141 |                 track: resApi.body
142 |               }).toJSON()
143 |             );
144 |           })
145 |           .catch(e => {
146 |             console.log('error', e);
147 |           });
148 |       });
149 |     });
150 | 
151 |     socket.on('vote up', id => {
152 |       // todo: check that user is owner
153 |       queueManager.voteUpId(socket.user, id);
154 |     });
155 | 
156 |     socket.on('remove track', id => {
157 |       // todo: check that user is owner
158 |       queueManager.removeId(socket.user, id);
159 |     });
160 | 
161 |     socket.on('user login', user => {
162 |       // todo: make request server-side to avoid tampering
163 |       let index = -1;
164 |       users.forEach((u, i) => {
165 |         if (u.id === user.id) {
166 |           index = i;
167 |         }
168 |       });
169 | 
170 |       socket.user = user;
171 |       if (index !== -1) {
172 |         // user has already logged in, add socketId into sockets
173 |         users[index].socketIdArray.push(socket.id);
174 |       } else {
175 |         // user hasn't logged in
176 |         users.push(Object.assign({}, user, { socketIdArray: [socket.id] }));
177 |         socket.emit('update users', users);
178 |         socket.broadcast.emit('update users', users);
179 | 
180 |         // check if user should start playing something
181 |         const playingContext = queueManager.getPlayingContext();
182 |         if (playingContext.track !== null) {
183 |           socket.emit(
184 |             'play track',
185 |             playingContext.track,
186 |             playingContext.user,
187 |             Date.now() - playingContext.startTimestamp
188 |           );
189 |         }
190 |       }
191 |     });
192 | 
193 |     socket.on('disconnect', () => {
194 |       console.log('disconnect ' + socket.id);
195 |       let userIndex = -1;
196 |       let socketIdIndex = -1;
197 |       users.forEach((user, i) => {
198 |         user.socketIdArray.forEach((socketId, j) => {
199 |           if (socketId === socket.id) {
200 |             userIndex = i;
201 |             socketIdIndex = j;
202 |           }
203 |         });
204 |       });
205 | 
206 |       if (userIndex !== -1 && socketIdIndex !== -1) {
207 |         if (users[userIndex].socketIdArray.length > 1) {
208 |           // remove socketId from socketIdArray
209 |           users[userIndex].socketIdArray.splice(socketIdIndex, 1);
210 |         } else {
211 |           // remove user from users
212 |           users.splice(userIndex, 1);
213 |           socket.emit('update users', users.map(u => u.user));
214 |           socket.broadcast.emit('update users', users.map(u => u.user));
215 |         }
216 |       }
217 |     });
218 |   });
219 | 
220 |   return api;
221 | };
222 | 
223 | module.exports = exportedApi;
224 | 


--------------------------------------------------------------------------------
/server/auth.js:
--------------------------------------------------------------------------------
  1 | const express = require('express');
  2 | const querystring = require('querystring');
  3 | const request = require('request');
  4 | 
  5 | const Router = express.Router;
  6 | const AppConfig = require('../config/app');
  7 | const AuthConfig = require('../config/auth');
  8 | 
  9 | const redirect_uri = `${AppConfig.HOST}/auth/callback`;
 10 | const client_id = AuthConfig.CLIENT_ID;
 11 | const client_secret = AuthConfig.CLIENT_SECRET;
 12 | 
 13 | let auth = Router();
 14 | /**
 15 |  * Generates a random string containing numbers and letters
 16 |  * @param  {number} length The length of the string
 17 |  * @return {string} The generated string
 18 |  */
 19 | var generateRandomString = function(length) {
 20 |   var text = '';
 21 |   var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 22 | 
 23 |   for (var i = 0; i < length; i++) {
 24 |     text += possible.charAt(Math.floor(Math.random() * possible.length));
 25 |   }
 26 |   return text;
 27 | };
 28 | 
 29 | var stateKey = 'spotify_auth_state';
 30 | 
 31 | auth.get('/login', function(req, res) {
 32 |   var state = generateRandomString(16);
 33 |   res.cookie(stateKey, state);
 34 | 
 35 |   // your application requests authorization
 36 |   var scope = 'user-read-playback-state user-modify-playback-state';
 37 |   res.redirect(
 38 |     'https://accounts.spotify.com/authorize?' +
 39 |       querystring.stringify({
 40 |         response_type: 'code',
 41 |         client_id: client_id,
 42 |         scope: scope,
 43 |         redirect_uri: redirect_uri,
 44 |         state: state
 45 |       })
 46 |   );
 47 | });
 48 | 
 49 | auth.get('/callback', function(req, res) {
 50 |   // your application requests refresh and access tokens
 51 |   // after checking the state parameter
 52 | 
 53 |   var code = req.query.code || null;
 54 |   var state = req.query.state || null;
 55 |   var storedState = req.cookies ? req.cookies[stateKey] : null;
 56 | 
 57 |   if (state === null || state !== storedState) {
 58 |     console.log('state mismatch', 'state: ' + state, 'storedState ' + storedState, 'cookies ', req.cookies);
 59 |     res.render('pages/callback', {
 60 |       access_token: null,
 61 |       expires_in: null
 62 |     });
 63 |   } else {
 64 |     res.clearCookie(stateKey);
 65 |     var authOptions = {
 66 |       url: 'https://accounts.spotify.com/api/token',
 67 |       form: {
 68 |         code: code,
 69 |         redirect_uri: redirect_uri,
 70 |         grant_type: 'authorization_code'
 71 |       },
 72 |       headers: {
 73 |         Authorization: 'Basic ' + new Buffer(client_id + ':' + client_secret).toString('base64')
 74 |       },
 75 |       json: true
 76 |     };
 77 | 
 78 |     request.post(authOptions, function(error, response, body) {
 79 |       if (!error && response.statusCode === 200) {
 80 |         var access_token = body.access_token, refresh_token = body.refresh_token, expires_in = body.expires_in;
 81 | 
 82 |         res.cookie('refresh_token', refresh_token, {
 83 |           maxAge: 30 * 24 * 3600 * 1000
 84 |         });
 85 | 
 86 |         res.render('pages/callback', {
 87 |           access_token: access_token,
 88 |           expires_in: expires_in,
 89 |           refresh_token: refresh_token
 90 |         });
 91 |       } else {
 92 |         res.render('pages/callback', {
 93 |           access_token: null,
 94 |           expires_in: null
 95 |         });
 96 |       }
 97 |     });
 98 |   }
 99 | });
100 | 
101 | auth.post('/token', function(req, res) {
102 |   res.setHeader('Access-Control-Allow-Origin', '*');
103 |   var refreshToken = req.body ? req.body.refresh_token : null;
104 |   if (refreshToken) {
105 |     var authOptions = {
106 |       url: 'https://accounts.spotify.com/api/token',
107 |       form: {
108 |         refresh_token: refreshToken,
109 |         grant_type: 'refresh_token'
110 |       },
111 |       headers: {
112 |         Authorization: 'Basic ' + new Buffer(client_id + ':' + client_secret).toString('base64')
113 |       },
114 |       json: true
115 |     };
116 |     request.post(authOptions, function(error, response, body) {
117 |       if (!error && response.statusCode === 200) {
118 |         var access_token = body.access_token, expires_in = body.expires_in;
119 | 
120 |         res.setHeader('Content-Type', 'application/json');
121 |         res.send(
122 |           JSON.stringify({
123 |             access_token: access_token,
124 |             expires_in: expires_in
125 |           })
126 |         );
127 |       } else {
128 |         res.setHeader('Content-Type', 'application/json');
129 |         res.send(JSON.stringify({ access_token: '', expires_in: '' }));
130 |       }
131 |     });
132 |   } else {
133 |     res.setHeader('Content-Type', 'application/json');
134 |     res.send(JSON.stringify({ access_token: '', expires_in: '' }));
135 |   }
136 | });
137 | 
138 | module.exports = auth;
139 | 


--------------------------------------------------------------------------------
/server/models/Bot.js:
--------------------------------------------------------------------------------
 1 | class Bot {
 2 |   constructor(options) {
 3 |     this.image = options.image || '/static/robot-icon.png';
 4 |     this.id = options.id || 'Robot';
 5 |     this.recommendations = {};
 6 |   }
 7 | 
 8 |   async generateRecommendation(items, getToken, spotifyApi) {
 9 |     const trackIds = items.filter(i => i.user.type === 'user').map(i => i.track.id);
10 | 
11 |     if (trackIds.length) {
12 |       const key = trackIds.join('-');
13 |       if (!(key in this.recommendations)) {
14 |         await getToken();
15 |         const res = await spotifyApi.getRecommendations({ seed_tracks: trackIds });
16 |         this.recommendations[key] = res.body.tracks;
17 |       }
18 |       if (this.recommendations[key].length) {
19 |         return this.recommendations[key].shift();
20 |       } else {
21 |         return null;
22 |       }
23 |     } else {
24 |       return null;
25 |     }
26 |   }
27 | 
28 |   toJSON() {
29 |     return {
30 |       id: this.id,
31 |       images: [{ url: this.image }],
32 |       type: 'robot',
33 |       socketIdArray: [] // todo: always empty, add this attribute in order to be compatible with other true users
34 |     };
35 |   }
36 | }
37 | 
38 | module.exports = Bot;
39 | 


--------------------------------------------------------------------------------
/server/models/QueueItem.js:
--------------------------------------------------------------------------------
 1 | const uuidV4 = require('uuid/v4');
 2 | 
 3 | class QueueItem {
 4 |   constructor(options = {}) {
 5 |     this.id = options.id || uuidV4();
 6 |     this.track = options.track || {};
 7 |     this.user = options.user || {};
 8 |     this.voters = options.voters || [];
 9 |     this.startTimestamp = options.startTimestamp || null;
10 |     this.queuedTimestamp = options.queuedTimestamp || Date.now();
11 |   }
12 |   toJSON() {
13 |     return {
14 |       id: this.id,
15 |       user: this.user,
16 |       track: this.track,
17 |       voters: this.voters,
18 |       startTimestamp: this.startTimestamp
19 |     };
20 |   }
21 | }
22 | 
23 | module.exports = QueueItem;
24 | 


--------------------------------------------------------------------------------
/server/models/QueueManager.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs');
  2 | 
  3 | class QueueManager {
  4 |   constructor(options) {
  5 |     this.playingContext = {
  6 |       track: null,
  7 |       user: null,
  8 |       startTimestamp: null
  9 |     };
 10 |     this.queue = [];
 11 |     this.onQueueChanged = options.onQueueChanged;
 12 |     this.onQueueEnded = options.onQueueEnded;
 13 |     this.onPlay = options.onPlay;
 14 |     this.getToken = options.getToken;
 15 |     this.spotifyApi = options.spotifyApi;
 16 |     this.playedHistory = [];
 17 |   }
 18 | 
 19 |   handleQueueChanged() {
 20 |     this.sort();
 21 |     this.save();
 22 |     this.onQueueChanged();
 23 |   }
 24 | 
 25 |   getPlayingContext() {
 26 |     return this.playingContext;
 27 |   }
 28 | 
 29 |   getQueue() {
 30 |     return this.queue;
 31 |   }
 32 | 
 33 |   sort() {
 34 |     this.queue.sort((a, b) => {
 35 |       const diffVoters = b.voters.length - a.voters.length;
 36 |       if (diffVoters !== 0) {
 37 |         return diffVoters;
 38 |       } else {
 39 |         return a.queuedTimestamp - b.queuedTimestamp;
 40 |       }
 41 |     });
 42 |   }
 43 | 
 44 |   addItem(queueItem) {
 45 |     this.queue.push(queueItem);
 46 |     this.handleQueueChanged();
 47 |     if (this.playingContext.track === null) {
 48 |       this.play();
 49 |     }
 50 |   }
 51 | 
 52 |   removeId(user, id) {
 53 |     const index = this.queue.findIndex(item => item.id === id);
 54 |     if (index !== -1 && this.queue[index].user.id === user.id) {
 55 |       this.queue.splice(index, 1);
 56 |       this.handleQueueChanged();
 57 |     }
 58 |   }
 59 | 
 60 |   init() {
 61 |     this.play();
 62 |   }
 63 | 
 64 |   play() {
 65 |     console.log('api.js > play');
 66 |     if (this.queue.length > 0) {
 67 |       console.log('api.js > play has queue');
 68 |       // something to play!
 69 |       const queueItem = this.queue.shift();
 70 |       this.handleQueueChanged();
 71 |       this.playingContext = {
 72 |         track: queueItem.track,
 73 |         user: queueItem.user,
 74 |         startTimestamp: Date.now(),
 75 |         voters: queueItem.voters
 76 |       };
 77 |       this.playedHistory.push({
 78 |         track: queueItem.track,
 79 |         user: queueItem.user
 80 |       });
 81 |       setTimeout(() => {
 82 |         this.play();
 83 |       }, 2000 + queueItem.track.duration_ms);
 84 |       this.onPlay();
 85 |     } else {
 86 |       this.playingContext = {
 87 |         track: null,
 88 |         user: null,
 89 |         startTimestamp: null,
 90 |         voters: []
 91 |       };
 92 | 
 93 |       this.onQueueEnded();
 94 |     }
 95 |   }
 96 | 
 97 |   voteUpId(user, id) {
 98 |     const index = this.queue.findIndex(item => item.id === id);
 99 |     if (index === -1) return false;
100 |     const voters = this.queue[index].voters;
101 |     if (voters) {
102 |       const userVotes = voters.filter(v => v.id === user.id);
103 |       if (userVotes.length === 0) {
104 |         this.queue[index].voters.push(user);
105 |         this.handleQueueChanged();
106 |         return true;
107 |       }
108 |     }
109 |   }
110 | 
111 |   save() {
112 |     fs.writeFileSync(
113 |       './queue.json',
114 |       JSON.stringify({
115 |         playingContext: this.playingContext,
116 |         queue: this.queue
117 |       }),
118 |       ''
119 |     );
120 |   }
121 | 
122 |   read() {
123 |     try {
124 |       const data = JSON.parse(fs.readFileSync('./queue.json'));
125 |       this.playingContext = data.playingContext;
126 |       this.queue = data.queue;
127 |     } catch (e) {
128 |       // do nothing;
129 |     }
130 |   }
131 | }
132 | 
133 | module.exports = QueueManager;
134 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | require('dotenv').config();
 2 | 
 3 | const { basename } = require('path');
 4 | const fs = require('fs');
 5 | 
 6 | const app = require('express')();
 7 | const server = require('http').Server(app);
 8 | const io = require('socket.io')(server);
 9 | const next = require('next');
10 | const compression = require('compression');
11 | const accepts = require('accepts');
12 | 
13 | const dev = process.env.NODE_ENV !== 'production';
14 | const nextApp = next({ dev });
15 | const nextHandler = nextApp.getRequestHandler();
16 | 
17 | const cookieParser = require('cookie-parser');
18 | const bodyParser = require('body-parser');
19 | 
20 | const auth = require('./auth');
21 | const api = require('./api');
22 | const glob = require('glob');
23 | 
24 | // Get the supported languages by looking for translations in the `lang/` dir.
25 | const languages = glob.sync('./lang/*.json').map(f => basename(f, '.json'));
26 | 
27 | // We need to expose React Intl's locale data on the request for the user's
28 | // locale. This function will also cache the scripts by lang in memory.
29 | const localeDataCache = new Map();
30 | const getLocaleDataScript = locale => {
31 |   const lang = locale.split('-')[0];
32 |   if (!localeDataCache.has(lang)) {
33 |     const localeDataFile = require.resolve(`react-intl/locale-data/${lang}`);
34 |     const localeDataScript = fs.readFileSync(localeDataFile, 'utf8');
35 |     localeDataCache.set(lang, localeDataScript);
36 |   }
37 |   return localeDataCache.get(lang);
38 | };
39 | 
40 | // We need to load and expose the translations on the request for the user's
41 | // locale. These will only be used in production, in dev the `defaultMessage` in
42 | // each message description in the source code will be used.
43 | const getMessages = locale => {
44 |   return require(`../lang/${locale}.json`);
45 | };
46 | 
47 | nextApp.prepare().then(() => {
48 |   app.use(compression());
49 |   app.use(cookieParser());
50 |   app.set('views', __dirname + '/views');
51 |   app.set('view engine', 'ejs');
52 | 
53 |   // needed to parse refresh_token
54 |   app.use(
55 |     bodyParser.json({
56 |       limit: 1024
57 |     })
58 |   );
59 | 
60 |   // auth router
61 |   app.use('/auth', auth);
62 | 
63 |   app.use('/api', api(io));
64 | 
65 |   app.get('*', (req, res) => {
66 |     const accept = accepts(req);
67 |     const locale = accept.language(/*dev ? ['en'] : */ languages);
68 |     req.locale = locale;
69 |     req.localeDataScript = getLocaleDataScript(locale);
70 |     req.messages = /*dev ? {} :*/ getMessages(locale);
71 |     console.log({
72 |       locale: req.locale,
73 |       messages: req.messages
74 |     });
75 |     return nextHandler(req, res);
76 |   });
77 | 
78 |   server.listen(process.env.PORT || 3000, err => {
79 |     if (err) throw err;
80 |     console.log(`> Ready on http://localhost:${process.env.PORT || 3000}`);
81 |   });
82 | });
83 | 


--------------------------------------------------------------------------------
/server/views/pages/callback.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <script>
 5 |   window.opener && window.opener.postMessage(JSON.stringify({
 6 |     type:'access_token',
 7 |     access_token: '<%= access_token %>',
 8 |     expires_in: '<%= expires_in %>',
 9 |     refresh_token: '<%= refresh_token %>'
10 |   }), '*');
11 |   window.close();
12 |   </script>
13 | </head>
14 | <body>
15 |   <span style="padding:2em; font: Helvetica, Arial; font-size: 12px; color: #333">
16 |   This page should close in a few seconds.
17 | </span>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/static/c-icon-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMPerez/c/55dfa65392f096c550a01d0c7a44d664ab6fbee6/static/c-icon-128.png


--------------------------------------------------------------------------------
/static/c-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMPerez/c/55dfa65392f096c550a01d0c7a44d664ab6fbee6/static/c-icon.png


--------------------------------------------------------------------------------
/static/robot-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMPerez/c/55dfa65392f096c550a01d0c7a44d664ab6fbee6/static/robot-icon.png


--------------------------------------------------------------------------------
/static/user-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMPerez/c/55dfa65392f096c550a01d0c7a44d664ab6fbee6/static/user-icon.png


--------------------------------------------------------------------------------
/store/store.js:
--------------------------------------------------------------------------------
 1 | import { createStore, compose, applyMiddleware } from 'redux';
 2 | import thunk from 'redux-thunk';
 3 | 
 4 | import { reducers } from '../reducers';
 5 | 
 6 | import sessionMiddleware from '../middlewares/sessionMiddleware';
 7 | import playbackMiddleware from '../middlewares/playbackMiddleware';
 8 | import devicesMiddleware from '../middlewares/devicesMiddleware';
 9 | import { socketMiddleware } from '../middlewares/socketMiddleware';
10 | import loggerMiddleware from '../middlewares/loggerMiddleware';
11 | import socketMiddlewareDefault from '../middlewares/socketMiddleware';
12 | import searchMiddleware from '../middlewares/searchMiddleware';
13 | 
14 | import { load } from '../actions/sessionActions';
15 | 
16 | export const initStore = (initialState = {}) => {
17 |   const store = createStore(
18 |     reducers(),
19 |     initialState,
20 |     applyMiddleware(
21 |       thunk,
22 |       sessionMiddleware,
23 |       socketMiddleware,
24 |       playbackMiddleware,
25 |       devicesMiddleware,
26 |       loggerMiddleware,
27 |       searchMiddleware
28 |     )
29 |   );
30 |   socketMiddlewareDefault(store);
31 |   store.dispatch(load());
32 |   return store;
33 | };
34 | 


--------------------------------------------------------------------------------