Abstract the library table

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;

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<Props> {
   render() {
     return (
-      <div className="webamp-media-library-item" style={{ flexGrow: 1 }}>
-        <table
-          className="webamp-media-library-table"
-          style={{ overflow: "scroll" }}
-        >
-          <thead>
-            <tr>
-              <th>Album</th>
-              <th>Tracks</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>All (1 album)</td>
-              <td>1</td>
-            </tr>
-            <tr>
-              <td>Ben Mason</td>
-              <td>1</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      <LibraryTable
+        headings={["Album", "Tracks"]}
+        rows={[["All (1 album)", "1"], ["Ben Mason", "1"]]}
+        widths={[50, 200]}
+      />
     );
   }
 }

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<Props> {
   render() {
     return (
-      <div className="webamp-media-library-item" style={{ height: "100%" }}>
-        <table className="webamp-media-library-table">
-          <thead>
-            <tr>
-              <th>Artist</th>
-              <th>Album</th>
-              <th>Tracks</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>All (1 artist)</td>
-              <td>1</td>
-              <td>1</td>
-            </tr>
-            <tr>
-              <td>Ben Mason</td>
-              <td>1</td>
-              <td>1</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      <LibraryTable
+        headings={["Album", "Tracks", "Other"]}
+        rows={[["All (1 album)", "1", "1"], ["Ben Mason", "1", "1"]]}
+        widths={[100, 150, 200]}
+      />
     );
   }
 }

js/components/MediaLibraryWindow/LibraryTable.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+
+interface Props {
+  headings: Array<string>;
+  rows: Array<Array<any>>;
+  widths: Array<number>;
+}
+
+export default function LibraryTable(props: Props) {
+  const [selectedRow, setSelectedRow] = useState<number | null>(null);
+  const rowStyle = {
+    display: "grid",
+    gridTemplateColumns: props.widths.map(width => `${width}px`).join(" "),
+  };
+
+  return (
+    <div
+      className="webamp-media-library-item"
+      style={{ height: "100%", position: "relative" }}
+    >
+      <div
+        className="webamp-media-library-table"
+        style={{
+          overflow: "scroll",
+          height: "100%",
+        }}
+      >
+        <div style={rowStyle} className="library-table-heading">
+          {props.headings.map((heading, i) => (
+            <div key={`heading-${i}-${heading}`}>{heading}</div>
+          ))}
+        </div>
+        {props.rows.map((row, i) => (
+          <div
+            style={{
+              ...rowStyle,
+              boxSizing: "border-box",
+              border: i === selectedRow ? "1px solid red" : "none",
+            }}
+            onClick={() => setSelectedRow(i)}
+            key={`row-${i}`}
+          >
+            {row.map((text, j) => (
+              <div style={{ overflow: "hidden" }} key={`cell-${j}`}>
+                {text}
+              </div>
+            ))}
+          </div>
+        ))}
+        <div
+          style={{
+            zIndex: 99999,
+            color: "white",
+            width: 1,
+            position: "absolute",
+            left: 50,
+            top: 0,
+            height: "100%",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

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<StateProps, State> {
             onChange={e => this.setState({ filter: e.target.value })}
           />
         </div>
-        <div
-          style={{ flexGrow: 1, overflowY: "scroll" }}
-          className="webamp-media-library-item"
-        >
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns:
-                "[artist] 1fr [title] 1fr [album] 1fr [length] 1fr [track number] 1fr [genere] 1fr [year] 1fr [filename] 1fr",
-              gridColumnGap: 1,
-            }}
-          >
-            <div style={cellStyle}>Artist</div>
-            <div style={cellStyle}>Title</div>
-            <div style={cellStyle}>Album</div>
-            <div style={cellStyle}>Length</div>
-            <div style={cellStyle}>Track #</div>
-            <div style={cellStyle}>Genere</div>
-            <div style={cellStyle}>Year</div>
-            <div style={cellStyle}>Filename</div>
+        <LibraryTable
+          headings={[
+            "Artist",
+            "Title",
+            "Album",
+            "Length",
+            "Track #",
+            "Genere",
+            "Year",
+            "Filename",
+          ]}
+          rows={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),
+            ];
+          })}
+          widths={[100, 100, 100, 100, 100, 100, 100, 100]}
+        />
 
-            {this.props.filterTracks(this.state.filter).map(track => {
-              return (
-                <React.Fragment key={track.id}>
-                  <div style={cellStyle}>{track.artist}</div>
-                  <div style={cellStyle}>{track.title}</div>
-                  <div style={cellStyle}>{track.album}</div>
-                  <div style={cellStyle}>
-                    {Utils.getTimeStr(track.duration)}
-                  </div>
-                  <div style={cellStyle}>1</div>
-                  <div style={cellStyle}>Primus</div>
-                  <div style={cellStyle}>2001</div>
-                  <div style={cellStyle}>
-                    {track.url == null
-                      ? track.defaultName
-                      : FileUtils.filenameFromUrl(track.url)}
-                  </div>
-                </React.Fragment>
-              );
-            })}
-          </div>
-          {/*
-          <table
-            className="webamp-media-library-table"
-            style={{ overflow: "scroll" }}
-          >
-            <thead>
-              <tr>
-              </tr>
-            </thead>
-            <tbody>
-
-            </tbody>
-          </table> */}
-        </div>
         <div style={{ marginTop: 2 }}>
           <LibraryButton>Play</LibraryButton>
           <LibraryButton>Enqueue</LibraryButton>

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;
 }