Merge pull request #78 from lovegaoshi/dev-noxplayer

chore: code lint

.eslintignore

@@ -2,6 +2,6 @@ build/
 build/*.js
 dist/
 node_modules/
-azusa-player-mobile"/
+src/azusa-player-mobile/
 .snapshots/
 *.min.js

.eslintrc.js

@@ -70,7 +70,6 @@ module.exports = {
     'operator-linebreak': 'off',
     'max-len': 'off',
     'no-underscore-dangle': 'off',
-    'no-unused-vars': 'warn',
     'react/jsx-filename-extension': [
       1,
       {
@@ -82,39 +81,21 @@ module.exports = {
     'react/jsx-one-expression-per-line': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/no-unescaped-entities': 'off',
-    // no.
-    'arrow-body-style': 'off',
-    // no.
-    'no-plusplus': 'off',
-    // no.
-    'no-undef': 'off',
-    // no.
-    'no-restricted-syntax': 'off',
-    // no.
-    'consistent-return': 'off',
-    // no.
-    radix: 'off',
-    // && and ||? maybe. math operators? no. learn math.
-    'no-mixed-operators': 'off',
     // i dont do this, but one line arrow functions interpreted I'm returning even though i dont use return.
     'no-return-assign': 'off',
-    // no. just no.
-    'no-continue': 'off',
-    // no. just no.
-    'no-return-await': 'off',
-    // no.
     'no-param-reassign': 'off',
+    'consistent-return': 'off',
     // i use <<.
     'no-bitwise': 'off',
     // for the convenience to work with stupid async chrome API calls.
     'no-await-in-loop': 'off',
-    // actually a feature not oversight. no.
-    'no-fallthrough': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     // no. its readable.
     'no-nested-ternary': 'off',
     'react/no-array-index-key': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/destructuring-assignment': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
   },
 };

.github/workflows/build-check.yml

@@ -41,3 +41,26 @@ jobs:
           zipFilePath: 'NoxPlayer.zip'
           crxFilePath: 'NoxPlayer.crx'
           privateKey: ${{ secrets.PEM_KEY }}
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Setup Yarn
+        uses: threeal/[email protected]
+
+      - name: Install dependencies
+        run: yarn; git submodule update --init --recursive
+
+      - name: yarn ci
+        run: |
+          yarn ci:format
+          yarn ci:lint

.prettierignore

@@ -0,0 +1 @@
+src/azusa-player-mobile

package.json

@@ -9,8 +9,11 @@
     "start": "webpack serve --env dev",
     "watch": "webpack --env devBuild --watch",
     "dev": "python ./scripts/moveFFMpeg.py && webpack --env devBuild && python ./scripts/moveFFMpeg.py --build",
-    "build": "webpack --env prod && cp node_modules/@ffmpeg/core/dist/umd/ffmpeg-core.js build/js/ffmpeg-core.js && cp node_modules/@ffmpeg/core/dist/umd/ffmpeg-core.wasm build/js/ffmpeg-core.wasm",
+    "build": "webpack --env prod && python ./scripts/moveFFMpeg.py --prod",
     "dep": "git submodule update --remote --merge --recursive && yarn upgrade-interactive",
+    "ci:lint": "eslint src --max-warnings=0",
+    "ci:format": "prettier --check src",
+    "prettify": "prettier --write ./src",
     "compile": "tsc"
   },
   "devDependencies": {

scripts/moveFFMpeg.py

@@ -1,18 +1,24 @@
 import shutil
+import sys
 
 if __name__ == '__main__':
     import argparse
     parser = argparse.ArgumentParser()
     parser.add_argument('--build', action='store_true', default=False)
+    parser.add_argument('--prod', action='store_true', default=False)
     args = parser.parse_args()
+    if args.prod:
+        shutil.copy('node_modules/@ffmpeg/core/dist/umd/ffmpeg-core.js',
+                    'build/js/ffmpeg-core.js')
+        shutil.copy('node_modules/@ffmpeg/core/dist/umd/ffmpeg-core.wasm',
+                    'build/js/ffmpeg-core.wasm')
+        sys.exit()
     if args.build:
         shutil.move('ffmpeg-core.js', 'build/js/ffmpeg-core.js')
         shutil.move('ffmpeg-core.wasm', 'build/js/ffmpeg-core.wasm')
-        shutil.move('ffmpeg-core.worker.js', 'build/js/ffmpeg-core.worker.js')
     else:
         try:
             shutil.move('build/js/ffmpeg-core.js', 'ffmpeg-core.js')
             shutil.move('build/js/ffmpeg-core.wasm', 'ffmpeg-core.wasm')
-            shutil.move('build/js/ffmpeg-core.worker.js', 'ffmpeg-core.worker.js')
         except:
-            pass
+            pass

src/components/App/App.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import ReactJkMusicPlayer from 'react-jinke-music-player';
 import '../../css/react-jinke-player.css';
 import { useHotkeys } from 'react-hotkeys-hook';

src/components/Playlist/PlaylistHeader/PlaylistSelectButton.tsx

@@ -24,7 +24,7 @@ interface Props {
   usePlaylist: UsePlaylist;
 }
 
-export default function ({ usePlaylist }: Props) {
+export default function PlaylistSelectBtn({ usePlaylist }: Props) {
   const onClick = () => {
     if (usePlaylist.checking) {
       usePlaylist.resetSelected();

src/components/Playlist/PlaylistHeader/PlaylistSortButton.tsx

@@ -18,7 +18,7 @@ interface Props {
   playlist: NoxMedia.Playlist;
 }
 
-export default function ({ sortPlaylist, playlist }: Props) {
+export default function PlaylistSortButton({ sortPlaylist, playlist }: Props) {
   const [showDialog, setShowDialog] = React.useState(false);
   const [ascending, setAscending] = React.useState(false);
   const sortOptions = Object.values(SortOptions);

src/components/Playlist/PlaylistHeader/RandomGIF.tsx

@@ -13,7 +13,7 @@ const getRandomNumberExclude = (randRange: number, exclude = -1) => {
 };
 
 interface randomGIFProps {
-  gifs: Array<string>;
+  gifs: string[];
   playlist: string;
   onClickCallback: () => void;
 }

src/components/Playlist/SongMenu.js

@@ -1,4 +1,4 @@
-/* eslint-disable react/jsx-no-bind */
+/* eslint-disable */
 import React from 'react';
 import { Menu, Item, Separator, useContextMenu } from 'react-contexify';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';

