From d59a7f6e758c9882392c66f225a343a630935fc8 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <gtrias@gmail.com>
Date: Fri, 27 Dec 2024 03:30:55 +0100
Subject: [PATCH] use sets for better performance

---
 src/components/AlbumView/index.tsx            |   6 +-
 src/components/ArtistView/Album.tsx           |  27 +--
 src/components/ArtistView/index.tsx           |   2 +-
 src/components/ArtistsTable/ArtistTable.tsx   |   8 +-
 src/components/Collection.tsx                 |  23 ++-
 src/components/Collection/FilterPanel.tsx     |  20 +--
 src/components/Dashboard/index.tsx            |  11 +-
 .../MusicTable/SongRow/index.spec.tsx         |   4 +-
 src/components/Player/ContextualMenu.tsx      |   7 +-
 src/components/Player/Controls.tsx            |  16 +-
 .../Player/CustomPlayers/PeerStreamPlayer.tsx | 164 ++++++++++++-----
 src/components/Player/PlayerControls.tsx      |  22 +--
 src/components/Playlists/Playlist.tsx         |  24 +--
 src/components/Queue.tsx                      |  15 +-
 src/components/RelatedAlbums/index.tsx        |   4 +-
 src/components/Sidebar/SidebarContents.tsx    |   4 +-
 src/components/SongView/index.tsx             |  18 +-
 src/containers/ArtistContainer.tsx            |  12 +-
 src/containers/PlayerContainer.tsx            |   2 +-
 src/containers/RouteSelectors.ts              |  30 ++--
 src/containers/TopbarContainer.tsx            |  46 +++--
 src/reducers/collection.spec.ts               |  96 +++++-----
 src/reducers/collection.ts                    | 136 +++++++-------
 src/reducers/queue.spec.ts                    | 141 +++++++--------
 src/reducers/queue.ts                         | 166 +++++++++---------
 src/reducers/utils/queues.ts                  |  57 +++---
 src/sagas/selectors.ts                        |  68 ++++---
 src/services/PeerService.ts                   |  10 +-
 src/utils/apply-filters.ts                    |  96 +++++-----
 29 files changed, 681 insertions(+), 554 deletions(-)

diff --git a/src/components/AlbumView/index.tsx b/src/components/AlbumView/index.tsx
index 1de29097..9c18d343 100644
--- a/src/components/AlbumView/index.tsx
+++ b/src/components/AlbumView/index.tsx
@@ -34,8 +34,8 @@ export default function AlbumView(props: Props) {
     return null
   }
 
