Replace simple list view with a track table

hizzyishome · May 4, 2022 · c2048f3 · c2048f3
1 parent 6b5398c
commit c2048f3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 118 deletions.
diff --git a/packages/app/app/components/LibraryView/LibrarySimpleList/index.tsx b/packages/app/app/components/LibraryView/LibrarySimpleList/index.tsx
@@ -1,116 +1,18 @@
 import React from 'react';
-import _ from 'lodash';
-import ReactList from 'react-list';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import {
-  Icon,
-  Ref,
-  Table
-} from 'semantic-ui-react';
-import { compose } from 'recompose';
-import { withTranslation } from 'react-i18next';
-import { ContextPopup, TrackRow, getThumbnail } from '@nuclear/ui';
+import { Track } from '@nuclear/core';
 
-import TrackPopupButtons from '../../../containers/TrackPopupButtons';
-import styles from './styles.scss';
+import TrackTableContainer from '../../../containers/TrackTableContainer';
 
-const LibrarySimpleList = ({
-  tracks,
-  sortBy,
-  direction,
-  handleSort,
-  t
-}) => (
-  <ReactList
-    ref={comp => {
-      if (comp) {
-        // enables css styling of the container element
-        comp.el.className = styles.library_simple_list_container;
-      }
-    }}
-    type='uniform'
-    useStaticSize
-    length={tracks.length}
-    itemsRenderer={(items, ref) => (
-      <Table
-        sortable
-        className={cx(
-          styles.library_simple_list,
-          styles.table
-        )}
-      >
-        <Table.Header className={styles.thead}>
-          <Table.Row>
-            <Table.HeaderCell>
-              <Icon name='image' />
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              sorted={sortBy === 'artist' ? direction : null}
-              onClick={handleSort('artist')}
-            >
-              {t('artist')}
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              sorted={sortBy === 'name' ? direction : null}
-              onClick={handleSort('name')}
-            >
-              {t('title')}
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              sorted={sortBy === 'album' ? direction : null}
-              onClick={handleSort('album')}
-            >
-              {t('album')}
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Ref innerRef={ref}>
-          <Table.Body className={styles.tbody}>
-            {items}
-          </Table.Body>
-        </Ref>
-      </Table>
-    )}
-    itemRenderer={index => {
-      const track = _.get(tracks, index);
-      const title = track?.name;
-      const artist = _.isString(track?.artist) ? track?.artist : track?.artist?.name;
+type LibrarySimpleListProps = {
+  tracks: Track[];
+}
 
-      return (
-        <ContextPopup
-          trigger={
-            <TrackRow
-              key={'library-track-' + index}
-              track={track}
-              displayCover
-              displayArtist
-              displayAlbum
-              withAddToDownloads={false}
-            />
-          }
-          key={'library-track-' + index}
-          thumb={getThumbnail(track)}
-          title={title}
-          artist={artist}
-        >
-          <TrackPopupButtons
-            track={track}
-            withAddToDownloads={false}
-          />
-        </ContextPopup>
-      );
-    }}
-  />
-);
+const LibrarySimpleList: React.FC<LibrarySimpleListProps> = ({
+  tracks
+}) => <TrackTableContainer
+  tracks={tracks}
+  displayDeleteButton={false}
+  displayFavorite={false} 
+/>;
 
-LibrarySimpleList.propTypes = {
-  tracks: PropTypes.array,
-  sortBy: PropTypes.string,
-  direction: PropTypes.string,
-  handleSort: PropTypes.func
-};
-
-export default compose(
-  withTranslation('library')
-)(LibrarySimpleList);
+export default LibrarySimpleList;
diff --git a/packages/app/app/components/LibraryView/index.js b/packages/app/app/components/LibraryView/index.js
@@ -15,7 +15,7 @@ import LibraryAlbumGrid from './LibraryAlbumGrid';
 import LibraryHeader from './LibraryHeader';
 import { sortTracks } from './utils';
 
-const LibraryView = ({tracksMap, filter, expandedFolders, streamProviders, pending, scanProgress, scanTotal, localFolders, sortBy, direction, listType, actions, queueActions, playerActions}) => {
+const LibraryView = ({ tracksMap, filter, expandedFolders, streamProviders, pending, scanProgress, scanTotal, localFolders, sortBy, direction, listType, actions, queueActions, playerActions }) => {
   const localStreamProviders = useMemo(() => _.filter(streamProviders, { sourceName: 'Local' }), [streamProviders]);
 
   const unfilteredTracks = useMemo(() => _.values(tracksMap), [tracksMap]);
@@ -78,7 +78,12 @@ const LibraryView = ({tracksMap, filter, expandedFolders, streamProviders, pendi
               <Dimmer active={pending} loading={pending.toString()} />
 
               {!pending && listType === LIST_TYPE.SIMPLE_LIST && (
-                <LibrarySimpleList tracks={tracks} sortBy={sortBy} direction={direction} handleSort={handleSort} />
+                <LibrarySimpleList
+                  tracks={tracks}
+                  sortBy={sortBy}
+                  direction={direction}
+                  handleSort={handleSort}
+                />
               )}
 
               {!pending && !_.isEmpty(localFolders) && listType === LIST_TYPE.ALBUM_GRID && (
@@ -95,7 +100,11 @@ const LibraryView = ({tracksMap, filter, expandedFolders, streamProviders, pendi
               )}
 
               {!pending && listType === LIST_TYPE.FOLDER_TREE && (
-                <LibraryFolderTree tracks={tracks} localFolders={localFolders} expandedFolders={expandedFolders} />
+                <LibraryFolderTree
+                  tracks={tracks}
+                  localFolders={localFolders}
+                  expandedFolders={expandedFolders}
+                />
               )}
             </Segment>
           )}

diff --git a/packages/ui/lib/components/TrackInfo/styles.scss b/packages/ui/lib/components/TrackInfo/styles.scss
@@ -1,22 +1,30 @@
-@import '../../common.scss';
+@import "../../common.scss";
 
 .track_info {
   display: flex;
   flex-flow: row;
   flex: 1 1 50%;
 
-  &>*:not(:first-child) {
-    padding-left: 1em;
+  & > *:not(:first-child) {
+    margin-left: 1em;
+  }
+
+  & > *:last-child {
+    margin-right: 1em;
   }
 
   .artist_part {
     display: flex;
     flex-flow: column;
     justify-content: space-evenly;
     align-items: flex-start;
+    width: 0;
+    flex: 1 1 auto;
   }
 
   .track_name {
+    @include ellipsis;
+    max-width: 100%;
     font-size: 22px;
   }
 

diff --git a/packages/ui/lib/components/VolumeControls/styles.scss b/packages/ui/lib/components/VolumeControls/styles.scss
@@ -3,7 +3,7 @@
   justify-content: flex-end;
 
   padding-right: 1em;
-  flex: 1 0 50%;
+  flex: 1 1 50%;
 
   .volume_controls {
     display: flex;