Display an error message if played song cannot be fetched, see issue #16

app/actions/webplayer.js

@@ -311,20 +311,38 @@ export function setVolume(volume) {
 
 
 export const SET_ERROR = "SET_ERROR";
+export const UNSUPPORTED_MEDIA_TYPE = "UNSUPPORTED_MEDIA_TYPE";
+export const ONLOAD_ERROR = "ONLOAD_ERROR";
 /**
- * Set an error in case a song is not in a supported format.
+ * Set an error appearing in the webplayer component.
  *
- * @return  Dispatch a SET_ERROR action.
+ * @note   Does not do anything in case an invalid error identifier is passed.
+ *
+ * @return Dispatch the matching SET_ERROR action.
  */
-export function unsupportedMediaType() {
+export function setError(errorType) {
+    let dispatchedError;
+    switch (errorType) {
+        case UNSUPPORTED_MEDIA_TYPE:
+            dispatchedError = new i18nRecord({
+                id: "app.webplayer.unsupported",
+                values: {},
+            });
+            break;
+        case ONLOAD_ERROR:
+            dispatchedError = new i18nRecord({
+                id: "app.webplayer.onLoadError",
+                values: {},
+            });
+            break;
+        default:
+            return;
+    }
     return (dispatch) => {
         dispatch({
             type: SET_ERROR,
             payload: {
-                error: new i18nRecord({
+                error: dispatchedError,
-                    id: "app.webplayer.unsupported",
-                    values: {},
-                }),
             },
         });
     };

app/locales/en-US/index.js

@@ -47,6 +47,7 @@ module.exports = {
     "app.songs.title": "Title",  // Title (song)
     "app.webplayer.by": "by",  // Artist affiliation of a song
     "app.webplayer.next": "Next",  // Next button description
+    "app.webplayer.onLoadError": "Unable to load song",  // Error message in case a song could not be loaded
     "app.webplayer.playlist": "Playlist",  // Playlist button description
     "app.webplayer.previous": "Previous",  // Previous button description
     "app.webplayer.random": "Random",  // Random button description

app/locales/fr-FR/index.js

@@ -47,6 +47,7 @@ module.exports = {
     "app.songs.title": "Titre",  // Title (song)
     "app.webplayer.by": "par",  // Artist affiliation of a song
     "app.webplayer.next": "Suivant",  // Next button description
+    "app.webplayer.onLoadError": "Impossible de charger la piste",  // Error message in case a song could not be loaded
     "app.webplayer.playlist": "Liste de lecture",  // Playlist button description
     "app.webplayer.previous": "Précédent",  // Previous button description
     "app.webplayer.random": "Aléatoire",  // Random button description

app/locales/messagesDescriptors/elements/WebPlayer.js

@@ -39,6 +39,11 @@ const messages = [
         "description": "Unsupported media type",
         "defaultMessage": "Unsupported media type",
     },
+    {
+        "id": "app.webplayer.onLoadError",
+        "description": "Error message in case a song could not be loaded",
+        "defaultMessage": "Unable to load song",
+    },
 ];
 
 export default messages;

app/views/WebPlayer.jsx

@@ -7,6 +7,7 @@ import { Howler, Howl } from "howler";
 
 // Local imports
 import { messagesMap, handleErrorI18nObject } from "../utils";
+import { UNSUPPORTED_MEDIA_TYPE, ONLOAD_ERROR } from "../actions/webplayer";
 
 // Actions
 import * as actionCreators from "../actions";
@@ -86,7 +87,9 @@ class WebPlayerIntl extends Component {
         if (props.isPlaying && props.currentSong) {
             // If it should be playing any song
             const url = props.currentSong.get("url");
-            if (Howler.codecs(url.split(".").pop())) {
+            const format = url.split(".").pop();
+            const isPlayable = Howler.codecs(format);
+            if (isPlayable) {
                 // Build a new Howler object with current song to play
                 this.howl = new Howl({
                     src: [url],
@@ -94,12 +97,18 @@ class WebPlayerIntl extends Component {
                     mute: props.isMute,
                     volume: props.volume / 100,  // Set current volume
                     autoplay: false,  // No autoplay, we handle it manually
+                    format: format,  // Specify format as Howler is unable to fetch it from URL
+                    onloaderror: () => props.actions.setError(ONLOAD_ERROR),  // Display error if song cannot be loaded
                     onend: () => props.actions.playNextSong(),  // Play next song at the end
                 });
                 // Start playing
                 this.howl.play();
             } else {
-                this.props.actions.unsupportedMediaType();
+                // Howler already performs this check on his own, but we have
+                // to do it ourselves to be able to display localized errors
+                // for every possible error.
+                // TODO: This could most likely be simplified.
+                props.actions.setError(UNSUPPORTED_MEDIA_TYPE);
             }
         }
         else {