40 |
47 |
49 |
52 |
54 |
56 | );
57 | } else {
58 | playlistText = (
59 | 41 | 44 |
45 | 46 |
47 |
49 |
52 |
54 |
60 |
66 |
81 | );
82 |
83 | }
84 | }
85 | PlaylistIntl.propTypes = {
86 | playAction: PropTypes.func.isRequired,
87 | playNextAction: PropTypes.func,
88 | flushAction: PropTypes.func.isRequired,
89 | songs: PropTypes.instanceOf(Immutable.List).isRequired,
90 | currentIndex: PropTypes.number.isRequired,
91 | intl: intlShape.isRequired,
92 | };
93 | export default injectIntl(PlaylistIntl);
94 |
--------------------------------------------------------------------------------
/app/views/LoginPage.jsx:
--------------------------------------------------------------------------------
1 | // NPM imports
2 | import React, { Component, PropTypes } from "react";
3 | import { bindActionCreators } from "redux";
4 | import { connect } from "react-redux";
5 |
6 | // Actions
7 | import * as actionCreators from "../actions";
8 |
9 | // Components
10 | import Login from "../components/Login";
11 |
12 |
13 | /**
14 | * Login page
15 | */
16 | export class LoginPage extends Component {
17 | constructor(props) {
18 | super(props);
19 |
20 | // Bind this
21 | this.handleSubmit = this.handleSubmit.bind(this);
22 | this._getRedirectTo = this._getRedirectTo.bind(this);
23 | }
24 |
25 | /**
26 | * Get URL to redirect to based on location props.
27 | */
28 | _getRedirectTo() {
29 | let redirectPathname = "/";
30 | let redirectQuery = {};
31 | const { location } = this.props;
32 | if (location.state && location.state.nextPathname) {
33 | redirectPathname = location.state.nextPathname;
34 | }
35 | if (location.state && location.state.nextQuery) {
36 | redirectQuery = location.state.nextQuery;
37 | }
38 | return {
39 | pathname: redirectPathname,
40 | query: redirectQuery,
41 | };
42 | }
43 |
44 | componentWillMount() {
45 | // This checks if the user is already connected or not and redirects
46 | // them if it is the case.
47 |
48 | // Get next page to redirect to
49 | const redirectTo = this._getRedirectTo();
50 |
51 | if (this.props.isAuthenticated) {
52 | // If user is already authenticated, redirects them
53 | this.context.router.replace(redirectTo);
54 | } else if (this.props.rememberMe) {
55 | // Else if remember me is set, try to reconnect them
56 | this.props.actions.loginUser(
57 | this.props.username,
58 | this.props.token,
59 | this.props.endpoint,
60 | true,
61 | redirectTo,
62 | true
63 | );
64 | }
65 | }
66 |
67 | /**
68 | * Handle click on submit button.
69 | */
70 | handleSubmit(username, password, endpoint, rememberMe) {
71 | // Get page to redirect to
72 | const redirectTo = this._getRedirectTo();
73 | // Trigger login action
74 | this.props.actions.loginUser(username, password, endpoint, rememberMe, redirectTo);
75 | }
76 |
77 | render() {
78 | return (
79 |
67 |
74 |
75 |
68 |
69 |
71 |
72 |
73 |
69 |
71 | 72 |
76 |
80 |
77 | { playlistText }
78 |
79 |
56 |
61 | );
62 | }
63 |
64 | // Handle error
65 | let error = null;
66 | if (this.props.error) {
67 | error = (
57 |
58 |
88 | { error }
89 |
106 | );
107 | }
108 | }
109 | ArtistCSS.propTypes = {
110 | error: PropTypes.string,
111 | isFetching: PropTypes.bool.isRequired,
112 | playAction: PropTypes.func.isRequired,
113 | playNextAction: PropTypes.func.isRequired,
114 | artist: PropTypes.instanceOf(Immutable.Map),
115 | albums: PropTypes.instanceOf(Immutable.List),
116 | songs: PropTypes.instanceOf(Immutable.Map),
117 | scrollToAlbum: PropTypes.number,
118 | };
119 | export default CSSModules(ArtistCSS, css);
120 |
--------------------------------------------------------------------------------
/app/locales/en-US/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "app.api.invalidResponse": "Invalid response text.", // Invalid response from the API
3 | "app.api.emptyResponse": "Empty response text.", // Empty response from the API
4 | "app.api.error": "Unknown API error.", // An unknown error occurred from the API
5 | "app.common.album": "{itemCount, plural, one {album} other {albums}}", // Album
6 | "app.common.art": "Art", // Art
7 | "app.common.artist": "{itemCount, plural, one {artist} other {artists}}", // Artist
8 | "app.common.cancel": "Cancel", // Cancel
9 | "app.common.close": "Close", // Close
10 | "app.common.go": "Go", // Go
11 | "app.common.loading": "Loading…", // Loading indicator
12 | "app.common.pause": "Pause", // Pause icon description
13 | "app.common.play": "Play", // Play icon description
14 | "app.common.playNext": "Play next", // Play next icon descripton
15 | "app.common.track": "{itemCount, plural, one {track} other {tracks}}", // Track
16 | "app.filter.filter": "Filter…", // Filtering input placeholder
17 | "app.filter.whatAreWeListeningToToday": "What are we listening to today?", // Description for the filter bar
18 | "app.grid.goToArtistPage": "Go to artist page", // Artist thumbnail link title
19 | "app.grid.goToAlbumPage": "Go to album page", // Album thumbnail link title
20 | "app.login.byebye": "See you soon!", // Info message on successful logout
21 | "app.login.connecting": "Connecting…", // Info message while trying to connect
22 | "app.login.endpointInputAriaLabel": "URL of your Ampache instance (e.g. http://ampache.example.com)", // ARIA label for the endpoint input
23 | "app.login.expired": "Your session expired… =(", // Error message on expired session
24 | "app.login.greeting": "Welcome back on Ampache, let's go!", // Greeting to welcome the user to the app
25 | "app.login.password": "Password", // Password input placeholder
26 | "app.login.rememberMe": "Remember me", // Remember me checkbox label
27 | "app.login.signIn": "Sign in", // Sign in
28 | "app.login.success": "Successfully logged in as { username }!", // Info message on successful login.
29 | "app.login.username": "Username", // Username input placeholder
30 | "app.pagination.current": "current", // Current (page)
31 | "app.pagination.goToPage": "Go to page {pageNumber}", // Link content to go to page N. span is here for screen-readers
32 | "app.pagination.goToPageWithoutMarkup": "Go to page {pageNumber}", // Link title to go to page N
33 | "app.pagination.pageNavigation": "Page navigation", // ARIA label for the nav block containing pagination
34 | "app.pagination.pageToGoTo": "Page to go to?", // Title of the pagination modal
35 | "app.playlist.currentSongPlaying": "Current song playing", // Current song playing
36 | "app.playlist.emptyPlaylist": "Empty playlist", // Empty playlist message
37 | "app.playlist.flushPlaylist": "Empty the playlist", // Empty the playlist link label
38 | "app.playlist.fullPlaylist": "Full playlist", // Full playlist
39 | "app.playlist.playlist": "Playlist", // Playlist translation
40 | "app.settings.settings": "Settings", // Settings translation
41 | "app.sidebarLayout.browse": "Browse", // Browse
42 | "app.sidebarLayout.browseAlbums": "Browse albums", // Browse albums
43 | "app.sidebarLayout.browseArtists": "Browse artists", // Browse artists
44 | "app.sidebarLayout.browseSongs": "Browse songs", // Browse songs
45 | "app.sidebarLayout.discover": "Discover", // Discover
46 | "app.sidebarLayout.home": "Home", // Home
47 | "app.sidebarLayout.logout": "Logout", // Logout
48 | "app.sidebarLayout.mainNavigationMenu": "Main navigation menu", // ARIA label for the main navigation menu
49 | "app.sidebarLayout.settings": "Settings", // Settings
50 | "app.sidebarLayout.toggleNavigation": "Toggle navigation", // Screen reader description of toggle navigation button
51 | "app.songs.genre": "Genre", // Genre (song)
52 | "app.songs.length": "Length", // Length (song)
53 | "app.songs.title": "Title", // Title (song)
54 | "app.webplayer.by": "by", // Artist affiliation of a song
55 | "app.webplayer.next": "Next", // Next button description
56 | "app.webplayer.onLoadError": "Unable to load song", // Error message in case a song could not be loaded
57 | "app.webplayer.playlist": "Playlist", // Playlist button description
58 | "app.webplayer.previous": "Previous", // Previous button description
59 | "app.webplayer.random": "Random", // Random button description
60 | "app.webplayer.repeat": "Repeat", // Repeat button description
61 | "app.webplayer.unsupported":"Unsupported media type", // Unsupported media type
62 | "app.webplayer.volume": "Volume", // Volume button description
63 | };
64 |
--------------------------------------------------------------------------------
/app/locales/fr-FR/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "app.api.invalidResponse": "Réponse invalide reçue.", // Invalid response from the API
3 | "app.api.emptyResponse": "Réponse vide reçue.", // Empty response from the API
4 | "app.api.error": "Erreur inconnue.", // An unknown error occurred from the API
5 | "app.common.album": "{itemCount, plural, one {album} other {albums}}", // Albums
6 | "app.common.art": "Pochette", // Art
7 | "app.common.artist": "{itemCount, plural, one {artiste} other {artistes}}", // Artists
8 | "app.common.cancel": "Annuler", // Cancel
9 | "app.common.close": "Fermer", // Close
10 | "app.common.go": "Aller", // Go
11 | "app.common.loading": "Chargement…", // Loading indicator
12 | "app.common.pause": "Pause", // Pause icon description
13 | "app.common.play": "Jouer", // PLay icon description
14 | "app.common.playNext": "Jouer après", // Play next icon descripton
15 | "app.common.track": "{itemCount, plural, one {piste} other {pistes}}", // Track
16 | "app.filter.filter": "Filtrer…", // Filtering input placeholder
17 | "app.filter.whatAreWeListeningToToday": "Que voulez-vous écouter aujourd'hui\u00a0?", // Description for the filter bar
18 | "app.grid.goToArtistPage": "Aller à la page de l'artiste", // Artist thumbnail link title
19 | "app.grid.goToAlbumPage": "Aller à la page de l'album", // Album thumbnail link title
20 | "app.login.byebye": "À bientôt\u00a0!", // Info message on successful logout
21 | "app.login.connecting": "Connexion…", // Info message while trying to connect
22 | "app.login.endpointInputAriaLabel": "URL de votre Ampache (e.g. http://ampache.example.com)", // ARIA label for the endpoint input
23 | "app.login.expired": "Session expirée… =(", // Error message on expired session
24 | "app.login.greeting": "Bon retour sur Ampache, c'est parti\u00a0!", // Greeting to welcome the user to the app
25 | "app.login.password": "Mot de passe", // Password input placeholder
26 | "app.login.rememberMe": "Se souvenir", // Remember me checkbox label
27 | "app.login.signIn": "Connexion", // Sign in
28 | "app.login.success": "Connecté en tant que { username }\u00a0!", // Info message on successful login.
29 | "app.login.username": "Utilisateur", // Username input placeholder
30 | "app.pagination.current": "actuelle", // Current (page)
31 | "app.pagination.goToPage": "Aller à la page {pageNumber}", // Link content to go to page N. span is here for screen-readers
32 | "app.pagination.goToPageWithoutMarkup": "Aller à la page {pageNumber}", // Link title to go to page N
33 | "app.pagination.pageNavigation": "Navigation entre les pages", // ARIA label for the nav block containing pagination
34 | "app.pagination.pageToGoTo": "Page à laquelle aller\u00a0?", // Title of the pagination modal
35 | "app.playlist.currentSongPlaying": "Piste en cours de lecture", // Current song playing
36 | "app.playlist.emptyPlaylist": "Liste de lecture vide", // Empty playlist message
37 | "app.playlist.flushPlaylist": "Vider la playlist", // Empty the playlist link label
38 | "app.playlist.fullPlaylist": "Playlist complète", // Full playlist
39 | "app.playlist.playlist": "Liste de lecture", // Playlist translation
40 | "app.settings.settings": "Préférences", // Settings translation
41 | "app.sidebarLayout.browse": "Explorer", // Browse
42 | "app.sidebarLayout.browseAlbums": "Parcourir les albums", // Browse albums
43 | "app.sidebarLayout.browseArtists": "Parcourir les artistes", // Browse artists
44 | "app.sidebarLayout.browseSongs": "Parcourir les pistes", // Browse songs
45 | "app.sidebarLayout.discover": "Découvrir", // Discover
46 | "app.sidebarLayout.home": "Accueil", // Home
47 | "app.sidebarLayout.logout": "Déconnexion", // Logout
48 | "app.sidebarLayout.mainNavigationMenu": "Menu principal", // ARIA label for the main navigation menu
49 | "app.sidebarLayout.settings": "Préférences", // Settings
50 | "app.sidebarLayout.toggleNavigation": "Afficher le menu", // Screen reader description of toggle navigation button
51 | "app.songs.genre": "Genre", // Genre (song)
52 | "app.songs.length": "Durée", // Length (song)
53 | "app.songs.title": "Titre", // Title (song)
54 | "app.webplayer.by": "par", // Artist affiliation of a song
55 | "app.webplayer.next": "Suivant", // Next button description
56 | "app.webplayer.onLoadError": "Impossible de charger la piste", // Error message in case a song could not be loaded
57 | "app.webplayer.playlist": "Liste de lecture", // Playlist button description
58 | "app.webplayer.previous": "Précédent", // Previous button description
59 | "app.webplayer.random": "Aléatoire", // Random button description
60 | "app.webplayer.repeat": "Répéter", // Repeat button description
61 | "app.webplayer.unsupported": "Format non supporté", // Unsupported media type
62 | "app.webplayer.volume": "Volume", // Volume button description
63 | };
64 |
--------------------------------------------------------------------------------
/app/components/Album.jsx:
--------------------------------------------------------------------------------
1 | // NPM import
2 | import React, { Component, PropTypes } from "react";
3 | import CSSModules from "react-css-modules";
4 | import { defineMessages, FormattedMessage, injectIntl, intlShape } from "react-intl";
5 | import FontAwesome from "react-fontawesome";
6 | import Immutable from "immutable";
7 |
8 | // Local imports
9 | import { formatLength, messagesMap } from "../utils";
10 |
11 | // Translations
12 | import commonMessages from "../locales/messagesDescriptors/common";
13 |
14 | // Styles
15 | import css from "../styles/Album.scss";
16 |
17 | // Set translations
18 | const albumMessages = defineMessages(messagesMap(Array.concat([], commonMessages)));
19 |
20 |
21 | /**
22 | * Track row in an album tracks table.
23 | */
24 | class AlbumTrackRowCSSIntl extends Component {
25 | constructor(props) {
26 | super(props);
27 |
28 | // Bind this
29 | this.onPlayClick = this.onPlayClick.bind(this);
30 | this.onPlayNextClick = this.onPlayNextClick.bind(this);
31 | }
32 |
33 | /**
34 | * Handle click on play button.
35 | */
36 | onPlayClick() {
37 | $(this.refs.play).blur();
38 | this.props.playAction(this.props.track.get("id"));
39 | }
40 |
41 | /**
42 | * Handle click on play next button.
43 | */
44 | onPlayNextClick() {
45 | $(this.refs.playNext).blur();
46 | this.props.playNextAction(this.props.track.get("id"));
47 | }
48 |
49 | render() {
50 | const { formatMessage } = this.props.intl;
51 | const length = formatLength(this.props.track.get("time"));
52 | return (
53 |
90 |
95 |
91 |
93 |
94 | {this.props.artist.get("name")}
92 |93 |
96 |
103 | { albumsRows }
104 | { loading }
105 |
97 |
99 | {this.props.artist.get("summary")}
98 |
100 |
102 |
119 |
133 | );
134 | }
135 | }
136 | AlbumRowCSS.propTypes = {
137 | playAction: PropTypes.func.isRequired,
138 | playNextAction: PropTypes.func.isRequired,
139 | album: PropTypes.instanceOf(Immutable.Map).isRequired,
140 | songs: PropTypes.instanceOf(Immutable.List).isRequired,
141 | };
142 | export let AlbumRow = CSSModules(AlbumRowCSS, css);
143 |
--------------------------------------------------------------------------------
/app/components/Discover.jsx:
--------------------------------------------------------------------------------
1 | // TODO: Discover view is not done
2 | import React, { Component } from "react";
3 | import CSSModules from "react-css-modules";
4 | import FontAwesome from "react-fontawesome";
5 |
6 | import css from "../styles/Discover.scss";
7 |
8 | export class DiscoverCSS extends Component {
9 | render() {
10 | const artistsAlbumsSongsDropdown = (
11 |
22 | );
23 | const bobDylan = (
24 |
120 |
122 | {this.props.album.get("name")}
121 |
123 |
125 |
126 | {
127 | this.props.songs.size > 0 ?
128 |
132 |
25 |
34 | );
35 | return (
36 |
26 |
27 | ![Bob Dylan]()
28 |
29 |
33 | 30 | Bob Dylan 31 |
32 |
37 |
119 |
120 |
121 | );
122 | }
123 | }
124 |
125 | DiscoverCSS.propTypes = {
126 | };
127 |
128 | export default CSSModules(DiscoverCSS, css);
129 |
--------------------------------------------------------------------------------
/app/reducers/webplayer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This implements the webplayer reducers.
3 | */
4 |
5 | // NPM imports
6 | import Immutable from "immutable";
7 |
8 | // Local imports
9 | import { createReducer } from "../utils";
10 |
11 | // Models
12 | import { stateRecord } from "../models/webplayer";
13 |
14 | // Actions
15 | import {
16 | PLAY_PAUSE,
17 | STOP_PLAYBACK,
18 | SET_PLAYLIST,
19 | PUSH_SONG,
20 | POP_SONG,
21 | JUMP_TO_SONG,
22 | PLAY_PREVIOUS_SONG,
23 | PLAY_NEXT_SONG,
24 | TOGGLE_RANDOM,
25 | TOGGLE_REPEAT,
26 | TOGGLE_MUTE,
27 | SET_VOLUME,
28 | SET_ERROR,
29 | INVALIDATE_STORE } from "../actions";
30 |
31 |
32 | /**
33 | * Initial state
34 | */
35 |
36 | var initialState = new stateRecord();
37 |
38 |
39 | /**
40 | * Reducers
41 | */
42 |
43 | export default createReducer(initialState, {
44 | [PLAY_PAUSE]: (state, payload) => {
45 | // Force play or pause
46 | return (
47 | state
48 | .set("isPlaying", payload.isPlaying)
49 | .set("error", null)
50 | );
51 | },
52 | [STOP_PLAYBACK]: (state) => {
53 | // Clear the playlist
54 | return (
55 | state
56 | .set("isPlaying", false)
57 | .set("currentIndex", 0)
58 | .set("playlist", new Immutable.List())
59 | .set("error", null)
60 | );
61 | },
62 | [SET_PLAYLIST]: (state, payload) => {
63 | // Set current playlist, reset playlist index
64 | return (
65 | state
66 | .set("playlist", new Immutable.List(payload.playlist))
67 | .set("currentIndex", 0)
68 | .set("error", null)
69 | );
70 | },
71 | [PUSH_SONG]: (state, payload) => {
72 | // Push song to playlist
73 | let newState = state;
74 | if (payload.index) {
75 | // If index is specified, insert it at this position
76 | newState = newState.set(
77 | "playlist",
78 | newState.get("playlist").insert(payload.index, payload.song)
79 | );
80 | if (payload.index <= newState.get("currentIndex")) { // "<=" because insertion is made before
81 | // If we insert before the current position in the playlist, we
82 | // update the current position to keep the currently played
83 | // music
84 | newState = newState.set(
85 | "currentIndex",
86 | Math.min(newState.get("currentIndex") + 1, newState.get("playlist").size)
87 | );
88 | }
89 | } else {
90 | // Else, push at the end of the playlist
91 | newState = newState.set(
92 | "playlist",
93 | newState.get("playlist").push(payload.song)
94 | );
95 | }
96 | return newState;
97 | },
98 | [POP_SONG]: (state, payload) => {
99 | // Pop song from playlist
100 | let newState = state.deleteIn(["playlist", payload.index]);
101 | if (payload.index < state.get("currentIndex")) {
102 | // If we delete before the current position in the playlist, we
103 | // update the current position to keep the currently played
104 | // music
105 | newState = newState.set(
106 | "currentIndex",
107 | Math.max(newState.get("currentIndex") - 1, 0)
108 | );
109 | } else if (payload.index == state.get("currentIndex")) {
110 | // If we remove current song, clear the error as well
111 | newState = newState.set("error", null);
112 | }
113 | return newState;
114 | },
115 | [JUMP_TO_SONG]: (state, payload) => {
116 | // Set current index
117 | const newCurrentIndex = state.get("playlist").findKey(x => x == payload.song);
118 | return state.set("currentIndex", newCurrentIndex);
119 | },
120 | [PLAY_PREVIOUS_SONG]: (state) => {
121 | const newIndex = state.get("currentIndex") - 1;
122 | if (newIndex < 0) {
123 | // If there is an overlow on the left of the playlist, just play
124 | // first music again
125 | // TODO: Should seek to beginning of music
126 | return state.set("error", null);
127 | } else {
128 | return (
129 | state
130 | .set("currentIndex", newIndex)
131 | .set("error", null)
132 | );
133 | }
134 | },
135 | [PLAY_NEXT_SONG]: (state) => {
136 | let newIndex = state.get("currentIndex") + 1;
137 | if (newIndex >= state.get("playlist").size) {
138 | // If there is an overflow
139 | if (state.get("isRepeat")) {
140 | // If we are at the end of the playlist and repeat mode is on,
141 | // just play back first song.
142 | newIndex = 0;
143 | } else {
144 | // Just stop playback
145 | return (
146 | state
147 | .set("isPlaying", false)
148 | .set("error", null)
149 | );
150 | }
151 | } else {
152 | // Else, play next item
153 | return (
154 | state
155 | .set("currentIndex", newIndex)
156 | .set("error", null)
157 | );
158 | }
159 | },
160 | [TOGGLE_RANDOM]: (state) => {
161 | return state.set("isRandom", !state.get("isRandom"));
162 | },
163 | [TOGGLE_REPEAT]: (state) => {
164 | return state.set("isRepeat", !state.get("isRepeat"));
165 | },
166 | [TOGGLE_MUTE]: (state) => {
167 | return state.set("isMute", !state.get("isMute"));
168 | },
169 | [SET_VOLUME]: (state, payload) => {
170 | return state.set("volume", payload.volume);
171 | },
172 | [SET_ERROR]: (state, payload) => {
173 | return (
174 | state
175 | .set("isPlaying", false)
176 | .set("error", payload.error)
177 | );
178 | },
179 | [INVALIDATE_STORE]: () => {
180 | return new stateRecord();
181 | },
182 | });
183 |
--------------------------------------------------------------------------------
/app/reducers/entities.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This implements the global entities reducer.
3 | */
4 |
5 | // NPM imports
6 | import Immutable from "immutable";
7 |
8 | // Local imports
9 | import { createReducer } from "../utils";
10 |
11 | // Models
12 | import { stateRecord } from "../models/entities";
13 |
14 | // Actions
15 | import {
16 | API_REQUEST,
17 | API_FAILURE,
18 | PUSH_ENTITIES,
19 | INCREMENT_REFCOUNT,
20 | DECREMENT_REFCOUNT,
21 | INVALIDATE_STORE,
22 | } from "../actions";
23 |
24 |
25 | /**
26 | * Helper methods
27 | */
28 |
29 | /**
30 | * Update the reference counter for a given item.
31 | *
32 | * Do not do any garbage collection.
33 | *
34 | * @param state The state object to update.
35 | * @param keyPath The keyPath to update, from the refCount key.
36 | * @param incr The increment (or decrement) for the reference counter.
37 | *
38 | * @return An updated state.
39 | */
40 | function updateRefCount(state, keyPath, incr) {
41 | // Prepend refCounts to keyPath
42 | const refCountKeyPath = Array.concat(["refCounts"], keyPath);
43 | // Get updated value
44 | let newRefCount = state.getIn(refCountKeyPath) + incr;
45 | if (isNaN(newRefCount)) {
46 | // If NaN, reference does not exist, so set it to ±1
47 | newRefCount = Math.sign(incr);
48 | }
49 | // Update state
50 | return state.setIn(refCountKeyPath, newRefCount);
51 | }
52 |
53 |
54 | /**
55 | * Update the reference counter of a given entity, taking into account the
56 | * nested objects.
57 | *
58 | * Do not do any garbage collection.
59 | *
60 | * @param state The state object to update.
61 | * @param itemName The type of the entity object.
62 | * @param id The id of the entity.
63 | * @param entity The entity object, as Immutable.
64 | * @param incr The increment (or decrement) for the reference counter.
65 | *
66 | * @return An updated state.
67 | */
68 | function updateEntityRefCount(state, itemName, id, entity, incr) {
69 | let newState = state;
70 | let albums = null;
71 | let tracks = null;
72 | switch (itemName) {
73 | case "artist":
74 | // Update artist refCount
75 | newState = updateRefCount(newState, ["artist", id], incr);
76 | // Update nested albums refCount
77 | albums = entity.get("albums");
78 | if (Immutable.List.isList(albums)) {
79 | albums.forEach(function (id) {
80 | newState = updateRefCount(newState, ["album", id], incr);
81 | });
82 | }
83 | // Update nested tracks refCount
84 | tracks = entity.get("songs");
85 | if (Immutable.List.isList(tracks)) {
86 | tracks.forEach(function (id) {
87 | newState = updateRefCount(newState, ["song", id], incr);
88 | });
89 | }
90 | break;
91 | case "album":
92 | // Update album refCount
93 | newState = updateRefCount(newState, ["album", id], incr);
94 | // Update nested artist refCount
95 | newState = updateRefCount(newState, ["artist", entity.get("artist")], incr);
96 | // Update nested tracks refCount
97 | tracks = entity.get("tracks");
98 | if (Immutable.List.isList(tracks)) {
99 | tracks.forEach(function (id) {
100 | newState = updateRefCount(newState, ["song", id], incr);
101 | });
102 | }
103 | break;
104 | case "song":
105 | // Update track refCount
106 | newState = updateRefCount(newState, ["song", id], incr);
107 | // Update nested artist refCount
108 | newState = updateRefCount(newState, ["artist", entity.get("artist")], incr);
109 | // Update nested album refCount
110 | newState = updateRefCount(newState, ["album", entity.get("album")], incr);
111 | break;
112 | default:
113 | // Just update the entity, no nested entities
114 | newState = updateRefCount(newState, [itemName, id], incr);
115 | break;
116 | }
117 | return newState;
118 | }
119 |
120 |
121 | /**
122 | *
123 | */
124 | function garbageCollection(state) {
125 | let newState = state;
126 | state.refCounts.forEach(function (refCounts, itemName) {
127 | refCounts.forEach(function (refCount, id) {
128 | if (refCount < 1) {
129 | // Garbage collection
130 | newState = newState.deleteIn(["entities", itemName, id]);
131 | newState = newState.deleteIn(["refCounts", itemName, id]);
132 | }
133 | });
134 | });
135 | return newState;
136 | }
137 |
138 |
139 | /**
140 | * Initial state
141 | */
142 | var initialState = new stateRecord();
143 |
144 |
145 | /**
146 | * Reducer
147 | */
148 | export default createReducer(initialState, {
149 | [API_REQUEST]: (state) => {
150 | return (
151 | state
152 | .set("isFetching", true)
153 | .set("error", null)
154 | );
155 | },
156 | [API_FAILURE]: (state, payload) => {
157 | return (
158 | state
159 | .set("isFetching", false)
160 | .set("error", payload.error)
161 | );
162 | },
163 | [PUSH_ENTITIES]: (state, payload) => {
164 | let newState = state;
165 |
166 | // Unset error and isFetching
167 | newState = state.set("isFetching", false).set("error", payload.error);
168 |
169 | // Merge entities
170 | newState = newState.mergeDeepIn(["entities"], payload.entities);
171 |
172 | // Increment reference counter
173 | payload.refCountType.forEach(function (itemName) {
174 | const entities = payload.entities[itemName];
175 | for (let id in entities) {
176 | const entity = newState.getIn(["entities", itemName, id]);
177 | newState = updateEntityRefCount(newState, itemName, id, entity, 1);
178 | }
179 | });
180 |
181 | return newState;
182 | },
183 | [INCREMENT_REFCOUNT]: (state, payload) => {
184 | let newState = state;
185 |
186 | // Increment reference counter
187 | for (let itemName in payload.entities) {
188 | const entities = payload.entities[itemName];
189 | entities.forEach(function (id) {
190 | const entity = newState.getIn(["entities", itemName, id]);
191 | newState = updateEntityRefCount(newState, itemName, id, entity, 1);
192 | });
193 | }
194 |
195 | return newState;
196 | },
197 | [DECREMENT_REFCOUNT]: (state, payload) => {
198 | let newState = state;
199 |
200 | // Decrement reference counter
201 | for (let itemName in payload.entities) {
202 | const entities = payload.entities[itemName];
203 | entities.forEach(function (id) {
204 | const entity = newState.getIn(["entities", itemName, id]);
205 | newState = updateEntityRefCount(newState, itemName, id, entity, -1);
206 | });
207 | }
208 |
209 | // Perform garbage collection
210 | newState = garbageCollection(newState);
211 |
212 | return newState;
213 | },
214 | [INVALIDATE_STORE]: () => {
215 | return new stateRecord();
216 | },
217 | });
218 |
--------------------------------------------------------------------------------
/app/views/WebPlayer.jsx:
--------------------------------------------------------------------------------
1 | // NPM imports
2 | import React, { Component, PropTypes } from "react";
3 | import { bindActionCreators } from "redux";
4 | import { connect } from "react-redux";
5 | import { defineMessages, injectIntl, intlShape } from "react-intl";
6 | import { Howler, Howl } from "howler";
7 |
8 | // Local imports
9 | import { messagesMap, handleErrorI18nObject } from "../utils";
10 | import { UNSUPPORTED_MEDIA_TYPE, ONLOAD_ERROR } from "../actions/webplayer";
11 |
12 | // Actions
13 | import * as actionCreators from "../actions";
14 |
15 | // Components
16 | import WebPlayerComponent from "../components/elements/WebPlayer";
17 |
18 | // Translations
19 | import messages from "../locales/messagesDescriptors/elements/WebPlayer";
20 |
21 | // Define translations
22 | const webplayerMessages = defineMessages(messagesMap(Array.concat([], messages)));
23 |
24 |
25 | /**
26 | * Webplayer container.
27 | */
28 | class WebPlayerIntl extends Component {
29 | constructor(props) {
30 | super(props);
31 |
32 | // Data attributes
33 | this.howl = null;
34 |
35 | // Bind this
36 | this.startPlaying = this.startPlaying.bind(this);
37 | this.stopPlaying = this.stopPlaying.bind(this);
38 | this.isPlaying = this.isPlaying.bind(this);
39 | }
40 |
41 | componentDidMount() {
42 | // Start playback upon component mount
43 | this.startPlaying(this.props);
44 | }
45 |
46 | componentWillUpdate(nextProps) {
47 | // Handle stop
48 | if (
49 | // No current song in updated props
50 | !nextProps.currentSong ||
51 | // No playlist in updated props
52 | nextProps.playlist.size < 1 ||
53 | // Song played is not the song currently played
54 | (this.props.currentSong && nextProps.currentSong.get("id") != this.props.currentSong.get("id"))
55 | ) {
56 | if (this.howl) {
57 | this.stopPlaying();
58 | }
59 | }
60 |
61 | // Toggle play / pause
62 | if (
63 | // This check ensure we do not start playing multiple times the
64 | // same song
65 | (nextProps.isPlaying != this.props.isPlaying) ||
66 | // Or we should be playing but there is no howl object playing
67 | (nextProps.isPlaying && !this.isPlaying())
68 | ) {
69 | this.startPlaying(nextProps);
70 | }
71 |
72 | // If something is playing back
73 | if (this.howl) {
74 | // Set mute / unmute
75 | this.howl.mute(nextProps.isMute);
76 | // Set volume
77 | this.howl.volume(nextProps.volume / 100);
78 | }
79 | }
80 |
81 | /**
82 | * Handle playback through Howler and Web Audio API.
83 | *
84 | * @params props A set of props to use for setting play parameters.
85 | */
86 | startPlaying(props) {
87 | if (props.isPlaying && props.currentSong) {
88 | // If it should be playing any song
89 | const url = props.currentSong.get("url");
90 | const format = url.split(".").pop();
91 | const isPlayable = Howler.codecs(format);
92 | if (isPlayable) {
93 | // Build a new Howler object with current song to play
94 | this.howl = new Howl({
95 | src: [url],
96 | html5: true, // Use HTML5 by default to allow streaming
97 | mute: props.isMute,
98 | volume: props.volume / 100, // Set current volume
99 | autoplay: false, // No autoplay, we handle it manually
100 | format: format, // Specify format as Howler is unable to fetch it from URL
101 | onloaderror: () => props.actions.setError(ONLOAD_ERROR), // Display error if song cannot be loaded
102 | onend: () => props.actions.playNextSong(), // Play next song at the end
103 | });
104 | // Start playing
105 | this.howl.play();
106 | } else {
107 | // Howler already performs this check on his own, but we have
108 | // to do it ourselves to be able to display localized errors
109 | // for every possible error.
110 | // TODO: This could most likely be simplified.
111 | props.actions.setError(UNSUPPORTED_MEDIA_TYPE);
112 | }
113 | }
114 | else {
115 | // If it should not be playing
116 | if (this.howl) {
117 | // Pause any running music
118 | this.howl.pause();
119 | }
120 | }
121 | }
122 |
123 | /**
124 | * Stop playback through Howler and Web Audio API.
125 | */
126 | stopPlaying() {
127 | // Stop music playback
128 | this.howl.stop();
129 | // Reset howl object
130 | this.howl = null;
131 | }
132 |
133 | /**
134 | * Check whether some music is currently playing or not.
135 | *
136 | * @return True / False whether music is playing.
137 | */
138 | isPlaying() {
139 | if (this.howl) {
140 | return this.howl.playing();
141 | }
142 | return false;
143 | }
144 |
145 | render() {
146 | const { formatMessage } = this.props.intl;
147 |
148 | const webplayerProps = {
149 | isPlaying: this.props.isPlaying,
150 | isRandom: this.props.isRandom,
151 | isRepeat: this.props.isRepeat,
152 | isMute: this.props.isMute,
153 | volume: this.props.volume,
154 | currentIndex: this.props.currentIndex,
155 | playlist: this.props.playlist,
156 | error: handleErrorI18nObject(this.props.error, formatMessage, webplayerMessages),
157 | currentSong: this.props.currentSong,
158 | currentArtist: this.props.currentArtist,
159 | // Use a lambda to ensure no first argument is passed to
160 | // togglePlaying
161 | onPlayPause: (() => this.props.actions.togglePlaying()),
162 | onPrev: this.props.actions.playPreviousSong,
163 | onSkip: this.props.actions.playNextSong,
164 | onRandom: this.props.actions.toggleRandom,
165 | onRepeat: this.props.actions.toggleRepeat,
166 | onMute: this.props.actions.toggleMute,
167 | isPlaylistViewActive: (
168 | (this.props.location && this.props.location.pathname == "/playlist")
169 | ? true
170 | : false
171 | ),
172 | };
173 | return (
174 | (this.props.playlist.size > 0)
175 | ? 38 | 39 | More { artistsAlbumsSongsDropdown } you might like 40 |
41 | 42 |
43 |
60 |
61 |
62 |
63 |
44 |
59 |
45 |
54 | { bobDylan }
55 | { bobDylan }
56 | { bobDylan }
57 | { bobDylan }
58 |
46 |
47 | ![Bob Dylan]()
48 |
49 |
53 | 50 | Bob Dylan 51 |
52 |60 |
64 | 65 | Popular { artistsAlbumsSongsDropdown } 66 |
67 |
68 |
85 |
86 |
87 |
88 |
69 |
84 |
70 |
79 | { bobDylan }
80 | { bobDylan }
81 | { bobDylan }
82 | { bobDylan }
83 |
71 |
72 | ![Bob Dylan]()
73 |
74 |
78 | 75 | Bob Dylan 76 |
77 |85 |
89 | 90 | Recent additions 91 |
92 |
93 |
110 |
111 |
112 |
113 |
94 |
109 |
95 |
104 | { bobDylan }
105 | { bobDylan }
106 | { bobDylan }
107 | { bobDylan }
108 |
96 |
97 | ![Bob Dylan]()
98 |
99 |
103 | 100 | Bob Dylan 101 |
102 |110 |
114 | 115 | Currently playing 116 |
117 | 118 |
139 |
140 |
147 |
148 |
149 |
170 | {loading}
171 |
172 | );
173 | }
174 | }
175 | SongsTableCSS.propTypes = {
176 | playAction: PropTypes.func.isRequired,
177 | playNextAction: PropTypes.func,
178 | songs: PropTypes.instanceOf(Immutable.List).isRequired,
179 | filterText: PropTypes.string,
180 | };
181 | export let SongsTable = CSSModules(SongsTableCSS, css);
182 |
183 |
184 | /**
185 | * Complete songs table view with filter and pagination
186 | */
187 | export default class FilterablePaginatedSongsTable extends Component {
188 | constructor(props) {
189 | super(props);
190 | this.state = {
191 | filterText: "", // Initial state, no filter text
192 | };
193 |
194 | this.handleUserInput = this.handleUserInput.bind(this); // Bind this on user input handling
195 | }
196 |
197 | /**
198 | * Method called whenever the filter input is changed.
199 | *
200 | * Update the state accordingly.
201 | *
202 | * @param filterText Content of the filter input.
203 | */
204 | handleUserInput(filterText) {
205 | this.setState({
206 | filterText: filterText,
207 | });
208 | }
209 |
210 | render() {
211 | // Handle error
212 | let error = null;
213 | if (this.props.error) {
214 | error = (| 151 | |
152 | |
154 |
155 | |
157 |
158 | |
160 |
161 | |
163 |
164 | |
166 |
|---|
232 | { error }
233 |
237 | );
238 | }
239 | }
240 | FilterablePaginatedSongsTable.propTypes = {
241 | playAction: PropTypes.func.isRequired,
242 | playNextAction: PropTypes.func,
243 | isFetching: PropTypes.bool.isRequired,
244 | error: PropTypes.string,
245 | songs: PropTypes.instanceOf(Immutable.List).isRequired,
246 | pagination: PropTypes.object.isRequired,
247 | };
248 |
--------------------------------------------------------------------------------
/app/components/elements/Pagination.jsx:
--------------------------------------------------------------------------------
1 | // NPM imports
2 | import React, { Component, PropTypes } from "react";
3 | import { Link } from "react-router";
4 | import CSSModules from "react-css-modules";
5 | import { defineMessages, injectIntl, intlShape, FormattedMessage, FormattedHTMLMessage } from "react-intl";
6 |
7 | // Local imports
8 | import { computePaginationBounds, filterInt, messagesMap } from "../../utils";
9 |
10 | // Translations
11 | import commonMessages from "../../locales/messagesDescriptors/common";
12 | import messages from "../../locales/messagesDescriptors/elements/Pagination";
13 |
14 | // Styles
15 | import css from "../../styles/elements/Pagination.scss";
16 |
17 | // Define translations
18 | const paginationMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
19 |
20 |
21 | /**
22 | * Pagination button bar
23 | */
24 | class PaginationCSSIntl extends Component {
25 | constructor(props) {
26 | super (props);
27 |
28 | // Bind this
29 | this.goToPage = this.goToPage.bind(this);
30 | this.dotsOnClick = this.dotsOnClick.bind(this);
31 | this.dotsOnKeyDown = this.dotsOnKeyDown.bind(this);
32 | this.cancelModalBox = this.cancelModalBox.bind(this);
33 | }
34 |
35 | /**
36 | * Handle click on the "go to page" button in the modal.
37 | */
38 | goToPage(e) {
39 | e.preventDefault();
40 |
41 | // Parse and check page number
42 | const pageNumber = filterInt(this.refs.pageInput.value);
43 | if (pageNumber && !isNaN(pageNumber) && pageNumber > 0 && pageNumber <= this.props.nPages) {
44 | // Remove error class from input form
45 | this.refs.pageFormGroup.classList.remove("has-error");
46 | this.refs.pageFormGroup.classList.add("has-success");
47 | // Hide the modal and go to page
48 | $(this.refs.paginationModal).modal("hide");
49 | this.props.goToPage(pageNumber);
50 | } else {
51 | // Set error class on input form
52 | this.refs.pageFormGroup.classList.add("has-error");
53 | this.refs.pageFormGroup.classList.remove("has-success");
54 | return;
55 | }
56 | }
57 |
58 | /**
59 | * Handle click on the ellipsis dots.
60 | */
61 | dotsOnClick() {
62 | // Show modal
63 | $(this.refs.paginationModal).modal();
64 | }
65 |
66 | /**
67 | * Bind key down events on ellipsis dots for a11y.
68 | */
69 | dotsOnKeyDown(e) {
70 | e.preventDefault;
71 | const code = e.keyCode || e.which;
72 | if (code == 13 || code == 32) { // Enter or Space key
73 | this.dotsOnClick(); // Fire same event as onClick
74 | }
75 | }
76 |
77 | /**
78 | * Handle click on "cancel" in the modal box.
79 | */
80 | cancelModalBox() {
81 | // Hide modal
82 | $(this.refs.paginationModal).modal("hide");
83 | }
84 |
85 | render() {
86 | const { formatMessage } = this.props.intl;
87 |
88 | // Get bounds
89 | const { lowerLimit, upperLimit } = computePaginationBounds(this.props.currentPage, this.props.nPages);
90 | // Store buttons
91 | let pagesButton = [];
92 | let key = 0; // key increment to ensure correct ordering
93 |
94 | // If lower limit is above 1, push 1 and ellipsis
95 | if (lowerLimit > 1) {
96 | pagesButton.push(
97 |
159 |
164 |
192 | );
193 | }
194 | return null;
195 | }
196 | }
197 | PaginationCSSIntl.propTypes = {
198 | currentPage: PropTypes.number.isRequired,
199 | goToPage: PropTypes.func.isRequired,
200 | buildLinkToPage: PropTypes.func.isRequired,
201 | nPages: PropTypes.number.isRequired,
202 | intl: intlShape.isRequired,
203 | };
204 | export default injectIntl(CSSModules(PaginationCSSIntl, css));
205 |
--------------------------------------------------------------------------------
165 |
191 |
166 |
190 |
167 |
189 |
168 |
169 |
170 |
172 |
173 |
170 |
172 |
174 |
179 |
180 |
181 |
184 |
187 |
188 |