Merge pull request #36 from Pithaya/develop

Update better local files, fixes and refactor

.eslintignore

@@ -1,3 +1,2 @@
-spicetify.d.ts
 dist
-node_modules
+node_modules

.eslintrc.json

@@ -18,7 +18,25 @@
             "version": "17.0.2"
         }
     },
+    "ignorePatterns": ["**/*.d.ts"],
     "rules": {
-        "@typescript-eslint/strict-boolean-expressions": "false"
+        "@typescript-eslint/strict-boolean-expressions": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/array-type": ["error", { "default": "array" }],
+        "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+        "@typescript-eslint/dot-notation": [
+            "error",
+            { "allowIndexSignaturePropertyAccess": true }
+        ],
+        "react/jsx-no-undef": "off",
+        "@typescript-eslint/no-misused-promises": [
+            "error",
+            {
+                "checksVoidReturn": {
+                    "arguments": false,
+                    "attributes": false
+                }
+            }
+        ]
     }
 }

.gitignore

@@ -1,3 +1,2 @@
-.vscode
 node_modules
 custom-apps/*/dist

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "eslint.workingDirectories": [
+        {
+            "mode": "auto"
+        }
+    ],
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

custom-apps/better-local-files/package.json

@@ -1,24 +1,26 @@
 {
     "name": "better-local-files",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "private": true,
     "scripts": {
         "init": "npm run build && npm run apply",
         "build": "spicetify-creator",
         "build-local": "spicetify-creator --out=dist --minify",
         "watch": "spicetify-creator --watch",
-        "launch-watch": "spicetify enable-devtools && spicetify watch -le",
+        "launch-watch": "spicetify watch -a",
         "apply": "spicetify config custom_apps better-local-files && spicetify apply",
         "unapply": "spicetify config custom_apps better-local-files- && spicetify apply",
-        "lint": "npx eslint --ext .tsx,.ts src/"
+        "lint": "npx tsc --noemit && npx eslint --ext .tsx,.ts src/",
+        "format": "npx prettier --write src/"
     },
     "license": "MIT",
     "devDependencies": {
         "@types/pixelmatch": "^5.2.4",
-        "lucide-react": "^0.115.0",
+        "lucide-react": "^0.299.0",
+        "observable-hooks": "^4.2.3",
         "pixelmatch": "^5.3.0",
-        "react-markdown": "8.0.6",
-        "rxjs": "^7.8.0",
-        "spcr-whats-new": "^1.0.1"
+        "rxjs": "^7.8.1",
+        "spcr-whats-new": "^1.0.1",
+        "use-fit-text": "^2.4.0"
     }
 }

custom-apps/better-local-files/src/app.tsx

@@ -1,7 +1,6 @@
-import { getPlatform } from '@shared/utils';
+import { getPlatformApiOrThrow } from '@shared/utils/spicetify-utils';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import ReactMarkdown from 'react-markdown';
 import whatsNew from 'spcr-whats-new';
 import { version } from '../package.json';
 import { CHANGE_NOTES } from './change-notes';
@@ -12,63 +11,78 @@ import { ArtistsPage } from './components/artists/pages/artists.page';
 import { LoadingIcon } from './components/shared/icons/loading';
 import { TopBarContent } from './components/shared/top-bar/top-bar-content.component';
 import { TracksPage } from './components/tracks/pages/tracks.page';
-import { Routes, topBarItems } from './constants/constants';
+import {
+    ALBUM_ROUTE,
+    ALBUMS_ROUTE,
+    ARTIST_ROUTE,
+    ARTISTS_ROUTE,
+    topBarItems,
+    TRACKS_ROUTE,
+} from './constants/constants';
 import styles from './css/app.module.scss';
-import { useObservable } from './hooks/use-observable';
+import { useObservableEagerState } from 'observable-hooks';
+import type { History } from '@shared/platform/history';
 
-// TODO: Add automatic version checks to the extensions and custom apps + powershell update scripts
+function App(): JSX.Element {
+    const isReady = useObservableEagerState(window.localTracksService.isReady$);
 
-function App() {
-    const isReady = useObservable(
-        window.localTracksService.isReady$,
-        window.localTracksService.isReady
-    );
-
-    const processedAlbums = useObservable(
+    const processedAlbums: number = useObservableEagerState(
         window.localTracksService.processedAlbums$,
-        0
     );
-    const albumCount = useObservable(window.localTracksService.albumCount$, 0);
 
-    useEffect(() => {
-        window.localTracksService.init();
+    const albumCount: number = useObservableEagerState(
+        window.localTracksService.albumCount$,
+    );
 
-        const markdown = <ReactMarkdown children={CHANGE_NOTES} />;
+    async function init(): Promise<void> {
+        await window.localTracksService.init();
 
-        whatsNew('better-local-files', version, {
+        await whatsNew('better-local-files', version, {
             title: `New in v${version}`,
-            content: markdown,
+            content: (
+                <p>
+                    <ul>
+                        {CHANGE_NOTES.map((value) => {
+                            return <li key={value}>{value}</li>;
+                        })}
+                    </ul>
+                </p>
+            ),
             isLarge: true,
         });
+    }
+
+    useEffect(() => {
+        void init();
     }, []);
 
-    const history = getPlatform().History;
+    const history = getPlatformApiOrThrow<History>('History');
     const location = history.location;
 
     let currentPage = <></>;
 
     switch (location.pathname) {
-        case Routes.tracks:
+        case TRACKS_ROUTE:
             currentPage = <TracksPage />;
             break;
-        case Routes.album:
+        case ALBUM_ROUTE:
             currentPage = <AlbumPage />;
             break;
-        case Routes.albums:
+        case ALBUMS_ROUTE:
             currentPage = <AlbumsPage />;
             break;
-        case Routes.artist:
+        case ARTIST_ROUTE:
             currentPage = <ArtistPage />;
             break;
-        case Routes.artists:
+        case ARTISTS_ROUTE:
             currentPage = <ArtistsPage />;
             break;
         default:
-            history.replace(Routes.tracks);
+            history.replace(TRACKS_ROUTE);
     }
 
     const topBarContainer = document.querySelector(
-        '.main-topBar-topbarContentWrapper'
+        '.main-topBar-topbarContentWrapper',
     );
 
     const showTracksProgress = albumCount === 0;
@@ -79,40 +93,40 @@ function App() {
     return (
         <>
             <div className={styles['full-size-container']}>
-                <>
-                    {isReady ? (
-                        <div
-                            className={`${styles['stretch-container']} ${styles.padded}`}
-                        >
-                            {currentPage}
-                        </div>
-                    ) : (
-                        <div
-                            className={`${styles['center-container']} ${styles.padded}`}
-                        >
-                            <LoadingIcon />
-                            {showTracksProgress && <p>Processing tracks...</p>}
-                            {showAlbumsProgress && (
-                                <p>
-                                    {`Processing album ${processedAlbums} of ${albumCount}...`}
-                                </p>
-                            )}
-                        </div>
-                    )}
-                </>
+                {isReady ? (
+                    <div
+                        className={`${styles['stretch-container']} ${styles.padded}`}
+                    >
+                        {currentPage}
+                    </div>
+                ) : (
+                    <div
+                        className={`${styles['center-container']} ${styles.padded}`}
+                    >
+                        <LoadingIcon />
+                        {showTracksProgress && <p>Processing tracks...</p>}
+                        {showAlbumsProgress && (
+                            <p>
+                                {`Processing album ${processedAlbums} of ${albumCount}...`}
+                            </p>
+                        )}
+                    </div>
+                )}
             </div>
             {topBarContainer !== null &&
                 ReactDOM.createPortal(
                     <TopBarContent
-                        onItemClicked={(item) => history.push(item.href)}
+                        onItemClicked={(item) => {
+                            history.push(item.href);
+                        }}
                         items={topBarItems}
                         activeItem={
                             topBarItems.find((i) =>
-                                i.href.startsWith(location.pathname)
+                                i.href.startsWith(location.pathname),
                             ) ?? topBarItems[0]
                         }
                     />,
-                    topBarContainer
+                    topBarContainer,
                 )}
         </>
     );

custom-apps/better-local-files/src/change-notes.ts

@@ -1,4 +1,5 @@
-export const CHANGE_NOTES = `
-* New "Clear cache" option in the menu.
-* A notification will show if a new update is available.
-`;
+export const CHANGE_NOTES = [
+    'Added drag and drop to the track list and album cards',
+    'Select multiple tracks by holding the Ctrl key and clicking on the tracks',
+    'Switch between list and compact display modes',
+];