diff --git a/packages/app/app/components/LibraryView/LibrarySimpleList/index.tsx b/packages/app/app/components/LibraryView/LibrarySimpleList/index.tsx index 43f10e5a0f..d9c18db289 100644 --- 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 -}) => ( - { - 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) => ( - - - - - - - - {t('artist')} - - - {t('title')} - - - {t('album')} - - - - - - {items} - - -
- )} - 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 ( - - } - key={'library-track-' + index} - thumb={getThumbnail(track)} - title={title} - artist={artist} - > - - - ); - }} - /> -); +const LibrarySimpleList: React.FC = ({ + tracks +}) => ; -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 index eb6bab35fe..90698207d4 100644 --- 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 {!pending && listType === LIST_TYPE.SIMPLE_LIST && ( - + )} {!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 && ( - + )} )} diff --git a/packages/ui/lib/components/TrackInfo/styles.scss b/packages/ui/lib/components/TrackInfo/styles.scss index 2e15d98a9a..f67d19a8cf 100644 --- a/packages/ui/lib/components/TrackInfo/styles.scss +++ b/packages/ui/lib/components/TrackInfo/styles.scss @@ -1,12 +1,16 @@ -@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 { @@ -14,9 +18,13 @@ 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 index 6d08f0bdf0..2bb5120c24 100644 --- 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;