- {!mediaItems.length ? (
+ {!!mediaItems && Array.from(mediaItems).length === 0 ? (
@@ -50,7 +55,7 @@ const Collection = (props: Props) => {
} />
) : (
diff --git a/src/components/Collection/FilterPanel.tsx b/src/components/Collection/FilterPanel.tsx
index 10ca8fad50f18fe57b3afc0a392f610c70e9df03..045d6507bd9bcc9d39f0d9ed421dcacaca5d12ee 100644
--- a/src/components/Collection/FilterPanel.tsx
+++ b/src/components/Collection/FilterPanel.tsx
@@ -99,14 +99,14 @@ const FilterPanel = ({ collection, activeFilters, onFilterChange, dispatch }: Pr
// Format currently selected values
const selectedValues = [
- ...activeFilters.genres.map(g => ({ value: `genre:${g}`, label: g, color: '#ff9999' })),
- ...activeFilters.types.map(t => ({ value: `type:${t}`, label: t, color: '#99ff99' })),
- ...activeFilters.artists.map(a => ({
+ ...Array.from(activeFilters.genres).map(g => ({ value: `genre:${g}`, label: g, color: '#ff9999' })),
+ ...Array.from(activeFilters.types).map(t => ({ value: `type:${t}`, label: t, color: '#99ff99' })),
+ ...Array.from(activeFilters.artists).map(a => ({
value: `artist:${a}`,
label: collection.artists[a].name,
color: '#9999ff'
})),
- ...activeFilters.providers.map(p => ({
+ ...Array.from(activeFilters.providers).map(p => ({
value: `provider:${p}`,
label: p,
color: '#99ccff'
@@ -229,11 +229,11 @@ const FilterPanel = ({ collection, activeFilters, onFilterChange, dispatch }: Pr
menuPosition="fixed"
menuPlacement="auto"
/>
- {Object.values(activeFilters).some(arr => arr.length > 0) && (
+ {Object.values(activeFilters).some(arr => arr.size > 0) && (
@@ -290,12 +290,12 @@ const FilterPanel = ({ collection, activeFilters, onFilterChange, dispatch }: Pr
menuPlacement="auto"
/>
- {Object.values(activeFilters).some(arr => arr.length > 0) && (
+ {Object.values(activeFilters).some(arr => arr.size > 0) && (