From 7ecd51020f2fa787ae3aa0e230f818a28811d87e Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Wed, 27 Mar 2019 18:41:00 -0700 Subject: [PATCH] Abstract the library table --- css/media-library-window.css | 5 ++ .../MediaLibraryWindow/AlbumsTable.tsx | 29 ++----- .../MediaLibraryWindow/ArtistsTable.tsx | 29 ++----- .../MediaLibraryWindow/LibraryTable.tsx | 64 ++++++++++++++ .../MediaLibraryWindow/TracksTable.tsx | 85 +++++++------------ js/components/Skin.js | 10 +-- 6 files changed, 115 insertions(+), 107 deletions(-) create mode 100644 js/components/MediaLibraryWindow/LibraryTable.tsx diff --git a/css/media-library-window.css b/css/media-library-window.css index 8816dfeb..2e233d3b 100644 --- a/css/media-library-window.css +++ b/css/media-library-window.css @@ -63,6 +63,11 @@ white-space: nowrap; } +#webamp-media-library .webamp-media-library-table .library-table-heading > div { + margin-right: 1px; + margin-bottom: 1px; +} + #webamp-media-library .library-button { border: none; padding: 0; diff --git a/js/components/MediaLibraryWindow/AlbumsTable.tsx b/js/components/MediaLibraryWindow/AlbumsTable.tsx index 6902078e..1fc587cf 100644 --- a/js/components/MediaLibraryWindow/AlbumsTable.tsx +++ b/js/components/MediaLibraryWindow/AlbumsTable.tsx @@ -1,33 +1,16 @@ import * as React from "react"; +import LibraryTable from "./LibraryTable"; interface Props {} export default class AlbumsTable extends React.Component { render() { return ( -
- - - - - - - - - - - - - - - - - -
AlbumTracks
All (1 album)1
Ben Mason1
-
+ ); } } diff --git a/js/components/MediaLibraryWindow/ArtistsTable.tsx b/js/components/MediaLibraryWindow/ArtistsTable.tsx index 3b1cef30..ee2fba34 100644 --- a/js/components/MediaLibraryWindow/ArtistsTable.tsx +++ b/js/components/MediaLibraryWindow/ArtistsTable.tsx @@ -1,33 +1,16 @@ import * as React from "react"; +import LibraryTable from "./LibraryTable"; interface Props {} export default class ArtistsTable extends React.Component { render() { return ( -
- - - - - - - - - - - - - - - - - - - - -
ArtistAlbumTracks
All (1 artist)11
Ben Mason11
-
+ ); } } diff --git a/js/components/MediaLibraryWindow/LibraryTable.tsx b/js/components/MediaLibraryWindow/LibraryTable.tsx new file mode 100644 index 00000000..d54090ad --- /dev/null +++ b/js/components/MediaLibraryWindow/LibraryTable.tsx @@ -0,0 +1,64 @@ +import React, { useState } from "react"; + +interface Props { + headings: Array; + rows: Array>; + widths: Array; +} + +export default function LibraryTable(props: Props) { + const [selectedRow, setSelectedRow] = useState(null); + const rowStyle = { + display: "grid", + gridTemplateColumns: props.widths.map(width => `${width}px`).join(" "), + }; + + return ( +
+
+
+ {props.headings.map((heading, i) => ( +
{heading}
+ ))} +
+ {props.rows.map((row, i) => ( +
setSelectedRow(i)} + key={`row-${i}`} + > + {row.map((text, j) => ( +
+ {text} +
+ ))} +
+ ))} +
+
+
+ ); +} diff --git a/js/components/MediaLibraryWindow/TracksTable.tsx b/js/components/MediaLibraryWindow/TracksTable.tsx index ba7d5f16..9648c2af 100644 --- a/js/components/MediaLibraryWindow/TracksTable.tsx +++ b/js/components/MediaLibraryWindow/TracksTable.tsx @@ -1,10 +1,11 @@ import * as React from "react"; import { connect } from "react-redux"; import * as Selectors from "../../selectors"; +import { AppState, PlaylistTrack } from "../../types"; import * as Utils from "../../utils"; import * as FileUtils from "../../fileUtils"; -import { AppState, PlaylistTrack } from "../../types"; import LibraryButton from "./LibraryButton"; +import LibraryTable from "./LibraryTable"; interface StateProps { tracks: PlaylistTrack[]; @@ -45,62 +46,34 @@ class TracksTable extends React.Component { onChange={e => this.setState({ filter: e.target.value })} />
-
-
-
Artist
-
Title
-
Album
-
Length
-
Track #
-
Genere
-
Year
-
Filename
+ { + return [ + track.artist, + track.title, + track.album, + Utils.getTimeStr(track.duration), + 1, + "Primus", + 2001, + track.url == null + ? track.defaultName + : FileUtils.filenameFromUrl(track.url), + ]; + })} + widths={[100, 100, 100, 100, 100, 100, 100, 100]} + /> - {this.props.filterTracks(this.state.filter).map(track => { - return ( - -
{track.artist}
-
{track.title}
-
{track.album}
-
- {Utils.getTimeStr(track.duration)} -
-
1
-
Primus
-
2001
-
- {track.url == null - ? track.defaultName - : FileUtils.filenameFromUrl(track.url)} -
- - ); - })} -
- {/* - - - - - - - - -
*/} -
Play Enqueue diff --git a/js/components/Skin.js b/js/components/Skin.js index edcac90d..e6ea14c6 100644 --- a/js/components/Skin.js +++ b/js/components/Skin.js @@ -189,14 +189,15 @@ function cssRulesFromProps(props) { ); cssRules.push( - `#webamp-media-library .webamp-media-library-table thead { - color: ${props.skinGenExColors.listHeaderText}; - background-color: ${props.skinGenExColors.listHeaderBackground}; + `#webamp-media-library .webamp-media-library-table .library-table-heading { + background-color: ${props.skinGenExColors.listHeaderFramePressed}; }` ); cssRules.push( - `#webamp-media-library .webamp-media-library-table thead th { + `#webamp-media-library .webamp-media-library-table .library-table-heading > div { + color: ${props.skinGenExColors.listHeaderText}; + background-color: ${props.skinGenExColors.listHeaderBackground}; border-top: 1px solid ${props.skinGenExColors.listHeaderFrameTopAndLeft}; border-left: 1px solid ${ props.skinGenExColors.listHeaderFrameTopAndLeft @@ -209,7 +210,6 @@ function cssRulesFromProps(props) { }; }` ); - return cssRules; }