Improve playlist view

* Add a message when the playlist is empty, according to issue #16.
* Translate playlist view.
This commit is contained in:
Lucas Verney 2016-09-18 21:41:32 +02:00
parent fe921700d9
commit 23c252f96a
10 changed files with 121 additions and 50 deletions

View File

@ -1,15 +1,29 @@
// NPM import // NPM import
import React, { Component, PropTypes } from "react"; import React, { Component, PropTypes } from "react";
import Immutable from "immutable"; import Immutable from "immutable";
import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
// Local imports
import { messagesMap } from "../utils";
// Other components // Other components
import { SongsTable } from "./Songs"; import { SongsTable } from "./Songs";
// Translations
import commonMessages from "../locales/messagesDescriptors/common";
import messages from "../locales/messagesDescriptors/Playlist";
// Define translations
const playlistMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
/** /**
* An entire album row containing art and tracks table. * An entire album row containing art and tracks table.
*/ */
export default class Playlist extends Component { class PlaylistIntl extends Component {
render() { render() {
let playlistText = null;
if (this.props.songs.size > 0) {
const currentSongSongsTableProps = { const currentSongSongsTableProps = {
playAction: this.props.playAction, playAction: this.props.playAction,
playNextAction: this.props.playNextAction, playNextAction: this.props.playNextAction,
@ -20,19 +34,43 @@ export default class Playlist extends Component {
playNextAction: this.props.playNextAction, playNextAction: this.props.playNextAction,
songs: this.props.songs, songs: this.props.songs,
}; };
return ( playlistText = (
<div className="row"> <div>
<h2>Current song playing</h2> <h3>
<FormattedMessage {...playlistMessages["app.playlist.currentSongPlaying"]} />
</h3>
<SongsTable {...currentSongSongsTableProps}/> <SongsTable {...currentSongSongsTableProps}/>
<h2>Full playlist</h2>
<h3>
<FormattedMessage {...playlistMessages["app.playlist.fullPlaylist"]} />
</h3>
<SongsTable {...fullPlaylistSongsTableProps}/> <SongsTable {...fullPlaylistSongsTableProps}/>
</div> </div>
); );
} else {
playlistText = (
<p>
<FormattedMessage {...playlistMessages["app.playlist.emptyPlaylist"]}/>
</p>
);
}
return (
<div className="row">
<h2 className="text-center">
<FormattedMessage {...playlistMessages["app.playlist.playlist"]} />
</h2>
{ playlistText }
</div>
);
} }
} }
Playlist.propTypes = { PlaylistIntl.propTypes = {
playAction: PropTypes.func.isRequired, playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired, playNextAction: PropTypes.func.isRequired,
songs: PropTypes.instanceOf(Immutable.List).isRequired, songs: PropTypes.instanceOf(Immutable.List).isRequired,
currentIndex: PropTypes.number.isRequired, currentIndex: PropTypes.number.isRequired,
intl: intlShape.isRequired,
}; };
export default injectIntl(PlaylistIntl);

View File

@ -32,6 +32,10 @@ module.exports = {
"app.pagination.goToPageWithoutMarkup": "Go to page {pageNumber}", // Link title to go to page N "app.pagination.goToPageWithoutMarkup": "Go to page {pageNumber}", // Link title to go to page N
"app.pagination.pageNavigation": "Page navigation", // ARIA label for the nav block containing pagination "app.pagination.pageNavigation": "Page navigation", // ARIA label for the nav block containing pagination
"app.pagination.pageToGoTo": "Page to go to?", // Title of the pagination modal "app.pagination.pageToGoTo": "Page to go to?", // Title of the pagination modal
"app.playlist.currentSongPlaying": "Current song playing", // "Current song playing"
"app.playlist.emptyPlaylist": "Empty playlist", // "Empty playlist message"
"app.playlist.fullPlaylist": "Full playlist", // "Full playlist"
"app.playlist.playlist": "Playlist", // "Playlist translation"
"app.sidebarLayout.browse": "Browse", // Browse "app.sidebarLayout.browse": "Browse", // Browse
"app.sidebarLayout.browseAlbums": "Browse albums", // Browse albums "app.sidebarLayout.browseAlbums": "Browse albums", // Browse albums
"app.sidebarLayout.browseArtists": "Browse artists", // Browse artists "app.sidebarLayout.browseArtists": "Browse artists", // Browse artists

View File

@ -32,6 +32,10 @@ module.exports = {
"app.pagination.goToPageWithoutMarkup": "Aller à la page {pageNumber}", // Link title to go to page N "app.pagination.goToPageWithoutMarkup": "Aller à la page {pageNumber}", // Link title to go to page N
"app.pagination.pageNavigation": "Navigation entre les pages", // ARIA label for the nav block containing pagination "app.pagination.pageNavigation": "Navigation entre les pages", // ARIA label for the nav block containing pagination
"app.pagination.pageToGoTo": "Page à laquelle aller\u00a0?", // Title of the pagination modal "app.pagination.pageToGoTo": "Page à laquelle aller\u00a0?", // Title of the pagination modal
"app.playlist.currentSongPlaying": "Piste en cours de lecture", // "Current song playing",
"app.playlist.emptyPlaylist": "Liste de lecture vide", // "Empty playlist message"
"app.playlist.fullPlaylist": "Playlist complète", // "Full playlist",
"app.playlist.playlist": "Liste de lecture", // "Playlist translation"
"app.sidebarLayout.browse": "Explorer", // Browse "app.sidebarLayout.browse": "Explorer", // Browse
"app.sidebarLayout.browseAlbums": "Parcourir les albums", // Browse albums "app.sidebarLayout.browseAlbums": "Parcourir les albums", // Browse albums
"app.sidebarLayout.browseArtists": "Parcourir les artistes", // Browse artists "app.sidebarLayout.browseArtists": "Parcourir les artistes", // Browse artists

View File

@ -0,0 +1,24 @@
const messages = [
{
"id": "app.playlist.playlist",
"defaultMessage": "Playlist",
"description": "Playlist translation",
},
{
"id": "app.playlist.currentSongPlaying",
"defaultMessage": "Current song playing",
"description": "Current song playing",
},
{
"id": "app.playlist.fullPlaylist",
"defaultMessage": "Full playlist",
"description": "Full playlist",
},
{
"id": "app.playlist.emptyPlaylist",
"defaultMessage": "Empty playlist",
"description": "Empty playlist message",
},
];
export default messages;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(638);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},638:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}}); !function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(639);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},639:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
//# sourceMappingURL=fix.ie9.js.map //# sourceMappingURL=fix.ie9.js.map

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