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

This commit is contained in:
Lucas Verney 2016-09-18 21:23:28 +02:00
parent 198d50aec5
commit fe921700d9
10 changed files with 73 additions and 39 deletions

View File

@ -311,20 +311,38 @@ export function setVolume(volume) {
export const SET_ERROR = "SET_ERROR"; 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) => { return (dispatch) => {
dispatch({ dispatch({
type: SET_ERROR, type: SET_ERROR,
payload: { payload: {
error: new i18nRecord({ error: dispatchedError,
id: "app.webplayer.unsupported",
values: {},
}),
}, },
}); });
}; };

View File

@ -47,6 +47,7 @@ module.exports = {
"app.songs.title": "Title", // Title (song) "app.songs.title": "Title", // Title (song)
"app.webplayer.by": "by", // Artist affiliation of a song "app.webplayer.by": "by", // Artist affiliation of a song
"app.webplayer.next": "Next", // Next button description "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.playlist": "Playlist", // Playlist button description
"app.webplayer.previous": "Previous", // Previous button description "app.webplayer.previous": "Previous", // Previous button description
"app.webplayer.random": "Random", // Random button description "app.webplayer.random": "Random", // Random button description

View File

@ -47,6 +47,7 @@ module.exports = {
"app.songs.title": "Titre", // Title (song) "app.songs.title": "Titre", // Title (song)
"app.webplayer.by": "par", // Artist affiliation of a song "app.webplayer.by": "par", // Artist affiliation of a song
"app.webplayer.next": "Suivant", // Next button description "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.playlist": "Liste de lecture", // Playlist button description
"app.webplayer.previous": "Précédent", // Previous button description "app.webplayer.previous": "Précédent", // Previous button description
"app.webplayer.random": "Aléatoire", // Random button description "app.webplayer.random": "Aléatoire", // Random button description

View File

@ -39,6 +39,11 @@ const messages = [
"description": "Unsupported media type", "description": "Unsupported media type",
"defaultMessage": "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; export default messages;

View File

@ -7,6 +7,7 @@ import { Howler, Howl } from "howler";
// Local imports // Local imports
import { messagesMap, handleErrorI18nObject } from "../utils"; import { messagesMap, handleErrorI18nObject } from "../utils";
import { UNSUPPORTED_MEDIA_TYPE, ONLOAD_ERROR } from "../actions/webplayer";
// Actions // Actions
import * as actionCreators from "../actions"; import * as actionCreators from "../actions";
@ -86,7 +87,9 @@ class WebPlayerIntl extends Component {
if (props.isPlaying && props.currentSong) { if (props.isPlaying && props.currentSong) {
// If it should be playing any song // If it should be playing any song
const url = props.currentSong.get("url"); 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 // Build a new Howler object with current song to play
this.howl = new Howl({ this.howl = new Howl({
src: [url], src: [url],
@ -94,12 +97,18 @@ class WebPlayerIntl extends Component {
mute: props.isMute, mute: props.isMute,
volume: props.volume / 100, // Set current volume volume: props.volume / 100, // Set current volume
autoplay: false, // No autoplay, we handle it manually 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 onend: () => props.actions.playNextSong(), // Play next song at the end
}); });
// Start playing // Start playing
this.howl.play(); this.howl.play();
} else { } 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 { else {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long