feat(myLibrary): new "My Library" section

src/App/modules/MyLibrary/components/Empty.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+import renderIcons from '../../../helpers/renderIcons';
+
+const useStyle = createUseStyles({
+  wrapper: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: '100vh',
+    fontSize: 'smaller',
+    padding: '0 5rem',
+  },
+});
+
+const Empty = () => {
+  const classes = useStyle();
+  return (
+    <div className={classes.wrapper}>
+      {renderIcons({ name: 'Download', height: '50px', width: '50px' })}
+      <p>It&apos;s empty in here..</p>
+      <p>To sync your osu! library go to the Settings section and register you song folder</p>
+    </div>
+  );
+};
+
+export default Empty;

src/App/modules/MyLibrary/components/Header.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+import TextInput from '../../common/TextInput';
+
+const useStyle = createUseStyles({});
+
+const Header = ({ setFilter, unplayedCount, overallDration, beatmapSetCount }) => {
+  const classes = useStyle();
+  const handleInput = e => {
+    setFilter(e.target.value);
+  };
+  console.log({ unplayedCount, overallDration, beatmapSetCount });
+  return (
+    <div className={classes.wrapper}>
+      {beatmapSetCount}
+      {unplayedCount}
+      {overallDration}
+      <TextInput onChange={handleInput} placeHolder="id, artist, title, creator" />
+    </div>
+  );
+};
+
+export default Header;

