From 80888751bae6b035c20d5d143af313156b45398d Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Sat, 24 Aug 2024 01:53:00 +0200
Subject: [PATCH 01/32] Create GridTrackTable - to replace TrackTables in the
 future

---
 packages/app/webpack.config.ts                |  10 +-
 .../GridTrackTable/Cells/TextCell.tsx         |  19 ++
 .../GridTrackTable/Cells/ThumbnailCell.tsx    |  16 ++
 .../GridTrackTable/Headers/TextHeader.tsx     |  30 ++++
 .../lib/components/GridTrackTable/index.tsx   | 168 ++++++++++++++++++
 .../lib/components/GridTrackTable/styles.scss |  75 ++++++++
 packages/ui/lib/index.ts                      |   1 +
 .../components/GridTrackTable.stories.tsx     |  73 ++++++++
 8 files changed, 391 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/index.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/styles.scss
 create mode 100644 packages/ui/stories/components/GridTrackTable.stories.tsx

diff --git a/packages/app/webpack.config.ts b/packages/app/webpack.config.ts
index b2ca44b1d6..537b0e7de4 100644
--- a/packages/app/webpack.config.ts
+++ b/packages/app/webpack.config.ts
@@ -75,7 +75,7 @@ module.exports = (env) => {
         '@babel/plugin-proposal-class-properties',
         '@babel/plugin-proposal-object-rest-spread'
       ],
-      ignore: [/node_modules\/(?!@nuclear).*/]
+      include: [APP_DIR, ...NUCLEAR_MODULES]
     }
   };
   const contentSecurity =
@@ -246,9 +246,17 @@ module.exports = (env) => {
       static: {
         publicPath: '/'
       },
+      watchFiles: ['../../packages/**/*.{js,jsx,ts,tsx}'],
       allowedHosts: 'all'
     };
+
+    config.watchOptions = {
+      ignored: ['node_modules', 'dist'],
+      aggregateTimeout: 300,
+      poll: 1000
+    };
   }
 
+
   return config;
 };
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
new file mode 100644
index 0000000000..ec34b1f47f
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
@@ -0,0 +1,19 @@
+
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import { Track } from '@nuclear/core';
+
+import styles from '../styles.scss';
+
+
+export const TextCell: React.FC<CellProps<Track>> = ({
+  cell,
+  value
+}) => <div
+  {...cell.getCellProps()}
+  className={cx(styles.track_table_cell)}
+>
+  {value}
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
new file mode 100644
index 0000000000..ae78144228
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import { Track } from '../../../types';
+import styles from '../styles.scss';
+
+export const ThumbnailCell: React.FC<CellProps<Track>> = ({
+  cell,
+  value
+}) => <div
+  className={cx(styles.track_table_cell, styles.thumbnail_cell)}
+  {...cell.getCellProps()}
+>
+  <img className={styles.thumbnail_cell_thumbnail} src={value} />
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
new file mode 100644
index 0000000000..8f0f138c1c
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
@@ -0,0 +1,30 @@
+import { ColumnInstance, UseSortByColumnProps } from 'react-table';
+import { Track } from '../../../types';
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+
+type TextHeaderProps = {
+  column: ColumnInstance<Track> & UseSortByColumnProps<Track>;
+    header: string | React.ReactNode;
+    'data-testid'?: string;
+};
+
+export const TextHeader: React.FC<TextHeaderProps> = ({ 
+  column, 
+  header, 
+  'data-testid': dataTestId
+}) => {
+  const { isSorted, isSortedDesc } = column;
+  const name = isSortedDesc
+    ? 'sort content descending' : 'sort content ascending';
+
+  return (
+    <div data-testid={dataTestId}>
+      {header}
+      {
+        isSorted &&
+          <Icon name={name} />
+      }
+    </div>
+  );
+};
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
new file mode 100644
index 0000000000..6d88f65c36
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -0,0 +1,168 @@
+import { Row, TableInstance, TableState, UseSortByInstanceProps, UseSortByState, useSortBy, useTable } from 'react-table';
+import React, { useMemo, memo } from 'react';
+import { DragDropContext, DragDropContextProps, Draggable, Droppable } from 'react-beautiful-dnd';
+import cx from 'classnames';
+import { FixedSizeList, FixedSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import { TrackTableColumn, TrackTableHeaders, TrackTableSettings } from '../TrackTable/types';
+import { TextHeader } from './Headers/TextHeader';
+import { TextCell } from './Cells/TextCell';
+import { Track } from '../../types';
+import { getTrackThumbnail } from '../TrackRow';
+
+import styles from './styles.scss';
+import artPlaceholder from '../../../resources/media/art_placeholder.png';
+import { ThumbnailCell } from './Cells/ThumbnailCell';
+
+type GridTrackTableRowProps<T extends Track> = {
+  data: {
+    rows: TableInstance<T>['rows'];
+    prepareRow: TableInstance<T>['prepareRow'];
+    extraProps: TrackTableSettings;
+  };
+  index: number;
+  style: React.CSSProperties;
+}
+
+const GridTrackTableRow = memo(<T extends Track>({ index, style, data }: GridTrackTableRowProps<T>) => {
+  const row = data.rows[index];
+  data.prepareRow(row);
+  return <Draggable
+    key={row.id}
+    draggableId={row.id}
+    index={row.index}
+    isDragDisabled={false}
+  >
+    {
+      (draggableProvided, draggableSnapshot) => (
+        <div
+          data-test-id='track-table-row'
+          className={cx(
+            styles.track_table_row,
+            { [styles.is_dragging]: draggableSnapshot.isDragging }
+          )}
+          ref={draggableProvided.innerRef}
+          {...row.getRowProps()}
+          {...draggableProvided.draggableProps}
+          {...draggableProvided.dragHandleProps}
+          style={style ? {
+            ...draggableProvided.draggableProps.style,
+            ...style
+          } : draggableProvided.draggableProps.style}
+        >
+          {row.cells.map((cell, i) => cell.render(
+            'Cell',
+            { ...data.extraProps, key: i }
+          ))}
+        </div>
+      )}
+  </Draggable>;
+});
+
+export type GridTrackTableProps<T extends Track> = {
+tracks: T[];
+onDragEnd?: DragDropContextProps['onDragEnd'];
+} & TrackTableHeaders & TrackTableSettings;
+
+export const GridTrackTable = <T extends Track>({ 
+  tracks, 
+
+  titleHeader,
+  thumbnailHeader,
+
+  displayArtist=true, 
+  displayThumbnail=true,
+
+  ...extraProps
+}: GridTrackTableProps<T>) => {
+  const columns = useMemo(() => [
+    displayThumbnail && {
+      id: TrackTableColumn.Thumbnail,
+      Header: () => <span className={styles.center_aligned}>{thumbnailHeader}</span>,
+      accessor: (track) => getTrackThumbnail(track) || artPlaceholder,
+      Cell: ThumbnailCell
+    },
+    {
+      id: TrackTableColumn.Title,
+      Header: ({ column }) => <TextHeader column={column} header={titleHeader} />,
+      accessor: (track) => track.title ?? track.name,
+      Cell: TextCell,
+      enableSorting: true
+    }
+  ], [displayArtist, displayThumbnail]);
+
+  const data = useMemo(() => tracks, [tracks]);
+
+  const initialState: Partial<TableState<T> & UseSortByState<T>> = {
+    sortBy: [{ id: TrackTableColumn.Title, desc: false }]
+  };
+  const table = useTable<T>({ columns, data, initialState }, useSortBy) as (TableInstance<T> & UseSortByInstanceProps<T>);
+
+  const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = table;
+
+  return <div className={styles.track_table_wrapper}>
+    <div 
+      className={styles.track_table}
+      {...getTableProps()}
+    >
+      <div className={styles.track_table_head}>
+        {headerGroups.map(headerGroup => (
+          <div 
+            key={headerGroup.id}
+            className={styles.track_table_header_row}
+            {...headerGroup.getHeaderGroupProps()} 
+          >
+            {
+              headerGroup.headers.map(column => (
+                <div 
+                  key={column.id}
+                  className={styles.track_table_header_cell}
+                  {...column.getHeaderProps()} 
+                >
+                  {column.render('Header')}
+                </div>))
+            }
+          </div>
+        ))}
+      </div>
+      <DragDropContext onDragEnd={() => {}}>
+        <Droppable droppableId='track_table'>
+          {(droppableProvided) => (
+            <div
+              data-testid='track-table-body'
+              className={styles.track_table_body}
+              ref={droppableProvided.innerRef}
+              {...getTableBodyProps()}
+              {...droppableProvided.droppableProps}
+            >
+              <AutoSizer>
+                {({ height, width }) =>
+                  <>
+                    <FixedSizeList
+                      height={829}
+                      width={width}
+                      itemSize={42}
+                      itemCount={rows.length}
+                      overscanCount={2}
+                      itemData={{ 
+                        rows: rows as Row<Track>[],
+                        prepareRow: prepareRow as (row: Row<Track>) => void,
+                        extraProps
+                      }}
+                      outerRef={droppableProvided.innerRef}
+                    >
+                      {GridTrackTableRow}
+                    </FixedSizeList>
+                    {droppableProvided.placeholder}
+                  </>
+                }
+              </AutoSizer>
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  </div>;
+};
+
diff --git a/packages/ui/lib/components/GridTrackTable/styles.scss b/packages/ui/lib/components/GridTrackTable/styles.scss
new file mode 100644
index 0000000000..7d934a541b
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/styles.scss
@@ -0,0 +1,75 @@
+@import "../../common.scss";
+
+.track_table_wrapper {
+    position: relative;
+    display: flex;
+    flex-flow: column;
+    overflow: hidden;
+    height: 100%;
+}
+
+.track_table {
+    position: relative;
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    flex: 1 1 auto;
+
+    .track_table_head {
+        display: grid;
+        background: $bgdefault;
+        color: $white;
+        grid-template-columns: 1fr;
+        flex: 0 0 auto;
+    }
+
+    .track_table_header_row {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+        width: 100%;
+    }
+
+    .track_table_header_cell {
+        display: table-cell;
+        padding: 1em;
+        text-align: left;
+    }
+
+    .track_table_body {
+        display: block;
+        gap: 0.25em;
+        overflow: auto;
+        flex: 1 1 auto;
+
+        &.body_dragged_over {
+            background: $bgdark;
+        }
+    }
+
+    .track_table_row {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+        gap: 1em;
+
+        color: $white;
+
+        &:hover {
+            background: rgba($bgdefault, 0.25);
+        }
+    }
+
+    .track_table_cell {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.thumbnail_cell {
+    height: 3em;
+    .thumbnail_cell_thumbnail {
+        display: block;
+        width: 3em;
+        height: 3em;
+        object-fit: contain;
+    }
+}
diff --git a/packages/ui/lib/index.ts b/packages/ui/lib/index.ts
index e91dfbdbf6..d0cb7e4774 100644
--- a/packages/ui/lib/index.ts
+++ b/packages/ui/lib/index.ts
@@ -47,6 +47,7 @@ export { default as FullscreenLayer } from './components/FullscreenLayer';
 export { default as FullscreenForm } from './components/FullscreenForm';
 export { default as FormInput } from './components/FormInput';
 export { default as InputDialog } from './components/InputDialog';
+export { GridTrackTable } from './components/GridTrackTable';
 
 export {NuclearSignInForm} from './forms/NuclearSignInForm';
 export {NuclearSignUpForm} from './forms/NuclearSignUpForm';
diff --git a/packages/ui/stories/components/GridTrackTable.stories.tsx b/packages/ui/stories/components/GridTrackTable.stories.tsx
new file mode 100644
index 0000000000..037f13b4c9
--- /dev/null
+++ b/packages/ui/stories/components/GridTrackTable.stories.tsx
@@ -0,0 +1,73 @@
+/* eslint-disable no-console */
+import {GridTrackTable} from '../..';
+import React, { useState } from 'react';
+import { GridTrackTableProps } from '../../lib/components/GridTrackTable';
+import { Track } from '../../lib/types';
+import { swap } from '../storyUtils';
+
+export default {
+  title: 'Components/GridTrackTable',
+  component: GridTrackTable
+};
+
+const tracks = [
+  {
+    position: 1,
+    thumbnail: 'https://i.imgur.com/4euOws2.jpg',
+    artist: 'Test Artist',
+    title: 'Test Title',
+    album: 'Test Album',
+    duration: '1:00'
+  }, {
+    position: 2,
+    thumbnail: 'https://i.imgur.com/4euOws2.jpg',
+    artist: 'Test Artist 2',
+    name: 'Test Title 2',
+    album: 'Test Album',
+    duration: '1:00'
+  } as Track,
+    {
+      position: 3,
+      thumbnail: 'https://i.imgur.com/4euOws2.jpg',
+      artist: { name: 'Test Artist 3' },
+      name: 'Test Title 3',
+      album: 'Test Album',
+      duration: '1:00'
+    } as Track
+];
+
+
+const TrackTableTemplate = <T extends Track>(args: Partial<GridTrackTableProps<T>>) => <GridTrackTable
+  tracks={tracks} 
+  positionHeader='Position'
+  thumbnailHeader='Thumbnail'
+  artistHeader='Artist'
+  albumHeader='Album'
+  titleHeader='Title'
+  durationHeader='Length'
+  {...args} 
+/>;
+
+export const Basic = () => (
+  <div className='bg column'>
+    <TrackTableTemplate />
+  </div>
+);
+
+export const DragAndDropVirtualized = () => {
+  const [trackRows, setTrackRows] = useState([...tracks]);
+
+  return <div className='bg column'>
+    <TrackTableTemplate
+      tracks={Array.from({ length: 1000 }, (_, i) => ({
+        ...trackRows[i % trackRows.length],
+        position: i + 1
+      }))}  
+      onDragEnd={(result) => {
+        const { source, destination } = result;
+        console.log({ source, destination });
+        setTrackRows(swap(trackRows, source.index, destination!.index));
+      }}
+    />
+  </div>;
+};

From fe50cca88ab53af649e8e96ffdd3c77df365555f Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:49:17 +0200
Subject: [PATCH 02/32] Implement most of the existing track table
 functionalities in the grid version

---
 packages/ui/lib/common.scss                   |  29 ++-
 .../GridTrackTable/Cells/PositionCell.tsx     |  32 +++
 .../GridTrackTable/Cells/SelectionCell.tsx    |  20 ++
 .../GridTrackTable/Cells/TextCell.tsx         |   2 +-
 .../GridTrackTable/GridTrackTableRow.tsx      |  59 +++++
 .../GridTrackTable/GridTrackTableRowClone.tsx |  41 ++++
 .../Headers/SelectionHeader.tsx               |  75 ++++++
 .../GridTrackTable/Headers/TextHeader.tsx     |  23 +-
 .../lib/components/GridTrackTable/index.tsx   | 221 +++++++++++-------
 .../lib/components/GridTrackTable/styles.scss | 121 +++++++++-
 .../TrackTable/Cells/SelectionCell.tsx        |   5 +-
 .../components/TrackTable/TrackTableRow.tsx   |  46 ++++
 .../ui/lib/components/TrackTable/styles.scss  |   8 +
 .../components/GridTrackTable.stories.tsx     |  20 +-
 .../stories/components/trackTable.stories.tsx |  26 +++
 15 files changed, 617 insertions(+), 111 deletions(-)
 create mode 100644 packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx
 create mode 100644 packages/ui/lib/components/TrackTable/TrackTableRow.tsx

diff --git a/packages/ui/lib/common.scss b/packages/ui/lib/common.scss
index a08423690b..2e5ce3d0db 100644
--- a/packages/ui/lib/common.scss
+++ b/packages/ui/lib/common.scss
@@ -58,17 +58,36 @@ $small_screen: 600px;
 }
 
 @mixin shadow {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12),
-    0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12) !important;
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.12),
+    0 2px 2px rgba(0, 0, 0, 0.12),
+    0 4px 4px rgba(0, 0, 0, 0.12),
+    0 8px 8px rgba(0, 0, 0, 0.12),
+    0 16px 16px rgba(0, 0, 0, 0.12) !important;
 }
 
 @mixin textShadow {
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.25);
+  text-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.25),
+    0 4px 8px rgba(0, 0, 0, 0.25);
 }
 
 @mixin high-shadow {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1),
-    0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 0 32px 32px rgba(0, 0, 0, 0.1) !important;
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.1),
+    0 2px 2px rgba(0, 0, 0, 0.1),
+    0 4px 4px rgba(0, 0, 0, 0.1),
+    0 8px 8px rgba(0, 0, 0, 0.1),
+    0 16px 16px rgba(0, 0, 0, 0.1),
+    0 32px 32px rgba(0, 0, 0, 0.1) !important;
+}
+
+@mixin low-shadow {
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.1),
+    0 2px 2px rgba(0, 0, 0, 0.1),
+    0 4px 4px rgba(0, 0, 0, 0.1),
+    0 8px 8px rgba(0, 0, 0, 0.1) !important;
 }
 
 .nuclear {
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
new file mode 100644
index 0000000000..be2d8a0401
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import Button from '../../Button';
+import { TrackTableExtraProps } from '../../TrackTable/types';
+import { Track } from '../../../types';
+import styles from '../styles.scss';
+
+export const PositionCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
+  cell,
+  row,
+  value,
+  onPlay
+}) => <div
+  {...cell.getCellProps()}
+  className={cx(styles.position_cell, styles.narrow)}
+  data-testid='position-cell'
+>
+  <Button
+    circular
+    size='tiny'
+    icon='play'
+    color='pink'
+    className={styles.play_button}
+    onClick={() => onPlay(row.original)}
+    data-testid='play-now'
+  />
+  <span className={styles.position_cell_value}>
+    {value ?? row.index + 1}
+  </span>
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
new file mode 100644
index 0000000000..aeee72c7ac
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { CellProps, UseRowSelectRowProps } from 'react-table';
+
+import { Track } from '../../../types';
+import Checkbox, { CheckboxProps } from '../../Checkbox';
+import styles from '../styles.scss';
+
+export const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> = ({
+  cell, 
+  row
+}) => <div
+  {...cell.getCellProps()}
+  className={styles.selection_cell}
+>
+  <Checkbox
+    {...(row.getToggleRowSelectedProps() as unknown as CheckboxProps)} 
+    tabIndex={-1}
+  />
+</div>;
+
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
index ec34b1f47f..d5a8c23b41 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
@@ -13,7 +13,7 @@ export const TextCell: React.FC<CellProps<Track>> = ({
   value
 }) => <div
   {...cell.getCellProps()}
-  className={cx(styles.track_table_cell)}
+  className={cx(styles.track_table_cell, styles.text_cell)}
 >
   {value}
 </div>;
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
new file mode 100644
index 0000000000..523eda9298
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
@@ -0,0 +1,59 @@
+import React, { memo } from 'react';
+import { TableInstance } from 'react-table';
+import { Draggable } from 'react-beautiful-dnd';
+import cx from 'classnames';
+
+import { TrackTableExtraProps } from '../TrackTable/types';
+import { Track } from '../../types';
+import styles from './styles.scss';
+
+type GridTrackTableRowProps<T extends Track> = {
+    data: {
+      rows: TableInstance<T>['rows'];
+      prepareRow: TableInstance<T>['prepareRow'];
+      gridTemplateColumns: string;
+      isDragDisabled: boolean;
+      extraProps: TrackTableExtraProps<T>;
+    };
+    index: number;
+    style: React.CSSProperties;
+  }
+
+export const GridTrackTableRow = memo(<T extends Track>({ index, style, data }: GridTrackTableRowProps<T>) => {
+  const row = data.rows[index];
+  data.prepareRow(row);
+  return <Draggable
+    key={row.id}
+    draggableId={row.id}
+    index={row.index}
+    isDragDisabled={data.isDragDisabled}
+  >
+    {
+      (draggableProvided, draggableSnapshot) => (
+        <div
+          data-test-id='track-table-row'
+          className={cx(
+            styles.track_table_row,
+            { [styles.is_dragging]: draggableSnapshot.isDragging }
+          )}
+          ref={draggableProvided.innerRef}
+          {...row.getRowProps()}
+          {...draggableProvided.draggableProps}
+          {...draggableProvided.dragHandleProps}
+          style={{
+            ...(style ? {
+              ...draggableProvided.draggableProps.style,
+              ...style
+            } : draggableProvided.draggableProps.style),
+            gridTemplateColumns: data.gridTemplateColumns
+          }}
+          tabIndex={row.index}
+        >
+          {row.cells.map((cell, i) => cell.render(
+            'Cell',
+            { ...data.extraProps, key: i }
+          ))}
+        </div>
+      )}
+  </Draggable>;
+});
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
new file mode 100644
index 0000000000..93b7c056c0
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { DraggableChildrenFn } from 'react-beautiful-dnd';
+
+import cx from 'classnames';
+import styles from './styles.scss';
+import { Row } from 'react-table';
+import { Track } from '../../types';
+import { TrackTableExtraProps } from '../TrackTable/types';
+
+export type GridTrackTableRowCloneProps<T extends Track> = {
+    rows: Row<T>[];
+    gridTemplateColumns: string;
+    extraProps: TrackTableExtraProps<T>;
+}
+
+export const GridTrackTableRowClone: <T extends Track>(props: GridTrackTableRowCloneProps<T>) => DraggableChildrenFn = ({
+  rows,
+  gridTemplateColumns,
+  extraProps
+}) => (provided, snapshot, rubric) => {
+  const row = rows[rubric.source.index];
+  return <div
+    ref={provided.innerRef}
+    className={cx(
+      styles.track_table_row,
+      styles.is_dragging
+    )}
+    {...row.getRowProps()}
+    {...provided.draggableProps}
+    {...provided.dragHandleProps}
+    style={{
+      ...provided.draggableProps.style,
+      gridTemplateColumns
+    }}
+  >
+    {row.cells.map((cell, i) => cell.render(
+      'Cell',
+      { ...extraProps, key: i }
+    ))}
+  </div>;
+};
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx
new file mode 100644
index 0000000000..18f13aded1
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx
@@ -0,0 +1,75 @@
+import { Track } from '@nuclear/core';
+import { HeaderProps, UseRowSelectInstanceProps } from 'react-table';
+
+import { TrackTableExtraProps, TrackTableStrings } from '../../TrackTable/types';
+import styles from '../styles.scss';
+import React from 'react';
+import Checkbox, { CheckboxProps } from '../../Checkbox';
+import Button from '../../Button';
+import ContextPopup from '../../ContextPopup';
+import PopupButton from '../../PopupButton';
+
+export const SelectionHeader: React.FC<HeaderProps<Track> & UseRowSelectInstanceProps<Track> & TrackTableExtraProps<Track> & { strings: TrackTableStrings }> = ({
+  getToggleAllRowsSelectedProps,
+  selectedFlatRows,
+  onAddToQueue,
+  onPlayAll,
+  onAddToFavorites,
+  onAddToDownloads,
+  strings
+}) => {
+  const checkboxProps = getToggleAllRowsSelectedProps();
+  const selectedTracks = selectedFlatRows.map(row => row.original);
+  
+  return <div className={styles.selection_header}>
+    {
+      (checkboxProps.checked || checkboxProps.indeterminate) && <div className={styles.selection_header_buttons}>
+        <ContextPopup
+          title={`${selectedTracks.length} ${selectedTracks.length > 1 ? strings.tracksSelectedLabelPlural : strings.tracksSelectedLabelSingular}`}
+          trigger={
+            <Button 
+              basic
+              circular
+              size='tiny'
+              icon='ellipsis horizontal'
+              className={styles.selection_header_popup_trigger}
+              data-testid='select-all-popup-trigger'
+            />
+          }
+        >
+          <PopupButton
+            ariaLabel={strings.addSelectedTracksToQueue}
+            label={strings.addSelectedTracksToQueue}
+            icon='plus'
+            onClick={() => selectedTracks.forEach((track) => onAddToQueue(track))}
+          />
+          <PopupButton
+            ariaLabel={strings.playSelectedTracksNow}
+            label={strings.playSelectedTracksNow}
+            icon='play'
+            onClick={() => onPlayAll(selectedTracks)}
+          />
+          {
+            onAddToFavorites &&
+              <PopupButton
+                ariaLabel={strings.addSelectedTracksToFavorites}
+                label={strings.addSelectedTracksToFavorites}
+                icon='heart'
+                onClick={() => selectedTracks.forEach((track) => onAddToFavorites(track))}
+              />
+          }
+          {
+            onAddToDownloads &&
+              <PopupButton
+                ariaLabel={strings.addSelectedTracksToDownloads}
+                label={strings.addSelectedTracksToDownloads}
+                icon='download'
+                onClick={() => selectedTracks.forEach((track) => onAddToDownloads(track))}
+              />
+          }
+        </ContextPopup>
+      </div>
+    }
+    <Checkbox {...(checkboxProps as unknown as CheckboxProps)} />
+  </div>;
+};
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
index 8f0f138c1c..08a26d721c 100644
--- a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
@@ -1,17 +1,24 @@
-import { ColumnInstance, UseSortByColumnProps } from 'react-table';
-import { Track } from '../../../types';
 import React from 'react';
+import { ColumnInstance, UseSortByColumnProps } from 'react-table';
 import { Icon } from 'semantic-ui-react';
+import cx from 'classnames';
+
+import { Track } from '../../../types';
+import styles from '../styles.scss';
 
 type TextHeaderProps = {
+  className?: string;
   column: ColumnInstance<Track> & UseSortByColumnProps<Track>;
-    header: string | React.ReactNode;
-    'data-testid'?: string;
+  header: string | React.ReactNode;
+  isCentered?: boolean;
+  'data-testid'?: string;
 };
 
 export const TextHeader: React.FC<TextHeaderProps> = ({ 
+  className,
   column, 
-  header, 
+  header,
+  isCentered,
   'data-testid': dataTestId
 }) => {
   const { isSorted, isSortedDesc } = column;
@@ -19,11 +26,13 @@ export const TextHeader: React.FC<TextHeaderProps> = ({
     ? 'sort content descending' : 'sort content ascending';
 
   return (
-    <div data-testid={dataTestId}>
+    <div className={cx(className, styles.text_header, {
+      [styles.centered]: isCentered
+    })} data-testid={dataTestId}>
       {header}
       {
         isSorted &&
-          <Icon name={name} />
+          <Icon className={styles.text_header_icon} name={name} />
       }
     </div>
   );
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 6d88f65c36..19b003d48c 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -1,11 +1,10 @@
-import { Row, TableInstance, TableState, UseSortByInstanceProps, UseSortByState, useSortBy, useTable } from 'react-table';
+import { Column, Row, TableInstance, TableOptions, TableState, UseSortByInstanceProps, UseSortByState, useRowSelect, useSortBy, useTable } from 'react-table';
 import React, { useMemo, memo } from 'react';
 import { DragDropContext, DragDropContextProps, Draggable, Droppable } from 'react-beautiful-dnd';
-import cx from 'classnames';
-import { FixedSizeList, FixedSizeList as List } from 'react-window';
+import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { TrackTableColumn, TrackTableHeaders, TrackTableSettings } from '../TrackTable/types';
+import { TrackTableColumn, TrackTableExtraProps, TrackTableHeaders, TrackTableSettings, TrackTableStrings } from '../TrackTable/types';
 import { TextHeader } from './Headers/TextHeader';
 import { TextCell } from './Cells/TextCell';
 import { Track } from '../../types';
@@ -14,93 +13,137 @@ import { getTrackThumbnail } from '../TrackRow';
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { ThumbnailCell } from './Cells/ThumbnailCell';
-
-type GridTrackTableRowProps<T extends Track> = {
-  data: {
-    rows: TableInstance<T>['rows'];
-    prepareRow: TableInstance<T>['prepareRow'];
-    extraProps: TrackTableSettings;
-  };
-  index: number;
-  style: React.CSSProperties;
-}
-
-const GridTrackTableRow = memo(<T extends Track>({ index, style, data }: GridTrackTableRowProps<T>) => {
-  const row = data.rows[index];
-  data.prepareRow(row);
-  return <Draggable
-    key={row.id}
-    draggableId={row.id}
-    index={row.index}
-    isDragDisabled={false}
-  >
-    {
-      (draggableProvided, draggableSnapshot) => (
-        <div
-          data-test-id='track-table-row'
-          className={cx(
-            styles.track_table_row,
-            { [styles.is_dragging]: draggableSnapshot.isDragging }
-          )}
-          ref={draggableProvided.innerRef}
-          {...row.getRowProps()}
-          {...draggableProvided.draggableProps}
-          {...draggableProvided.dragHandleProps}
-          style={style ? {
-            ...draggableProvided.draggableProps.style,
-            ...style
-          } : draggableProvided.draggableProps.style}
-        >
-          {row.cells.map((cell, i) => cell.render(
-            'Cell',
-            { ...data.extraProps, key: i }
-          ))}
-        </div>
-      )}
-  </Draggable>;
-});
+import { GridTrackTableRow } from './GridTrackTableRow';
+import { isNumber, isString } from 'lodash';
+import { SelectionCell } from './Cells/SelectionCell';
+import { SelectionHeader } from './Headers/SelectionHeader';
+import { formatDuration } from '../../utils';
+import { PositionCell } from './Cells/PositionCell';
+import { GridTrackTableRowClone } from './GridTrackTableRowClone';
 
 export type GridTrackTableProps<T extends Track> = {
-tracks: T[];
-onDragEnd?: DragDropContextProps['onDragEnd'];
-} & TrackTableHeaders & TrackTableSettings;
+  className?: string;
+  tracks: T[];
+  isTrackFavorite: (track: T) => boolean;
+  onDragEnd?: DragDropContextProps['onDragEnd'];
+  strings: TrackTableStrings;
+  customColumns?: (Column<T> & { columnWidth: string; })[];
+} & TrackTableHeaders 
+  & TrackTableSettings 
+  & TrackTableExtraProps<T>;
 
 export const GridTrackTable = <T extends Track>({ 
+  className,
   tracks, 
+  customColumns=[],
+  isTrackFavorite,
+  onDragEnd,
 
-  titleHeader,
+  positionHeader,
   thumbnailHeader,
+  artistHeader,
+  titleHeader,
+  albumHeader,
+  durationHeader,
 
+  displayHeaders=true,
+  displayDeleteButton=true,
+  displayPosition=true,
+  displayFavorite=true,
   displayArtist=true, 
+  displayAlbum=true,
   displayThumbnail=true,
+  displayDuration=true,
+  displayCustom=true,
+  selectable=true,
+  searchable=false,
 
   ...extraProps
 }: GridTrackTableProps<T>) => {
+  const shouldDisplayDuration = displayDuration && tracks.every(track => Boolean(track.duration));
   const columns = useMemo(() => [
+    displayPosition && {
+      id: TrackTableColumn.Position,
+      Header: ({ column }) => <TextHeader
+        column={column} 
+        header={positionHeader} 
+        isCentered
+      />,
+      accessor: 'position',
+      Cell: PositionCell,
+      enableSorting: true,
+      columnWidth: '4em'
+    },
     displayThumbnail && {
       id: TrackTableColumn.Thumbnail,
-      Header: () => <span className={styles.center_aligned}>{thumbnailHeader}</span>,
-      accessor: (track) => getTrackThumbnail(track) || artPlaceholder,
-      Cell: ThumbnailCell
+      Header: ({ column }) => <TextHeader column={column} header={thumbnailHeader} />,
+      accessor: (track: T) => getTrackThumbnail(track) || artPlaceholder,
+      Cell: ThumbnailCell,
+      columnWidth: '3em'
     },
     {
       id: TrackTableColumn.Title,
       Header: ({ column }) => <TextHeader column={column} header={titleHeader} />,
-      accessor: (track) => track.title ?? track.name,
+      accessor: (track: T) => track.title ?? track.name,
       Cell: TextCell,
-      enableSorting: true
+      enableSorting: true,
+      columnWidth: '1fr'
+    },
+    displayArtist && {
+      id: TrackTableColumn.Artist,
+      Header: ({ column }) => <TextHeader column={column} header={artistHeader} />,
+      accessor: (track: T) => isString(track.artist)
+        ? track.artist
+        : track.artist.name,
+      Cell: TextCell,
+      enableSorting: true,
+      columnWidth: '1fr'
+    },
+    displayAlbum && {
+      id: TrackTableColumn.Album,
+      Header: ({ column }) => <TextHeader column={column} header={albumHeader} />,
+      accessor: 'album',
+      enableSorting: true,
+      Cell: TextCell,
+      columnWidth: '1fr'
+    },
+    shouldDisplayDuration && {
+      id: TrackTableColumn.Duration,
+      Header: ({ column }) => <TextHeader column={column} header={durationHeader} />,
+      accessor: (track: T) => {
+        if (isString(track.duration)) {
+          return track.duration;
+        } else if (isNumber(track.duration)) {
+          return formatDuration(track.duration);
+        } else {
+          return null;
+        }
+      },
+      Cell: TextCell
+    },
+    ...customColumns,
+    selectable && {
+      id: TrackTableColumn.Selection,
+      Header: SelectionHeader,
+      Cell: SelectionCell,
+      columnWidth: '6em'
     }
-  ], [displayArtist, displayThumbnail]);
+  ], [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]);
 
   const data = useMemo(() => tracks, [tracks]);
 
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
     sortBy: [{ id: TrackTableColumn.Title, desc: false }]
   };
-  const table = useTable<T>({ columns, data, initialState }, useSortBy) as (TableInstance<T> & UseSortByInstanceProps<T>);
+  const table = useTable<T>({ columns, data, initialState }, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T>);
 
   const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = table;
 
+  const gridTemplateColumns = columns.map(column => column.columnWidth ?? '1fr').join(' ');
+
+  // Disabled when there are selected rows, or when sorted by anything other than position
+  const isDragDisabled = !onDragEnd || table.selectedFlatRows.length > 0 || table.state.sortBy[0]?.id !== TrackTableColumn.Position;
+
   return <div className={styles.track_table_wrapper}>
     <div 
       className={styles.track_table}
@@ -111,6 +154,7 @@ export const GridTrackTable = <T extends Track>({
           <div 
             key={headerGroup.id}
             className={styles.track_table_header_row}
+            style={{ gridTemplateColumns: gridTemplateColumns + ' auto' }}
             {...headerGroup.getHeaderGroupProps()} 
           >
             {
@@ -118,17 +162,26 @@ export const GridTrackTable = <T extends Track>({
                 <div 
                   key={column.id}
                   className={styles.track_table_header_cell}
-                  {...column.getHeaderProps()} 
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
                 >
-                  {column.render('Header')}
+                  {column.render('Header', extraProps)}
                 </div>))
             }
+            <div data-test-id='track-table-header-spacer' className={styles.track_table_header_spacer} />
           </div>
         ))}
       </div>
       <DragDropContext onDragEnd={() => {}}>
-        <Droppable droppableId='track_table'>
-          {(droppableProvided) => (
+        <Droppable 
+          droppableId='track_table'
+          mode='virtual'
+          renderClone={GridTrackTableRowClone({
+            rows,
+            gridTemplateColumns,
+            extraProps
+          })}
+        >
+          {(droppableProvided, droppableSnapshot) => (
             <div
               data-testid='track-table-body'
               className={styles.track_table_body}
@@ -136,26 +189,28 @@ export const GridTrackTable = <T extends Track>({
               {...getTableBodyProps()}
               {...droppableProvided.droppableProps}
             >
-              <AutoSizer>
+              <AutoSizer
+                className={styles.track_table_auto_sizer}
+              >
                 {({ height, width }) =>
-                  <>
-                    <FixedSizeList
-                      height={829}
-                      width={width}
-                      itemSize={42}
-                      itemCount={rows.length}
-                      overscanCount={2}
-                      itemData={{ 
-                        rows: rows as Row<Track>[],
-                        prepareRow: prepareRow as (row: Row<Track>) => void,
-                        extraProps
-                      }}
-                      outerRef={droppableProvided.innerRef}
-                    >
-                      {GridTrackTableRow}
-                    </FixedSizeList>
-                    {droppableProvided.placeholder}
-                  </>
+                  <FixedSizeList
+                    className={styles.track_table_virtualized_list}
+                    height={height}
+                    width={width}
+                    itemSize={42}
+                    itemCount={rows.length}
+                    overscanCount={2}
+                    itemData={{ 
+                      rows: rows as Row<Track>[],
+                      prepareRow: prepareRow as (row: Row<Track>) => void,
+                      gridTemplateColumns,
+                      isDragDisabled,
+                      extraProps
+                    }}
+                    outerRef={droppableProvided.innerRef}
+                  >
+                    {GridTrackTableRow}
+                  </FixedSizeList>
                 }
               </AutoSizer>
             </div>
diff --git a/packages/ui/lib/components/GridTrackTable/styles.scss b/packages/ui/lib/components/GridTrackTable/styles.scss
index 7d934a541b..0e33b3c14d 100644
--- a/packages/ui/lib/components/GridTrackTable/styles.scss
+++ b/packages/ui/lib/components/GridTrackTable/styles.scss
@@ -30,42 +30,92 @@
     }
 
     .track_table_header_cell {
-        display: table-cell;
         padding: 1em;
         text-align: left;
+        user-select: none;
+    }
+
+    .track_table_header_spacer {
+        width: 10px;
     }
 
     .track_table_body {
         display: block;
         gap: 0.25em;
-        overflow: auto;
+        overflow-y: auto;
         flex: 1 1 auto;
 
         &.body_dragged_over {
             background: $bgdark;
         }
     }
+}
 
-    .track_table_row {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-        gap: 1em;
+.track_table_auto_sizer {
+    position: relative;
+}
 
-        color: $white;
+.track_table_virtualized_list {
+    overflow-x: visible !important;
+}
+
+.track_table_row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+
+    color: $white;
+    user-select: none;
+    outline: none;
+
+    &:hover {
+        background: rgba($bgdefault, 0.25);
 
-        &:hover {
-            background: rgba($bgdefault, 0.25);
+        .position_cell_value {
+            display: none;
         }
+
+        .play_button {
+            display: inline-flex;
+        }
+    }
+
+    &.is_dragging,
+    &:active,
+    &:focus {
+        background: darken($bgdefault, 5%);
+        border: 1px solid rgba($pink, 0.8);
+        border-radius: 4px;
+    }
+
+    &.is_dragging {
+        @include low-shadow;
     }
+}
+
+.track_table_cell {
+    display: flex;
+    align-items: center;
+}
 
-    .track_table_cell {
+.text_header {
+    &.centered {
         display: flex;
+        justify-content: center;
         align-items: center;
     }
+
+    .text_header_icon {
+        margin-left: 0.5em;
+    }
+}
+
+.text_cell {
+    padding: 0 1em;
 }
 
 .thumbnail_cell {
     height: 3em;
+
     .thumbnail_cell_thumbnail {
         display: block;
         width: 3em;
@@ -73,3 +123,54 @@
         object-fit: contain;
     }
 }
+
+.selection_header,
+.selection_cell {
+    position: relative;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.selection_header_buttons {
+    position: absolute;
+    right: 4em;
+}
+
+.selection_header_popup_trigger {
+    position: relative;
+    margin: 0 !important;
+}
+
+.position_cell {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+
+    .position_cell_value {
+        display: inline-block;
+    }
+
+    .play_button {
+        display: none;
+        margin: 0;
+        width: 32px;
+        height: 32px;
+
+        i.play.icon {
+            width: 1em !important;
+            height: 1em !important;
+
+            // Manual adjustments to center the icon
+            margin-left: 0.125em !important;
+            margin-top: 0.0625em !important;
+
+            &::before {
+                width: 1em !important;
+                height: 1em !important;
+            }
+        }
+    }
+}
diff --git a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
index 72f0cbc243..1fde4ec8b6 100644
--- a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
@@ -12,7 +12,10 @@ const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> =
   row
 }) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.select_cell, styles.narrow)}>
   {/* @ts-ignore */}
-  <Checkbox {...row.getToggleRowSelectedProps()}/>
+  <Checkbox
+    {...row.getToggleRowSelectedProps()}
+    tabIndex={undefined}
+  />
 </td>;
 
 export default SelectionCell;
diff --git a/packages/ui/lib/components/TrackTable/TrackTableRow.tsx b/packages/ui/lib/components/TrackTable/TrackTableRow.tsx
new file mode 100644
index 0000000000..5174201ff8
--- /dev/null
+++ b/packages/ui/lib/components/TrackTable/TrackTableRow.tsx
@@ -0,0 +1,46 @@
+import { memo } from 'react';
+import React from 'react';
+import { TableInstance } from 'react-table';
+import { Draggable } from 'react-beautiful-dnd';
+import cx from 'classnames';
+
+import { TrackTableColumn, TrackTableExtraProps } from './types';
+import { Track } from '../../types';
+import styles from './styles.scss';
+
+type TrackTableRowProps<T extends Track> = {
+    data: {
+        rows: TableInstance<T>['rows'];
+        prepareRow: TableInstance<T>['prepareRow'];
+        extraProps: TrackTableExtraProps<T>;
+    };
+    index: number;
+    style: React.CSSProperties;
+}
+
+export const TrackTableRow = memo(<T extends Track>({ data, index, style }: TrackTableRowProps<T>) => {
+  const row = data.rows[index];
+  data.prepareRow(row);
+
+  return <Draggable
+    key={`${row.values[TrackTableColumn.Title]} ${row.index}`}
+    draggableId={`${row.values[TrackTableColumn.Title]} ${row.index}`}
+    index={row.index}
+    isDragDisabled={true}
+  >
+    {(draggableProvided, draggableSnapshot) => {  
+      return <tr
+        data-testid='track-table-row'
+        ref={draggableProvided.innerRef}
+        className={cx({ [styles.is_dragging]: draggableSnapshot.isDragging })}
+        {...row.getRowProps()}
+        {...draggableProvided.draggableProps}
+        {...draggableProvided.dragHandleProps}
+      >
+        {
+          row.cells.map((cell, i) => (cell.render('Cell', { ...data.extraProps, key: i })))
+        }
+      </tr>;
+    }}
+  </Draggable>;
+});
diff --git a/packages/ui/lib/components/TrackTable/styles.scss b/packages/ui/lib/components/TrackTable/styles.scss
index 89565bd15d..0e6c5c99b2 100644
--- a/packages/ui/lib/components/TrackTable/styles.scss
+++ b/packages/ui/lib/components/TrackTable/styles.scss
@@ -51,9 +51,14 @@
   thead {
     background: $bgdefault;
     color: $white;
+
+    tr {
+      width: 100%;
+    }
   }
 
   tbody {
+    height: 100%;
     &.body_dragged_over {
       background: $bgdark;
     }
@@ -89,7 +94,10 @@
     }
 
     td {
+      display: table-cell;
       padding: 0 1em;
+      height: 3em;
+      max-height: 3em;
     }
 
     &:hover {
diff --git a/packages/ui/stories/components/GridTrackTable.stories.tsx b/packages/ui/stories/components/GridTrackTable.stories.tsx
index 037f13b4c9..6a3cbbdf3c 100644
--- a/packages/ui/stories/components/GridTrackTable.stories.tsx
+++ b/packages/ui/stories/components/GridTrackTable.stories.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { GridTrackTableProps } from '../../lib/components/GridTrackTable';
 import { Track } from '../../lib/types';
 import { swap } from '../storyUtils';
+import { Icon } from 'semantic-ui-react';
 
 export default {
   title: 'Components/GridTrackTable',
@@ -31,20 +32,31 @@ const tracks = [
       thumbnail: 'https://i.imgur.com/4euOws2.jpg',
       artist: { name: 'Test Artist 3' },
       name: 'Test Title 3',
-      album: 'Test Album',
+      album: 'Test Album2',
       duration: '1:00'
     } as Track
 ];
 
+const gridTrackTableStrings = {
+  addSelectedTracksToQueue: 'Add selected to queue',
+  addSelectedTracksToDownloads: 'Add selected to downloads',
+  addSelectedTracksToFavorites: 'Add selected to favorites',
+  playSelectedTracksNow: 'Play selected now',
+  tracksSelectedLabelSingular: 'track selected',
+  tracksSelectedLabelPlural: 'tracks selected',
+  filterInputPlaceholder: 'Search...'
+};
 
 const TrackTableTemplate = <T extends Track>(args: Partial<GridTrackTableProps<T>>) => <GridTrackTable
-  tracks={tracks} 
-  positionHeader='Position'
-  thumbnailHeader='Thumbnail'
+  tracks={tracks as T[]} 
+  positionHeader={<Icon name='hashtag' />}
+  thumbnailHeader={<Icon name='image' />}
   artistHeader='Artist'
   albumHeader='Album'
   titleHeader='Title'
   durationHeader='Length'
+  isTrackFavorite={() => false}
+  strings={gridTrackTableStrings}
   {...args} 
 />;
 
diff --git a/packages/ui/stories/components/trackTable.stories.tsx b/packages/ui/stories/components/trackTable.stories.tsx
index c42d510170..62bb7e96aa 100644
--- a/packages/ui/stories/components/trackTable.stories.tsx
+++ b/packages/ui/stories/components/trackTable.stories.tsx
@@ -180,3 +180,29 @@ export const ListeningHistory = () => <div className='bg'>
     displayDeleteButton={false}
   />
 </div>;
+
+export const DragAndDropVirtualized = () => {
+  const [trackRows, setTrackRows] = useState([...tracks]);
+
+  return <div className='bg'>
+    <TrackTableTemplate
+      tracks={Array.from({ length: 100 }, (_, i) => ({
+        ...trackRows[i % trackRows.length],
+        position: i + 1
+      }))}  
+      positionHeader={<Icon name='hashtag' />}
+      thumbnailHeader={<Icon name='image' />}
+      
+      isTrackFavorite={(track: Track) => track.artist === 'Test Artist 2'}
+      playlists={playlists}
+      strings={trackTableStrings}
+      onDragEnd={(result) => {
+        const { source, destination } = result;
+        setTrackRows(swap(trackRows, source.index, destination!.index));
+      }}
+      {...callbacks} 
+      displayDeleteButton={false}
+      displayThumbnail={false}
+    />
+  </div>;
+};

From 7b8b200956fd48b02b4cfb5064a2983551e43816 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Sat, 31 Aug 2024 01:40:25 +0200
Subject: [PATCH 03/32] Grid track table - complete functionality

---
 packages/ui/lib/components/Button/styles.scss |  10 +-
 .../GridTrackTable/Cells/DeleteCell.tsx       |  27 ++++
 .../GridTrackTable/Cells/FavoriteCell.tsx     |  28 ++++
 .../GridTrackTable/Cells/PositionCell.tsx     |   2 +-
 .../GridTrackTable/Cells/TextCell.tsx         |   2 +-
 .../GridTrackTable/Cells/ThumbnailCell.tsx    |   2 +-
 .../GridTrackTable/Cells/TitleCell.tsx        |  82 ++++++++++++
 .../GridTrackTable/GridTrackTableRow.tsx      |   2 +-
 .../GridTrackTable/GridTrackTableRowClone.tsx |   2 +-
 .../GridTrackTable/Headers/TextHeader.tsx     |   6 +-
 .../lib/components/GridTrackTable/index.tsx   |  74 +++++++++--
 .../lib/components/GridTrackTable/styles.scss | 125 +++++++++++++++---
 .../components/GridTrackTable.stories.tsx     |  20 +++
 13 files changed, 342 insertions(+), 40 deletions(-)
 create mode 100644 packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
 create mode 100644 packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx

diff --git a/packages/ui/lib/components/Button/styles.scss b/packages/ui/lib/components/Button/styles.scss
index 54144613cc..31bba140ef 100644
--- a/packages/ui/lib/components/Button/styles.scss
+++ b/packages/ui/lib/components/Button/styles.scss
@@ -1,12 +1,12 @@
-
 @import "../../common.scss";
 
 button.nuclear.ui.button {
   position: relative;
-  
+
   background: $bglight;
   color: $white;
   white-space: nowrap;
+  margin: 0;
 
   &:hover {
     background: mix($bglight, $bgdark, 90%);
@@ -53,7 +53,7 @@ button.nuclear.ui.button {
     "purple": $purple,
     "pink": $pink,
     "orange": $orange,
-    "red": $red,
+    "red": $red
   );
   @each $color in $colors {
     $button-color: map-get($colorvars, $color);
@@ -88,7 +88,9 @@ button.nuclear.ui.button {
     padding: 0;
     margin: 0 0.5em;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       background: transparent;
     }
 
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
new file mode 100644
index 0000000000..afc01ad097
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import styles from '../styles.scss';
+import { Track } from '../../../types';
+import { TrackTableExtraProps } from '../../TrackTable/types';
+import Button from '../../Button';
+
+export const DeleteCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
+  cell,
+  row,
+  onDelete
+}) => <div
+  {...cell.getCellProps()}
+  className={cx(styles.delete_cell)}
+  data-testid='delete-cell'>
+  <Button
+    data-testid='delete-button'
+    basic
+    borderless
+    circular
+    size='tiny' 
+    icon='times'
+    onClick={() => onDelete(row.original, row.index)}
+  />
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
new file mode 100644
index 0000000000..4d4f3ebd71
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import { TrackTableExtraProps } from '../../TrackTable/types';
+import { Track } from '../../../types';
+import Button from '../../Button';
+import styles from '../styles.scss';
+
+export const FavoriteCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
+  cell,
+  row,
+  value,
+  onAddToFavorites,
+  onRemoveFromFavorites
+}) => <div
+  {...cell.getCellProps()}
+  className={cx(styles.grid_track_table_cell, styles.favorite_cell)}
+  data-testid='favorite-cell'>
+  <Button
+    data-testid='favorite-button'
+    basic
+    borderless
+    circular
+    size='tiny' icon={value ? 'heart' : 'heart outline'}
+    onClick={() =>  value ? onRemoveFromFavorites(row.original) : onAddToFavorites(row.original)}
+  />
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
index be2d8a0401..00aca6f452 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
@@ -14,7 +14,7 @@ export const PositionCell: React.FC<CellProps<Track> & TrackTableExtraProps<Trac
   onPlay
 }) => <div
   {...cell.getCellProps()}
-  className={cx(styles.position_cell, styles.narrow)}
+  className={cx(styles.grid_track_table_cell, styles.position_cell)}
   data-testid='position-cell'
 >
   <Button
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
index d5a8c23b41..a3b62e5426 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
@@ -13,7 +13,7 @@ export const TextCell: React.FC<CellProps<Track>> = ({
   value
 }) => <div
   {...cell.getCellProps()}
-  className={cx(styles.track_table_cell, styles.text_cell)}
+  className={cx(styles.grid_track_table_cell, styles.text_cell)}
 >
   {value}
 </div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
index ae78144228..da4385493a 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
@@ -9,7 +9,7 @@ export const ThumbnailCell: React.FC<CellProps<Track>> = ({
   cell,
   value
 }) => <div
-  className={cx(styles.track_table_cell, styles.thumbnail_cell)}
+  className={cx(styles.grid_track_table_cell, styles.thumbnail_cell)}
   {...cell.getCellProps()}
 >
   <img className={styles.thumbnail_cell_thumbnail} src={value} />
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
new file mode 100644
index 0000000000..6d3dcb768d
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import { TrackTableColumn, TrackTableExtraProps } from '../../TrackTable/types';
+import { Track } from '../../../types';
+import Button from '../../Button';
+import TrackPopup from '../../TrackPopup';
+import styles from '../styles.scss';
+
+export const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
+  cell, 
+  row,
+  value,
+
+  onPlay,
+  onPlayNext,
+  onAddToQueue,
+  onAddToFavorites,
+  onAddToPlaylist,
+  onCreatePlaylist,
+  onAddToDownloads,
+  playlists,
+  popupActionStrings
+}) => <div
+  {...cell.getCellProps()}
+  data-testid='title-cell'
+  className={cx(styles.grid_track_table_cell, styles.text_cell, styles.title_cell)}
+>
+  <span className={styles.title_cell_content}>
+    <span className={styles.title_cell_value}>
+      {value}
+    </span>
+    <span className={styles.title_cell_buttons}>
+      <Button
+        className={styles.title_cell_button}
+        basic
+        borderless
+        circular
+        size='tiny'
+        icon='plus'
+        onClick={() => onAddToQueue(row.original)}
+        data-testid='add-to-queue'
+      />
+
+      <TrackPopup
+        trigger={
+          <Button
+            className={styles.title_cell_button}
+            basic
+            borderless
+            circular
+            size='tiny'
+            icon='ellipsis horizontal'
+            data-testid='track-popup-trigger'
+          />
+        }
+        thumb={row.values[TrackTableColumn.Thumbnail]}
+        title={row.values[TrackTableColumn.Title]}
+        artist={row.values[TrackTableColumn.Artist]}
+        playlists={playlists}
+
+        onPlayNow={() => onPlay(row.original)}
+        onPlayNext={() => onPlayNext(row.original)}
+        onAddToQueue={() => onAddToQueue(row.original)}
+        onAddToFavorites={() => onAddToFavorites(row.original)}
+        onAddToPlaylist={(playlist: { name: string }) => onAddToPlaylist(row.original, playlist)}
+        onCreatePlaylist={(options: { name: string }) => onCreatePlaylist(row.original, options)}
+        onAddToDownloads={() => onAddToDownloads(row.original)}
+
+        withPlayNow={Boolean(onPlay)}
+        withPlayNext={Boolean(onPlayNext)}
+        withAddToQueue={Boolean(onAddToQueue)}
+        withAddToFavorites={Boolean(onAddToFavorites)}
+        withAddToPlaylist={Boolean(onAddToFavorites)}
+        withAddToDownloads={Boolean(onAddToDownloads) && !row.original.local}
+
+        strings={popupActionStrings}
+      />
+    </span>
+  </span>
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
index 523eda9298..e0b2860693 100644
--- a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
@@ -33,7 +33,7 @@ export const GridTrackTableRow = memo(<T extends Track>({ index, style, data }:
         <div
           data-test-id='track-table-row'
           className={cx(
-            styles.track_table_row,
+            styles.grid_track_table_row,
             { [styles.is_dragging]: draggableSnapshot.isDragging }
           )}
           ref={draggableProvided.innerRef}
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
index 93b7c056c0..306aab2086 100644
--- a/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
@@ -22,7 +22,7 @@ export const GridTrackTableRowClone: <T extends Track>(props: GridTrackTableRowC
   return <div
     ref={provided.innerRef}
     className={cx(
-      styles.track_table_row,
+      styles.grid_track_table_row,
       styles.is_dragging
     )}
     {...row.getRowProps()}
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
index 08a26d721c..3fda494394 100644
--- a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
@@ -6,15 +6,15 @@ import cx from 'classnames';
 import { Track } from '../../../types';
 import styles from '../styles.scss';
 
-type TextHeaderProps = {
+type TextHeaderProps<T extends Track> = {
   className?: string;
-  column: ColumnInstance<Track> & UseSortByColumnProps<Track>;
+  column: ColumnInstance<T> & UseSortByColumnProps<T>;
   header: string | React.ReactNode;
   isCentered?: boolean;
   'data-testid'?: string;
 };
 
-export const TextHeader: React.FC<TextHeaderProps> = ({ 
+export const TextHeader: <T extends Track>(props: TextHeaderProps<T>) => React.ReactElement<TextHeaderProps<T>> = ({
   className,
   column, 
   header,
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 19b003d48c..6701f23dea 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -1,5 +1,5 @@
-import { Column, Row, TableInstance, TableOptions, TableState, UseSortByInstanceProps, UseSortByState, useRowSelect, useSortBy, useTable } from 'react-table';
-import React, { useMemo, memo } from 'react';
+import { Column, Row, TableInstance, TableOptions, TableState, UseGlobalFiltersInstanceProps, UseSortByInstanceProps, UseSortByState, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table';
+import React, { useMemo, memo, useState } from 'react';
 import { DragDropContext, DragDropContextProps, Draggable, Droppable } from 'react-beautiful-dnd';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,6 +20,11 @@ import { SelectionHeader } from './Headers/SelectionHeader';
 import { formatDuration } from '../../utils';
 import { PositionCell } from './Cells/PositionCell';
 import { GridTrackTableRowClone } from './GridTrackTableRowClone';
+import { DeleteCell } from './Cells/DeleteCell';
+import { FavoriteCell } from './Cells/FavoriteCell';
+import { TitleCell } from './Cells/TitleCell';
+import { Input } from 'semantic-ui-react';
+import Button from '../Button';
 
 export type GridTrackTableProps<T extends Track> = {
   className?: string;
@@ -32,6 +37,8 @@ export type GridTrackTableProps<T extends Track> = {
   & TrackTableSettings 
   & TrackTableExtraProps<T>;
 
+  type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
+
 export const GridTrackTable = <T extends Track>({ 
   className,
   tracks, 
@@ -62,6 +69,11 @@ export const GridTrackTable = <T extends Track>({
 }: GridTrackTableProps<T>) => {
   const shouldDisplayDuration = displayDuration && tracks.every(track => Boolean(track.duration));
   const columns = useMemo(() => [
+    displayDeleteButton && {
+      id: TrackTableColumn.Delete,
+      Cell: DeleteCell,
+      columnWidth: '3em'
+    },
     displayPosition && {
       id: TrackTableColumn.Position,
       Header: ({ column }) => <TextHeader
@@ -73,7 +85,7 @@ export const GridTrackTable = <T extends Track>({
       Cell: PositionCell,
       enableSorting: true,
       columnWidth: '4em'
-    },
+    } as Column<T>,
     displayThumbnail && {
       id: TrackTableColumn.Thumbnail,
       Header: ({ column }) => <TextHeader column={column} header={thumbnailHeader} />,
@@ -81,13 +93,19 @@ export const GridTrackTable = <T extends Track>({
       Cell: ThumbnailCell,
       columnWidth: '3em'
     },
+    displayFavorite && {
+      id: TrackTableColumn.Favorite,
+      accessor: isTrackFavorite,
+      Cell: FavoriteCell,
+      columnWidth: '3em'
+    },
     {
       id: TrackTableColumn.Title,
       Header: ({ column }) => <TextHeader column={column} header={titleHeader} />,
       accessor: (track: T) => track.title ?? track.name,
-      Cell: TextCell,
+      Cell: TitleCell,
       enableSorting: true,
-      columnWidth: '1fr'
+      columnWidth: 'minmax(8em, 1fr)'
     },
     displayArtist && {
       id: TrackTableColumn.Artist,
@@ -106,7 +124,7 @@ export const GridTrackTable = <T extends Track>({
       enableSorting: true,
       Cell: TextCell,
       columnWidth: '1fr'
-    },
+    } as Column<T>,
     shouldDisplayDuration && {
       id: TrackTableColumn.Duration,
       Header: ({ column }) => <TextHeader column={column} header={durationHeader} />,
@@ -135,18 +153,54 @@ export const GridTrackTable = <T extends Track>({
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
     sortBy: [{ id: TrackTableColumn.Title, desc: false }]
   };
-  const table = useTable<T>({ columns, data, initialState }, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T>);
+  const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T> & UseGlobalFiltersInstanceProps<T>);
+  const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
 
-  const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = table;
+  const {
+    getTableProps, 
+    getTableBodyProps, 
+    headerGroups, 
+    rows, 
+    prepareRow,
+    setGlobalFilter
+  } = table;
+
+  const onFilterClick = () => {
+    setGlobalFilter('');
+    setGlobalFilterState('');
+  };
 
-  const gridTemplateColumns = columns.map(column => column.columnWidth ?? '1fr').join(' ');
+  const gridTemplateColumns = columns.map((column: ColumnWithWidth<T>) => column.columnWidth ?? '1fr').join(' ');
 
   // Disabled when there are selected rows, or when sorted by anything other than position
   const isDragDisabled = !onDragEnd || table.selectedFlatRows.length > 0 || table.state.sortBy[0]?.id !== TrackTableColumn.Position;
 
   return <div className={styles.track_table_wrapper}>
+    {
+      searchable && 
+      <div className={styles.track_table_filter_row}>
+        <Input
+          data-testid='track-table-filter-input'
+          type='text'
+          placeholder={extraProps.strings.filterInputPlaceholder}
+          className={styles.track_table_filter_input} 
+          onChange={(e) => {
+            setGlobalFilter(e.target.value);
+            setGlobalFilterState(e.target.value);
+          }}
+          value={globalFilter}
+        />
+        <Button 
+          className={styles.track_table_filter_button}
+          onClick={onFilterClick}
+          borderless
+          color={'blue'}
+          icon='filter' 
+        />
+      </div>
+    }
     <div 
-      className={styles.track_table}
+      className={styles.grid_track_table}
       {...getTableProps()}
     >
       <div className={styles.track_table_head}>
diff --git a/packages/ui/lib/components/GridTrackTable/styles.scss b/packages/ui/lib/components/GridTrackTable/styles.scss
index 0e33b3c14d..1e0cff0bf5 100644
--- a/packages/ui/lib/components/GridTrackTable/styles.scss
+++ b/packages/ui/lib/components/GridTrackTable/styles.scss
@@ -8,7 +8,46 @@
     height: 100%;
 }
 
-.track_table {
+.track_table_wrapper .track_table_filter_row {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 0.5em;
+
+    .track_table_filter_input {
+        input {
+            background: rgba($bglighter, 0.25);
+            color: $white;
+            border: 1px solid transparent;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+
+            &::placeholder {
+                color: rgba($white, 0.5);
+            }
+
+            &::selection {
+                background-color: $blue;
+                color: $white;
+            }
+
+            &:active,
+            &:focus {
+                &::placeholder {
+                    color: rgba($white, 0.2);
+                }
+            }
+        }
+    }
+
+    .track_table_filter_button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.grid_track_table {
     position: relative;
     display: flex;
     flex-flow: column;
@@ -59,7 +98,7 @@
     overflow-x: visible !important;
 }
 
-.track_table_row {
+.grid_track_table_row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
@@ -77,11 +116,15 @@
         .play_button {
             display: inline-flex;
         }
+
+        .title_cell {
+            .title_cell_buttons {
+                display: inline-flex;
+            }
+        }
     }
 
-    &.is_dragging,
-    &:active,
-    &:focus {
+    &.is_dragging {
         background: darken($bgdefault, 5%);
         border: 1px solid rgba($pink, 0.8);
         border-radius: 4px;
@@ -92,9 +135,14 @@
     }
 }
 
-.track_table_cell {
+.grid_track_table_cell {
     display: flex;
     align-items: center;
+
+    button.nuclear.button {
+        width: 2.5em;
+        height: 2.5em;
+    }
 }
 
 .text_header {
@@ -110,6 +158,8 @@
 }
 
 .text_cell {
+    @include ellipsis;
+    white-space: nowrap;
     padding: 0 1em;
 }
 
@@ -155,22 +205,61 @@
 
     .play_button {
         display: none;
-        margin: 0;
-        width: 32px;
-        height: 32px;
 
-        i.play.icon {
-            width: 1em !important;
-            height: 1em !important;
+        // Manual adjustments to center the icon
+        padding-top: 0.75em !important;
 
+        i.play.icon {
             // Manual adjustments to center the icon
-            margin-left: 0.125em !important;
-            margin-top: 0.0625em !important;
+            margin-left: 0.06em !important;
+        }
+    }
+}
 
-            &::before {
-                width: 1em !important;
-                height: 1em !important;
-            }
+.delete_cell {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.favorite_cell {
+    justify-content: center;
+    padding-left: 1em;
+}
+
+.grid_track_table_cell.title_cell {
+    .title_cell_content {
+        display: inline-flex;
+        flex-flow: row;
+        align-items: center;
+        width: 100%;
+    }
+
+    .title_cell_value {
+        @include ellipsis;
+        white-space: nowrap;
+        flex: 1 1 auto;
+    }
+
+    .title_cell_buttons {
+        display: none;
+        flex-flow: row;
+        flex: 0 0 auto;
+    }
+    .title_cell_button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        width: 2.5em;
+        height: 2.5em;
+        margin: 0;
+        border: none;
+        background: none;
+
+        i.icon {
+            margin: 0 0 0.5px 0 !important;
         }
     }
 }
diff --git a/packages/ui/stories/components/GridTrackTable.stories.tsx b/packages/ui/stories/components/GridTrackTable.stories.tsx
index 6a3cbbdf3c..6693fefcce 100644
--- a/packages/ui/stories/components/GridTrackTable.stories.tsx
+++ b/packages/ui/stories/components/GridTrackTable.stories.tsx
@@ -5,6 +5,7 @@ import { GridTrackTableProps } from '../../lib/components/GridTrackTable';
 import { Track } from '../../lib/types';
 import { swap } from '../storyUtils';
 import { Icon } from 'semantic-ui-react';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Components/GridTrackTable',
@@ -37,6 +38,17 @@ const tracks = [
     } as Track
 ];
 
+const callbacks = {
+  onPlay: action('Started playing'),
+  onPlayAll: action('Started playing all'),
+  onAddToQueue: action('Added to queue'),
+  onAddToFavorites: action('Added to favorites'),
+  onRemoveFromFavorites: action('Removed from favorites'),
+  onAddToDownloads: action('Added to downloads'),
+  onAddToPlaylist: action('Added to playlist'),
+  onDelete: action('Deleted')
+};
+
 const gridTrackTableStrings = {
   addSelectedTracksToQueue: 'Add selected to queue',
   addSelectedTracksToDownloads: 'Add selected to downloads',
@@ -57,6 +69,7 @@ const TrackTableTemplate = <T extends Track>(args: Partial<GridTrackTableProps<T
   durationHeader='Length'
   isTrackFavorite={() => false}
   strings={gridTrackTableStrings}
+  {...callbacks}
   {...args} 
 />;
 
@@ -83,3 +96,10 @@ export const DragAndDropVirtualized = () => {
     />
   </div>;
 };
+
+export const Searchable = () => <div className='bg'>
+  <TrackTableTemplate 
+    tracks={tracks}
+    searchable
+  />
+</div>;

From 94e776b744b3e4f24e3e27480051abf2eb374f8e Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Thu, 5 Sep 2024 00:14:24 +0200
Subject: [PATCH 04/32] Use the new grid track table in place of existing
 playlists

---
 .../ArtistView/PopularTracks/index.tsx        |   2 +-
 .../ListeningHistoryView/styles.scss          |   4 +
 .../app/components/PlaylistView/styles.scss   |   3 +-
 .../containers/TrackTableContainer/index.tsx  |   4 +-
 .../lib/components/ContextPopup/styles.scss   |   4 +-
 .../lib/components/GridTrackTable/index.tsx   |  11 +-
 .../lib/components/GridTrackTable/styles.scss |  13 +-
 .../components/TrackTable/HistoryTable.tsx    |  18 +-
 .../gridTrackTable.test.tsx.snap              | 759 ++++++++++++++++++
 packages/ui/test/gridTrackTable.test.tsx      |  54 ++
 packages/ui/test/helpers.tsx                  |   4 +-
 11 files changed, 854 insertions(+), 22 deletions(-)
 create mode 100644 packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
 create mode 100644 packages/ui/test/gridTrackTable.test.tsx

diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
index 044c490940..bf6adc2d8a 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.tsx
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -71,7 +71,7 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const customColumns = useMemo(() => [{
     id: PlaycountColumnId,
     Header: t('count'),
-    accessor: (track: ArtistTopTrack) => track.playcount,
+    accessor: 'playcount',
     Cell: ({value, ...rest}: CellProps<Track, string>) => <TrackTableCell value={Number(value).toLocaleString()} {...rest} />
   }], []);
 
diff --git a/packages/app/app/components/ListeningHistoryView/styles.scss b/packages/app/app/components/ListeningHistoryView/styles.scss
index 45e75f7183..6ad327dfbd 100644
--- a/packages/app/app/components/ListeningHistoryView/styles.scss
+++ b/packages/app/app/components/ListeningHistoryView/styles.scss
@@ -14,6 +14,10 @@
     .listening_history_header_actions {
         display: flex;
         align-items: center;
+
+        button.nuclear.ui.button:not(:last-child) {
+            margin-right: 1em;
+        }
     }
 
     .listening_history_pagination {
diff --git a/packages/app/app/components/PlaylistView/styles.scss b/packages/app/app/components/PlaylistView/styles.scss
index faa48d9e41..599bf975ec 100644
--- a/packages/app/app/components/PlaylistView/styles.scss
+++ b/packages/app/app/components/PlaylistView/styles.scss
@@ -3,12 +3,11 @@
 .playlist_view_container {
   width: 100%;
   height: 100%;
-  margin: 1em 0em;
 
   .playlist {
     display: flex;
     flex-flow: column;
-    margin-right: 1em;
+    height: 100%;
   }
 
   .playlist_view_info {
diff --git a/packages/app/app/containers/TrackTableContainer/index.tsx b/packages/app/app/containers/TrackTableContainer/index.tsx
index 956282da4b..cdfacc2b07 100644
--- a/packages/app/app/containers/TrackTableContainer/index.tsx
+++ b/packages/app/app/containers/TrackTableContainer/index.tsx
@@ -5,7 +5,7 @@ import { Icon } from 'semantic-ui-react';
 import _ from 'lodash';
 
 import { Playlist } from '@nuclear/core';
-import { TrackTable, areTracksEqualByName } from '@nuclear/ui';
+import { GridTrackTable, areTracksEqualByName } from '@nuclear/ui';
 import { TrackTableProps } from '@nuclear/ui/lib/components/TrackTable';
 import { TrackTableSettings } from '@nuclear/ui/lib/components/TrackTable/types';
 import { Track } from '@nuclear/ui/lib/types';
@@ -33,7 +33,7 @@ function TrackTableContainer<T extends Track> ({
   tracks,
   onDelete,
   onReorder,
-  TrackTableComponent = TrackTable,
+  TrackTableComponent = GridTrackTable,
   customColumns,
   displayAddToDownloads = true,
   displayAddToFavorites = true,
diff --git a/packages/ui/lib/components/ContextPopup/styles.scss b/packages/ui/lib/components/ContextPopup/styles.scss
index 975438f226..5ba65cdd1c 100644
--- a/packages/ui/lib/components/ContextPopup/styles.scss
+++ b/packages/ui/lib/components/ContextPopup/styles.scss
@@ -1,4 +1,4 @@
-@import '../../common';
+@import "../../common";
 
 .context_popup {
   @include shadow;
@@ -80,7 +80,7 @@
     display: flex;
     flex-flow: column;
     flex: 0 0 auto;
-    padding: 0.5rem 0;
+    padding-top: 0.5rem;
     height: auto !important;
   }
 }
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 6701f23dea..2a4545c4b0 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -32,7 +32,7 @@ export type GridTrackTableProps<T extends Track> = {
   isTrackFavorite: (track: T) => boolean;
   onDragEnd?: DragDropContextProps['onDragEnd'];
   strings: TrackTableStrings;
-  customColumns?: (Column<T> & { columnWidth: string; })[];
+  customColumns?: (Column<T & { columnWidth: string; }>)[];
 } & TrackTableHeaders 
   & TrackTableSettings 
   & TrackTableExtraProps<T>;
@@ -137,7 +137,8 @@ export const GridTrackTable = <T extends Track>({
           return null;
         }
       },
-      Cell: TextCell
+      Cell: TextCell,
+      columnWidth: '6em'
     },
     ...customColumns,
     selectable && {
@@ -146,12 +147,12 @@ export const GridTrackTable = <T extends Track>({
       Cell: SelectionCell,
       columnWidth: '6em'
     }
-  ], [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]);
+  ].filter(Boolean), [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]);
 
   const data = useMemo(() => tracks, [tracks]);
 
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
-    sortBy: [{ id: TrackTableColumn.Title, desc: false }]
+    sortBy: [{ id: TrackTableColumn.Position, desc: false }]
   };
   const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T> & UseGlobalFiltersInstanceProps<T>);
   const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
@@ -225,7 +226,7 @@ export const GridTrackTable = <T extends Track>({
           </div>
         ))}
       </div>
-      <DragDropContext onDragEnd={() => {}}>
+      <DragDropContext onDragEnd={onDragEnd}>
         <Droppable 
           droppableId='track_table'
           mode='virtual'
diff --git a/packages/ui/lib/components/GridTrackTable/styles.scss b/packages/ui/lib/components/GridTrackTable/styles.scss
index 1e0cff0bf5..117ad3fe58 100644
--- a/packages/ui/lib/components/GridTrackTable/styles.scss
+++ b/packages/ui/lib/components/GridTrackTable/styles.scss
@@ -6,6 +6,7 @@
     flex-flow: column;
     overflow: hidden;
     height: 100%;
+    flex: 1 1 auto;
 }
 
 .track_table_wrapper .track_table_filter_row {
@@ -75,13 +76,12 @@
     }
 
     .track_table_header_spacer {
-        width: 10px;
+        width: 0.5rem;
     }
 
     .track_table_body {
         display: block;
         gap: 0.25em;
-        overflow-y: auto;
         flex: 1 1 auto;
 
         &.body_dragged_over {
@@ -106,6 +106,10 @@
     user-select: none;
     outline: none;
 
+    &:not(:last-child) {
+        border-bottom: 1px solid $bgdefault;
+    }
+
     &:hover {
         background: rgba($bgdefault, 0.25);
 
@@ -146,6 +150,11 @@
 }
 
 .text_header {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+
     &.centered {
         display: flex;
         justify-content: center;
diff --git a/packages/ui/lib/components/TrackTable/HistoryTable.tsx b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
index 2d343a09de..7d7d98c46f 100644
--- a/packages/ui/lib/components/TrackTable/HistoryTable.tsx
+++ b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
@@ -5,22 +5,28 @@ import TrackTable, { TrackTableProps } from '.';
 import { Track } from '../../types';
 import DateCell from './Cells/DateCell';
 import { TrackTableColumn } from './types';
+import { GridTrackTable } from '../GridTrackTable';
+import { Column } from 'react-table';
+import { TextHeader } from '../GridTrackTable/Headers/TextHeader';
 
 export type HistoryTableTrack = Track & {
     createdAt: Date;
 }
 
-type HistoryTableProps = TrackTableProps<HistoryTableTrack>;
+type HistoryTableProps = TrackTableProps<HistoryTableTrack> & {
+  dateHeader?: string;
+};
 
-const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, ...props }) => {
+const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, dateHeader, ...props }) => {
   const customColumns = useMemo(() => [{
     id: TrackTableColumn.Date,
-    Header: 'Date',
+    Header: ({ column }) => <TextHeader  column={column} header={dateHeader} />,
     accessor: (track: HistoryTableTrack) => track.createdAt.toLocaleString(),
-    Cell: DateCell
-  }], []);
+    Cell: DateCell,
+    columnnWidth: '3em'
+  } as Column<HistoryTableTrack>], []);
 
-  return <TrackTable
+  return <GridTrackTable
     className={styles.history_table}
     tracks={tracks}
     customColumns={customColumns}
diff --git a/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
new file mode 100644
index 0000000000..852eeb15f0
--- /dev/null
+++ b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
@@ -0,0 +1,759 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Snapshot) Grid track table - empty should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="track_table_wrapper"
+  >
+    <div
+      class="grid_track_table"
+      role="table"
+    >
+      <div
+        class="track_table_head"
+      >
+        <div
+          class="track_table_header_row"
+          role="row"
+          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em auto;"
+        >
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+          >
+             
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header centered"
+            >
+              Position
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Thumbnail
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+          >
+             
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Title
+              <i
+                aria-hidden="true"
+                class="sort content ascending icon text_header_icon"
+              />
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Artist
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Album
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Length
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+          >
+            <div
+              class="selection_header"
+            >
+              <div
+                class="ui fitted checkbox nuclear checkbox"
+                style="cursor: pointer;"
+              >
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  title="Toggle All Rows Selected"
+                  type="checkbox"
+                  value=""
+                />
+                <label />
+              </div>
+            </div>
+          </div>
+          <div
+            class="track_table_header_spacer"
+            data-test-id="track-table-header-spacer"
+          />
+        </div>
+      </div>
+      <div
+        class="track_table_body"
+        data-rbd-droppable-context-id="0"
+        data-rbd-droppable-id="track_table"
+        data-testid="track-table-body"
+        role="rowgroup"
+      >
+        <div
+          class="track_table_virtualized_list"
+          style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <div
+            style="height: 0px; width: 100%;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`(Snapshot) Grid track table - example data with all rows should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="track_table_wrapper"
+  >
+    <div
+      class="grid_track_table"
+      role="table"
+    >
+      <div
+        class="track_table_head"
+      >
+        <div
+          class="track_table_header_row"
+          role="row"
+          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em auto;"
+        >
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+          >
+             
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header centered"
+            >
+              Position
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Thumbnail
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+          >
+             
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Title
+              <i
+                aria-hidden="true"
+                class="sort content ascending icon text_header_icon"
+              />
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Artist
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Album
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
+          >
+            <div
+              class="text_header"
+            >
+              Length
+            </div>
+          </div>
+          <div
+            class="track_table_header_cell"
+            colspan="1"
+            role="columnheader"
+          >
+            <div
+              class="selection_header"
+            >
+              <div
+                class="ui fitted checkbox nuclear checkbox"
+                style="cursor: pointer;"
+              >
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  title="Toggle All Rows Selected"
+                  type="checkbox"
+                  value=""
+                />
+                <label />
+              </div>
+            </div>
+          </div>
+          <div
+            class="track_table_header_spacer"
+            data-test-id="track-table-header-spacer"
+          />
+        </div>
+      </div>
+      <div
+        class="track_table_body"
+        data-rbd-droppable-context-id="1"
+        data-rbd-droppable-id="track_table"
+        data-testid="track-table-body"
+        role="rowgroup"
+      >
+        <div
+          class="track_table_virtualized_list"
+          style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <div
+            style="height: 126px; width: 100%;"
+          >
+            <div
+              class="grid_track_table_row"
+              data-rbd-draggable-context-id="1"
+              data-rbd-draggable-id="0"
+              data-test-id="track-table-row"
+              role="row"
+              style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em;"
+              tabindex="0"
+            >
+              <div
+                class="delete_cell"
+                data-testid="delete-cell"
+                role="cell"
+              >
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="delete-button"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="times icon"
+                  />
+                </button>
+              </div>
+              <div
+                class="grid_track_table_cell position_cell"
+                data-testid="position-cell"
+                role="cell"
+              >
+                <button
+                  class="ui pink tiny circular icon button nuclear button play_button"
+                  data-testid="play-now"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="play icon"
+                  />
+                </button>
+                <span
+                  class="position_cell_value"
+                >
+                  1
+                </span>
+              </div>
+              <div
+                class="grid_track_table_cell thumbnail_cell"
+                role="cell"
+              >
+                <img
+                  class="thumbnail_cell_thumbnail"
+                  src="https://i.imgur.com/4euOws2.jpg"
+                />
+              </div>
+              <div
+                class="grid_track_table_cell favorite_cell"
+                data-testid="favorite-cell"
+                role="cell"
+              >
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="favorite-button"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="heart outline icon"
+                  />
+                </button>
+              </div>
+              <div
+                class="grid_track_table_cell text_cell title_cell"
+                data-testid="title-cell"
+                role="cell"
+              >
+                <span
+                  class="title_cell_content"
+                >
+                  <span
+                    class="title_cell_value"
+                  >
+                    Test Title
+                  </span>
+                  <span
+                    class="title_cell_buttons"
+                  >
+                    <button
+                      class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                      data-testid="add-to-queue"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="plus icon"
+                      />
+                    </button>
+                    <button
+                      class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                      data-testid="track-popup-trigger"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="ellipsis horizontal icon"
+                      />
+                    </button>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                Test Artist
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                Test Album
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                1:00
+              </div>
+              <div
+                class="selection_cell"
+                role="cell"
+              >
+                <div
+                  class="ui fitted checkbox nuclear checkbox"
+                  style="cursor: pointer;"
+                >
+                  <input
+                    class="hidden"
+                    readonly=""
+                    tabindex="-1"
+                    title="Toggle Row Selected"
+                    type="checkbox"
+                    value=""
+                  />
+                  <label />
+                </div>
+              </div>
+            </div>
+            <div
+              class="grid_track_table_row"
+              data-rbd-draggable-context-id="1"
+              data-rbd-draggable-id="1"
+              data-test-id="track-table-row"
+              role="row"
+              style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em;"
+              tabindex="1"
+            >
+              <div
+                class="delete_cell"
+                data-testid="delete-cell"
+                role="cell"
+              >
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="delete-button"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="times icon"
+                  />
+                </button>
+              </div>
+              <div
+                class="grid_track_table_cell position_cell"
+                data-testid="position-cell"
+                role="cell"
+              >
+                <button
+                  class="ui pink tiny circular icon button nuclear button play_button"
+                  data-testid="play-now"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="play icon"
+                  />
+                </button>
+                <span
+                  class="position_cell_value"
+                >
+                  2
+                </span>
+              </div>
+              <div
+                class="grid_track_table_cell thumbnail_cell"
+                role="cell"
+              >
+                <img
+                  class="thumbnail_cell_thumbnail"
+                  src="https://i.imgur.com/4euOws2.jpg"
+                />
+              </div>
+              <div
+                class="grid_track_table_cell favorite_cell"
+                data-testid="favorite-cell"
+                role="cell"
+              >
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="favorite-button"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="heart outline icon"
+                  />
+                </button>
+              </div>
+              <div
+                class="grid_track_table_cell text_cell title_cell"
+                data-testid="title-cell"
+                role="cell"
+              >
+                <span
+                  class="title_cell_content"
+                >
+                  <span
+                    class="title_cell_value"
+                  >
+                    Test Title 2
+                  </span>
+                  <span
+                    class="title_cell_buttons"
+                  >
+                    <button
+                      class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                      data-testid="add-to-queue"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="plus icon"
+                      />
+                    </button>
+                    <button
+                      class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                      data-testid="track-popup-trigger"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="ellipsis horizontal icon"
+                      />
+                    </button>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                Test Artist 2
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                Test Album
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                1:00
+              </div>
+              <div
+                class="selection_cell"
+                role="cell"
+              >
+                <div
+                  class="ui fitted checkbox nuclear checkbox"
+                  style="cursor: pointer;"
+                >
+                  <input
+                    class="hidden"
+                    readonly=""
+                    tabindex="-1"
+                    title="Toggle Row Selected"
+                    type="checkbox"
+                    value=""
+                  />
+                  <label />
+                </div>
+              </div>
+            </div>
+            <div
+              class="grid_track_table_row"
+              data-rbd-draggable-context-id="1"
+              data-rbd-draggable-id="2"
+              data-test-id="track-table-row"
+              role="row"
+              style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em;"
+              tabindex="2"
+            >
+              <div
+                class="delete_cell"
+                data-testid="delete-cell"
+                role="cell"
+              >
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="delete-button"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="times icon"
+                  />
+                </button>
+              </div>
+              <div
+                class="grid_track_table_cell position_cell"
+                data-testid="position-cell"
+                role="cell"
+              >
+                <button
+                  class="ui pink tiny circular icon button nuclear button play_button"
+                  data-testid="play-now"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="play icon"
+                  />
+                </button>
+                <span
+                  class="position_cell_value"
+                >
+                  3
+                </span>
+              </div>
+              <div
+                class="grid_track_table_cell thumbnail_cell"
+                role="cell"
+              >
+                <img
+                  class="thumbnail_cell_thumbnail"
+                  src="https://i.imgur.com/4euOws2.jpg"
+                />
+              </div>
+              <div
+                class="grid_track_table_cell favorite_cell"
+                data-testid="favorite-cell"
+                role="cell"
+              >
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="favorite-button"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="heart outline icon"
+                  />
+                </button>
+              </div>
+              <div
+                class="grid_track_table_cell text_cell title_cell"
+                data-testid="title-cell"
+                role="cell"
+              >
+                <span
+                  class="title_cell_content"
+                >
+                  <span
+                    class="title_cell_value"
+                  >
+                    Test Title 3
+                  </span>
+                  <span
+                    class="title_cell_buttons"
+                  >
+                    <button
+                      class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                      data-testid="add-to-queue"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="plus icon"
+                      />
+                    </button>
+                    <button
+                      class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                      data-testid="track-popup-trigger"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="ellipsis horizontal icon"
+                      />
+                    </button>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                Test Artist 3
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                Test Album
+              </div>
+              <div
+                class="grid_track_table_cell text_cell"
+                role="cell"
+              >
+                1:00
+              </div>
+              <div
+                class="selection_cell"
+                role="cell"
+              >
+                <div
+                  class="ui fitted checkbox nuclear checkbox"
+                  style="cursor: pointer;"
+                >
+                  <input
+                    class="hidden"
+                    readonly=""
+                    tabindex="-1"
+                    title="Toggle Row Selected"
+                    type="checkbox"
+                    value=""
+                  />
+                  <label />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/ui/test/gridTrackTable.test.tsx b/packages/ui/test/gridTrackTable.test.tsx
new file mode 100644
index 0000000000..f546b3263e
--- /dev/null
+++ b/packages/ui/test/gridTrackTable.test.tsx
@@ -0,0 +1,54 @@
+import { GridTrackTable } from '../lib';
+import { Track } from '../lib/types';
+import { makeSnapshotTest } from './helpers';
+
+jest.mock(
+  'react-virtualized-auto-sizer',
+  () =>
+    ({ children }) =>
+      children({ height: 600, width: 600 })
+);
+
+makeSnapshotTest(GridTrackTable, {
+  tracks: [],
+  positionHeader: 'Position',
+  thumbnailHeader: 'Thumbnail',
+  artistHeader: 'Artist',
+  albumHeader: 'Album',
+  titleHeader: 'Title',
+  durationHeader: 'Length'
+}, '(Snapshot) Grid track table - empty');
+
+makeSnapshotTest(GridTrackTable, {
+  tracks: [
+    {
+      position: 1, 
+      thumbnail: 'https://i.imgur.com/4euOws2.jpg', 
+      artist: 'Test Artist',
+      title: 'Test Title',
+      album: 'Test Album',
+      duration: '1:00'
+    }, {
+      position: 2, 
+      thumbnail: 'https://i.imgur.com/4euOws2.jpg', 
+      artist: 'Test Artist 2',
+      name: 'Test Title 2',
+      album: 'Test Album',
+      duration: '1:00'
+    } as Track,
+    {
+      position: 3, 
+      thumbnail: 'https://i.imgur.com/4euOws2.jpg', 
+      artist: {name: 'Test Artist 3' },
+      name: 'Test Title 3',
+      album: 'Test Album',
+      duration: '1:00'
+    } as Track
+  ],
+  positionHeader: 'Position',
+  thumbnailHeader: 'Thumbnail',
+  artistHeader: 'Artist',
+  albumHeader: 'Album',
+  titleHeader: 'Title',
+  durationHeader: 'Length'
+}, '(Snapshot) Grid track table - example data with all rows');
diff --git a/packages/ui/test/helpers.tsx b/packages/ui/test/helpers.tsx
index 61aa18f6af..82d1f30583 100644
--- a/packages/ui/test/helpers.tsx
+++ b/packages/ui/test/helpers.tsx
@@ -14,6 +14,6 @@ export const makeSnapshotTest = <ComponentProps extends {}>(
     it('should render correctly', () => {
       const { asFragment } = render(<Component {...props as ComponentProps} />);
       expect(asFragment()).toMatchSnapshot();
-    })
+    });
   });
-}
\ No newline at end of file
+};

From 2d5184b0d6da24530538c7b24e287f653ba553ce Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Thu, 5 Sep 2024 01:33:03 +0200
Subject: [PATCH 05/32] Tweaks for various places where the track table appears
 so that the autosizer can expand it to full size

---
 .../components/Dashboard/ChartsTab/index.tsx  |  2 +-
 .../Dashboard/ChartsTab/styles.scss           |  8 +++++++
 .../app/app/components/Dashboard/styles.scss  |  2 ++
 .../components/FavoriteTracksView/index.tsx   |  2 +-
 .../components/FavoriteTracksView/styles.scss | 21 ++++---------------
 .../TagView/TagTopTracks/styles.scss          |  5 +++++
 .../components/TrackTable/HistoryTable.tsx    |  3 +--
 7 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/app/app/components/Dashboard/ChartsTab/index.tsx b/packages/app/app/components/Dashboard/ChartsTab/index.tsx
index d6f753393a..1eaacd5dd6 100644
--- a/packages/app/app/components/Dashboard/ChartsTab/index.tsx
+++ b/packages/app/app/components/Dashboard/ChartsTab/index.tsx
@@ -26,7 +26,7 @@ const ChartsTab: React.FC<ChartsTabProps> = ({
 }) => {
   const { t } = useTranslation('dashboard');
   return (
-    <Tab.Pane attached={false}>
+    <Tab.Pane attached={false} className={styles.popular_tracks_tab}>
       <div
         className={styles.popular_tracks_container}
       >
diff --git a/packages/app/app/components/Dashboard/ChartsTab/styles.scss b/packages/app/app/components/Dashboard/ChartsTab/styles.scss
index 362483ecde..90a23a05f9 100644
--- a/packages/app/app/components/Dashboard/ChartsTab/styles.scss
+++ b/packages/app/app/components/Dashboard/ChartsTab/styles.scss
@@ -1,6 +1,14 @@
 @import "../../../vars";
 
+.active.tab.popular_tracks_tab {
+  display: flex;
+  flex-flow: column;
+  flex: 1 1 auto;
+}
+
 .popular_tracks_container {
+  flex: 1 1 auto;
+
   .popular_tracks_header {
     display: flex;
     flex-flow: row;
diff --git a/packages/app/app/components/Dashboard/styles.scss b/packages/app/app/components/Dashboard/styles.scss
index 1e6f74587a..27406b07e5 100644
--- a/packages/app/app/components/Dashboard/styles.scss
+++ b/packages/app/app/components/Dashboard/styles.scss
@@ -5,5 +5,7 @@
   .dashboard_tabs {
     position: relative;
     height: 100%;
+    display: flex;
+    flex-flow: column;
   }
 }
diff --git a/packages/app/app/components/FavoriteTracksView/index.tsx b/packages/app/app/components/FavoriteTracksView/index.tsx
index 96b4dd92fa..b1370066a0 100644
--- a/packages/app/app/components/FavoriteTracksView/index.tsx
+++ b/packages/app/app/components/FavoriteTracksView/index.tsx
@@ -59,7 +59,7 @@ const FavoriteTracksView: React.FC<FavoriteTracksViewProps> = ({
                   />
                 }/>
             </Header>
-            <Segment>
+            <Segment className={styles.favorite_tracks_segment}>
               <TrackTableContainer 
                 tracks={tracks}
                 onDelete={removeFavoriteTrack}
diff --git a/packages/app/app/components/FavoriteTracksView/styles.scss b/packages/app/app/components/FavoriteTracksView/styles.scss
index cff737e741..87857c5aa9 100644
--- a/packages/app/app/components/FavoriteTracksView/styles.scss
+++ b/packages/app/app/components/FavoriteTracksView/styles.scss
@@ -10,28 +10,15 @@
     @include emptyState;
   }
 
+  .favorite_tracks_segment {
+    flex: 1 1 auto;
+  }
+
   .header_container {
     display: flex;
     justify-content: space-between;
   }
 
-  .button_container {
-    padding-top: 1rem;
-    margin-left: 1rem;
-    a {
-      padding: 0.375rem 2.5rem;
-    }
-  }
-
-  .play_button {
-    background: $pink;
-    color: $white;
-    border-radius: 1.5rem;
-    text-transform: uppercase;
-    display: inline-block;
-    margin: auto;
-  }
-
   .tracks_container {
     overflow: auto;
   }
diff --git a/packages/app/app/components/TagView/TagTopTracks/styles.scss b/packages/app/app/components/TagView/TagTopTracks/styles.scss
index ee0d6ca4d9..9d3aa3303a 100644
--- a/packages/app/app/components/TagView/TagTopTracks/styles.scss
+++ b/packages/app/app/components/TagView/TagTopTracks/styles.scss
@@ -5,6 +5,7 @@
   display: flex;
   flex-flow: column;
   width: 100%;
+  height: 510px;
 
   .track {
     transition: $short-duration;
@@ -22,6 +23,10 @@
     max-width: 50%;
   }
 
+  .track_table_wrapper {
+    margin-right: 1em;
+  }
+
   table {
     width: 100%;
   }
diff --git a/packages/ui/lib/components/TrackTable/HistoryTable.tsx b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
index 7d7d98c46f..9348b5f4b4 100644
--- a/packages/ui/lib/components/TrackTable/HistoryTable.tsx
+++ b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
@@ -5,7 +5,6 @@ import TrackTable, { TrackTableProps } from '.';
 import { Track } from '../../types';
 import DateCell from './Cells/DateCell';
 import { TrackTableColumn } from './types';
-import { GridTrackTable } from '../GridTrackTable';
 import { Column } from 'react-table';
 import { TextHeader } from '../GridTrackTable/Headers/TextHeader';
 
@@ -26,7 +25,7 @@ const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, dateHeader, ...prop
     columnnWidth: '3em'
   } as Column<HistoryTableTrack>], []);
 
-  return <GridTrackTable
+  return <TrackTable
     className={styles.history_table}
     tracks={tracks}
     customColumns={customColumns}

From 5bed0adafa29f98a00f5f90a8b6cac05b6f18d67 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Sun, 8 Sep 2024 00:09:03 +0200
Subject: [PATCH 06/32] Fix types for al track table-related structures

---
 .../ArtistView/PopularTracks/index.tsx        |  2 +-
 .../GridTrackTable/Cells/SelectionCell.tsx    | 29 ++++++++------
 .../GridTrackTable/Headers/TextHeader.tsx     |  4 +-
 .../lib/components/GridTrackTable/index.tsx   | 39 +++++++++++--------
 .../TrackTable/Cells/SelectionCell.tsx        | 22 ++++++-----
 .../components/TrackTable/HistoryTable.tsx    |  7 +++-
 6 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
index bf6adc2d8a..f5408adabe 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.tsx
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -71,7 +71,7 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const customColumns = useMemo(() => [{
     id: PlaycountColumnId,
     Header: t('count'),
-    accessor: 'playcount',
+    accessor: (track: Track) => track.playcount,
     Cell: ({value, ...rest}: CellProps<Track, string>) => <TrackTableCell value={Number(value).toLocaleString()} {...rest} />
   }], []);
 
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
index aeee72c7ac..ddfb35968e 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
@@ -1,20 +1,27 @@
 import React from 'react';
-import { CellProps, UseRowSelectRowProps } from 'react-table';
+import { Cell, CellProps, UseRowSelectRowProps } from 'react-table';
 
 import { Track } from '../../../types';
 import Checkbox, { CheckboxProps } from '../../Checkbox';
 import styles from '../styles.scss';
+import { TrackTableRow } from '..';
 
-export const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> = ({
+type SelectionCellProps<T extends Track> = {
+  cell: Cell<T>;
+  row: TrackTableRow<T>;
+}
+
+export const SelectionCell = <T extends Track>({
   cell, 
   row
-}) => <div
-  {...cell.getCellProps()}
-  className={styles.selection_cell}
->
-  <Checkbox
-    {...(row.getToggleRowSelectedProps() as unknown as CheckboxProps)} 
-    tabIndex={-1}
-  />
-</div>;
+}: SelectionCellProps<T>) => {
+  return <div
+    {...cell.getCellProps()}
+    className={styles.selection_cell}
+  >
+    <Checkbox
+      {...(row.getToggleRowSelectedProps() as unknown as CheckboxProps)}
+      tabIndex={-1} />
+  </div>;
+};
 
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
index 3fda494394..565689fe48 100644
--- a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
@@ -6,7 +6,7 @@ import cx from 'classnames';
 import { Track } from '../../../types';
 import styles from '../styles.scss';
 
-type TextHeaderProps<T extends Track> = {
+export type TextHeaderProps<T extends Track> = {
   className?: string;
   column: ColumnInstance<T> & UseSortByColumnProps<T>;
   header: string | React.ReactNode;
@@ -29,7 +29,7 @@ export const TextHeader: <T extends Track>(props: TextHeaderProps<T>) => React.R
     <div className={cx(className, styles.text_header, {
       [styles.centered]: isCentered
     })} data-testid={dataTestId}>
-      {header}
+      { header }
       {
         isSorted &&
           <Icon className={styles.text_header_icon} name={name} />
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 2a4545c4b0..5c21a0efa0 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -1,6 +1,6 @@
-import { Column, Row, TableInstance, TableOptions, TableState, UseGlobalFiltersInstanceProps, UseSortByInstanceProps, UseSortByState, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table';
-import React, { useMemo, memo, useState } from 'react';
-import { DragDropContext, DragDropContextProps, Draggable, Droppable } from 'react-beautiful-dnd';
+import { Column, ColumnInstance, HeaderGroup, Row, TableInstance, TableState, UseGlobalFiltersInstanceProps, UseRowSelectInstanceProps, UseRowSelectRowProps, UseSortByColumnProps, UseSortByInstanceProps, UseSortByState, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table';
+import React, { useMemo, useState } from 'react';
+import { DragDropContext, DragDropContextProps, Droppable } from 'react-beautiful-dnd';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -32,12 +32,17 @@ export type GridTrackTableProps<T extends Track> = {
   isTrackFavorite: (track: T) => boolean;
   onDragEnd?: DragDropContextProps['onDragEnd'];
   strings: TrackTableStrings;
-  customColumns?: (Column<T & { columnWidth: string; }>)[];
+  customColumns?: (ColumnWithWidth<T>)[];
 } & TrackTableHeaders 
   & TrackTableSettings 
   & TrackTableExtraProps<T>;
 
-  type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
+type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
+type TrackTableColumnInstance<T extends Track> = ColumnInstance<T> & UseSortByColumnProps<T>;
+type TrackTableHeaderGroup<T extends Track> = HeaderGroup<T> & UseSortByColumnProps<T>;
+type TrackTableInstance<T extends Track> = TableInstance<T> & UseGlobalFiltersInstanceProps<T> & UseSortByInstanceProps<T> & UseRowSelectInstanceProps<T>;
+type TrackTableState<T extends Track> = TableState<T> & UseSortByState<T>;
+export type TrackTableRow<T extends Track> = Row<T> & UseRowSelectRowProps<T>;
 
 export const GridTrackTable = <T extends Track>({ 
   className,
@@ -73,15 +78,15 @@ export const GridTrackTable = <T extends Track>({
       id: TrackTableColumn.Delete,
       Cell: DeleteCell,
       columnWidth: '3em'
-    },
+    } as Column<T>,
     displayPosition && {
       id: TrackTableColumn.Position,
       Header: ({ column }) => <TextHeader
-        column={column} 
+        column={column as TrackTableColumnInstance<Track>}
         header={positionHeader} 
         isCentered
       />,
-      accessor: 'position',
+      accessor: (track: T) => track.position, 
       Cell: PositionCell,
       enableSorting: true,
       columnWidth: '4em'
@@ -119,8 +124,8 @@ export const GridTrackTable = <T extends Track>({
     },
     displayAlbum && {
       id: TrackTableColumn.Album,
-      Header: ({ column }) => <TextHeader column={column} header={albumHeader} />,
-      accessor: 'album',
+      Header: ({ column }: { column: TrackTableColumnInstance<T> }) => <TextHeader column={column} header={albumHeader} />,
+      accessor: (track: T) => track.album,
       enableSorting: true,
       Cell: TextCell,
       columnWidth: '1fr'
@@ -154,7 +159,7 @@ export const GridTrackTable = <T extends Track>({
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
     sortBy: [{ id: TrackTableColumn.Position, desc: false }]
   };
-  const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T> & UseGlobalFiltersInstanceProps<T>);
+  const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect);
   const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
 
   const {
@@ -163,8 +168,10 @@ export const GridTrackTable = <T extends Track>({
     headerGroups, 
     rows, 
     prepareRow,
-    setGlobalFilter
-  } = table;
+    setGlobalFilter,
+    state: tableState,
+    selectedFlatRows
+  } = table as TrackTableInstance<T>;
 
   const onFilterClick = () => {
     setGlobalFilter('');
@@ -174,7 +181,7 @@ export const GridTrackTable = <T extends Track>({
   const gridTemplateColumns = columns.map((column: ColumnWithWidth<T>) => column.columnWidth ?? '1fr').join(' ');
 
   // Disabled when there are selected rows, or when sorted by anything other than position
-  const isDragDisabled = !onDragEnd || table.selectedFlatRows.length > 0 || table.state.sortBy[0]?.id !== TrackTableColumn.Position;
+  const isDragDisabled = !onDragEnd || selectedFlatRows.length > 0 || (tableState as TrackTableState<T>).sortBy[0]?.id !== TrackTableColumn.Position;
 
   return <div className={styles.track_table_wrapper}>
     {
@@ -213,11 +220,11 @@ export const GridTrackTable = <T extends Track>({
             {...headerGroup.getHeaderGroupProps()} 
           >
             {
-              headerGroup.headers.map(column => (
+              headerGroup.headers.map((column: TrackTableHeaderGroup<T>) => (
                 <div 
                   key={column.id}
                   className={styles.track_table_header_cell}
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  {...column.getHeaderProps((column).getSortByToggleProps())}
                 >
                   {column.render('Header', extraProps)}
                 </div>))
diff --git a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
index 1fde4ec8b6..3a96f53e2e 100644
--- a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { TdHTMLAttributes } from 'react';
+import React, { ChangeEvent, TdHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { CellProps, UseRowSelectRowProps } from 'react-table';
 
@@ -9,13 +9,17 @@ import styles from '../styles.scss';
 
 const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> = ({
   cell,
-  row
-}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.select_cell, styles.narrow)}>
-  {/* @ts-ignore */}
-  <Checkbox
-    {...row.getToggleRowSelectedProps()}
-    tabIndex={undefined}
-  />
-</td>;
+  row,
+  getToggleRowSelectedProps
+}) => {
+  const toggleRowSelectedProps = getToggleRowSelectedProps();
+  return <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.select_cell, styles.narrow)}>
+    <Checkbox 
+      {...toggleRowSelectedProps}
+      onChange={(e) => toggleRowSelectedProps.onChange(e as ChangeEvent<HTMLInputElement>)}
+      tabIndex={undefined} 
+    />
+  </td>;
+};
 
 export default SelectionCell;
diff --git a/packages/ui/lib/components/TrackTable/HistoryTable.tsx b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
index 9348b5f4b4..af4a30d618 100644
--- a/packages/ui/lib/components/TrackTable/HistoryTable.tsx
+++ b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
@@ -6,7 +6,7 @@ import { Track } from '../../types';
 import DateCell from './Cells/DateCell';
 import { TrackTableColumn } from './types';
 import { Column } from 'react-table';
-import { TextHeader } from '../GridTrackTable/Headers/TextHeader';
+import { TextHeader, TextHeaderProps } from '../GridTrackTable/Headers/TextHeader';
 
 export type HistoryTableTrack = Track & {
     createdAt: Date;
@@ -19,7 +19,10 @@ type HistoryTableProps = TrackTableProps<HistoryTableTrack> & {
 const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, dateHeader, ...props }) => {
   const customColumns = useMemo(() => [{
     id: TrackTableColumn.Date,
-    Header: ({ column }) => <TextHeader  column={column} header={dateHeader} />,
+    Header: ({ column }) => <TextHeader 
+      column={column as TextHeaderProps<HistoryTableTrack>['column']} 
+      header={dateHeader} 
+    />,
     accessor: (track: HistoryTableTrack) => track.createdAt.toLocaleString(),
     Cell: DateCell,
     columnnWidth: '3em'

From 6f9213dd921e9b2ad9690c9d9d35af6f0d8c5cce Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Sun, 8 Sep 2024 00:19:24 +0200
Subject: [PATCH 07/32] Update snapshots

---
 .../__mocks__/react-virtualized-auto-sizer.ts |    2 +
 .../app/app/components/PlayQueue/index.tsx    |    2 +-
 .../AlbumViewContainer.test.tsx.snap          |  625 +++++-----
 .../ArtistViewContainer.test.tsx.snap         |  553 ++++-----
 .../DashboardContainer.test.tsx.snap          |  532 +++++----
 .../DeezerPlaylistAdapter.test.tsx.snap       |  497 ++++----
 .../FavoritesContainer.tracks.test.tsx.snap   | 1002 +++++++++--------
 .../LibraryViewContainer.test.tsx.snap        |  866 +++++++-------
 .../PlayQueueContainer.test.tsx               |    7 -
 .../PlaylistViewContainer.test.tsx.snap       |  574 +++++-----
 .../SpotifyPlaylistAdapter.test.tsx.snap      |  530 +++++----
 11 files changed, 2733 insertions(+), 2457 deletions(-)
 create mode 100644 packages/app/__mocks__/react-virtualized-auto-sizer.ts

diff --git a/packages/app/__mocks__/react-virtualized-auto-sizer.ts b/packages/app/__mocks__/react-virtualized-auto-sizer.ts
new file mode 100644
index 0000000000..1b8f2826e6
--- /dev/null
+++ b/packages/app/__mocks__/react-virtualized-auto-sizer.ts
@@ -0,0 +1,2 @@
+export default ({ children }) =>
+  children({ height: 600, width: 600 });
diff --git a/packages/app/app/components/PlayQueue/index.tsx b/packages/app/app/components/PlayQueue/index.tsx
index 3ba385792b..e39df7c9fb 100644
--- a/packages/app/app/components/PlayQueue/index.tsx
+++ b/packages/app/app/components/PlayQueue/index.tsx
@@ -5,6 +5,7 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { TFunction, useTranslation } from 'react-i18next';
 import { Icon } from 'semantic-ui-react';
 import { areEqual, FixedSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { Playlist } from '@nuclear/core';
 import { StreamData } from '@nuclear/core/src/plugins/plugins.types';
@@ -20,7 +21,6 @@ import QueuePopupContainer from '../../containers/QueuePopupContainer';
 import { StreamVerificationContainer } from '../../containers/StreamVerificationContainer';
 
 import styles from './styles.scss';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import { QueueItemClone } from './QueueItemClone';
 
 type PlayQueueProps = {
diff --git a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
index d6a6154074..913f577966 100644
--- a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
@@ -121,23 +121,27 @@ exports[`Album view container should display an album 1`] = `
           <div
             class="track_table_wrapper"
           >
-            <table
-              class="track_table"
+            <div
+              class="grid_track_table"
               role="table"
             >
-              <thead>
-                <tr
+              <div
+                class="track_table_head"
+              >
+                <div
+                  class="track_table_header_row"
                   role="row"
+                  style="grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em auto;"
                 >
-                  <th
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    <span
-                      class="title_with_icon"
-                      data-testid="position-header"
+                    <div
+                      class="text_header centered"
                     >
                       <i
                         aria-hidden="true"
@@ -145,48 +149,52 @@ exports[`Album view container should display an album 1`] = `
                       />
                       <i
                         aria-hidden="true"
-                        class="sort content ascending icon"
+                        class="sort content ascending icon text_header_icon"
                       />
-                    </span>
-                  </th>
-                  <th
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
                      
-                  </th>
-                  <th
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    <span
-                      class="title_with_icon"
+                    <div
+                      class="text_header"
                     >
                       Title
-                      <i
-                        aria-hidden="true"
-                        class="sort content ascending disabled icon"
-                      />
-                    </span>
-                  </th>
-                  <th
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    Length
-                  </th>
-                  <th
+                    <div
+                      class="text_header"
+                    >
+                      Length
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                   >
-                    <span
-                      class="select_header"
+                    <div
+                      class="selection_header"
                     >
                       <div
                         class="ui fitted checkbox nuclear checkbox"
@@ -202,324 +210,353 @@ exports[`Album view container should display an album 1`] = `
                         />
                         <label />
                       </div>
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_spacer"
+                    data-test-id="track-table-header-spacer"
+                  />
+                </div>
+              </div>
+              <div
+                class="track_table_body"
                 data-rbd-droppable-context-id="0"
                 data-rbd-droppable-id="track_table"
                 data-testid="track-table-body"
                 role="rowgroup"
               >
-                <tr
-                  class=""
-                  data-rbd-draggable-context-id="0"
-                  data-rbd-draggable-id="test track 1 0"
-                  data-testid="track-table-row"
-                  role="row"
+                <div
+                  class="track_table_virtualized_list"
+                  style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
                 >
-                  <td
-                    class="position_cell narrow"
-                    data-testid="position-cell"
-                    role="cell"
+                  <div
+                    style="height: 126px; width: 100%;"
                   >
-                    <button
-                      class="ui pink tiny circular icon button nuclear button add_button"
-                      data-testid="play-now"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="play icon"
-                      />
-                    </button>
-                    <span
-                      class="position_cell_value"
-                    >
-                      1
-                    </span>
-                  </td>
-                  <td
-                    class="favorite_cell narrow"
-                    role="cell"
-                  >
-                    <button
-                      class="ui tiny basic circular icon button nuclear button borderless"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="heart outline icon"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="title_cell"
-                    data-testid="title-cell"
-                    role="cell"
-                  >
-                    <span
-                      class="title_cell_content"
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="0"
+                      data-test-id="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
+                      tabindex="0"
                     >
-                      <span
-                        class="title_cell_value"
-                      >
-                        test track 1
-                      </span>
-                      <span
-                        class="title_cell_buttons"
+                      <div
+                        class="grid_track_table_cell position_cell"
+                        data-testid="position-cell"
+                        role="cell"
                       >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="add-to-queue"
+                          class="ui pink tiny circular icon button nuclear button play_button"
+                          data-testid="play-now"
                         >
                           <i
                             aria-hidden="true"
-                            class="plus icon"
+                            class="play icon"
                           />
                         </button>
+                        <span
+                          class="position_cell_value"
+                        >
+                          1
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell favorite_cell"
+                        data-testid="favorite-cell"
+                        role="cell"
+                      >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="track-popup-trigger"
+                          class="ui tiny basic circular icon button nuclear button borderless"
+                          data-testid="favorite-button"
                         >
                           <i
                             aria-hidden="true"
-                            class="ellipsis horizontal icon"
+                            class="heart outline icon"
                           />
                         </button>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    02:00
-                  </td>
-                  <td
-                    class="select_cell narrow"
-                    role="cell"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle Row Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
+                      >
+                        <span
+                          class="title_cell_content"
+                        >
+                          <span
+                            class="title_cell_value"
+                          >
+                            test track 1
+                          </span>
+                          <span
+                            class="title_cell_buttons"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        02:00
+                      </div>
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
+                          />
+                          <label />
+                        </div>
+                      </div>
                     </div>
-                  </td>
-                </tr>
-                <tr
-                  class=""
-                  data-rbd-draggable-context-id="0"
-                  data-rbd-draggable-id="test track 2 1"
-                  data-testid="track-table-row"
-                  role="row"
-                >
-                  <td
-                    class="position_cell narrow"
-                    data-testid="position-cell"
-                    role="cell"
-                  >
-                    <button
-                      class="ui pink tiny circular icon button nuclear button add_button"
-                      data-testid="play-now"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="play icon"
-                      />
-                    </button>
-                    <span
-                      class="position_cell_value"
-                    >
-                      2
-                    </span>
-                  </td>
-                  <td
-                    class="favorite_cell narrow"
-                    role="cell"
-                  >
-                    <button
-                      class="ui tiny basic circular icon button nuclear button borderless"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="heart outline icon"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="title_cell"
-                    data-testid="title-cell"
-                    role="cell"
-                  >
-                    <span
-                      class="title_cell_content"
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="1"
+                      data-test-id="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
+                      tabindex="1"
                     >
-                      <span
-                        class="title_cell_value"
-                      >
-                        test track 2
-                      </span>
-                      <span
-                        class="title_cell_buttons"
+                      <div
+                        class="grid_track_table_cell position_cell"
+                        data-testid="position-cell"
+                        role="cell"
                       >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="add-to-queue"
+                          class="ui pink tiny circular icon button nuclear button play_button"
+                          data-testid="play-now"
                         >
                           <i
                             aria-hidden="true"
-                            class="plus icon"
+                            class="play icon"
                           />
                         </button>
+                        <span
+                          class="position_cell_value"
+                        >
+                          2
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell favorite_cell"
+                        data-testid="favorite-cell"
+                        role="cell"
+                      >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="track-popup-trigger"
+                          class="ui tiny basic circular icon button nuclear button borderless"
+                          data-testid="favorite-button"
                         >
                           <i
                             aria-hidden="true"
-                            class="ellipsis horizontal icon"
+                            class="heart outline icon"
                           />
                         </button>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    01:03
-                  </td>
-                  <td
-                    class="select_cell narrow"
-                    role="cell"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle Row Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
+                      >
+                        <span
+                          class="title_cell_content"
+                        >
+                          <span
+                            class="title_cell_value"
+                          >
+                            test track 2
+                          </span>
+                          <span
+                            class="title_cell_buttons"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        01:03
+                      </div>
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
+                          />
+                          <label />
+                        </div>
+                      </div>
                     </div>
-                  </td>
-                </tr>
-                <tr
-                  class=""
-                  data-rbd-draggable-context-id="0"
-                  data-rbd-draggable-id="test track 3 2"
-                  data-testid="track-table-row"
-                  role="row"
-                >
-                  <td
-                    class="position_cell narrow"
-                    data-testid="position-cell"
-                    role="cell"
-                  >
-                    <button
-                      class="ui pink tiny circular icon button nuclear button add_button"
-                      data-testid="play-now"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="play icon"
-                      />
-                    </button>
-                    <span
-                      class="position_cell_value"
-                    >
-                      3
-                    </span>
-                  </td>
-                  <td
-                    class="favorite_cell narrow"
-                    role="cell"
-                  >
-                    <button
-                      class="ui tiny basic circular icon button nuclear button borderless"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="heart outline icon"
-                      />
-                    </button>
-                  </td>
-                  <td
-                    class="title_cell"
-                    data-testid="title-cell"
-                    role="cell"
-                  >
-                    <span
-                      class="title_cell_content"
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="2"
+                      data-test-id="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
+                      tabindex="2"
                     >
-                      <span
-                        class="title_cell_value"
-                      >
-                        test track 3
-                      </span>
-                      <span
-                        class="title_cell_buttons"
+                      <div
+                        class="grid_track_table_cell position_cell"
+                        data-testid="position-cell"
+                        role="cell"
                       >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="add-to-queue"
+                          class="ui pink tiny circular icon button nuclear button play_button"
+                          data-testid="play-now"
                         >
                           <i
                             aria-hidden="true"
-                            class="plus icon"
+                            class="play icon"
                           />
                         </button>
+                        <span
+                          class="position_cell_value"
+                        >
+                          3
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell favorite_cell"
+                        data-testid="favorite-cell"
+                        role="cell"
+                      >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="track-popup-trigger"
+                          class="ui tiny basic circular icon button nuclear button borderless"
+                          data-testid="favorite-button"
                         >
                           <i
                             aria-hidden="true"
-                            class="ellipsis horizontal icon"
+                            class="heart outline icon"
                           />
                         </button>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    00:07
-                  </td>
-                  <td
-                    class="select_cell narrow"
-                    role="cell"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle Row Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
+                      >
+                        <span
+                          class="title_cell_content"
+                        >
+                          <span
+                            class="title_cell_value"
+                          >
+                            test track 3
+                          </span>
+                          <span
+                            class="title_cell_buttons"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        00:07
+                      </div>
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
+                          />
+                          <label />
+                        </div>
+                      </div>
                     </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index aec47faeb1..dd65b7b57a 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -113,67 +113,72 @@ exports[`Artist view container should display an artist 1`] = `
             <div
               class="track_table_wrapper"
             >
-              <table
-                class="track_table"
+              <div
+                class="grid_track_table"
                 role="table"
               >
-                <thead>
-                  <tr
+                <div
+                  class="track_table_head"
+                >
+                  <div
+                    class="track_table_header_row"
                     role="row"
+                    style="grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
                   >
-                    <th
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
-                      <span
-                        class="center_aligned"
+                      <div
+                        class="text_header"
                       >
                         <i
                           aria-hidden="true"
                           class="image icon"
                         />
-                      </span>
-                    </th>
-                    <th
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
                        
-                    </th>
-                    <th
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
-                      <span
-                        class="title_with_icon"
+                      <div
+                        class="text_header"
                       >
                         Title
-                        <i
-                          aria-hidden="true"
-                          class="sort content ascending disabled icon"
-                        />
-                      </span>
-                    </th>
-                    <th
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
                       Playcount
-                    </th>
-                    <th
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                     >
-                      <span
-                        class="select_header"
+                      <div
+                        class="selection_header"
                       >
                         <div
                           class="ui fitted checkbox nuclear checkbox"
@@ -189,291 +194,305 @@ exports[`Artist view container should display an artist 1`] = `
                           />
                           <label />
                         </div>
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_spacer"
+                      data-test-id="track-table-header-spacer"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="track_table_body"
                   data-rbd-droppable-context-id="0"
                   data-rbd-droppable-id="track_table"
                   data-testid="track-table-body"
                   role="rowgroup"
                 >
-                  <tr
-                    class=""
-                    data-rbd-draggable-context-id="0"
-                    data-rbd-draggable-id="test artist top track 1 2"
-                    data-testid="track-table-row"
-                    role="row"
+                  <div
+                    class="track_table_virtualized_list"
+                    style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
                   >
-                    <td
-                      class="thumbnail_cell narrow"
-                      role="cell"
-                    >
-                      <img
-                        class="thumbnail"
-                        src="test-file-stub"
-                      />
-                    </td>
-                    <td
-                      class="favorite_cell narrow"
-                      role="cell"
-                    >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="heart outline icon"
-                        />
-                      </button>
-                    </td>
-                    <td
-                      class="title_cell"
-                      data-testid="title-cell"
-                      role="cell"
+                    <div
+                      style="height: 126px; width: 100%;"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_row"
+                        data-rbd-draggable-context-id="0"
+                        data-rbd-draggable-id="2"
+                        data-test-id="track-table-row"
+                        role="row"
+                        style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                        tabindex="2"
                       >
-                        <span
-                          class="title_cell_value"
+                        <div
+                          class="grid_track_table_cell thumbnail_cell"
+                          role="cell"
                         >
-                          test artist top track 1
-                        </span>
-                        <span
-                          class="title_cell_buttons"
+                          <img
+                            class="thumbnail_cell_thumbnail"
+                            src="test-file-stub"
+                          />
+                        </div>
+                        <div
+                          class="grid_track_table_cell favorite_cell"
+                          data-testid="favorite-cell"
+                          role="cell"
                         >
                           <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                            class="ui tiny basic circular icon button nuclear button borderless"
+                            data-testid="favorite-button"
                           >
                             <i
                               aria-hidden="true"
-                              class="plus icon"
+                              class="heart outline icon"
                             />
                           </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
+                        >
+                          <span
+                            class="title_cell_content"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
+                            <span
+                              class="title_cell_value"
+                            >
+                              test artist top track 1
+                            </span>
+                            <span
+                              class="title_cell_buttons"
+                            >
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
+                          </span>
+                        </div>
+                        6,900,237
+                        <div
+                          class="selection_cell"
+                          role="cell"
+                        >
+                          <div
+                            class="ui fitted checkbox nuclear checkbox"
+                            style="cursor: pointer;"
+                          >
+                            <input
+                              class="hidden"
+                              readonly=""
+                              tabindex="-1"
+                              title="Toggle Row Selected"
+                              type="checkbox"
+                              value=""
                             />
-                          </button>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      role="cell"
-                    >
-                      6,900,237
-                    </td>
-                    <td
-                      class="select_cell narrow"
-                      role="cell"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="0"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
+                            <label />
+                          </div>
+                        </div>
                       </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class=""
-                    data-rbd-draggable-context-id="0"
-                    data-rbd-draggable-id="test artist top track 2 1"
-                    data-testid="track-table-row"
-                    role="row"
-                  >
-                    <td
-                      class="thumbnail_cell narrow"
-                      role="cell"
-                    >
-                      <img
-                        class="thumbnail"
-                        src="test-file-stub"
-                      />
-                    </td>
-                    <td
-                      class="favorite_cell narrow"
-                      role="cell"
-                    >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="heart outline icon"
-                        />
-                      </button>
-                    </td>
-                    <td
-                      class="title_cell"
-                      data-testid="title-cell"
-                      role="cell"
-                    >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_row"
+                        data-rbd-draggable-context-id="0"
+                        data-rbd-draggable-id="1"
+                        data-test-id="track-table-row"
+                        role="row"
+                        style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                        tabindex="1"
                       >
-                        <span
-                          class="title_cell_value"
+                        <div
+                          class="grid_track_table_cell thumbnail_cell"
+                          role="cell"
                         >
-                          test artist top track 2
-                        </span>
-                        <span
-                          class="title_cell_buttons"
+                          <img
+                            class="thumbnail_cell_thumbnail"
+                            src="test-file-stub"
+                          />
+                        </div>
+                        <div
+                          class="grid_track_table_cell favorite_cell"
+                          data-testid="favorite-cell"
+                          role="cell"
                         >
                           <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                            class="ui tiny basic circular icon button nuclear button borderless"
+                            data-testid="favorite-button"
                           >
                             <i
                               aria-hidden="true"
-                              class="plus icon"
+                              class="heart outline icon"
                             />
                           </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
+                        >
+                          <span
+                            class="title_cell_content"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
+                            <span
+                              class="title_cell_value"
+                            >
+                              test artist top track 2
+                            </span>
+                            <span
+                              class="title_cell_buttons"
+                            >
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
+                          </span>
+                        </div>
+                        6,969
+                        <div
+                          class="selection_cell"
+                          role="cell"
+                        >
+                          <div
+                            class="ui fitted checkbox nuclear checkbox"
+                            style="cursor: pointer;"
+                          >
+                            <input
+                              class="hidden"
+                              readonly=""
+                              tabindex="-1"
+                              title="Toggle Row Selected"
+                              type="checkbox"
+                              value=""
                             />
-                          </button>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      role="cell"
-                    >
-                      6,969
-                    </td>
-                    <td
-                      class="select_cell narrow"
-                      role="cell"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="0"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
+                            <label />
+                          </div>
+                        </div>
                       </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class=""
-                    data-rbd-draggable-context-id="0"
-                    data-rbd-draggable-id="test artist top track 3 0"
-                    data-testid="track-table-row"
-                    role="row"
-                  >
-                    <td
-                      class="thumbnail_cell narrow"
-                      role="cell"
-                    >
-                      <img
-                        class="thumbnail"
-                        src="test-file-stub"
-                      />
-                    </td>
-                    <td
-                      class="favorite_cell narrow"
-                      role="cell"
-                    >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="heart outline icon"
-                        />
-                      </button>
-                    </td>
-                    <td
-                      class="title_cell"
-                      data-testid="title-cell"
-                      role="cell"
-                    >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_row"
+                        data-rbd-draggable-context-id="0"
+                        data-rbd-draggable-id="0"
+                        data-test-id="track-table-row"
+                        role="row"
+                        style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                        tabindex="0"
                       >
-                        <span
-                          class="title_cell_value"
+                        <div
+                          class="grid_track_table_cell thumbnail_cell"
+                          role="cell"
                         >
-                          test artist top track 3
-                        </span>
-                        <span
-                          class="title_cell_buttons"
+                          <img
+                            class="thumbnail_cell_thumbnail"
+                            src="test-file-stub"
+                          />
+                        </div>
+                        <div
+                          class="grid_track_table_cell favorite_cell"
+                          data-testid="favorite-cell"
+                          role="cell"
                         >
                           <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                            class="ui tiny basic circular icon button nuclear button borderless"
+                            data-testid="favorite-button"
                           >
                             <i
                               aria-hidden="true"
-                              class="plus icon"
+                              class="heart outline icon"
                             />
                           </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
+                        >
+                          <span
+                            class="title_cell_content"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
+                            <span
+                              class="title_cell_value"
+                            >
+                              test artist top track 3
+                            </span>
+                            <span
+                              class="title_cell_buttons"
+                            >
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
+                          </span>
+                        </div>
+                        1
+                        <div
+                          class="selection_cell"
+                          role="cell"
+                        >
+                          <div
+                            class="ui fitted checkbox nuclear checkbox"
+                            style="cursor: pointer;"
+                          >
+                            <input
+                              class="hidden"
+                              readonly=""
+                              tabindex="-1"
+                              title="Toggle Row Selected"
+                              type="checkbox"
+                              value=""
                             />
-                          </button>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      role="cell"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="select_cell narrow"
-                      role="cell"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="0"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
+                            <label />
+                          </div>
+                        </div>
                       </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div
               class="expand_button"
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
index 812ab420cc..3a0451dc0a 100644
--- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
+++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
@@ -549,7 +549,7 @@ exports[`Dashboard container should display top tracks after going to top tracks
           </a>
         </div>
         <div
-          class="ui segment active tab"
+          class="ui segment active tab popular_tracks_tab"
         >
           <div
             class="popular_tracks_container"
@@ -564,23 +564,27 @@ exports[`Dashboard container should display top tracks after going to top tracks
             <div
               class="track_table_wrapper"
             >
-              <table
-                class="track_table"
+              <div
+                class="grid_track_table"
                 role="table"
               >
-                <thead>
-                  <tr
+                <div
+                  class="track_table_head"
+                >
+                  <div
+                    class="track_table_header_row"
                     role="row"
+                    style="grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em auto;"
                   >
-                    <th
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
-                      <span
-                        class="title_with_icon"
-                        data-testid="position-header"
+                      <div
+                        class="text_header centered"
                       >
                         <i
                           aria-hidden="true"
@@ -588,79 +592,81 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         />
                         <i
                           aria-hidden="true"
-                          class="sort content ascending icon"
+                          class="sort content ascending icon text_header_icon"
                         />
-                      </span>
-                    </th>
-                    <th
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
-                      <span
-                        class="center_aligned"
+                      <div
+                        class="text_header"
                       >
                         <i
                           aria-hidden="true"
                           class="image icon"
                         />
-                      </span>
-                    </th>
-                    <th
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
                        
-                    </th>
-                    <th
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
-                      <span
-                        class="title_with_icon"
+                      <div
+                        class="text_header"
                       >
                         Title
-                        <i
-                          aria-hidden="true"
-                          class="sort content ascending disabled icon"
-                        />
-                      </span>
-                    </th>
-                    <th
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
-                      <span
-                        class="title_with_icon"
+                      <div
+                        class="text_header"
                       >
                         Artist
-                        <i
-                          aria-hidden="true"
-                          class="sort content ascending disabled icon"
-                        />
-                      </span>
-                    </th>
-                    <th
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                       style="cursor: pointer;"
                       title="Toggle SortBy"
                     >
-                      Length
-                    </th>
-                    <th
+                      <div
+                        class="text_header"
+                      >
+                        Length
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_cell"
                       colspan="1"
                       role="columnheader"
                     >
-                      <span
-                        class="select_header"
+                      <div
+                        class="selection_header"
                       >
                         <div
                           class="ui fitted checkbox nuclear checkbox"
@@ -676,250 +682,276 @@ exports[`Dashboard container should display top tracks after going to top tracks
                           />
                           <label />
                         </div>
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
+                      </div>
+                    </div>
+                    <div
+                      class="track_table_header_spacer"
+                      data-test-id="track-table-header-spacer"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="track_table_body"
                   data-rbd-droppable-context-id="0"
                   data-rbd-droppable-id="track_table"
                   data-testid="track-table-body"
                   role="rowgroup"
                 >
-                  <tr
-                    class=""
-                    data-rbd-draggable-context-id="0"
-                    data-rbd-draggable-id="top track 1 0"
-                    data-testid="track-table-row"
-                    role="row"
+                  <div
+                    class="track_table_virtualized_list"
+                    style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
                   >
-                    <td
-                      class="position_cell narrow"
-                      data-testid="position-cell"
-                      role="cell"
-                    >
-                      <button
-                        class="ui pink tiny circular icon button nuclear button add_button"
-                        data-testid="play-now"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="play icon"
-                        />
-                      </button>
-                      <span
-                        class="position_cell_value"
-                      >
-                        1
-                      </span>
-                    </td>
-                    <td
-                      class="thumbnail_cell narrow"
-                      role="cell"
-                    >
-                      <img
-                        class="thumbnail"
-                        src="top track album cover 1"
-                      />
-                    </td>
-                    <td
-                      class="favorite_cell narrow"
-                      role="cell"
-                    >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="heart outline icon"
-                        />
-                      </button>
-                    </td>
-                    <td
-                      class="title_cell"
-                      data-testid="title-cell"
-                      role="cell"
+                    <div
+                      style="height: 84px; width: 100%;"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_row"
+                        data-rbd-draggable-context-id="0"
+                        data-rbd-draggable-id="0"
+                        data-test-id="track-table-row"
+                        role="row"
+                        style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
+                        tabindex="0"
                       >
-                        <span
-                          class="title_cell_value"
-                        >
-                          top track 1
-                        </span>
-                        <span
-                          class="title_cell_buttons"
+                        <div
+                          class="grid_track_table_cell position_cell"
+                          data-testid="position-cell"
+                          role="cell"
                         >
                           <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                            class="ui pink tiny circular icon button nuclear button play_button"
+                            data-testid="play-now"
                           >
                             <i
                               aria-hidden="true"
-                              class="plus icon"
+                              class="play icon"
                             />
                           </button>
+                          <span
+                            class="position_cell_value"
+                          >
+                            1
+                          </span>
+                        </div>
+                        <div
+                          class="grid_track_table_cell thumbnail_cell"
+                          role="cell"
+                        >
+                          <img
+                            class="thumbnail_cell_thumbnail"
+                            src="top track album cover 1"
+                          />
+                        </div>
+                        <div
+                          class="grid_track_table_cell favorite_cell"
+                          data-testid="favorite-cell"
+                          role="cell"
+                        >
                           <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            class="ui tiny basic circular icon button nuclear button borderless"
+                            data-testid="favorite-button"
                           >
                             <i
                               aria-hidden="true"
-                              class="ellipsis horizontal icon"
+                              class="heart outline icon"
                             />
                           </button>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      role="cell"
-                    >
-                      top track artist 1
-                    </td>
-                    <td
-                      role="cell"
-                    >
-                      01:40
-                    </td>
-                    <td
-                      class="select_cell narrow"
-                      role="cell"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="0"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
+                        >
+                          <span
+                            class="title_cell_content"
+                          >
+                            <span
+                              class="title_cell_value"
+                            >
+                              top track 1
+                            </span>
+                            <span
+                              class="title_cell_buttons"
+                            >
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
+                          </span>
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell"
+                          role="cell"
+                        >
+                          top track artist 1
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell"
+                          role="cell"
+                        >
+                          01:40
+                        </div>
+                        <div
+                          class="selection_cell"
+                          role="cell"
+                        >
+                          <div
+                            class="ui fitted checkbox nuclear checkbox"
+                            style="cursor: pointer;"
+                          >
+                            <input
+                              class="hidden"
+                              readonly=""
+                              tabindex="-1"
+                              title="Toggle Row Selected"
+                              type="checkbox"
+                              value=""
+                            />
+                            <label />
+                          </div>
+                        </div>
                       </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class=""
-                    data-rbd-draggable-context-id="0"
-                    data-rbd-draggable-id="top track 2 1"
-                    data-testid="track-table-row"
-                    role="row"
-                  >
-                    <td
-                      class="position_cell narrow"
-                      data-testid="position-cell"
-                      role="cell"
-                    >
-                      <button
-                        class="ui pink tiny circular icon button nuclear button add_button"
-                        data-testid="play-now"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="play icon"
-                        />
-                      </button>
-                      <span
-                        class="position_cell_value"
-                      >
-                        2
-                      </span>
-                    </td>
-                    <td
-                      class="thumbnail_cell narrow"
-                      role="cell"
-                    >
-                      <img
-                        class="thumbnail"
-                        src="top track album cover 2"
-                      />
-                    </td>
-                    <td
-                      class="favorite_cell narrow"
-                      role="cell"
-                    >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="heart outline icon"
-                        />
-                      </button>
-                    </td>
-                    <td
-                      class="title_cell"
-                      data-testid="title-cell"
-                      role="cell"
-                    >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_row"
+                        data-rbd-draggable-context-id="0"
+                        data-rbd-draggable-id="1"
+                        data-test-id="track-table-row"
+                        role="row"
+                        style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
+                        tabindex="1"
                       >
-                        <span
-                          class="title_cell_value"
-                        >
-                          top track 2
-                        </span>
-                        <span
-                          class="title_cell_buttons"
+                        <div
+                          class="grid_track_table_cell position_cell"
+                          data-testid="position-cell"
+                          role="cell"
                         >
                           <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                            class="ui pink tiny circular icon button nuclear button play_button"
+                            data-testid="play-now"
                           >
                             <i
                               aria-hidden="true"
-                              class="plus icon"
+                              class="play icon"
                             />
                           </button>
+                          <span
+                            class="position_cell_value"
+                          >
+                            2
+                          </span>
+                        </div>
+                        <div
+                          class="grid_track_table_cell thumbnail_cell"
+                          role="cell"
+                        >
+                          <img
+                            class="thumbnail_cell_thumbnail"
+                            src="top track album cover 2"
+                          />
+                        </div>
+                        <div
+                          class="grid_track_table_cell favorite_cell"
+                          data-testid="favorite-cell"
+                          role="cell"
+                        >
                           <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            class="ui tiny basic circular icon button nuclear button borderless"
+                            data-testid="favorite-button"
                           >
                             <i
                               aria-hidden="true"
-                              class="ellipsis horizontal icon"
+                              class="heart outline icon"
                             />
                           </button>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      role="cell"
-                    >
-                      top track artist 2
-                    </td>
-                    <td
-                      role="cell"
-                    >
-                      01:18
-                    </td>
-                    <td
-                      class="select_cell narrow"
-                      role="cell"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="0"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
+                        >
+                          <span
+                            class="title_cell_content"
+                          >
+                            <span
+                              class="title_cell_value"
+                            >
+                              top track 2
+                            </span>
+                            <span
+                              class="title_cell_buttons"
+                            >
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
+                          </span>
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell"
+                          role="cell"
+                        >
+                          top track artist 2
+                        </div>
+                        <div
+                          class="grid_track_table_cell text_cell"
+                          role="cell"
+                        >
+                          01:18
+                        </div>
+                        <div
+                          class="selection_cell"
+                          role="cell"
+                        >
+                          <div
+                            class="ui fitted checkbox nuclear checkbox"
+                            style="cursor: pointer;"
+                          >
+                            <input
+                              class="hidden"
+                              readonly=""
+                              tabindex="-1"
+                              title="Toggle Row Selected"
+                              type="checkbox"
+                              value=""
+                            />
+                            <label />
+                          </div>
+                        </div>
                       </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
index 2aba0cf9a4..1d5d972bd0 100644
--- a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
@@ -107,23 +107,27 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
               />
             </button>
           </div>
-          <table
-            class="track_table"
+          <div
+            class="grid_track_table"
             role="table"
           >
-            <thead>
-              <tr
+            <div
+              class="track_table_head"
+            >
+              <div
+                class="track_table_header_row"
                 role="row"
+                style="grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
               >
-                <th
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
-                    data-testid="position-header"
+                  <div
+                    class="text_header centered"
                   >
                     <i
                       aria-hidden="true"
@@ -131,71 +135,68 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     />
                     <i
                       aria-hidden="true"
-                      class="sort content ascending icon"
+                      class="sort content ascending icon text_header_icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="center_aligned"
+                  <div
+                    class="text_header"
                   >
                     <i
                       aria-hidden="true"
                       class="image icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
                    
-                </th>
-                <th
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Title
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Artist
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                  <span
-                    class="select_header"
+                  <div
+                    class="selection_header"
                   >
                     <div
                       class="ui fitted checkbox nuclear checkbox"
@@ -211,240 +212,264 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                       />
                       <label />
                     </div>
-                  </span>
-                </th>
-              </tr>
-            </thead>
-            <tbody
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_spacer"
+                  data-test-id="track-table-header-spacer"
+                />
+              </div>
+            </div>
+            <div
+              class="track_table_body"
               data-rbd-droppable-context-id="1"
               data-rbd-droppable-id="track_table"
               data-testid="track-table-body"
               role="rowgroup"
             >
-              <tr
-                class=""
-                data-rbd-draggable-context-id="1"
-                data-rbd-draggable-id="track 1 0"
-                data-testid="track-table-row"
-                role="row"
+              <div
+                class="track_table_virtualized_list"
+                style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
               >
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    1
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="test-file-stub"
-                  />
-                </td>
-                <td
-                  class="favorite_cell narrow"
-                  role="cell"
+                <div
+                  style="height: 84px; width: 100%;"
                 >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="heart outline icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
-                >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="1"
+                    data-rbd-draggable-id="0"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="0"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      track 1
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="play icon"
                         />
                       </button>
+                      <span
+                        class="position_cell_value"
+                      >
+                        1
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="test-file-stub"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell favorite_cell"
+                      data-testid="favorite-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="favorite-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="heart outline icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  artist 1
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          track 1
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      artist 1
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-              <tr
-                class=""
-                data-rbd-draggable-context-id="1"
-                data-rbd-draggable-id="track 2 1"
-                data-testid="track-table-row"
-                role="row"
-              >
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    2
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="test-file-stub"
-                  />
-                </td>
-                <td
-                  class="favorite_cell narrow"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="heart outline icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
-                >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="1"
+                    data-rbd-draggable-id="1"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="1"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      track 2
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="play icon"
                         />
                       </button>
+                      <span
+                        class="position_cell_value"
+                      >
+                        2
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="test-file-stub"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell favorite_cell"
+                      data-testid="favorite-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="favorite-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="heart outline icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  artist 2
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          track 2
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      artist 2
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
index b158cffc70..3bbf495bf0 100644
--- a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
+++ b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
@@ -196,7 +196,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
         </button>
       </div>
       <div
-        class="ui segment"
+        class="ui segment favorite_tracks_segment"
       >
         <div
           class="track_table_wrapper"
@@ -223,29 +223,34 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
               />
             </button>
           </div>
-          <table
-            class="track_table"
+          <div
+            class="grid_track_table"
             role="table"
           >
-            <thead>
-              <tr
+            <div
+              class="track_table_head"
+            >
+              <div
+                class="track_table_header_row"
                 role="row"
+                style="grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em auto;"
               >
-                <th
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
                    
-                </th>
-                <th
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
-                    data-testid="position-header"
+                  <div
+                    class="text_header centered"
                   >
                     <i
                       aria-hidden="true"
@@ -253,63 +258,59 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     />
                     <i
                       aria-hidden="true"
-                      class="sort content ascending icon"
+                      class="sort content ascending icon text_header_icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="center_aligned"
+                  <div
+                    class="text_header"
                   >
                     <i
                       aria-hidden="true"
                       class="image icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Title
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Artist
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                  <span
-                    class="select_header"
+                  <div
+                    class="selection_header"
                   >
                     <div
                       class="ui fitted checkbox nuclear checkbox"
@@ -325,242 +326,264 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                       />
                       <label />
                     </div>
-                  </span>
-                </th>
-              </tr>
-            </thead>
-            <tbody
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_spacer"
+                  data-test-id="track-table-header-spacer"
+                />
+              </div>
+            </div>
+            <div
+              class="track_table_body"
               data-rbd-droppable-context-id="0"
               data-rbd-droppable-id="track_table"
               data-testid="track-table-body"
               role="rowgroup"
             >
-              <tr
-                class=""
-                data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="test track 2 1"
-                data-testid="track-table-row"
-                role="row"
+              <div
+                class="track_table_virtualized_list"
+                style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
               >
-                <td
-                  class="narrow delete_cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                    data-testid="delete-button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="times icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    1
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="https://test-track-thumb-url"
-                  />
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
+                <div
+                  style="height: 84px; width: 100%;"
                 >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="0"
+                    data-rbd-draggable-id="1"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="1"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      test track 2
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="delete_cell"
+                      data-testid="delete-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="times icon"
                         />
                       </button>
+                    </div>
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="play icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  test artist 2
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                      <span
+                        class="position_cell_value"
+                      >
+                        1
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="https://test-track-thumb-url"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          test track 2
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      test artist 2
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-              <tr
-                class=""
-                data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="test track 1 0"
-                data-testid="track-table-row"
-                role="row"
-              >
-                <td
-                  class="narrow delete_cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                    data-testid="delete-button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="times icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    2
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="https://test-track-thumb-url"
-                  />
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
-                >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="0"
+                    data-rbd-draggable-id="0"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="0"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      test track 1
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="delete_cell"
+                      data-testid="delete-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="times icon"
                         />
                       </button>
+                    </div>
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="play icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  test artist 1
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                      <span
+                        class="position_cell_value"
+                      >
+                        2
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="https://test-track-thumb-url"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          test track 1
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      test artist 1
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -745,7 +768,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
         </button>
       </div>
       <div
-        class="ui segment"
+        class="ui segment favorite_tracks_segment"
       >
         <div
           class="track_table_wrapper"
@@ -772,29 +795,34 @@ exports[`Favorite tracks view container should show a popup when a track is clic
               />
             </button>
           </div>
-          <table
-            class="track_table"
+          <div
+            class="grid_track_table"
             role="table"
           >
-            <thead>
-              <tr
+            <div
+              class="track_table_head"
+            >
+              <div
+                class="track_table_header_row"
                 role="row"
+                style="grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em auto;"
               >
-                <th
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
                    
-                </th>
-                <th
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
-                    data-testid="position-header"
+                  <div
+                    class="text_header centered"
                   >
                     <i
                       aria-hidden="true"
@@ -802,63 +830,59 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     />
                     <i
                       aria-hidden="true"
-                      class="sort content ascending icon"
+                      class="sort content ascending icon text_header_icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="center_aligned"
+                  <div
+                    class="text_header"
                   >
                     <i
                       aria-hidden="true"
                       class="image icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Title
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Artist
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                  <span
-                    class="select_header"
+                  <div
+                    class="selection_header"
                   >
                     <div
                       class="ui fitted checkbox nuclear checkbox"
@@ -874,242 +898,264 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                       />
                       <label />
                     </div>
-                  </span>
-                </th>
-              </tr>
-            </thead>
-            <tbody
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_spacer"
+                  data-test-id="track-table-header-spacer"
+                />
+              </div>
+            </div>
+            <div
+              class="track_table_body"
               data-rbd-droppable-context-id="2"
               data-rbd-droppable-id="track_table"
               data-testid="track-table-body"
               role="rowgroup"
             >
-              <tr
-                class=""
-                data-rbd-draggable-context-id="2"
-                data-rbd-draggable-id="test track 2 1"
-                data-testid="track-table-row"
-                role="row"
+              <div
+                class="track_table_virtualized_list"
+                style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
               >
-                <td
-                  class="narrow delete_cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                    data-testid="delete-button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="times icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    1
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="https://test-track-thumb-url"
-                  />
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
+                <div
+                  style="height: 84px; width: 100%;"
                 >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="2"
+                    data-rbd-draggable-id="1"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="1"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      test track 2
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="delete_cell"
+                      data-testid="delete-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="times icon"
                         />
                       </button>
+                    </div>
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="play icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  test artist 2
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                      <span
+                        class="position_cell_value"
+                      >
+                        1
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="https://test-track-thumb-url"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          test track 2
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      test artist 2
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-              <tr
-                class=""
-                data-rbd-draggable-context-id="2"
-                data-rbd-draggable-id="test track 1 0"
-                data-testid="track-table-row"
-                role="row"
-              >
-                <td
-                  class="narrow delete_cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                    data-testid="delete-button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="times icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    2
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="https://test-track-thumb-url"
-                  />
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
-                >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="2"
+                    data-rbd-draggable-id="0"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="0"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      test track 1
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="delete_cell"
+                      data-testid="delete-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="times icon"
                         />
                       </button>
+                    </div>
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="play icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  test artist 1
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                      <span
+                        class="position_cell_value"
+                      >
+                        2
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="https://test-track-thumb-url"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          test track 1
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      test artist 1
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
index da5b40ea68..716701a7b1 100644
--- a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
@@ -565,98 +565,123 @@ exports[`Library view container should display local library in folder tree mode
             loading="false"
           />
           <div
-            style="overflow: visible; height: 0px; width: 0px;"
+            class="BaseTable BaseTable--expandable"
+            style="width: 600px; height: 600px; position: relative;"
           >
             <div
-              class="BaseTable BaseTable--expandable"
-              style="position: relative;"
+              class="BaseTable__table BaseTable__table-main"
+              role="table"
             >
               <div
-                class="BaseTable__table BaseTable__table-main"
-                role="table"
+                class="BaseTable__body"
+                style="position: relative; height: 550px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
               >
                 <div
-                  class="BaseTable__body"
-                  style="position: relative; overflow: auto; will-change: transform; direction: ltr;"
+                  style="height: 23px; width: 600px;"
                 >
                   <div
-                    style="height: 23px;"
-                  />
+                    class="BaseTable__row BaseTable__row--depth-0 BaseTable__row--customized"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 0px; height: 23px; width: 600px;"
+                  >
+                    <div
+                      class="BaseTable__row-cell"
+                      role="gridcell"
+                      style="flex: 2 1 auto; width: 0px; overflow: hidden;"
+                    >
+                      <div
+                        class="BaseTable__expand-icon"
+                        style="font-family: initial; cursor: pointer; user-select: none; width: 16px; min-width: 16px; height: 16px; line-height: 16px; font-size: 16px; text-align: center; transition: transform 0.15s ease-out; transform: rotate(0deg); margin-left: 0px;"
+                      >
+                        ▸
+                      </div>
+                      <div
+                        class="BaseTable__row-cell-text"
+                      >
+                        Music
+                      </div>
+                    </div>
+                    <div
+                      class="BaseTable__row-cell"
+                      role="gridcell"
+                      style="flex: 1 1 auto; width: 0px; overflow: hidden;"
+                    >
+                      <div
+                        class="BaseTable__row-cell-text"
+                      />
+                    </div>
+                    <div
+                      class="BaseTable__row-cell"
+                      role="gridcell"
+                      style="flex: 1 1 auto; width: 0px; overflow: hidden;"
+                    >
+                      <div
+                        class="BaseTable__row-cell-text"
+                      />
+                    </div>
+                  </div>
                 </div>
+              </div>
+              <div
+                class="BaseTable__header"
+                role="grid"
+                style="width: 600px; height: 50px; position: relative; overflow: hidden;"
+              >
                 <div
-                  class="BaseTable__header"
-                  role="grid"
-                  style="position: relative; overflow: hidden;"
+                  role="rowgroup"
+                  style="width: 600px; height: 50px;"
                 >
                   <div
-                    role="rowgroup"
+                    class="BaseTable__header-row"
+                    role="row"
+                    style="width: 100%; height: 50px;"
                   >
                     <div
-                      class="BaseTable__header-row"
-                      role="row"
-                      style="width: 100%; height: 50px;"
+                      class="BaseTable__header-cell"
+                      data-key="name"
+                      role="gridcell"
+                      style="flex: 2 1 auto; width: 0px; overflow: hidden;"
                     >
                       <div
-                        class="BaseTable__header-cell"
-                        data-key="name"
-                        role="gridcell"
-                        style="flex: 2 1 auto; width: 0px; overflow: hidden;"
+                        class="BaseTable__expand-icon"
+                        style="font-family: initial; cursor: pointer; user-select: none; width: 16px; min-width: 16px; height: 16px; line-height: 16px; font-size: 16px; text-align: center; transition: transform 0.15s ease-out; transform: rotate(0deg); margin-left: 0px;"
+                      />
+                      <div
+                        class="BaseTable__header-cell-text"
                       >
-                        <div
-                          class="BaseTable__expand-icon"
-                          style="font-family: initial; cursor: pointer; user-select: none; width: 16px; min-width: 16px; height: 16px; line-height: 16px; font-size: 16px; text-align: center; transition: transform 0.15s ease-out; transform: rotate(0deg); margin-left: 0px;"
-                        />
-                        <div
-                          class="BaseTable__header-cell-text"
-                        >
-                          Name
-                        </div>
+                        Name
                       </div>
+                    </div>
+                    <div
+                      class="BaseTable__header-cell"
+                      data-key="album"
+                      role="gridcell"
+                      style="flex: 1 1 auto; width: 0px; overflow: hidden;"
+                    >
                       <div
-                        class="BaseTable__header-cell"
-                        data-key="album"
-                        role="gridcell"
-                        style="flex: 1 1 auto; width: 0px; overflow: hidden;"
+                        class="BaseTable__header-cell-text"
                       >
-                        <div
-                          class="BaseTable__header-cell-text"
-                        >
-                          Album
-                        </div>
+                        Album
                       </div>
+                    </div>
+                    <div
+                      class="BaseTable__header-cell"
+                      data-key="artist"
+                      role="gridcell"
+                      style="flex: 1 1 auto; width: 0px; overflow: hidden;"
+                    >
                       <div
-                        class="BaseTable__header-cell"
-                        data-key="artist"
-                        role="gridcell"
-                        style="flex: 1 1 auto; width: 0px; overflow: hidden;"
+                        class="BaseTable__header-cell-text"
                       >
-                        <div
-                          class="BaseTable__header-cell-text"
-                        >
-                          Artist
-                        </div>
+                        Artist
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <div
-                class="BaseTable__overlay"
-              />
-            </div>
-          </div>
-          <div
-            class="resize-triggers"
-          >
-            <div
-              class="expand-trigger"
-            >
-              <div
-                style="width: 1px; height: 1px;"
-              />
             </div>
             <div
-              class="contract-trigger"
+              class="BaseTable__overlay"
             />
           </div>
         </div>
@@ -802,23 +827,27 @@ exports[`Library view container should display local library in simple list mode
           <div
             class="track_table_wrapper"
           >
-            <table
-              class="track_table"
+            <div
+              class="grid_track_table"
               role="table"
             >
-              <thead>
-                <tr
+              <div
+                class="track_table_head"
+              >
+                <div
+                  class="track_table_header_row"
                   role="row"
+                  style="grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em auto;"
                 >
-                  <th
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    <span
-                      class="title_with_icon"
-                      data-testid="position-header"
+                    <div
+                      class="text_header centered"
                     >
                       <i
                         aria-hidden="true"
@@ -826,79 +855,85 @@ exports[`Library view container should display local library in simple list mode
                       />
                       <i
                         aria-hidden="true"
-                        class="sort content ascending icon"
+                        class="sort content ascending icon text_header_icon"
                       />
-                    </span>
-                  </th>
-                  <th
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    <span
-                      class="center_aligned"
+                    <div
+                      class="text_header"
                     >
                       <i
                         aria-hidden="true"
                         class="image icon"
                       />
-                    </span>
-                  </th>
-                  <th
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    <span
-                      class="title_with_icon"
+                    <div
+                      class="text_header"
                     >
                       Title
-                      <i
-                        aria-hidden="true"
-                        class="sort content ascending disabled icon"
-                      />
-                    </span>
-                  </th>
-                  <th
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    <span
-                      class="title_with_icon"
+                    <div
+                      class="text_header"
                     >
                       Artist
-                      <i
-                        aria-hidden="true"
-                        class="sort content ascending disabled icon"
-                      />
-                    </span>
-                  </th>
-                  <th
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    Album
-                  </th>
-                  <th
+                    <div
+                      class="text_header"
+                    >
+                      Album
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                     style="cursor: pointer;"
                     title="Toggle SortBy"
                   >
-                    Length
-                  </th>
-                  <th
+                    <div
+                      class="text_header"
+                    >
+                      Length
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_cell"
                     colspan="1"
                     role="columnheader"
                   >
-                    <span
-                      class="select_header"
+                    <div
+                      class="selection_header"
                     >
                       <div
                         class="ui fitted checkbox nuclear checkbox"
@@ -914,342 +949,371 @@ exports[`Library view container should display local library in simple list mode
                         />
                         <label />
                       </div>
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_header_spacer"
+                    data-test-id="track-table-header-spacer"
+                  />
+                </div>
+              </div>
+              <div
+                class="track_table_body"
                 data-rbd-droppable-context-id="0"
                 data-rbd-droppable-id="track_table"
                 data-testid="track-table-body"
                 role="rowgroup"
               >
-                <tr
-                  class=""
-                  data-rbd-draggable-context-id="0"
-                  data-rbd-draggable-id="local track 1 0"
-                  data-testid="track-table-row"
-                  role="row"
+                <div
+                  class="track_table_virtualized_list"
+                  style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
                 >
-                  <td
-                    class="position_cell narrow"
-                    data-testid="position-cell"
-                    role="cell"
-                  >
-                    <button
-                      class="ui pink tiny circular icon button nuclear button add_button"
-                      data-testid="play-now"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="play icon"
-                      />
-                    </button>
-                    <span
-                      class="position_cell_value"
-                    >
-                      1
-                    </span>
-                  </td>
-                  <td
-                    class="thumbnail_cell narrow"
-                    role="cell"
-                  >
-                    <img
-                      class="thumbnail"
-                      src="local track thumbnail 1"
-                    />
-                  </td>
-                  <td
-                    class="title_cell"
-                    data-testid="title-cell"
-                    role="cell"
+                  <div
+                    style="height: 126px; width: 100%;"
                   >
-                    <span
-                      class="title_cell_content"
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="0"
+                      data-test-id="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
+                      tabindex="0"
                     >
-                      <span
-                        class="title_cell_value"
-                      >
-                        local track 1
-                      </span>
-                      <span
-                        class="title_cell_buttons"
+                      <div
+                        class="grid_track_table_cell position_cell"
+                        data-testid="position-cell"
+                        role="cell"
                       >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="add-to-queue"
+                          class="ui pink tiny circular icon button nuclear button play_button"
+                          data-testid="play-now"
                         >
                           <i
                             aria-hidden="true"
-                            class="plus icon"
+                            class="play icon"
                           />
                         </button>
-                        <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="track-popup-trigger"
+                        <span
+                          class="position_cell_value"
                         >
-                          <i
-                            aria-hidden="true"
-                            class="ellipsis horizontal icon"
+                          1
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell thumbnail_cell"
+                        role="cell"
+                      >
+                        <img
+                          class="thumbnail_cell_thumbnail"
+                          src="local track thumbnail 1"
+                        />
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
+                      >
+                        <span
+                          class="title_cell_content"
+                        >
+                          <span
+                            class="title_cell_value"
+                          >
+                            local track 1
+                          </span>
+                          <span
+                            class="title_cell_buttons"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        local artist 1
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        local album 1
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        05:00
+                      </div>
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
                           />
-                        </button>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    local artist 1
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    local album 1
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    05:00
-                  </td>
-                  <td
-                    class="select_cell narrow"
-                    role="cell"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle Row Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
+                          <label />
+                        </div>
+                      </div>
                     </div>
-                  </td>
-                </tr>
-                <tr
-                  class=""
-                  data-rbd-draggable-context-id="0"
-                  data-rbd-draggable-id="local track 2 1"
-                  data-testid="track-table-row"
-                  role="row"
-                >
-                  <td
-                    class="position_cell narrow"
-                    data-testid="position-cell"
-                    role="cell"
-                  >
-                    <button
-                      class="ui pink tiny circular icon button nuclear button add_button"
-                      data-testid="play-now"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="play icon"
-                      />
-                    </button>
-                    <span
-                      class="position_cell_value"
-                    >
-                      2
-                    </span>
-                  </td>
-                  <td
-                    class="thumbnail_cell narrow"
-                    role="cell"
-                  >
-                    <img
-                      class="thumbnail"
-                      src="local track thumbnail 2"
-                    />
-                  </td>
-                  <td
-                    class="title_cell"
-                    data-testid="title-cell"
-                    role="cell"
-                  >
-                    <span
-                      class="title_cell_content"
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="1"
+                      data-test-id="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
+                      tabindex="1"
                     >
-                      <span
-                        class="title_cell_value"
-                      >
-                        local track 2
-                      </span>
-                      <span
-                        class="title_cell_buttons"
+                      <div
+                        class="grid_track_table_cell position_cell"
+                        data-testid="position-cell"
+                        role="cell"
                       >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="add-to-queue"
+                          class="ui pink tiny circular icon button nuclear button play_button"
+                          data-testid="play-now"
                         >
                           <i
                             aria-hidden="true"
-                            class="plus icon"
+                            class="play icon"
                           />
                         </button>
-                        <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="track-popup-trigger"
+                        <span
+                          class="position_cell_value"
                         >
-                          <i
-                            aria-hidden="true"
-                            class="ellipsis horizontal icon"
+                          2
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell thumbnail_cell"
+                        role="cell"
+                      >
+                        <img
+                          class="thumbnail_cell_thumbnail"
+                          src="local track thumbnail 2"
+                        />
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
+                      >
+                        <span
+                          class="title_cell_content"
+                        >
+                          <span
+                            class="title_cell_value"
+                          >
+                            local track 2
+                          </span>
+                          <span
+                            class="title_cell_buttons"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        local artist 1
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        local album 1
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        03:20
+                      </div>
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
                           />
-                        </button>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    local artist 1
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    local album 1
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    03:20
-                  </td>
-                  <td
-                    class="select_cell narrow"
-                    role="cell"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle Row Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
+                          <label />
+                        </div>
+                      </div>
                     </div>
-                  </td>
-                </tr>
-                <tr
-                  class=""
-                  data-rbd-draggable-context-id="0"
-                  data-rbd-draggable-id="local track 3 2"
-                  data-testid="track-table-row"
-                  role="row"
-                >
-                  <td
-                    class="position_cell narrow"
-                    data-testid="position-cell"
-                    role="cell"
-                  >
-                    <button
-                      class="ui pink tiny circular icon button nuclear button add_button"
-                      data-testid="play-now"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="play icon"
-                      />
-                    </button>
-                    <span
-                      class="position_cell_value"
-                    >
-                      3
-                    </span>
-                  </td>
-                  <td
-                    class="thumbnail_cell narrow"
-                    role="cell"
-                  >
-                    <img
-                      class="thumbnail"
-                      src="local track thumbnail 3"
-                    />
-                  </td>
-                  <td
-                    class="title_cell"
-                    data-testid="title-cell"
-                    role="cell"
-                  >
-                    <span
-                      class="title_cell_content"
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="2"
+                      data-test-id="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
+                      tabindex="2"
                     >
-                      <span
-                        class="title_cell_value"
-                      >
-                        local track 3
-                      </span>
-                      <span
-                        class="title_cell_buttons"
+                      <div
+                        class="grid_track_table_cell position_cell"
+                        data-testid="position-cell"
+                        role="cell"
                       >
                         <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="add-to-queue"
+                          class="ui pink tiny circular icon button nuclear button play_button"
+                          data-testid="play-now"
                         >
                           <i
                             aria-hidden="true"
-                            class="plus icon"
+                            class="play icon"
                           />
                         </button>
-                        <button
-                          class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                          data-testid="track-popup-trigger"
+                        <span
+                          class="position_cell_value"
                         >
-                          <i
-                            aria-hidden="true"
-                            class="ellipsis horizontal icon"
+                          3
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell thumbnail_cell"
+                        role="cell"
+                      >
+                        <img
+                          class="thumbnail_cell_thumbnail"
+                          src="local track thumbnail 3"
+                        />
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
+                      >
+                        <span
+                          class="title_cell_content"
+                        >
+                          <span
+                            class="title_cell_value"
+                          >
+                            local track 3
+                          </span>
+                          <span
+                            class="title_cell_buttons"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        local artist 2
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        local album 2
+                      </div>
+                      <div
+                        class="grid_track_table_cell text_cell"
+                        role="cell"
+                      >
+                        01:40
+                      </div>
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
                           />
-                        </button>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    local artist 2
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    local album 2
-                  </td>
-                  <td
-                    role="cell"
-                  >
-                    01:40
-                  </td>
-                  <td
-                    class="select_cell narrow"
-                    role="cell"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle Row Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
+                          <label />
+                        </div>
+                      </div>
                     </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/app/app/containers/PlayQueueContainer/PlayQueueContainer.test.tsx b/packages/app/app/containers/PlayQueueContainer/PlayQueueContainer.test.tsx
index 2a1791aad1..306a779798 100644
--- a/packages/app/app/containers/PlayQueueContainer/PlayQueueContainer.test.tsx
+++ b/packages/app/app/containers/PlayQueueContainer/PlayQueueContainer.test.tsx
@@ -12,13 +12,6 @@ import {
 } from '../../../test/storeBuilders';
 import userEvent from '@testing-library/user-event';
 
-jest.mock(
-  'react-virtualized-auto-sizer',
-  () =>
-    ({ children }) =>
-      children({ height: 600, width: 600 })
-);
-
 describe('Play Queue container', () => {
   beforeAll(() => {
     setupI18Next();
diff --git a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
index 032ab1592c..c9b7c70d6f 100644
--- a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
@@ -110,29 +110,34 @@ exports[`Playlist view container should display a playlist 1`] = `
               />
             </button>
           </div>
-          <table
-            class="track_table"
+          <div
+            class="grid_track_table"
             role="table"
           >
-            <thead>
-              <tr
+            <div
+              class="track_table_head"
+            >
+              <div
+                class="track_table_header_row"
                 role="row"
+                style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
               >
-                <th
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
                    
-                </th>
-                <th
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
-                    data-testid="position-header"
+                  <div
+                    class="text_header centered"
                   >
                     <i
                       aria-hidden="true"
@@ -140,71 +145,68 @@ exports[`Playlist view container should display a playlist 1`] = `
                     />
                     <i
                       aria-hidden="true"
-                      class="sort content ascending icon"
+                      class="sort content ascending icon text_header_icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="center_aligned"
+                  <div
+                    class="text_header"
                   >
                     <i
                       aria-hidden="true"
                       class="image icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
                    
-                </th>
-                <th
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Title
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Artist
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                  <span
-                    class="select_header"
+                  <div
+                    class="selection_header"
                   >
                     <div
                       class="ui fitted checkbox nuclear checkbox"
@@ -220,278 +222,302 @@ exports[`Playlist view container should display a playlist 1`] = `
                       />
                       <label />
                     </div>
-                  </span>
-                </th>
-              </tr>
-            </thead>
-            <tbody
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_spacer"
+                  data-test-id="track-table-header-spacer"
+                />
+              </div>
+            </div>
+            <div
+              class="track_table_body"
               data-rbd-droppable-context-id="0"
               data-rbd-droppable-id="track_table"
               data-testid="track-table-body"
               role="rowgroup"
             >
-              <tr
-                aria-describedby="rbd-hidden-text-0-hidden-text-0"
-                class=""
-                data-rbd-drag-handle-context-id="0"
-                data-rbd-drag-handle-draggable-id="test track 0"
-                data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="test track 0"
-                data-testid="track-table-row"
-                draggable="false"
-                role="button"
-                tabindex="0"
+              <div
+                class="track_table_virtualized_list"
+                style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
               >
-                <td
-                  class="narrow delete_cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                    data-testid="delete-button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="times icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    1
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
+                <div
+                  style="height: 84px; width: 100%;"
                 >
-                  <img
-                    class="thumbnail"
-                    src="test thumbnail"
-                  />
-                </td>
-                <td
-                  class="favorite_cell narrow"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="heart outline icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
-                >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                    class="grid_track_table_row"
+                    data-rbd-drag-handle-context-id="0"
+                    data-rbd-drag-handle-draggable-id="0"
+                    data-rbd-draggable-context-id="0"
+                    data-rbd-draggable-id="0"
+                    data-test-id="track-table-row"
+                    draggable="false"
+                    role="button"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="0"
                   >
-                    <span
-                      class="title_cell_value"
+                    <div
+                      class="delete_cell"
+                      data-testid="delete-cell"
+                      role="cell"
                     >
-                      test track
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
+                        />
+                      </button>
+                    </div>
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="play icon"
                         />
                       </button>
+                      <span
+                        class="position_cell_value"
+                      >
+                        1
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="test thumbnail"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell favorite_cell"
+                      data-testid="favorite-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="favorite-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="heart outline icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  test artist 1
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          test track
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      test artist 1
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-              <tr
-                aria-describedby="rbd-hidden-text-0-hidden-text-0"
-                class=""
-                data-rbd-drag-handle-context-id="0"
-                data-rbd-drag-handle-draggable-id="test track 22 1"
-                data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="test track 22 1"
-                data-testid="track-table-row"
-                draggable="false"
-                role="button"
-                tabindex="0"
-              >
-                <td
-                  class="narrow delete_cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                    data-testid="delete-button"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="times icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    2
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="test thumbnail 2"
-                  />
-                </td>
-                <td
-                  class="favorite_cell narrow"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="heart outline icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
-                >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                    class="grid_track_table_row"
+                    data-rbd-drag-handle-context-id="0"
+                    data-rbd-drag-handle-draggable-id="1"
+                    data-rbd-draggable-context-id="0"
+                    data-rbd-draggable-id="1"
+                    data-test-id="track-table-row"
+                    draggable="false"
+                    role="button"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                    tabindex="1"
                   >
-                    <span
-                      class="title_cell_value"
+                    <div
+                      class="delete_cell"
+                      data-testid="delete-cell"
+                      role="cell"
                     >
-                      test track 22
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
+                        />
+                      </button>
+                    </div>
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="play icon"
                         />
                       </button>
+                      <span
+                        class="position_cell_value"
+                      >
+                        2
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="test thumbnail 2"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell favorite_cell"
+                      data-testid="favorite-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="favorite-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="heart outline icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  test artist 2
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          test track 22
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      test artist 2
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
index 553e473dd1..c4e532fe36 100644
--- a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
@@ -107,23 +107,27 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
               />
             </button>
           </div>
-          <table
-            class="track_table"
+          <div
+            class="grid_track_table"
             role="table"
           >
-            <thead>
-              <tr
+            <div
+              class="track_table_head"
+            >
+              <div
+                class="track_table_header_row"
                 role="row"
+                style="grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em auto;"
               >
-                <th
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
-                    data-testid="position-header"
+                  <div
+                    class="text_header centered"
                   >
                     <i
                       aria-hidden="true"
@@ -131,79 +135,81 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     />
                     <i
                       aria-hidden="true"
-                      class="sort content ascending icon"
+                      class="sort content ascending icon text_header_icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="center_aligned"
+                  <div
+                    class="text_header"
                   >
                     <i
                       aria-hidden="true"
                       class="image icon"
                     />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
                    
-                </th>
-                <th
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Title
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  <span
-                    class="title_with_icon"
+                  <div
+                    class="text_header"
                   >
                     Artist
-                    <i
-                      aria-hidden="true"
-                      class="sort content ascending disabled icon"
-                    />
-                  </span>
-                </th>
-                <th
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                   style="cursor: pointer;"
                   title="Toggle SortBy"
                 >
-                  Length
-                </th>
-                <th
+                  <div
+                    class="text_header"
+                  >
+                    Length
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                  <span
-                    class="select_header"
+                  <div
+                    class="selection_header"
                   >
                     <div
                       class="ui fitted checkbox nuclear checkbox"
@@ -219,250 +225,276 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                       />
                       <label />
                     </div>
-                  </span>
-                </th>
-              </tr>
-            </thead>
-            <tbody
+                  </div>
+                </div>
+                <div
+                  class="track_table_header_spacer"
+                  data-test-id="track-table-header-spacer"
+                />
+              </div>
+            </div>
+            <div
+              class="track_table_body"
               data-rbd-droppable-context-id="0"
               data-rbd-droppable-id="track_table"
               data-testid="track-table-body"
               role="rowgroup"
             >
-              <tr
-                class=""
-                data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="Test track 0"
-                data-testid="track-table-row"
-                role="row"
+              <div
+                class="track_table_virtualized_list"
+                style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
               >
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    1
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="thumb.jpg"
-                  />
-                </td>
-                <td
-                  class="favorite_cell narrow"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="heart outline icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
+                <div
+                  style="height: 84px; width: 100%;"
                 >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="0"
+                    data-rbd-draggable-id="0"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
+                    tabindex="0"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      Test track
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="play icon"
                         />
                       </button>
+                      <span
+                        class="position_cell_value"
+                      >
+                        1
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="thumb.jpg"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell favorite_cell"
+                      data-testid="favorite-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="favorite-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="heart outline icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  Test artist
-                </td>
-                <td
-                  role="cell"
-                >
-                  02:00
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          Test track
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      Test artist
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      02:00
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-              <tr
-                class=""
-                data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="Another test track 1"
-                data-testid="track-table-row"
-                role="row"
-              >
-                <td
-                  class="position_cell narrow"
-                  data-testid="position-cell"
-                  role="cell"
-                >
-                  <button
-                    class="ui pink tiny circular icon button nuclear button add_button"
-                    data-testid="play-now"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="play icon"
-                    />
-                  </button>
-                  <span
-                    class="position_cell_value"
-                  >
-                    2
-                  </span>
-                </td>
-                <td
-                  class="thumbnail_cell narrow"
-                  role="cell"
-                >
-                  <img
-                    class="thumbnail"
-                    src="test-file-stub"
-                  />
-                </td>
-                <td
-                  class="favorite_cell narrow"
-                  role="cell"
-                >
-                  <button
-                    class="ui tiny basic circular icon button nuclear button borderless"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="heart outline icon"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="title_cell"
-                  data-testid="title-cell"
-                  role="cell"
-                >
-                  <span
-                    class="title_cell_content"
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="0"
+                    data-rbd-draggable-id="1"
+                    data-test-id="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
+                    tabindex="1"
                   >
-                    <span
-                      class="title_cell_value"
-                    >
-                      Another test track
-                    </span>
-                    <span
-                      class="title_cell_buttons"
+                    <div
+                      class="grid_track_table_cell position_cell"
+                      data-testid="position-cell"
+                      role="cell"
                     >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="add-to-queue"
+                        class="ui pink tiny circular icon button nuclear button play_button"
+                        data-testid="play-now"
                       >
                         <i
                           aria-hidden="true"
-                          class="plus icon"
+                          class="play icon"
                         />
                       </button>
+                      <span
+                        class="position_cell_value"
+                      >
+                        2
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell thumbnail_cell"
+                      role="cell"
+                    >
+                      <img
+                        class="thumbnail_cell_thumbnail"
+                        src="test-file-stub"
+                      />
+                    </div>
+                    <div
+                      class="grid_track_table_cell favorite_cell"
+                      data-testid="favorite-cell"
+                      role="cell"
+                    >
                       <button
-                        class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                        data-testid="track-popup-trigger"
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="favorite-button"
                       >
                         <i
                           aria-hidden="true"
-                          class="ellipsis horizontal icon"
+                          class="heart outline icon"
                         />
                       </button>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  role="cell"
-                >
-                  Another test artist
-                </td>
-                <td
-                  role="cell"
-                >
-                  03:00
-                </td>
-                <td
-                  class="select_cell narrow"
-                  role="cell"
-                >
-                  <div
-                    class="ui fitted checkbox nuclear checkbox"
-                    style="cursor: pointer;"
-                  >
-                    <input
-                      class="hidden"
-                      readonly=""
-                      tabindex="0"
-                      title="Toggle Row Selected"
-                      type="checkbox"
-                      value=""
-                    />
-                    <label />
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell title_cell"
+                      data-testid="title-cell"
+                      role="cell"
+                    >
+                      <span
+                        class="title_cell_content"
+                      >
+                        <span
+                          class="title_cell_value"
+                        >
+                          Another test track
+                        </span>
+                        <span
+                          class="title_cell_buttons"
+                        >
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="add-to-queue"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="plus icon"
+                            />
+                          </button>
+                          <button
+                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                            data-testid="track-popup-trigger"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="ellipsis horizontal icon"
+                            />
+                          </button>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      Another test artist
+                    </div>
+                    <div
+                      class="grid_track_table_cell text_cell"
+                      role="cell"
+                    >
+                      03:00
+                    </div>
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

From 4e10741da31454173c54ffe7e9db172e05d3a8a0 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Sun, 8 Sep 2024 23:30:34 +0200
Subject: [PATCH 08/32] Fix typo - data-test-id -> data-testid

---
 .../__snapshots__/AlbumViewContainer.test.tsx.snap |  9 +++++----
 .../ArtistViewContainer.test.tsx.snap              |  8 ++++----
 .../__snapshots__/DashboardContainer.test.tsx.snap |  7 ++++---
 .../DeezerPlaylistAdapter.test.tsx.snap            |  7 ++++---
 .../FavoritesContainer.tracks.test.tsx             |  5 +++--
 .../FavoritesContainer.tracks.test.tsx.snap        | 14 ++++++++------
 .../LibraryViewContainer.test.tsx.snap             |  9 +++++----
 .../PlaylistViewContainer.test.tsx                 |  3 ++-
 .../PlaylistViewContainer.test.tsx.snap            |  7 ++++---
 .../SpotifyPlaylistAdapter.test.tsx.snap           |  7 ++++---
 .../GridTrackTable/GridTrackTableRow.tsx           |  2 +-
 .../GridTrackTable/Headers/TextHeader.tsx          |  9 ++++++---
 .../ui/lib/components/GridTrackTable/index.tsx     |  3 ++-
 13 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
index 913f577966..a9ffadc6c9 100644
--- a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
@@ -142,6 +142,7 @@ exports[`Album view container should display an album 1`] = `
                   >
                     <div
                       class="text_header centered"
+                      data-testid="position-header"
                     >
                       <i
                         aria-hidden="true"
@@ -214,7 +215,7 @@ exports[`Album view container should display an album 1`] = `
                   </div>
                   <div
                     class="track_table_header_spacer"
-                    data-test-id="track-table-header-spacer"
+                    data-testid="track-table-header-spacer"
                   />
                 </div>
               </div>
@@ -236,7 +237,7 @@ exports[`Album view container should display an album 1`] = `
                       class="grid_track_table_row"
                       data-rbd-draggable-context-id="0"
                       data-rbd-draggable-id="0"
-                      data-test-id="track-table-row"
+                      data-testid="track-table-row"
                       role="row"
                       style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
                       tabindex="0"
@@ -343,7 +344,7 @@ exports[`Album view container should display an album 1`] = `
                       class="grid_track_table_row"
                       data-rbd-draggable-context-id="0"
                       data-rbd-draggable-id="1"
-                      data-test-id="track-table-row"
+                      data-testid="track-table-row"
                       role="row"
                       style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
                       tabindex="1"
@@ -450,7 +451,7 @@ exports[`Album view container should display an album 1`] = `
                       class="grid_track_table_row"
                       data-rbd-draggable-context-id="0"
                       data-rbd-draggable-id="2"
-                      data-test-id="track-table-row"
+                      data-testid="track-table-row"
                       role="row"
                       style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
                       tabindex="2"
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index dd65b7b57a..b87077ae9b 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -198,7 +198,7 @@ exports[`Artist view container should display an artist 1`] = `
                     </div>
                     <div
                       class="track_table_header_spacer"
-                      data-test-id="track-table-header-spacer"
+                      data-testid="track-table-header-spacer"
                     />
                   </div>
                 </div>
@@ -220,7 +220,7 @@ exports[`Artist view container should display an artist 1`] = `
                         class="grid_track_table_row"
                         data-rbd-draggable-context-id="0"
                         data-rbd-draggable-id="2"
-                        data-test-id="track-table-row"
+                        data-testid="track-table-row"
                         role="row"
                         style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
                         tabindex="2"
@@ -311,7 +311,7 @@ exports[`Artist view container should display an artist 1`] = `
                         class="grid_track_table_row"
                         data-rbd-draggable-context-id="0"
                         data-rbd-draggable-id="1"
-                        data-test-id="track-table-row"
+                        data-testid="track-table-row"
                         role="row"
                         style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
                         tabindex="1"
@@ -402,7 +402,7 @@ exports[`Artist view container should display an artist 1`] = `
                         class="grid_track_table_row"
                         data-rbd-draggable-context-id="0"
                         data-rbd-draggable-id="0"
-                        data-test-id="track-table-row"
+                        data-testid="track-table-row"
                         role="row"
                         style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
                         tabindex="0"
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
index 3a0451dc0a..9c790729ca 100644
--- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
+++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
@@ -585,6 +585,7 @@ exports[`Dashboard container should display top tracks after going to top tracks
                     >
                       <div
                         class="text_header centered"
+                        data-testid="position-header"
                       >
                         <i
                           aria-hidden="true"
@@ -686,7 +687,7 @@ exports[`Dashboard container should display top tracks after going to top tracks
                     </div>
                     <div
                       class="track_table_header_spacer"
-                      data-test-id="track-table-header-spacer"
+                      data-testid="track-table-header-spacer"
                     />
                   </div>
                 </div>
@@ -708,7 +709,7 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         class="grid_track_table_row"
                         data-rbd-draggable-context-id="0"
                         data-rbd-draggable-id="0"
-                        data-test-id="track-table-row"
+                        data-testid="track-table-row"
                         role="row"
                         style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
                         tabindex="0"
@@ -830,7 +831,7 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         class="grid_track_table_row"
                         data-rbd-draggable-context-id="0"
                         data-rbd-draggable-id="1"
-                        data-test-id="track-table-row"
+                        data-testid="track-table-row"
                         role="row"
                         style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
                         tabindex="1"
diff --git a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
index 1d5d972bd0..98dcd394d8 100644
--- a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
@@ -128,6 +128,7 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                 >
                   <div
                     class="text_header centered"
+                    data-testid="position-header"
                   >
                     <i
                       aria-hidden="true"
@@ -216,7 +217,7 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                 </div>
                 <div
                   class="track_table_header_spacer"
-                  data-test-id="track-table-header-spacer"
+                  data-testid="track-table-header-spacer"
                 />
               </div>
             </div>
@@ -238,7 +239,7 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="1"
                     data-rbd-draggable-id="0"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
                     tabindex="0"
@@ -354,7 +355,7 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="1"
                     data-rbd-draggable-id="1"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
                     tabindex="1"
diff --git a/packages/app/app/containers/FavoritesContainer/FavoritesContainer.tracks.test.tsx b/packages/app/app/containers/FavoritesContainer/FavoritesContainer.tracks.test.tsx
index 1cac43dd00..a7e17fc4e3 100644
--- a/packages/app/app/containers/FavoritesContainer/FavoritesContainer.tracks.test.tsx
+++ b/packages/app/app/containers/FavoritesContainer/FavoritesContainer.tracks.test.tsx
@@ -1,15 +1,16 @@
 
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { createMemoryHistory } from 'history';
 import _, { pick } from 'lodash';
 
+import { Track } from '@nuclear/core';
+
 import { buildStoreState } from '../../../test/storeBuilders';
 import { AnyProps, configureMockStore, setupI18Next, TestRouterProvider, TestStoreProvider, uuidRegex } from '../../../test/testUtils';
 import MainContentContainer from '../MainContentContainer';
 import PlayerBarContainer from '../PlayerBarContainer';
-import { Track } from '@nuclear/core';
-import userEvent from '@testing-library/user-event';
 
 const updateStore = (key: string, value: object) => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
diff --git a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
index 3bbf495bf0..df14bba164 100644
--- a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
+++ b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
@@ -251,6 +251,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                 >
                   <div
                     class="text_header centered"
+                    data-testid="position-header"
                   >
                     <i
                       aria-hidden="true"
@@ -330,7 +331,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                 </div>
                 <div
                   class="track_table_header_spacer"
-                  data-test-id="track-table-header-spacer"
+                  data-testid="track-table-header-spacer"
                 />
               </div>
             </div>
@@ -352,7 +353,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="0"
                     data-rbd-draggable-id="1"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
                     tabindex="1"
@@ -468,7 +469,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="0"
                     data-rbd-draggable-id="0"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
                     tabindex="0"
@@ -823,6 +824,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                 >
                   <div
                     class="text_header centered"
+                    data-testid="position-header"
                   >
                     <i
                       aria-hidden="true"
@@ -902,7 +904,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                 </div>
                 <div
                   class="track_table_header_spacer"
-                  data-test-id="track-table-header-spacer"
+                  data-testid="track-table-header-spacer"
                 />
               </div>
             </div>
@@ -924,7 +926,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="2"
                     data-rbd-draggable-id="1"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
                     tabindex="1"
@@ -1040,7 +1042,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="2"
                     data-rbd-draggable-id="0"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
                     tabindex="0"
diff --git a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
index 716701a7b1..d18539528e 100644
--- a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
@@ -848,6 +848,7 @@ exports[`Library view container should display local library in simple list mode
                   >
                     <div
                       class="text_header centered"
+                      data-testid="position-header"
                     >
                       <i
                         aria-hidden="true"
@@ -953,7 +954,7 @@ exports[`Library view container should display local library in simple list mode
                   </div>
                   <div
                     class="track_table_header_spacer"
-                    data-test-id="track-table-header-spacer"
+                    data-testid="track-table-header-spacer"
                   />
                 </div>
               </div>
@@ -975,7 +976,7 @@ exports[`Library view container should display local library in simple list mode
                       class="grid_track_table_row"
                       data-rbd-draggable-context-id="0"
                       data-rbd-draggable-id="0"
-                      data-test-id="track-table-row"
+                      data-testid="track-table-row"
                       role="row"
                       style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
                       tabindex="0"
@@ -1088,7 +1089,7 @@ exports[`Library view container should display local library in simple list mode
                       class="grid_track_table_row"
                       data-rbd-draggable-context-id="0"
                       data-rbd-draggable-id="1"
-                      data-test-id="track-table-row"
+                      data-testid="track-table-row"
                       role="row"
                       style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
                       tabindex="1"
@@ -1201,7 +1202,7 @@ exports[`Library view container should display local library in simple list mode
                       class="grid_track_table_row"
                       data-rbd-draggable-context-id="0"
                       data-rbd-draggable-id="2"
-                      data-test-id="track-table-row"
+                      data-testid="track-table-row"
                       role="row"
                       style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
                       tabindex="2"
diff --git a/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx b/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx
index 2526a96fe2..47b12774ce 100644
--- a/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx
+++ b/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { fireEvent, render, waitFor, within } from '@testing-library/react';
+import { fireEvent, prettyDOM, render, waitFor, within } from '@testing-library/react';
 import React from 'react';
 import { createMemoryHistory } from 'history';
 import { store as electronStore } from '@nuclear/core';
@@ -313,6 +313,7 @@ describe('Playlist view container - utils', () => {
     };
     reorder = onReorder(playlist, updatePlaylist);
   });
+  
   it('should reorder tracks correctly (1)', () => {
     reorder(0, 2);
     expect(newPlaylist).toEqual({
diff --git a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
index c9b7c70d6f..bdad210ee2 100644
--- a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
@@ -138,6 +138,7 @@ exports[`Playlist view container should display a playlist 1`] = `
                 >
                   <div
                     class="text_header centered"
+                    data-testid="position-header"
                   >
                     <i
                       aria-hidden="true"
@@ -226,7 +227,7 @@ exports[`Playlist view container should display a playlist 1`] = `
                 </div>
                 <div
                   class="track_table_header_spacer"
-                  data-test-id="track-table-header-spacer"
+                  data-testid="track-table-header-spacer"
                 />
               </div>
             </div>
@@ -251,7 +252,7 @@ exports[`Playlist view container should display a playlist 1`] = `
                     data-rbd-drag-handle-draggable-id="0"
                     data-rbd-draggable-context-id="0"
                     data-rbd-draggable-id="0"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     draggable="false"
                     role="button"
                     style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
@@ -386,7 +387,7 @@ exports[`Playlist view container should display a playlist 1`] = `
                     data-rbd-drag-handle-draggable-id="1"
                     data-rbd-draggable-context-id="0"
                     data-rbd-draggable-id="1"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     draggable="false"
                     role="button"
                     style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
diff --git a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
index c4e532fe36..f24605ddbf 100644
--- a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
@@ -128,6 +128,7 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                 >
                   <div
                     class="text_header centered"
+                    data-testid="position-header"
                   >
                     <i
                       aria-hidden="true"
@@ -229,7 +230,7 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                 </div>
                 <div
                   class="track_table_header_spacer"
-                  data-test-id="track-table-header-spacer"
+                  data-testid="track-table-header-spacer"
                 />
               </div>
             </div>
@@ -251,7 +252,7 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="0"
                     data-rbd-draggable-id="0"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
                     tabindex="0"
@@ -373,7 +374,7 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     class="grid_track_table_row"
                     data-rbd-draggable-context-id="0"
                     data-rbd-draggable-id="1"
-                    data-test-id="track-table-row"
+                    data-testid="track-table-row"
                     role="row"
                     style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
                     tabindex="1"
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
index e0b2860693..d1879cb808 100644
--- a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
@@ -31,7 +31,7 @@ export const GridTrackTableRow = memo(<T extends Track>({ index, style, data }:
     {
       (draggableProvided, draggableSnapshot) => (
         <div
-          data-test-id='track-table-row'
+          data-testid='track-table-row'
           className={cx(
             styles.grid_track_table_row,
             { [styles.is_dragging]: draggableSnapshot.isDragging }
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
index 565689fe48..cb30148c40 100644
--- a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
@@ -26,9 +26,12 @@ export const TextHeader: <T extends Track>(props: TextHeaderProps<T>) => React.R
     ? 'sort content descending' : 'sort content ascending';
 
   return (
-    <div className={cx(className, styles.text_header, {
-      [styles.centered]: isCentered
-    })} data-testid={dataTestId}>
+    <div 
+      className={cx(className, styles.text_header, {
+        [styles.centered]: isCentered
+      })} 
+      data-testid={dataTestId}
+    >
       { header }
       {
         isSorted &&
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 5c21a0efa0..442156a26c 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -82,6 +82,7 @@ export const GridTrackTable = <T extends Track>({
     displayPosition && {
       id: TrackTableColumn.Position,
       Header: ({ column }) => <TextHeader
+        data-testid='position-header'
         column={column as TrackTableColumnInstance<Track>}
         header={positionHeader} 
         isCentered
@@ -229,7 +230,7 @@ export const GridTrackTable = <T extends Track>({
                   {column.render('Header', extraProps)}
                 </div>))
             }
-            <div data-test-id='track-table-header-spacer' className={styles.track_table_header_spacer} />
+            <div data-testid='track-table-header-spacer' className={styles.track_table_header_spacer} />
           </div>
         ))}
       </div>

From 469626b4c4bd073c5a7d139f20f45a988b041fa3 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Mon, 9 Sep 2024 00:51:59 +0200
Subject: [PATCH 09/32] Add a tooltip for artist's popular tracks with full
 track name

---
 .../ArtistView/PopularTracks/index.tsx        |  44 +-
 .../ArtistView/PopularTracks/styles.scss      |   8 +
 .../ArtistViewContainer.test.tsx.snap         | 623 +++++++++---------
 .../GridTrackTable/Cells/TitleCell.tsx        |   9 +-
 .../ui/lib/components/StreamInfo/index.tsx    |   1 -
 5 files changed, 359 insertions(+), 326 deletions(-)

diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
index f5408adabe..0d1fe8fa8b 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.tsx
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -6,14 +6,13 @@ import { Button } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
 
+import { ArtistTopTrack } from '@nuclear/core/src/plugins/plugins.types';
+import { TextCell } from '@nuclear/ui/lib/components/GridTrackTable/Cells/TextCell';
+import { Track } from '@nuclear/ui/lib/types';
 
 import trackRowStyles from '../../TrackRow/styles.scss';
-import styles from './styles.scss';
-import { ArtistTopTrack } from '@nuclear/core/src/plugins/plugins.types';
 import TrackTableContainer from '../../../containers/TrackTableContainer';
-import TrackTableCell from '@nuclear/ui/lib/components/TrackTable/Cells/TrackTableCell';
-import { Cell, CellProps } from 'react-table';
-import { Track } from '@nuclear/ui/lib/types';
+import styles from './styles.scss';
 
 type AddAllButtonProps = {
   handleAddAll: React.MouseEventHandler;
@@ -71,8 +70,8 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const customColumns = useMemo(() => [{
     id: PlaycountColumnId,
     Header: t('count'),
-    accessor: (track: Track) => track.playcount,
-    Cell: ({value, ...rest}: CellProps<Track, string>) => <TrackTableCell value={Number(value).toLocaleString()} {...rest} />
+    accessor: (track: Track) => Number(track.playcount).toLocaleString(),
+    Cell: TextCell
   }], []);
 
   return (
@@ -86,19 +85,24 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
           handleAddAll={handleAddAll}
           t={t}
         />
-        <TrackTableContainer
-          tracks={
-            _(tracks)
-              .sortBy('playcount')
-              .takeRight(expanded ? 15 : 5)
-              .value()
-          }
-          displayDeleteButton={false}
-          displayAlbum={false}
-          displayPosition={false}
-          displayArtist={false}
-          customColumns={customColumns}
-        />
+        <div 
+          className={styles.popular_tracks_table_container}
+          style={{ height: expanded ? `calc(48px + (${tracks.length}*42px))` : undefined }}
+        >
+          <TrackTableContainer
+            tracks={
+              _(tracks)
+                .sortBy('playcount')
+                .takeRight(expanded ? 15 : 5)
+                .value()
+            }
+            displayDeleteButton={false}
+            displayAlbum={false}
+            displayPosition={false}
+            displayArtist={false}
+            customColumns={customColumns}
+          />
+        </div>
         <div className='expand_button' onClick={toggleExpand}>
           <FontAwesome
             name={expanded ? 'angle-double-up' : 'angle-double-down'}
diff --git a/packages/app/app/components/ArtistView/PopularTracks/styles.scss b/packages/app/app/components/ArtistView/PopularTracks/styles.scss
index 197ff7ab67..39c4bb0f1b 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/styles.scss
+++ b/packages/app/app/components/ArtistView/PopularTracks/styles.scss
@@ -14,6 +14,14 @@
     font-variant: all-small-caps;
   }
 
+  .popular_tracks_table_container {
+    height: calc(48px + (42px * 5)); // header + 5 rows
+
+    &.expanded {
+      height: auto;
+    }
+  }
+
   .expand_button {
     display: flex;
     justify-content: center;
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index b87077ae9b..4afeab63a4 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -111,185 +111,77 @@ exports[`Artist view container should display an artist 1`] = `
                Add all
             </a>
             <div
-              class="track_table_wrapper"
+              class="popular_tracks_table_container"
             >
               <div
-                class="grid_track_table"
-                role="table"
+                class="track_table_wrapper"
               >
                 <div
-                  class="track_table_head"
+                  class="grid_track_table"
+                  role="table"
                 >
                   <div
-                    class="track_table_header_row"
-                    role="row"
-                    style="grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
+                    class="track_table_head"
                   >
                     <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
+                      class="track_table_header_row"
+                      role="row"
+                      style="grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
                     >
                       <div
-                        class="text_header"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="image icon"
-                        />
+                        <div
+                          class="text_header"
+                        >
+                          <i
+                            aria-hidden="true"
+                            class="image icon"
+                          />
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
-                    >
-                       
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
-                    >
                       <div
-                        class="text_header"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
                       >
-                        Title
+                         
                       </div>
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                      style="cursor: pointer;"
-                      title="Toggle SortBy"
-                    >
-                      Playcount
-                    </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                    >
                       <div
-                        class="selection_header"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
                       >
                         <div
-                          class="ui fitted checkbox nuclear checkbox"
-                          style="cursor: pointer;"
+                          class="text_header"
                         >
-                          <input
-                            class="hidden"
-                            readonly=""
-                            tabindex="0"
-                            title="Toggle All Rows Selected"
-                            type="checkbox"
-                            value=""
-                          />
-                          <label />
+                          Title
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="track_table_header_spacer"
-                      data-testid="track-table-header-spacer"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="track_table_body"
-                  data-rbd-droppable-context-id="0"
-                  data-rbd-droppable-id="track_table"
-                  data-testid="track-table-body"
-                  role="rowgroup"
-                >
-                  <div
-                    class="track_table_virtualized_list"
-                    style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
-                  >
-                    <div
-                      style="height: 126px; width: 100%;"
-                    >
                       <div
-                        class="grid_track_table_row"
-                        data-rbd-draggable-context-id="0"
-                        data-rbd-draggable-id="2"
-                        data-testid="track-table-row"
-                        role="row"
-                        style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                        tabindex="2"
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                        style="cursor: pointer;"
+                        title="Toggle SortBy"
+                      >
+                        Playcount
+                      </div>
+                      <div
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
                       >
                         <div
-                          class="grid_track_table_cell thumbnail_cell"
-                          role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="test-file-stub"
-                          />
-                        </div>
-                        <div
-                          class="grid_track_table_cell favorite_cell"
-                          data-testid="favorite-cell"
-                          role="cell"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless"
-                            data-testid="favorite-button"
-                          >
-                            <i
-                              aria-hidden="true"
-                              class="heart outline icon"
-                            />
-                          </button>
-                        </div>
-                        <div
-                          class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
-                        >
-                          <span
-                            class="title_cell_content"
-                          >
-                            <span
-                              class="title_cell_value"
-                            >
-                              test artist top track 1
-                            </span>
-                            <span
-                              class="title_cell_buttons"
-                            >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
-                              >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
-                              >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
-                            </span>
-                          </span>
-                        </div>
-                        6,900,237
-                        <div
-                          class="selection_cell"
-                          role="cell"
+                          class="selection_header"
                         >
                           <div
                             class="ui fitted checkbox nuclear checkbox"
@@ -298,8 +190,8 @@ exports[`Artist view container should display an artist 1`] = `
                             <input
                               class="hidden"
                               readonly=""
-                              tabindex="-1"
-                              title="Toggle Row Selected"
+                              tabindex="0"
+                              title="Toggle All Rows Selected"
                               type="checkbox"
                               value=""
                             />
@@ -308,184 +200,311 @@ exports[`Artist view container should display an artist 1`] = `
                         </div>
                       </div>
                       <div
-                        class="grid_track_table_row"
-                        data-rbd-draggable-context-id="0"
-                        data-rbd-draggable-id="1"
-                        data-testid="track-table-row"
-                        role="row"
-                        style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                        tabindex="1"
+                        class="track_table_header_spacer"
+                        data-testid="track-table-header-spacer"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="track_table_body"
+                    data-rbd-droppable-context-id="0"
+                    data-rbd-droppable-id="track_table"
+                    data-testid="track-table-body"
+                    role="rowgroup"
+                  >
+                    <div
+                      class="track_table_virtualized_list"
+                      style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
+                    >
+                      <div
+                        style="height: 126px; width: 100%;"
                       >
                         <div
-                          class="grid_track_table_cell thumbnail_cell"
-                          role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="test-file-stub"
-                          />
-                        </div>
-                        <div
-                          class="grid_track_table_cell favorite_cell"
-                          data-testid="favorite-cell"
-                          role="cell"
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="2"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                          tabindex="2"
                         >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless"
-                            data-testid="favorite-button"
+                          <div
+                            class="grid_track_table_cell thumbnail_cell"
+                            role="cell"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="heart outline icon"
+                            <img
+                              class="thumbnail_cell_thumbnail"
+                              src="test-file-stub"
                             />
-                          </button>
-                        </div>
-                        <div
-                          class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
-                        >
-                          <span
-                            class="title_cell_content"
+                          </div>
+                          <div
+                            class="grid_track_table_cell favorite_cell"
+                            data-testid="favorite-cell"
+                            role="cell"
                           >
-                            <span
-                              class="title_cell_value"
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless"
+                              data-testid="favorite-button"
                             >
-                              test artist top track 2
-                            </span>
+                              <i
+                                aria-hidden="true"
+                                class="heart outline icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
+                          >
                             <span
-                              class="title_cell_buttons"
+                              class="title_cell_content"
                             >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
+                              <span
+                                class="title_cell_value"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
+                                test artist top track 1
+                              </span>
+                              <span
+                                class="title_cell_buttons"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                        6,969
-                        <div
-                          class="selection_cell"
-                          role="cell"
-                        >
+                          </div>
                           <div
-                            class="ui fitted checkbox nuclear checkbox"
-                            style="cursor: pointer;"
+                            class="grid_track_table_cell text_cell"
+                            role="cell"
                           >
-                            <input
-                              class="hidden"
-                              readonly=""
-                              tabindex="-1"
-                              title="Toggle Row Selected"
-                              type="checkbox"
-                              value=""
-                            />
-                            <label />
+                            6,900,237
+                          </div>
+                          <div
+                            class="selection_cell"
+                            role="cell"
+                          >
+                            <div
+                              class="ui fitted checkbox nuclear checkbox"
+                              style="cursor: pointer;"
+                            >
+                              <input
+                                class="hidden"
+                                readonly=""
+                                tabindex="-1"
+                                title="Toggle Row Selected"
+                                type="checkbox"
+                                value=""
+                              />
+                              <label />
+                            </div>
                           </div>
-                        </div>
-                      </div>
-                      <div
-                        class="grid_track_table_row"
-                        data-rbd-draggable-context-id="0"
-                        data-rbd-draggable-id="0"
-                        data-testid="track-table-row"
-                        role="row"
-                        style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                        tabindex="0"
-                      >
-                        <div
-                          class="grid_track_table_cell thumbnail_cell"
-                          role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="test-file-stub"
-                          />
                         </div>
                         <div
-                          class="grid_track_table_cell favorite_cell"
-                          data-testid="favorite-cell"
-                          role="cell"
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="1"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                          tabindex="1"
                         >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless"
-                            data-testid="favorite-button"
+                          <div
+                            class="grid_track_table_cell thumbnail_cell"
+                            role="cell"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="heart outline icon"
+                            <img
+                              class="thumbnail_cell_thumbnail"
+                              src="test-file-stub"
                             />
-                          </button>
-                        </div>
-                        <div
-                          class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
-                        >
-                          <span
-                            class="title_cell_content"
+                          </div>
+                          <div
+                            class="grid_track_table_cell favorite_cell"
+                            data-testid="favorite-cell"
+                            role="cell"
                           >
-                            <span
-                              class="title_cell_value"
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless"
+                              data-testid="favorite-button"
                             >
-                              test artist top track 3
-                            </span>
+                              <i
+                                aria-hidden="true"
+                                class="heart outline icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
+                          >
                             <span
-                              class="title_cell_buttons"
+                              class="title_cell_content"
                             >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
+                              <span
+                                class="title_cell_value"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
+                                test artist top track 2
+                              </span>
+                              <span
+                                class="title_cell_buttons"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
                             </span>
-                          </span>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell"
+                            role="cell"
+                          >
+                            6,969
+                          </div>
+                          <div
+                            class="selection_cell"
+                            role="cell"
+                          >
+                            <div
+                              class="ui fitted checkbox nuclear checkbox"
+                              style="cursor: pointer;"
+                            >
+                              <input
+                                class="hidden"
+                                readonly=""
+                                tabindex="-1"
+                                title="Toggle Row Selected"
+                                type="checkbox"
+                                value=""
+                              />
+                              <label />
+                            </div>
+                          </div>
                         </div>
-                        1
                         <div
-                          class="selection_cell"
-                          role="cell"
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="0"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                          tabindex="0"
                         >
                           <div
-                            class="ui fitted checkbox nuclear checkbox"
-                            style="cursor: pointer;"
+                            class="grid_track_table_cell thumbnail_cell"
+                            role="cell"
                           >
-                            <input
-                              class="hidden"
-                              readonly=""
-                              tabindex="-1"
-                              title="Toggle Row Selected"
-                              type="checkbox"
-                              value=""
+                            <img
+                              class="thumbnail_cell_thumbnail"
+                              src="test-file-stub"
                             />
-                            <label />
+                          </div>
+                          <div
+                            class="grid_track_table_cell favorite_cell"
+                            data-testid="favorite-cell"
+                            role="cell"
+                          >
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless"
+                              data-testid="favorite-button"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="heart outline icon"
+                              />
+                            </button>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
+                          >
+                            <span
+                              class="title_cell_content"
+                            >
+                              <span
+                                class="title_cell_value"
+                              >
+                                test artist top track 3
+                              </span>
+                              <span
+                                class="title_cell_buttons"
+                              >
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
+                            </span>
+                          </div>
+                          <div
+                            class="grid_track_table_cell text_cell"
+                            role="cell"
+                          >
+                            1
+                          </div>
+                          <div
+                            class="selection_cell"
+                            role="cell"
+                          >
+                            <div
+                              class="ui fitted checkbox nuclear checkbox"
+                              style="cursor: pointer;"
+                            >
+                              <input
+                                class="hidden"
+                                readonly=""
+                                tabindex="-1"
+                                title="Toggle Row Selected"
+                                type="checkbox"
+                                value=""
+                              />
+                              <label />
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
index 6d3dcb768d..c4542573ef 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
@@ -6,6 +6,7 @@ import { TrackTableColumn, TrackTableExtraProps } from '../../TrackTable/types';
 import { Track } from '../../../types';
 import Button from '../../Button';
 import TrackPopup from '../../TrackPopup';
+import Tooltip from '../../Tooltip';
 import styles from '../styles.scss';
 
 export const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
@@ -28,9 +29,11 @@ export const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>>
   className={cx(styles.grid_track_table_cell, styles.text_cell, styles.title_cell)}
 >
   <span className={styles.title_cell_content}>
-    <span className={styles.title_cell_value}>
-      {value}
-    </span>
+    <Tooltip
+      on='hover'
+      content={value}
+      trigger={<span className={styles.title_cell_value}>{value}</span>}
+    />
     <span className={styles.title_cell_buttons}>
       <Button
         className={styles.title_cell_button}
diff --git a/packages/ui/lib/components/StreamInfo/index.tsx b/packages/ui/lib/components/StreamInfo/index.tsx
index 4bee7ebc13..0b3c628223 100644
--- a/packages/ui/lib/components/StreamInfo/index.tsx
+++ b/packages/ui/lib/components/StreamInfo/index.tsx
@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import Img from 'react-image';
-import cx from 'classnames';
 
 import { StreamData } from '@nuclear/core/src/plugins/plugins.types';
 

From 35232a33c2f65ae9d1e818248fee80e5691a9fe5 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Mon, 9 Sep 2024 01:04:57 +0200
Subject: [PATCH 10/32] Style improvements for displaying grid track tables in
 album view

---
 packages/app/app/components/AlbumView/styles.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/app/app/components/AlbumView/styles.scss b/packages/app/app/components/AlbumView/styles.scss
index 4f02cf9533..3bd22bbe12 100644
--- a/packages/app/app/components/AlbumView/styles.scss
+++ b/packages/app/app/components/AlbumView/styles.scss
@@ -3,9 +3,10 @@
 @import "../../../../ui/lib/common.scss";
 
 .album_view_container {
+  display: flex;
+  flex-flow: column;
   width: 100%;
   height: 100%;
-  padding: 1rem 0 0 0;
 
   .album_buttons {
     display: flex;
@@ -31,19 +32,19 @@
   }
 
   .dimmable {
+    display: flex;
+    flex-flow: column;
     width: 100%;
     height: 100%;
 
     .album {
       display: flex;
       flex-flow: column;
+      flex: 1 1 auto;
     }
 
     .album_info_box {
       display: flex;
-
-      margin: 0rem 1rem;
-
       flex-flow: row;
 
       img {
@@ -116,9 +117,9 @@
       }
     }
 
-    table {
-      margin: 3rem 1rem;
-      width: calc(100% - 2rem);
+    [role="table"] {
+      margin-top: 2rem;
+      width: 100%;
     }
 
     .error {

From 3b152f60eb3202d59c88d594bf2ee9291104b407 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Mon, 9 Sep 2024 01:20:58 +0200
Subject: [PATCH 11/32] Uniform style for dashboard tabs

---
 .../app/app/components/Dashboard/styles.scss    | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/app/app/components/Dashboard/styles.scss b/packages/app/app/components/Dashboard/styles.scss
index 27406b07e5..6ca51b070d 100644
--- a/packages/app/app/components/Dashboard/styles.scss
+++ b/packages/app/app/components/Dashboard/styles.scss
@@ -1,11 +1,16 @@
-.dashboard {
+.dashboard,
+.dashboard_tabs {
   position: relative;
-  height: calc(100% - 2rem);
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
 
+.dashboard {
   .dashboard_tabs {
-    position: relative;
-    height: 100%;
-    display: flex;
-    flex-flow: column;
+    .ui.secondary.menu {
+      margin-bottom: 0;
+      flex: 0 0 auto;
+    }
   }
 }

From a7920ffbdd29e480f5f2929a0aaf7d82abe30528 Mon Sep 17 00:00:00 2001
From: Mohammad Habib <mohmad.habib@gmail.com>
Date: Mon, 9 Sep 2024 22:00:52 +0300
Subject: [PATCH 12/32] Update SS links Only'

---
 docs/README-ar.md    | 22 +++++++++++-----------
 docs/README-de.md    | 22 +++++++++++-----------
 docs/README-es.md    | 22 +++++++++++-----------
 docs/README-fr.md    | 22 +++++++++++-----------
 docs/README-he.md    | 22 +++++++++++-----------
 docs/README-hi.md    | 22 +++++++++++-----------
 docs/README-id.md    | 22 +++++++++++-----------
 docs/README-it.md    | 22 +++++++++++-----------
 docs/README-ja.md    | 22 +++++++++++-----------
 docs/README-ko.md    | 22 +++++++++++-----------
 docs/README-pl.md    | 22 +++++++++++-----------
 docs/README-ptbr.md  | 22 +++++++++++-----------
 docs/README-ru.md    | 22 +++++++++++-----------
 docs/README-se.md    | 22 +++++++++++-----------
 docs/README-tr.md    | 22 +++++++++++-----------
 docs/README-zh-cn.md | 22 +++++++++++-----------
 16 files changed, 176 insertions(+), 176 deletions(-)

diff --git a/docs/README-ar.md b/docs/README-ar.md
index d5f79785e0..2fef3112b2 100644
--- a/docs/README-ar.md
+++ b/docs/README-ar.md
@@ -103,27 +103,27 @@ nuclear هو برنامج مشغل موسيقى مجاني يقوم بسحب ا
 
 ## لقطات الشاشة 
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## الترخيص
 
diff --git a/docs/README-de.md b/docs/README-de.md
index 320fd79a48..38e6c24627 100644
--- a/docs/README-de.md
+++ b/docs/README-de.md
@@ -150,27 +150,27 @@ Sie können das Programm auf eine lokale Quelle ansetzen. Momentan kompiliert di
 ## Screenshots
 This will be updated as the program evolves.
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Lizenz
 
diff --git a/docs/README-es.md b/docs/README-es.md
index e11c5c036f..48a8e516dd 100644
--- a/docs/README-es.md
+++ b/docs/README-es.md
@@ -153,27 +153,27 @@ Puede convertir la aplicación en un repositorio local. actualmente, el archivo
 
 ## Capturas de pantalla
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Licencia
 
diff --git a/docs/README-fr.md b/docs/README-fr.md
index 30d6d05cd6..d7bc9e6a53 100644
--- a/docs/README-fr.md
+++ b/docs/README-fr.md
@@ -95,27 +95,27 @@ Nous utilisons [Crowdin](https://crowdin.com/project/nuclear) pour gérer les tr
 
 ## Captures d'écran
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Licence
 
diff --git a/docs/README-he.md b/docs/README-he.md
index 1df2930d54..406c4f1b23 100644
--- a/docs/README-he.md
+++ b/docs/README-he.md
@@ -170,27 +170,27 @@ $ flatpak-builder --run build-dir org.js.nuclear.Nuclear.json run.sh
 
 זה יתעדכן ככל שהתוכנה תתפתח
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## רישיון
 
diff --git a/docs/README-hi.md b/docs/README-hi.md
index dfb8c7552f..0d9c374a72 100644
--- a/docs/README-hi.md
+++ b/docs/README-hi.md
@@ -98,27 +98,27 @@
 
 ## स्क्रीनशॉट
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## लाइसेंस
 
diff --git a/docs/README-id.md b/docs/README-id.md
index c1ce184ebd..29a0da2d40 100644
--- a/docs/README-id.md
+++ b/docs/README-id.md
@@ -90,27 +90,27 @@ Kami menggunakan _platform_ [Crowdin](https://crowdin.com/project/nuclear) untuk
 
 ## Tangkapan Layar
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Lisensi
 
diff --git a/docs/README-it.md b/docs/README-it.md
index 5605ac8a8f..7748d7c1a9 100644
--- a/docs/README-it.md
+++ b/docs/README-it.md
@@ -145,27 +145,27 @@ Puoi trasformare l'app in un repository locale. attualmente il file crea l'ultim
 
 ## Screenshots
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Licenza
 
diff --git a/docs/README-ja.md b/docs/README-ja.md
index 37bba52ff1..34e70000f7 100644
--- a/docs/README-ja.md
+++ b/docs/README-ja.md
@@ -97,27 +97,27 @@ Nuclear は、既に多くの言語に翻訳されており、また追加した
 
 ## スクリーンショット
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## ライセンス
 
diff --git a/docs/README-ko.md b/docs/README-ko.md
index 4341a8569d..25da9b53f1 100644
--- a/docs/README-ko.md
+++ b/docs/README-ko.md
@@ -151,27 +151,27 @@ $ flatpak-builder --run build-dir org.js.nuclear.Nuclear.json run.sh
 
 ## 실제 화면 
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## 라이선스
 
diff --git a/docs/README-pl.md b/docs/README-pl.md
index 93f7ba8495..a879f51c09 100644
--- a/docs/README-pl.md
+++ b/docs/README-pl.md
@@ -98,27 +98,27 @@ Korzystamy z  [Crowdin](https://crowdin.com/project/nuclear) aby usprawnić loka
 
 ## Zrzuty ekranu
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Licencja
 
diff --git a/docs/README-ptbr.md b/docs/README-ptbr.md
index 09c79f70ca..a97fed4c25 100644
--- a/docs/README-ptbr.md
+++ b/docs/README-ptbr.md
@@ -78,27 +78,27 @@ Nuclear já foi traduzido para diversas línguas, e nós estamos sempre procuran
 
 ## Screenshots
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Processo de Desenvolvimento
 Você precisará do docker e do docker-compose.
diff --git a/docs/README-ru.md b/docs/README-ru.md
index b664b975b6..6c2cf7dfc4 100644
--- a/docs/README-ru.md
+++ b/docs/README-ru.md
@@ -98,27 +98,27 @@ Nuclear - это бесплатная программа для потоково
 
 ## Скриншоты
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Лицензия
 
diff --git a/docs/README-se.md b/docs/README-se.md
index 735f395e65..7466bd5455 100644
--- a/docs/README-se.md
+++ b/docs/README-se.md
@@ -120,27 +120,27 @@ $ sudo docker-compose up dev
 
 ## Skärmdumpar
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Licens
 
diff --git a/docs/README-tr.md b/docs/README-tr.md
index eb560bc65a..9f2fdc9661 100644
--- a/docs/README-tr.md
+++ b/docs/README-tr.md
@@ -95,27 +95,27 @@ Yerelleştirmeyi yönetmek için [Crowdin](https://crowdin.com/project/nuclear)
 
 ## Ekran Fotoğrafları
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## Lisans
 
diff --git a/docs/README-zh-cn.md b/docs/README-zh-cn.md
index a8cc7d031f..9e9cce19fd 100644
--- a/docs/README-zh-cn.md
+++ b/docs/README-zh-cn.md
@@ -92,27 +92,27 @@ Nuclear的文档已经被翻译成好几种语言了，并且我们一直在寻
 
 ## 屏幕截图
 
-![Default](./screenshots/screenshot_default.jpg)
+![Default](../screenshots/screenshot_default.jpg)
 
-![Dashboard](./screenshots/screenshot_dashboard.jpg)
+![Dashboard](../screenshots/screenshot_dashboard.jpg)
 
-![Album](./screenshots/screenshot_album.jpg)
+![Album](../screenshots/screenshot_album.jpg)
 
-![Artist](./screenshots/screenshot_artist.jpg)
+![Artist](../screenshots/screenshot_artist.jpg)
 
-![Search](./screenshots/screenshot_search.jpg)
+![Search](../screenshots/screenshot_search.jpg)
 
-![Command palette](./screenshots/screenshot_command_palette.jpg)
+![Command palette](../screenshots/screenshot_command_palette.jpg)
 
-![Equalizer](./screenshots/screenshot_equalizer.jpg)
+![Equalizer](../screenshots/screenshot_equalizer.jpg)
 
-![Genres](./screenshots/screenshot_genres.jpg)
+![Genres](../screenshots/screenshot_genres.jpg)
 
-![Playlist](./screenshots/screenshot_playlist.jpg)
+![Playlist](../screenshots/screenshot_playlist.jpg)
 
-![Settings](./screenshots/screenshot_settings.jpg)
+![Settings](../screenshots/screenshot_settings.jpg)
 
-![Visualizer](./screenshots/screenshot_visualizer.jpg)
+![Visualizer](../screenshots/screenshot_visualizer.jpg)
 
 ## 开源许可证
 

From bae0c934ba433403f666132d7237d07444857726 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Wed, 11 Sep 2024 02:14:32 +0200
Subject: [PATCH 13/32] Fixes for the  artist page and spotify metadata
 downloader

---
 .../ArtistView/PopularTracks/index.tsx        | 10 +++---
 .../app/app/components/ArtistView/index.tsx   | 32 +++++++++++--------
 .../components/FavoriteTracksView/styles.scss |  1 +
 packages/app/app/reducers/search.ts           |  9 ++++--
 packages/core/src/rest/Spotify.ts             |  2 +-
 .../ui/lib/components/AlbumGrid/styles.scss   |  4 +++
 .../lib/components/GridTrackTable/index.tsx   |  1 -
 7 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
index 0d1fe8fa8b..f7fda12676 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.tsx
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -19,6 +19,8 @@ type AddAllButtonProps = {
   t: TFunction;
 }
 
+const MAX_POPULAR_TRACKS_DISPLAYED = 15;
+
 export const AddAllButton: React.FC<AddAllButtonProps> = ({
   handleAddAll,
   t
@@ -57,7 +59,7 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const toggleExpand = () => setExpanded(!expanded);
   const handleAddAll = () => {
     tracks
-      .slice(0, tracks.length > 15 ? 15 : tracks.length)
+      .slice(0, Math.min(tracks.length, MAX_POPULAR_TRACKS_DISPLAYED))
       .forEach(track => {
         addToQueue({
           artist: artist.name,
@@ -85,15 +87,15 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
           handleAddAll={handleAddAll}
           t={t}
         />
-        <div 
+        <div
           className={styles.popular_tracks_table_container}
-          style={{ height: expanded ? `calc(48px + (${tracks.length}*42px))` : undefined }}
+          style={{ height: expanded ? `calc(48px + (${Math.min(tracks.length, MAX_POPULAR_TRACKS_DISPLAYED)}*42px))` : undefined }}
         >
           <TrackTableContainer
             tracks={
               _(tracks)
                 .sortBy('playcount')
-                .takeRight(expanded ? 15 : 5)
+                .takeRight(expanded ? MAX_POPULAR_TRACKS_DISPLAYED : 5)
                 .value()
             }
             displayDeleteButton={false}
diff --git a/packages/app/app/components/ArtistView/index.tsx b/packages/app/app/components/ArtistView/index.tsx
index fdec6d0a74..ae4a2125a0 100644
--- a/packages/app/app/components/ArtistView/index.tsx
+++ b/packages/app/app/components/ArtistView/index.tsx
@@ -41,6 +41,7 @@ const ArtistView: React.FC<ArtistViewProps> = ({
   const { t } = useTranslation('artist');
   const isLoading = () => artist.loading || false;
   const isOnTour = () => artist.onTour || false;
+  const areReleasesLoading = () => artist.releasesLoading || isLoading();
   const onAlbumClick = (album) => {
     albumInfoSearch(album.id, album.type, album);
     history.push('/album/' + album.id);
@@ -109,20 +110,23 @@ const ArtistView: React.FC<ArtistViewProps> = ({
             <hr />
           </>
         }
-        <ArtistAlbums 
-          albums={artist?.releases ?? []}
-          onAlbumClick={onAlbumClick}
-          isLoading={isLoading()}
-          strings={{
-            header: t('artist-albums.header'),
-            sortByReleaseDate: t('artist-albums.sort-by-release-date'),
-            sortByAZ: t('artist-albums.sort-by-az'),
-            sortByMostPlayed: t('artist-albums.sort-by-most-played'),
-            filterPlaceholder: t('artist-albums.filter-placeholder')
-          }}
-          withSortByAZ
-          withSortByReleaseDate
-        />
+        {
+          (areReleasesLoading() || artist.releases?.length > 0) && 
+          <ArtistAlbums 
+            albums={artist?.releases ?? []}
+            onAlbumClick={onAlbumClick}
+            isLoading={areReleasesLoading()}
+            strings={{
+              header: t('artist-albums.header'),
+              sortByReleaseDate: t('artist-albums.sort-by-release-date'),
+              sortByAZ: t('artist-albums.sort-by-az'),
+              sortByMostPlayed: t('artist-albums.sort-by-most-played'),
+              filterPlaceholder: t('artist-albums.filter-placeholder')
+            }}
+            withSortByAZ
+            withSortByReleaseDate
+          />
+        }
       </Dimmer.Dimmable>
     </div>
   );
diff --git a/packages/app/app/components/FavoriteTracksView/styles.scss b/packages/app/app/components/FavoriteTracksView/styles.scss
index 87857c5aa9..fe0e622fe3 100644
--- a/packages/app/app/components/FavoriteTracksView/styles.scss
+++ b/packages/app/app/components/FavoriteTracksView/styles.scss
@@ -17,6 +17,7 @@
   .header_container {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
   .tracks_container {
diff --git a/packages/app/app/reducers/search.ts b/packages/app/app/reducers/search.ts
index c63289f258..92e7e78cdf 100644
--- a/packages/app/app/reducers/search.ts
+++ b/packages/app/app/reducers/search.ts
@@ -5,8 +5,13 @@ import { YoutubeResult } from '@nuclear/core/src/rest/Youtube';
 import { ActionType, getType } from 'typesafe-actions';
 import { SearchActions } from '../actions/search';
 
-export type ArtistDetailsState = Partial<ArtistDetails> & {loading?: boolean, error?: boolean, releases?: SearchResultsAlbum[],
-  releasesLoading?: boolean, releasesError?: boolean}
+export type ArtistDetailsState = Partial<ArtistDetails> & {
+  loading?: boolean, 
+  error?: boolean, 
+  releases?: SearchResultsAlbum[],
+  releasesLoading?: boolean, 
+  releasesError?: boolean
+}
 
 export type AlbumDetailsState = Partial<AlbumDetails> & {loading?: boolean, error?: boolean}
 
diff --git a/packages/core/src/rest/Spotify.ts b/packages/core/src/rest/Spotify.ts
index 172fed0f50..6d3c1a448f 100644
--- a/packages/core/src/rest/Spotify.ts
+++ b/packages/core/src/rest/Spotify.ts
@@ -184,7 +184,7 @@ class SpotifyClient {
     let data: SpotifyPaginatedResponse<SpotifySimplifiedAlbum> = await this.get(`${SPOTIFY_API_URL}/artists/${id}/albums?include_groups=album`);
     albums = data.items;
 
-    while (data.next) {
+    while (data.next && data.items?.length >= data.limit) {
       const nextData: SpotifyPaginatedResponse<SpotifySimplifiedAlbum> = await this.get(data.next);
       albums = [...albums, ...nextData.items];
       data = nextData;
diff --git a/packages/ui/lib/components/AlbumGrid/styles.scss b/packages/ui/lib/components/AlbumGrid/styles.scss
index efff4ac862..fdf1f1def6 100644
--- a/packages/ui/lib/components/AlbumGrid/styles.scss
+++ b/packages/ui/lib/components/AlbumGrid/styles.scss
@@ -37,4 +37,8 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
+
+  .visible.dimmer {
+    padding: 8em 0;
+  }
 }
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 442156a26c..160296f1a2 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -230,7 +230,6 @@ export const GridTrackTable = <T extends Track>({
                   {column.render('Header', extraProps)}
                 </div>))
             }
-            <div data-testid='track-table-header-spacer' className={styles.track_table_header_spacer} />
           </div>
         ))}
       </div>

From e799711af7b7e2885042a1a7ef3eba0841f28201 Mon Sep 17 00:00:00 2001
From: waldo121 <17034517+waldo121@users.noreply.github.com>
Date: Thu, 12 Sep 2024 21:25:54 +0000
Subject: [PATCH 14/32] Block auxiliary(middle mouse button) clicks

---
 packages/app/app/App.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/app/app/App.js b/packages/app/app/App.js
index d456b1dbc0..0c904eb91d 100644
--- a/packages/app/app/App.js
+++ b/packages/app/app/App.js
@@ -67,9 +67,16 @@ class App extends React.PureComponent {
 
     this.updateConnectivityStatus(navigator.onLine);
     window.addEventListener('online', () => this.updateConnectivityStatus(true));
-    window.addEventListener('offline', () => this.updateConnectivityStatus(false)); 
+    window.addEventListener('offline', () => this.updateConnectivityStatus(false));
+    window.addEventListener('auxclick', this.blockMiddleClick);
   }
 
+  blockMiddleClick = (e) => {
+    // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+    if (e.button === 1) {
+      e.preventDefault();
+    }
+  } 
   updateConnectivityStatus = (isConnected) => {
     this.props.actions.changeConnectivity(isConnected);
   }

From c2c2fef8a445c3496ed8b3d8c17ef2dc9b1c059a Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Mon, 16 Sep 2024 01:15:25 +0200
Subject: [PATCH 15/32] Update table snapshots

---
 .../AlbumViewContainer.test.tsx.snap          |  4 --
 .../DashboardContainer.test.tsx.snap          |  4 --
 .../DeezerPlaylistAdapter.test.tsx.snap       |  4 --
 .../FavoritesContainer.tracks.test.tsx.snap   |  8 ----
 .../LibraryViewContainer.test.tsx.snap        |  4 --
 .../PlaylistViewContainer.test.tsx.snap       |  4 --
 .../SpotifyPlaylistAdapter.test.tsx.snap      |  4 --
 .../TrackTable/Cells/SelectionCell.tsx        | 17 +++++---
 .../gridTrackTable.test.tsx.snap              | 42 ++++++++-----------
 9 files changed, 29 insertions(+), 62 deletions(-)

diff --git a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
index a9ffadc6c9..ec13fc34f1 100644
--- a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
@@ -213,10 +213,6 @@ exports[`Album view container should display an album 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="track_table_header_spacer"
-                    data-testid="track-table-header-spacer"
-                  />
                 </div>
               </div>
               <div
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
index 9c790729ca..574bcae2ae 100644
--- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
+++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
@@ -685,10 +685,6 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         </div>
                       </div>
                     </div>
-                    <div
-                      class="track_table_header_spacer"
-                      data-testid="track-table-header-spacer"
-                    />
                   </div>
                 </div>
                 <div
diff --git a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
index 98dcd394d8..fab5440cee 100644
--- a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
@@ -215,10 +215,6 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  class="track_table_header_spacer"
-                  data-testid="track-table-header-spacer"
-                />
               </div>
             </div>
             <div
diff --git a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
index df14bba164..4e1f66bd3b 100644
--- a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
+++ b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
@@ -329,10 +329,6 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  class="track_table_header_spacer"
-                  data-testid="track-table-header-spacer"
-                />
               </div>
             </div>
             <div
@@ -902,10 +898,6 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     </div>
                   </div>
                 </div>
-                <div
-                  class="track_table_header_spacer"
-                  data-testid="track-table-header-spacer"
-                />
               </div>
             </div>
             <div
diff --git a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
index d18539528e..a8cd90b495 100644
--- a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
@@ -952,10 +952,6 @@ exports[`Library view container should display local library in simple list mode
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="track_table_header_spacer"
-                    data-testid="track-table-header-spacer"
-                  />
                 </div>
               </div>
               <div
diff --git a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
index bdad210ee2..32b051b9c3 100644
--- a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
@@ -225,10 +225,6 @@ exports[`Playlist view container should display a playlist 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  class="track_table_header_spacer"
-                  data-testid="track-table-header-spacer"
-                />
               </div>
             </div>
             <div
diff --git a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
index f24605ddbf..43e9ec2336 100644
--- a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
@@ -228,10 +228,6 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  class="track_table_header_spacer"
-                  data-testid="track-table-header-spacer"
-                />
               </div>
             </div>
             <div
diff --git a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
index 3a96f53e2e..1d0091d50b 100644
--- a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
@@ -1,18 +1,23 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { ChangeEvent, TdHTMLAttributes } from 'react';
 import cx from 'classnames';
-import { CellProps, UseRowSelectRowProps } from 'react-table';
+import { Cell, Row, TableToggleRowsSelectedProps, UseRowSelectRowProps } from 'react-table';
 
 import { Checkbox } from '../../..';
 import { Track } from '../../../types';
 import styles from '../styles.scss';
 
-const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> = ({
+type SelectionCellProps<T extends Track> = {
+  cell: Cell<T>;
+  row: Row<T> & UseRowSelectRowProps<T>
+}
+
+const SelectionCell = <T extends Track>({
   cell,
-  row,
-  getToggleRowSelectedProps
-}) => {
-  const toggleRowSelectedProps = getToggleRowSelectedProps();
+  row
+}: SelectionCellProps<T>) => {
+  const toggleRowSelectedProps: TableToggleRowsSelectedProps = row.getToggleRowSelectedProps();
+
   return <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.select_cell, styles.narrow)}>
     <Checkbox 
       {...toggleRowSelectedProps}
diff --git a/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
index 852eeb15f0..a077332643 100644
--- a/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
+++ b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`(Snapshot) Grid track table - empty should render correctly 1`] = `
         <div
           class="track_table_header_row"
           role="row"
-          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em auto;"
+          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em auto;"
         >
           <div
             class="track_table_header_cell"
@@ -33,8 +33,13 @@ exports[`(Snapshot) Grid track table - empty should render correctly 1`] = `
           >
             <div
               class="text_header centered"
+              data-testid="position-header"
             >
               Position
+              <i
+                aria-hidden="true"
+                class="sort content ascending icon text_header_icon"
+              />
             </div>
           </div>
           <div
@@ -68,10 +73,6 @@ exports[`(Snapshot) Grid track table - empty should render correctly 1`] = `
               class="text_header"
             >
               Title
-              <i
-                aria-hidden="true"
-                class="sort content ascending icon text_header_icon"
-              />
             </div>
           </div>
           <div
@@ -137,10 +138,6 @@ exports[`(Snapshot) Grid track table - empty should render correctly 1`] = `
               </div>
             </div>
           </div>
-          <div
-            class="track_table_header_spacer"
-            data-test-id="track-table-header-spacer"
-          />
         </div>
       </div>
       <div
@@ -179,7 +176,7 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
         <div
           class="track_table_header_row"
           role="row"
-          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em auto;"
+          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em auto;"
         >
           <div
             class="track_table_header_cell"
@@ -197,8 +194,13 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
           >
             <div
               class="text_header centered"
+              data-testid="position-header"
             >
               Position
+              <i
+                aria-hidden="true"
+                class="sort content ascending icon text_header_icon"
+              />
             </div>
           </div>
           <div
@@ -232,10 +234,6 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               class="text_header"
             >
               Title
-              <i
-                aria-hidden="true"
-                class="sort content ascending icon text_header_icon"
-              />
             </div>
           </div>
           <div
@@ -301,10 +299,6 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               </div>
             </div>
           </div>
-          <div
-            class="track_table_header_spacer"
-            data-test-id="track-table-header-spacer"
-          />
         </div>
       </div>
       <div
@@ -325,9 +319,9 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               class="grid_track_table_row"
               data-rbd-draggable-context-id="1"
               data-rbd-draggable-id="0"
-              data-test-id="track-table-row"
+              data-testid="track-table-row"
               role="row"
-              style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em;"
+              style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
               tabindex="0"
             >
               <div
@@ -468,9 +462,9 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               class="grid_track_table_row"
               data-rbd-draggable-context-id="1"
               data-rbd-draggable-id="1"
-              data-test-id="track-table-row"
+              data-testid="track-table-row"
               role="row"
-              style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em;"
+              style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
               tabindex="1"
             >
               <div
@@ -611,9 +605,9 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               class="grid_track_table_row"
               data-rbd-draggable-context-id="1"
               data-rbd-draggable-id="2"
-              data-test-id="track-table-row"
+              data-testid="track-table-row"
               role="row"
-              style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 1fr 6em;"
+              style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
               tabindex="2"
             >
               <div

From 068590d09edd5a7b33aed5c9edab78d7f6e84f11 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Mon, 16 Sep 2024 01:37:52 +0200
Subject: [PATCH 16/32] Simplify artist view

---
 .../app/app/components/ArtistView/index.tsx   |  7 +-
 .../ArtistViewContainer.test.tsx              |  1 -
 .../ArtistViewContainer.test.tsx.snap         | 76 +++++++++++++++++--
 .../containers/ArtistViewContainer/hooks.ts   | 17 +++--
 .../containers/ArtistViewContainer/index.tsx  | 19 +----
 packages/app/test/storeBuilders.ts            |  3 +-
 6 files changed, 89 insertions(+), 34 deletions(-)

diff --git a/packages/app/app/components/ArtistView/index.tsx b/packages/app/app/components/ArtistView/index.tsx
index ae4a2125a0..4a8e9159b0 100644
--- a/packages/app/app/components/ArtistView/index.tsx
+++ b/packages/app/app/components/ArtistView/index.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import cx from 'classnames';
 import { get, isEmpty, take } from 'lodash';
-import { Dimmer, Loader, Icon } from 'semantic-ui-react';
+import { Dimmer, Loader } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
 
-import AlbumList from '../AlbumList';
 import SimilarArtists from './SimilarArtists';
 import PopularTracks from './PopularTracks';
 
@@ -111,8 +110,8 @@ const ArtistView: React.FC<ArtistViewProps> = ({
           </>
         }
         {
-          (areReleasesLoading() || artist.releases?.length > 0) && 
-          <ArtistAlbums 
+          (areReleasesLoading() || artist.releases?.length > 0) &&
+          <ArtistAlbums
             albums={artist?.releases ?? []}
             onAlbumClick={onAlbumClick}
             isLoading={areReleasesLoading()}
diff --git a/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx b/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx
index 87e044b928..693eb45cdf 100644
--- a/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx
+++ b/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx
@@ -7,7 +7,6 @@ import { AnyProps, configureMockStore, setupI18Next, TestRouterProvider, TestSto
 import MainContentContainer from '../MainContentContainer';
 import { buildElectronStoreState, buildStoreState } from '../../../test/storeBuilders';
 import userEvent from '@testing-library/user-event';
-import { SearchResultsSource } from '@nuclear/core/src/plugins/plugins.types';
 
 describe('Artist view container', () => {
   beforeAll(() => {
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index 4afeab63a4..52ef8994fa 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -199,10 +199,6 @@ exports[`Artist view container should display an artist 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        class="track_table_header_spacer"
-                        data-testid="track-table-header-spacer"
-                      />
                     </div>
                   </div>
                   <div
@@ -643,7 +639,77 @@ exports[`Artist view container should display an artist 1`] = `
           >
             <div
               class="album_cards"
-            />
+            >
+              <div
+                class="nuclear card_container"
+                data-testid="album-card"
+              >
+                <div
+                  class="card animated"
+                >
+                  <div
+                    class="thumbnail"
+                  >
+                    <div
+                      class="overlay"
+                    />
+                  </div>
+                  <div
+                    class="card_content"
+                  >
+                    <h4>
+                      First test album
+                    </h4>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="nuclear card_container"
+                data-testid="album-card"
+              >
+                <div
+                  class="card animated"
+                >
+                  <div
+                    class="thumbnail"
+                  >
+                    <div
+                      class="overlay"
+                    />
+                  </div>
+                  <div
+                    class="card_content"
+                  >
+                    <h4>
+                      Test album 2
+                    </h4>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="nuclear card_container"
+                data-testid="album-card"
+              >
+                <div
+                  class="card animated"
+                >
+                  <div
+                    class="thumbnail"
+                  >
+                    <div
+                      class="overlay"
+                    />
+                  </div>
+                  <div
+                    class="card_content"
+                  >
+                    <h4>
+                      Test album 1
+                    </h4>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/app/app/containers/ArtistViewContainer/hooks.ts b/packages/app/app/containers/ArtistViewContainer/hooks.ts
index d24d8c1c77..5f1cad9e38 100644
--- a/packages/app/app/containers/ArtistViewContainer/hooks.ts
+++ b/packages/app/app/containers/ArtistViewContainer/hooks.ts
@@ -1,10 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router';
-import _ from 'lodash';
+import { find, isEmpty } from 'lodash';
 
 import * as QueueActions from '../../actions/queue';
-import { artistInfoSearchByName, albumInfoSearch } from '../../actions/search';
+import { artistInfoSearchByName, albumInfoSearch, artistReleasesSearch } from '../../actions/search';
 import * as FavoritesActions from '../../actions/favorites';
 import { searchSelectors } from '../../selectors/search';
 import { favoritesSelectors } from '../../selectors/favorites';
@@ -16,7 +16,8 @@ export const useArtistViewProps = () => {
   const { artistId } = useParams<{ artistId: string }>();
   const artistDetails = useSelector(searchSelectors.artistDetails);
   const artist = artistDetails[artistId];
-
+  const source = artist?.source;
+  
   const addTrackToQueue = useCallback(async (item) => {
     dispatch(QueueActions.addToQueue(item));
   }, [dispatch]);
@@ -32,7 +33,7 @@ export const useArtistViewProps = () => {
   const favoriteArtists: { id: string }[] = useSelector(favoritesSelectors.artists);
 
   const getIsFavorite = (currentArtist, favoriteArtists) => {
-    const favoriteArtist = _.find(favoriteArtists, {
+    const favoriteArtist = find(favoriteArtists, {
       id: currentArtist?.id
     });
     return Boolean(favoriteArtist);
@@ -48,6 +49,12 @@ export const useArtistViewProps = () => {
     dispatch(FavoritesActions.removeFavoriteArtist(artist));
   }, [artist, dispatch]);
 
+  useEffect(() => {
+    if (artistId !== 'loading' && isEmpty(artist.releases)) {
+      dispatch(artistReleasesSearch(artistId, source));
+    }
+  }, [artistId, source]);
+
   return {
     artist,
     isFavorite,
diff --git a/packages/app/app/containers/ArtistViewContainer/index.tsx b/packages/app/app/containers/ArtistViewContainer/index.tsx
index b6db4da066..7415db5d5d 100644
--- a/packages/app/app/containers/ArtistViewContainer/index.tsx
+++ b/packages/app/app/containers/ArtistViewContainer/index.tsx
@@ -1,27 +1,10 @@
-import React, { useEffect, useCallback } from 'react';
-import { useParams } from 'react-router';
-import { useDispatch } from 'react-redux';
+import React from 'react';
 
 import ArtistView from '../../components/ArtistView';
-import { artistReleasesSearch } from '../../actions/search';
 import { useArtistViewProps } from './hooks';
-import { SearchResultsSource } from '@nuclear/core/src/plugins/plugins.types';
 
 const ArtistViewContainer: React.FC = () => {
   const props = useArtistViewProps();
-  const { artistId } = useParams<{ artistId: string }>();
-  const source = props.artist?.source;
-  const dispatch = useDispatch();
-  const artistReleasesSearchCallback = useCallback(async (artistId: string, source: SearchResultsSource) => {
-    dispatch(artistReleasesSearch(artistId, source));
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (artistId !== 'loading') {
-      artistReleasesSearchCallback(artistId, source);
-    }
-  }, [artistId, source, artistReleasesSearchCallback]);
-
   return <ArtistView
     {...props}
   />;
diff --git a/packages/app/test/storeBuilders.ts b/packages/app/test/storeBuilders.ts
index cf887d5369..525187f304 100644
--- a/packages/app/test/storeBuilders.ts
+++ b/packages/app/test/storeBuilders.ts
@@ -326,7 +326,8 @@ export const buildStoreState = () => {
                   default:
                     return { id: 'test-artist-id' };
                   }
-                })
+                }),
+                fetchArtistAlbums: jest.fn()
               } as any as MetaProvider,
               {
                 name: 'Another Meta Provider',

From 79125647b307517af010382ab44adacebde5b507 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Tue, 17 Sep 2024 22:16:04 +0200
Subject: [PATCH 17/32] CSS adjustment fr compact play queue

---
 packages/app/app/app.global.scss                  | 6 ++++++
 packages/app/app/components/PlayQueue/styles.scss | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/app/app/app.global.scss b/packages/app/app/app.global.scss
index 9eea422c9f..5b876734ef 100644
--- a/packages/app/app/app.global.scss
+++ b/packages/app/app/app.global.scss
@@ -56,6 +56,12 @@ a.disabled {
   }
 }
 
+button.ui.button {
+  & + & {
+    margin-left: 0.5rem;
+  }
+}
+
 input {
   &::selection {
     background: rgba($lightbg, 0.85);
diff --git a/packages/app/app/components/PlayQueue/styles.scss b/packages/app/app/components/PlayQueue/styles.scss
index 1b5376ecd3..f081092241 100644
--- a/packages/app/app/components/PlayQueue/styles.scss
+++ b/packages/app/app/components/PlayQueue/styles.scss
@@ -50,5 +50,12 @@
         display: none;
       }
     }
+
+    .play_queue_items {
+      div div::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+      }
+    }
   }
 }

From 0a92bb17232ada4a79ed40c5816c1b3f7a0f5df1 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Tue, 17 Sep 2024 23:29:31 +0200
Subject: [PATCH 18/32] Use an agent to support cookies when fetching youtube
 streams

---
 packages/core/src/rest/Youtube.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/rest/Youtube.ts b/packages/core/src/rest/Youtube.ts
index 77afaca890..eb39cb0ac9 100644
--- a/packages/core/src/rest/Youtube.ts
+++ b/packages/core/src/rest/Youtube.ts
@@ -16,6 +16,7 @@ export type YoutubeResult = {
 }
 
 const baseUrl = 'http://www.youtube.com/watch?v=';
+const agent = ytdl.createAgent();
 
 function isValidURL(str) {
   const pattern = new RegExp('^(https?:\\/\\/)' + // protocol
@@ -84,7 +85,7 @@ export async function handleYoutubePlaylist(url: string): Promise<YoutubeResult[
 }
 
 async function handleYoutubeVideo(url: string): Promise<YoutubeResult[]> {
-  return ytdl.getInfo(url)
+  return ytdl.getInfo(url, { agent })
     .then(info => {
       if (info.videoDetails) {
         const videoDetails = info.videoDetails;
@@ -166,7 +167,7 @@ export async function trackSearchByString(query: StreamQuery, sourceName?: strin
 export const getStreamForId = async (id: string, sourceName: string, useSponsorBlock = true): Promise<StreamData> => {
   try {
     const videoUrl = baseUrl + id;
-    const trackInfo = await ytdl.getInfo(videoUrl);
+    const trackInfo = await ytdl.getInfo(videoUrl, { agent });
     const formatInfo = ytdl.chooseFormat(trackInfo.formats, { quality: 'highestaudio' });
     const segments = useSponsorBlock ? await SponsorBlock.getSegments(id) : [];
 

From 6a86331b63f8e5ac0f5fb59a21a23abdb2a90a84 Mon Sep 17 00:00:00 2001
From: waldo121 <17034517+waldo121@users.noreply.github.com>
Date: Tue, 17 Sep 2024 18:10:13 -0400
Subject: [PATCH 19/32] Add error handling on image loading for album covers &
 thumbnails

---
 packages/ui/lib/components/ContextPopup/index.tsx         | 7 ++++++-
 packages/ui/lib/components/Cover/index.tsx                | 6 +++++-
 .../lib/components/GridTrackTable/Cells/ThumbnailCell.tsx | 8 +++++++-
 .../ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx  | 6 +++++-
 packages/ui/lib/components/QueueItem/index.tsx            | 7 ++++++-
 5 files changed, 29 insertions(+), 5 deletions(-)

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<ContextPopupProps> = ({
       <div className={styles.popup_header}>
         {thumb &&
         <div className={styles.popup_thumb}>
-          <img src={thumb} />
+          <Img 
+            src={thumb}
+            unloader={<img src={artPlaceholder}/>}
+            />
         </div>}
         <div className={styles.popup_info}>
           <div className={styles.popup_title}>
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<CoverProps> = ({ cover = String(artPlaceholder) }) => (
     common.nuclear,
     styles.cover_container
   )}>
-    <img src={cover || String(artPlaceholder)} />
+    <Img 
+      src={cover || String(artPlaceholder)}
+      unloader={<img src={String(artPlaceholder)}/>} 
+     />
   </div>
 );
 
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<CellProps<Track>> = ({
   cell,
@@ -12,5 +14,9 @@ export const ThumbnailCell: React.FC<CellProps<Track>> = ({
   className={cx(styles.grid_track_table_cell, styles.thumbnail_cell)}
   {...cell.getCellProps()}
 >
-  <img className={styles.thumbnail_cell_thumbnail} src={value} />
+  <Img 
+    className={styles.thumbnail_cell_thumbnail} 
+    src={value}
+    unloader={<img className={styles.thumbnail_cell_thumbnail} src={artPlaceholder}/>}
+    />
 </div>;
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<MiniTrackInfoProps> = ({
 }) => (
     <div className={styles.mini_track_info}>
       <div className={styles.mini_cover}>
-        <img src={cover} />
+      <Img
+        src={cover}
+        unloader={<img src={artPlaceholder} />}
+        />
       </div>
       {
         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<QueueItemProps> = ({
       <div className={styles.thumbnail}>
         {track.loading
           ? <Loader type='small' className={isCompact && styles.compact_loader} />
-          : <img src={track.thumbnail ?? artPlaceholder} />}
+          : <Img 
+              src={track.thumbnail ?? artPlaceholder}
+              unloader={<img src={artPlaceholder}/>}
+            />}
 
         <div
           data-testid='queue-item-remove'

From 69efba4830b8663c64e8520f7ef4e1f6f9369fbb Mon Sep 17 00:00:00 2001
From: waldo121 <17034517+waldo121@users.noreply.github.com>
Date: Tue, 17 Sep 2024 18:10:22 -0400
Subject: [PATCH 20/32] update snapshots

---
 .../AlbumViewContainer.test.tsx.snap          | 12 +----
 .../ArtistViewContainer.test.tsx.snap         | 21 ++------
 .../DashboardContainer.test.tsx.snap          | 14 +----
 .../DeezerPlaylistAdapter.test.tsx.snap       | 14 +----
 .../FavoritesContainer.tracks.test.tsx.snap   | 52 +++----------------
 .../LibraryViewContainer.test.tsx.snap        | 21 ++------
 .../PlayQueueContainer.test.tsx.snap          | 27 ----------
 .../PlaylistViewContainer.test.tsx.snap       | 14 +----
 .../SpotifyPlaylistAdapter.test.tsx.snap      | 14 +----
 .../ui/test/__snapshots__/cover.test.tsx.snap |  6 +--
 .../gridTrackTable.test.tsx.snap              | 21 ++------
 .../__snapshots__/miniPlayer.test.tsx.snap    |  6 +--
 .../__snapshots__/playerBar.test.tsx.snap     |  6 +--
 13 files changed, 30 insertions(+), 198 deletions(-)

diff --git a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
index ec13fc34f1..8e76c40a0d 100644
--- a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
@@ -580,11 +580,7 @@ exports[`Album view container should display an album 1`] = `
       >
         <div
           class="nuclear cover_container"
-        >
-          <img
-            src="test-file-stub"
-          />
-        </div>
+        />
       </div>
       <div
         class="player_controls"
@@ -747,11 +743,7 @@ exports[`Album view container should show that an album is still loading 1`] = `
       >
         <div
           class="nuclear cover_container"
-        >
-          <img
-            src="test-file-stub"
-          />
-        </div>
+        />
       </div>
       <div
         class="player_controls"
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index 52ef8994fa..8b4b438080 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -227,12 +227,7 @@ exports[`Artist view container should display an artist 1`] = `
                           <div
                             class="grid_track_table_cell thumbnail_cell"
                             role="cell"
-                          >
-                            <img
-                              class="thumbnail_cell_thumbnail"
-                              src="test-file-stub"
-                            />
-                          </div>
+                          />
                           <div
                             class="grid_track_table_cell favorite_cell"
                             data-testid="favorite-cell"
@@ -323,12 +318,7 @@ exports[`Artist view container should display an artist 1`] = `
                           <div
                             class="grid_track_table_cell thumbnail_cell"
                             role="cell"
-                          >
-                            <img
-                              class="thumbnail_cell_thumbnail"
-                              src="test-file-stub"
-                            />
-                          </div>
+                          />
                           <div
                             class="grid_track_table_cell favorite_cell"
                             data-testid="favorite-cell"
@@ -419,12 +409,7 @@ exports[`Artist view container should display an artist 1`] = `
                           <div
                             class="grid_track_table_cell thumbnail_cell"
                             role="cell"
-                          >
-                            <img
-                              class="thumbnail_cell_thumbnail"
-                              src="test-file-stub"
-                            />
-                          </div>
+                          />
                           <div
                             class="grid_track_table_cell favorite_cell"
                             data-testid="favorite-cell"
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
index 574bcae2ae..f86d37720a 100644
--- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
+++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
@@ -733,12 +733,7 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         <div
                           class="grid_track_table_cell thumbnail_cell"
                           role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="top track album cover 1"
-                          />
-                        </div>
+                        />
                         <div
                           class="grid_track_table_cell favorite_cell"
                           data-testid="favorite-cell"
@@ -855,12 +850,7 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         <div
                           class="grid_track_table_cell thumbnail_cell"
                           role="cell"
-                        >
-                          <img
-                            class="thumbnail_cell_thumbnail"
-                            src="top track album cover 2"
-                          />
-                        </div>
+                        />
                         <div
                           class="grid_track_table_cell favorite_cell"
                           data-testid="favorite-cell"
diff --git a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
index fab5440cee..81a25f2e31 100644
--- a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
@@ -263,12 +263,7 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="test-file-stub"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell favorite_cell"
                       data-testid="favorite-cell"
@@ -379,12 +374,7 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="test-file-stub"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell favorite_cell"
                       data-testid="favorite-cell"
diff --git a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
index 4e1f66bd3b..36ffa9d1ff 100644
--- a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
+++ b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
@@ -53,11 +53,7 @@ exports[`Favorite tracks view container should display empty state 1`] = `
       >
         <div
           class="nuclear cover_container"
-        >
-          <img
-            src="test-file-stub"
-          />
-        </div>
+        />
       </div>
       <div
         class="player_controls"
@@ -392,12 +388,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="https://test-track-thumb-url"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
                       data-testid="title-cell"
@@ -508,12 +499,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="https://test-track-thumb-url"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
                       data-testid="title-cell"
@@ -606,11 +592,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
       >
         <div
           class="nuclear cover_container"
-        >
-          <img
-            src="test-file-stub"
-          />
-        </div>
+        />
       </div>
       <div
         class="player_controls"
@@ -961,12 +943,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="https://test-track-thumb-url"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
                       data-testid="title-cell"
@@ -1077,12 +1054,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="https://test-track-thumb-url"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
                       data-testid="title-cell"
@@ -1175,11 +1147,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
       >
         <div
           class="nuclear cover_container"
-        >
-          <img
-            src="test-file-stub"
-          />
-        </div>
+        />
       </div>
       <div
         class="player_controls"
@@ -1320,11 +1288,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
       >
         <div
           class="popup_thumb"
-        >
-          <img
-            src="https://test-track-thumb-url"
-          />
-        </div>
+        />
         <div
           class="popup_info"
         >
diff --git a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
index a8cd90b495..b47caf8a59 100644
--- a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
@@ -1000,12 +1000,7 @@ exports[`Library view container should display local library in simple list mode
                       <div
                         class="grid_track_table_cell thumbnail_cell"
                         role="cell"
-                      >
-                        <img
-                          class="thumbnail_cell_thumbnail"
-                          src="local track thumbnail 1"
-                        />
-                      </div>
+                      />
                       <div
                         class="grid_track_table_cell text_cell title_cell"
                         data-testid="title-cell"
@@ -1113,12 +1108,7 @@ exports[`Library view container should display local library in simple list mode
                       <div
                         class="grid_track_table_cell thumbnail_cell"
                         role="cell"
-                      >
-                        <img
-                          class="thumbnail_cell_thumbnail"
-                          src="local track thumbnail 2"
-                        />
-                      </div>
+                      />
                       <div
                         class="grid_track_table_cell text_cell title_cell"
                         data-testid="title-cell"
@@ -1226,12 +1216,7 @@ exports[`Library view container should display local library in simple list mode
                       <div
                         class="grid_track_table_cell thumbnail_cell"
                         role="cell"
-                      >
-                        <img
-                          class="thumbnail_cell_thumbnail"
-                          src="local track thumbnail 3"
-                        />
-                      </div>
+                      />
                       <div
                         class="grid_track_table_cell text_cell title_cell"
                         data-testid="title-cell"
diff --git a/packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap b/packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap
index 2edc34daff..08f1c32a12 100644
--- a/packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap
+++ b/packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap
@@ -202,9 +202,6 @@ exports[`Play Queue container should display a context popup on right click 1`]
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="https://test-track-thumb-url"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -261,9 +258,6 @@ exports[`Play Queue container should display a context popup on right click 1`]
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="https://test-track-thumb-url"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -320,9 +314,6 @@ exports[`Play Queue container should display a context popup on right click 1`]
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="test-file-stub"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -790,9 +781,6 @@ exports[`Play Queue container should display a context popup on right click for
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="https://test-track-thumb-url"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -849,9 +837,6 @@ exports[`Play Queue container should display a context popup on right click for
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="https://test-track-thumb-url"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -908,9 +893,6 @@ exports[`Play Queue container should display a context popup on right click for
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="test-file-stub"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -1337,9 +1319,6 @@ exports[`Play Queue container should display tracks in the queue 1`] = `
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="https://test-track-thumb-url"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -1396,9 +1375,6 @@ exports[`Play Queue container should display tracks in the queue 1`] = `
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="https://test-track-thumb-url"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
@@ -1455,9 +1431,6 @@ exports[`Play Queue container should display tracks in the queue 1`] = `
                 <div
                   class="thumbnail"
                 >
-                  <img
-                    src="test-file-stub"
-                  />
                   <div
                     class="thumbnail_overlay"
                     data-testid="queue-item-remove"
diff --git a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
index 32b051b9c3..4908ae42cf 100644
--- a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
@@ -292,12 +292,7 @@ exports[`Playlist view container should display a playlist 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="test thumbnail"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell favorite_cell"
                       data-testid="favorite-cell"
@@ -427,12 +422,7 @@ exports[`Playlist view container should display a playlist 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="test thumbnail 2"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell favorite_cell"
                       data-testid="favorite-cell"
diff --git a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
index 43e9ec2336..2c6e464caf 100644
--- a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
@@ -276,12 +276,7 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="thumb.jpg"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell favorite_cell"
                       data-testid="favorite-cell"
@@ -398,12 +393,7 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     <div
                       class="grid_track_table_cell thumbnail_cell"
                       role="cell"
-                    >
-                      <img
-                        class="thumbnail_cell_thumbnail"
-                        src="test-file-stub"
-                      />
-                    </div>
+                    />
                     <div
                       class="grid_track_table_cell favorite_cell"
                       data-testid="favorite-cell"
diff --git a/packages/ui/test/__snapshots__/cover.test.tsx.snap b/packages/ui/test/__snapshots__/cover.test.tsx.snap
index a3fa51bda0..334e2d3a36 100644
--- a/packages/ui/test/__snapshots__/cover.test.tsx.snap
+++ b/packages/ui/test/__snapshots__/cover.test.tsx.snap
@@ -4,10 +4,6 @@ exports[`(Snapshot) Cover should render correctly 1`] = `
 <DocumentFragment>
   <div
     class="nuclear cover_container"
-  >
-    <img
-      src="https://i.imgur.com/4euOws2.jpg"
-    />
-  </div>
+  />
 </DocumentFragment>
 `;
diff --git a/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
index a077332643..9995eeaa55 100644
--- a/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
+++ b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
@@ -362,12 +362,7 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               <div
                 class="grid_track_table_cell thumbnail_cell"
                 role="cell"
-              >
-                <img
-                  class="thumbnail_cell_thumbnail"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
+              />
               <div
                 class="grid_track_table_cell favorite_cell"
                 data-testid="favorite-cell"
@@ -505,12 +500,7 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               <div
                 class="grid_track_table_cell thumbnail_cell"
                 role="cell"
-              >
-                <img
-                  class="thumbnail_cell_thumbnail"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
+              />
               <div
                 class="grid_track_table_cell favorite_cell"
                 data-testid="favorite-cell"
@@ -648,12 +638,7 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               <div
                 class="grid_track_table_cell thumbnail_cell"
                 role="cell"
-              >
-                <img
-                  class="thumbnail_cell_thumbnail"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
+              />
               <div
                 class="grid_track_table_cell favorite_cell"
                 data-testid="favorite-cell"
diff --git a/packages/ui/test/__snapshots__/miniPlayer.test.tsx.snap b/packages/ui/test/__snapshots__/miniPlayer.test.tsx.snap
index 35a8a3ac62..8b0d51b7c3 100644
--- a/packages/ui/test/__snapshots__/miniPlayer.test.tsx.snap
+++ b/packages/ui/test/__snapshots__/miniPlayer.test.tsx.snap
@@ -36,11 +36,7 @@ exports[`(Snapshot) Mini player should render correctly 1`] = `
     >
       <div
         class="mini_cover"
-      >
-        <img
-          src="https://i.imgur.com/4euOws2.jpg"
-        />
-      </div>
+      />
     </div>
     <div
       class="seekbar_wrapper"
diff --git a/packages/ui/test/__snapshots__/playerBar.test.tsx.snap b/packages/ui/test/__snapshots__/playerBar.test.tsx.snap
index fd271e41fd..6c83a5af07 100644
--- a/packages/ui/test/__snapshots__/playerBar.test.tsx.snap
+++ b/packages/ui/test/__snapshots__/playerBar.test.tsx.snap
@@ -23,11 +23,7 @@ exports[`(Snapshot) Player bar should render correctly 1`] = `
       >
         <div
           class="nuclear cover_container"
-        >
-          <img
-            src="https://i.imgur.com/4euOws2.jpg"
-          />
-        </div>
+        />
       </div>
       <div
         class="player_controls"

From d6e36f35f963eb11f9046f413c7788d9c6f6cf00 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Wed, 18 Sep 2024 09:59:05 +0200
Subject: [PATCH 21/32] v0.6.39

---
 .env                          |  2 +-
 lerna.json                    |  2 +-
 package-lock.json             | 44 +++++++++++++++++------------------
 package.json                  |  2 +-
 packages/app/package.json     |  8 +++----
 packages/core/package.json    |  4 ++--
 packages/i18n/package.json    |  2 +-
 packages/main/package.json    |  6 ++---
 packages/scanner/package.json |  2 +-
 packages/ui/package.json      |  4 ++--
 10 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/.env b/.env
index 83ef015d9d..60ece2d1c3 100644
--- a/.env
+++ b/.env
@@ -10,4 +10,4 @@ SOUNDCLOUD_API_KEY=22e8f71d7ca75e156d6b2f0e0a5172b3
 NUCLEAR_SERVICES_URL=https://qjrujsisccsvyvjnqtnq.supabase.co
 NUCLEAR_SERVICES_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFqcnVqc2lzY2Nzdnl2am5xdG5xIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTY1OTY0NjEsImV4cCI6MTk3MjE3MjQ2MX0.WQWcwBAQFNE259f2o8ruFln_UMLTFEn5aUD7KHrs9Aw
 NUCLEAR_VERIFICATION_SERVICE_URL=https://nuclear-verification-service.fly.dev
-NUCLEAR_VERSION="0.6.38"
\ No newline at end of file
+NUCLEAR_VERSION="0.6.39"
\ No newline at end of file
diff --git a/lerna.json b/lerna.json
index d5c2f477be..e54637f448 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.6.38"
+  "version": "0.6.39"
 }
diff --git a/package-lock.json b/package-lock.json
index c3b687ffce..93ce5ea762 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nuclear",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "nuclear",
-      "version": "0.6.38",
+      "version": "0.6.39",
       "hasInstallScript": true,
       "license": "AGPL-3.0",
       "workspaces": [
@@ -48634,13 +48634,13 @@
     },
     "packages/app": {
       "name": "@nuclear/app",
-      "version": "0.6.38",
+      "version": "0.6.39",
       "hasInstallScript": true,
       "license": "AGPL-3.0",
       "dependencies": {
-        "@nuclear/core": "^0.6.38",
-        "@nuclear/i18n": "^0.6.38",
-        "@nuclear/ui": "^0.6.38",
+        "@nuclear/core": "^0.6.39",
+        "@nuclear/i18n": "^0.6.39",
+        "@nuclear/ui": "^0.6.39",
         "@testing-library/jest-dom": "^5.16.4",
         "@types/react-window": "^1.8.5",
         "ajv": "^6.12.5",
@@ -48739,13 +48739,13 @@
     },
     "packages/core": {
       "name": "@nuclear/core",
-      "version": "0.6.38",
+      "version": "0.6.39",
       "license": "AGPL-3.0",
       "dependencies": {
         "@babel/core": "^7.9.0",
         "@babel/preset-env": "^7.9.5",
         "@babel/preset-react": "^7.9.4",
-        "@nuclear/scanner": "^0.6.38",
+        "@nuclear/scanner": "^0.6.39",
         "@supabase/supabase-js": "^1.35.4",
         "ajv": "^6.12.5",
         "bandcamp-scraper": "1.4.1",
@@ -48788,7 +48788,7 @@
     },
     "packages/i18n": {
       "name": "@nuclear/i18n",
-      "version": "0.6.38",
+      "version": "0.6.39",
       "license": "AGPL-3.0",
       "dependencies": {
         "i18next": "^21.3.3"
@@ -48802,11 +48802,11 @@
     },
     "packages/main": {
       "name": "@nuclear/main",
-      "version": "0.6.38",
+      "version": "0.6.39",
       "license": "AGPL-3.0",
       "dependencies": {
-        "@nuclear/core": "^0.6.38",
-        "@nuclear/scanner": "^0.6.38",
+        "@nuclear/core": "^0.6.39",
+        "@nuclear/scanner": "^0.6.39",
         "autobind-decorator": "^2.4.0",
         "body-parser": "^1.19.0",
         "concat-stream": "^2.0.0",
@@ -49409,7 +49409,7 @@
     },
     "packages/scanner": {
       "name": "@nuclear/scanner",
-      "version": "0.6.38",
+      "version": "0.6.39",
       "hasInstallScript": true,
       "license": "AGPL-3.0",
       "devDependencies": {
@@ -49419,10 +49419,10 @@
     },
     "packages/ui": {
       "name": "@nuclear/ui",
-      "version": "0.6.38",
+      "version": "0.6.39",
       "license": "AGPL-3.0",
       "dependencies": {
-        "@nuclear/core": "^0.6.38",
+        "@nuclear/core": "^0.6.39",
         "@types/react-window": "^1.8.5",
         "butterchurn": "^2.6.7",
         "butterchurn-presets": "^2.4.7",
@@ -53511,9 +53511,9 @@
         "@babel/preset-env": "^7.9.5",
         "@babel/preset-react": "^7.9.4",
         "@babel/preset-typescript": "^7.10.4",
-        "@nuclear/core": "^0.6.38",
-        "@nuclear/i18n": "^0.6.38",
-        "@nuclear/ui": "^0.6.38",
+        "@nuclear/core": "^0.6.39",
+        "@nuclear/i18n": "^0.6.39",
+        "@nuclear/ui": "^0.6.39",
         "@testing-library/dom": "^8.17.1",
         "@testing-library/jest-dom": "^5.15.0",
         "@testing-library/react": "^11.2.7",
@@ -53602,7 +53602,7 @@
         "@babel/core": "^7.9.0",
         "@babel/preset-env": "^7.9.5",
         "@babel/preset-react": "^7.9.4",
-        "@nuclear/scanner": "^0.6.38",
+        "@nuclear/scanner": "^0.6.39",
         "@supabase/supabase-js": "^1.35.4",
         "@types/fast-levenshtein": "^0.0.2",
         "@types/isomorphic-fetch": "0.0.35",
@@ -53654,8 +53654,8 @@
     "@nuclear/main": {
       "version": "file:packages/main",
       "requires": {
-        "@nuclear/core": "^0.6.38",
-        "@nuclear/scanner": "^0.6.38",
+        "@nuclear/core": "^0.6.39",
+        "@nuclear/scanner": "^0.6.39",
         "@types/body-parser": "^1.17.1",
         "@types/concat-stream": "^1.6.0",
         "@types/cors": "^2.8.6",
@@ -54153,7 +54153,7 @@
         "@babel/preset-react": "^7.9.4",
         "@babel/preset-typescript": "^7.10.4",
         "@babel/register": "^7.6.2",
-        "@nuclear/core": "^0.6.38",
+        "@nuclear/core": "^0.6.39",
         "@storybook/addon-actions": "^6.3.8",
         "@storybook/addon-info": "^5.3.21",
         "@storybook/addon-knobs": "^6.3.1",
diff --git a/package.json b/package.json
index 9d70bcef11..17835724cd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuclear",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "description": "Streaming music player that finds music sources automatically.",
   "repository": {
     "type": "git",
diff --git a/packages/app/package.json b/packages/app/package.json
index 1ec0a1f992..f918b99bbc 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuclear/app",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "description": "Nuclear - Renderer process",
   "scripts": {
     "postinstall": "rm -rf ./node_modules/react && rm -rf ./node_modules/react-dom",
@@ -34,9 +34,9 @@
   },
   "homepage": "https://github.com/nukeop/nuclear#readme",
   "dependencies": {
-    "@nuclear/core": "^0.6.38",
-    "@nuclear/i18n": "^0.6.38",
-    "@nuclear/ui": "^0.6.38",
+    "@nuclear/core": "^0.6.39",
+    "@nuclear/i18n": "^0.6.39",
+    "@nuclear/ui": "^0.6.39",
     "@testing-library/jest-dom": "^5.16.4",
     "@types/react-window": "^1.8.5",
     "ajv": "^6.12.5",
diff --git a/packages/core/package.json b/packages/core/package.json
index 3c3bee65f1..986d7debd0 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuclear/core",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nukeop/nuclear.git"
@@ -22,7 +22,7 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
-    "@nuclear/scanner": "^0.6.38",
+    "@nuclear/scanner": "^0.6.39",
     "@supabase/supabase-js": "^1.35.4",
     "ajv": "^6.12.5",
     "bandcamp-scraper": "1.4.1",
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 63e5b3f258..bc92d26d63 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuclear/i18n",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nukeop/nuclear.git"
diff --git a/packages/main/package.json b/packages/main/package.json
index cbfef0d546..3ba232a87c 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuclear/main",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "description": "Nuclear main process",
   "scripts": {
     "start": "shx rm -rf build && webpack --env NODE_ENV=development && electron build/main.js --inspect=9001",
@@ -20,8 +20,8 @@
   },
   "homepage": "https://github.com/nukeop/nuclear#readme",
   "dependencies": {
-    "@nuclear/core": "^0.6.38",
-    "@nuclear/scanner": "^0.6.38",
+    "@nuclear/core": "^0.6.39",
+    "@nuclear/scanner": "^0.6.39",
     "autobind-decorator": "^2.4.0",
     "body-parser": "^1.19.0",
     "concat-stream": "^2.0.0",
diff --git a/packages/scanner/package.json b/packages/scanner/package.json
index 8b54d6b071..14b7e3ed95 100644
--- a/packages/scanner/package.json
+++ b/packages/scanner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuclear/scanner",
-  "version": "0.6.38",
+  "version": "0.6.39",
   "description": "Local library scanner",
   "main": "index.node",
   "types": "index.d.ts",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c207cd7e90..2bfa2687fa 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@nuclear/ui",
-	"version": "0.6.38",
+	"version": "0.6.39",
 	"description": "Nuclear - UI components",
 	"author": "nukeop <12746779+nukeop@users.noreply.github.com>",
 	"homepage": "https://github.com/nukeop/nuclear/tree/master/packages/ui#readme",
@@ -69,7 +69,7 @@
 		"typescript": "^4.2.4"
 	},
 	"dependencies": {
-		"@nuclear/core": "^0.6.38",
+		"@nuclear/core": "^0.6.39",
 		"@types/react-window": "^1.8.5",
 		"butterchurn": "^2.6.7",
 		"butterchurn-presets": "^2.4.7",

From 280327b76c9928e3fd86828d35fa7cf079d3ca7f Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Wed, 18 Sep 2024 10:34:15 +0200
Subject: [PATCH 22/32] Upgrade upload-artifact to v4

---
 .github/workflows/debug-build.yml | 2 +-
 .github/workflows/release.yml     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/debug-build.yml b/.github/workflows/debug-build.yml
index 7d477fd2f9..75c92016b7 100644
--- a/.github/workflows/debug-build.yml
+++ b/.github/workflows/debug-build.yml
@@ -72,7 +72,7 @@ jobs:
         env:
           VERSION: ${{ steps.package-version.outputs.version }}
       - name: Upload debug binaries
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: nuclear-binaries-${{ matrix.platform }}-debug
           path: release/*.*
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index af1fc81ba5..4f2808e265 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -26,7 +26,7 @@ jobs:
         env:
           VERSION: ${{ steps.package-version.outputs.version }}
       - name: Upload binaries
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: nuclear-binaries-linux
           path: release/*.*
@@ -82,7 +82,7 @@ jobs:
         env:
           VERSION: ${{ steps.package-version.outputs.version }}
       - name: Upload binaries
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: nuclear-binaries-mac
           path: release/*.*
@@ -121,7 +121,7 @@ jobs:
         env:
           VERSION: ${{ steps.package-version.outputs.version }}
       - name: Upload binaries
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: nuclear-binaries-mac-arm64
           path: release/*.*
@@ -157,7 +157,7 @@ jobs:
         env:
           VERSION: ${{ steps.package-version.outputs.version }}
       - name: Upload binaries
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: nuclear-binaries-windows
           path: release/*.*

From b0da01d383448454cc1646bbeb5a41cd7ffcb384 Mon Sep 17 00:00:00 2001
From: Ryszard Sicinski <ryszard.sicinski@simplicity-poland.pl>
Date: Sun, 22 Sep 2024 14:32:48 +0200
Subject: [PATCH 23/32] show the restore icon when nuclear is full width and
 height

---
 .../app/components/WindowControls/index.tsx   | 47 ++++++++++++++++---
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/packages/app/app/components/WindowControls/index.tsx b/packages/app/app/components/WindowControls/index.tsx
index f596463b67..05e116d7f2 100644
--- a/packages/app/app/components/WindowControls/index.tsx
+++ b/packages/app/app/components/WindowControls/index.tsx
@@ -14,12 +14,45 @@ const WindowControls: React.FC<WindowControlsProps> = ({
   onCloseClick,
   onMaxClick,
   onMinClick
-}) => (
-  <div className={styles.window_controls_container}>
-    <WindowButton data-testid='minimize-button' icon='window minimize' onClick={onMinClick} />
-    <WindowButton data-testid='maximize-button' icon='window maximize outline' onClick={onMaxClick} />
-    <WindowButton data-testid='close-button' icon='close' onClick={onCloseClick} />
-  </div>
-);
+}) => {
+  const [isMaximized, setIsMaximized] = React.useState(false);
+
+  const handleMaximizeClick = (event: React.MouseEvent) => {
+    setIsMaximized(!isMaximized);
+    onMaxClick(event);
+  };
+
+  React.useEffect(() => {
+    const handleWindowResize = () => {
+      const maximized =
+        window.outerWidth === window.screen.availWidth &&
+        window.outerHeight === window.screen.availHeight;
+      setIsMaximized(maximized);
+    };
+
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
+  }, []);
+
+  return (
+    <div className={styles.window_controls_container}>
+      <WindowButton
+        data-testid='minimize-button'
+        icon='window minimize'
+        onClick={onMinClick}
+      />
+      <WindowButton
+        data-testid='maximize-button'
+        icon={isMaximized ? 'window restore outline' : 'window maximize outline'}
+        onClick={handleMaximizeClick} 
+      />
+      <WindowButton
+        data-testid='close-button'
+        icon='close'
+        onClick={onCloseClick}
+      />
+    </div>
+  );
+};
 
 export default WindowControls;

From 3da7774dcc8263e34e2de3792334c00f2691af3d Mon Sep 17 00:00:00 2001
From: Ryszard Sicinski <ryszard.sicinski@simplicity-poland.pl>
Date: Sun, 22 Sep 2024 20:33:20 +0200
Subject: [PATCH 24/32] stop playback resets the length and returns correct
 status, resetting Nuclear stops playback

---
 packages/app/app/actions/actionTypes.ts       |  1 +
 packages/app/app/actions/player.ts            | 12 ++++++++---
 .../app/app/containers/IpcContainer/index.js  | 20 +++++++++----------
 packages/app/app/reducers/player.ts           |  8 ++++++--
 packages/app/app/store/middlewares/ipc.ts     | 12 ++++++-----
 .../main/src/services/@linux/system-api.ts    | 18 ++++++++++++-----
 packages/main/typings/mpris-service.d.ts      |  4 ++--
 7 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/packages/app/app/actions/actionTypes.ts b/packages/app/app/actions/actionTypes.ts
index fac934a6cb..22a46bce1e 100644
--- a/packages/app/app/actions/actionTypes.ts
+++ b/packages/app/app/actions/actionTypes.ts
@@ -170,6 +170,7 @@ export enum Toast {
 export enum Player {
   START_PLAYBACK = 'START_PLAYBACK',
   PAUSE_PLAYBACK = 'PAUSE_PLAYBACK',
+  STOP_PLAYBACK = 'STOP_PLAYBACK',
   UPDATE_PLAYBACK_PROGRESS = 'UPDATE_PLAYBACK_PROGRESS',
   UPDATE_SEEK = 'UPDATE_SEEK',
   UPDATE_VOLUME = 'UPDATE_VOLUME',
diff --git a/packages/app/app/actions/player.ts b/packages/app/app/actions/player.ts
index f55a4441d5..36cfc71062 100644
--- a/packages/app/app/actions/player.ts
+++ b/packages/app/app/actions/player.ts
@@ -1,8 +1,8 @@
-import Sound from 'react-hifi';
 import { setOption } from '@nuclear/core';
+import Sound from 'react-hifi';
 import { createStandardAction } from 'typesafe-actions';
-import { Player } from './actionTypes';
 import { PlaybackStatus } from '../reducers/player';
+import { Player } from './actionTypes';
 
 export const startPlayback = createStandardAction(Player.START_PLAYBACK).map((fromMain: boolean) => {
   return {
@@ -16,6 +16,12 @@ export const pausePlayback = createStandardAction(Player.PAUSE_PLAYBACK).map((fr
   };
 });
 
+export const stopPlayback = createStandardAction(Player.STOP_PLAYBACK).map((fromMain: boolean) => {
+  return {
+    meta: { fromMain }
+  };
+});
+
 export function togglePlayback(currentState: PlaybackStatus, fromMain: boolean) {
   return dispatch => {
     if (currentState === Sound.status.PLAYING) {
@@ -29,7 +35,7 @@ export function togglePlayback(currentState: PlaybackStatus, fromMain: boolean)
 export function resetPlayer() {
   return dispatch => {
     dispatch(updatePlaybackProgress(0, 0));
-    dispatch(pausePlayback(false));
+    dispatch(stopPlayback(false));
     dispatch(updateStreamLoading(false));
   };
 }
diff --git a/packages/app/app/containers/IpcContainer/index.js b/packages/app/app/containers/IpcContainer/index.js
index f571c73dd2..2c57a4e8ec 100644
--- a/packages/app/app/containers/IpcContainer/index.js
+++ b/packages/app/app/containers/IpcContainer/index.js
@@ -1,20 +1,20 @@
+import { IpcEvents } from '@nuclear/core';
+import { ipcRenderer } from 'electron';
+import logger from 'electron-timber';
+import { head } from 'lodash';
 import React from 'react';
-import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
-import { head } from 'lodash';
-import logger from 'electron-timber';
-import { ipcRenderer } from 'electron';
 import { getType } from 'typesafe-actions';
-import { IpcEvents } from '@nuclear/core';
 
+import * as DownloadsActions from '../../actions/downloads';
+import * as EqualizerActions from '../../actions/equalizer';
+import { localLibraryActions } from '../../actions/local';
 import * as PlayerActions from '../../actions/player';
+import * as PlaylistActions from '../../actions/playlists';
 import * as QueueActions from '../../actions/queue';
 import * as SettingsActions from '../../actions/settings';
-import * as PlaylistActions from '../../actions/playlists';
-import * as EqualizerActions from '../../actions/equalizer';
-import * as DownloadsActions from '../../actions/downloads';
-import { localLibraryActions } from '../../actions/local';
 
 class IpcContainer extends React.Component {
   componentDidMount() {
@@ -26,7 +26,7 @@ class IpcContainer extends React.Component {
     ipcRenderer.on(IpcEvents.PREVIOUS, () => actions.previousSong());
     ipcRenderer.on(IpcEvents.PAUSE, () => actions.pausePlayback(true));
     ipcRenderer.on(IpcEvents.PLAYPAUSE, () => actions.togglePlayback(this.props.player.playbackStatus, true));
-    ipcRenderer.on(IpcEvents.STOP, () => actions.pausePlayback(true));
+    ipcRenderer.on(IpcEvents.STOP, () => actions.stopPlayback(true));
     ipcRenderer.on(IpcEvents.PLAY, () => actions.startPlayback(true));
     ipcRenderer.on(IpcEvents.MUTE, () => {
       if (this.props.player.muted) {
diff --git a/packages/app/app/reducers/player.ts b/packages/app/app/reducers/player.ts
index 109792f219..d2e18df665 100644
--- a/packages/app/app/reducers/player.ts
+++ b/packages/app/app/reducers/player.ts
@@ -1,12 +1,12 @@
-import Sound from 'react-hifi';
 import { getOption } from '@nuclear/core';
+import Sound from 'react-hifi';
+import { ActionType, getType } from 'typesafe-actions';
 import * as PlayerActions from '../actions/player';
 import {
   nextSongAction,
   previousSongAction,
   selectSong
 } from '../actions/queue';
-import { ActionType, getType } from 'typesafe-actions';
 
 export type PlaybackStatus = 'PAUSED' | 'PLAYING' | 'STOPPED'
 
@@ -46,6 +46,10 @@ export default function PlayerReducer(state=initialState(), action: PlayerReduce
     return Object.assign({}, state, {
       playbackStatus: Sound.status.PAUSED
     });
+  case getType(PlayerActions.stopPlayback):
+    return Object.assign({}, state, {
+      playbackStatus: Sound.status.STOPPED
+    });
   case getType(PlayerActions.updatePlaybackProgress):
     return Object.assign({}, state, {
       playbackProgress: action.payload.progress,
diff --git a/packages/app/app/store/middlewares/ipc.ts b/packages/app/app/store/middlewares/ipc.ts
index 07422206ed..d95ef3fd7f 100644
--- a/packages/app/app/store/middlewares/ipc.ts
+++ b/packages/app/app/store/middlewares/ipc.ts
@@ -1,14 +1,13 @@
 import { getOption, IpcEvents, isValidPort } from '@nuclear/core';
 import { ipcRenderer } from 'electron';
 import _ from 'lodash';
-import { LocalLibrary } from '../../actions/actionTypes';
-import { Queue, Settings } from '../../actions/actionTypes';
+import { Middleware } from 'redux';
+import { getType } from 'typesafe-actions';
+import { LocalLibrary, Queue, Settings } from '../../actions/actionTypes';
 import { changeConnectivity } from '../../actions/connectivity';
 import * as DownloadActions from '../../actions/downloads';
 import * as PlayerActions from '../../actions/player';
-import { CLOSE_WINDOW, MINIMIZE_WINDOW, MAXIMIZE_WINDOW, OPEN_DEVTOOLS } from '../../actions/window';
-import { getType } from 'typesafe-actions';
-import { Middleware } from 'redux';
+import { CLOSE_WINDOW, MAXIMIZE_WINDOW, MINIMIZE_WINDOW, OPEN_DEVTOOLS } from '../../actions/window';
 
 type IpcActionType = {
   type: string;
@@ -45,6 +44,9 @@ const ipcConnect: Middleware = () => next => {
     case getType(PlayerActions.pausePlayback):
       ipcRenderer.send(IpcEvents.PAUSE);
       break;
+    case getType(PlayerActions.stopPlayback):
+      ipcRenderer.send(IpcEvents.STOP);
+      break;
     
     case LocalLibrary.SCAN_LOCAL_FOLDERS:
       ipcRenderer.send(IpcEvents.LOCALFOLDERS_REFRESH);
diff --git a/packages/main/src/services/@linux/system-api.ts b/packages/main/src/services/@linux/system-api.ts
index 4e95d9f894..2b635a5021 100644
--- a/packages/main/src/services/@linux/system-api.ts
+++ b/packages/main/src/services/@linux/system-api.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { NuclearStatus, NuclearMeta, NuclearPlaylist, PlaybackStatus, IpcEvents } from '@nuclear/core';
+import { IpcEvents, NuclearMeta, NuclearPlaylist, NuclearStatus, PlaybackStatus } from '@nuclear/core';
 import autobind from 'autobind-decorator';
-import { app, IpcMain, Event } from 'electron';
+import { app, Event, IpcMain } from 'electron';
 import { inject } from 'inversify';
-import MprisService, { MprisPlaylist, MprisMeta, PlaybackStatus as MprisStatus, LoopStatus } from 'mpris-service';
+import MprisService, { LoopStatus, MprisMeta, MprisPlaylist, PlaybackStatus as MprisStatus } from 'mpris-service';
 
 import NuclearApi from '../../interfaces/nuclear-api';
-import { systemMediaController, systemMediaEvent, SYSTEM_MEDIA_EVENT_KEY } from '../../utils/decorators';
+import { SYSTEM_MEDIA_EVENT_KEY, systemMediaController, systemMediaEvent } from '../../utils/decorators';
 import { ControllerMeta } from '../../utils/types';
 import Config from '../config';
 import Discord from '../discord';
@@ -138,9 +138,17 @@ class LinuxMediaService extends MprisService implements NuclearApi {
 
   @systemMediaEvent('stop')
   onStop() {
-    this.playbackStatus = MprisService.PLAYBACK_STATUS_STOPED;
+    this.playbackStatus = MprisService.PLAYBACK_STATUS_STOPPED;
     this.discord.clear();
+    this.metadata['mpris:length'] = 0; 
     this.window.send(IpcEvents.STOP);
+    this.sendMetadata({
+      artist: 'Nuclear',
+      name: '',
+      uuid: '0',
+      thumbnail: '',
+      streams: []
+    });
   }
 
   @systemMediaEvent('playpause')
diff --git a/packages/main/typings/mpris-service.d.ts b/packages/main/typings/mpris-service.d.ts
index 2b38b67e64..6ad43f179c 100644
--- a/packages/main/typings/mpris-service.d.ts
+++ b/packages/main/typings/mpris-service.d.ts
@@ -36,7 +36,7 @@ declare module 'mpris-service' {
   enum playbackStatus {
     PLAYING = 'playing',
     PAUSED = 'paused',
-    STOPED = 'stoped',
+    STOPPED = 'stopped',
   }
 
   export type LoopStatus = loopStatus;
@@ -49,7 +49,7 @@ declare module 'mpris-service' {
 
     static PLAYBACK_STATUS_PLAYING: playbackStatus.PLAYING;
     static PLAYBACK_STATUS_PAUSED: playbackStatus.PAUSED;
-    static PLAYBACK_STATUS_STOPED: playbackStatus.STOPED;
+    static PLAYBACK_STATUS_STOPPED: playbackStatus.STOPPED;
 
     playlists: MprisPlaylist[];
     shuffle: boolean;

From 9f9e5d371a281f5d8c7cfd366b89a5a7e18efdcc Mon Sep 17 00:00:00 2001
From: waldo121 <17034517+waldo121@users.noreply.github.com>
Date: Thu, 26 Sep 2024 19:08:56 -0400
Subject: [PATCH 25/32] Fix download pausing/resume click behaviour

---
 packages/app/app/actions/downloads.ts     | 14 ++++++++------
 packages/main/src/controllers/download.ts |  2 ++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/app/app/actions/downloads.ts b/packages/app/app/actions/downloads.ts
index f3d36f1d7a..91c54c85ea 100644
--- a/packages/app/app/actions/downloads.ts
+++ b/packages/app/app/actions/downloads.ts
@@ -108,12 +108,14 @@ export const onDownloadProgress = createStandardAction(DownloadActionTypes.DOWNL
       propertyName: 'completion',
       value: progress
     });
-  
-    payload = changePropertyForItem({
-      downloads: payload,
-      uuid,
-      value: progress < 1 ? DownloadStatus.STARTED : DownloadStatus.FINISHED
-    });
+    if (progress >= 1) {
+      payload = changePropertyForItem({
+        downloads: payload,
+        uuid,
+        value: DownloadStatus.FINISHED
+      });
+    }
+    
   
     return {
       payload
diff --git a/packages/main/src/controllers/download.ts b/packages/main/src/controllers/download.ts
index 377e1a6b92..218c044b42 100644
--- a/packages/main/src/controllers/download.ts
+++ b/packages/main/src/controllers/download.ts
@@ -59,6 +59,7 @@ class DownloadIpcCtrl {
       if (downloadRef) {
         if (downloadRef.ref.canResume()) {
           downloadRef.ref.resume();
+          this.window?.send(IpcEvents.DOWNLOAD_STARTED, uuid);
           return;
         }
         this.downloadItems = this.downloadItems.filter((item => item.uuid === uuid));
@@ -80,6 +81,7 @@ class DownloadIpcCtrl {
           this.downloadItems = this.downloadItems.filter((item) => item.uuid !== uuid);
           this.downloadItems.push({ uuid, ref: item });
           this.logger.log(`Download started: ${filename}`);
+          this.window?.send(IpcEvents.DOWNLOAD_STARTED, uuid);
         },
         onProgress: (progress) => {
           this.window.send(IpcEvents.DOWNLOAD_PROGRESS, {

From 9e791bb70dc55394636d87372d8decfde312d37c Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Thu, 3 Oct 2024 16:15:07 +0200
Subject: [PATCH 26/32] Update domain

---
 README.md                                                       | 2 +-
 docs/README-ar.md                                               | 2 +-
 docs/README-de.md                                               | 2 +-
 docs/README-es.md                                               | 2 +-
 docs/README-fr.md                                               | 2 +-
 docs/README-he.md                                               | 2 +-
 docs/README-hi.md                                               | 2 +-
 docs/README-id.md                                               | 2 +-
 docs/README-it.md                                               | 2 +-
 docs/README-ja.md                                               | 2 +-
 docs/README-ko.md                                               | 2 +-
 docs/README-pl.md                                               | 2 +-
 docs/README-ptbr.md                                             | 2 +-
 docs/README-ru.md                                               | 2 +-
 docs/README-se.md                                               | 2 +-
 docs/README-tr.md                                               | 2 +-
 docs/README-zh-cn.md                                            | 2 +-
 .../__snapshots__/DashboardContainer.test.tsx.snap              | 2 +-
 packages/app/test/storeBuilders.ts                              | 2 +-
 packages/core/src/rest/Mastodon.ts                              | 2 +-
 packages/core/src/settings/index.ts                             | 2 +-
 21 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 12bb37e5f7..0832996fee 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Desktop music player focused on streaming from free sources
 
 # Links
 
-[Official website](https://nuclear.js.org)
+[Official website](https://nuclearplayer.com)
 
 [Downloads](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-ar.md b/docs/README-ar.md
index 2fef3112b2..a17730fbc2 100644
--- a/docs/README-ar.md
+++ b/docs/README-ar.md
@@ -9,7 +9,7 @@
 
 # الروابط
 
-[الموقع الرسمي](https://nuclear.js.org)
+[الموقع الرسمي](https://nuclearplayer.com)
 
 [التنزيلات](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-de.md b/docs/README-de.md
index 38e6c24627..c37c6d5521 100644
--- a/docs/README-de.md
+++ b/docs/README-de.md
@@ -9,7 +9,7 @@ Ein Musikplayer für Computer, mit kostenlosem Streaming.
 
 # Links
 
-[Offizielle Webseite](https://nuclear.js.org)
+[Offizielle Webseite](https://nuclearplayer.com)
 
 [Mastodon](https://fosstodon.org/@nuclearplayer)
 
diff --git a/docs/README-es.md b/docs/README-es.md
index 48a8e516dd..c986dfa7e6 100644
--- a/docs/README-es.md
+++ b/docs/README-es.md
@@ -7,7 +7,7 @@ Reproductor de música de escritorio centrado en la transmisión desde fuentes g
 
 # Enlaces
 
-[Sitio web oficial](https://nuclear.js.org)
+[Sitio web oficial](https://nuclearplayer.com)
 
 [Descargas](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-fr.md b/docs/README-fr.md
index d7bc9e6a53..a2f2ed6a3c 100644
--- a/docs/README-fr.md
+++ b/docs/README-fr.md
@@ -7,7 +7,7 @@ Lecteur de musique spécialisé dans le streaming depuis des sources gratuites
 
 # Links
 
-[Site officiel](https://nuclear.js.org)
+[Site officiel](https://nuclearplayer.com)
 
 [Téléchargements](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-he.md b/docs/README-he.md
index 406c4f1b23..f4f7e65c64 100644
--- a/docs/README-he.md
+++ b/docs/README-he.md
@@ -8,7 +8,7 @@
 
 # קישורים
 
-[האתר הרשמי](https://nuclear.js.org)
+[האתר הרשמי](https://nuclearplayer.com)
 
 [Mastodon](https://fosstodon.org/@nuclearplayer)
 
diff --git a/docs/README-hi.md b/docs/README-hi.md
index 0d9c374a72..a0d8bdcc5f 100644
--- a/docs/README-hi.md
+++ b/docs/README-hi.md
@@ -7,7 +7,7 @@
 
 # लिंक
 
-[आधिकारिक वेबसाइट](https://nuclear.js.org)
+[आधिकारिक वेबसाइट](https://nuclearplayer.com)
 
 [डाउनलोड](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-id.md b/docs/README-id.md
index 29a0da2d40..6fa71414d2 100644
--- a/docs/README-id.md
+++ b/docs/README-id.md
@@ -7,7 +7,7 @@ Aplikasi pemutar musik berbasis desktop yang berfokus pada streaming dari sumber
 
 # Daftar Tautan
 
-[Website Resmi](https://nuclear.js.org)
+[Website Resmi](https://nuclearplayer.com)
 
 [Unduh](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-it.md b/docs/README-it.md
index 7748d7c1a9..98350f2428 100644
--- a/docs/README-it.md
+++ b/docs/README-it.md
@@ -7,7 +7,7 @@ Lettore musicale desktop incentrato sullo streaming da fonti gratuite
 
 # Links
 
-[Sito Ufficiale](https://nuclear.js.org)
+[Sito Ufficiale](https://nuclearplayer.com)
 
 [Mastodon](https://fosstodon.org/@nuclearplayer)
 
diff --git a/docs/README-ja.md b/docs/README-ja.md
index 34e70000f7..051b6163d2 100644
--- a/docs/README-ja.md
+++ b/docs/README-ja.md
@@ -7,7 +7,7 @@
 
 # リンク
 
-[公式サイト](https://nuclear.js.org)
+[公式サイト](https://nuclearplayer.com)
 
 [ダウンロード](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-ko.md b/docs/README-ko.md
index 25da9b53f1..b7704ed41f 100644
--- a/docs/README-ko.md
+++ b/docs/README-ko.md
@@ -7,7 +7,7 @@
 
 # Links
 
-[공식 사이트](https://nuclear.js.org)
+[공식 사이트](https://nuclearplayer.com)
 
 [Mastodon](https://fosstodon.org/@nuclearplayer)
 
diff --git a/docs/README-pl.md b/docs/README-pl.md
index a879f51c09..2b5420effb 100644
--- a/docs/README-pl.md
+++ b/docs/README-pl.md
@@ -7,7 +7,7 @@ Desktopowy odtwarzacz muzyki skoncentrowany na streamingu z otwartych źródeł
 
 # Linki
 
-[Oficjalna strona](https://nuclear.js.org)
+[Oficjalna strona](https://nuclearplayer.com)
 
 [Pliki do pobrania](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-ptbr.md b/docs/README-ptbr.md
index a97fed4c25..d42076f081 100644
--- a/docs/README-ptbr.md
+++ b/docs/README-ptbr.md
@@ -6,7 +6,7 @@
 
 Music player para desktop focado no streaming a partir de fontes gratuitas.
 
-[Website oficial](https://nuclear.js.org)
+[Website oficial](https://nuclearplayer.com)
 
 [Mastodon](https://fosstodon.org/@nuclearplayer)
 
diff --git a/docs/README-ru.md b/docs/README-ru.md
index 6c2cf7dfc4..4b19181a39 100644
--- a/docs/README-ru.md
+++ b/docs/README-ru.md
@@ -7,7 +7,7 @@
 
 # Ссылки
 
-[Официальный сайт](https://nuclear.js.org)
+[Официальный сайт](https://nuclearplayer.com)
 
 [Скачать](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-se.md b/docs/README-se.md
index 7466bd5455..7713863153 100644
--- a/docs/README-se.md
+++ b/docs/README-se.md
@@ -7,7 +7,7 @@ Skrivbordsapp som fokuserar på att streama musik från avgiftsfria källor
 
 # Länkar
 
-[Officiell hemsida](https://nuclear.js.org)
+[Officiell hemsida](https://nuclearplayer.com)
 
 [Mastodon](https://fosstodon.org/@nuclearplayer)
 
diff --git a/docs/README-tr.md b/docs/README-tr.md
index 9f2fdc9661..adddd16346 100644
--- a/docs/README-tr.md
+++ b/docs/README-tr.md
@@ -8,7 +8,7 @@
 
 # Bağlantılar
 
-[Resmi Site](https://nuclear.js.org)
+[Resmi Site](https://nuclearplayer.com)
 
 [İndirmeler](https://github.com/nukeop/nuclear/releases)
 
diff --git a/docs/README-zh-cn.md b/docs/README-zh-cn.md
index 9e9cce19fd..fe3b0bf18b 100644
--- a/docs/README-zh-cn.md
+++ b/docs/README-zh-cn.md
@@ -6,7 +6,7 @@
 
 # 相关链接
 
-[官方网站](https://nuclear.js.org)
+[官方网站](https://nuclearplayer.com)
 
 [下载链接](https://github.com/nukeop/nuclear/releases)
 
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
index f86d37720a..bad1a09dc1 100644
--- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
+++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
@@ -248,7 +248,7 @@ exports[`Dashboard container should display the trending music 1`] = `
           >
             <div
               class="promoted_artist"
-              style="background-image: url(https://nuclear.js.org/background.jpg);"
+              style="background-image: url(https://nuclearplayer.com/background.jpg);"
             >
               <div
                 class="promoted_artist_info"
diff --git a/packages/app/test/storeBuilders.ts b/packages/app/test/storeBuilders.ts
index 525187f304..25f5b54284 100644
--- a/packages/app/test/storeBuilders.ts
+++ b/packages/app/test/storeBuilders.ts
@@ -94,7 +94,7 @@ export const buildStoreState = () => {
           isLoading: false,
           isReady: true,
           data: {
-            PROMOTED_ARTIST_BACKGROUND: 'https://nuclear.js.org/background.jpg'
+            PROMOTED_ARTIST_BACKGROUND: 'https://nuclearplayer.com/background.jpg'
           }
         }
       }
diff --git a/packages/core/src/rest/Mastodon.ts b/packages/core/src/rest/Mastodon.ts
index 6f4ae6d8c5..db04684818 100644
--- a/packages/core/src/rest/Mastodon.ts
+++ b/packages/core/src/rest/Mastodon.ts
@@ -7,7 +7,7 @@ export const registerNuclear = (instanceUrl: string) => {
   return client.registerApp(
     'Nuclear Music Player',
     {
-      website: 'https://nuclear.js.org/'
+      website: 'https://nuclearplayer.com/'
     }
   );
 };
diff --git a/packages/core/src/settings/index.ts b/packages/core/src/settings/index.ts
index 79fffdef48..13ddbf6868 100644
--- a/packages/core/src/settings/index.ts
+++ b/packages/core/src/settings/index.ts
@@ -344,7 +344,7 @@ export const settingsConfig: Array<Setting> = [
     category: 'social',
     type: SettingType.STRING,
     default:
-      '#nowplaying {{artist}} - {{title}} #nuclear https://nuclear.js.org',
+      '#nowplaying {{artist}} - {{title}} #nuclear https://nuclearplayer.com',
     hide: true
   },
   {

From 96348a04ba5cb2cfe97242baf01c6b3854fc2946 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Fri, 4 Oct 2024 13:50:02 +0200
Subject: [PATCH 27/32] Update dependency

---
 package-lock.json                           |  36 +-
 packages/core/package.json                  |   1 +
 packages/core/src/rest/Youtube.ts           |   2 +-
 packages/core/src/ytdl-core/LICENSE         |  23 -
 packages/core/src/ytdl-core/agent.js        |  94 ---
 packages/core/src/ytdl-core/cache.js        |  54 --
 packages/core/src/ytdl-core/format-utils.js | 250 -------
 packages/core/src/ytdl-core/formats.js      | 524 -------------
 packages/core/src/ytdl-core/index.d.ts      | 774 --------------------
 packages/core/src/ytdl-core/index.js        | 239 ------
 packages/core/src/ytdl-core/info-extras.js  | 362 ---------
 packages/core/src/ytdl-core/info.js         | 442 -----------
 packages/core/src/ytdl-core/sig.js          | 296 --------
 packages/core/src/ytdl-core/url-utils.js    |  92 ---
 packages/core/src/ytdl-core/utils.js        | 389 ----------
 15 files changed, 37 insertions(+), 3541 deletions(-)
 delete mode 100644 packages/core/src/ytdl-core/LICENSE
 delete mode 100644 packages/core/src/ytdl-core/agent.js
 delete mode 100644 packages/core/src/ytdl-core/cache.js
 delete mode 100644 packages/core/src/ytdl-core/format-utils.js
 delete mode 100644 packages/core/src/ytdl-core/formats.js
 delete mode 100644 packages/core/src/ytdl-core/index.d.ts
 delete mode 100644 packages/core/src/ytdl-core/index.js
 delete mode 100644 packages/core/src/ytdl-core/info-extras.js
 delete mode 100644 packages/core/src/ytdl-core/info.js
 delete mode 100644 packages/core/src/ytdl-core/sig.js
 delete mode 100644 packages/core/src/ytdl-core/url-utils.js
 delete mode 100644 packages/core/src/ytdl-core/utils.js

diff --git a/package-lock.json b/package-lock.json
index 93ce5ea762..0ca5bf81f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2258,6 +2258,25 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@distube/ytdl-core": {
+      "version": "4.14.4",
+      "resolved": "https://registry.npmjs.org/@distube/ytdl-core/-/ytdl-core-4.14.4.tgz",
+      "integrity": "sha512-dHb4GW3qATIjRsS6VIhm3Pop7FdUcDFhsnyQlsPeXW7UhTPuNS0BmraKiTpFbpp0Ky+rxBQjJBfPRFsM+dT1fg==",
+      "dependencies": {
+        "http-cookie-agent": "^6.0.5",
+        "m3u8stream": "^0.8.6",
+        "miniget": "^4.2.3",
+        "sax": "^1.4.1",
+        "tough-cookie": "^4.1.4",
+        "undici": "five"
+      },
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "url": "https://github.com/distubejs/ytdl-core?sponsor"
+      }
+    },
     "node_modules/@electron/asar": {
       "version": "3.2.10",
       "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.10.tgz",
@@ -48745,6 +48764,7 @@
         "@babel/core": "^7.9.0",
         "@babel/preset-env": "^7.9.5",
         "@babel/preset-react": "^7.9.4",
+        "@distube/ytdl-core": "^4.14.4",
         "@nuclear/scanner": "^0.6.39",
         "@supabase/supabase-js": "^1.35.4",
         "ajv": "^6.12.5",
@@ -50997,6 +51017,19 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@distube/ytdl-core": {
+      "version": "4.14.4",
+      "resolved": "https://registry.npmjs.org/@distube/ytdl-core/-/ytdl-core-4.14.4.tgz",
+      "integrity": "sha512-dHb4GW3qATIjRsS6VIhm3Pop7FdUcDFhsnyQlsPeXW7UhTPuNS0BmraKiTpFbpp0Ky+rxBQjJBfPRFsM+dT1fg==",
+      "requires": {
+        "http-cookie-agent": "^6.0.5",
+        "m3u8stream": "^0.8.6",
+        "miniget": "^4.2.3",
+        "sax": "^1.4.1",
+        "tough-cookie": "^4.1.4",
+        "undici": "five"
+      }
+    },
     "@electron/asar": {
       "version": "3.2.10",
       "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.10.tgz",
@@ -53602,6 +53635,7 @@
         "@babel/core": "^7.9.0",
         "@babel/preset-env": "^7.9.5",
         "@babel/preset-react": "^7.9.4",
+        "@distube/ytdl-core": "^4.14.4",
         "@nuclear/scanner": "^0.6.39",
         "@supabase/supabase-js": "^1.35.4",
         "@types/fast-levenshtein": "^0.0.2",
@@ -86897,4 +86931,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/package.json b/packages/core/package.json
index 986d7debd0..b84c381333 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -22,6 +22,7 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
+    "@distube/ytdl-core": "^4.14.4",
     "@nuclear/scanner": "^0.6.39",
     "@supabase/supabase-js": "^1.35.4",
     "ajv": "^6.12.5",
diff --git a/packages/core/src/rest/Youtube.ts b/packages/core/src/rest/Youtube.ts
index eb39cb0ac9..c883c9879a 100644
--- a/packages/core/src/rest/Youtube.ts
+++ b/packages/core/src/rest/Youtube.ts
@@ -1,5 +1,5 @@
 import logger from 'electron-timber';
-import ytdl from '../ytdl-core';
+import ytdl from '@distube/ytdl-core';
 
 import ytpl from 'ytpl';
 import {search, SearchVideo} from 'youtube-ext';
diff --git a/packages/core/src/ytdl-core/LICENSE b/packages/core/src/ytdl-core/LICENSE
deleted file mode 100644
index 8c1bf86017..0000000000
--- a/packages/core/src/ytdl-core/LICENSE
+++ /dev/null
@@ -1,23 +0,0 @@
-Adapted from @distube/ytdl-core (https://github.com/distubejs/ytdl-core) under the following license:
-
-MIT License
-
-Copyright (C) 2012-present by fent
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE. 
diff --git a/packages/core/src/ytdl-core/agent.js b/packages/core/src/ytdl-core/agent.js
deleted file mode 100644
index bd3492300a..0000000000
--- a/packages/core/src/ytdl-core/agent.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { ProxyAgent } from 'undici';
-import { Cookie, CookieJar, canonicalDomain } from 'tough-cookie';
-import { CookieAgent, CookieClient } from 'http-cookie-agent/undici';
-
-const convertSameSite = sameSite => {
-  switch (sameSite) {
-  case 'strict':
-    return 'strict';
-  case 'lax':
-    return 'lax';
-  case 'no_restriction':
-  case 'unspecified':
-  default:
-    return 'none';
-  }
-};
-
-const convertCookie = cookie => cookie instanceof Cookie ? cookie : new Cookie({
-  key: cookie.name,
-  value: cookie.value,
-  expires: typeof cookie.expirationDate === 'number' ? new Date(cookie.expirationDate * 1000) : 'Infinity',
-  domain: canonicalDomain(cookie.domain),
-  path: cookie.path,
-  secure: cookie.secure,
-  httpOnly: cookie.httpOnly,
-  sameSite: convertSameSite(cookie.sameSite),
-  hostOnly: cookie.hostOnly
-});
-
-export const addCookies = (jar, cookies) => {
-  if (!cookies || !Array.isArray(cookies)) {
-    throw new Error('cookies must be an array');
-  }
-  if (!cookies.some(c => c.name === 'SOCS')) {
-    cookies.push({
-      domain: '.youtube.com',
-      hostOnly: false,
-      httpOnly: false,
-      name: 'SOCS',
-      path: '/',
-      sameSite: 'lax',
-      secure: true,
-      session: false,
-      value: 'CAI'
-    });
-  }
-  for (const cookie of cookies) {
-    jar.setCookieSync(convertCookie(cookie), 'https://www.youtube.com');
-  }
-};
-
-export const addCookiesFromString = (jar, cookies) => {
-  if (!cookies || typeof cookies !== 'string') {
-    throw new Error('cookies must be a string');
-  }
-  return addCookies(jar, cookies.split(';').map(c => Cookie.parse(c)).filter(Boolean));
-};
-
-export const createAgent = (cookies = [], opts = {}) => {
-  const options = Object.assign({}, opts);
-  if (!options.cookies) {
-    const jar = new CookieJar();
-    addCookies(jar, cookies);
-    options.cookies = { jar };
-  }
-  return {
-    dispatcher: new CookieAgent(options),
-    localAddress: options.localAddress,
-    jar: options.cookies.jar
-  };
-};
-
-export const createProxyAgent = (options, cookies = []) => {
-  if (!cookies) {
-    cookies = [];
-  }
-  if (typeof options === 'string') {
-    options = { uri: options };
-  }
-  if (options.factory) {
-    throw new Error('Cannot use factory with createProxyAgent');
-  }
-  const jar = new CookieJar();
-  addCookies(jar, cookies);
-  const proxyOptions = Object.assign({
-    factory: (origin, opts) => {
-      const o = Object.assign({ cookies: { jar } }, opts);
-      return new CookieClient(origin, o);
-    }
-  }, options);
-  return { dispatcher: new ProxyAgent(proxyOptions), jar, localAddress: options.localAddress };
-};
-
-export const defaultAgent = createAgent();
diff --git a/packages/core/src/ytdl-core/cache.js b/packages/core/src/ytdl-core/cache.js
deleted file mode 100644
index c694175388..0000000000
--- a/packages/core/src/ytdl-core/cache.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { setTimeout } from 'timers';
-
-// A cache that expires.
-export default class Cache extends Map {
-  constructor(timeout = 1000) {
-    super();
-    this.timeout = timeout;
-  }
-  set(key, value) {
-    if (this.has(key)) {
-      clearTimeout(super.get(key).tid);
-    }
-    super.set(key, {
-      tid: setTimeout(this.delete.bind(this, key), this.timeout).unref(),
-      value
-    });
-  }
-  get(key) {
-    let entry = super.get(key);
-    if (entry) {
-      return entry.value;
-    }
-    return null;
-  }
-  getOrSet(key, fn) {
-    if (this.has(key)) {
-      return this.get(key);
-    } else {
-      let value = fn();
-      this.set(key, value);
-      (async() => {
-        try {
-          await value;
-        } catch (err) {
-          this.delete(key);
-        }
-      })();
-      return value;
-    }
-  }
-  delete(key) {
-    let entry = super.get(key);
-    if (entry) {
-      clearTimeout(entry.tid);
-      super.delete(key);
-    }
-  }
-  clear() {
-    for (let entry of this.values()) {
-      clearTimeout(entry.tid);
-    }
-    super.clear();
-  }
-}
diff --git a/packages/core/src/ytdl-core/format-utils.js b/packages/core/src/ytdl-core/format-utils.js
deleted file mode 100644
index e18d1a244d..0000000000
--- a/packages/core/src/ytdl-core/format-utils.js
+++ /dev/null
@@ -1,250 +0,0 @@
-import {between} from './utils';
-import FORMATS from './formats';
-
-
-// Use these to help sort formats, higher index is better.
-const audioEncodingRanks = [
-  'mp4a',
-  'mp3',
-  'vorbis',
-  'aac',
-  'opus',
-  'flac'
-];
-const videoEncodingRanks = [
-  'mp4v',
-  'avc1',
-  'Sorenson H.283',
-  'MPEG-4 Visual',
-  'VP8',
-  'VP9',
-  'H.264'
-];
-
-const getVideoBitrate = format => format.bitrate || 0;
-const getVideoEncodingRank = format =>
-  videoEncodingRanks.findIndex(enc => format.codecs && format.codecs.includes(enc));
-const getAudioBitrate = format => format.audioBitrate || 0;
-const getAudioEncodingRank = format =>
-  audioEncodingRanks.findIndex(enc => format.codecs && format.codecs.includes(enc));
-
-
-/**
- * Sort formats by a list of functions.
- *
- * @param {Object} a
- * @param {Object} b
- * @param {Array.<Function>} sortBy
- * @returns {number}
- */
-const sortFormatsBy = (a, b, sortBy) => {
-  let res = 0;
-  for (let fn of sortBy) {
-    res = fn(b) - fn(a);
-    if (res !== 0) {
-      break;
-    }
-  }
-  return res;
-};
-
-
-const sortFormatsByVideo = (a, b) => sortFormatsBy(a, b, [
-  format => parseInt(format.qualityLabel),
-  getVideoBitrate,
-  getVideoEncodingRank
-]);
-
-
-const sortFormatsByAudio = (a, b) => sortFormatsBy(a, b, [
-  getAudioBitrate,
-  getAudioEncodingRank
-]);
-
-
-/**
- * Sort formats from highest quality to lowest.
- *
- * @param {Object} a
- * @param {Object} b
- * @returns {number}
- */
-export const sortFormats = (a, b) => sortFormatsBy(a, b, [
-  // Formats with both video and audio are ranked highest.
-  format => +!!format.isHLS,
-  format => +!!format.isDashMPD,
-  format => +(format.contentLength > 0),
-  format => +(format.hasVideo && format.hasAudio),
-  format => +format.hasVideo,
-  format => parseInt(format.qualityLabel) || 0,
-  getVideoBitrate,
-  getAudioBitrate,
-  getVideoEncodingRank,
-  getAudioEncodingRank
-]);
-
-
-/**
- * Choose a format depending on the given options.
- *
- * @param {Array.<Object>} formats
- * @param {Object} options
- * @returns {Object}
- * @throws {Error} when no format matches the filter/format rules
- */
-export const chooseFormat = (formats, options) => {
-  if (typeof options.format === 'object') {
-    if (!options.format.url) {
-      throw Error('Invalid format given, did you use `ytdl.getInfo()`?');
-    }
-    return options.format;
-  }
-
-  if (options.filter) {
-    formats = filterFormats(formats, options.filter);
-  }
-
-  // We currently only support HLS-Formats for livestreams
-  // So we (now) remove all non-HLS streams
-  if (formats.some(fmt => fmt.isHLS)) {
-    formats = formats.filter(fmt => fmt.isHLS || !fmt.isLive);
-  }
-
-  let format;
-  const quality = options.quality || 'highest';
-  switch (quality) {
-  case 'highest':
-    format = formats[0];
-    break;
-
-  case 'lowest':
-    format = formats[formats.length - 1];
-    break;
-
-  case 'highestaudio': {
-    formats = filterFormats(formats, 'audio');
-    formats.sort(sortFormatsByAudio);
-    // Filter for only the best audio format
-    const bestAudioFormat = formats[0];
-    formats = formats.filter(f => sortFormatsByAudio(bestAudioFormat, f) === 0);
-    // Check for the worst video quality for the best audio quality and pick according
-    // This does not loose default sorting of video encoding and bitrate
-    const worstVideoQuality = formats.map(f => parseInt(f.qualityLabel) || 0).sort((a, b) => a - b)[0];
-    format = formats.find(f => (parseInt(f.qualityLabel) || 0) === worstVideoQuality);
-    break;
-  }
-
-  case 'lowestaudio':
-    formats = filterFormats(formats, 'audio');
-    formats.sort(sortFormatsByAudio);
-    format = formats[formats.length - 1];
-    break;
-
-  case 'highestvideo': {
-    formats = filterFormats(formats, 'video');
-    formats.sort(sortFormatsByVideo);
-    // Filter for only the best video format
-    const bestVideoFormat = formats[0];
-    formats = formats.filter(f => sortFormatsByVideo(bestVideoFormat, f) === 0);
-    // Check for the worst audio quality for the best video quality and pick according
-    // This does not loose default sorting of audio encoding and bitrate
-    const worstAudioQuality = formats.map(f => f.audioBitrate || 0).sort((a, b) => a - b)[0];
-    format = formats.find(f => (f.audioBitrate || 0) === worstAudioQuality);
-    break;
-  }
-
-  case 'lowestvideo':
-    formats = filterFormats(formats, 'video');
-    formats.sort(sortFormatsByVideo);
-    format = formats[formats.length - 1];
-    break;
-
-  default:
-    format = getFormatByQuality(quality, formats);
-    break;
-  }
-
-  if (!format) {
-    throw Error(`No such format found: ${quality}`);
-  }
-  return format;
-};
-
-/**
- * Gets a format based on quality or array of quality's
- *
- * @param {string|[string]} quality
- * @param {[Object]} formats
- * @returns {Object}
- */
-const getFormatByQuality = (quality, formats) => {
-  let getFormat = itag => formats.find(format => `${format.itag}` === `${itag}`);
-  if (Array.isArray(quality)) {
-    return getFormat(quality.find(q => getFormat(q)));
-  } else {
-    return getFormat(quality);
-  }
-};
-
-
-/**
- * @param {Array.<Object>} formats
- * @param {Function} filter
- * @returns {Array.<Object>}
- */
-export const filterFormats = (formats, filter) => {
-  let fn;
-  switch (filter) {
-  case 'videoandaudio':
-  case 'audioandvideo':
-    fn = format => format.hasVideo && format.hasAudio;
-    break;
-
-  case 'video':
-    fn = format => format.hasVideo;
-    break;
-
-  case 'videoonly':
-    fn = format => format.hasVideo && !format.hasAudio;
-    break;
-
-  case 'audio':
-    fn = format => format.hasAudio;
-    break;
-
-  case 'audioonly':
-    fn = format => !format.hasVideo && format.hasAudio;
-    break;
-
-  default:
-    if (typeof filter === 'function') {
-      fn = filter;
-    } else {
-      throw TypeError(`Given filter (${filter}) is not supported`);
-    }
-  }
-  return formats.filter(format => !!format.url && fn(format));
-};
-
-
-/**
- * @param {Object} format
- * @returns {Object}
- */
-export const addFormatMeta = format => {
-  format = Object.assign({}, FORMATS[format.itag], format);
-  format.hasVideo = !!format.qualityLabel;
-  format.hasAudio = !!format.audioBitrate;
-  format.container = format.mimeType ?
-    format.mimeType.split(';')[0].split('/')[1] : null;
-  format.codecs = format.mimeType ?
-    between(format.mimeType, 'codecs="', '"') : null;
-  format.videoCodec = format.hasVideo && format.codecs ?
-    format.codecs.split(', ')[0] : null;
-  format.audioCodec = format.hasAudio && format.codecs ?
-    format.codecs.split(', ').slice(-1)[0] : null;
-  format.isLive = /\bsource[/=]yt_live_broadcast\b/.test(format.url);
-  format.isHLS = /\/manifest\/hls_(variant|playlist)\//.test(format.url);
-  format.isDashMPD = /\/manifest\/dash\//.test(format.url);
-  return format;
-};
diff --git a/packages/core/src/ytdl-core/formats.js b/packages/core/src/ytdl-core/formats.js
deleted file mode 100644
index 9c6533d0ea..0000000000
--- a/packages/core/src/ytdl-core/formats.js
+++ /dev/null
@@ -1,524 +0,0 @@
-/**
- * http://en.wikipedia.org/wiki/YouTube#Quality_and_formats
- */
-module.exports = {
-
-  5: {
-    mimeType: 'video/flv; codecs="Sorenson H.283, mp3"',
-    qualityLabel: '240p',
-    bitrate: 250000,
-    audioBitrate: 64
-  },
-
-  6: {
-    mimeType: 'video/flv; codecs="Sorenson H.263, mp3"',
-    qualityLabel: '270p',
-    bitrate: 800000,
-    audioBitrate: 64
-  },
-
-  13: {
-    mimeType: 'video/3gp; codecs="MPEG-4 Visual, aac"',
-    qualityLabel: null,
-    bitrate: 500000,
-    audioBitrate: null
-  },
-
-  17: {
-    mimeType: 'video/3gp; codecs="MPEG-4 Visual, aac"',
-    qualityLabel: '144p',
-    bitrate: 50000,
-    audioBitrate: 24
-  },
-
-  18: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '360p',
-    bitrate: 500000,
-    audioBitrate: 96
-  },
-
-  22: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '720p',
-    bitrate: 2000000,
-    audioBitrate: 192
-  },
-
-  34: {
-    mimeType: 'video/flv; codecs="H.264, aac"',
-    qualityLabel: '360p',
-    bitrate: 500000,
-    audioBitrate: 128
-  },
-
-  35: {
-    mimeType: 'video/flv; codecs="H.264, aac"',
-    qualityLabel: '480p',
-    bitrate: 800000,
-    audioBitrate: 128
-  },
-
-  36: {
-    mimeType: 'video/3gp; codecs="MPEG-4 Visual, aac"',
-    qualityLabel: '240p',
-    bitrate: 175000,
-    audioBitrate: 32
-  },
-
-  37: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '1080p',
-    bitrate: 3000000,
-    audioBitrate: 192
-  },
-
-  38: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '3072p',
-    bitrate: 3500000,
-    audioBitrate: 192
-  },
-
-  43: {
-    mimeType: 'video/webm; codecs="VP8, vorbis"',
-    qualityLabel: '360p',
-    bitrate: 500000,
-    audioBitrate: 128
-  },
-
-  44: {
-    mimeType: 'video/webm; codecs="VP8, vorbis"',
-    qualityLabel: '480p',
-    bitrate: 1000000,
-    audioBitrate: 128
-  },
-
-  45: {
-    mimeType: 'video/webm; codecs="VP8, vorbis"',
-    qualityLabel: '720p',
-    bitrate: 2000000,
-    audioBitrate: 192
-  },
-
-  46: {
-    mimeType: 'audio/webm; codecs="vp8, vorbis"',
-    qualityLabel: '1080p',
-    bitrate: null,
-    audioBitrate: 192
-  },
-
-  82: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '360p',
-    bitrate: 500000,
-    audioBitrate: 96
-  },
-
-  83: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '240p',
-    bitrate: 500000,
-    audioBitrate: 96
-  },
-
-  84: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '720p',
-    bitrate: 2000000,
-    audioBitrate: 192
-  },
-
-  85: {
-    mimeType: 'video/mp4; codecs="H.264, aac"',
-    qualityLabel: '1080p',
-    bitrate: 3000000,
-    audioBitrate: 192
-  },
-
-  91: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '144p',
-    bitrate: 100000,
-    audioBitrate: 48
-  },
-
-  92: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '240p',
-    bitrate: 150000,
-    audioBitrate: 48
-  },
-
-  93: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '360p',
-    bitrate: 500000,
-    audioBitrate: 128
-  },
-
-  94: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '480p',
-    bitrate: 800000,
-    audioBitrate: 128
-  },
-
-  95: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '720p',
-    bitrate: 1500000,
-    audioBitrate: 256
-  },
-
-  96: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '1080p',
-    bitrate: 2500000,
-    audioBitrate: 256
-  },
-
-  100: {
-    mimeType: 'audio/webm; codecs="VP8, vorbis"',
-    qualityLabel: '360p',
-    bitrate: null,
-    audioBitrate: 128
-  },
-
-  101: {
-    mimeType: 'audio/webm; codecs="VP8, vorbis"',
-    qualityLabel: '360p',
-    bitrate: null,
-    audioBitrate: 192
-  },
-
-  102: {
-    mimeType: 'audio/webm; codecs="VP8, vorbis"',
-    qualityLabel: '720p',
-    bitrate: null,
-    audioBitrate: 192
-  },
-
-  120: {
-    mimeType: 'video/flv; codecs="H.264, aac"',
-    qualityLabel: '720p',
-    bitrate: 2000000,
-    audioBitrate: 128
-  },
-
-  127: {
-    mimeType: 'audio/ts; codecs="aac"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 96
-  },
-
-  128: {
-    mimeType: 'audio/ts; codecs="aac"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 96
-  },
-
-  132: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '240p',
-    bitrate: 150000,
-    audioBitrate: 48
-  },
-
-  133: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '240p',
-    bitrate: 200000,
-    audioBitrate: null
-  },
-
-  134: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '360p',
-    bitrate: 300000,
-    audioBitrate: null
-  },
-
-  135: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '480p',
-    bitrate: 500000,
-    audioBitrate: null
-  },
-
-  136: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '720p',
-    bitrate: 1000000,
-    audioBitrate: null
-  },
-
-  137: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '1080p',
-    bitrate: 2500000,
-    audioBitrate: null
-  },
-
-  138: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '4320p',
-    bitrate: 13500000,
-    audioBitrate: null
-  },
-
-  139: {
-    mimeType: 'audio/mp4; codecs="aac"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 48
-  },
-
-  140: {
-    mimeType: 'audio/m4a; codecs="aac"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 128
-  },
-
-  141: {
-    mimeType: 'audio/mp4; codecs="aac"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 256
-  },
-
-  151: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '720p',
-    bitrate: 50000,
-    audioBitrate: 24
-  },
-
-  160: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '144p',
-    bitrate: 100000,
-    audioBitrate: null
-  },
-
-  171: {
-    mimeType: 'audio/webm; codecs="vorbis"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 128
-  },
-
-  172: {
-    mimeType: 'audio/webm; codecs="vorbis"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 192
-  },
-
-  242: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '240p',
-    bitrate: 100000,
-    audioBitrate: null
-  },
-
-  243: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '360p',
-    bitrate: 250000,
-    audioBitrate: null
-  },
-
-  244: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '480p',
-    bitrate: 500000,
-    audioBitrate: null
-  },
-
-  247: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '720p',
-    bitrate: 700000,
-    audioBitrate: null
-  },
-
-  248: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '1080p',
-    bitrate: 1500000,
-    audioBitrate: null
-  },
-
-  249: {
-    mimeType: 'audio/webm; codecs="opus"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 48
-  },
-
-  250: {
-    mimeType: 'audio/webm; codecs="opus"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 64
-  },
-
-  251: {
-    mimeType: 'audio/webm; codecs="opus"',
-    qualityLabel: null,
-    bitrate: null,
-    audioBitrate: 160
-  },
-
-  264: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '1440p',
-    bitrate: 4000000,
-    audioBitrate: null
-  },
-
-  266: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '2160p',
-    bitrate: 12500000,
-    audioBitrate: null
-  },
-
-  271: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '1440p',
-    bitrate: 9000000,
-    audioBitrate: null
-  },
-
-  272: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '4320p',
-    bitrate: 20000000,
-    audioBitrate: null
-  },
-
-  278: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '144p 30fps',
-    bitrate: 80000,
-    audioBitrate: null
-  },
-
-  298: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '720p',
-    bitrate: 3000000,
-    audioBitrate: null
-  },
-
-  299: {
-    mimeType: 'video/mp4; codecs="H.264"',
-    qualityLabel: '1080p',
-    bitrate: 5500000,
-    audioBitrate: null
-  },
-
-  300: {
-    mimeType: 'video/ts; codecs="H.264, aac"',
-    qualityLabel: '720p',
-    bitrate: 1318000,
-    audioBitrate: 48
-  },
-
-  302: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '720p HFR',
-    bitrate: 2500000,
-    audioBitrate: null
-  },
-
-  303: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '1080p HFR',
-    bitrate: 5000000,
-    audioBitrate: null
-  },
-
-  308: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '1440p HFR',
-    bitrate: 10000000,
-    audioBitrate: null
-  },
-
-  313: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '2160p',
-    bitrate: 13000000,
-    audioBitrate: null
-  },
-
-  315: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '2160p HFR',
-    bitrate: 20000000,
-    audioBitrate: null
-  },
-
-  330: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '144p HDR, HFR',
-    bitrate: 80000,
-    audioBitrate: null
-  },
-
-  331: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '240p HDR, HFR',
-    bitrate: 100000,
-    audioBitrate: null
-  },
-
-  332: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '360p HDR, HFR',
-    bitrate: 250000,
-    audioBitrate: null
-  },
-
-  333: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '240p HDR, HFR',
-    bitrate: 500000,
-    audioBitrate: null
-  },
-
-  334: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '720p HDR, HFR',
-    bitrate: 1000000,
-    audioBitrate: null
-  },
-
-  335: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '1080p HDR, HFR',
-    bitrate: 1500000,
-    audioBitrate: null
-  },
-
-  336: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '1440p HDR, HFR',
-    bitrate: 5000000,
-    audioBitrate: null
-  },
-
-  337: {
-    mimeType: 'video/webm; codecs="VP9"',
-    qualityLabel: '2160p HDR, HFR',
-    bitrate: 12000000,
-    audioBitrate: null
-  }
-
-};
diff --git a/packages/core/src/ytdl-core/index.d.ts b/packages/core/src/ytdl-core/index.d.ts
deleted file mode 100644
index 2361438855..0000000000
--- a/packages/core/src/ytdl-core/index.d.ts
+++ /dev/null
@@ -1,774 +0,0 @@
-declare module 'tough-cookie' {
-  export const version: string;
-
-  export const PrefixSecurityEnum: Readonly<{
-      DISABLED: string;
-      SILENT: string;
-      STRICT: string;
-  }>;
-  
-  /**
-   * Parse a cookie date string into a Date.
-   * Parses according to RFC6265 Section 5.1.1, not Date.parse().
-   */
-  export function parseDate(string: string): Date;
-  
-  /**
-   * Format a Date into a RFC1123 string (the RFC6265-recommended format).
-   */
-  export function formatDate(date: Date): string;
-  
-  /**
-   * Transforms a domain-name into a canonical domain-name.
-   * The canonical domain-name is a trimmed, lowercased, stripped-of-leading-dot
-   * and optionally punycode-encoded domain-name (Section 5.1.2 of RFC6265).
-   * For the most part, this function is idempotent (can be run again on its output without ill effects).
-   */
-  export function canonicalDomain(str: string): string;
-  
-  /**
-   * Answers "does this real domain match the domain in a cookie?".
-   * The str is the "current" domain-name and the domStr is the "cookie" domain-name.
-   * Matches according to RFC6265 Section 5.1.3, but it helps to think of it as a "suffix match".
-   *
-   * The canonicalize parameter will run the other two parameters through canonicalDomain or not.
-   */
-  export function domainMatch(str: string, domStr: string, canonicalize?: boolean): boolean;
-  
-  /**
-   * Given a current request/response path, gives the Path apropriate for storing in a cookie.
-   * This is basically the "directory" of a "file" in the path, but is specified by Section 5.1.4 of the RFC.
-   *
-   * The path parameter MUST be only the pathname part of a URI (i.e. excludes the hostname, query, fragment, etc.).
-   * This is the .pathname property of node's uri.parse() output.
-   */
-  export function defaultPath(path: string): string;
-  
-  /**
-   * Answers "does the request-path path-match a given cookie-path?" as per RFC6265 Section 5.1.4.
-   * Returns a boolean.
-   *
-   * This is essentially a prefix-match where cookiePath is a prefix of reqPath.
-   */
-  export function pathMatch(reqPath: string, cookiePath: string): boolean;
-  
-  /**
-   * alias for Cookie.parse(cookieString[, options])
-   */
-  export function parse(cookieString: string, options?: Cookie.ParseOptions): Cookie | undefined;
-  
-  /**
-   * alias for Cookie.fromJSON(string)
-   */
-  export function fromJSON(string: string): Cookie;
-  
-  export function getPublicSuffix(hostname: string): string | null;
-  
-  export function cookieCompare(a: Cookie, b: Cookie): number;
-  
-  export function permuteDomain(domain: string, allowSpecialUseDomain?: boolean): string[];
-  
-  export function permutePath(path: string): string[];
-  
-  export class Cookie {
-    static parse(cookieString: string, options?: Cookie.ParseOptions): Cookie | undefined;
-  
-    static fromJSON(strOrObj: string | object): Cookie | null;
-  
-    constructor(properties?: Cookie.Properties);
-  
-      key: string;
-      value: string;
-      expires: Date | 'Infinity';
-      maxAge: number | 'Infinity' | '-Infinity';
-      domain: string | null;
-      path: string | null;
-      secure: boolean;
-      httpOnly: boolean;
-      extensions: string[] | null;
-      creation: Date | null;
-      creationIndex: number;
-  
-      hostOnly: boolean | null;
-      pathIsDefault: boolean | null;
-      lastAccessed: Date | null;
-      sameSite: string;
-  
-      toString(): string;
-  
-      cookieString(): string;
-  
-      setExpires(exp: Date | string): void;
-  
-      setMaxAge(number: number): void;
-  
-      expiryTime(now?: number): number;
-  
-      expiryDate(now?: number): Date;
-  
-      TTL(now?: Date): number | typeof Infinity;
-  
-      isPersistent(): boolean;
-  
-      canonicalizedDomain(): string | null;
-  
-      cdomain(): string | null;
-  
-      inspect(): string;
-  
-      toJSON(): { [key: string]: any };
-  
-      clone(): Cookie;
-  
-      validate(): boolean | string;
-  }
-  
-  export namespace Cookie {
-      interface ParseOptions {
-          loose?: boolean | undefined;
-      }
-  
-      interface Properties {
-          key?: string | undefined;
-          value?: string | undefined;
-          expires?: Date | 'Infinity' | undefined;
-          maxAge?: number | 'Infinity' | '-Infinity' | undefined;
-          domain?: string | undefined;
-          path?: string | undefined;
-          secure?: boolean | undefined;
-          httpOnly?: boolean | undefined;
-          extensions?: string[] | undefined;
-          creation?: Date | undefined;
-          creationIndex?: number | undefined;
-  
-          hostOnly?: boolean | undefined;
-          pathIsDefault?: boolean | undefined;
-          lastAccessed?: Date | undefined;
-          sameSite?: string | undefined;
-      }
-  
-      interface Serialized {
-          [key: string]: any;
-      }
-  }
-  
-  export class CookieJar {
-    static deserialize(serialized: CookieJar.Serialized | string, store?: Store): Promise<CookieJar>;
-    static deserialize(
-          serialized: CookieJar.Serialized | string,
-          store: Store,
-          cb: (err: Error | null, object: CookieJar) => void,
-      ): void;
-    static deserialize(
-          serialized: CookieJar.Serialized | string,
-          cb: (err: Error | null, object: CookieJar) => void,
-      ): void;
-  
-    static deserializeSync(serialized: CookieJar.Serialized | string, store?: Store): CookieJar;
-  
-    static fromJSON(string: string): CookieJar;
-  
-    constructor(store?: Store, options?: CookieJar.Options);
-  
-    setCookie(
-          cookieOrString: Cookie | string,
-          currentUrl: string,
-          options?: CookieJar.SetCookieOptions,
-      ): Promise<Cookie>;
-    setCookie(
-          cookieOrString: Cookie | string,
-          currentUrl: string,
-          options: CookieJar.SetCookieOptions,
-          cb: (err: Error | null, cookie: Cookie) => void,
-      ): void;
-    setCookie(
-          cookieOrString: Cookie | string,
-          currentUrl: string,
-          cb: (err: Error | null, cookie: Cookie) => void,
-      ): void;
-  
-    setCookieSync(cookieOrString: Cookie | string, currentUrl: string, options?: CookieJar.SetCookieOptions): Cookie;
-  
-    getCookies(currentUrl: string, options?: CookieJar.GetCookiesOptions): Promise<Cookie[]>;
-    getCookies(
-          currentUrl: string,
-          options: CookieJar.GetCookiesOptions,
-          cb: (err: Error | null, cookies: Cookie[]) => void,
-      ): void;
-    getCookies(currentUrl: string, cb: (err: Error | null, cookies: Cookie[]) => void): void;
-  
-    getCookiesSync(currentUrl: string, options?: CookieJar.GetCookiesOptions): Cookie[];
-  
-    getCookieString(currentUrl: string, options?: CookieJar.GetCookiesOptions): Promise<string>;
-    getCookieString(
-          currentUrl: string,
-          options: CookieJar.GetCookiesOptions,
-          cb: (err: Error | null, cookies: string) => void,
-      ): void;
-    getCookieString(currentUrl: string, cb: (err: Error | null, cookies: string) => void): void;
-  
-    getCookieStringSync(currentUrl: string, options?: CookieJar.GetCookiesOptions): string;
-  
-    getSetCookieStrings(currentUrl: string, options?: CookieJar.GetCookiesOptions): Promise<string[]>;
-    getSetCookieStrings(
-          currentUrl: string,
-          options: CookieJar.GetCookiesOptions,
-          cb: (err: Error | null, cookies: string[]) => void,
-      ): void;
-    getSetCookieStrings(currentUrl: string, cb: (err: Error | null, cookies: string[]) => void): void;
-  
-    getSetCookieStringsSync(currentUrl: string, options?: CookieJar.GetCookiesOptions): string[];
-  
-    serialize(): Promise<CookieJar.Serialized>;
-    serialize(cb: (err: Error | null, serializedObject: CookieJar.Serialized) => void): void;
-  
-    serializeSync(): CookieJar.Serialized;
-  
-    toJSON(): CookieJar.Serialized;
-  
-    clone(store?: Store): Promise<CookieJar>;
-    clone(store: Store, cb: (err: Error | null, newJar: CookieJar) => void): void;
-    clone(cb: (err: Error | null, newJar: CookieJar) => void): void;
-  
-    cloneSync(store?: Store): CookieJar;
-  
-    removeAllCookies(): Promise<void>;
-    removeAllCookies(cb: (err: Error | null) => void): void;
-  
-    removeAllCookiesSync(): void;
-  }
-  
-  export namespace CookieJar {
-      interface Options {
-          allowSpecialUseDomain?: boolean | undefined;
-          looseMode?: boolean | undefined;
-          rejectPublicSuffixes?: boolean | undefined;
-          prefixSecurity?: string | undefined;
-      }
-  
-      interface SetCookieOptions {
-          http?: boolean | undefined;
-          secure?: boolean | undefined;
-          now?: Date | undefined;
-          ignoreError?: boolean | undefined;
-      }
-  
-      interface GetCookiesOptions {
-          http?: boolean | undefined;
-          secure?: boolean | undefined;
-          now?: Date | undefined;
-          expire?: boolean | undefined;
-          allPaths?: boolean | undefined;
-      }
-  
-      interface Serialized {
-          version: string;
-          storeType: string;
-          rejectPublicSuffixes: boolean;
-          cookies: Cookie.Serialized[];
-      }
-  }
-  
-  export abstract class Store {
-      synchronous: boolean;
-  
-      findCookie(domain: string, path: string, key: string, cb: (err: Error | null, cookie: Cookie | null) => void): void;
-  
-      findCookies(
-          domain: string,
-          path: string,
-          allowSpecialUseDomain: boolean,
-          cb: (err: Error | null, cookie: Cookie[]) => void,
-      ): void;
-  
-      putCookie(cookie: Cookie, cb: (err: Error | null) => void): void;
-  
-      updateCookie(oldCookie: Cookie, newCookie: Cookie, cb: (err: Error | null) => void): void;
-  
-      removeCookie(domain: string, path: string, key: string, cb: (err: Error | null) => void): void;
-  
-      removeCookies(domain: string, path: string, cb: (err: Error | null) => void): void;
-  
-      getAllCookies(cb: (err: Error | null, cookie: Cookie[]) => void): void;
-  }
-  
-  export class MemoryCookieStore extends Store {
-    findCookie(domain: string, path: string, key: string, cb: (err: Error | null, cookie: Cookie | null) => void): void;
-    findCookie(domain: string, path: string, key: string): Promise<Cookie | null>;
-  
-    findCookies(
-          domain: string,
-          path: string,
-          allowSpecialUseDomain: boolean,
-          cb: (err: Error | null, cookie: Cookie[]) => void,
-      ): void;
-    findCookies(domain: string, path: string, cb: (err: Error | null, cookie: Cookie[]) => void): void;
-    findCookies(domain: string, path: string, allowSpecialUseDomain?: boolean): Promise<Cookie[]>;
-  
-    putCookie(cookie: Cookie, cb: (err: Error | null) => void): void;
-    putCookie(cookie: Cookie): Promise<void>;
-  
-    updateCookie(oldCookie: Cookie, newCookie: Cookie, cb: (err: Error | null) => void): void;
-    updateCookie(oldCookie: Cookie, newCookie: Cookie): Promise<void>;
-  
-    removeCookie(domain: string, path: string, key: string, cb: (err: Error | null) => void): void;
-    removeCookie(domain: string, path: string, key: string): Promise<void>;
-  
-    removeCookies(domain: string, path: string, cb: (err: Error | null) => void): void;
-    removeCookies(domain: string, path: string): Promise<void>;
-  
-    getAllCookies(cb: (err: Error | null, cookie: Cookie[]) => void): void;
-    getAllCookies(): Promise<Cookie[]>;
-  }
-}
-
-import { Dispatcher, ProxyAgent, request } from 'undici';
-import { Cookie as CK, CookieJar } from 'tough-cookie';
-import { CookieAgent } from 'http-cookie-agent/undici';
-import { Readable } from 'stream';
-
-  namespace ytdl {
-    type Filter = 'audioandvideo' | 'videoandaudio' | 'video' | 'videoonly' | 'audio' | 'audioonly' | ((format: videoFormat) => boolean);
-
-    interface Agent {
-      dispatcher: Dispatcher;
-      jar: CookieJar;
-      localAddress?: string;
-    }
-
-    interface getInfoOptions {
-      lang?: string;
-      requestCallback?: () => {};
-      requestOptions?: Parameters<typeof request>[1];
-      agent?: Agent;
-    }
-
-    interface chooseFormatOptions {
-      quality?: 'lowest' | 'highest' | 'highestaudio' | 'lowestaudio' | 'highestvideo' | 'lowestvideo' | string | number | string[] | number[];
-      filter?: Filter;
-      format?: videoFormat;
-    }
-
-    interface downloadOptions extends getInfoOptions, chooseFormatOptions {
-      range?: {
-        start?: number;
-        end?: number;
-      };
-      begin?: string | number | Date;
-      liveBuffer?: number;
-      highWaterMark?: number;
-      IPv6Block?: string;
-      dlChunkSize?: number;
-    }
-
-    interface videoFormat {
-      itag: number;
-      url: string;
-      mimeType?: string;
-      bitrate?: number;
-      audioBitrate?: number;
-      width?: number;
-      height?: number;
-      initRange?: { start: string; end: string };
-      indexRange?: { start: string; end: string };
-      lastModified: string;
-      contentLength: string;
-      quality: 'tiny' | 'small' | 'medium' | 'large' | 'hd720' | 'hd1080' | 'hd1440' | 'hd2160' | 'highres' | string;
-      qualityLabel: '144p' | '144p 15fps' | '144p60 HDR' | '240p' | '240p60 HDR' | '270p' | '360p' | '360p60 HDR'
-        | '480p' | '480p60 HDR' | '720p' | '720p60' | '720p60 HDR' | '1080p' | '1080p60' | '1080p60 HDR' | '1440p'
-        | '1440p60' | '1440p60 HDR' | '2160p' | '2160p60' | '2160p60 HDR' | '4320p' | '4320p60';
-      projectionType?: 'RECTANGULAR';
-      fps?: number;
-      averageBitrate?: number;
-      audioQuality?: 'AUDIO_QUALITY_LOW' | 'AUDIO_QUALITY_MEDIUM';
-      colorInfo?: {
-        primaries: string;
-        transferCharacteristics: string;
-        matrixCoefficients: string;
-      };
-      highReplication?: boolean;
-      approxDurationMs?: string;
-      targetDurationSec?: number;
-      maxDvrDurationSec?: number;
-      audioSampleRate?: string;
-      audioChannels?: number;
-
-      // Added by ytdl-core
-      container: 'flv' | '3gp' | 'mp4' | 'webm' | 'ts';
-      hasVideo: boolean;
-      hasAudio: boolean;
-      codecs: string;
-      videoCodec?: string;
-      audioCodec?: string;
-
-      isLive: boolean;
-      isHLS: boolean;
-      isDashMPD: boolean;
-    }
-
-    interface thumbnail {
-      url: string;
-      width: number;
-      height: number;
-    }
-
-    interface captionTrack {
-      baseUrl: string;
-      name: {
-        simpleText: 'Afrikaans' | 'Albanian' | 'Amharic' | 'Arabic' | 'Armenian' | 'Azerbaijani' | 'Bangla' | 'Basque'
-        | 'Belarusian' | 'Bosnian' | 'Bulgarian' | 'Burmese' | 'Catalan' | 'Cebuano' | 'Chinese (Simplified)'
-        | 'Chinese (Traditional)' | 'Corsican' | 'Croatian' | 'Czech' | 'Danish' | 'Dutch' | 'English'
-        | 'English (auto-generated)' | 'Esperanto' | 'Estonian' | 'Filipino' | 'Finnish' | 'French' | 'Galician'
-        | 'Georgian' | 'German' | 'Greek' | 'Gujarati' | 'Haitian Creole' | 'Hausa' | 'Hawaiian' | 'Hebrew' | 'Hindi'
-        | 'Hmong' | 'Hungarian' | 'Icelandic' | 'Igbo' | 'Indonesian' | 'Irish' | 'Italian' | 'Japanese' | 'Javanese'
-        | 'Kannada' | 'Kazakh' | 'Khmer' | 'Korean' | 'Kurdish' | 'Kyrgyz' | 'Lao' | 'Latin' | 'Latvian' | 'Lithuanian'
-        | 'Luxembourgish' | 'Macedonian' | 'Malagasy' | 'Malay' | 'Malayalam' | 'Maltese' | 'Maori' | 'Marathi'
-        | 'Mongolian' | 'Nepali' | 'Norwegian' | 'Nyanja' | 'Pashto' | 'Persian' | 'Polish' | 'Portuguese' | 'Punjabi'
-        | 'Romanian' | 'Russian' | 'Samoan' | 'Scottish Gaelic' | 'Serbian' | 'Shona' | 'Sindhi' | 'Sinhala' | 'Slovak'
-        | 'Slovenian' | 'Somali' | 'Southern Sotho' | 'Spanish' | 'Spanish (Spain)' | 'Sundanese' | 'Swahili'
-        | 'Swedish' | 'Tajik' | 'Tamil' | 'Telugu' | 'Thai' | 'Turkish' | 'Ukrainian' | 'Urdu' | 'Uzbek' | 'Vietnamese'
-        | 'Welsh' | 'Western Frisian' | 'Xhosa' | 'Yiddish' | 'Yoruba' | 'Zulu' | string;
-      };
-      vssId: string;
-      languageCode: 'af' | 'sq' | 'am' | 'ar' | 'hy' | 'az' | 'bn' | 'eu' | 'be' | 'bs' | 'bg' | 'my' | 'ca' | 'ceb'
-      | 'zh-Hans' | 'zh-Hant' | 'co' | 'hr' | 'cs' | 'da' | 'nl' | 'en' | 'eo' | 'et' | 'fil' | 'fi' | 'fr' | 'gl'
-      | 'ka' | 'de' | 'el' | 'gu' | 'ht' | 'ha' | 'haw' | 'iw' | 'hi' | 'hmn' | 'hu' | 'is' | 'ig' | 'id' | 'ga' | 'it'
-      | 'ja' | 'jv' | 'kn' | 'kk' | 'km' | 'ko' | 'ku' | 'ky' | 'lo' | 'la' | 'lv' | 'lt' | 'lb' | 'mk' | 'mg' | 'ms'
-      | 'ml' | 'mt' | 'mi' | 'mr' | 'mn' | 'ne' | 'no' | 'ny' | 'ps' | 'fa' | 'pl' | 'pt' | 'pa' | 'ro' | 'ru' | 'sm'
-      | 'gd' | 'sr' | 'sn' | 'sd' | 'si' | 'sk' | 'sl' | 'so' | 'st' | 'es' | 'su' | 'sw' | 'sv' | 'tg' | 'ta' | 'te'
-      | 'th' | 'tr' | 'uk' | 'ur' | 'uz' | 'vi' | 'cy' | 'fy' | 'xh' | 'yi' | 'yo' | 'zu' | string;
-      kind: string;
-      rtl?: boolean;
-      isTranslatable: boolean;
-    }
-
-    interface audioTrack {
-      captionTrackIndices: number[];
-    }
-
-    interface translationLanguage {
-      languageCode: captionTrack['languageCode'];
-      languageName: captionTrack['name'];
-    }
-
-    interface VideoDetails {
-      videoId: string;
-      title: string;
-      shortDescription: string;
-      lengthSeconds: string;
-      keywords?: string[];
-      channelId: string;
-      isOwnerViewing: boolean;
-      isCrawlable: boolean;
-      thumbnails: thumbnail[];
-      averageRating: number;
-      allowRatings: boolean;
-      viewCount: string;
-      author: string;
-      isPrivate: boolean;
-      isUnpluggedCorpus: boolean;
-      isLiveContent: boolean;
-      isLive: boolean;
-    }
-
-    interface Media {
-      category: string;
-      category_url: string;
-      game?: string;
-      game_url?: string;
-      year?: number;
-      song?: string;
-      artist?: string;
-      artist_url?: string;
-      writers?: string;
-      licensed_by?: string;
-      thumbnails: thumbnail[];
-    }
-
-    interface Author {
-      id: string;
-      name: string;
-      avatar: string; // to remove later
-      thumbnails?: thumbnail[];
-      verified: boolean;
-      user?: string;
-      channel_url: string;
-      external_channel_url?: string;
-      user_url?: string;
-      subscriber_count?: number;
-    }
-
-    interface MicroformatRenderer {
-      thumbnail: {
-        thumbnails: thumbnail[];
-      };
-      embed: {
-        iframeUrl: string;
-        flashUrl: string;
-        width: number;
-        height: number;
-        flashSecureUrl: string;
-      };
-      title: {
-        simpleText: string;
-      };
-      description: {
-        simpleText: string;
-      };
-      lengthSeconds: string;
-      ownerProfileUrl: string;
-      ownerGplusProfileUrl?: string;
-      externalChannelId: string;
-      isFamilySafe: boolean;
-      availableCountries: string[];
-      isUnlisted: boolean;
-      hasYpcMetadata: boolean;
-      viewCount: string;
-      category: string;
-      publishDate: string;
-      ownerChannelName: string;
-      liveBroadcastDetails?: {
-        isLiveNow: boolean;
-        startTimestamp: string;
-        endTimestamp?: string;
-      };
-      uploadDate: string;
-    }
-
-    interface storyboard {
-      templateUrl: string;
-      thumbnailWidth: number;
-      thumbnailHeight: number;
-      thumbnailCount: number;
-      interval: number;
-      columns: number;
-      rows: number;
-      storyboardCount: number;
-    }
-
-    interface Chapter {
-      title: string;
-      start_time: number;
-    }
-
-    interface MoreVideoDetails extends Omit<VideoDetails, 'author' | 'thumbnail' | 'shortDescription'>, Omit<MicroformatRenderer, 'title' | 'description'> {
-      published: number;
-      video_url: string;
-      age_restricted: boolean;
-      likes: number | null;
-      media: Media;
-      author: Author;
-      thumbnails: thumbnail[];
-      storyboards: storyboard[];
-      chapters: Chapter[];
-      description: string | null;
-    }
-
-    interface videoInfo {
-      iv_load_policy?: string;
-      iv_allow_in_place_switch?: string;
-      iv_endscreen_url?: string;
-      iv_invideo_url?: string;
-      iv3_module?: string;
-      rmktEnabled?: string;
-      uid?: string;
-      vid?: string;
-      focEnabled?: string;
-      baseUrl?: string;
-      storyboard_spec?: string;
-      serialized_ad_ux_config?: string;
-      player_error_log_fraction?: string;
-      sffb?: string;
-      ldpj?: string;
-      videostats_playback_base_url?: string;
-      innertube_context_client_version?: string;
-      t?: string;
-      fade_in_start_milliseconds: string;
-      timestamp: string;
-      ad3_module: string;
-      relative_loudness: string;
-      allow_below_the_player_companion: string;
-      eventid: string;
-      token: string;
-      atc: string;
-      cr: string;
-      apply_fade_on_midrolls: string;
-      cl: string;
-      fexp: string[];
-      apiary_host: string;
-      fade_in_duration_milliseconds: string;
-      fflags: string;
-      ssl: string;
-      pltype: string;
-      enabled_engage_types: string;
-      hl: string;
-      is_listed: string;
-      gut_tag: string;
-      apiary_host_firstparty: string;
-      enablecsi: string;
-      csn: string;
-      status: string;
-      afv_ad_tag: string;
-      idpj: string;
-      sfw_player_response: string;
-      account_playback_token: string;
-      encoded_ad_safety_reason: string;
-      tag_for_children_directed: string;
-      no_get_video_log: string;
-      ppv_remarketing_url: string;
-      fmt_list: string[][];
-      ad_slots: string;
-      fade_out_duration_milliseconds: string;
-      instream_long: string;
-      allow_html5_ads: string;
-      core_dbp: string;
-      ad_device: string;
-      itct: string;
-      root_ve_type: string;
-      excluded_ads: string;
-      aftv: string;
-      loeid: string;
-      cver: string;
-      shortform: string;
-      dclk: string;
-      csi_page_type: string;
-      ismb: string;
-      gpt_migration: string;
-      loudness: string;
-      ad_tag: string;
-      of: string;
-      probe_url: string;
-      vm: string;
-      afv_ad_tag_restricted_to_instream: string;
-      gapi_hint_params: string;
-      cid: string;
-      c: string;
-      oid: string;
-      ptchn: string;
-      as_launched_in_country: string;
-      avg_rating: string;
-      fade_out_start_milliseconds: string;
-      midroll_prefetch_size: string;
-      allow_ratings: string;
-      thumbnail_url: string;
-      iurlsd: string;
-      iurlmq: string;
-      iurlhq: string;
-      iurlmaxres: string;
-      ad_preroll: string;
-      tmi: string;
-      trueview: string;
-      host_language: string;
-      innertube_api_key: string;
-      show_content_thumbnail: string;
-      afv_instream_max: string;
-      innertube_api_version: string;
-      mpvid: string;
-      allow_embed: string;
-      ucid: string;
-      plid: string;
-      midroll_freqcap: string;
-      ad_logging_flag: string;
-      ptk: string;
-      vmap: string;
-      watermark: string[];
-      dbp: string;
-      ad_flags: string;
-      html5player: string;
-      formats: videoFormat[];
-      related_videos: relatedVideo[];
-      no_embed_allowed?: boolean;
-      player_response: {
-        playabilityStatus: {
-          status: string;
-          playableInEmbed: boolean;
-          miniplayer: {
-            miniplayerRenderer: {
-              playbackMode: string;
-            };
-          };
-          contextParams: string;
-        };
-        streamingData: {
-          expiresInSeconds: string;
-          formats: {}[];
-          adaptiveFormats: {}[];
-        };
-        captions?: {
-          playerCaptionsRenderer: {
-            baseUrl: string;
-            visibility: string;
-          };
-          playerCaptionsTracklistRenderer: {
-            captionTracks: captionTrack[];
-            audioTracks: audioTrack[];
-            translationLanguages: translationLanguage[];
-            defaultAudioTrackIndex: number;
-          };
-        };
-        microformat: {
-          playerMicroformatRenderer: MicroformatRenderer;
-        };
-        videoDetails: VideoDetails;
-        playerConfig: {
-          audioConfig: {
-            loudnessDb: number;
-            perceptualLoudnessDb: number;
-            enablePerFormatLoudness: boolean;
-          };
-          streamSelectionConfig: { maxBitrate: string };
-          mediaCommonConfig: { dynamicReadaheadConfig: {}[] };
-          webPlayerConfig: { webPlayerActionsPorting: {}[] };
-        };
-      };
-      videoDetails: MoreVideoDetails;
-    }
-
-    interface relatedVideo {
-      id?: string;
-      title?: string;
-      published?: string;
-      author: Author | 'string'; // to remove the `string` part later
-      ucid?: string; // to remove later
-      author_thumbnail?: string; // to remove later
-      short_view_count_text?: string;
-      view_count?: string;
-      length_seconds?: number;
-      video_thumbnail?: string; // to remove later
-      thumbnails: thumbnail[];
-      richThumbnails: thumbnail[];
-      isLive: boolean;
-    }
-
-    interface Cookie {
-      name: string;
-      value: string;
-      expirationDate?: number;
-      domain?: string;
-      path?: string;
-      secure?: boolean;
-      httpOnly?: boolean;
-      hostOnly?: boolean;
-      sameSite?: string;
-    }
-
-    function getBasicInfo(url: string, options?: getInfoOptions): Promise<videoInfo>;
-    function getInfo(url: string, options?: getInfoOptions): Promise<videoInfo>;
-    function downloadFromInfo(info: videoInfo, options?: downloadOptions): Readable;
-    function chooseFormat(format: videoFormat | videoFormat[], options?: chooseFormatOptions): videoFormat | never;
-    function filterFormats(formats: videoFormat | videoFormat[], filter?: Filter): videoFormat[];
-    function validateID(string: string): boolean;
-    function validateURL(string: string): boolean;
-    function getURLVideoID(string: string): string | never;
-    function getVideoID(string: string): string | never;
-    function createProxyAgent(options: ProxyAgent.Options | string): Agent;
-    function createProxyAgent(options: ProxyAgent.Options | string, cookies?: (Cookie | CK)[]): Agent;
-    function createAgent(): Agent;
-    function createAgent(cookies?: (Cookie | CK)[]): Agent;
-    function createAgent(cookies?: (Cookie | CK)[], opts?: CookieAgent.Options): Agent;
-    const version: number;
-  }
-
-  function ytdl(link: string, options?: ytdl.downloadOptions): Readable;
-
-  export = ytdl;
diff --git a/packages/core/src/ytdl-core/index.js b/packages/core/src/ytdl-core/index.js
deleted file mode 100644
index e439fefc25..0000000000
--- a/packages/core/src/ytdl-core/index.js
+++ /dev/null
@@ -1,239 +0,0 @@
-import { PassThrough } from 'stream';
-import {getBasicInfo, getInfo, cache as getInfoCache, watchPageCache} from './info';
-import {playError, applyDefaultHeaders, getRandomIPv6, setPropInsensitive} from './utils';
-import {chooseFormat, filterFormats} from './format-utils';
-import {getURLVideoID, getVideoID, validateID, validateURL} from './url-utils';
-import {cache as sigCache} from './sig';
-import miniget from 'miniget';
-import m3u8stream, { parseTimestamp } from 'm3u8stream';
-import {createAgent, createProxyAgent} from './agent';
-
-
-/**
- * @param {string} link
- * @param {!Object} options
- * @returns {ReadableStream}
- */
-const ytdl = (link, options) => {
-  const stream = createStream(options);
-  ytdl.getInfo(link, options).then(info => {
-    downloadFromInfoCallback(stream, info, options);
-  }, stream.emit.bind(stream, 'error'));
-  return stream;
-};
-export default ytdl;
-
-ytdl.getBasicInfo = getBasicInfo;
-ytdl.getInfo = getInfo;
-ytdl.chooseFormat = chooseFormat;
-ytdl.filterFormats = filterFormats;
-ytdl.validateID = validateID;
-ytdl.validateURL = validateURL;
-ytdl.getURLVideoID = getURLVideoID;
-ytdl.getVideoID = getVideoID;
-ytdl.createAgent = createAgent;
-ytdl.createProxyAgent = createProxyAgent;
-ytdl.cache = {
-  sig: sigCache,
-  info: getInfoCache,
-  watch: watchPageCache
-};
-
-
-const createStream = options => {
-  const stream = new PassThrough({
-    highWaterMark: (options && options.highWaterMark) || 1024 * 512
-  });
-  stream._destroy = () => {
-    stream.destroyed = true; 
-  };
-  return stream;
-};
-
-
-const pipeAndSetEvents = (req, stream, end) => {
-  // Forward events from the request to the stream.
-  [
-    'abort', 'request', 'response', 'error', 'redirect', 'retry', 'reconnect'
-  ].forEach(event => {
-    req.prependListener(event, stream.emit.bind(stream, event));
-  });
-  req.pipe(stream, { end });
-};
-
-
-/**
- * Chooses a format to download.
- *
- * @param {stream.Readable} stream
- * @param {Object} info
- * @param {Object} options
- */
-const downloadFromInfoCallback = (stream, info, options) => {
-  options = options || {};
-
-  let err = playError(info.player_response, ['UNPLAYABLE', 'LIVE_STREAM_OFFLINE', 'LOGIN_REQUIRED']);
-  if (err) {
-    stream.emit('error', err);
-    return;
-  }
-
-  if (!info.formats.length) {
-    stream.emit('error', Error('This video is unavailable'));
-    return;
-  }
-
-  let format;
-  try {
-    format = chooseFormat(info.formats, options);
-  } catch (e) {
-    stream.emit('error', e);
-    return;
-  }
-  stream.emit('info', info, format);
-  if (stream.destroyed) {
-    return; 
-  }
-
-  let contentLength, downloaded = 0;
-  const ondata = chunk => {
-    downloaded += chunk.length;
-    stream.emit('progress', chunk.length, downloaded, contentLength);
-  };
-
-  applyDefaultHeaders(options);
-  if (options.IPv6Block) {
-    options.requestOptions = Object.assign({}, options.requestOptions, {
-      localAddress: getRandomIPv6(options.IPv6Block)
-    });
-  }
-  if (options.agent) {
-    if (options.agent.jar) {
-      setPropInsensitive(
-        options.requestOptions.headers, 'cookie', options.agent.jar.getCookieStringSync('https://www.youtube.com')
-      );
-    }
-    if (options.agent.localAddress) {
-      options.requestOptions.localAddress = options.agent.localAddress;
-    }
-  }
-
-  // Download the file in chunks, in this case the default is 10MB,
-  // anything over this will cause youtube to throttle the download
-  const dlChunkSize = typeof options.dlChunkSize === 'number' ? options.dlChunkSize : 1024 * 1024 * 10;
-  let req;
-  let shouldEnd = true;
-
-  if (format.isHLS || format.isDashMPD) {
-    req = m3u8stream(format.url, {
-      chunkReadahead: +info.live_chunk_readahead,
-      begin: options.begin || (format.isLive && Date.now()),
-      liveBuffer: options.liveBuffer,
-      requestOptions: options.requestOptions,
-      parser: format.isDashMPD ? 'dash-mpd' : 'm3u8',
-      id: format.itag
-    });
-
-    req.on('progress', (segment, totalSegments) => {
-      stream.emit('progress', segment.size, segment.num, totalSegments);
-    });
-    pipeAndSetEvents(req, stream, shouldEnd);
-  } else {
-    const requestOptions = Object.assign({}, options.requestOptions, {
-      maxReconnects: 6,
-      maxRetries: 3,
-      backoff: { inc: 500, max: 10000 }
-    });
-
-    let shouldBeChunked = dlChunkSize !== 0 && (!format.hasAudio || !format.hasVideo);
-
-    if (shouldBeChunked) {
-      let start = (options.range && options.range.start) || 0;
-      let end = start + dlChunkSize;
-      const rangeEnd = options.range && options.range.end;
-
-      contentLength = options.range ?
-        (rangeEnd ? rangeEnd + 1 : parseInt(format.contentLength)) - start :
-        parseInt(format.contentLength);
-
-      const getNextChunk = () => {
-        if (stream.destroyed) {
-          return;
-        }
-        if (!rangeEnd && end >= contentLength) {
-          end = 0;
-        }
-        if (rangeEnd && end > rangeEnd) {
-          end = rangeEnd;
-        }
-        shouldEnd = !end || end === rangeEnd;
-
-        requestOptions.headers = Object.assign({}, requestOptions.headers, {
-          Range: `bytes=${start}-${end || ''}`
-        });
-        req = miniget(format.url, requestOptions);
-        req.on('data', ondata);
-        req.on('end', () => {
-          if (stream.destroyed) {
-            return;
-          }
-          if (end && end !== rangeEnd) {
-            start = end + 1;
-            end += dlChunkSize;
-            getNextChunk();
-          }
-        });
-        pipeAndSetEvents(req, stream, shouldEnd);
-      };
-      getNextChunk();
-    } else {
-      // Audio only and video only formats don't support begin
-      if (options.begin) {
-        format.url += `&begin=${parseTimestamp(options.begin)}`;
-      }
-      if (options.range && (options.range.start || options.range.end)) {
-        requestOptions.headers = Object.assign({}, requestOptions.headers, {
-          Range: `bytes=${options.range.start || '0'}-${options.range.end || ''}`
-        });
-      }
-      req = miniget(format.url, requestOptions);
-      req.on('response', res => {
-        if (stream.destroyed) {
-          return;
-        }
-        contentLength = contentLength || parseInt(res.headers['content-length']);
-      });
-      req.on('data', ondata);
-      pipeAndSetEvents(req, stream, shouldEnd);
-    }
-  }
-
-  stream._destroy = () => {
-    stream.destroyed = true;
-    if (req) {
-      req.destroy();
-      req.end();
-    }
-  };
-};
-
-
-/**
- * Can be used to download video after its `info` is gotten through
- * `ytdl.getInfo()`. In case the user might want to look at the
- * `info` object before deciding to download.
- *
- * @param {Object} info
- * @param {!Object} options
- * @returns {ReadableStream}
- */
-ytdl.downloadFromInfo = (info, options) => {
-  const stream = createStream(options);
-  if (!info.full) {
-    throw Error('Cannot use `ytdl.downloadFromInfo()` when called with info from `ytdl.getBasicInfo()`');
-  }
-  setImmediate(() => {
-    downloadFromInfoCallback(stream, info, options);
-  });
-  return stream;
-};
diff --git a/packages/core/src/ytdl-core/info-extras.js b/packages/core/src/ytdl-core/info-extras.js
deleted file mode 100644
index d1e81e307a..0000000000
--- a/packages/core/src/ytdl-core/info-extras.js
+++ /dev/null
@@ -1,362 +0,0 @@
-import {parseAbbreviatedNumber, deprecate} from './utils';
-import qs from 'querystring';
-import { parseTimestamp } from 'm3u8stream';
-import { URL } from 'url';
-
-
-const BASE_URL = 'https://www.youtube.com/watch?v=';
-const TITLE_TO_CATEGORY = {
-  song: { name: 'Music', url: 'https://music.youtube.com/' }
-};
-
-const getText = obj => obj ? obj.runs ? obj.runs[0].text : obj.simpleText : null;
-
-
-/**
- * Get video media.
- *
- * @param {Object} info
- * @returns {Object}
- */
-export const getMedia = info => {
-  let media = {};
-  let results = [];
-  try {
-    results = info.response.contents.twoColumnWatchNextResults.results.results.contents;
-  } catch (err) {
-    // Do nothing
-  }
-
-  let result = results.find(v => v.videoSecondaryInfoRenderer);
-  if (!result) {
-    return {}; 
-  }
-
-  try {
-    let metadataRows =
-      (result.metadataRowContainer || result.videoSecondaryInfoRenderer.metadataRowContainer)
-        .metadataRowContainerRenderer.rows;
-    for (let row of metadataRows) {
-      if (row.metadataRowRenderer) {
-        let title = getText(row.metadataRowRenderer.title).toLowerCase();
-        let contents = row.metadataRowRenderer.contents[0];
-        media[title] = getText(contents);
-        let runs = contents.runs;
-        if (runs && runs[0].navigationEndpoint) {
-          media[`${title}_url`] = new URL(
-            runs[0].navigationEndpoint.commandMetadata.webCommandMetadata.url, BASE_URL).toString();
-        }
-        if (title in TITLE_TO_CATEGORY) {
-          media.category = TITLE_TO_CATEGORY[title].name;
-          media.category_url = TITLE_TO_CATEGORY[title].url;
-        }
-      } else if (row.richMetadataRowRenderer) {
-        let contents = row.richMetadataRowRenderer.contents;
-        let boxArt = contents
-          .filter(meta => meta.richMetadataRenderer.style === 'RICH_METADATA_RENDERER_STYLE_BOX_ART');
-        for (let { richMetadataRenderer } of boxArt) {
-          let meta = richMetadataRenderer;
-          media.year = getText(meta.subtitle);
-          let type = getText(meta.callToAction).split(' ')[1];
-          media[type] = getText(meta.title);
-          media[`${type}_url`] = new URL(
-            meta.endpoint.commandMetadata.webCommandMetadata.url, BASE_URL).toString();
-          media.thumbnails = meta.thumbnail.thumbnails;
-        }
-        let topic = contents
-          .filter(meta => meta.richMetadataRenderer.style === 'RICH_METADATA_RENDERER_STYLE_TOPIC');
-        for (let { richMetadataRenderer } of topic) {
-          let meta = richMetadataRenderer;
-          media.category = getText(meta.title);
-          media.category_url = new URL(
-            meta.endpoint.commandMetadata.webCommandMetadata.url, BASE_URL).toString();
-        }
-      }
-    }
-  } catch (err) {
-    // Do nothing.
-  }
-
-  return media;
-};
-
-
-const isVerified = badges => !!(badges && badges.find(b => b.metadataBadgeRenderer.tooltip === 'Verified'));
-
-
-/**
- * Get video author.
- *
- * @param {Object} info
- * @returns {Object}
- */
-export const getAuthor = info => {
-  let channelId, thumbnails = [], subscriberCount, verified = false;
-  try {
-    let results = info.response.contents.twoColumnWatchNextResults.results.results.contents;
-    let v = results.find(v2 =>
-      v2.videoSecondaryInfoRenderer &&
-      v2.videoSecondaryInfoRenderer.owner &&
-      v2.videoSecondaryInfoRenderer.owner.videoOwnerRenderer);
-    let videoOwnerRenderer = v.videoSecondaryInfoRenderer.owner.videoOwnerRenderer;
-    channelId = videoOwnerRenderer.navigationEndpoint.browseEndpoint.browseId;
-    thumbnails = videoOwnerRenderer.thumbnail.thumbnails.map(thumbnail => {
-      thumbnail.url = new URL(thumbnail.url, BASE_URL).toString();
-      return thumbnail;
-    });
-    subscriberCount = parseAbbreviatedNumber(getText(videoOwnerRenderer.subscriberCountText));
-    verified = isVerified(videoOwnerRenderer.badges);
-  } catch (err) {
-    // Do nothing.
-  }
-  try {
-    let videoDetails = info.player_response.microformat && info.player_response.microformat.playerMicroformatRenderer;
-    let id = (videoDetails && videoDetails.channelId) || channelId || info.player_response.videoDetails.channelId;
-    let author = {
-      id,
-      name: videoDetails ? videoDetails.ownerChannelName : info.player_response.videoDetails.author,
-      user: videoDetails ? videoDetails.ownerProfileUrl.split('/').slice(-1)[0] : null,
-      channel_url: `https://www.youtube.com/channel/${id}`,
-      external_channel_url: videoDetails ? `https://www.youtube.com/channel/${videoDetails.externalChannelId}` : '',
-      user_url: videoDetails ? new URL(videoDetails.ownerProfileUrl, BASE_URL).toString() : '',
-      thumbnails,
-      verified,
-      subscriber_count: subscriberCount
-    };
-    if (thumbnails.length) {
-      deprecate(author, 'avatar', author.thumbnails[0].url, 'author.avatar', 'author.thumbnails[0].url');
-    }
-    return author;
-  } catch (err) {
-    return {};
-  }
-};
-
-const parseRelatedVideo = (details, rvsParams) => {
-  if (!details) {
-    return;
-  }
-  try {
-    let viewCount = getText(details.viewCountText);
-    let shortViewCount = getText(details.shortViewCountText);
-    let rvsDetails = rvsParams.find(elem => elem.id === details.videoId);
-    if (!/^\d/.test(shortViewCount)) {
-      shortViewCount = (rvsDetails && rvsDetails.short_view_count_text) || '';
-    }
-    viewCount = (/^\d/.test(viewCount) ? viewCount : shortViewCount).split(' ')[0];
-    let browseEndpoint = details.shortBylineText.runs[0].navigationEndpoint.browseEndpoint;
-    let channelId = browseEndpoint.browseId;
-    let name = getText(details.shortBylineText);
-    let user = (browseEndpoint.canonicalBaseUrl || '').split('/').slice(-1)[0];
-    let video = {
-      id: details.videoId,
-      title: getText(details.title),
-      published: getText(details.publishedTimeText),
-      author: {
-        id: channelId,
-        name,
-        user,
-        channel_url: `https://www.youtube.com/channel/${channelId}`,
-        user_url: `https://www.youtube.com/user/${user}`,
-        thumbnails: details.channelThumbnail.thumbnails.map(thumbnail => {
-          thumbnail.url = new URL(thumbnail.url, BASE_URL).toString();
-          return thumbnail;
-        }),
-        verified: isVerified(details.ownerBadges),
-
-        [Symbol.toPrimitive]() {
-          console.warn('`relatedVideo.author` will be removed in a near future release, ' +
-            'use `relatedVideo.author.name` instead.');
-          return video.author.name;
-        }
-
-      },
-      short_view_count_text: shortViewCount.split(' ')[0],
-      view_count: viewCount.replace(/,/g, ''),
-      length_seconds: details.lengthText ?
-        Math.floor(parseTimestamp(getText(details.lengthText)) / 1000) :
-        rvsParams && `${rvsParams.length_seconds}`,
-      thumbnails: details.thumbnail.thumbnails,
-      richThumbnails:
-        details.richThumbnail ?
-          details.richThumbnail.movingThumbnailRenderer.movingThumbnailDetails.thumbnails : [],
-      isLive: !!(details.badges && details.badges.find(b => b.metadataBadgeRenderer.label === 'LIVE NOW'))
-    };
-
-    deprecate(video, 'author_thumbnail', video.author.thumbnails[0].url,
-      'relatedVideo.author_thumbnail', 'relatedVideo.author.thumbnails[0].url');
-    deprecate(video, 'ucid', video.author.id, 'relatedVideo.ucid', 'relatedVideo.author.id');
-    deprecate(video, 'video_thumbnail', video.thumbnails[0].url,
-      'relatedVideo.video_thumbnail', 'relatedVideo.thumbnails[0].url');
-    return video;
-  } catch (err) {
-    // Skip.
-  }
-};
-
-/**
- * Get related videos.
- *
- * @param {Object} info
- * @returns {Array.<Object>}
- */
-export const getRelatedVideos = info => {
-  let rvsParams = [], secondaryResults = [];
-  try {
-    rvsParams = info.response.webWatchNextResponseExtensionData.relatedVideoArgs.split(',').map(e => qs.parse(e));
-  } catch (err) {
-    // Do nothing.
-  }
-  try {
-    secondaryResults = info.response.contents.twoColumnWatchNextResults.secondaryResults.secondaryResults.results;
-  } catch (err) {
-    return [];
-  }
-  let videos = [];
-  for (let result of secondaryResults || []) {
-    let details = result.compactVideoRenderer;
-    if (details) {
-      let video = parseRelatedVideo(details, rvsParams);
-      if (video) {
-        videos.push(video);
-      }
-    } else {
-      let autoplay = result.compactAutoplayRenderer || result.itemSectionRenderer;
-      if (!autoplay || !Array.isArray(autoplay.contents)) {
-        continue;
-      }
-      for (let content of autoplay.contents) {
-        let video = parseRelatedVideo(content.compactVideoRenderer, rvsParams);
-        if (video) {
-          videos.push(video);
-        }
-      }
-    }
-  }
-  return videos;
-};
-
-/**
- * Get like count.
- *
- * @param {Object} info
- * @returns {number}
- */
-export const getLikes = info => {
-  try {
-    let contents = info.response.contents.twoColumnWatchNextResults.results.results.contents;
-    let video = contents.find(r => r.videoPrimaryInfoRenderer);
-    let buttons = video.videoPrimaryInfoRenderer.videoActions.menuRenderer.topLevelButtons;
-    let accessibilityText = buttons.find(b => b.segmentedLikeDislikeButtonViewModel).segmentedLikeDislikeButtonViewModel
-      .likeButtonViewModel.likeButtonViewModel.toggleButtonViewModel.toggleButtonViewModel
-      .defaultButtonViewModel.buttonViewModel.accessibilityText;
-    return parseInt(accessibilityText.match(/[\d,.]+/)[0].replace(/\D+/g, ''));
-  } catch (err) {
-    return null;
-  }
-};
-
-/**
- * Cleans up a few fields on `videoDetails`.
- *
- * @param {Object} videoDetails
- * @param {Object} info
- * @returns {Object}
- */
-export const cleanVideoDetails = (videoDetails, info) => {
-  videoDetails.thumbnails = videoDetails.thumbnail.thumbnails;
-  delete videoDetails.thumbnail;
-  deprecate(videoDetails, 'thumbnail', { thumbnails: videoDetails.thumbnails },
-    'videoDetails.thumbnail.thumbnails', 'videoDetails.thumbnails');
-  videoDetails.description = videoDetails.shortDescription || getText(videoDetails.description);
-  delete videoDetails.shortDescription;
-  deprecate(videoDetails, 'shortDescription', videoDetails.description,
-    'videoDetails.shortDescription', 'videoDetails.description');
-
-  // Use more reliable `lengthSeconds` from `playerMicroformatRenderer`.
-  videoDetails.lengthSeconds =
-    (info.player_response.microformat &&
-    info.player_response.microformat.playerMicroformatRenderer.lengthSeconds) ||
-    info.player_response.videoDetails.lengthSeconds;
-  return videoDetails;
-};
-
-/**
- * Get storyboards info.
- *
- * @param {Object} info
- * @returns {Array.<Object>}
- */
-export const getStoryboards = info => {
-  const parts = info.player_response.storyboards &&
-    info.player_response.storyboards.playerStoryboardSpecRenderer &&
-    info.player_response.storyboards.playerStoryboardSpecRenderer.spec &&
-    info.player_response.storyboards.playerStoryboardSpecRenderer.spec.split('|');
-
-  if (!parts) {
-    return [];
-  }
-
-  const url = new URL(parts.shift());
-
-  return parts.map((part, i) => {
-    let [
-      thumbnailWidth,
-      thumbnailHeight,
-      thumbnailCount,
-      columns,
-      rows,
-      interval,
-      nameReplacement,
-      sigh
-    ] = part.split('#');
-
-    url.searchParams.set('sigh', sigh);
-
-    thumbnailCount = parseInt(thumbnailCount, 10);
-    columns = parseInt(columns, 10);
-    rows = parseInt(rows, 10);
-
-    const storyboardCount = Math.ceil(thumbnailCount / (columns * rows));
-
-    return {
-      templateUrl: url.toString().replace('$L', i).replace('$N', nameReplacement),
-      thumbnailWidth: parseInt(thumbnailWidth, 10),
-      thumbnailHeight: parseInt(thumbnailHeight, 10),
-      thumbnailCount,
-      interval: parseInt(interval, 10),
-      columns,
-      rows,
-      storyboardCount
-    };
-  });
-};
-
-/**
- * Get chapters info.
- *
- * @param {Object} info
- * @returns {Array.<Object>}
- */
-export const getChapters = info => {
-  const playerOverlayRenderer = info.response &&
-    info.response.playerOverlays &&
-    info.response.playerOverlays.playerOverlayRenderer;
-  const playerBar = playerOverlayRenderer &&
-    playerOverlayRenderer.decoratedPlayerBarRenderer &&
-    playerOverlayRenderer.decoratedPlayerBarRenderer.decoratedPlayerBarRenderer &&
-    playerOverlayRenderer.decoratedPlayerBarRenderer.decoratedPlayerBarRenderer.playerBar;
-  const markersMap = playerBar &&
-    playerBar.multiMarkersPlayerBarRenderer &&
-    playerBar.multiMarkersPlayerBarRenderer.markersMap;
-  const marker = Array.isArray(markersMap) && markersMap.find(m => m.value && Array.isArray(m.value.chapters));
-  if (!marker) {
-    return [];
-  }
-  const chapters = marker.value.chapters;
-
-  return chapters.map(chapter => ({
-    title: getText(chapter.chapterRenderer.title),
-    start_time: chapter.chapterRenderer.timeRangeStartMillis / 1000
-  }));
-};
diff --git a/packages/core/src/ytdl-core/info.js b/packages/core/src/ytdl-core/info.js
deleted file mode 100644
index 6be504f5c0..0000000000
--- a/packages/core/src/ytdl-core/info.js
+++ /dev/null
@@ -1,442 +0,0 @@
-import sax from 'sax';
-import {applyDefaultAgent, applyDefaultHeaders, applyIPv6Rotations, applyOldLocalAddress, playError, requestUtil, between, cutAfterJS, tryParseBetween, saveDebugFile, setPropInsensitive, generateClientPlaybackNonce} from './utils';
-import {addFormatMeta, sortFormats} from './format-utils';
-// Forces Node JS version of setTimeout for Electron based applications
-import { setTimeout } from 'timers';
-import {getVideoID}  from './url-utils';
-import * as extras from './info-extras';
-import Cache from './cache';
-import { URL } from 'url';
-
-
-const BASE_URL = 'https://www.youtube.com/watch?v=';
-
-
-// Cached for storing basic/full info.
-export const cache = new Cache();
-export const watchPageCache = new Cache();
-
-
-// Special error class used to determine if an error is unrecoverable,
-// as in, ytdl-core should not try again to fetch the video metadata.
-// In this case, the video is usually unavailable in some way.
-class UnrecoverableError extends Error {}
-
-
-// List of URLs that show up in `notice_url` for age restricted videos.
-const AGE_RESTRICTED_URLS = [
-  'support.google.com/youtube/?p=age_restrictions',
-  'youtube.com/t/community_guidelines'
-];
-
-/**
- * Gets info from a video without getting additional formats.
- *
- * @param {string} id
- * @param {Object} options
- * @returns {Promise<Object>}
- */
-const getBasicInfo = async(id, options) => {
-  applyIPv6Rotations(options);
-  const retryOptions = Object.assign({}, options.requestOptions);
-  applyDefaultHeaders(options);
-  applyDefaultAgent(options);
-  applyOldLocalAddress(options);
-  const { jar, dispatcher } = options.agent;
-  setPropInsensitive(
-    options.requestOptions.headers, 'cookie', jar.getCookieStringSync('https://www.youtube.com')
-  );
-  options.requestOptions.dispatcher = dispatcher;
-  const info = await retryFunc(getWatchHTMLPage, [id, options], retryOptions);
-
-  const playErr = playError(info.player_response, ['ERROR'], UnrecoverableError);
-  if (playErr) {
-    throw playErr;
-  }
-  const privateErr = privateVideoError(info.player_response);
-  if (privateErr) {
-    throw privateErr;
-  }
-
-
-  Object.assign(info, {
-    // formats: parseFormats(info.player_response),
-    related_videos: extras.getRelatedVideos(info)
-  });
-
-  // Add additional properties to info.
-  const media = extras.getMedia(info);
-  const additional = {
-    author: extras.getAuthor(info),
-    media,
-    likes: extras.getLikes(info),
-    age_restricted: !!(media && AGE_RESTRICTED_URLS.some(url =>
-      Object.values(media).some(v => typeof v === 'string' && v.includes(url)))
-    ),
-
-    // Give the standard link to the video.
-    video_url: BASE_URL + id,
-    storyboards: extras.getStoryboards(info),
-    chapters: extras.getChapters(info)
-  };
-
-  info.videoDetails = extras.cleanVideoDetails(Object.assign({},
-    info.player_response && info.player_response.microformat &&
-    info.player_response.microformat.playerMicroformatRenderer,
-    info.player_response && info.player_response.videoDetails, additional), info);
-
-  return info;
-};
-
-const privateVideoError = player_response => {
-  const playability = player_response && player_response.playabilityStatus;
-  if (!playability) {
-    return null;
-  }
-  if (playability.status === 'LOGIN_REQUIRED') {
-    return new UnrecoverableError(playability.reason || (playability.messages && playability.messages[0]));
-  }
-  if (playability.status === 'LIVE_STREAM_OFFLINE') {
-    return new UnrecoverableError(playability.reason || 'The live stream is offline.');
-  }
-  if (playability.status === 'UNPLAYABLE') {
-    return new UnrecoverableError(playability.reason || 'This video is unavailable.');
-  }
-  return null;
-};
-
-const getWatchHTMLURL = (id, options) =>
-  `${BASE_URL + id}&hl=${options.lang || 'en'}&bpctr=${Math.ceil(Date.now() / 1000)}&has_verified=1`;
-const getWatchHTMLPageBody = (id, options) => {
-  const url = getWatchHTMLURL(id, options);
-  return watchPageCache.getOrSet(url, () => requestUtil(url, options));
-};
-
-
-const EMBED_URL = 'https://www.youtube.com/embed/';
-const getEmbedPageBody = (id, options) => {
-  const embedUrl = `${EMBED_URL + id}?hl=${options.lang || 'en'}`;
-  return requestUtil(embedUrl, options);
-};
-
-
-const getHTML5player = body => {
-  let html5playerRes =
-    /<script\s+src="([^"]+)"(?:\s+type="text\/javascript")?\s+name="player_ias\/base"\s*>|"jsUrl":"([^"]+)"/
-      .exec(body);
-  return html5playerRes ? html5playerRes[1] || html5playerRes[2] : null;
-};
-
-/**
- * Given a function, calls it with `args` until it's successful,
- * or until it encounters an unrecoverable error.
- * Currently, any error from miniget is considered unrecoverable. Errors such as
- * too many redirects, invalid URL, status code 404, status code 502.
- *
- * @param {Function} func
- * @param {Array.<Object>} args
- * @param {Object} options
- * @param {number} options.maxRetries
- * @param {Object} options.backoff
- * @param {number} options.backoff.inc
- */
-const retryFunc = async(func, args, options) => {
-  let currentTry = 0, result;
-  if (!options.maxRetries) {
-    options.maxRetries = 3;
-  }
-  if (!options.backoff) {
-    options.backoff = { inc: 500, max: 5000 };
-  }
-  while (currentTry <= options.maxRetries) {
-    try {
-      result = await func(...args);
-      break;
-    } catch (err) {
-      if ((err && err.statusCode < 500) || currentTry >= options.maxRetries) {
-        throw err;
-      }
-      let wait = Math.min(++currentTry * options.backoff.inc, options.backoff.max);
-      await new Promise(resolve => setTimeout(resolve, wait));
-    }
-  }
-  return result;
-};
-
-
-const jsonClosingChars = /^[)\]}'\s]+/;
-const parseJSON = (source, varName, json) => {
-  if (!json || typeof json === 'object') {
-    return json;
-  } else {
-    try {
-      json = json.replace(jsonClosingChars, '');
-      return JSON.parse(json);
-    } catch (err) {
-      throw Error(`Error parsing ${varName} in ${source}: ${err.message}`);
-    }
-  }
-};
-
-
-const findJSON = (source, varName, body, left, right, prependJSON) => {
-  let jsonStr = between(body, left, right);
-  if (!jsonStr) {
-    throw Error(`Could not find ${varName} in ${source}`);
-  }
-  return parseJSON(source, varName, cutAfterJS(`${prependJSON}${jsonStr}`));
-};
-
-
-const findPlayerResponse = (source, info) => {
-  const player_response = info && (
-    (info.args && info.args.player_response) ||
-    info.player_response || info.playerResponse || info.embedded_player_response);
-  return parseJSON(source, 'player_response', player_response);
-};
-
-const getWatchHTMLPage = async(id, options) => {
-  let body = await getWatchHTMLPageBody(id, options);
-  let info = { page: 'watch' };
-  try {
-    try {
-      info.player_response =
-        tryParseBetween(body, 'var ytInitialPlayerResponse = ', '}};', '', '}}') ||
-        tryParseBetween(body, 'var ytInitialPlayerResponse = ', ';var') ||
-        tryParseBetween(body, 'var ytInitialPlayerResponse = ', ';</script>') ||
-        findJSON('watch.html', 'player_response', body, /\bytInitialPlayerResponse\s*=\s*\{/i, '</script>', '{');
-    } catch (_e) {
-      let args = findJSON('watch.html', 'player_response', body, /\bytplayer\.config\s*=\s*{/, '</script>', '{');
-      info.player_response = findPlayerResponse('watch.html', args);
-    }
-
-    info.response =
-      tryParseBetween(body, 'var ytInitialData = ', '}};', '', '}}') ||
-      tryParseBetween(body, 'var ytInitialData = ', ';</script>') ||
-      tryParseBetween(body, 'window["ytInitialData"] = ', '}};', '', '}}') ||
-      tryParseBetween(body, 'window["ytInitialData"] = ', ';</script>') ||
-      findJSON('watch.html', 'response', body, /\bytInitialData("\])?\s*=\s*\{/i, '</script>', '{');
-    info.html5player = getHTML5player(body);
-  } catch (_) {
-    throw Error(
-      'Error when parsing watch.html, maybe YouTube made a change.\n' +
-      `Please report this issue with the "${
-        saveDebugFile('watch.html', body)
-      }" file on https://github.com/distubejs/ytdl-core/issues.`
-    );
-  }
-  return info;
-};
-
-/**
- * @param {Object} player_response
- * @returns {Array.<Object>}
- */
-const parseFormats = player_response => {
-  let formats = [];
-  if (player_response && player_response.streamingData) {
-    formats = formats
-      .concat(player_response.streamingData.formats || [])
-      .concat(player_response.streamingData.adaptiveFormats || []);
-  }
-  return formats;
-};
-
-
-/**
- * Gets info from a video additional formats and deciphered URLs.
- *
- * @param {string} id
- * @param {Object} options
- * @returns {Promise<Object>}
- */
-const getInfo = async(id, options) => {
-  const info = await getBasicInfo(id, options);
-  const iosPlayerResponse = await fetchIosJsonPlayer(id, options);
-  info.formats = parseFormats(iosPlayerResponse);
-  const hasManifest =
-    iosPlayerResponse && iosPlayerResponse.streamingData && (
-      iosPlayerResponse.streamingData.dashManifestUrl ||
-      iosPlayerResponse.streamingData.hlsManifestUrl
-    );
-  let funcs = [];
-  if (info.formats.length) {
-    // Stream from ios player doesn't need to be deciphered.
-    // info.html5player = info.html5player ||
-    //   getHTML5player(await getWatchHTMLPageBody(id, options)) || getHTML5player(await getEmbedPageBody(id, options));
-    // if (!info.html5player) {
-    //   throw Error('Unable to find html5player file');
-    // }
-    // const html5player = new URL(info.html5player, BASE_URL).toString();
-    // funcs.push(sig.decipherFormats(info.formats, html5player, options));
-    funcs.push(info.formats);
-  }
-  if (hasManifest && iosPlayerResponse.streamingData.dashManifestUrl) {
-    let url = iosPlayerResponse.streamingData.dashManifestUrl;
-    funcs.push(getDashManifest(url, options));
-  }
-  if (hasManifest && iosPlayerResponse.streamingData.hlsManifestUrl) {
-    let url = iosPlayerResponse.streamingData.hlsManifestUrl;
-    funcs.push(getM3U8(url, options));
-  }
-
-  let results = await Promise.all(funcs);
-  info.formats = Object.values(Object.assign({}, ...results));
-  info.formats = info.formats.map(addFormatMeta);
-  info.formats.sort(sortFormats);
-
-
-  info.full = true;
-  return info;
-};
-
-// TODO: Clean up this code to impliment Android player.
-const IOS_CLIENT_VERSION = '19.28.1',
-  IOS_DEVICE_MODEL = 'iPhone16,2',
-  IOS_USER_AGENT_VERSION = '17_5_1',
-  IOS_OS_VERSION = '17.5.1.21F90';
-
-const fetchIosJsonPlayer = async(videoId, options) => {
-  const cpn = generateClientPlaybackNonce(16);
-  const payload = {
-    videoId,
-    cpn,
-    contentCheckOk: true,
-    racyCheckOk: true,
-    context: {
-      client: {
-        clientName: 'IOS',
-        clientVersion: IOS_CLIENT_VERSION,
-        deviceMake: 'Apple',
-        deviceModel: IOS_DEVICE_MODEL,
-        platform: 'MOBILE',
-        osName: 'iOS',
-        osVersion: IOS_OS_VERSION,
-        hl: 'en',
-        gl: 'US',
-        utcOffsetMinutes: -240
-      },
-      request: {
-        internalExperimentFlags: [],
-        useSsl: true
-      },
-      user: {
-        lockedSafetyMode: false
-      }
-    }
-  };
-
-  const { jar, dispatcher } = options.agent;
-  const opts = {
-    requestOptions: {
-      method: 'POST',
-      dispatcher,
-      query: {
-        prettyPrint: false,
-        t: generateClientPlaybackNonce(12),
-        id: videoId
-      },
-      headers: {
-        'Content-Type': 'application/json',
-        cookie: jar.getCookieStringSync('https://www.youtube.com'),
-        'User-Agent': `com.google.ios.youtube/${IOS_CLIENT_VERSION}(${
-          IOS_DEVICE_MODEL
-        }; U; CPU iOS ${IOS_USER_AGENT_VERSION} like Mac OS X; en_US)`,
-        'X-Goog-Api-Format-Version': '2'
-      },
-      body: JSON.stringify(payload)
-    }
-  };
-  const response = await requestUtil('https://youtubei.googleapis.com/youtubei/v1/player', opts);
-  if (videoId !== response.videoDetails.videoId) {
-    throw Error('Video ID mismatch');
-  }
-  return response;
-};
-
-
-/**
- * Gets additional DASH formats.
- *
- * @param {string} url
- * @param {Object} options
- * @returns {Promise<Array.<Object>>}
- */
-const getDashManifest = (url, options) => new Promise((resolve, reject) => {
-  let formats = {};
-  const parser = sax.parser(false);
-  parser.onerror = reject;
-  let adaptationSet;
-  parser.onopentag = node => {
-    if (node.name === 'ADAPTATIONSET') {
-      adaptationSet = node.attributes;
-    } else if (node.name === 'REPRESENTATION') {
-      const itag = parseInt(node.attributes.ID);
-      if (!isNaN(itag)) {
-        formats[url] = Object.assign({
-          itag,
-          url,
-          bitrate: parseInt(node.attributes.BANDWIDTH),
-          mimeType: `${adaptationSet.MIMETYPE}; codecs="${node.attributes.CODECS}"`
-        }, node.attributes.HEIGHT ? {
-          width: parseInt(node.attributes.WIDTH),
-          height: parseInt(node.attributes.HEIGHT),
-          fps: parseInt(node.attributes.FRAMERATE)
-        } : {
-          audioSampleRate: node.attributes.AUDIOSAMPLINGRATE
-        });
-      }
-    }
-  };
-  parser.onend = () => {
-    resolve(formats);
-  };
-  requestUtil(new URL(url, BASE_URL).toString(), options).then(res => {
-    parser.write(res);
-    parser.close();
-  }).catch(reject);
-});
-
-
-/**
- * Gets additional formats.
- *
- * @param {string} url
- * @param {Object} options
- * @returns {Promise<Array.<Object>>}
- */
-const getM3U8 = async(url, options) => {
-  url = new URL(url, BASE_URL);
-  const body = await requestUtil(url.toString(), options);
-  let formats = {};
-  body
-    .split('\n')
-    .filter(line => /^https?:\/\//.test(line))
-    .forEach(line => {
-      const itag = parseInt(line.match(/\/itag\/(\d+)\//)[1]);
-      formats[line] = { itag, url: line };
-    });
-  return formats;
-};
-
-
-// // Cache get info functions.
-// // In case a user wants to get a video's info before downloading.
-const cachedGetBasicInfo = async (link, options = {}) => {
-  let id = await getVideoID(link);
-  const key = ['getBasicInfo', id, options.lang].join('-');
-  return cache.getOrSet(key, () => getBasicInfo(id, options));
-};
-
-const cachedGetInfo = async (link, options = {}) => {
-  let id = await getVideoID(link);
-  const key = ['getInfo', id, options.lang].join('-');
-  return cache.getOrSet(key, () => getInfo(id, options));
-};
-
-// Export the functions
-export { cachedGetBasicInfo as getBasicInfo,  cachedGetInfo as getInfo };
-
-
-// Export a few helpers.
-export {validateID, validateURL, getURLVideoID, getVideoID} from './url-utils';
diff --git a/packages/core/src/ytdl-core/sig.js b/packages/core/src/ytdl-core/sig.js
deleted file mode 100644
index d7b351ab90..0000000000
--- a/packages/core/src/ytdl-core/sig.js
+++ /dev/null
@@ -1,296 +0,0 @@
-import querystring from 'querystring';
-import Cache from './cache';
-import {requestUtil, saveDebugFile} from './utils';
-import vm from 'vm';
-import { URL } from 'url';
-
-// A shared cache to keep track of html5player js functions.
-export const cache = new Cache(1);
-
-/**
- * Extract signature deciphering and n parameter transform functions from html5player file.
- *
- * @param {string} html5playerfile
- * @param {Object} options
- * @returns {Promise<Array.<string>>}
- */
-export const getFunctions = (html5playerfile, options) => cache.getOrSet(html5playerfile, async() => {
-  const body = await requestUtil(html5playerfile, options);
-  const functions = extractFunctions(body);
-  cache.set(html5playerfile, functions);
-  return functions;
-});
-
-// NewPipeExtractor regexps
-const DECIPHER_NAME_REGEXPS = [
-  '\\bm=([a-zA-Z0-9$]{2,})\\(decodeURIComponent\\(h\\.s\\)\\)',
-  '\\bc&&\\(c=([a-zA-Z0-9$]{2,})\\(decodeURIComponent\\(c\\)\\)',
-  // eslint-disable-next-line max-len
-  '(?:\\b|[^a-zA-Z0-9$])([a-zA-Z0-9$]{2,})\\s*=\\s*function\\(\\s*a\\s*\\)\\s*\\{\\s*a\\s*=\\s*a\\.split\\(\\s*""\\s*\\)',
-  '([\\w$]+)\\s*=\\s*function\\((\\w+)\\)\\{\\s*\\2=\\s*\\2\\.split\\(""\\)\\s*;'
-];
-
-const SCVR = '[a-zA-Z0-9$_]';
-const FNR = `${SCVR}+`;
-const AAR = '\\[(\\d+)]';
-const N_TRANSFORM_NAME_REGEXPS = [
-  // NewPipeExtractor regexps
-  `${SCVR}+="nn"\\[\\+${
-    SCVR}+\\.${SCVR}+],${
-    SCVR}+=${SCVR
-  }+\\.get\\(${SCVR}+\\)\\)&&\\(${
-    SCVR}+=(${SCVR
-  }+)\\[(\\d+)]`,
-  `${SCVR}+="nn"\\[\\+${
-    SCVR}+\\.${SCVR}+],${
-    SCVR}+=${SCVR}+\\.get\\(${
-    SCVR}+\\)\\).+\\|\\|(${SCVR
-  }+)\\(""\\)`,
-  `\\(${SCVR}=String\\.fromCharCode\\(110\\),${
-    SCVR}=${SCVR}\\.get\\(${
-    SCVR}\\)\\)&&\\(${SCVR
-  }=(${FNR})(?:${AAR})?\\(${
-    SCVR}\\)`,
-  `\\.get\\("n"\\)\\)&&\\(${SCVR
-  }=(${FNR})(?:${AAR})?\\(${
-    SCVR}\\)`,
-  // Skick regexps
-  '(\\w+).length\\|\\|\\w+\\(""\\)',
-  '\\w+.length\\|\\|(\\w+)\\(""\\)'
-];
-
-// LavaPlayer regexps
-const VARIABLE_PART = '[a-zA-Z_\\$][a-zA-Z_0-9]*';
-const VARIABLE_PART_DEFINE = `\\"?${VARIABLE_PART}\\"?`;
-const BEFORE_ACCESS = '(?:\\[\\"|\\.)';
-const AFTER_ACCESS = '(?:\\"\\]|)';
-const VARIABLE_PART_ACCESS = BEFORE_ACCESS + VARIABLE_PART + AFTER_ACCESS;
-const REVERSE_PART = ':function\\(a\\)\\{(?:return )?a\\.reverse\\(\\)\\}';
-const SLICE_PART = ':function\\(a,b\\)\\{return a\\.slice\\(b\\)\\}';
-const SPLICE_PART = ':function\\(a,b\\)\\{a\\.splice\\(0,b\\)\\}';
-const SWAP_PART = ':function\\(a,b\\)\\{' +
-      'var c=a\\[0\\];a\\[0\\]=a\\[b%a\\.length\\];a\\[b(?:%a.length|)\\]=c(?:;return a)?\\}';
-
-const DECIPHER_REGEXP = `function(?: ${VARIABLE_PART})?\\(a\\)\\{` +
-  'a=a\\.split\\(""\\);\\s*' +
-  `((?:(?:a=)?${VARIABLE_PART}${VARIABLE_PART_ACCESS}\\(a,\\d+\\);)+)` +
-  'return a\\.join\\(""\\)' +
-  '\\}';
-
-const HELPER_REGEXP = `var (${VARIABLE_PART})=\\{((?:(?:${
-  VARIABLE_PART_DEFINE}${REVERSE_PART}|${
-  VARIABLE_PART_DEFINE}${SLICE_PART}|${
-  VARIABLE_PART_DEFINE}${SPLICE_PART}|${
-  VARIABLE_PART_DEFINE}${SWAP_PART}),?\\n?)+)\\};`;
-
-const N_TRANSFORM_REGEXP = 'function\\(\\s*(\\w+)\\s*\\)\\s*\\{' +
-  'var\\s*(\\w+)=(?:\\1\\.split\\(""\\)|String\\.prototype\\.split\\.call\\(\\1,""\\)),' +
-  '\\s*(\\w+)=(\\[.*?]);\\s*\\3\\[\\d+]' +
-  '(.*?try)(\\{.*?})catch\\(\\s*(\\w+)\\s*\\)\\s*\\' +
-  '{\\s*return"enhanced_except_([A-z0-9-]+)"\\s*\\+\\s*\\1\\s*}' +
-  '\\s*return\\s*(\\2\\.join\\(""\\)|Array\\.prototype\\.join\\.call\\(\\2,""\\))};';
-
-const DECIPHER_ARGUMENT = 'sig';
-const N_ARGUMENT = 'ncode';
-
-const matchRegex = (regex, str) => {
-  const match = str.match(new RegExp(regex, 's'));
-  if (!match) {
-    throw new Error(`Could not match ${regex}`);
-  }
-  return match;
-};
-
-const matchFirst = (regex, str) => matchRegex(regex, str)[0];
-
-const matchGroup1 = (regex, str) => matchRegex(regex, str)[1];
-
-const getFuncName = (body, regexps) => {
-  let fn;
-  for (const regex of regexps) {
-    try {
-      fn = matchGroup1(regex, body);
-      try {
-        fn = matchGroup1(`${fn.replace(/\$/g, '\\$')}=\\[([a-zA-Z0-9$\\[\\]]{2,})\\]`, body);
-      } catch (err) {
-        // Function name is not inside an array
-      }
-      break;
-    } catch (err) {
-      continue;
-    }
-  }
-  if (!fn || fn.includes('[')) {
-    throw Error();
-  }
-  return fn;
-};
-
-const DECIPHER_FUNC_NAME = 'DisTubeDecipherFunc';
-const extractDecipherFunc = body => {
-  try {
-    const helperObject = matchFirst(HELPER_REGEXP, body);
-    const decipherFunc = matchFirst(DECIPHER_REGEXP, body);
-    const resultFunc = `var ${DECIPHER_FUNC_NAME}=${decipherFunc};`;
-    const callerFunc = `${DECIPHER_FUNC_NAME}(${DECIPHER_ARGUMENT});`;
-    return helperObject + resultFunc + callerFunc;
-  } catch (e) {
-    return null;
-  }
-};
-
-const extractDecipherWithName = body => {
-  try {
-    const decipherFuncName = getFuncName(body, DECIPHER_NAME_REGEXPS);
-    const funcPattern = `(${decipherFuncName.replace(/\$/g, '\\$')}=function\\([a-zA-Z0-9_]+\\)\\{.+?\\})`;
-    const decipherFunc = `var ${matchGroup1(funcPattern, body)};`;
-    const helperObjectName = matchGroup1(';([A-Za-z0-9_\\$]{2,})\\.\\w+\\(', decipherFunc);
-    const helperPattern = `(var ${helperObjectName.replace(/\$/g, '\\$')}=\\{[\\s\\S]+?\\}\\};)`;
-    const helperObject = matchGroup1(helperPattern, body);
-    const callerFunc = `${decipherFuncName}(${DECIPHER_ARGUMENT});`;
-    return helperObject + decipherFunc + callerFunc;
-  } catch (e) {
-    return null;
-  }
-};
-
-const getExtractFunctions = (extractFunctions, body) => {
-  for (const extractFunction of extractFunctions) {
-    try {
-      const func = extractFunction(body);
-      if (!func) {
-        continue;
-      }
-      return new vm.Script(func);
-    } catch (err) {
-      continue;
-    }
-  }
-  return null;
-};
-
-let decipherWarning = false;
-// This is required function to get the stream url, but we can continue if user doesn't need stream url.
-const extractDecipher = body => {
-  // Faster: extractDecipherWithName
-  const decipherFunc = getExtractFunctions([extractDecipherWithName, extractDecipherFunc], body);
-  if (!decipherFunc && !decipherWarning) {
-    console.warn('\x1b[33mWARNING:\x1B[0m Could not parse decipher function.\n' +
-      `Please report this issue with the "${
-        saveDebugFile('base.js', body)
-      }" file on https://github.com/distubejs/ytdl-core/issues.\nStream URL will be missing.`);
-    decipherWarning = true;
-  }
-  return decipherFunc;
-};
-
-const N_TRANSFORM_FUNC_NAME = 'DisTubeNTransformFunc';
-const extractNTransformFunc = body => {
-  try {
-    const nFunc = matchFirst(N_TRANSFORM_REGEXP, body);
-    const resultFunc = `var ${N_TRANSFORM_FUNC_NAME}=${nFunc}`;
-    const callerFunc = `${N_TRANSFORM_FUNC_NAME}(${N_ARGUMENT});`;
-    return resultFunc + callerFunc;
-  } catch (e) {
-    return null;
-  }
-};
-
-const extractNTransformWithName = body => {
-  try {
-    const nFuncName = getFuncName(body, N_TRANSFORM_NAME_REGEXPS);
-    const funcPattern = `(${
-      nFuncName.replace(/\$/g, '\\$')
-    // eslint-disable-next-line max-len
-    }=\\s*function([\\S\\s]*?\\}\\s*return (([\\w$]+?\\.join\\(""\\))|(Array\\.prototype\\.join\\.call\\([\\w$]+?,[\\n\\s]*(("")|(\\("",""\\)))\\)))\\s*\\}))`;
-    const nTransformFunc = `var ${matchGroup1(funcPattern, body)};`;
-    const callerFunc = `${nFuncName}(${N_ARGUMENT});`;
-    return nTransformFunc + callerFunc;
-  } catch (e) {
-    return null;
-  }
-};
-
-let nTransformWarning = false;
-const extractNTransform = body => {
-  // Faster: extractNTransformFunc
-  const nTransformFunc = getExtractFunctions([extractNTransformFunc, extractNTransformWithName], body);
-  if (!nTransformFunc && !nTransformWarning) {
-    // This is optional, so we can continue if it's not found, but it will bottleneck the download.
-    console.warn('\x1b[33mWARNING:\x1B[0m Could not parse n transform function.\n' +
-      `Please report this issue with the "${
-        saveDebugFile('base.js', body)
-      }" file on https://github.com/distubejs/ytdl-core/issues.`);
-    nTransformWarning = true;
-  }
-  return nTransformFunc;
-};
-
-/**
- * Extracts the actions that should be taken to decipher a signature
- * and transform the n parameter
- *
- * @param {string} body
- * @returns {Array.<string>}
- */
-export const extractFunctions = body => [
-  extractDecipher(body),
-  extractNTransform(body)
-];
-
-/**
- * Apply decipher and n-transform to individual format
- *
- * @param {Object} format
- * @param {vm.Script} decipherScript
- * @param {vm.Script} nTransformScript
- */
-export const setDownloadURL = (format, decipherScript, nTransformScript) => {
-  if (!decipherScript) {
-    return;
-  }
-  const decipher = url => {
-    const args = querystring.parse(url);
-    if (!args.s) {
-      return args.url;
-    }
-    const components = new URL(decodeURIComponent(args.url));
-    const context = {};
-    context[DECIPHER_ARGUMENT] = decodeURIComponent(args.s);
-    components.searchParams.set(args.sp || 'sig', decipherScript.runInNewContext(context));
-    return components.toString();
-  };
-  const nTransform = url => {
-    const components = new URL(decodeURIComponent(url));
-    const n = components.searchParams.get('n');
-    if (!n || !nTransformScript) {
-      return url;
-    }
-    const context = {};
-    context[N_ARGUMENT] = n;
-    components.searchParams.set('n', nTransformScript.runInNewContext(context));
-    return components.toString();
-  };
-  const cipher = !format.url;
-  const url = format.url || format.signatureCipher || format.cipher;
-  format.url = nTransform(cipher ? decipher(url) : url);
-  delete format.signatureCipher;
-  delete format.cipher;
-};
-
-/**
- * Applies decipher and n parameter transforms to all format URL's.
- *
- * @param {Array.<Object>} formats
- * @param {string} html5player
- * @param {Object} options
- */
-export const decipherFormats = async(formats, html5player, options) => {
-  const decipheredFormats = {};
-  const [decipherScript, nTransformScript] = await getFunctions(html5player, options);
-  formats.forEach(format => {
-    setDownloadURL(format, decipherScript, nTransformScript);
-    decipheredFormats[format.url] = format;
-  });
-  return decipheredFormats;
-};
diff --git a/packages/core/src/ytdl-core/url-utils.js b/packages/core/src/ytdl-core/url-utils.js
deleted file mode 100644
index 3ec66a6bff..0000000000
--- a/packages/core/src/ytdl-core/url-utils.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { URL } from 'url';
-/**
- * Get video ID.
- *
- * There are a few type of video URL formats.
- *  - https://www.youtube.com/watch?v=VIDEO_ID
- *  - https://m.youtube.com/watch?v=VIDEO_ID
- *  - https://youtu.be/VIDEO_ID
- *  - https://www.youtube.com/v/VIDEO_ID
- *  - https://www.youtube.com/embed/VIDEO_ID
- *  - https://music.youtube.com/watch?v=VIDEO_ID
- *  - https://gaming.youtube.com/watch?v=VIDEO_ID
- *
- * @param {string} link
- * @return {string}
- * @throws {Error} If unable to find a id
- * @throws {TypeError} If videoid doesn't match specs
- */
-const validQueryDomains = new Set([
-  'youtube.com',
-  'www.youtube.com',
-  'm.youtube.com',
-  'music.youtube.com',
-  'gaming.youtube.com'
-]);
-const validPathDomains = /^https?:\/\/(youtu\.be\/|(www\.)?youtube\.com\/(embed|v|shorts|live)\/)/;
-export const getURLVideoID = link => {
-  const parsed = new URL(link.trim());
-  let id = parsed.searchParams.get('v');
-  if (validPathDomains.test(link.trim()) && !id) {
-    const paths = parsed.pathname.split('/');
-    id = parsed.host === 'youtu.be' ? paths[1] : paths[2];
-  } else if (parsed.hostname && !validQueryDomains.has(parsed.hostname)) {
-    throw Error('Not a YouTube domain');
-  }
-  if (!id) {
-    throw Error(`No video id found: "${link}"`);
-  }
-  id = id.substring(0, 11);
-  if (!validateID(id)) {
-    throw TypeError(`Video id (${id}) does not match expected ` +
-      `format (${idRegex.toString()})`);
-  }
-  return id;
-};
-
-
-/**
- * Gets video ID either from a url or by checking if the given string
- * matches the video ID format.
- *
- * @param {string} str
- * @returns {string}
- * @throws {Error} If unable to find a id
- * @throws {TypeError} If videoid doesn't match specs
- */
-const urlRegex = /^https?:\/\//;
-export const getVideoID = str => {
-  if (validateID(str)) {
-    return str;
-  } else if (urlRegex.test(str.trim())) {
-    return getURLVideoID(str);
-  } else {
-    throw Error(`No video id found: ${str}`);
-  }
-};
-
-
-/**
- * Returns true if given id satifies YouTube's id format.
- *
- * @param {string} id
- * @return {boolean}
- */
-const idRegex = /^[a-zA-Z0-9-_]{11}$/;
-export const validateID = id => idRegex.test(id.trim());
-
-
-/**
- * Checks wether the input string includes a valid id.
- *
- * @param {string} string
- * @returns {boolean}
- */
-export const validateURL = string => {
-  try {
-    getURLVideoID(string);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
diff --git a/packages/core/src/ytdl-core/utils.js b/packages/core/src/ytdl-core/utils.js
deleted file mode 100644
index 8dc48482fa..0000000000
--- a/packages/core/src/ytdl-core/utils.js
+++ /dev/null
@@ -1,389 +0,0 @@
-import {request} from 'undici';
-import { writeFileSync } from 'fs';
-import {defaultAgent, createAgent, addCookiesFromString} from './agent';
-
-
-/**
- * Extract string inbetween another.
- *
- * @param {string} haystack
- * @param {string} left
- * @param {string} right
- * @returns {string}
- */
-export const between = (haystack, left, right) => {
-  let pos;
-  if (left instanceof RegExp) {
-    const match = haystack.match(left);
-    if (!match) {
-      return ''; 
-    }
-    pos = match.index + match[0].length;
-  } else {
-    pos = haystack.indexOf(left);
-    if (pos === -1) {
-      return ''; 
-    }
-    pos += left.length;
-  }
-  haystack = haystack.slice(pos);
-  pos = haystack.indexOf(right);
-  if (pos === -1) {
-    return ''; 
-  }
-  haystack = haystack.slice(0, pos);
-  return haystack;
-};
-
-export const tryParseBetween = (body, left, right, prepend = '', append = '') => {
-  try {
-    let data = between(body, left, right);
-    if (!data) {
-      return null;
-    }
-    return JSON.parse(`${prepend}${data}${append}`);
-  } catch (e) {
-    return null;
-  }
-};
-
-/**
- * Get a number from an abbreviated number string.
- *
- * @param {string} string
- * @returns {number}
- */
-export const parseAbbreviatedNumber = string => {
-  const match = string
-    .replace(',', '.')
-    .replace(' ', '')
-    .match(/([\d,.]+)([MK]?)/);
-  if (match) {
-    let [, num, multi] = match;
-    num = parseFloat(num);
-    return Math.round(multi === 'M' ? num * 1000000 :
-      multi === 'K' ? num * 1000 : num);
-  }
-  return null;
-};
-
-/**
- * Escape sequences for cutAfterJS
- * @param {string} start the character string the escape sequence
- * @param {string} end the character string to stop the escape seequence
- * @param {undefined|Regex} startPrefix a regex to check against the preceding 10 characters
- */
-const ESCAPING_SEQUENZES = [
-  // Strings
-  { start: '"', end: '"' },
-  { start: '\'', end: '\'' },
-  { start: '`', end: '`' },
-  // RegeEx
-  { start: '/', end: '/', startPrefix: /(^|[[{:;,/])\s?$/ }
-];
-
-/**
- * Match begin and end braces of input JS, return only JS
- *
- * @param {string} mixedJson
- * @returns {string}
-*/
-export const cutAfterJS = mixedJson => {
-  // Define the general open and closing tag
-  let open, close;
-  if (mixedJson[0] === '[') {
-    open = '[';
-    close = ']';
-  } else if (mixedJson[0] === '{') {
-    open = '{';
-    close = '}';
-  }
-
-  if (!open) {
-    throw new Error(`Can't cut unsupported JSON (need to begin with [ or { ) but got: ${mixedJson[0]}`);
-  }
-
-  // States if the loop is currently inside an escaped js object
-  let isEscapedObject = null;
-
-  // States if the current character is treated as escaped or not
-  let isEscaped = false;
-
-  // Current open brackets to be closed
-  let counter = 0;
-
-  let i;
-  // Go through all characters from the start
-  for (i = 0; i < mixedJson.length; i++) {
-    // End of current escaped object
-    if (!isEscaped && isEscapedObject !== null && mixedJson[i] === isEscapedObject.end) {
-      isEscapedObject = null;
-      continue;
-    // Might be the start of a new escaped object
-    } else if (!isEscaped && isEscapedObject === null) {
-      for (const escaped of ESCAPING_SEQUENZES) {
-        if (mixedJson[i] !== escaped.start) {
-          continue;
-        }
-        // Test startPrefix against last 10 characters
-        if (!escaped.startPrefix || mixedJson.substring(i - 10, i).match(escaped.startPrefix)) {
-          isEscapedObject = escaped;
-          break;
-        }
-      }
-      // Continue if we found a new escaped object
-      if (isEscapedObject !== null) {
-        continue;
-      }
-    }
-
-    // Toggle the isEscaped boolean for every backslash
-    // Reset for every regular character
-    isEscaped = mixedJson[i] === '\\' && !isEscaped;
-
-    if (isEscapedObject !== null) {
-      continue;
-    }
-
-    if (mixedJson[i] === open) {
-      counter++;
-    } else if (mixedJson[i] === close) {
-      counter--;
-    }
-
-    // All brackets have been closed, thus end of JSON is reached
-    if (counter === 0) {
-      // Return the cut JSON
-      return mixedJson.substring(0, i + 1);
-    }
-  }
-
-  // We ran through the whole string and ended up with an unclosed bracket
-  throw Error('Can\'t cut unsupported JSON (no matching closing bracket found)');
-};
-
-/**
- * Checks if there is a playability error.
- *
- * @param {Object} player_response
- * @param {Array.<string>} statuses
- * @param {Error} ErrorType
- * @returns {!Error}
- */
-export const playError = (player_response, statuses, ErrorType = Error) => {
-  let playability = player_response && player_response.playabilityStatus;
-  if (playability && statuses.includes(playability.status)) {
-    return new ErrorType(playability.reason || (playability.messages && playability.messages[0]));
-  }
-  return null;
-};
-
-// Undici request
-export const requestUtil = async(url, options = {}) => {
-  const { requestOptions } = options;
-  const req = await request(url, requestOptions);
-  const code = req.statusCode.toString();
-  if (code.startsWith('2')) {
-    if (req.headers['content-type'].includes('application/json')) {
-      return req.body.json();
-    }
-    return req.body.text();
-  }
-  if (code.startsWith('3')) {
-    return requestUtil(req.headers.location, options);
-  }
-  const e = new Error(`Status code: ${code}`);
-  e.statusCode = req.statusCode;
-  throw e;
-};
-
-/**
- * Temporary helper to help deprecating a few properties.
- *
- * @param {Object} obj
- * @param {string} prop
- * @param {Object} value
- * @param {string} oldPath
- * @param {string} newPath
- */
-export const deprecate = (obj, prop, value, oldPath, newPath) => {
-  Object.defineProperty(obj, prop, {
-    get: () => {
-      console.warn(`\`${oldPath}\` will be removed in a near future release, ` +
-        `use \`${newPath}\` instead.`);
-      return value;
-    }
-  });
-};
-
-/**
- * Gets random IPv6 Address from a block
- *
- * @param {string} ip the IPv6 block in CIDR-Notation
- * @returns {string}
- */
-export const getRandomIPv6 = ip => {
-  // Start with a fast Regex-Check
-  if (!isIPv6(ip)) {
-    throw Error('Invalid IPv6 format');
-  }
-  // Start by splitting and normalizing addr and mask
-  const [rawAddr, rawMask] = ip.split('/');
-  let base10Mask = parseInt(rawMask);
-  if (!base10Mask || base10Mask > 128 || base10Mask < 24) {
-    throw Error('Invalid IPv6 subnet');
-  }
-  const base10addr = normalizeIP(rawAddr);
-  // Get random addr to pad with
-  // using Math.random since we're not requiring high level of randomness
-  const randomAddr = new Array(8).fill(1).map(() => Math.floor(Math.random() * 0xffff));
-
-  // Merge base10addr with randomAddr
-  const mergedAddr = randomAddr.map((randomItem, idx) => {
-    // Calculate the amount of static bits
-    const staticBits = Math.min(base10Mask, 16);
-    // Adjust the bitmask with the staticBits
-    base10Mask -= staticBits;
-    // Calculate the bitmask
-    // lsb makes the calculation way more complicated
-    const mask = 0xffff - ((2 ** (16 - staticBits)) - 1);
-    // Combine base10addr and random
-    return (base10addr[idx] & mask) + (randomItem & (mask ^ 0xffff));
-  });
-  // Return new addr
-  return mergedAddr.map(x => x.toString('16')).join(':');
-};
-
-// eslint-disable-next-line max-len
-const IPV6_REGEX = /^(([0-9a-f]{1,4}:)(:[0-9a-f]{1,4}){1,6}|([0-9a-f]{1,4}:){1,2}(:[0-9a-f]{1,4}){1,5}|([0-9a-f]{1,4}:){1,3}(:[0-9a-f]{1,4}){1,4}|([0-9a-f]{1,4}:){1,4}(:[0-9a-f]{1,4}){1,3}|([0-9a-f]{1,4}:){1,5}(:[0-9a-f]{1,4}){1,2}|([0-9a-f]{1,4}:){1,6}(:[0-9a-f]{1,4})|([0-9a-f]{1,4}:){1,7}(([0-9a-f]{1,4})|:))\/(1[0-1]\d|12[0-8]|\d{1,2})$/;
-/**
- * Quick check for a valid IPv6
- * The Regex only accepts a subset of all IPv6 Addresses
- *
- * @param {string} ip the IPv6 block in CIDR-Notation to test
- * @returns {boolean} true if valid
- */
-export const isIPv6 = ip => IPV6_REGEX.test(ip);
-
-/**
- * Normalise an IP Address
- *
- * @param {string} ip the IPv6 Addr
- * @returns {number[]} the 8 parts of the IPv6 as Integers
- */
-export const normalizeIP = ip => {
-  // Split by fill position
-  const parts = ip.split('::').map(x => x.split(':'));
-  // Normalize start and end
-  const partStart = parts[0] || [];
-  const partEnd = parts[1] || [];
-  partEnd.reverse();
-  // Placeholder for full ip
-  const fullIP = new Array(8).fill(0);
-  // Fill in start and end parts
-  for (let i = 0; i < Math.min(partStart.length, 8); i++) {
-    fullIP[i] = parseInt(partStart[i], 16) || 0;
-  }
-  for (let i = 0; i < Math.min(partEnd.length, 8); i++) {
-    fullIP[7 - i] = parseInt(partEnd[i], 16) || 0;
-  }
-  return fullIP;
-};
-
-export const saveDebugFile = (name, body) => {
-  const filename = `${+new Date()}-${name}`;
-  writeFileSync(filename, body);
-  return filename;
-};
-
-const findPropKeyInsensitive = (obj, prop) =>
-  Object.keys(obj).find(p => p.toLowerCase() === prop.toLowerCase()) || null;
-
-export const getPropInsensitive = (obj, prop) => {
-  const key = findPropKeyInsensitive(obj, prop);
-  return key && obj[key];
-};
-
-export const setPropInsensitive = (obj, prop, value) => {
-  const key = findPropKeyInsensitive(obj, prop);
-  obj[key || prop] = value;
-  return key;
-};
-
-let oldCookieWarning = true;
-let oldDispatcherWarning = true;
-export const applyDefaultAgent = options => {
-  if (!options.agent) {
-    const { jar } = defaultAgent;
-    const c = getPropInsensitive(options.requestOptions.headers, 'cookie');
-    if (c) {
-      jar.removeAllCookiesSync();
-      addCookiesFromString(jar, c);
-      if (oldCookieWarning) {
-        oldCookieWarning = false;
-        console.warn(
-          '\x1b[33mWARNING:\x1B[0m Using old cookie format, ' +
-          'please use the new one instead. (https://github.com/distubejs/ytdl-core#cookies-support)'
-        );
-      }
-    }
-    if (options.requestOptions.dispatcher && oldDispatcherWarning) {
-      oldDispatcherWarning = false;
-      console.warn(
-        '\x1b[33mWARNING:\x1B[0m Your dispatcher is overridden by `ytdl.Agent`. ' +
-        'To implement your own, check out the documentation. ' +
-        '(https://github.com/distubejs/ytdl-core#how-to-implement-ytdlagent-with-your-own-dispatcher)'
-      );
-    }
-    options.agent = defaultAgent;
-  }
-};
-
-let oldLocalAddressWarning = true;
-export const applyOldLocalAddress = options => {
-  if (
-    !options.requestOptions ||
-    !options.requestOptions.localAddress ||
-    options.requestOptions.localAddress === options.agent.localAddress
-  ) {
-    return;
-  }
-  options.agent = createAgent(undefined, { localAddress: options.requestOptions.localAddress });
-  if (oldLocalAddressWarning) {
-    oldLocalAddressWarning = false;
-    console.warn(
-      '\x1b[33mWARNING:\x1B[0m Using old localAddress option, ' +
-      'please add it to the agent options instead. (https://github.com/distubejs/ytdl-core#ip-rotation)'
-    );
-  }
-};
-
-let oldIpRotationsWarning = true;
-export const applyIPv6Rotations = options => {
-  if (options.IPv6Block) {
-    options.requestOptions = Object.assign({}, options.requestOptions, {
-      localAddress: getRandomIPv6(options.IPv6Block)
-    });
-    if (oldIpRotationsWarning) {
-      oldIpRotationsWarning = false;
-      oldLocalAddressWarning = false;
-      console.warn(
-        '\x1b[33mWARNING:\x1B[0m IPv6Block option is deprecated, ' +
-        'please create your own ip rotation instead. (https://github.com/distubejs/ytdl-core#ip-rotation)'
-      );
-    }
-  }
-};
-
-export const applyDefaultHeaders = options => {
-  options.requestOptions = Object.assign({}, options.requestOptions);
-  options.requestOptions.headers = Object.assign({}, {
-    // eslint-disable-next-line max-len
-    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.101 Safari/537.36'
-  }, options.requestOptions.headers);
-};
-
-export const generateClientPlaybackNonce = length => {
-  const CPN_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
-  return Array.from({ length }, () => CPN_CHARS[Math.floor(Math.random() * CPN_CHARS.length)]).join('');
-};

From 209ef6662002824dfbee9356ceb84dede9d99f72 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Fri, 4 Oct 2024 13:52:35 +0200
Subject: [PATCH 28/32] Upgrade a bunch of old dependencies

---
 package-lock.json | 893 +++++++++++++++++++++++++++-------------------
 1 file changed, 530 insertions(+), 363 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ca5bf81f7..891115eb26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7635,9 +7635,9 @@
       }
     },
     "node_modules/@storybook/builder-webpack4/node_modules/webpack/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -9255,9 +9255,9 @@
       }
     },
     "node_modules/@storybook/core-common/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -9994,9 +9994,9 @@
       }
     },
     "node_modules/@storybook/core-server/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -11309,9 +11309,9 @@
       }
     },
     "node_modules/@storybook/manager-webpack4/node_modules/webpack/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -13207,26 +13207,6 @@
       "integrity": "sha512-a/+y/IvUKiNAFDYuzxuqcfj40RZc+oFmvwvXnysHTtYRmm4InLVJf20cmIb0//s/HKdbZoQV1srT9/XDd+Efrg==",
       "dev": true
     },
-    "node_modules/@types/eslint": {
-      "version": "8.44.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.4.tgz",
-      "integrity": "sha512-lOzjyfY/D9QR4hY9oblZ76B90MYTB3RrQ4z2vBIJKj9ROCRqdkYl2gSUx1x1a4IWPjKJZLL4Aw1Zfay7eMnmnA==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.5.tgz",
-      "integrity": "sha512-JNvhIEyxVW6EoMIFIvj93ZOywYFatlpu9deeH6eSx6PE3WHYvHaQtmHmQeNw7aA81bYGBPPQqdtBm6b1SsQMmA==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "0.0.51",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
@@ -16661,9 +16641,9 @@
       "dev": true
     },
     "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.5",
@@ -16673,7 +16653,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -16707,20 +16687,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/body-parser/node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/bonjour-service": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz",
@@ -16834,10 +16800,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "license": "MIT",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -17586,11 +17553,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "license": "MIT",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -17807,6 +17781,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/centra": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/centra/-/centra-2.7.0.tgz",
+      "integrity": "sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "license": "MIT",
@@ -22151,17 +22133,19 @@
       }
     },
     "node_modules/define-data-property": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
-      "integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==",
-      "devOptional": true,
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-lazy-prop": {
@@ -22562,9 +22546,9 @@
       }
     },
     "node_modules/discord-rpc/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "engines": {
         "node": ">=8.3.0"
       },
@@ -23372,9 +23356,9 @@
       "license": "MIT"
     },
     "node_modules/elliptic": {
-      "version": "6.5.5",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.5.tgz",
-      "integrity": "sha512-7EjbcmUm17NQFu4Pmgmq2olYMj8nwMnpcddByChSUjArp8F5DQWcIcpriwO4ZToLNAJig0yiyjswfyGNje/ixw==",
+      "version": "6.5.7",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+      "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
       "dev": true,
       "dependencies": {
         "bn.js": "^4.11.9",
@@ -23621,6 +23605,25 @@
       "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
       "dev": true
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -24643,36 +24646,36 @@
       "dev": true
     },
     "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -24702,25 +24705,19 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/express/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/express/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/express/node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/express/node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -25295,8 +25292,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "license": "MIT",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -25305,12 +25303,12 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -25329,6 +25327,14 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/finalhandler/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -25960,8 +25966,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "license": "MIT"
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.name": {
       "version": "1.0.13",
@@ -26055,14 +26065,18 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -26835,7 +26849,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "devOptional": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -26988,11 +27001,11 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "devOptional": true,
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -27194,6 +27207,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hast-to-hyperscript": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz",
@@ -28559,7 +28583,30 @@
     "node_modules/ip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
-      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ=="
+      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
+      "dev": true
+    },
+    "node_modules/ip-address": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
+      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ip-address/node_modules/jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
+    },
+    "node_modules/ip-address/node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
     },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
@@ -28959,7 +29006,8 @@
     },
     "node_modules/is-number": {
       "version": "7.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -31879,9 +31927,9 @@
       }
     },
     "node_modules/jsdom/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "engines": {
         "node": ">=8.3.0"
       },
@@ -33431,16 +33479,16 @@
       }
     },
     "node_modules/load-bmfont": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz",
-      "integrity": "sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.2.tgz",
+      "integrity": "sha512-qElWkmjW9Oq1F9EI5Gt7aD9zcdHb9spJCW1L/dmPf7KzCCEJxq8nhHz5eCgI9aMf7vrG/wyaCqdsI+Iy9ZTlog==",
       "dependencies": {
         "buffer-equal": "0.0.1",
         "mime": "^1.3.4",
         "parse-bmfont-ascii": "^1.0.3",
         "parse-bmfont-binary": "^1.0.5",
         "parse-bmfont-xml": "^1.1.4",
-        "phin": "^2.9.1",
+        "phin": "^3.7.1",
         "xhr": "^2.0.1",
         "xtend": "^4.0.0"
       }
@@ -33456,6 +33504,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/load-bmfont/node_modules/phin": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/phin/-/phin-3.7.1.tgz",
+      "integrity": "sha512-GEazpTWwTZaEQ9RhL7Nyz0WwqilbqgLahDM3D0hxWwmVDI52nXEybHqiN6/elwpkJBhcuj+WbBu+QfT0uhPGfQ==",
+      "dependencies": {
+        "centra": "^2.7.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
@@ -34633,9 +34692,12 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -34664,10 +34726,11 @@
       "dev": true
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "license": "MIT",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -36448,9 +36511,9 @@
       "dev": true
     },
     "node_modules/nx/node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
       "dev": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -36866,9 +36929,12 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -38122,9 +38188,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -39110,9 +39176,9 @@
       }
     },
     "node_modules/puppeteer-core/node_modules/ws": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+      "integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
       "dev": true,
       "dependencies": {
         "async-limiter": "~1.0.0"
@@ -39128,11 +39194,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
-      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -39933,9 +39999,9 @@
       "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
     },
     "node_modules/react-router/node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+      "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
       "dependencies": {
         "isarray": "0.0.1"
       }
@@ -42163,9 +42229,9 @@
       "license": "ISC"
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -42355,23 +42421,47 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/serve-static/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "license": "ISC"
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/set-function-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
@@ -42536,12 +42626,17 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "license": "MIT",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -42994,15 +43089,15 @@
       }
     },
     "node_modules/socks": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
-      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
+      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
       "dependencies": {
-        "ip": "^2.0.0",
+        "ip-address": "^9.0.5",
         "smart-buffer": "^4.2.0"
       },
       "engines": {
-        "node": ">= 10.13.0",
+        "node": ">= 10.0.0",
         "npm": ">= 3.0.0"
       }
     },
@@ -45125,7 +45220,8 @@
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -46975,9 +47071,9 @@
       }
     },
     "node_modules/vue-template-compiler": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
-      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
       "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
@@ -47347,21 +47443,20 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -47734,9 +47829,9 @@
       "dev": true
     },
     "node_modules/webpack/node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -47745,19 +47840,19 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/webpack/node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/webpack/node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^8"
       }
     },
     "node_modules/webpack/node_modules/enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -48308,9 +48403,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -48541,9 +48636,9 @@
       }
     },
     "node_modules/youtube-ext/node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -55749,9 +55844,9 @@
               }
             },
             "terser-webpack-plugin": {
-              "version": "1.4.5",
-              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-              "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+              "version": "1.4.6",
+              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+              "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
               "dev": true,
               "requires": {
                 "cacache": "^12.0.2",
@@ -56975,9 +57070,9 @@
           }
         },
         "terser-webpack-plugin": {
-          "version": "1.4.5",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-          "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+          "version": "1.4.6",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+          "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
           "dev": true,
           "requires": {
             "cacache": "^12.0.2",
@@ -57569,9 +57664,9 @@
           }
         },
         "terser-webpack-plugin": {
-          "version": "1.4.5",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-          "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+          "version": "1.4.6",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+          "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
           "dev": true,
           "requires": {
             "cacache": "^12.0.2",
@@ -58572,9 +58667,9 @@
               }
             },
             "terser-webpack-plugin": {
-              "version": "1.4.5",
-              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-              "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+              "version": "1.4.6",
+              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+              "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
               "dev": true,
               "requires": {
                 "cacache": "^12.0.2",
@@ -60025,26 +60120,6 @@
       "integrity": "sha512-a/+y/IvUKiNAFDYuzxuqcfj40RZc+oFmvwvXnysHTtYRmm4InLVJf20cmIb0//s/HKdbZoQV1srT9/XDd+Efrg==",
       "dev": true
     },
-    "@types/eslint": {
-      "version": "8.44.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.4.tgz",
-      "integrity": "sha512-lOzjyfY/D9QR4hY9oblZ76B90MYTB3RrQ4z2vBIJKj9ROCRqdkYl2gSUx1x1a4IWPjKJZLL4Aw1Zfay7eMnmnA==",
-      "dev": true,
-      "requires": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "@types/eslint-scope": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.5.tgz",
-      "integrity": "sha512-JNvhIEyxVW6EoMIFIvj93ZOywYFatlpu9deeH6eSx6PE3WHYvHaQtmHmQeNw7aA81bYGBPPQqdtBm6b1SsQMmA==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "@types/estree": {
       "version": "0.0.51",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
@@ -62890,9 +62965,9 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "requires": {
         "bytes": "3.1.2",
         "content-type": "~1.0.5",
@@ -62902,7 +62977,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -62928,14 +63003,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "qs": {
-          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-          "requires": {
-            "side-channel": "^1.0.4"
-          }
         }
       }
     },
@@ -63030,9 +63097,11 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "brorand": {
@@ -63597,10 +63666,15 @@
       }
     },
     "call-bind": {
-      "version": "1.0.2",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "requires": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
       }
     },
     "call-matcher": {
@@ -63757,6 +63831,14 @@
       "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==",
       "dev": true
     },
+    "centra": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/centra/-/centra-2.7.0.tgz",
+      "integrity": "sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg==",
+      "requires": {
+        "follow-redirects": "^1.15.6"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "requires": {
@@ -67110,14 +67192,13 @@
       }
     },
     "define-data-property": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
-      "integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==",
-      "devOptional": true,
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "requires": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       }
     },
     "define-lazy-prop": {
@@ -67419,9 +67500,9 @@
       },
       "dependencies": {
         "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "version": "7.5.10",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+          "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
           "requires": {}
         }
       }
@@ -68053,9 +68134,9 @@
       }
     },
     "elliptic": {
-      "version": "6.5.5",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.5.tgz",
-      "integrity": "sha512-7EjbcmUm17NQFu4Pmgmq2olYMj8nwMnpcddByChSUjArp8F5DQWcIcpriwO4ZToLNAJig0yiyjswfyGNje/ixw==",
+      "version": "6.5.7",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+      "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
       "dev": true,
       "requires": {
         "bn.js": "^4.11.9",
@@ -68257,6 +68338,19 @@
       "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
       "dev": true
     },
+    "es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "requires": {
+        "get-intrinsic": "^1.2.4"
+      }
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
+    },
     "es-get-iterator": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -68991,36 +69085,36 @@
       "dev": true
     },
     "express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -69036,19 +69130,16 @@
             "ms": "2.0.0"
           }
         },
+        "encodeurl": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+          "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         },
-        "qs": {
-          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-          "requires": {
-            "side-channel": "^1.0.4"
-          }
-        },
         "safe-buffer": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -69508,18 +69599,20 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "requires": {
         "to-regex-range": "^5.0.1"
       }
     },
     "finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "requires": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -69535,6 +69628,11 @@
             "ms": "2.0.0"
           }
         },
+        "encodeurl": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+          "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -70003,7 +70101,9 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1"
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "function.name": {
       "version": "1.0.13",
@@ -70075,14 +70175,15 @@
       "version": "2.0.5"
     },
     "get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "requires": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
       }
     },
     "get-lyrics-hd": {
@@ -70654,7 +70755,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "devOptional": true,
       "requires": {
         "get-intrinsic": "^1.1.3"
       }
@@ -70765,10 +70865,11 @@
       }
     },
     "has-property-descriptors": {
-      "version": "1.0.0",
-      "devOptional": true,
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "requires": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       }
     },
     "has-proto": {
@@ -70903,6 +71004,14 @@
         }
       }
     },
+    "hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "hast-to-hyperscript": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz",
@@ -71935,7 +72044,29 @@
     "ip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
-      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ=="
+      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
+      "dev": true
+    },
+    "ip-address": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
+      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
+      "requires": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "dependencies": {
+        "jsbn": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+          "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
+        },
+        "sprintf-js": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+          "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
+        }
+      }
     },
     "ipaddr.js": {
       "version": "1.9.1",
@@ -72197,7 +72328,9 @@
       "dev": true
     },
     "is-number": {
-      "version": "7.0.0"
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-number-object": {
       "version": "1.0.7",
@@ -74310,9 +74443,9 @@
           }
         },
         "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "version": "7.5.10",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+          "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
           "requires": {}
         }
       }
@@ -75431,16 +75564,16 @@
       }
     },
     "load-bmfont": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz",
-      "integrity": "sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.2.tgz",
+      "integrity": "sha512-qElWkmjW9Oq1F9EI5Gt7aD9zcdHb9spJCW1L/dmPf7KzCCEJxq8nhHz5eCgI9aMf7vrG/wyaCqdsI+Iy9ZTlog==",
       "requires": {
         "buffer-equal": "0.0.1",
         "mime": "^1.3.4",
         "parse-bmfont-ascii": "^1.0.3",
         "parse-bmfont-binary": "^1.0.5",
         "parse-bmfont-xml": "^1.1.4",
-        "phin": "^2.9.1",
+        "phin": "^3.7.1",
         "xhr": "^2.0.1",
         "xtend": "^4.0.0"
       },
@@ -75449,6 +75582,14 @@
           "version": "1.6.0",
           "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
           "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+        },
+        "phin": {
+          "version": "3.7.1",
+          "resolved": "https://registry.npmjs.org/phin/-/phin-3.7.1.tgz",
+          "integrity": "sha512-GEazpTWwTZaEQ9RhL7Nyz0WwqilbqgLahDM3D0hxWwmVDI52nXEybHqiN6/elwpkJBhcuj+WbBu+QfT0uhPGfQ==",
+          "requires": {
+            "centra": "^2.7.0"
+          }
         }
       }
     },
@@ -76362,9 +76503,9 @@
       }
     },
     "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ=="
     },
     "merge-stream": {
       "version": "2.0.0"
@@ -76385,9 +76526,11 @@
       "dev": true
     },
     "micromatch": {
-      "version": "4.0.5",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "requires": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       }
     },
@@ -77807,9 +77950,9 @@
           "dev": true
         },
         "axios": {
-          "version": "1.6.8",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-          "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+          "version": "1.7.7",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+          "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
           "dev": true,
           "requires": {
             "follow-redirects": "^1.15.6",
@@ -78125,9 +78268,9 @@
       }
     },
     "object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g=="
     },
     "object-is": {
       "version": "1.1.5",
@@ -79047,9 +79190,9 @@
       }
     },
     "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
     "path-type": {
       "version": "4.0.0",
@@ -79780,9 +79923,9 @@
           }
         },
         "ws": {
-          "version": "6.2.2",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+          "version": "6.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+          "integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
           "dev": true,
           "requires": {
             "async-limiter": "~1.0.0"
@@ -79797,11 +79940,11 @@
       "optional": true
     },
     "qs": {
-      "version": "6.11.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
-      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "requires": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       }
     },
     "querystring": {
@@ -80375,9 +80518,9 @@
           "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
         },
         "path-to-regexp": {
-          "version": "1.8.0",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+          "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
           "requires": {
             "isarray": "0.0.1"
           }
@@ -82126,9 +82269,9 @@
       }
     },
     "send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "requires": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -82290,19 +82433,39 @@
       }
     },
     "serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "requires": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
+      },
+      "dependencies": {
+        "encodeurl": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+          "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
+        }
       }
     },
     "set-blocking": {
       "version": "2.0.0"
     },
+    "set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      }
+    },
     "set-function-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
@@ -82422,11 +82585,14 @@
       }
     },
     "side-channel": {
-      "version": "1.0.4",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "requires": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
       }
     },
     "signal-exit": {
@@ -82764,11 +82930,11 @@
       }
     },
     "socks": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
-      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
+      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
       "requires": {
-        "ip": "^2.0.0",
+        "ip-address": "^9.0.5",
         "smart-buffer": "^4.2.0"
       }
     },
@@ -84407,6 +84573,8 @@
     },
     "to-regex-range": {
       "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -85639,9 +85807,9 @@
       "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
     },
     "vue-template-compiler": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
-      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
@@ -85955,21 +86123,20 @@
       "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
     },
     "webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "requires": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -85993,22 +86160,22 @@
           "dev": true
         },
         "acorn": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+          "version": "8.12.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+          "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
           "dev": true
         },
-        "acorn-import-assertions": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-          "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+        "acorn-import-attributes": {
+          "version": "1.9.5",
+          "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+          "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
           "dev": true,
           "requires": {}
         },
         "enhanced-resolve": {
-          "version": "5.16.1",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-          "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+          "version": "5.17.1",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+          "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.2.4",
@@ -86671,9 +86838,9 @@
       }
     },
     "ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "requires": {}
     },
@@ -86838,9 +87005,9 @@
       },
       "dependencies": {
         "axios": {
-          "version": "1.6.8",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-          "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+          "version": "1.7.7",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+          "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
           "requires": {
             "follow-redirects": "^1.15.6",
             "form-data": "^4.0.0",

From 9ba0eb5186da8c3131dc64839336ea75b26e48f7 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Sat, 5 Oct 2024 00:17:07 +0200
Subject: [PATCH 29/32] Add mock implementation for createAgent in ytdl-core

---
 packages/app/__mocks__/@distube/ytdl-core.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/app/__mocks__/@distube/ytdl-core.ts b/packages/app/__mocks__/@distube/ytdl-core.ts
index f053ebf797..8bc89d8173 100644
--- a/packages/app/__mocks__/@distube/ytdl-core.ts
+++ b/packages/app/__mocks__/@distube/ytdl-core.ts
@@ -1 +1,3 @@
-module.exports = {};
+module.exports = {
+  createAgent: jest.fn()
+};

From f6bec57c690bc1a5f644f989de811fbcd954785f Mon Sep 17 00:00:00 2001
From: Alice Kwong <u7630748@anu.edu.au>
Date: Wed, 9 Oct 2024 20:32:32 +1100
Subject: [PATCH 30/32] swap the delete and selection button

---
 .../lib/components/GridTrackTable/index.tsx   | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 160296f1a2..eafc22967e 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -3,13 +3,13 @@ import React, { useMemo, useState } from 'react';
 import { DragDropContext, DragDropContextProps, Droppable } from 'react-beautiful-dnd';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-
+ 
 import { TrackTableColumn, TrackTableExtraProps, TrackTableHeaders, TrackTableSettings, TrackTableStrings } from '../TrackTable/types';
 import { TextHeader } from './Headers/TextHeader';
 import { TextCell } from './Cells/TextCell';
 import { Track } from '../../types';
 import { getTrackThumbnail } from '../TrackRow';
-
+ 
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { ThumbnailCell } from './Cells/ThumbnailCell';
@@ -25,7 +25,7 @@ import { FavoriteCell } from './Cells/FavoriteCell';
 import { TitleCell } from './Cells/TitleCell';
 import { Input } from 'semantic-ui-react';
 import Button from '../Button';
-
+ 
 export type GridTrackTableProps<T extends Track> = {
   className?: string;
   tracks: T[];
@@ -33,61 +33,62 @@ export type GridTrackTableProps<T extends Track> = {
   onDragEnd?: DragDropContextProps['onDragEnd'];
   strings: TrackTableStrings;
   customColumns?: (ColumnWithWidth<T>)[];
-} & TrackTableHeaders 
-  & TrackTableSettings 
+} & TrackTableHeaders
+  & TrackTableSettings
   & TrackTableExtraProps<T>;
-
+ 
 type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
 type TrackTableColumnInstance<T extends Track> = ColumnInstance<T> & UseSortByColumnProps<T>;
 type TrackTableHeaderGroup<T extends Track> = HeaderGroup<T> & UseSortByColumnProps<T>;
 type TrackTableInstance<T extends Track> = TableInstance<T> & UseGlobalFiltersInstanceProps<T> & UseSortByInstanceProps<T> & UseRowSelectInstanceProps<T>;
 type TrackTableState<T extends Track> = TableState<T> & UseSortByState<T>;
 export type TrackTableRow<T extends Track> = Row<T> & UseRowSelectRowProps<T>;
-
-export const GridTrackTable = <T extends Track>({ 
+ 
+export const GridTrackTable = <T extends Track>({
   className,
-  tracks, 
+  tracks,
   customColumns=[],
   isTrackFavorite,
   onDragEnd,
-
+ 
   positionHeader,
   thumbnailHeader,
   artistHeader,
   titleHeader,
   albumHeader,
   durationHeader,
-
+ 
   displayHeaders=true,
   displayDeleteButton=true,
   displayPosition=true,
   displayFavorite=true,
-  displayArtist=true, 
+  displayArtist=true,
   displayAlbum=true,
   displayThumbnail=true,
   displayDuration=true,
   displayCustom=true,
   selectable=true,
   searchable=false,
-
+ 
   ...extraProps
 }: GridTrackTableProps<T>) => {
   const shouldDisplayDuration = displayDuration && tracks.every(track => Boolean(track.duration));
   const columns = useMemo(() => [
-    displayDeleteButton && {
-      id: TrackTableColumn.Delete,
-      Cell: DeleteCell,
-      columnWidth: '3em'
-    } as Column<T>,
+    selectable && {
+      id: TrackTableColumn.Selection,
+      Header: SelectionHeader,
+      Cell: SelectionCell,
+      columnWidth: '7.5em'
+    },
     displayPosition && {
       id: TrackTableColumn.Position,
       Header: ({ column }) => <TextHeader
         data-testid='position-header'
         column={column as TrackTableColumnInstance<Track>}
-        header={positionHeader} 
+        header={positionHeader}
         isCentered
       />,
-      accessor: (track: T) => track.position, 
+      accessor: (track: T) => track.position,
       Cell: PositionCell,
       enableSorting: true,
       columnWidth: '4em'
@@ -121,7 +122,7 @@ export const GridTrackTable = <T extends Track>({
         : track.artist.name,
       Cell: TextCell,
       enableSorting: true,
-      columnWidth: '1fr'
+      columnWidth: '6em'
     },
     displayAlbum && {
       id: TrackTableColumn.Album,
@@ -129,7 +130,7 @@ export const GridTrackTable = <T extends Track>({
       accessor: (track: T) => track.album,
       enableSorting: true,
       Cell: TextCell,
-      columnWidth: '1fr'
+      columnWidth: '6em'
     } as Column<T>,
     shouldDisplayDuration && {
       id: TrackTableColumn.Duration,
@@ -147,82 +148,81 @@ export const GridTrackTable = <T extends Track>({
       columnWidth: '6em'
     },
     ...customColumns,
-    selectable && {
-      id: TrackTableColumn.Selection,
-      Header: SelectionHeader,
-      Cell: SelectionCell,
-      columnWidth: '6em'
-    }
+    displayDeleteButton && {
+      id: TrackTableColumn.Delete,
+      Cell: DeleteCell,
+      columnWidth: '3em'
+    } as Column<T>
   ].filter(Boolean), [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]);
-
+ 
   const data = useMemo(() => tracks, [tracks]);
-
+ 
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
     sortBy: [{ id: TrackTableColumn.Position, desc: false }]
   };
   const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect);
   const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
-
+ 
   const {
-    getTableProps, 
-    getTableBodyProps, 
-    headerGroups, 
-    rows, 
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
     prepareRow,
     setGlobalFilter,
     state: tableState,
     selectedFlatRows
   } = table as TrackTableInstance<T>;
-
+ 
   const onFilterClick = () => {
     setGlobalFilter('');
     setGlobalFilterState('');
   };
-
+ 
   const gridTemplateColumns = columns.map((column: ColumnWithWidth<T>) => column.columnWidth ?? '1fr').join(' ');
-
+ 
   // Disabled when there are selected rows, or when sorted by anything other than position
   const isDragDisabled = !onDragEnd || selectedFlatRows.length > 0 || (tableState as TrackTableState<T>).sortBy[0]?.id !== TrackTableColumn.Position;
-
+ 
   return <div className={styles.track_table_wrapper}>
     {
-      searchable && 
+      searchable &&
       <div className={styles.track_table_filter_row}>
         <Input
           data-testid='track-table-filter-input'
           type='text'
           placeholder={extraProps.strings.filterInputPlaceholder}
-          className={styles.track_table_filter_input} 
+          className={styles.track_table_filter_input}
           onChange={(e) => {
             setGlobalFilter(e.target.value);
             setGlobalFilterState(e.target.value);
           }}
           value={globalFilter}
         />
-        <Button 
+        <Button
           className={styles.track_table_filter_button}
           onClick={onFilterClick}
           borderless
           color={'blue'}
-          icon='filter' 
+          icon='filter'
         />
       </div>
     }
-    <div 
+    <div
       className={styles.grid_track_table}
       {...getTableProps()}
     >
       <div className={styles.track_table_head}>
         {headerGroups.map(headerGroup => (
-          <div 
+          <div
             key={headerGroup.id}
             className={styles.track_table_header_row}
             style={{ gridTemplateColumns: gridTemplateColumns + ' auto' }}
-            {...headerGroup.getHeaderGroupProps()} 
+            {...headerGroup.getHeaderGroupProps()}
           >
             {
               headerGroup.headers.map((column: TrackTableHeaderGroup<T>) => (
-                <div 
+                <div
                   key={column.id}
                   className={styles.track_table_header_cell}
                   {...column.getHeaderProps((column).getSortByToggleProps())}
@@ -234,7 +234,7 @@ export const GridTrackTable = <T extends Track>({
         ))}
       </div>
       <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable 
+        <Droppable
           droppableId='track_table'
           mode='virtual'
           renderClone={GridTrackTableRowClone({
@@ -262,7 +262,7 @@ export const GridTrackTable = <T extends Track>({
                     itemSize={42}
                     itemCount={rows.length}
                     overscanCount={2}
-                    itemData={{ 
+                    itemData={{
                       rows: rows as Row<Track>[],
                       prepareRow: prepareRow as (row: Row<Track>) => void,
                       gridTemplateColumns,
@@ -282,4 +282,4 @@ export const GridTrackTable = <T extends Track>({
     </div>
   </div>;
 };
-
+ 

From 309d644088aabc1a2bde81e2c089d11cdbed504f Mon Sep 17 00:00:00 2001
From: Alice Kwong <u7630748@anu.edu.au>
Date: Wed, 9 Oct 2024 20:32:51 +1100
Subject: [PATCH 31/32] update snapshots for test

---
 .../AlbumViewContainer.test.tsx.snap          | 130 ++++-----
 .../ArtistViewContainer.test.tsx.snap         | 130 ++++-----
 .../DashboardContainer.test.tsx.snap          | 110 ++++----
 .../DeezerPlaylistAdapter.test.tsx.snap       | 110 ++++----
 .../FavoritesContainer.tracks.test.tsx.snap   | 264 +++++++++---------
 .../LibraryViewContainer.test.tsx.snap        | 130 ++++-----
 .../PlaylistViewContainer.test.tsx.snap       | 132 ++++-----
 .../SpotifyPlaylistAdapter.test.tsx.snap      | 110 ++++----
 .../gridTrackTable.test.tsx.snap              | 218 +++++++--------
 9 files changed, 667 insertions(+), 667 deletions(-)

diff --git a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
index 8e76c40a0d..e3d17fecb1 100644
--- a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
@@ -131,8 +131,32 @@ exports[`Album view container should display an album 1`] = `
                 <div
                   class="track_table_header_row"
                   role="row"
-                  style="grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em auto;"
+                  style="grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em auto;"
                 >
+                  <div
+                    class="track_table_header_cell"
+                    colspan="1"
+                    role="columnheader"
+                  >
+                    <div
+                      class="selection_header"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="0"
+                          title="Toggle All Rows Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
+                  </div>
                   <div
                     class="track_table_header_cell"
                     colspan="1"
@@ -189,30 +213,6 @@ exports[`Album view container should display an album 1`] = `
                       Length
                     </div>
                   </div>
-                  <div
-                    class="track_table_header_cell"
-                    colspan="1"
-                    role="columnheader"
-                  >
-                    <div
-                      class="selection_header"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="0"
-                          title="Toggle All Rows Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
-                      </div>
-                    </div>
-                  </div>
                 </div>
               </div>
               <div
@@ -235,9 +235,28 @@ exports[`Album view container should display an album 1`] = `
                       data-rbd-draggable-id="0"
                       data-testid="track-table-row"
                       role="row"
-                      style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
+                      style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em;"
                       tabindex="0"
                     >
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
+                          />
+                          <label />
+                        </div>
+                      </div>
                       <div
                         class="grid_track_table_cell position_cell"
                         data-testid="position-cell"
@@ -316,6 +335,16 @@ exports[`Album view container should display an album 1`] = `
                       >
                         02:00
                       </div>
+                    </div>
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="1"
+                      data-testid="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em;"
+                      tabindex="1"
+                    >
                       <div
                         class="selection_cell"
                         role="cell"
@@ -335,16 +364,6 @@ exports[`Album view container should display an album 1`] = `
                           <label />
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="grid_track_table_row"
-                      data-rbd-draggable-context-id="0"
-                      data-rbd-draggable-id="1"
-                      data-testid="track-table-row"
-                      role="row"
-                      style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
-                      tabindex="1"
-                    >
                       <div
                         class="grid_track_table_cell position_cell"
                         data-testid="position-cell"
@@ -423,6 +442,16 @@ exports[`Album view container should display an album 1`] = `
                       >
                         01:03
                       </div>
+                    </div>
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="2"
+                      data-testid="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em;"
+                      tabindex="2"
+                    >
                       <div
                         class="selection_cell"
                         role="cell"
@@ -442,16 +471,6 @@ exports[`Album view container should display an album 1`] = `
                           <label />
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="grid_track_table_row"
-                      data-rbd-draggable-context-id="0"
-                      data-rbd-draggable-id="2"
-                      data-testid="track-table-row"
-                      role="row"
-                      style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 6em 6em;"
-                      tabindex="2"
-                    >
                       <div
                         class="grid_track_table_cell position_cell"
                         data-testid="position-cell"
@@ -530,25 +549,6 @@ exports[`Album view container should display an album 1`] = `
                       >
                         00:07
                       </div>
-                      <div
-                        class="selection_cell"
-                        role="cell"
-                      >
-                        <div
-                          class="ui fitted checkbox nuclear checkbox"
-                          style="cursor: pointer;"
-                        >
-                          <input
-                            class="hidden"
-                            readonly=""
-                            tabindex="-1"
-                            title="Toggle Row Selected"
-                            type="checkbox"
-                            value=""
-                          />
-                          <label />
-                        </div>
-                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index 8b4b438080..44fb3e8f53 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -126,8 +126,32 @@ exports[`Artist view container should display an artist 1`] = `
                     <div
                       class="track_table_header_row"
                       role="row"
-                      style="grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
+                      style="grid-template-columns: 7.5em 3em 3em minmax(8em, 1fr) 1fr auto;"
                     >
+                      <div
+                        class="track_table_header_cell"
+                        colspan="1"
+                        role="columnheader"
+                      >
+                        <div
+                          class="selection_header"
+                        >
+                          <div
+                            class="ui fitted checkbox nuclear checkbox"
+                            style="cursor: pointer;"
+                          >
+                            <input
+                              class="hidden"
+                              readonly=""
+                              tabindex="0"
+                              title="Toggle All Rows Selected"
+                              type="checkbox"
+                              value=""
+                            />
+                            <label />
+                          </div>
+                        </div>
+                      </div>
                       <div
                         class="track_table_header_cell"
                         colspan="1"
@@ -175,30 +199,6 @@ exports[`Artist view container should display an artist 1`] = `
                       >
                         Playcount
                       </div>
-                      <div
-                        class="track_table_header_cell"
-                        colspan="1"
-                        role="columnheader"
-                      >
-                        <div
-                          class="selection_header"
-                        >
-                          <div
-                            class="ui fitted checkbox nuclear checkbox"
-                            style="cursor: pointer;"
-                          >
-                            <input
-                              class="hidden"
-                              readonly=""
-                              tabindex="0"
-                              title="Toggle All Rows Selected"
-                              type="checkbox"
-                              value=""
-                            />
-                            <label />
-                          </div>
-                        </div>
-                      </div>
                     </div>
                   </div>
                   <div
@@ -221,9 +221,28 @@ exports[`Artist view container should display an artist 1`] = `
                           data-rbd-draggable-id="2"
                           data-testid="track-table-row"
                           role="row"
-                          style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                          style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 3em 3em minmax(8em, 1fr) 1fr;"
                           tabindex="2"
                         >
+                          <div
+                            class="selection_cell"
+                            role="cell"
+                          >
+                            <div
+                              class="ui fitted checkbox nuclear checkbox"
+                              style="cursor: pointer;"
+                            >
+                              <input
+                                class="hidden"
+                                readonly=""
+                                tabindex="-1"
+                                title="Toggle Row Selected"
+                                type="checkbox"
+                                value=""
+                              />
+                              <label />
+                            </div>
+                          </div>
                           <div
                             class="grid_track_table_cell thumbnail_cell"
                             role="cell"
@@ -286,6 +305,16 @@ exports[`Artist view container should display an artist 1`] = `
                           >
                             6,900,237
                           </div>
+                        </div>
+                        <div
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="1"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 3em 3em minmax(8em, 1fr) 1fr;"
+                          tabindex="1"
+                        >
                           <div
                             class="selection_cell"
                             role="cell"
@@ -305,16 +334,6 @@ exports[`Artist view container should display an artist 1`] = `
                               <label />
                             </div>
                           </div>
-                        </div>
-                        <div
-                          class="grid_track_table_row"
-                          data-rbd-draggable-context-id="0"
-                          data-rbd-draggable-id="1"
-                          data-testid="track-table-row"
-                          role="row"
-                          style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                          tabindex="1"
-                        >
                           <div
                             class="grid_track_table_cell thumbnail_cell"
                             role="cell"
@@ -377,6 +396,16 @@ exports[`Artist view container should display an artist 1`] = `
                           >
                             6,969
                           </div>
+                        </div>
+                        <div
+                          class="grid_track_table_row"
+                          data-rbd-draggable-context-id="0"
+                          data-rbd-draggable-id="0"
+                          data-testid="track-table-row"
+                          role="row"
+                          style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 7.5em 3em 3em minmax(8em, 1fr) 1fr;"
+                          tabindex="0"
+                        >
                           <div
                             class="selection_cell"
                             role="cell"
@@ -396,16 +425,6 @@ exports[`Artist view container should display an artist 1`] = `
                               <label />
                             </div>
                           </div>
-                        </div>
-                        <div
-                          class="grid_track_table_row"
-                          data-rbd-draggable-context-id="0"
-                          data-rbd-draggable-id="0"
-                          data-testid="track-table-row"
-                          role="row"
-                          style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                          tabindex="0"
-                        >
                           <div
                             class="grid_track_table_cell thumbnail_cell"
                             role="cell"
@@ -468,25 +487,6 @@ exports[`Artist view container should display an artist 1`] = `
                           >
                             1
                           </div>
-                          <div
-                            class="selection_cell"
-                            role="cell"
-                          >
-                            <div
-                              class="ui fitted checkbox nuclear checkbox"
-                              style="cursor: pointer;"
-                            >
-                              <input
-                                class="hidden"
-                                readonly=""
-                                tabindex="-1"
-                                title="Toggle Row Selected"
-                                type="checkbox"
-                                value=""
-                              />
-                              <label />
-                            </div>
-                          </div>
                         </div>
                       </div>
                     </div>
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
index bad1a09dc1..2a74d9665a 100644
--- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
+++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
@@ -574,8 +574,32 @@ exports[`Dashboard container should display top tracks after going to top tracks
                   <div
                     class="track_table_header_row"
                     role="row"
-                    style="grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em auto;"
+                    style="grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em auto;"
                   >
+                    <div
+                      class="track_table_header_cell"
+                      colspan="1"
+                      role="columnheader"
+                    >
+                      <div
+                        class="selection_header"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="0"
+                            title="Toggle All Rows Selected"
+                            type="checkbox"
+                            value=""
+                          />
+                          <label />
+                        </div>
+                      </div>
+                    </div>
                     <div
                       class="track_table_header_cell"
                       colspan="1"
@@ -661,30 +685,6 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         Length
                       </div>
                     </div>
-                    <div
-                      class="track_table_header_cell"
-                      colspan="1"
-                      role="columnheader"
-                    >
-                      <div
-                        class="selection_header"
-                      >
-                        <div
-                          class="ui fitted checkbox nuclear checkbox"
-                          style="cursor: pointer;"
-                        >
-                          <input
-                            class="hidden"
-                            readonly=""
-                            tabindex="0"
-                            title="Toggle All Rows Selected"
-                            type="checkbox"
-                            value=""
-                          />
-                          <label />
-                        </div>
-                      </div>
-                    </div>
                   </div>
                 </div>
                 <div
@@ -707,9 +707,28 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         data-rbd-draggable-id="0"
                         data-testid="track-table-row"
                         role="row"
-                        style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
+                        style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em;"
                         tabindex="0"
                       >
+                        <div
+                          class="selection_cell"
+                          role="cell"
+                        >
+                          <div
+                            class="ui fitted checkbox nuclear checkbox"
+                            style="cursor: pointer;"
+                          >
+                            <input
+                              class="hidden"
+                              readonly=""
+                              tabindex="-1"
+                              title="Toggle Row Selected"
+                              type="checkbox"
+                              value=""
+                            />
+                            <label />
+                          </div>
+                        </div>
                         <div
                           class="grid_track_table_cell position_cell"
                           data-testid="position-cell"
@@ -798,6 +817,16 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         >
                           01:40
                         </div>
+                      </div>
+                      <div
+                        class="grid_track_table_row"
+                        data-rbd-draggable-context-id="0"
+                        data-rbd-draggable-id="1"
+                        data-testid="track-table-row"
+                        role="row"
+                        style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em;"
+                        tabindex="1"
+                      >
                         <div
                           class="selection_cell"
                           role="cell"
@@ -817,16 +846,6 @@ exports[`Dashboard container should display top tracks after going to top tracks
                             <label />
                           </div>
                         </div>
-                      </div>
-                      <div
-                        class="grid_track_table_row"
-                        data-rbd-draggable-context-id="0"
-                        data-rbd-draggable-id="1"
-                        data-testid="track-table-row"
-                        role="row"
-                        style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
-                        tabindex="1"
-                      >
                         <div
                           class="grid_track_table_cell position_cell"
                           data-testid="position-cell"
@@ -915,25 +934,6 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         >
                           01:18
                         </div>
-                        <div
-                          class="selection_cell"
-                          role="cell"
-                        >
-                          <div
-                            class="ui fitted checkbox nuclear checkbox"
-                            style="cursor: pointer;"
-                          >
-                            <input
-                              class="hidden"
-                              readonly=""
-                              tabindex="-1"
-                              title="Toggle Row Selected"
-                              type="checkbox"
-                              value=""
-                            />
-                            <label />
-                          </div>
-                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
index 81a25f2e31..e904158232 100644
--- a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
@@ -117,8 +117,32 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
               <div
                 class="track_table_header_row"
                 role="row"
-                style="grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
+                style="grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em auto;"
               >
+                <div
+                  class="track_table_header_cell"
+                  colspan="1"
+                  role="columnheader"
+                >
+                  <div
+                    class="selection_header"
+                  >
+                    <div
+                      class="ui fitted checkbox nuclear checkbox"
+                      style="cursor: pointer;"
+                    >
+                      <input
+                        class="hidden"
+                        readonly=""
+                        tabindex="0"
+                        title="Toggle All Rows Selected"
+                        type="checkbox"
+                        value=""
+                      />
+                      <label />
+                    </div>
+                  </div>
+                </div>
                 <div
                   class="track_table_header_cell"
                   colspan="1"
@@ -191,30 +215,6 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     Artist
                   </div>
                 </div>
-                <div
-                  class="track_table_header_cell"
-                  colspan="1"
-                  role="columnheader"
-                >
-                  <div
-                    class="selection_header"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle All Rows Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
             <div
@@ -237,9 +237,28 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     data-rbd-draggable-id="0"
                     data-testid="track-table-row"
                     role="row"
-                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em;"
                     tabindex="0"
                   >
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                     <div
                       class="grid_track_table_cell position_cell"
                       data-testid="position-cell"
@@ -322,6 +341,16 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     >
                       artist 1
                     </div>
+                  </div>
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="1"
+                    data-rbd-draggable-id="1"
+                    data-testid="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em;"
+                    tabindex="1"
+                  >
                     <div
                       class="selection_cell"
                       role="cell"
@@ -341,16 +370,6 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                         <label />
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="grid_track_table_row"
-                    data-rbd-draggable-context-id="1"
-                    data-rbd-draggable-id="1"
-                    data-testid="track-table-row"
-                    role="row"
-                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
-                    tabindex="1"
-                  >
                     <div
                       class="grid_track_table_cell position_cell"
                       data-testid="position-cell"
@@ -433,25 +452,6 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     >
                       artist 2
                     </div>
-                    <div
-                      class="selection_cell"
-                      role="cell"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
diff --git a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
index 36ffa9d1ff..94f4eefaee 100644
--- a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
+++ b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
@@ -229,14 +229,31 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
               <div
                 class="track_table_header_row"
                 role="row"
-                style="grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em auto;"
+                style="grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 3em auto;"
               >
                 <div
                   class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                   
+                  <div
+                    class="selection_header"
+                  >
+                    <div
+                      class="ui fitted checkbox nuclear checkbox"
+                      style="cursor: pointer;"
+                    >
+                      <input
+                        class="hidden"
+                        readonly=""
+                        tabindex="0"
+                        title="Toggle All Rows Selected"
+                        type="checkbox"
+                        value=""
+                      />
+                      <label />
+                    </div>
+                  </div>
                 </div>
                 <div
                   class="track_table_header_cell"
@@ -306,24 +323,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                   colspan="1"
                   role="columnheader"
                 >
-                  <div
-                    class="selection_header"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle All Rows Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
-                    </div>
-                  </div>
+                   
                 </div>
               </div>
             </div>
@@ -347,23 +347,27 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     data-rbd-draggable-id="1"
                     data-testid="track-table-row"
                     role="row"
-                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 3em;"
                     tabindex="1"
                   >
                     <div
-                      class="delete_cell"
-                      data-testid="delete-cell"
+                      class="selection_cell"
                       role="cell"
                     >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                        data-testid="delete-button"
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="times icon"
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
                         />
-                      </button>
+                        <label />
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell position_cell"
@@ -433,23 +437,19 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                       test artist 2
                     </div>
                     <div
-                      class="selection_cell"
+                      class="delete_cell"
+                      data-testid="delete-cell"
                       role="cell"
                     >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
                         />
-                        <label />
-                      </div>
+                      </button>
                     </div>
                   </div>
                   <div
@@ -458,23 +458,27 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     data-rbd-draggable-id="0"
                     data-testid="track-table-row"
                     role="row"
-                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 3em;"
                     tabindex="0"
                   >
                     <div
-                      class="delete_cell"
-                      data-testid="delete-cell"
+                      class="selection_cell"
                       role="cell"
                     >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                        data-testid="delete-button"
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="times icon"
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
                         />
-                      </button>
+                        <label />
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell position_cell"
@@ -544,23 +548,19 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                       test artist 1
                     </div>
                     <div
-                      class="selection_cell"
+                      class="delete_cell"
+                      data-testid="delete-cell"
                       role="cell"
                     >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
                         />
-                        <label />
-                      </div>
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -784,14 +784,31 @@ exports[`Favorite tracks view container should show a popup when a track is clic
               <div
                 class="track_table_header_row"
                 role="row"
-                style="grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em auto;"
+                style="grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 3em auto;"
               >
                 <div
                   class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                   
+                  <div
+                    class="selection_header"
+                  >
+                    <div
+                      class="ui fitted checkbox nuclear checkbox"
+                      style="cursor: pointer;"
+                    >
+                      <input
+                        class="hidden"
+                        readonly=""
+                        tabindex="0"
+                        title="Toggle All Rows Selected"
+                        type="checkbox"
+                        value=""
+                      />
+                      <label />
+                    </div>
+                  </div>
                 </div>
                 <div
                   class="track_table_header_cell"
@@ -861,24 +878,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                   colspan="1"
                   role="columnheader"
                 >
-                  <div
-                    class="selection_header"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle All Rows Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
-                    </div>
-                  </div>
+                   
                 </div>
               </div>
             </div>
@@ -902,23 +902,27 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     data-rbd-draggable-id="1"
                     data-testid="track-table-row"
                     role="row"
-                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 3em;"
                     tabindex="1"
                   >
                     <div
-                      class="delete_cell"
-                      data-testid="delete-cell"
+                      class="selection_cell"
                       role="cell"
                     >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                        data-testid="delete-button"
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="times icon"
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
                         />
-                      </button>
+                        <label />
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell position_cell"
@@ -988,23 +992,19 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                       test artist 2
                     </div>
                     <div
-                      class="selection_cell"
+                      class="delete_cell"
+                      data-testid="delete-cell"
                       role="cell"
                     >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
                         />
-                        <label />
-                      </div>
+                      </button>
                     </div>
                   </div>
                   <div
@@ -1013,23 +1013,27 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     data-rbd-draggable-id="0"
                     data-testid="track-table-row"
                     role="row"
-                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em minmax(8em, 1fr) 1fr 6em;"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 3em;"
                     tabindex="0"
                   >
                     <div
-                      class="delete_cell"
-                      data-testid="delete-cell"
+                      class="selection_cell"
                       role="cell"
                     >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                        data-testid="delete-button"
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="times icon"
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
                         />
-                      </button>
+                        <label />
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell position_cell"
@@ -1099,23 +1103,19 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                       test artist 1
                     </div>
                     <div
-                      class="selection_cell"
+                      class="delete_cell"
+                      data-testid="delete-cell"
                       role="cell"
                     >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
                         />
-                        <label />
-                      </div>
+                      </button>
                     </div>
                   </div>
                 </div>
diff --git a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
index b47caf8a59..183bfd3c3b 100644
--- a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
@@ -837,8 +837,32 @@ exports[`Library view container should display local library in simple list mode
                 <div
                   class="track_table_header_row"
                   role="row"
-                  style="grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em auto;"
+                  style="grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 6em 6em auto;"
                 >
+                  <div
+                    class="track_table_header_cell"
+                    colspan="1"
+                    role="columnheader"
+                  >
+                    <div
+                      class="selection_header"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="0"
+                          title="Toggle All Rows Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
+                  </div>
                   <div
                     class="track_table_header_cell"
                     colspan="1"
@@ -928,30 +952,6 @@ exports[`Library view container should display local library in simple list mode
                       Length
                     </div>
                   </div>
-                  <div
-                    class="track_table_header_cell"
-                    colspan="1"
-                    role="columnheader"
-                  >
-                    <div
-                      class="selection_header"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="0"
-                          title="Toggle All Rows Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
-                      </div>
-                    </div>
-                  </div>
                 </div>
               </div>
               <div
@@ -974,9 +974,28 @@ exports[`Library view container should display local library in simple list mode
                       data-rbd-draggable-id="0"
                       data-testid="track-table-row"
                       role="row"
-                      style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
+                      style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 6em 6em;"
                       tabindex="0"
                     >
+                      <div
+                        class="selection_cell"
+                        role="cell"
+                      >
+                        <div
+                          class="ui fitted checkbox nuclear checkbox"
+                          style="cursor: pointer;"
+                        >
+                          <input
+                            class="hidden"
+                            readonly=""
+                            tabindex="-1"
+                            title="Toggle Row Selected"
+                            type="checkbox"
+                            value=""
+                          />
+                          <label />
+                        </div>
+                      </div>
                       <div
                         class="grid_track_table_cell position_cell"
                         data-testid="position-cell"
@@ -1056,6 +1075,16 @@ exports[`Library view container should display local library in simple list mode
                       >
                         05:00
                       </div>
+                    </div>
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="1"
+                      data-testid="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 6em 6em;"
+                      tabindex="1"
+                    >
                       <div
                         class="selection_cell"
                         role="cell"
@@ -1075,16 +1104,6 @@ exports[`Library view container should display local library in simple list mode
                           <label />
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="grid_track_table_row"
-                      data-rbd-draggable-context-id="0"
-                      data-rbd-draggable-id="1"
-                      data-testid="track-table-row"
-                      role="row"
-                      style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
-                      tabindex="1"
-                    >
                       <div
                         class="grid_track_table_cell position_cell"
                         data-testid="position-cell"
@@ -1164,6 +1183,16 @@ exports[`Library view container should display local library in simple list mode
                       >
                         03:20
                       </div>
+                    </div>
+                    <div
+                      class="grid_track_table_row"
+                      data-rbd-draggable-context-id="0"
+                      data-rbd-draggable-id="2"
+                      data-testid="track-table-row"
+                      role="row"
+                      style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em minmax(8em, 1fr) 6em 6em 6em;"
+                      tabindex="2"
+                    >
                       <div
                         class="selection_cell"
                         role="cell"
@@ -1183,16 +1212,6 @@ exports[`Library view container should display local library in simple list mode
                           <label />
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="grid_track_table_row"
-                      data-rbd-draggable-context-id="0"
-                      data-rbd-draggable-id="2"
-                      data-testid="track-table-row"
-                      role="row"
-                      style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 4em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
-                      tabindex="2"
-                    >
                       <div
                         class="grid_track_table_cell position_cell"
                         data-testid="position-cell"
@@ -1272,25 +1291,6 @@ exports[`Library view container should display local library in simple list mode
                       >
                         01:40
                       </div>
-                      <div
-                        class="selection_cell"
-                        role="cell"
-                      >
-                        <div
-                          class="ui fitted checkbox nuclear checkbox"
-                          style="cursor: pointer;"
-                        >
-                          <input
-                            class="hidden"
-                            readonly=""
-                            tabindex="-1"
-                            title="Toggle Row Selected"
-                            type="checkbox"
-                            value=""
-                          />
-                          <label />
-                        </div>
-                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
index 4908ae42cf..f18beda0d3 100644
--- a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
@@ -120,14 +120,31 @@ exports[`Playlist view container should display a playlist 1`] = `
               <div
                 class="track_table_header_row"
                 role="row"
-                style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em auto;"
+                style="grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 3em auto;"
               >
                 <div
                   class="track_table_header_cell"
                   colspan="1"
                   role="columnheader"
                 >
-                   
+                  <div
+                    class="selection_header"
+                  >
+                    <div
+                      class="ui fitted checkbox nuclear checkbox"
+                      style="cursor: pointer;"
+                    >
+                      <input
+                        class="hidden"
+                        readonly=""
+                        tabindex="0"
+                        title="Toggle All Rows Selected"
+                        type="checkbox"
+                        value=""
+                      />
+                      <label />
+                    </div>
+                  </div>
                 </div>
                 <div
                   class="track_table_header_cell"
@@ -206,24 +223,7 @@ exports[`Playlist view container should display a playlist 1`] = `
                   colspan="1"
                   role="columnheader"
                 >
-                  <div
-                    class="selection_header"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle All Rows Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
-                    </div>
-                  </div>
+                   
                 </div>
               </div>
             </div>
@@ -251,23 +251,27 @@ exports[`Playlist view container should display a playlist 1`] = `
                     data-testid="track-table-row"
                     draggable="false"
                     role="button"
-                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 3em;"
                     tabindex="0"
                   >
                     <div
-                      class="delete_cell"
-                      data-testid="delete-cell"
+                      class="selection_cell"
                       role="cell"
                     >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                        data-testid="delete-button"
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="times icon"
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
                         />
-                      </button>
+                        <label />
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell position_cell"
@@ -352,23 +356,19 @@ exports[`Playlist view container should display a playlist 1`] = `
                       test artist 1
                     </div>
                     <div
-                      class="selection_cell"
+                      class="delete_cell"
+                      data-testid="delete-cell"
                       role="cell"
                     >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
                         />
-                        <label />
-                      </div>
+                      </button>
                     </div>
                   </div>
                   <div
@@ -381,23 +381,27 @@ exports[`Playlist view container should display a playlist 1`] = `
                     data-testid="track-table-row"
                     draggable="false"
                     role="button"
-                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 6em;"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 3em;"
                     tabindex="1"
                   >
                     <div
-                      class="delete_cell"
-                      data-testid="delete-cell"
+                      class="selection_cell"
                       role="cell"
                     >
-                      <button
-                        class="ui tiny basic circular icon button nuclear button borderless"
-                        data-testid="delete-button"
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="times icon"
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
                         />
-                      </button>
+                        <label />
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell position_cell"
@@ -482,23 +486,19 @@ exports[`Playlist view container should display a playlist 1`] = `
                       test artist 2
                     </div>
                     <div
-                      class="selection_cell"
+                      class="delete_cell"
+                      data-testid="delete-cell"
                       role="cell"
                     >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
+                      <button
+                        class="ui tiny basic circular icon button nuclear button borderless"
+                        data-testid="delete-button"
                       >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
+                        <i
+                          aria-hidden="true"
+                          class="times icon"
                         />
-                        <label />
-                      </div>
+                      </button>
                     </div>
                   </div>
                 </div>
diff --git a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
index 2c6e464caf..35343f310d 100644
--- a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
@@ -117,8 +117,32 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
               <div
                 class="track_table_header_row"
                 role="row"
-                style="grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em auto;"
+                style="grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em auto;"
               >
+                <div
+                  class="track_table_header_cell"
+                  colspan="1"
+                  role="columnheader"
+                >
+                  <div
+                    class="selection_header"
+                  >
+                    <div
+                      class="ui fitted checkbox nuclear checkbox"
+                      style="cursor: pointer;"
+                    >
+                      <input
+                        class="hidden"
+                        readonly=""
+                        tabindex="0"
+                        title="Toggle All Rows Selected"
+                        type="checkbox"
+                        value=""
+                      />
+                      <label />
+                    </div>
+                  </div>
+                </div>
                 <div
                   class="track_table_header_cell"
                   colspan="1"
@@ -204,30 +228,6 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     Length
                   </div>
                 </div>
-                <div
-                  class="track_table_header_cell"
-                  colspan="1"
-                  role="columnheader"
-                >
-                  <div
-                    class="selection_header"
-                  >
-                    <div
-                      class="ui fitted checkbox nuclear checkbox"
-                      style="cursor: pointer;"
-                    >
-                      <input
-                        class="hidden"
-                        readonly=""
-                        tabindex="0"
-                        title="Toggle All Rows Selected"
-                        type="checkbox"
-                        value=""
-                      />
-                      <label />
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
             <div
@@ -250,9 +250,28 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     data-rbd-draggable-id="0"
                     data-testid="track-table-row"
                     role="row"
-                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
+                    style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em;"
                     tabindex="0"
                   >
+                    <div
+                      class="selection_cell"
+                      role="cell"
+                    >
+                      <div
+                        class="ui fitted checkbox nuclear checkbox"
+                        style="cursor: pointer;"
+                      >
+                        <input
+                          class="hidden"
+                          readonly=""
+                          tabindex="-1"
+                          title="Toggle Row Selected"
+                          type="checkbox"
+                          value=""
+                        />
+                        <label />
+                      </div>
+                    </div>
                     <div
                       class="grid_track_table_cell position_cell"
                       data-testid="position-cell"
@@ -341,6 +360,16 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     >
                       02:00
                     </div>
+                  </div>
+                  <div
+                    class="grid_track_table_row"
+                    data-rbd-draggable-context-id="0"
+                    data-rbd-draggable-id="1"
+                    data-testid="track-table-row"
+                    role="row"
+                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em;"
+                    tabindex="1"
+                  >
                     <div
                       class="selection_cell"
                       role="cell"
@@ -360,16 +389,6 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                         <label />
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="grid_track_table_row"
-                    data-rbd-draggable-context-id="0"
-                    data-rbd-draggable-id="1"
-                    data-testid="track-table-row"
-                    role="row"
-                    style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 4em 3em 3em minmax(8em, 1fr) 1fr 6em 6em;"
-                    tabindex="1"
-                  >
                     <div
                       class="grid_track_table_cell position_cell"
                       data-testid="position-cell"
@@ -458,25 +477,6 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     >
                       03:00
                     </div>
-                    <div
-                      class="selection_cell"
-                      role="cell"
-                    >
-                      <div
-                        class="ui fitted checkbox nuclear checkbox"
-                        style="cursor: pointer;"
-                      >
-                        <input
-                          class="hidden"
-                          readonly=""
-                          tabindex="-1"
-                          title="Toggle Row Selected"
-                          type="checkbox"
-                          value=""
-                        />
-                        <label />
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
diff --git a/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
index 9995eeaa55..d759a8cf26 100644
--- a/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
+++ b/packages/ui/test/__snapshots__/gridTrackTable.test.tsx.snap
@@ -15,14 +15,31 @@ exports[`(Snapshot) Grid track table - empty should render correctly 1`] = `
         <div
           class="track_table_header_row"
           role="row"
-          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em auto;"
+          style="grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em 6em 3em auto;"
         >
           <div
             class="track_table_header_cell"
             colspan="1"
             role="columnheader"
           >
-             
+            <div
+              class="selection_header"
+            >
+              <div
+                class="ui fitted checkbox nuclear checkbox"
+                style="cursor: pointer;"
+              >
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  title="Toggle All Rows Selected"
+                  type="checkbox"
+                  value=""
+                />
+                <label />
+              </div>
+            </div>
           </div>
           <div
             class="track_table_header_cell"
@@ -119,24 +136,7 @@ exports[`(Snapshot) Grid track table - empty should render correctly 1`] = `
             colspan="1"
             role="columnheader"
           >
-            <div
-              class="selection_header"
-            >
-              <div
-                class="ui fitted checkbox nuclear checkbox"
-                style="cursor: pointer;"
-              >
-                <input
-                  class="hidden"
-                  readonly=""
-                  tabindex="0"
-                  title="Toggle All Rows Selected"
-                  type="checkbox"
-                  value=""
-                />
-                <label />
-              </div>
-            </div>
+             
           </div>
         </div>
       </div>
@@ -176,14 +176,31 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
         <div
           class="track_table_header_row"
           role="row"
-          style="grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em auto;"
+          style="grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em 6em 3em auto;"
         >
           <div
             class="track_table_header_cell"
             colspan="1"
             role="columnheader"
           >
-             
+            <div
+              class="selection_header"
+            >
+              <div
+                class="ui fitted checkbox nuclear checkbox"
+                style="cursor: pointer;"
+              >
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  title="Toggle All Rows Selected"
+                  type="checkbox"
+                  value=""
+                />
+                <label />
+              </div>
+            </div>
           </div>
           <div
             class="track_table_header_cell"
@@ -280,24 +297,7 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
             colspan="1"
             role="columnheader"
           >
-            <div
-              class="selection_header"
-            >
-              <div
-                class="ui fitted checkbox nuclear checkbox"
-                style="cursor: pointer;"
-              >
-                <input
-                  class="hidden"
-                  readonly=""
-                  tabindex="0"
-                  title="Toggle All Rows Selected"
-                  type="checkbox"
-                  value=""
-                />
-                <label />
-              </div>
-            </div>
+             
           </div>
         </div>
       </div>
@@ -321,23 +321,27 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               data-rbd-draggable-id="0"
               data-testid="track-table-row"
               role="row"
-              style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
+              style="position: absolute; left: 0px; top: 0px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em 6em 3em;"
               tabindex="0"
             >
               <div
-                class="delete_cell"
-                data-testid="delete-cell"
+                class="selection_cell"
                 role="cell"
               >
-                <button
-                  class="ui tiny basic circular icon button nuclear button borderless"
-                  data-testid="delete-button"
+                <div
+                  class="ui fitted checkbox nuclear checkbox"
+                  style="cursor: pointer;"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="times icon"
+                  <input
+                    class="hidden"
+                    readonly=""
+                    tabindex="-1"
+                    title="Toggle Row Selected"
+                    type="checkbox"
+                    value=""
                   />
-                </button>
+                  <label />
+                </div>
               </div>
               <div
                 class="grid_track_table_cell position_cell"
@@ -434,23 +438,19 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
                 1:00
               </div>
               <div
-                class="selection_cell"
+                class="delete_cell"
+                data-testid="delete-cell"
                 role="cell"
               >
-                <div
-                  class="ui fitted checkbox nuclear checkbox"
-                  style="cursor: pointer;"
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="delete-button"
                 >
-                  <input
-                    class="hidden"
-                    readonly=""
-                    tabindex="-1"
-                    title="Toggle Row Selected"
-                    type="checkbox"
-                    value=""
+                  <i
+                    aria-hidden="true"
+                    class="times icon"
                   />
-                  <label />
-                </div>
+                </button>
               </div>
             </div>
             <div
@@ -459,23 +459,27 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               data-rbd-draggable-id="1"
               data-testid="track-table-row"
               role="row"
-              style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
+              style="position: absolute; left: 0px; top: 42px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em 6em 3em;"
               tabindex="1"
             >
               <div
-                class="delete_cell"
-                data-testid="delete-cell"
+                class="selection_cell"
                 role="cell"
               >
-                <button
-                  class="ui tiny basic circular icon button nuclear button borderless"
-                  data-testid="delete-button"
+                <div
+                  class="ui fitted checkbox nuclear checkbox"
+                  style="cursor: pointer;"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="times icon"
+                  <input
+                    class="hidden"
+                    readonly=""
+                    tabindex="-1"
+                    title="Toggle Row Selected"
+                    type="checkbox"
+                    value=""
                   />
-                </button>
+                  <label />
+                </div>
               </div>
               <div
                 class="grid_track_table_cell position_cell"
@@ -572,23 +576,19 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
                 1:00
               </div>
               <div
-                class="selection_cell"
+                class="delete_cell"
+                data-testid="delete-cell"
                 role="cell"
               >
-                <div
-                  class="ui fitted checkbox nuclear checkbox"
-                  style="cursor: pointer;"
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="delete-button"
                 >
-                  <input
-                    class="hidden"
-                    readonly=""
-                    tabindex="-1"
-                    title="Toggle Row Selected"
-                    type="checkbox"
-                    value=""
+                  <i
+                    aria-hidden="true"
+                    class="times icon"
                   />
-                  <label />
-                </div>
+                </button>
               </div>
             </div>
             <div
@@ -597,23 +597,27 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
               data-rbd-draggable-id="2"
               data-testid="track-table-row"
               role="row"
-              style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 3em 4em 3em 3em minmax(8em, 1fr) 1fr 1fr 6em 6em;"
+              style="position: absolute; left: 0px; top: 84px; height: 42px; width: 100%; grid-template-columns: 7.5em 4em 3em 3em minmax(8em, 1fr) 6em 6em 6em 3em;"
               tabindex="2"
             >
               <div
-                class="delete_cell"
-                data-testid="delete-cell"
+                class="selection_cell"
                 role="cell"
               >
-                <button
-                  class="ui tiny basic circular icon button nuclear button borderless"
-                  data-testid="delete-button"
+                <div
+                  class="ui fitted checkbox nuclear checkbox"
+                  style="cursor: pointer;"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="times icon"
+                  <input
+                    class="hidden"
+                    readonly=""
+                    tabindex="-1"
+                    title="Toggle Row Selected"
+                    type="checkbox"
+                    value=""
                   />
-                </button>
+                  <label />
+                </div>
               </div>
               <div
                 class="grid_track_table_cell position_cell"
@@ -710,23 +714,19 @@ exports[`(Snapshot) Grid track table - example data with all rows should render
                 1:00
               </div>
               <div
-                class="selection_cell"
+                class="delete_cell"
+                data-testid="delete-cell"
                 role="cell"
               >
-                <div
-                  class="ui fitted checkbox nuclear checkbox"
-                  style="cursor: pointer;"
+                <button
+                  class="ui tiny basic circular icon button nuclear button borderless"
+                  data-testid="delete-button"
                 >
-                  <input
-                    class="hidden"
-                    readonly=""
-                    tabindex="-1"
-                    title="Toggle Row Selected"
-                    type="checkbox"
-                    value=""
+                  <i
+                    aria-hidden="true"
+                    class="times icon"
                   />
-                  <label />
-                </div>
+                </button>
               </div>
             </div>
           </div>

From d028afda28e4b2c9ae70ce8b944d70f0a76464b9 Mon Sep 17 00:00:00 2001
From: waldo121 <17034517+waldo121@users.noreply.github.com>
Date: Tue, 8 Oct 2024 18:35:23 +0000
Subject: [PATCH 32/32] Restart downloads upon re-opening the application

---
 packages/app/app/App.js                   |  5 ++++-
 packages/app/app/actions/actionTypes.ts   |  1 +
 packages/app/app/actions/downloads.ts     | 27 +++++++++++++++++++++--
 packages/app/app/reducers/downloads.ts    |  1 +
 packages/app/app/store/middlewares/ipc.ts |  1 +
 5 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/app/app/App.js b/packages/app/app/App.js
index 0c904eb91d..a46f75d732 100644
--- a/packages/app/app/App.js
+++ b/packages/app/app/App.js
@@ -19,6 +19,7 @@ import * as ConnectivityActions from './actions/connectivity';
 import * as GithubContribActions from './actions/githubContrib';
 import * as WindowActions from './actions/window';
 import * as NuclearConfigActions from './actions/nuclear/configuration';
+import * as DownloadActions from './actions/downloads';
 
 import './app.global.scss';
 import styles from './styles.scss';
@@ -64,6 +65,7 @@ class App extends React.PureComponent {
     this.props.actions.githubContribInfo();
     this.props.actions.fetchNuclearConfiguration();
     this.props.actions.fetchNuclearParams();
+    this.props.actions.resumeDownloads();
 
     this.updateConnectivityStatus(navigator.onLine);
     window.addEventListener('online', () => this.updateConnectivityStatus(true));
@@ -198,7 +200,8 @@ function mapDispatchToProps(dispatch) {
         SearchActions,
         GithubContribActions,
         WindowActions,
-        NuclearConfigActions
+        NuclearConfigActions,
+        DownloadActions
       ),
       dispatch
     )
diff --git a/packages/app/app/actions/actionTypes.ts b/packages/app/app/actions/actionTypes.ts
index 22a46bce1e..7a8d1c1ffd 100644
--- a/packages/app/app/actions/actionTypes.ts
+++ b/packages/app/app/actions/actionTypes.ts
@@ -152,6 +152,7 @@ export enum Equalizer {
 export enum Download {
   READ_DOWNLOADS = 'READ_DOWNLOADS',
   ADD_TO_DOWNLOADS = 'ADD_TO_DOWNLOADS',
+  RESUME_DOWNLOADS = 'RESUME_DOWNLOADS',
   DOWNLOAD_STARTED = 'DOWNLOAD_STARTED',
   DOWNLOAD_PAUSED = 'DOWNLOAD_PAUSED',
   DOWNLOAD_RESUMED = 'DOWNLOAD_RESUMED',
diff --git a/packages/app/app/actions/downloads.ts b/packages/app/app/actions/downloads.ts
index 91c54c85ea..462aa1afa1 100644
--- a/packages/app/app/actions/downloads.ts
+++ b/packages/app/app/actions/downloads.ts
@@ -101,8 +101,15 @@ export const onDownloadResume = createStandardAction(DownloadActionTypes.DOWNLOA
 
 export const onDownloadProgress = createStandardAction(DownloadActionTypes.DOWNLOAD_PROGRESS).map(
   (uuid: string, progress: number) => {
-    const downloads = store.get('downloads');
-    let payload = changePropertyForItem({
+    const downloads: Download[] = store.get('downloads');
+    const track = downloads.find((item) => item.track.uuid === uuid);
+    if (track === undefined) {
+      // track is no longer in downloads, so nothing can be updated
+      return {
+        payload: downloads
+      };
+    }
+    let payload: Download[] = changePropertyForItem({
       downloads,
       uuid,
       propertyName: 'completion',
@@ -172,3 +179,19 @@ export const clearFinishedDownloads = createStandardAction(DownloadActionTypes.C
       payload: filteredTracks
     };
   });
+
+export const resumeDownloads = createStandardAction(DownloadActionTypes.RESUME_DOWNLOADS).map(
+  () => {
+    const downloads: Download[] = store.get('downloads');
+    const startedItem = downloads.find((item) => item.status === DownloadStatus.STARTED);
+    let payload = downloads;
+    if (startedItem !== undefined) {
+      payload = changePropertyForItem({
+        downloads,
+        uuid: startedItem.track.uuid,
+        value: DownloadStatus.WAITING
+      });
+    }
+    return  { payload, type: DownloadActionTypes.RESUME_DOWNLOADS };
+  } 
+);
diff --git a/packages/app/app/reducers/downloads.ts b/packages/app/app/reducers/downloads.ts
index d0d06d628a..12a9730776 100644
--- a/packages/app/app/reducers/downloads.ts
+++ b/packages/app/app/reducers/downloads.ts
@@ -15,6 +15,7 @@ export default function DownloadsReducer(state=initialState, action: DownloadRed
   case getType(DownloadActions.onDownloadResume):
   case getType(DownloadActions.onDownloadPause):
     return [...action.payload.downloads];
+  case getType(DownloadActions.resumeDownloads):
   case getType(DownloadActions.readDownloads):
   case getType(DownloadActions.onDownloadStarted):
   case getType(DownloadActions.onDownloadProgress):
diff --git a/packages/app/app/store/middlewares/ipc.ts b/packages/app/app/store/middlewares/ipc.ts
index d95ef3fd7f..ccca4556c0 100644
--- a/packages/app/app/store/middlewares/ipc.ts
+++ b/packages/app/app/store/middlewares/ipc.ts
@@ -120,6 +120,7 @@ const ipcConnect: Middleware = () => next => {
       ipcRenderer.send(IpcEvents.DOWNLOAD_PAUSE, track);
       break;
     }
+    case getType(DownloadActions.resumeDownloads):
     case getType(DownloadActions.onDownloadFinished):
     case getType(DownloadActions.onDownloadError): {
       const nextDownload = payload.find((download) =>