src/components/Playlist/hooks/usePlaylistPaginated.ts

@@ -69,8 +69,9 @@ export default (playlist: NoxMedia.Playlist): UsePlaylistP => {
     resetToFirstPage = false,
     songList = getCurrentRow(),
   ) => {
-    for (let i = 0, n = songList.length; i < n; i++) {
-      if (songList[i]!.id === currentPlayingId) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const [i, v] of songList.entries()) {
+      if (v.id === currentPlayingId) {
         return setPage(Math.floor(i / defaultRowsPerPage));
       }
     }

src/components/Playlists/Playlists.tsx

@@ -8,7 +8,7 @@ import Search from './PlaylistsHeader/Search';
 import PlaylistHeaderButtons from './PlaylistsHeader/PlaylistHeaderButtons';
 import PlaylistList from './PlaylistsList/PlaylistList';
 
-export default function () {
+export default function Playlists() {
   const playlistCRUD = usePlaylistCRUD();
   const { colorTheme } = useApp((state) => state.playerStyle);
   const AddFavIcon = {

src/components/Playlists/PlaylistsHeader/PlaylistHeaderButtons.tsx

@@ -11,7 +11,7 @@ interface Props {
   sx: SxProps;
   color?: string;
 }
-export default function ({ sx, color }: Props) {
+export default function PlaylistHeaderButtons({ sx, color }: Props) {
   return (
     <Grid container spacing={2}>
       <Grid item xs={4}>

src/components/Playlists/PlaylistsList/PlaylistList.tsx

@@ -47,6 +47,7 @@ export default function PlaylistList({ playlistCRUD }: Props) {
   const favoritePlaylist = useNoxSetting((state) => state.favoritePlaylist);
 
   // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const _ = useNoxSetting((state) => state.playlistShouldReRender);
   const {
     playlists,
@@ -97,7 +98,7 @@ export default function PlaylistList({ playlistCRUD }: Props) {
         )}
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId='droppable'>
-            {(provided, _snapshot) => (
+            {(provided) => (
               <div {...provided.droppableProps} ref={provided.innerRef}>
                 {playlistIds.map((item, index) => (
                   <Draggable

src/components/buttons/NewPlaylistButton.tsx

@@ -28,7 +28,7 @@ export default function newPlaylistButton({
         </IconButton>
       </Tooltip>
       <NewFavDialog
-        id={'newFavDialogID'}
+        id='newFavDialogID'
         openState={openSettingsDialog}
         onClose={(val?: string) => {
           onClosedDialogFunc(val);

src/components/dialogs/DialogContent.tsx

@@ -7,7 +7,7 @@ import { v4 as uuidv4 } from 'uuid';
  *
  * @param {*} texts
  */
-const textToDialogContent = (texts: Array<string>) => {
+const textToDialogContent = (texts: string[]) => {
   return (
     <DialogContent>
       {texts.map((val) => {

src/components/dialogs/GenericSelectDialog.tsx

@@ -13,7 +13,7 @@ import Input from '@mui/material/Input';
 
 interface Props<T> {
   visible: boolean;
-  options: Array<T>;
+  options: T[];
   renderOptionTitle?: (val: T) => string;
   selectTitle?: string;
   title?: string;

src/components/lyric/Lyric.tsx

@@ -7,8 +7,8 @@ import Grid from '@mui/material/Grid';
 import { getName } from '@APM/utils/re';
 import { useDebouncedValue } from '@APM/hooks';
 import useApp from '@stores/useApp';
-import LyricSearchBar from './LyricSearchBar';
 import useLyric from '@hooks/useLyric';
+import LyricSearchBar from './LyricSearchBar';
 
 const styles = () => ({
   inputOffset: {
@@ -44,7 +44,7 @@ interface LrcViewProps {
   className: string;
 }
 
-const LrcView = ({ lyricOffset, lrc, className }: LrcViewProps) => {
+function LrcView({ lyricOffset, lrc, className }: LrcViewProps) {
   const currentProgress = useApp((state) => state.currentProgress);
   const { colorTheme } = useApp((state) => state.playerStyle);
 
@@ -79,7 +79,7 @@ const LrcView = ({ lyricOffset, lrc, className }: LrcViewProps) => {
       recoverAutoScrollInterval={5000}
     />
   );
-};
+}
 
 export default withStyles(styles)((props: Props) => {
   const { colorTheme, ScrollBar } = useApp((state) => state.playerStyle);

src/components/lyric/LyricSearchBar.tsx

@@ -14,7 +14,7 @@ export default function LyricSearchBar({ currentAudio, usedLyric }: Props) {
     initTrackLrcLoad();
   }, [currentAudio]);
 
-  const onOptionSet = (_: any, newValue?: NoxNetwork.NoxFetchedLyric) => {
+  const onOptionSet = (_: any, newValue?: NoxLyric.NoxFetchedLyric) => {
     if (newValue === undefined) return;
     searchAndSetCurrentLyric(0, [newValue]);
   };

src/components/menus/DummyMenu.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { Menu, Item, useContextMenu } from 'react-contexify';
 import TerminalIcon from '@mui/icons-material/Terminal';

src/components/menus/PlaylistMenu.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/jsx-no-bind */
+/* eslint-disable */
 import React from 'react';
 import { Menu, Item, useContextMenu } from 'react-contexify';
 import YoutubeSearchedForIcon from '@mui/icons-material/YoutubeSearchedFor';

src/components/setting/sync/DropboxAuth.ts

@@ -37,7 +37,8 @@ let dbx = new _Dropbox({
  * @param {function} errorHandling
  */
 const getAuth = async (
-  callback = (_v?: string) => checkAuthentication(dbx).then(console.debug),
+  callback: (v: string) => Promise<void> = () =>
+    checkAuthentication(dbx).then(console.debug),
   errorHandling = console.error,
 ) =>
   chrome.identity.launchWebAuthFlow(
@@ -62,7 +63,7 @@ const getAuth = async (
   );
 
 const loginDropbox = async (
-  callback = async (_v?: string) => {},
+  callback: () => Promise<void> = async () => {},
   errorCallback = console.error,
 ) => {
   try {

src/components/setting/sync/GenericSyncButton.tsx

@@ -32,7 +32,7 @@ function ImportSyncFavButton({
   sx,
 }: ImportPropsR) {
   // @ts-ignore
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+  const { enqueueSnackbar } = useSnackbar();
   const [loading, setLoading] = useState(false);
 
   const errorHandling = (
@@ -82,7 +82,7 @@ function ImportSyncFavButton({
 
 function ExportSyncFavButton({ noxBackup, login, sx }: ExportPropsR) {
   // @ts-ignore
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+  const { enqueueSnackbar } = useSnackbar();
   const [loading, setLoading] = useState(false);
 
   const errorHandling = (e: Error) => {
@@ -127,7 +127,7 @@ function ExportSyncFavButton({ noxBackup, login, sx }: ExportPropsR) {
   );
 }
 
-export default function ({
+export default function GenericSyncBtn({
   restoreFromUint8Array,
   login,
   noxBackup,

src/components/setting/sync/GiteeAuth.ts

@@ -12,7 +12,7 @@ const clientSecret = process.env.GITEE_SECRET;
 const redirectURI = chrome.identity.getRedirectURL();
 
 export const getAuth = async (
-  callback = (_v?: string) =>
+  callback: (v: string) => Promise<void> = () =>
     checkAuthentication(authToken).then(console.debug),
   errorHandling = logger.error,
 ) =>

src/components/setting/sync/GithubAuth.ts

@@ -12,7 +12,7 @@ const clientSecret = process.env.GITHUB_SECRET;
 const redirectURI = chrome.identity.getRedirectURL();
 
 export const getAuth = async (
-  callback = (_v?: string) =>
+  callback: (v: string) => Promise<void> = () =>
     checkAuthentication(authToken).then(console.debug),
   errorHandling = logger.error,
 ) =>

src/components/setting/sync/LocalSyncButton.tsx

@@ -17,11 +17,9 @@ export function ExportFavButton({ AddFavIcon }: SyncFavButtonProps) {
   // alls sync buttons are loaded/unloaded depending on the current sync setting;
   // thus they all must have exactly the same states for react to mount and unmount to another set.
   // even though they are not used.
-  // @ts-ignore
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
-  // @ts-ignore
-  const dummy = enqueueSnackbar;
-  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { enqueueSnackbar } = useSnackbar();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [loading, setLoading] = useState(false);
   return (
     <Tooltip title='导入歌单'>
@@ -36,11 +34,9 @@ export function ExportFavButton({ AddFavIcon }: SyncFavButtonProps) {
 }
 
 export function ImportFavButton({ AddFavIcon }: SyncFavButtonProps) {
-  // @ts-ignore
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
-  // @ts-ignore
-  const dummy = enqueueSnackbar;
-  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { enqueueSnackbar } = useSnackbar();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [loading, setLoading] = useState(false);
   return (
     <Tooltip title='导出歌单'>