diff --git a/packages/ui/lib/components/ContextPopup/index.tsx b/packages/ui/lib/components/ContextPopup/index.tsx index 3eada32d3b..dc86ffaaa8 100644 --- a/packages/ui/lib/components/ContextPopup/index.tsx +++ b/packages/ui/lib/components/ContextPopup/index.tsx @@ -1,5 +1,7 @@ import React, { useState } from 'react'; import { Popup, PopupProps } from 'semantic-ui-react'; +import Img from 'react-image'; +import artPlaceholder from '../../../resources/media/art_placeholder.png'; import styles from './styles.scss'; @@ -38,7 +40,10 @@ const ContextPopup: React.FC = ({
{thumb &&
- + } + />
}
diff --git a/packages/ui/lib/components/Cover/index.tsx b/packages/ui/lib/components/Cover/index.tsx index 82d70a5c97..ac383485f8 100644 --- a/packages/ui/lib/components/Cover/index.tsx +++ b/packages/ui/lib/components/Cover/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import Img from 'react-image'; import cx from 'classnames'; import artPlaceholder from '../../../resources/media/art_placeholder.png'; @@ -15,7 +16,10 @@ const Cover: React.FC = ({ cover = String(artPlaceholder) }) => ( common.nuclear, styles.cover_container )}> - + } + />
); diff --git a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx index da4385493a..128f0fac92 100644 --- a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx +++ b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx @@ -4,6 +4,8 @@ import cx from 'classnames'; import { Track } from '../../../types'; import styles from '../styles.scss'; +import Img from 'react-image'; +import artPlaceholder from '../../../../resources/media/art_placeholder.png'; export const ThumbnailCell: React.FC> = ({ cell, @@ -12,5 +14,9 @@ export const ThumbnailCell: React.FC> = ({ className={cx(styles.grid_track_table_cell, styles.thumbnail_cell)} {...cell.getCellProps()} > - + } + />
; diff --git a/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx b/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx index 2c21a3f86a..788a622da7 100644 --- a/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx +++ b/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx @@ -3,6 +3,7 @@ import { Icon } from 'semantic-ui-react'; import styles from './styles.scss'; import artPlaceholder from '../../../../resources/media/art_placeholder.png'; +import Img from 'react-image'; import { TrackInfoProps } from '../../TrackInfo'; @@ -19,7 +20,10 @@ const MiniTrackInfo: React.FC = ({ }) => (
- + } + />
{ hasTracks && diff --git a/packages/ui/lib/components/QueueItem/index.tsx b/packages/ui/lib/components/QueueItem/index.tsx index 443c7bc456..7892bdd421 100644 --- a/packages/ui/lib/components/QueueItem/index.tsx +++ b/packages/ui/lib/components/QueueItem/index.tsx @@ -10,6 +10,8 @@ import styles from './styles.scss'; import artPlaceholder from '../../../resources/media/art_placeholder.png'; import { getTrackArtist, getTrackTitle } from '../../utils'; import { Track } from '../../types'; +import Img from 'react-image'; + export type QueueItemProps = { isCurrent: boolean; @@ -46,7 +48,10 @@ export const QueueItem: React.FC = ({
{track.loading ? - : } + : } + />}