phyks/ampache_react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve playlist view

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/components/Playlist.jsx
View File

@ -1,38 +1,76 @@
// NPM import
import React, { Component, PropTypes } from "react";
import Immutable from "immutable";
import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
// Local imports
import { messagesMap } from "../utils";
// Other components
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.
*/
export default class Playlist extends Component {
class PlaylistIntl extends Component {
render() {
const currentSongSongsTableProps = {
playAction: this.props.playAction,
playNextAction: this.props.playNextAction,
songs: this.props.songs.slice(this.props.currentIndex, this.props.currentIndex + 1),
};
const fullPlaylistSongsTableProps = {
playAction: this.props.playAction,
playNextAction: this.props.playNextAction,
songs: this.props.songs,
};
let playlistText = null;
if (this.props.songs.size > 0) {
const currentSongSongsTableProps = {
playAction: this.props.playAction,
playNextAction: this.props.playNextAction,
songs: this.props.songs.slice(this.props.currentIndex, this.props.currentIndex + 1),
};
const fullPlaylistSongsTableProps = {
playAction: this.props.playAction,
playNextAction: this.props.playNextAction,
songs: this.props.songs,
};
playlistText = (
<div>
<h3>
<FormattedMessage {...playlistMessages["app.playlist.currentSongPlaying"]} />
</h3>
<SongsTable {...currentSongSongsTableProps}/>
<h3>
<FormattedMessage {...playlistMessages["app.playlist.fullPlaylist"]} />
</h3>
<SongsTable {...fullPlaylistSongsTableProps}/>
</div>
);
} else {
playlistText = (
<p>
<FormattedMessage {...playlistMessages["app.playlist.emptyPlaylist"]}/>
</p>
);
}
return (
<div className="row">
<h2>Current song playing</h2>
<SongsTable {...currentSongSongsTableProps}/>
<h2>Full playlist</h2>
<SongsTable {...fullPlaylistSongsTableProps}/>
<h2 className="text-center">
<FormattedMessage {...playlistMessages["app.playlist.playlist"]} />
</h2>
{ playlistText }
</div>
);
}
}
Playlist.propTypes = {
PlaylistIntl.propTypes = {
playAction: PropTypes.func.isRequired,
playNextAction: PropTypes.func.isRequired,
songs: PropTypes.instanceOf(Immutable.List).isRequired,
currentIndex: PropTypes.number.isRequired,
intl: intlShape.isRequired,
};
export default injectIntl(PlaylistIntl);

4
app/locales/en-US/index.js
View File

@ -32,6 +32,10 @@ module.exports = {
"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.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.browseAlbums": "Browse albums", // Browse albums
"app.sidebarLayout.browseArtists": "Browse artists", // Browse artists

4
app/locales/fr-FR/index.js
View File

@ -32,6 +32,10 @@ module.exports = {
"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.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.browseAlbums": "Parcourir les albums", // Browse albums
"app.sidebarLayout.browseArtists": "Parcourir les artistes", // Browse artists

24
app/locales/messagesDescriptors/Playlist.js Normal file
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;

6
public/1.1.js
View File

File diff suppressed because one or more lines are too long

2
public/1.1.js.map
View File

File diff suppressed because one or more lines are too long

2
public/fix.ie9.js
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

2
public/fix.ie9.js.map
View File

File diff suppressed because one or more lines are too long

55
public/index.js
View File

File diff suppressed because one or more lines are too long

2
public/index.js.map
View File

File diff suppressed because one or more lines are too long