src/App/modules/MyLibrary/index.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { FixedSizeList as List } from 'react-window';
+import config from '../../../shared/config';
+import { useDownloadHistory } from '../../Providers/HistoryProvider';
+import BeatmapListItem from '../Packs/BeatmapPackDetail/Item';
+import Empty from './components/Empty';
+import Header from './components/Header';
+
+const MyLibrary = ({ setHeaderContent, windowSize }) => {
+  const listWidth = windowSize.width - config.display.sidePanelCompactedLength;
+  const listHeight = windowSize.height;
+
+  const [filter, setFilter] = useState('');
+  const { history, stats } = useDownloadHistory();
+  let historyItems = Object.values(history);
+  useEffect(() => {
+    setHeaderContent(
+      <Header
+        setFilter={setFilter}
+        unplayedCount={stats.overallUnplayedCount}
+        overallDration={stats.overallDuration}
+        beatmapSetCount={historyItems.length}
+      />,
+    );
+    return () => setHeaderContent(null);
+  });
+
+  if (filter) {
+    const lowerCase = filter.toLowerCase();
+    historyItems = historyItems.filter(historyItem =>
+      [historyItem.id, historyItem.title, historyItem.artist, historyItem.creator].some(
+        property =>
+          property &&
+          String(property)
+            .toLowerCase()
+            .includes(lowerCase),
+      ),
+    );
+  }
+
+  const itemCount = historyItems.length;
+  return (
+    <div className="menuContainer Downloads" style={{ transition: 'background 0ms', overflow: 'hidden' }}>
+      {itemCount ? (
+        <List
+          height={listHeight}
+          itemCount={itemCount}
+          itemSize={50}
+          width={listWidth}
+          itemData={{ items: historyItems, itemMode: 'library' }}
+        >
+          {BeatmapListItem}
+        </List>
+      ) : (
+        <Empty />
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = ({ app }) => ({
+  windowSize: app.window,
+});
+export default connect(mapStateToProps)(MyLibrary);

src/App/modules/Nav.js

@@ -11,6 +11,7 @@ import NavPanel from './common/NavPanel';
 import NavPanelItem from './common/NavPanel/Item';
 import store from '../../shared/store';
 import config from '../../shared/config';
+import MyLibrary from './MyLibrary';
 
 const { trackNavigation } = remote.getGlobal('tracking');
 
@@ -50,6 +51,7 @@ const Nav = ({ connected, instance: botInstance, sidePanelExpended, activeSectio
       {renderItem('Packs', <Packs />)}
       {renderItem('Downloads', <Downloads />)}
       {renderItem('Bot', <Bot connected={connected} bot={botInstance} />)}
+      {renderItem('My Library', <MyLibrary />)}
       {renderItem('Settings', <Settings />)}
     </NavPanel>
   );

src/App/modules/Packs/BeatmapPackDetail/Item.jsx

@@ -1,6 +1,7 @@
 import { shell } from 'electron';
 import React from 'react';
 import { createUseStyles } from 'react-jss';
+import { connect } from 'react-redux';
 import getBeatmapInfosUrl from '../../../helpers/getBeatmapInfosUrl';
 import reqImgAssets from '../../../helpers/reqImgAssets';
 import { useAudioPlayer } from '../../../Providers/AudioPlayerProvider.bs';
@@ -9,6 +10,8 @@ import { useCurrentDownloadItem } from '../../../Providers/downloadManager/downl
 import { useDownloadQueue } from '../../../Providers/downloadManager';
 import NewButton from '../../common/newButton';
 import config from '../../../../shared/config';
+import { useDownloadHistory } from '../../../Providers/HistoryProvider';
+import { getOsuSongPath } from '../../Settings/reducer/selectors';
 
 const getThumbUrl = beatmapId => `https://b.ppy.sh/thumb/${beatmapId}.jpg`;
 
@@ -87,28 +90,45 @@ const useStyle = createUseStyles({
   },
 });
 
-const BeatmapListItem = ({ index, style, data }) => {
-  const { removeItemfromQueue = () => {}, downloadSection = false, items } = data;
-  const item = items[index];
-  const audioPlayer = useAudioPlayer();
-  const playPreview = (beatmapSetId, isPlaying, songTitle) =>
-    isPlaying ? audioPlayer.pause() : audioPlayer.setAudio(beatmapSetId, () => {}, songTitle);
+const getAudioFilePath = (songsPath, filePath) => encodeURI(`file:///${songsPath}/${filePath}`.replace(/\\/g, '/'));
 
+const BeatmapListItem = ({ index, style, data, osuSongPath }) => {
+  const { removeItemfromQueue = () => {}, items, itemMode = 'pack' || 'download' || 'library' } = data;
+  const isPackMode = itemMode === 'pack';
+  const isDownloadMode = itemMode === 'download';
+  const isLibraryMode = itemMode === 'library';
+  const item = items[index];
   const { id, title, artist } = item;
 
-  const downloadProgress = useCurrentDownloadItem(id);
-  const classes = useStyle({ downloadProgress: downloadProgress === -1 && !downloadSection ? 0.5 : downloadProgress });
+  const history = useDownloadHistory();
+  const audioPlayer = useAudioPlayer();
+  const { push, pauseResumeDownload, currentDownload, cancelDownload } = useDownloadQueue();
+  const isDownloaded = history.contains(id);
+  const audioPath =
+    osuSongPath &&
+    isDownloaded &&
+    history.history[id].audioPath &&
+    getAudioFilePath(osuSongPath, history.history[id].audioPath);
 
   const isSelected = audioPlayer.playingState.beatmapSetId === id;
   const isPlaying = audioPlayer.playingState.isPlaying && isSelected;
 
-  const { push, pauseResumeDownload, currentDownload, cancelDownload } = useDownloadQueue();
+  const playPreview = () => {
+    if (isSelected) audioPlayer.togglePlayPause();
+    else audioPlayer.setAudio(id, () => {}, `${title} - ${artist}`, audioPath || undefined);
+  };
+
+  const downloadProgress = useCurrentDownloadItem(id);
+
+  const classes = useStyle({ downloadProgress: downloadProgress === -1 && !isDownloadMode ? 0.5 : downloadProgress });
+
   const { status } = currentDownload || {};
   const isDownloading = downloadProgress >= 0;
   const isPaused = status === config.download.status.paused;
   const handleClick = () => {
-    if (downloadSection) return;
-    push(item);
+    if (isDownloadMode) return;
+    if (isPackMode) push(item);
+    if (isLibraryMode) playPreview();
   };
 
   const wrapperStyle = {
@@ -128,23 +148,23 @@ const BeatmapListItem = ({ index, style, data }) => {
             style={playIcoStyle}
             onClick={e => {
               e.stopPropagation();
-              playPreview(id, isPlaying, `${title} - ${artist}`);
+              playPreview();
             }}
           />
         </div>
         <div className={classes.title}>{title}</div>
         <div className={classes.artist}>{artist}</div>
-        {downloadSection && isDownloading && (
+        {isDownloadMode && isDownloading && (
           <NewButton iconName={isPaused ? 'Download' : 'Pause'} onClick={pauseResumeDownload} borderless />
         )}
-        {downloadSection && (
+        {isDownloadMode && (
           <NewButton
             iconName="Cancel"
             onClick={() => (isDownloading ? cancelDownload() : removeItemfromQueue(items[index].id))}
             borderless
           />
         )}
-        {!downloadSection && (
+        {isPackMode && (
           <DownloadBeatmapBtn
             beatmapSet={item}
             title="Download"
@@ -166,4 +186,7 @@ const BeatmapListItem = ({ index, style, data }) => {
   );
 };
 
-export default BeatmapListItem;
+const mapStateToProps = state => ({
+  osuSongPath: getOsuSongPath(state),
+});
+export default connect(mapStateToProps)(BeatmapListItem);