-  const relatedAlbums = collection.albumsByArtist && collection.albumsByArtist[album.artist.id] && collection.albumsByArtist[album.artist.id].map((albumId: string) => {
-    return collection.albums[albumId]
+  const relatedAlbums = collection.albumsByArtist && collection.albumsByArtist.get(album.artist.id) && collection.albumsByArtist.get(album.artist.id).map((albumId: string) => {
+    return collection.albums.get(albumId)
   })
 
   return (
@@ -47,7 +47,7 @@ export default function AlbumView(props: Props) {
           album={album}
           dispatch={props.dispatch}
           collection={props.collection}
-          songs={props.songsByAlbum[album.id]}
+          songs={props.songsByAlbum.get(album.id) ?? []}
         />
         <div className='w-full'>
           <RelatedAlbums albums={relatedAlbums} />
diff --git a/src/components/ArtistView/Album.tsx b/src/components/ArtistView/Album.tsx
index e07d068e..4ed507ac 100644
--- a/src/components/ArtistView/Album.tsx
+++ b/src/components/ArtistView/Album.tsx
@@ -4,19 +4,17 @@ import { Translate } from 'react-redux-i18n'
 import Icon from '../common/Icon'
 import SongRow from '../MusicTable/SongRow'
 import CoverImage from '../MusicTable/CoverImage'
-
-interface Album {
-  id: string
-  name: string
-  year?: number
-}
+import { IAlbum } from '../../entities/Album'
+import { State as QueueState } from '../../reducers/queue'
+import { State as CollectionState } from '../../reducers/collection'
+import { Dispatch } from 'redux'
 
 type AlbumProps = {
-  album: Album,
-  queue: any,
+  album: IAlbum,
+  queue: QueueState,
   songs: Array<string>,
-  collection: any,
-  dispatch: any
+  collection: CollectionState,
+  dispatch: Dispatch
 }
 
 const Album = (props: AlbumProps) => {
@@ -28,7 +26,12 @@ const Album = (props: AlbumProps) => {
     }
 
     return props.songs.map((songId) => {
-      const songRow = props.collection.rows[songId]
+      const songRow = props.collection.rows.get(songId)
+
+      if (!songRow) {
+        return null
+      }
+
       return (
         <SongRow
           songsLength={props.songs.length}
@@ -62,7 +65,7 @@ const Album = (props: AlbumProps) => {
         >
           <CoverImage
             cover={
-              props.collection.rows[props.songs[0]].cover
+              props.collection.rows.get(props.songs[0])?.cover
             }
             size='thumbnail'
             albumName={props.album.name}
diff --git a/src/components/ArtistView/index.tsx b/src/components/ArtistView/index.tsx
index 12d18b2a..098f4a7b 100644
--- a/src/components/ArtistView/index.tsx
+++ b/src/components/ArtistView/index.tsx
@@ -27,7 +27,7 @@ function extractBackground(
 ): string {
   const albumId = albumsByArtist && albumsByArtist.length && albumsByArtist[0]
   if (albumId && songsByAlbum[albumId]) {
-    return collection.rows[songsByAlbum[albumId][0]]?.cover?.fullUrl
+    return collection.rows.get(songsByAlbum[albumId][0])?.cover?.fullUrl ?? ''
   }
 
   return ''
diff --git a/src/components/ArtistsTable/ArtistTable.tsx b/src/components/ArtistsTable/ArtistTable.tsx
index d3f06175..55659464 100644
--- a/src/components/ArtistsTable/ArtistTable.tsx
+++ b/src/components/ArtistsTable/ArtistTable.tsx
@@ -15,13 +15,17 @@ const ArtistTable = ({ collection: { artists, songsByArtist } }: Props) => {
 
   const rowRenderer = (props: any): any => {
     const artistId = tableIds[props.index]
-    const artist = artists[artistId]
+    const artist = artists.get(artistId)
+
+    if (!artist) {
+      return null
+    }
 
     return (
       <ArtistRow
         key={props.key}
         artist={artist}
-        songs={songsByArtist[artist.id]}
+        songs={songsByArtist.get(artist.id) ?? []}
         style={props.style}
       />
     )
diff --git a/src/components/Collection.tsx b/src/components/Collection.tsx
index 81771362..eb726f51 100644
--- a/src/components/Collection.tsx
+++ b/src/components/Collection.tsx
@@ -6,13 +6,18 @@ import MusicTable from './MusicTable/MusicTable'
 import Spinner from './Spinner'
 import { useLocation } from 'react-router'
 import { Location } from 'react-router'
+import { State as AppState } from '../reducers/app'
+import { State as PlaylistState } from '../reducers/playlist'
+import { State as QueueState } from '../reducers/queue'
+import { State as PlayerState } from '../reducers/player'
+import { State as CollectionState } from '../reducers/collection'
 
 type Props = {
-  app: any,
-  playlist: any,
-  queue: any,
-  player: any,
-  collection: any,
+  app: AppState,
+  playlist: PlaylistState,
+  queue: QueueState,
+  player: PlayerState,
+  collection: CollectionState,
   filteredSongs: Array<string>,
   dispatch: Dispatch
 }
@@ -20,9 +25,9 @@ type Props = {
 const mediaForPath = (location: Location, props: Props) => {
   switch (location.pathname) {
     case '/collection/audio':
-      return props.collection.mediaByType['audio']
+      return Array.from(props.collection.mediaByType.get('audio') ?? [])
     case '/collection/video':
-      return props.collection.mediaByType['video']
+      return Array.from(props.collection.mediaByType.get('video') ?? [])
     case '/search-results':
       return props.collection.searchResults
     default:
@@ -41,7 +46,7 @@ const Collection = (props: Props) => {
   return (
     <div className="collection z-10 flex">
       <div className="flex-1">
-        {!mediaItems.length ? (
+        {!!mediaItems && Array.from(mediaItems).length === 0 ? (
           <BodyMessage message={
             <div className='flex flex-col'>
               <Translate value='message.noCollectionItems' />
@@ -50,7 +55,7 @@ const Collection = (props: Props) => {
           } />
         ) : (
           <MusicTable
-            tableIds={mediaItems}
+            tableIds={Array.from(mediaItems)}
             disableCovers={false}
             {...props}
           />
diff --git a/src/components/Collection/FilterPanel.tsx b/src/components/Collection/FilterPanel.tsx
index 10ca8fad..045d6507 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) && (
         <Button
           size='xs'
           onClick={handleSaveSmartPlaylist}
-          disabled={!Object.values(activeFilters).some(arr => arr.length > 0)}
+          disabled={!Object.values(activeFilters).some(arr => arr.size > 0)}
           inverted
           transparent
           title="Save as smart playlist"
@@ -254,9 +254,9 @@ const FilterPanel = ({ collection, activeFilters, onFilterChange, dispatch }: Pr
           className="md:hidden"
         >
           <Icon icon="faFilter" className='px-1' />
-          {Object.values(activeFilters).some(arr => arr.length > 0) && (
+          {Object.values(activeFilters).some(arr => arr.size > 0) && (
             <span className="ml-1 text-xs bg-blue-500 text-white rounded-full px-2">
-              {Object.values(activeFilters).reduce((acc, arr) => acc + arr.length, 0)}
+              {Object.values(activeFilters).reduce((acc, arr) => acc + arr.size, 0)}
             </span>
           )}
         </Button>
@@ -290,12 +290,12 @@ const FilterPanel = ({ collection, activeFilters, onFilterChange, dispatch }: Pr
                   menuPlacement="auto"
                 />
               </div>
-              {Object.values(activeFilters).some(arr => arr.length > 0) && (
+              {Object.values(activeFilters).some(arr => arr.size > 0) && (
                 <div className="flex justify-end">
                   <Button
                     size='xs'
                     onClick={handleSaveSmartPlaylist}
-                    disabled={!Object.values(activeFilters).some(arr => arr.length > 0)}
+                    disabled={!Object.values(activeFilters).some(arr => arr.size > 0)}
                     inverted
                     transparent
                     title="Save as smart playlist"
diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx
index 0e37a92a..cc1ce33c 100644
--- a/src/components/Dashboard/index.tsx
+++ b/src/components/Dashboard/index.tsx
@@ -92,14 +92,11 @@ const Dashboard = ({
 }: Props) => {
   const MAX_LIST_ITEMS = 25
 
-  const mediaItems = songsByNumberOfPlays.map((songId: string) => {
-    return rows[songId]
+  const mediaItems = Array.from(songsByNumberOfPlays).map((songId: string) => {
+    return rows.get(songId)
   })
 
-  const slicedAlbums = Object
-    .keys(albums)
-    .slice(0, MAX_LIST_ITEMS)
-    .map((albumId) => albums[albumId])
+  const slicedAlbums = Array.from(albums.values()).slice(0, MAX_LIST_ITEMS)
 
   return (
     <div className='z-10 w-full md:px-12 mb-12'>
@@ -110,7 +107,7 @@ const Dashboard = ({
           title={<Translate value='titles.mostPlayedSongs' />}
           mediaItems={mediaItems.slice(0, MAX_LIST_ITEMS)}
         />}
-      {!!slicedAlbums.length && <RelatedAlbums albums={slicedAlbums} />}
+      {!!slicedAlbums.length && <RelatedAlbums albums={new Set(slicedAlbums)} /> }
       <div className='flex flex-col items-center mt-12'>
         <h4 className="text-xl text-center py-4 text-sky-900 dark:text-sky-300 p-4">
           <DeplayerTitle />
diff --git a/src/components/MusicTable/SongRow/index.spec.tsx b/src/components/MusicTable/SongRow/index.spec.tsx
index 28091da0..32cbf836 100644
--- a/src/components/MusicTable/SongRow/index.spec.tsx
+++ b/src/components/MusicTable/SongRow/index.spec.tsx
@@ -13,8 +13,8 @@ const setup = () => {
     song: new Media(mediaParams),
     songsLength: 1,
     queue: {
-      trackIds: [],
-      randomTrackIds: [],
+      trackIds: new Set(),
+      randomTrackIds: new Set(),
       currentPlaying: null,
       repeat: false,
       shuffle: false,
diff --git a/src/components/Player/ContextualMenu.tsx b/src/components/Player/ContextualMenu.tsx
index 968907ec..4ab0ed85 100644
--- a/src/components/Player/ContextualMenu.tsx
+++ b/src/components/Player/ContextualMenu.tsx
@@ -51,7 +51,7 @@ const ContextualMenu = (props: MenuProps) => {
   const showFullscreen = props.player.playing
   const showVisibilityCons = false
   const trackIds = props.queue.shuffle ? props.queue.randomTrackIds : props.queue.trackIds
-  const showStartPlaying = trackIds.length && !props.player.playing
+  const showStartPlaying = [...trackIds].length && !props.player.playing
 
   const { show } = useContextMenu({
     id: MENU_ID,
@@ -164,7 +164,7 @@ const ContextualMenu = (props: MenuProps) => {
             />
           </Button>
         </Item>
-        {trackIds.length && (
+        {[...trackIds].length && (
           <>
             <Item className={itemClasses}>
               <Button
@@ -208,7 +208,7 @@ const ContextualMenu = (props: MenuProps) => {
               transparent
               alignLeft
               fullWidth
-              onClick={() => props.dispatch({ type: types.SET_CURRENT_PLAYING, songId: trackIds[0] })}
+              onClick={() => props.dispatch({ type: types.SET_CURRENT_PLAYING, songId: [...trackIds][0] })}
             >
               <Icon
                 icon='faPlayCircle'
@@ -222,6 +222,7 @@ const ContextualMenu = (props: MenuProps) => {
         <Item>
           <div className='flex justify-center w-full my-4'>
             <Controls
+              player={props.player}
               showFullscreen={showFullscreen}
               toggleFullscreen={() => props.dispatch({ type: types.TOGGLE_FULL_SCREEN })}
               playPrev={() => props.dispatch({ type: types.PLAY_PREV })}
diff --git a/src/components/Player/Controls.tsx b/src/components/Player/Controls.tsx
index afceefd2..bcb9435b 100644
--- a/src/components/Player/Controls.tsx
+++ b/src/components/Player/Controls.tsx
@@ -1,6 +1,7 @@
 import PlayPauseButton from './PlayPauseButton'
 import SkipButton from './SkipButton'
 import FullscreenButton from './FullscreenButton'
+import { State as PlayerState } from '../../reducers/player'
 
 type ControlProps = {
   playPrev: () => void,
@@ -10,12 +11,15 @@ type ControlProps = {
   playNext: () => void,
   showFullscreen: boolean,
   toggleFullscreen: () => void,
+  player: PlayerState,
 }
 
 const Controls = (props: ControlProps) => {
+  const isStreamingFromPeer = props.player.streamUri?.startsWith('peer://') || false;
+
   return (
     <>
-      {props.mqlMatch &&
+      {!isStreamingFromPeer && props.mqlMatch &&
         <SkipButton
           onClick={props.playPrev}
           type="prev"
@@ -25,10 +29,12 @@ const Controls = (props: ControlProps) => {
         playing={props.isPlaying}
         onClick={props.playPause}
       />
-      <SkipButton
-        onClick={props.playNext}
-        type="next"
-      />
+      {!isStreamingFromPeer &&
+        <SkipButton
+          onClick={props.playNext}
+          type="next"
+        />
+      }
       { props.showFullscreen &&
         <FullscreenButton
           onClick={props.toggleFullscreen}
diff --git a/src/components/Player/CustomPlayers/PeerStreamPlayer.tsx b/src/components/Player/CustomPlayers/PeerStreamPlayer.tsx
index e520aa1d..84eea7ee 100644
--- a/src/components/Player/CustomPlayers/PeerStreamPlayer.tsx
+++ b/src/components/Player/CustomPlayers/PeerStreamPlayer.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import { ReactPlayerProps } from 'react-player'
 import PlayerRefService from '../../../services/PlayerRefService'
+import * as types from '../../../constants/ActionTypes'
+import { connect } from 'react-redux'
+import { Dispatch } from 'redux'
 
 function canPlay(url: string) {
   return typeof url === 'string' && url.startsWith('peer://')
@@ -10,12 +13,20 @@ function canEnablePIP() {
   return false
 }
 
-export default class PeerStreamPlayer extends React.Component<ReactPlayerProps> {
+interface Props extends ReactPlayerProps {
+  dispatch: Dispatch
+}
+
+class PeerStreamPlayer extends React.Component<Props> {
   static displayName = 'PeerStreamPlayer'
   static canPlay = canPlay
   static canEnablePIP = canEnablePIP
+  static isStreaming(url: string) {
+    return typeof url === 'string' && url.startsWith('peer://')
+  }
   player: HTMLVideoElement | null = null
   prevPlayer: HTMLVideoElement | null = null
+  isUnmounting: boolean = false
 
   ref = (player: HTMLVideoElement) => {
     if (this.player) {
@@ -24,102 +35,161 @@ export default class PeerStreamPlayer extends React.Component<ReactPlayerProps>
     this.player = player
   }
 
+  cleanupStream = () => {
+    if (!this.player || this.isUnmounting) return;
+    try {
+      const stream = this.player.srcObject as MediaStream;
+      if (stream && stream.active) {
+        stream.getTracks().forEach(track => {
+          if (track.readyState === 'live') {
+            track.stop();
+          }
+        });
+      }
+      this.player.srcObject = null;
+    } catch (error) {
+      console.warn("Error cleaning up stream:", error);
+    }
+  }
+
+  setStream = (stream: MediaStream | null) => {
+    if (!this.player || !stream || !stream.active) return false;
+    
+    try {
+      // Clean up existing stream first
+      this.cleanupStream();
+      
+      // Set new stream
+      this.player.srcObject = stream;
+      return true;
+    } catch (error) {
+      console.error("Error setting stream:", error);
+      return false;
+    }
+  }
+
   play() {
-    if (!this.player) return
+    if (!this.player) return;
+    
+    const stream = this.player.srcObject as MediaStream;
+    if (!stream || !stream.active) {
+      console.warn("Cannot play: stream is not active");
+      return;
+    }
+
     console.log("Attempting to play stream");
-    const promise = this.player.play()
+    const promise = this.player.play();
     if (promise) {
       promise.catch((error) => {
         console.error("Error playing stream:", error);
-        this.props.onError && this.props.onError(error);
-      })
+        if (this.props.onError && !this.isUnmounting) {
+          this.props.onError(error);
+          // Reset streaming state
+          this.props.dispatch({
+            type: types.SET_PEER_STREAMING,
+            payload: { isStreaming: false, peerId: null }
+          });
+        }
+      });
     }
   }
 
   pause() {
-    if (!this.player) return
-    this.player.pause()
+    if (!this.player) return;
+    try {
+      this.player.pause();
+    } catch (error) {
+      console.warn("Error pausing stream:", error);
+    }
   }
 
   stop() {
-    if (!this.player) return
-    this.player.removeAttribute('src')
+    if (!this.player) return;
+    this.cleanupStream();
+    this.player.removeAttribute('src');
   }
 
   seekTo(seconds: number) {
-    if (!this.player) return
-    this.player.currentTime = seconds
+    if (!this.player) return;
+    this.player.currentTime = seconds;
   }
 
   setVolume(fraction: number) {
-    if (!this.player) return
-    this.player.volume = fraction
+    if (!this.player) return;
+    this.player.volume = fraction;
   }
 
   mute = () => {
-    if (!this.player) return
-    this.player.muted = true
+    if (!this.player) return;
+    this.player.muted = true;
   }
 
   unmute = () => {
-    if (!this.player) return
-    this.player.muted = false
+    if (!this.player) return;
+    this.player.muted = false;
   }
 
   getDuration() {
-    if (!this.player) return null
-    return this.player.duration
+    if (!this.player) return null;
+    return this.player.duration;
   }
 
   getCurrentTime() {
-    if (!this.player) return null
-    return this.player.currentTime
+    if (!this.player) return null;
+    return this.player.currentTime;
   }
 
   getSecondsLoaded() {
-    if (!this.player) return null
-    const { buffered } = this.player
-    if (buffered.length === 0) return 0
-    const end = buffered.end(buffered.length - 1)
-    const duration = this.getDuration() || 0
-    return end > duration ? duration : end
+    if (!this.player) return null;
+    const { buffered } = this.player;
+    if (buffered.length === 0) return 0;
+    const end = buffered.end(buffered.length - 1);
+    const duration = this.getDuration() || 0;
+    return end > duration ? duration : end;
   }
 
   componentDidMount() {
     console.log("PeerStreamPlayer mounted");
     const stream = PlayerRefService.getInstance().getPeerStream();
     console.log("Initial stream:", stream);
-    if (this.player && stream) {
-      try {
-        console.log("Setting initial stream to player");
-        this.player.srcObject = stream;
-        this.play();
-      } catch (error) {
-        console.error("Error setting peer stream:", error);
-        this.props.onError && this.props.onError(error);
-      }
+    if (stream && stream.active && this.setStream(stream)) {
+      this.play();
     }
   }
 
-  componentDidUpdate(prevProps: ReactPlayerProps) {
+  componentDidUpdate(prevProps: Props) {
+    // Handle URL changes
     if (this.props.url !== prevProps.url) {
       console.log("URL changed, updating stream");
       const stream = PlayerRefService.getInstance().getPeerStream();
       console.log("Updated stream:", stream);
-      if (this.player && stream) {
-        console.log("Setting updated stream to player");
-        this.player.srcObject = stream;
+      if (stream && stream.active && this.setStream(stream)) {
+        this.play();
+      }
+    }
+
+    // Handle play/pause state changes
+    if (this.props.playing !== prevProps.playing) {
+      console.log("Play state changed:", this.props.playing);
+      if (this.props.playing) {
         this.play();
+      } else {
+        this.pause();
       }
     }
   }
 
+  componentWillUnmount() {
+    this.isUnmounting = true;
+    this.cleanupStream();
+  }
+
   render() {
-    const { loop, muted, width, height } = this.props
+    const { loop, muted, width, height } = this.props;
     const style = {
       width: width === 'auto' ? width : '100%',
       height: height === 'auto' ? height : '100%'
-    }
+    };
 
     return (
       <video
@@ -133,9 +203,13 @@ export default class PeerStreamPlayer extends React.Component<ReactPlayerProps>
         id='peer-stream-player'
         onError={(e) => {
           console.error("Video element error:", e);
-          this.props.onError && this.props.onError(e);
+          if (this.props.onError && !this.isUnmounting) {
+            this.props.onError(e);
+          }
         }}
       />
-    )
+    );
   }
-} 
\ No newline at end of file
+}
+
+export default connect()(PeerStreamPlayer) 
\ No newline at end of file
diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx
index 83713776..926b52ad 100644
--- a/src/components/Player/PlayerControls.tsx
+++ b/src/components/Player/PlayerControls.tsx
@@ -138,7 +138,7 @@ class PlayerControls extends React.Component<Props> {
       return null
     }
 
-    const currentPlaying = this.props.collection.rows[currentPlayingId]
+    const currentPlaying = this.props.collection.rows.get(currentPlayingId)
 
     const { streamUri } = this.props.player
 
@@ -177,7 +177,6 @@ class PlayerControls extends React.Component<Props> {
       />
     ) : null;
 
-
     if (currentPlaying.type === 'audio') {
       config.file.attributes['crossOrigin'] = 'anonymous'
     }
@@ -237,15 +236,17 @@ class PlayerControls extends React.Component<Props> {
               enter={true}
               exit={true}
             >
-              <div key='player-controls' className='flex justify-between items-center flex-col  bg-gray-100/70 dark:bg-black/80'>
+              <div key='player-controls' className='flex justify-between items-center flex-col bg-gray-100/70 dark:bg-black/80'>
                 <div className='absolute w-full md:top-0'>
-                  <ProgressBar
-                    dispatch={this.props.dispatch}
-                    total={duration * 1000}
-                    buffered={loadedSeconds * 1000}
-                    current={playedSeconds * 1000}
-                    onChange={this.onSeekChange}
-                  />
+                  {!streamUri?.startsWith('peer://') && (
+                    <ProgressBar
+                      dispatch={this.props.dispatch}
+                      total={duration * 1000}
+                      buffered={loadedSeconds * 1000}
+                      current={playedSeconds * 1000}
+                      onChange={this.onSeekChange}
+                    />
+                  )}
                 </div>
 
                 <div className='flex flex-initial items-center justify-between min-w-0 max-w-full w-full'>
@@ -274,6 +275,7 @@ class PlayerControls extends React.Component<Props> {
                         playNext={this.playNext}
                         showFullscreen={showFullscreen}
                         toggleFullscreen={() => this.props.dispatch({ type: types.TOGGLE_FULL_SCREEN })}
+                        player={this.props.player}
                       />
                       <div className='w-16'>
                       </div>
diff --git a/src/components/Playlists/Playlist.tsx b/src/components/Playlists/Playlist.tsx
index 385b813e..e17c242d 100644
--- a/src/components/Playlists/Playlist.tsx
+++ b/src/components/Playlists/Playlist.tsx
@@ -14,7 +14,7 @@ import { useNavigate } from 'react-router-dom'
 type Props = {
   playlist: {
     _id: string,
-    trackIds: Array<string>,
+    trackIds: Set<string>,
     filters?: Record<string, string[]>,
     id?: string,
     name?: string
@@ -32,24 +32,24 @@ const Playlist = (props: Props) => {
   const isSmartPlaylist = 'filters' in playlist
 
   // Get the relevant song IDs based on playlist type
-  const songIds = isSmartPlaylist 
+  const songIds: Set<string> = isSmartPlaylist 
     ? applyFilters(collection.rows, {
-        genres: playlist.filters?.genres || [],
-        types: playlist.filters?.types || [],
-        artists: playlist.filters?.artists || [],
-        providers: playlist.filters?.providers || []
+        genres: new Set(playlist.filters?.genres || []),
+        types: new Set(playlist.filters?.types || []),
+        artists: new Set(playlist.filters?.artists || []),
+        providers: new Set(playlist.filters?.providers || [])
       })
     : playlist.trackIds
 
-  const songs = songIds.map((songId: string) => {
-    const song = collection.rows[songId]
+  const songs = Array.from(songIds).map((songId: string) => {
+    const song = collection.rows.get(songId)
     if (!song) return null
 
     return (
       <SongRow
         key={song.id}
         mqlMatch={false}
-        songsLength={song.length}
+        songsLength={songIds.size}
         disableCovers
         style={{}}
         dispatch={props.dispatch}
@@ -63,7 +63,7 @@ const Playlist = (props: Props) => {
     )
   })
 
-  const songDocs = songIds.map((songId: string) => collection.rows[songId])
+  const songDocs = Array.from(songIds).map((songId: string) => collection.rows.get(songId))
   const songsWithCovers = songDocs.filter((song: any) => {
     return song?.album?.thumbnailUrl && song?.album?.thumbnailUrl !== '/disc.svg'
   })
@@ -112,7 +112,7 @@ const Playlist = (props: Props) => {
           inverted
           onClick={() => setShowSongs(!showSongs)}
         >
-          <Tag>{songIds.length}</Tag>
+          <Tag>{songIds.size}</Tag>
           <span className='ml-4'>Show songs</span>
           {showSongs ? <Icon className='pl-2' icon='faChevronDown' /> : <Icon className='pl-2' icon='faChevronRight' />}
         </Button>
@@ -125,7 +125,7 @@ const Playlist = (props: Props) => {
               replace: true
             })
 
-            dispatch({ type: types.SET_CURRENT_PLAYING, songId: songIds[0] })
+            dispatch({ type: types.SET_CURRENT_PLAYING, songId: Array.from(songIds)[0] })
             dispatch({ type: types.START_PLAYING })
           }}
         >
diff --git a/src/components/Queue.tsx b/src/components/Queue.tsx
index c131e704..351f400d 100644
--- a/src/components/Queue.tsx
+++ b/src/components/Queue.tsx
@@ -5,15 +5,18 @@ import { State as CollectionState } from '../reducers/collection'
 import BodyMessage from './BodyMessage'
 import MusicTable from './MusicTable/MusicTable'
 import Spinner from './Spinner'
+import { State as QueueState } from '../reducers/queue'
+import { State as PlayerState } from '../reducers/player'
+import { State as AppState } from '../reducers/app'
 
 type Props = {
-  queue: any,
-  player: any,
+  queue: QueueState,
+  player: PlayerState,
   collection: CollectionState,
   dispatch: Dispatch,
   slim?: boolean,
   className?: string,
-  app: any,
+  app: AppState,
 }
 
 const Queue = (props: Props) => {
@@ -24,7 +27,7 @@ const Queue = (props: Props) => {
   }
 
   // Disabled if theres no songs on queue
-  if (props.slim && !trackIds.length) {
+  if (props.slim && trackIds.size === 0) {
     return null
   }
 
@@ -42,7 +45,7 @@ const Queue = (props: Props) => {
     )
   }
 
-  if (!trackIds.length) {
+  if (trackIds.size === 0) {
     const message = (
       <div className='flex flex-col'>
         Add songs from the collection or search for new ones
@@ -67,7 +70,7 @@ const Queue = (props: Props) => {
   return (
     <div className={`queue z-10 resize-x ${props.className || ''}`}>
       <MusicTable
-        tableIds={trackIds}
+        tableIds={Array.from(trackIds)}
         disableCovers={props.slim}
         disableAddButton
         slim={props.slim}
diff --git a/src/components/RelatedAlbums/index.tsx b/src/components/RelatedAlbums/index.tsx
index b4e610f1..9339e14b 100644
--- a/src/components/RelatedAlbums/index.tsx
+++ b/src/components/RelatedAlbums/index.tsx
@@ -29,7 +29,7 @@ const AlbumCover = ({ albumName, albumId, thumbnailUrl }: { albumName: string, a
 }
 
 type Props = {
-  albums: Array<IAlbum>
+  albums?: Set<IAlbum>
 }
 
 const RelatedAlbums = (props: Props) => {
@@ -37,7 +37,7 @@ const RelatedAlbums = (props: Props) => {
 
   if (!props.albums) return null;
 
-  const Albums = props.albums
+  const Albums = Array.from(props.albums.values())
     ?.filter((album) => {
       return album.name !== "" // We don't want empty titles
     })
diff --git a/src/components/Sidebar/SidebarContents.tsx b/src/components/Sidebar/SidebarContents.tsx
index 9b20af3b..12d64fc8 100644
--- a/src/components/Sidebar/SidebarContents.tsx
+++ b/src/components/Sidebar/SidebarContents.tsx
@@ -68,11 +68,11 @@ const SidebarContents = (props: ContentProps) => {
         <ExploreMenuItem current={inSection(location, '$')} />
         <QueueMenuItem
           current={inSection(location, 'queue')}
-          totalItems={trackIds.length}
+          totalItems={trackIds.size}
         />
         <SearchMenuItem
           current={inSection(location, 'search-results')}
-          totalItems={props.collection.searchResults.length}
+          totalItems={Array.from(props.collection.searchResults).length}
         />
         <PlaylistsMenuItem current={inSection(location, 'playlists')} totalItems={props.playlist.playlists.length} />
         <CollectionMenuItem
diff --git a/src/components/SongView/index.tsx b/src/components/SongView/index.tsx
index 0510bca9..fbb83fff 100644
--- a/src/components/SongView/index.tsx
+++ b/src/components/SongView/index.tsx
@@ -21,14 +21,16 @@ import { getStreamUri } from '../../services/Song/StreamUriService'
 import IAlbum from '../../entities/Album'
 import ServiceIcon from '../ServiceIcon'
 import Media, { IMedia } from '../../entities/Media'
+import { State as PlayerState } from '../../reducers/player'
+import { State as SettingsState } from '../../reducers/settings'
 
 const MAX_LIST_ITEMS = 25
 
 type Props = {
   playerPortal: any,
-  location: any,
-  player: any,
-  settings: any,
+  location: Location,
+  player: PlayerState,
+  settings: SettingsState,
   lyrics: {
     lyrics: string
   },
@@ -38,7 +40,7 @@ type Props = {
     songsByGenre: any,
     rows: { [key: string]: IMedia }
   },
-  queue: { trackIds: any, currentPlaying?: string },
+  queue: { trackIds: Set<string>, currentPlaying?: string },
   songId: string,
   dispatch: Dispatch,
   loading: boolean,
@@ -60,7 +62,7 @@ const SongView = ({ songId, loading, className = '', dispatch, playerPortal, pla
   const isSongPinned = songObj?.hasAnyProviderOf(['opfs']) || false
 
   const [pinned, setPinnedSong] = React.useState(isSongPinned)
-  const [downloadUrls, setDownloadUrls] = React.useState([])
+  const [downloadUrls, setDownloadUrls] = React.useState<string[]>([])
   const [showLyrics, setShowLyrics] = React.useState(false)
 
   React.useEffect(() => {
@@ -172,7 +174,7 @@ const SongView = ({ songId, loading, className = '', dispatch, playerPortal, pla
                 </Button>
               }
 
-              {!trackIds.includes(song.id) &&
+              {!trackIds.has(song.id) &&
                 <Button
                   transparent
                   alignLeft
@@ -188,7 +190,7 @@ const SongView = ({ songId, loading, className = '', dispatch, playerPortal, pla
                 </Button>
               }
 
-              {trackIds.includes(song.id) &&
+              {trackIds.has(song.id) &&
                 <Button
                   transparent
                   alignLeft
@@ -340,7 +342,7 @@ const SongView = ({ songId, loading, className = '', dispatch, playerPortal, pla
           <AutoSizer>
             {({ width }) => (
               <div className='flex flex-col pt-8' style={{ width: width }}>
-                <RelatedAlbums albums={relatedAlbums} />
+                <RelatedAlbums albums={new Set(relatedAlbums)} />
                 {sameGenreSongs &&
                   <MediaSlider
                     title={<Translate value='titles.sameGenreSongs' />}
diff --git a/src/containers/ArtistContainer.tsx b/src/containers/ArtistContainer.tsx
index a068514e..262d35e3 100644
--- a/src/containers/ArtistContainer.tsx
+++ b/src/containers/ArtistContainer.tsx
@@ -7,8 +7,8 @@ import ArtistView from '../components/ArtistView'
 
 const getArtist = (params: Params, collection: CollectionState) => {
   const artistId = params.id || ''
-  if (collection.artists[artistId]) {
-    return collection.artists[artistId]
+  if (collection.artists.get(artistId)) {
+    return collection.artists.get(artistId)
   }
 
   return null
@@ -16,8 +16,8 @@ const getArtist = (params: Params, collection: CollectionState) => {
 
 const getSongsByArtist = (params: Params, collection: CollectionState) => {
   const artistId = params.id || ''
-  if (collection.songsByArtist[artistId]) {
-    return collection.songsByArtist[artistId]
+  if (collection.songsByArtist.get(artistId)) {
+    return collection.songsByArtist.get(artistId)
   }
 
   return null
@@ -25,8 +25,8 @@ const getSongsByArtist = (params: Params, collection: CollectionState) => {
 
 const getAlbumsByArtist = (params: Params, collection: CollectionState) => {
   const artistId = params.id || ''
-  if (collection.albumsByArtist[artistId]) {
-    return collection.albumsByArtist[artistId]
+  if (collection.albumsByArtist.get(artistId)) {
+    return collection.albumsByArtist.get(artistId)
   }
 
   return null
diff --git a/src/containers/PlayerContainer.tsx b/src/containers/PlayerContainer.tsx
index 79dfaa2b..dcc0e8ed 100644
--- a/src/containers/PlayerContainer.tsx
+++ b/src/containers/PlayerContainer.tsx
@@ -11,7 +11,7 @@ const ConnectedPlayer = connect(
     player: state.player,
     queue: state.queue,
     collection: state.collection,
-    itemCount: state.queue.trackIds ? state.queue.trackIds.length : 0
+    itemCount: state.queue.trackIds ? state.queue.trackIds.size : 0
   })
 )((props: any) => {
   const location = useLocation()
diff --git a/src/containers/RouteSelectors.ts b/src/containers/RouteSelectors.ts
index d914be8e..b34cd122 100644
--- a/src/containers/RouteSelectors.ts
+++ b/src/containers/RouteSelectors.ts
@@ -1,21 +1,23 @@
-import { PathMatch } from "react-router"
-import { State as CollectionState } from "../reducers/collection"
+import { PathMatch } from "react-router";
+import { State as CollectionState } from "../reducers/collection";
 
 export const getAlbum = (match: PathMatch, collection: CollectionState) => {
-  const albumId = match.params.id || ''
-  if (collection.albums[albumId]) {
-    return collection.albums[albumId]
+  const albumId = match.params.id || "";
+  if (collection.albums.get(albumId)) {
+    return collection.albums.get(albumId);
   }
 
-  return null
-}
+  return null;
+};
 
-export const getSongsByAlbum = (match: PathMatch, collection: CollectionState) => {
-  const albumId = match.params.id || ''
-  if (collection.songsByAlbum[albumId]) {
-    return collection.songsByAlbum[albumId]
+export const getSongsByAlbum = (
+  match: PathMatch,
+  collection: CollectionState
+) => {
+  const albumId = match.params.id || "";
+  if (collection.songsByAlbum.get(albumId)) {
+    return collection.songsByAlbum.get(albumId);
   }
 
-  return null
-}
-
+  return null;
+};
diff --git a/src/containers/TopbarContainer.tsx b/src/containers/TopbarContainer.tsx
index 03be1716..84c95fe2 100644
--- a/src/containers/TopbarContainer.tsx
+++ b/src/containers/TopbarContainer.tsx
@@ -1,9 +1,14 @@
 import { connect } from 'react-redux'
 import { useLocation, Location } from 'react-router-dom'
 
-import { State as RootState } from '../reducers'
-import Icon from '../components/common/Icon'
-import Topbar from '../components/Topbar/Topbar'
+import { State as RootState } from "../reducers";
+import Icon from "../components/common/Icon";
+import Topbar from "../components/Topbar/Topbar";
+import { State as CollectionState } from '../reducers/collection'
+import { State as SearchState } from '../reducers/search'
+import { State as QueueState } from '../reducers/queue'
+import { State as AppState } from '../reducers/app'
+import { Dispatch } from 'redux';
 
 type TitleCollection = {
   rows: any
@@ -129,31 +134,22 @@ const dynamicTitle = (
 }
 
 interface TopbarWrapperProps {
-  collection: {
-    rows: Record<string, any>;
-    artists: Record<string, any>;
-    albums: Record<string, any>;
-  };
-  search: {
-    loading: boolean;
-    error?: string;
-    searchTerm: string;
-    searchToggled: boolean;
-  };
-  queue: {
-    trackIds?: string[];
-  };
-  app: Record<string, unknown>;
-  dispatch: (action: any) => void;
+  collection: CollectionState;
+  search: SearchState;
+  queue: QueueState;
+  app: AppState;
+  dispatch: Dispatch;
   children?: React.ReactNode;
 }
 
 // Create a new wrapper component to handle hooks
 const TopbarWrapper = (props: TopbarWrapperProps) => {
-  const location = useLocation()
-  const title = dynamicTitle(location, props.collection, props.search.searchTerm)
-  const hasResults = props.queue.trackIds && props.queue.trackIds.length ? true : false
-  const inHome = location.pathname === '/' ? true : false
+  const location = useLocation();
+  const title = dynamicTitle(location, props.collection, props.search.searchTerm);
+  const hasResults = props.queue.trackIds && props.queue.trackIds.size
+    ? true
+    : false;
+  const inHome = location.pathname === "/" ? true : false;
 
   return (
     <Topbar
@@ -175,5 +171,5 @@ export default connect((state: RootState) => ({
   collection: state.collection,
   search: state.search,
   queue: state.queue,
-  app: state.app
-}))(TopbarWrapper)
+  app: state.app,
+}))(TopbarWrapper);
diff --git a/src/reducers/collection.spec.ts b/src/reducers/collection.spec.ts
index ee0c0fe4..40e80262 100644
--- a/src/reducers/collection.spec.ts
+++ b/src/reducers/collection.spec.ts
@@ -1,32 +1,41 @@
-import { describe, expect, it } from 'vitest'
-import * as types from '../constants/ActionTypes'
-import Media from '../entities/Media'
-import reducer, { defaultState } from './collection'
-import { mediaParams } from '../entities/Media.spec'
+import { describe, expect, it } from "vitest";
+import * as types from "../constants/ActionTypes";
+import Media from "../entities/Media";
+import reducer, { defaultState } from "./collection";
+import { mediaParams } from "../entities/Media.spec";
 
-describe('collection reducer', () => {
-  it('should return the initial state', () => {
-    expect(reducer(undefined, {}))
-      .toEqual(defaultState)
-  })
+describe("collection reducer", () => {
+  it("should return the initial state", () => {
+    expect(reducer(undefined, {})).toEqual(defaultState);
+  });
 
-  it('should handle RECEIVE_COLLECTION', () => {
-    const initialState = { ...defaultState, enabledProviders: ['itunes'] }
+  it("should handle RECEIVE_COLLECTION", () => {
+    const initialState = {
+      ...defaultState,
+      enabledProviders: new Set(["itunes"]),
+    };
     const fixtureSong = new Media({
       ...mediaParams,
-      forcedId: 'the-doors',
-      artistName: 'The Doors',
-      type: 'video',
-      artistId: 'the-doors',
-      albumName: 'LIght my fire',
-      stream: { itunes: { uris: [{ uri: 'http://some-songs-api/song.mp4' }], service: 'itunes' } }
-    })
-    const rows = { [fixtureSong.id]: fixtureSong.toDocument() }
-    const artists = { [fixtureSong.artist.id]: fixtureSong.artist.toDocument() }
-    const songsByArtist = { [fixtureSong.artist.id]: [fixtureSong.id] }
-    const albumsByArtist = { [fixtureSong.artist.id]: [fixtureSong.album.id] }
-    const songsByAlbum = { [fixtureSong.album.id]: [fixtureSong.id] }
-    const albums = { [fixtureSong.album.id]: fixtureSong.album.toDocument() }
+      forcedId: "the-doors",
+      artistName: "The Doors",
+      type: "video",
+      artistId: "the-doors",
+      albumName: "LIght my fire",
+      stream: {
+        itunes: {
+          uris: [{ uri: "http://some-songs-api/song.mp4" }],
+          service: "itunes",
+        },
+      },
+    });
+    const rows = { [fixtureSong.id]: fixtureSong.toDocument() };
+    const artists = {
+      [fixtureSong.artist.id]: fixtureSong.artist.toDocument(),
+    };
+    const songsByArtist = { [fixtureSong.artist.id]: [fixtureSong.id] };
+    const albumsByArtist = { [fixtureSong.artist.id]: [fixtureSong.album.id] };
+    const songsByAlbum = { [fixtureSong.album.id]: [fixtureSong.id] };
+    const albums = { [fixtureSong.album.id]: fixtureSong.album.toDocument() };
 
     const expected = {
       ...initialState,
@@ -40,29 +49,32 @@ describe('collection reducer', () => {
       loading: false,
       mediaByType: { audio: [] },
       searchResults: [fixtureSong.id],
-      filteredSongs: [fixtureSong.id]
-    }
+      filteredSongs: [fixtureSong.id],
+    };
 
-    expect(reducer(initialState, { type: types.RECEIVE_COLLECTION, data: [fixtureSong] }))
-      .toMatchObject(expected)
-  })
+    expect(
+      reducer(initialState, {
+        type: types.RECEIVE_COLLECTION,
+        data: [fixtureSong],
+      })
+    ).toMatchObject(expected);
+  });
 
-  it('should handle RECEIVE_SETTINGS to filter by provider', () => {
-    const expected = { ...defaultState, enabledProviders: ['mstream'] }
+  it("should handle RECEIVE_SETTINGS to filter by provider", () => {
+    const expected = { ...defaultState, enabledProviders: ["mstream"] };
     const action = {
       type: types.RECEIVE_SETTINGS,
       settings: {
         providers: {
           itunes: {
-            enabled: false
+            enabled: false,
           },
           mstream: {
-            enabled: true
-          }
-        }
-      }
-    }
-    expect(reducer(defaultState, action))
-      .toEqual(expected)
-  })
-})
+            enabled: true,
+          },
+        },
+      },
+    };
+    expect(reducer(defaultState, action)).toEqual(expected);
+  });
+});
diff --git a/src/reducers/collection.ts b/src/reducers/collection.ts
index 5308713f..6d39aeb5 100644
--- a/src/reducers/collection.ts
+++ b/src/reducers/collection.ts
@@ -6,62 +6,60 @@ import Artist from "../entities/Artist";
 import IMedia from "../entities/Media";
 import merge from "deepmerge";
 import { applyFilters } from "../utils/apply-filters";
+import { IAlbum } from "../entities/Album";
 
 const indexService = IndexService();
 
 export type Filter = {
-  genres: string[];
-  types: string[];
-  artists: string[];
-  providers: string[];
+  genres: Set<string>;
+  types: Set<string>;
+  artists: Set<string>;
+  providers: Set<string>;
 };
 
 export type State = {
-  rows: { [key: string]: any };
-  artists: { [key: string]: Artist };
-  albums: { [key: string]: any };
-  albumsByArtist: any;
-  songsByAlbum: any;
+  rows: Map<string, IMedia>;
+  artists: Map<string, Artist>;
+  albums: Map<string, IAlbum>;
+  albumsByArtist: Map<string, Set<string>>;
+  songsByAlbum: Map<string, Set<string>>;
   songsByNumberOfPlays: Array<string>;
-  songsByArtist: any;
-  songsByGenre: any;
-  mediaByType: any;
+  songsByArtist: Map<string, Set<string>>;
+  songsByGenre: Map<string, Set<string>>;
+  mediaByType: Map<string, Set<string>>;
   searchTerm: string;
-  searchResults: Array<string>;
-  enabledProviders: Array<string>;
+  searchResults: Set<string>;
+  enabledProviders: Set<string>;
   searchIndex: object | null;
   loading: boolean;
   totalRows: number;
   activeFilters: Filter;
-  filteredSongs: Array<string>;
+  filteredSongs: Set<string>;
 };
 
-export const defaultState = {
-  rows: {},
-  artists: {},
-  albums: {},
-  songsByArtist: {},
-  songsByGenre: {},
-  songsByAlbum: {},
-  mediaByType: {
-    audio: [],
-    video: [],
-  },
-  albumsByArtist: {},
-  songsByNumberOfPlays: [],
-  searchTerm: "",
-  searchResults: [],
-  enabledProviders: [],
+export const defaultState: State = {
+  rows: new Map<string, IMedia>(),
+  artists: new Map<string, Artist>(),
+  albums: new Map<string, IAlbum>(),
+  albumsByArtist: new Map<string, Set<string>>(),
+  songsByArtist: new Map<string, Set<string>>(),
+  songsByGenre: new Map<string, Set<string>>(),
+  songsByAlbum: new Map<string, Set<string>>(),
+  songsByNumberOfPlays: Array<string>(),
+  mediaByType: new Map<string, Set<string>>(),
+  searchResults: new Set<string>(),
+  enabledProviders: new Set<string>(),
   searchIndex: null,
   loading: true,
   totalRows: 0,
   activeFilters: {
-    genres: [],
-    types: [],
-    artists: [],
-    providers: [],
+    genres: new Set<string>(),
+    types: new Set<string>(),
+    artists: new Set<string>(),
+    providers: new Set<string>(),
   },
-  filteredSongs: [],
+  filteredSongs: new Set<string>(),
+  searchTerm: "",
 };
 
 const populateFromAction = (
@@ -70,13 +68,13 @@ const populateFromAction = (
 ): State => {
   const aggregation = action.data
     // Sort rows by ID alaphabetically
-    .sort((a: any, b: any) => {
+    .sort((a: IMedia, b: IMedia) => {
       if (a.id < b.id) return -1;
       if (a.id > b.id) return 1;
       return 0;
     })
     .reduce(
-      (acc: any, row: any) => {
+      (acc: any, row: IMedia) => {
         const songDocument = row;
 
         acc.rows[songDocument.id] = songDocument;
@@ -128,37 +126,37 @@ const populateFromAction = (
         return acc;
       },
       {
-        rows: {},
-        albums: {},
-        artists: {},
-        songsByArtist: {},
-        songsByGenre: {},
-        albumsByArtist: {},
-        songsByAlbum: {},
-        mediaByType: {},
+        rows: new Map<string, IMedia>(),
+        albums: new Map<string, IAlbum>(),
+        artists: new Map<string, Artist>(),
+        songsByArtist: new Map<string, Set<string>>(),
+        songsByGenre: new Map<string, Set<string>>(),
+        albumsByArtist: new Map<string, Set<string>>(),
+        songsByAlbum: new Map<string, Set<string>>(),
+        mediaByType: new Map<string, Set<string>>(),
       }
     );
 
   const overwriteMerge = (
-    _destinationArray: [],
-    sourceArray: [],
+    _destinationArray: any,
+    sourceArray: any,
     _options: any
   ) => sourceArray;
   const rows = merge(state.rows, aggregation.rows, {
     arrayMerge: overwriteMerge,
   });
 
-  const searchResults = filterSongs(indexService, rows, state.searchTerm);
-  const filteredSongs = applyFilters(
-    rows,
-    state.activeFilters,
-    Object.keys(rows)
+  const fixedRows = new Map(
+    Object.entries(rows).map(([id, value]) => [id, value])
   );
 
+  const searchResults = filterSongs(indexService, fixedRows, state.searchTerm);
+  const filteredSongs = applyFilters(fixedRows, state.activeFilters);
+
   // Merge the aggregated data with the existing state
   return {
     ...state,
-    rows: rows,
+    rows: fixedRows,
     artists: { ...state.artists, ...aggregation.artists },
     albums: { ...state.albums, ...aggregation.albums },
     songsByArtist: { ...state.songsByArtist, ...aggregation.songsByArtist },
@@ -166,10 +164,10 @@ const populateFromAction = (
     albumsByArtist: { ...state.albumsByArtist, ...aggregation.albumsByArtist },
     songsByAlbum: { ...state.songsByAlbum, ...aggregation.songsByAlbum },
     mediaByType: { ...state.mediaByType, ...aggregation.mediaByType },
-    searchResults,
-    filteredSongs,
+    searchResults: new Set(searchResults),
+    filteredSongs: new Set(filteredSongs),
     loading: false,
-    totalRows: Object.keys(rows).length,
+    totalRows: Array.from(rows.keys()).length,
   };
 };
 
@@ -225,10 +223,10 @@ export default (state: State = defaultState, action: any = {}) => {
     }
 
     case types.RECEIVE_SETTINGS: {
-      const enabledProviders = Object.keys(action.settings.providers).filter(
-        (key) => {
+      const enabledProviders = new Set(
+        Object.keys(action.settings.providers).filter((key) => {
           return action.settings.providers[key].enabled;
-        }
+        })
       );
 
       return {
@@ -246,8 +244,8 @@ export default (state: State = defaultState, action: any = {}) => {
         songsByArtist: {},
         songsByAlbum: {},
         albumsByArtist: {},
-        filteredSongs: [],
-        searchResults: [],
+        filteredSongs: new Set<string>(),
+        searchResults: new Set<string>(),
         totalRows: 0,
         loading: false,
       };
@@ -256,7 +254,7 @@ export default (state: State = defaultState, action: any = {}) => {
     case types.APPLY_MOST_PLAYED_SORT: {
       const songsByNumberOfPlays = Object.keys(state.rows)
         .filter((songId) => {
-          return state.rows[songId].playCount > 0;
+          return state.rows.get(songId)?.playCount ?? 0 > 0;
         })
         .sort((songId1, songId2) =>
           sortByPlayCount(songId1, songId2, state.rows)
@@ -273,7 +271,7 @@ export default (state: State = defaultState, action: any = {}) => {
 
       const newRows = state.rows;
       songIds.forEach((songId: string) => {
-        delete newRows[songId];
+        newRows.delete(songId);
       });
 
       return populateFromAction(state, { data: Object.values(newRows) });
@@ -291,16 +289,12 @@ export default (state: State = defaultState, action: any = {}) => {
         [action.filterType]: action.values,
       };
 
-      const filteredSongs = applyFilters(
-        state.rows,
-        newFilters,
-        Object.keys(state.rows)
-      );
+      const filteredSongs = applyFilters(state.rows, newFilters);
 
       return {
         ...state,
         activeFilters: newFilters,
-        filteredSongs,
+        filteredSongs: new Set(filteredSongs),
       };
     }
 
@@ -308,7 +302,7 @@ export default (state: State = defaultState, action: any = {}) => {
       return {
         ...state,
         activeFilters: defaultState.activeFilters,
-        filteredSongs: Object.keys(state.rows),
+        filteredSongs: new Set(Object.keys(state.rows)),
       };
     }
 
diff --git a/src/reducers/queue.spec.ts b/src/reducers/queue.spec.ts
index 231660eb..b5d291b5 100644
--- a/src/reducers/queue.spec.ts
+++ b/src/reducers/queue.spec.ts
@@ -1,89 +1,92 @@
-import reducer, { defaultState } from './queue'
-import { describe, it, expect } from 'vitest'
-import Media from '../entities/Media'
-import { mediaParams } from '../entities/Media.spec'
+import reducer, { defaultState } from "./queue";
+import { describe, it, expect } from "vitest";
+import Media from "../entities/Media";
+import { mediaParams } from "../entities/Media.spec";
 
-import * as types from '../constants/ActionTypes'
+import * as types from "../constants/ActionTypes";
 
-describe('queue reducer', () => {
-  it('should return the initial state', () => {
-    expect(reducer(undefined, {}))
-      .toEqual(defaultState)
-  })
+describe("queue reducer", () => {
+  it("should return the initial state", () => {
+    expect(reducer(undefined, {})).toEqual(defaultState);
+  });
 
-  it('should handle ADD_TO_QUEUE not repeat ids', () => {
-    expect(reducer({ ...defaultState, trackIds: ['1234'] }, { type: types.ADD_TO_QUEUE, songs: [{ id: '1234' }] }))
-      .toEqual({
-        ...defaultState,
-        trackIds: ['1234'],
-      })
-  })
+  it("should handle ADD_TO_QUEUE not repeat ids", () => {
+    expect(
+      reducer(
+        { ...defaultState, trackIds: new Set(["1234"]) },
+        { type: types.ADD_TO_QUEUE, songs: [{ id: "1234" }] }
+      )
+    ).toEqual({
+      ...defaultState,
+      trackIds: new Set(["1234"]),
+    });
+  });
 
-  it('should handle ADD_SONGS_TO_QUEUE action', () => {
-    const songs: any = []
-    const expectedObj: { [key: number]: Media } = {}
+  it("should handle ADD_SONGS_TO_QUEUE action", () => {
+    const songs: any = [];
+    const expectedObj: { [key: number]: Media } = {};
     for (let i = 1; i <= 20; i++) {
-      const song = new Media({ ...mediaParams, forcedId: i.toString() })
-      songs.push(song)
-      expectedObj[i] = song
+      const song = new Media({ ...mediaParams, forcedId: i.toString() });
+      songs.push(song);
+      expectedObj[i] = song;
     }
 
     const addSongsState = reducer(undefined, {
       type: types.ADD_SONGS_TO_QUEUE,
-      songs: songs.map((song: Media) => song.id)
-    })
+      songs: songs.map((song: Media) => song.id),
+    });
 
-    expect(addSongsState)
-      .toEqual({
-        ...defaultState,
-        trackIds: Object.keys(expectedObj),
-      })
-  })
+    expect(addSongsState).toEqual({
+      ...defaultState,
+      trackIds: Object.keys(expectedObj),
+    });
+  });
 
-  it('should handle SET_CURRENT_PLAYING action', () => {
-    const trackIds = ['1234', '4321']
-    const props = { ...defaultState, trackIds }
-    expect(reducer(props, { type: types.SET_CURRENT_PLAYING, songId: '1234' }))
-      .toEqual({
-        ...props,
-        trackIds,
-        currentPlaying: '1234',
-        prevSongId: undefined,
-        nextSongId: '4321'
-      })
-  })
+  it("should handle SET_CURRENT_PLAYING action", () => {
+    const trackIds = new Set(["1234", "4321"]);
+    const props = { ...defaultState, trackIds };
+    expect(
+      reducer(props, { type: types.SET_CURRENT_PLAYING, songId: "1234" })
+    ).toEqual({
+      ...props,
+      trackIds,
+      currentPlaying: "1234",
+      prevSongId: undefined,
+      nextSongId: "4321",
+    });
+  });
 
-  it('should handle CLEAR_QUEUE action', () => {
-    const trackIds = ['1234', '4321']
-    const props = { ...defaultState, trackIds }
-    expect(reducer(props, { type: types.CLEAR_QUEUE, song: '1234' }))
-      .toEqual(defaultState)
-  })
+  it("should handle CLEAR_QUEUE action", () => {
+    const trackIds = new Set(["1234", "4321"]);
+    const props = { ...defaultState, trackIds };
+    expect(reducer(props, { type: types.CLEAR_QUEUE, song: "1234" })).toEqual(
+      defaultState
+    );
+  });
 
-  it('should handle SHUFFLE action', () => {
-    const trackIds = ['1234', '4321', '3456', '2323']
-    const props = { ...defaultState, trackIds }
-    const res = reducer(props, { type: types.SHUFFLE })
+  it("should handle SHUFFLE action", () => {
+    const trackIds = new Set(["1234", "4321", "3456", "2323"]);
+    const props = { ...defaultState, trackIds };
+    const res = reducer(props, { type: types.SHUFFLE });
     expect(
-      res.trackIds.map((id) => {
-        return trackIds.map((sid) => {
-          return sid === id
-        })
+      [...res.trackIds].map((id) => {
+        return [...trackIds].map((sid) => {
+          return sid === id;
+        });
       }).length !== 4
-    ).toBe(false)
+    ).toBe(false);
 
-    expect(res.shuffle).toBe(true)
-  })
+    expect(res.shuffle).toBe(true);
+  });
 
-  it('should handle RECEIVE_QUEUE', () => {
-    const trackIds = ['1234', '4321']
+  it("should handle RECEIVE_QUEUE", () => {
+    const trackIds = new Set(["1234", "4321"]);
     const props = {
       ...defaultState,
       trackIds,
-      currentPlaying: '1234',
-      prevSongId: '4321'
-    }
-    expect(reducer(props, { type: types.RECEIVE_QUEUE }))
-      .toEqual(props)
-  })
-})
+      currentPlaying: "1234",
+      prevSongId: "4321",
+    };
+    expect(reducer(props, { type: types.RECEIVE_QUEUE })).toEqual(props);
+  });
+});
diff --git a/src/reducers/queue.ts b/src/reducers/queue.ts
index 888dc82d..fe51780e 100644
--- a/src/reducers/queue.ts
+++ b/src/reducers/queue.ts
@@ -1,31 +1,29 @@
-import * as types from '../constants/ActionTypes'
-import Media from '../entities/Media'
-import {
-  getSiblingSong
-} from './utils/queues'
+import * as types from "../constants/ActionTypes";
+import Media from "../entities/Media";
+import { getSiblingSong } from "./utils/queues";
 
 export type State = {
-  trackIds: Array<string>,
-  randomTrackIds: Array<string>,
-  currentPlaying: string | null,
-  repeat: boolean,
-  shuffle: boolean,
-  nextSongId: string | null,
-  prevSongId: string | null
-}
+  trackIds: Set<string>;
+  randomTrackIds: Set<string>;
+  currentPlaying: string | null;
+  repeat: boolean;
+  shuffle: boolean;
+  nextSongId: string | null;
+  prevSongId: string | null;
+};
 
 export const defaultState = {
-  trackIds: [],
-  randomTrackIds: [],
+  trackIds: new Set<string>(),
+  randomTrackIds: new Set<string>(),
   currentPlaying: null,
   repeat: false,
   shuffle: false,
   nextSongId: null,
-  prevSongId: null
-}
+  prevSongId: null,
+};
 
 const shuffleArray = (array: Array<any>) => {
-  const newArray = [...array]
+  const newArray = [...array];
 
   for (var i = newArray.length - 1; i > 0; i--) {
     var j = Math.floor(Math.random() * (i + 1));
@@ -34,138 +32,138 @@ const shuffleArray = (array: Array<any>) => {
     newArray[j] = temp;
   }
 
-  return newArray
-}
+  return newArray;
+};
 
 const setCurrentPlaying = (state: any, action: any) => {
-  const sourceIds = getCurrentQueue(state)
-  const scTracks = sourceIds.includes(action.songId)
+  const sourceIds = getCurrentQueue(state);
+  const scTracks = sourceIds.has(action.songId)
     ? sourceIds
-    : [...sourceIds, action.songId]
+    : new Set([...sourceIds, action.songId]);
 
   return {
     ...state,
     trackIds: scTracks,
     currentPlaying: action.songId,
-    prevSongId: getSiblingSong(scTracks, action.songId),
-    nextSongId: getSiblingSong(scTracks, action.songId, true),
-  }
-}
+    prevSongId: getSiblingSong([...scTracks], action.songId),
+    nextSongId: getSiblingSong([...scTracks], action.songId, true),
+  };
+};
 
-const getCurrentQueue = (state: State): Array<string> => {
+const getCurrentQueue = (state: State): Set<string> => {
   if (state.shuffle) {
-    return state.randomTrackIds
+    return state.randomTrackIds;
   }
 
-  return state.trackIds
-}
+  return state.trackIds;
+};
 
 export default (state: State = defaultState, action: any = {}): State => {
   switch (action.type) {
-
     case types.RECEIVE_QUEUE:
-      return { ...state, ...action.queue }
+      return {
+        ...state,
+        ...action.queue,
+        trackIds: new Set(action.queue.trackIds || []),
+        randomTrackIds: new Set(action.queue.randomTrackIds || []),
+      };
 
     case types.ADD_TO_QUEUE: {
-      const trackIds = getCurrentQueue(state)
-      const filteredTracks = new Set(trackIds.concat(action.songs.map((song: Media) => song.id)))
+      const trackIds = getCurrentQueue(state);
+      const newSongs = action.songs.map((song: Media) => song.id);
       return {
         ...state,
-        trackIds: [...filteredTracks]
-      }
+        trackIds: new Set([...trackIds, ...newSongs]),
+      };
     }
 
     case types.ADD_TO_QUEUE_NEXT: {
-      const trackIds = getCurrentQueue(state)
+      const trackIds = [...getCurrentQueue(state)];
 
       if (!state.currentPlaying) {
-        return state
+        return state;
       }
 
-      const currPosition = trackIds.indexOf(state.currentPlaying)
-      const songs = action.songs.map((song: Media) => song.id)
-      const newIds = [...trackIds]
+      const currPosition = trackIds.indexOf(state.currentPlaying);
+      const songs = action.songs.map((song: Media) => song.id);
+      const newIds = [...trackIds];
 
-      newIds.splice(
-        currPosition + 1,
-        0,
-        ...songs
-      )
+      newIds.splice(currPosition + 1, 0, ...songs);
       if (state.shuffle) {
-        return setCurrentPlaying({
-          ...state,
-          randomTrackIds: new Set(newIds)
-        }, { songId: state.currentPlaying })
+        return setCurrentPlaying(
+          {
+            ...state,
+            randomTrackIds: new Set(newIds),
+          },
+          { songId: state.currentPlaying }
+        );
       } else {
-        return setCurrentPlaying({
-          ...state,
-          trackIds: new Set(newIds)
-        }, { songId: state.currentPlaying })
+        return setCurrentPlaying(
+          {
+            ...state,
+            trackIds: new Set(newIds),
+          },
+          { songId: state.currentPlaying }
+        );
       }
     }
 
-    case types.REMOVE_FROM_QUEUE:
-      const queueTracks = new Set([
-        ...state.trackIds.splice(
-          state.trackIds.indexOf(action.song.id)
-        )
-      ])
+    case types.REMOVE_FROM_QUEUE: {
+      const trackIds = new Set([...state.trackIds]);
+      trackIds.delete(action.song.id);
       return {
         ...state,
-        trackIds: [...queueTracks]
-      }
-
+        trackIds,
+      };
+    }
 
     case types.ADD_SONGS_TO_QUEUE_BY_ID:
       if (action.replace) {
         return {
           ...state,
-          trackIds: action.trackIds
-        }
+          trackIds: new Set(action.trackIds),
+        };
       }
 
       return {
         ...state,
-        trackIds: state.trackIds.concat(action.trackIds)
-      }
+        trackIds: new Set([...state.trackIds, ...action.trackIds]),
+      };
 
     case types.ADD_SONGS_TO_QUEUE:
-
       if (action.replace) {
         return {
           ...state,
-          trackIds: action.songs.map((song: Media) => song.id)
-        }
+          trackIds: new Set(action.songs.map((song: Media) => song.id)),
+        };
       }
 
-      const tracks = state.trackIds.concat(action.songs)
-      const cleanedTracks = tracks.filter((item, pos) => tracks.indexOf(item) === pos)
-
+      const newSongs = action.songs.map((song: Media) => song.id);
       return {
         ...state,
-        trackIds: cleanedTracks
-      }
+        trackIds: new Set([...state.trackIds, ...newSongs]),
+      };
 
     case types.SET_CURRENT_PLAYING:
-      return setCurrentPlaying(state, action)
+      return setCurrentPlaying(state, action);
 
     case types.CLEAR_QUEUE:
-      return defaultState
+      return defaultState;
 
     case types.SHUFFLE:
       return {
         ...state,
         shuffle: !state.shuffle,
-        randomTrackIds: shuffleArray(state.trackIds)
-      }
+        randomTrackIds: new Set(shuffleArray([...state.trackIds])),
+      };
 
     case types.REPEAT:
       return {
         ...state,
-        repeat: !state.repeat
-      }
+        repeat: !state.repeat,
+      };
 
     default:
-      return state
+      return state;
   }
-}
+};
diff --git a/src/reducers/utils/queues.ts b/src/reducers/utils/queues.ts
index 33b32c8d..4d018900 100644
--- a/src/reducers/utils/queues.ts
+++ b/src/reducers/utils/queues.ts
@@ -1,39 +1,48 @@
 // Get sibling songs ids to know which is the next and prev song
-export const getSiblingSong = (trackIds: Array<string>, song: string, next = false) => {
-  const tracksIndex: { [key: number]: string } = {}
-  const position = trackIds.indexOf(song) ? trackIds.indexOf(song) : 0
-  trackIds.forEach((trackId, index) => {
-    tracksIndex[index] = trackId
-  })
+export const getSiblingSong = (
+  trackIds: Array<string> | Set<string>,
+  song: string,
+  next = false
+) => {
+  const tracksArray = Array.isArray(trackIds) ? trackIds : [...trackIds];
+  const tracksIndex: { [key: number]: string } = {};
+  const position = tracksArray.indexOf(song) ? tracksArray.indexOf(song) : 0;
+  tracksArray.forEach((trackId, index) => {
+    tracksIndex[index] = trackId;
+  });
 
   if (next) {
-    return tracksIndex[position+1]
+    return tracksIndex[position + 1];
   }
 
-  return tracksIndex[position-1]
-}
+  return tracksIndex[position - 1];
+};
 
 export const extractField = (song: any, field: any) => {
-  return field.split('.').reduce((obj: any, i: number): any => {
-    return obj[i] ? obj[i]: '0'
-  }, song)
-}
+  return field.split(".").reduce((obj: any, i: number): any => {
+    return obj[i] ? obj[i] : "0";
+  }, song);
+};
 
-export const sortTrackIds = (tracks: any, field: string, direction: string = 'ASC') => {
-  const songsIds = Object.keys(tracks)
+export const sortTrackIds = (
+  tracks: any,
+  field: string,
+  direction: string = "ASC"
+) => {
+  const songsIds = Object.keys(tracks);
   return songsIds.sort((songId1: string, songId2: string) => {
-    const song1 = tracks[songId1]
-    const song2 = tracks[songId2]
-    const song1Field = extractField(song1, field)
-    const song2Field = extractField(song2, field)
+    const song1 = tracks[songId1];
+    const song2 = tracks[songId2];
+    const song1Field = extractField(song1, field);
+    const song2Field = extractField(song2, field);
 
     if (song1Field < song2Field) {
-      return direction === 'ASC' ? -1: 1
+      return direction === "ASC" ? -1 : 1;
     }
     if (song1Field > song2Field) {
-      return direction === 'DESC' ? 1: -1
+      return direction === "DESC" ? 1 : -1;
     }
 
-    return 0
-  })
-}
+    return 0;
+  });
+};
diff --git a/src/sagas/selectors.ts b/src/sagas/selectors.ts
index 3a9cbc11..bff3739c 100644
--- a/src/sagas/selectors.ts
+++ b/src/sagas/selectors.ts
@@ -1,55 +1,65 @@
+import { State as RootState } from "../reducers";
+
 // Extract settings from state
 export const getSettings = (state: any) => {
-  return state ? state.settings.settings : { providers: {} }
-}
+  return state ? state.settings.settings : { providers: {} };
+};
 
 export const getState = (state: any) => {
-  return state
-}
+  return state;
+};
 
-export const getQueue = (state: any): any => {
-  return state ? state.queue : {}
-}
+export const getQueue = (state: RootState): any => {
+  return state ? state.queue : {};
+};
 
 export const getSmartPlaylists = (state: any): any => {
-  return state ? state.playlist.smartPlaylists : {}
-}
+  return state ? state.playlist.smartPlaylists : {};
+};
 
 export const getCollection = (state: any): any => {
-  return state ? state.collection : {}
-}
+  return state ? state.collection : {};
+};
 
 export const getAlbumSongs = (state: any): any => {
-  return state ? state.collection.songsByAlbum : {}
-}
+  return state ? state.collection.songsByAlbum : {};
+};
 
 export const getApp = (state: any): any => {
-  return state ? state.app : {}
-}
+  return state ? state.app : {};
+};
 
 export const getPlayer = (state: any): any => {
-  return state ? state.player : {}
-}
+  return state ? state.player : {};
+};
 
 export const getSongBg = (state: any): any => {
-  const { collection: { rows }, queue: { currentPlaying } } = state
+  const {
+    collection: { rows },
+    queue: { currentPlaying },
+  } = state;
+
+  if (!currentPlaying) {
+    return "";
+  }
+
   if (rows[currentPlaying]) {
-    const song = rows[currentPlaying]
-    return song.cover?.fullUrl
+    const song = rows[currentPlaying];
+    return song.cover?.fullUrl;
   }
-  return ''
-}
+  return "";
+};
 
 export const getCurrentSong = (state: any) => {
   if (!state) {
-    return
+    return;
   }
 
-  const rows = state.collection.rows
-  const currentId = state.queue.currentPlaying
-  return rows[currentId]
-}
+  const rows = state.collection.rows;
+  const currentId = state.queue.currentPlaying;
+  return rows[currentId];
+};
 
 export const getSongById = (state: any, id: string) => {
-  return state.collection.rows[id]
-}
+  return state.collection.rows[id];
+};
diff --git a/src/services/PeerService.ts b/src/services/PeerService.ts
index 82bcf868..6ce408e5 100644
--- a/src/services/PeerService.ts
+++ b/src/services/PeerService.ts
@@ -91,7 +91,7 @@ export default class PeerService {
   ) => {
     console.log("Handling media download request", streamData);
     const mediaId = (streamData as any).mediaId;
-    const media = this.collection?.rows[mediaId];
+    const media = this.collection?.rows.get(mediaId);
     if (!media) {
       console.error("Media not found", mediaId);
       return;
@@ -179,7 +179,7 @@ export default class PeerService {
         return;
       }
 
-      const hostMedia = this.collection?.rows[currentPlayingId];
+      const hostMedia = this.collection?.rows.get(currentPlayingId);
 
       if (!hostMedia) {
         console.warn("No media currently playing in host");
@@ -193,7 +193,7 @@ export default class PeerService {
       roomState.currentStream = mediaStream;
       roomState.room.addStream(mediaStream, (data as any).requesterId, {
         media: hostMedia,
-      });
+      } as unknown as JsonValue);
 
       this.dispatchFn({
         type: types.SET_HOST_STREAMING_STATUS,
@@ -214,7 +214,7 @@ export default class PeerService {
           return;
         }
 
-        const updatedMedia = this.collection?.rows[updatedPlayingId];
+        const updatedMedia = this.collection?.rows.get(updatedPlayingId);
 
         if (!updatedMedia) {
           console.warn("No media currently playing in host after change");
@@ -229,7 +229,7 @@ export default class PeerService {
         roomState.currentStream = newStream;
         roomState.room.addStream(newStream, (data as any).requesterId, {
           media: updatedMedia,
-        });
+        } as unknown as JsonValue);
 
         // Update the peer's stream reference
         PlayerRefService.getInstance().setPeerStream(newStream);
diff --git a/src/utils/apply-filters.ts b/src/utils/apply-filters.ts
index 0d18b3ff..1fa57289 100644
--- a/src/utils/apply-filters.ts
+++ b/src/utils/apply-filters.ts
@@ -2,57 +2,63 @@ import { Filter } from "../reducers/collection";
 import type Media from "../entities/Media";
 
 export const applyFilters = (
-  rows: { [key: string]: Media },
-  filters: Filter,
-  initialIds?: string[]
-): string[] => {
-  const idsToFilter = initialIds || Object.keys(rows);
-  return idsToFilter.filter((id) => {
-    const media = rows[id];
-
-    // If no filters are active, include everything
-    if (
-      filters.genres.length === 0 &&
-      filters.types.length === 0 &&
-      filters.artists.length === 0 &&
-      filters.providers.length === 0
-    ) {
-      return true;
-    }
-
-    let hasMatches = false;
-
-    // Check if media matches any of the selected filters in each active category
-    if (filters.genres.length > 0) {
-      const mediaGenres = Array.isArray(media.genres)
-        ? media.genres
-        : media.genres
-        ? [media.genres]
-        : [];
-      if (filters.genres.some((g) => mediaGenres.includes(g))) {
-        hasMatches = true;
+  rows: Map<string, Media>,
+  filters: Filter
+): Set<string> => {
+  return new Set(
+    Array.from(rows.keys()).filter((id) => {
+      const media = rows.get(id);
+
+      // If no filters are active, include everything
+      if (
+        filters.genres.size === 0 &&
+        filters.types.size === 0 &&
+        filters.artists.size === 0 &&
+        filters.providers.size === 0
+      ) {
+        return true;
+      }
+
+      if (!media) return false;
+
+      let hasMatches = false;
+
+      // Check if media matches any of the selected filters in each active category
+      if (filters.genres.size > 0) {
+        const mediaGenres = Array.isArray(media.genres)
+          ? media.genres
+          : media.genres
+          ? [media.genres]
+          : [];
+        mediaGenres.forEach((genre) => {
+          if (filters.genres.has(genre)) {
+            hasMatches = true;
+          }
+        });
       }
-    }
 
-    if (filters.types.length > 0) {
-      if (filters.types.includes(media.type)) {
-        hasMatches = true;
+      if (filters.types.size > 0) {
+        if (filters.types.has(media.type)) {
+          hasMatches = true;
+        }
       }
-    }
 
-    if (filters.artists.length > 0) {
-      if (filters.artists.some((artistId) => artistId === media.artist.id)) {
-        hasMatches = true;
+      if (filters.artists.size > 0) {
+        if (filters.artists.has(media.artist.id)) {
+          hasMatches = true;
+        }
       }
-    }
 
-    if (filters.providers.length > 0) {
-      const mediaProviders = media.stream ? Object.keys(media.stream) : [];
-      if (filters.providers.some((p) => mediaProviders.includes(p))) {
-        hasMatches = true;
+      if (filters.providers.size > 0) {
+        const mediaProviders = media.stream ? Object.keys(media.stream) : [];
+        mediaProviders.forEach((provider) => {
+          if (filters.providers.has(provider)) {
+            hasMatches = true;
+          }
+        });
       }
-    }
 
-    return hasMatches;
-  });
+      return hasMatches;
+    })
+  );
 };
-- 
GitLab