Merge pull request #54 from lovegaoshi/dev-noxplayer

Dev noxplayer

.eslintrc.js

@@ -18,12 +18,18 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'prettier'],
+  plugins: ['react', '@typescript-eslint', 'prettier', 'import'],
   settings: {
     react: {
       version: 'detect',
     },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
     'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+      },
       alias: {
         map: [
           ['@utils', './src/utils'],

package.json

@@ -36,8 +36,9 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-import-resolver-webpack": "^0.13.8",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.32.2",

src/components/Playlist/PlaylistHeader/PlaylistSortButton.tsx

@@ -6,7 +6,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import FormGroup from '@mui/material/FormGroup';
 
-// eslint-disable-next-line import/no-unresolved
 import GenericSelectDialog from '@components/dialogs/GenericSelectDialog';
 import { SORT_OPTIONS } from '@enums/Playlist';
 

src/components/Playlist/SongList/SongList.tsx

@@ -12,9 +12,7 @@ import TablePagination from '@mui/material/TablePagination';
 
 import { zhCN } from '@mui/material/locale';
 
-// eslint-disable-next-line import/no-unresolved
 import SongRenameDialog from '@components/dialogs/SongRenameDialog';
-// eslint-disable-next-line import/no-unresolved
 import { AddFavDialog } from '@components/dialogs/AddFavDialog';
 import { useNoxSetting } from '@APM/stores/useApp';
 import usePlaylistCRUD from '@hooks/usePlaylistCRUD';

src/components/Playlists/PlaylistsHeader/HelpDialog.tsx

@@ -11,7 +11,6 @@ import ForumIcon from '@mui/icons-material/Forum';
 import InfoIcon from '@mui/icons-material/Info';
 import { useConfirm } from 'material-ui-confirm';
 
-// eslint-disable-next-line import/no-unresolved
 import textToDialogContent from '@components/dialogs/DialogContent';
 // @ts-ignore
 import changelogTxt from '../../../../changelog.txt';

src/components/Playlists/PlaylistsHeader/PlaylistHeaderButtons.tsx

@@ -3,7 +3,6 @@ import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 import { SxProps } from '@mui/material';
 
-// eslint-disable-next-line import/no-unresolved
 import PlayerSettingsButton from '@components/setting/PlayerSetttingsButton';
 import HelpPanelButton from './HelpPanelButton';
 import ShuffleAllButton from './ShuffleAllButton';

src/components/Playlists/PlaylistsList/PlaylistInfo.tsx

@@ -5,9 +5,11 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import AlbumOutlinedIcon from '@mui/icons-material/AlbumOutlined';
 import ManageSearchIcon from '@mui/icons-material/ManageSearch';
+import MusicNoteIcon from '@mui/icons-material/MusicNote';
+import PlayCircleIcon from '@mui/icons-material/PlayCircle';
 import { contextMenu } from 'react-contexify';
 
-import useApp from '@stores/useApp';
+import useApp, { useNoxSetting } from '@stores/useApp';
 import AddToPlaylistButton from './ButtonAddToPlaylist';
 import DeletePlaylistButton from './ButtonDeletePlaylist';
 import PlayPlaylistButton from './ButtonPlayPlaylist';
@@ -34,10 +36,17 @@ export function PlaylistInfo({
   const { CRUDBtn, CRUDIcon, DiskIcon, outerLayerBtn } = useApp(
     (state) => state.playerStyle,
   );
+  const currentPlayingList = useNoxSetting((state) => state.currentPlayingList);
+  const currentPlayList = useNoxSetting((state) => state.currentPlaylist);
+  const currentPlaying = currentPlayingList?.id === playlist.id;
+  const currentSelected = currentPlayList?.id === playlist.id;
+
   return (
     <React.Fragment key={key2}>
       <ListItemButton
         disableRipple
+        // TODO: some sorta color determination
+        // sx={[outerLayerBtn, { backgroundColor: current ? 'green' : undefined }]}
         sx={outerLayerBtn}
         onContextMenu={(event) => {
           event.preventDefault();
@@ -56,7 +65,13 @@ export function PlaylistInfo({
           id={playlist.id}
         >
           <ListItemIcon sx={DiskIcon}>
-            <AlbumOutlinedIcon />
+            {currentPlaying ? (
+              <PlayCircleIcon />
+            ) : currentSelected ? (
+              <MusicNoteIcon />
+            ) : (
+              <AlbumOutlinedIcon />
+            )}
           </ListItemIcon>
           <ListItemText
             primaryTypographyProps={{ fontSize: '1.1em' }}

src/components/Playlists/PlaylistsList/PlaylistList.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-beautiful-dnd';
 
 import { useNoxSetting } from '@APM/stores/useApp';
-// eslint-disable-next-line import/no-unresolved
 import { AddFavDialog, NewFavDialog } from '@components/dialogs/AddFavDialog';
 import useApp from '@stores/useApp';
 import usePlayback from '@hooks/usePlayback';
@@ -47,6 +46,7 @@ export default function PlaylistList({ playlistCRUD }: Props) {
   const { colorTheme, ScrollBar } = useApp((state) => state.playerStyle);
   const { onPlayAllFromFav } = usePlayback({});
   const favoritePlaylist = useNoxSetting((state) => state.favoritePlaylist);
+
   const playlistShouldReRender = useNoxSetting(
     (state) => state.playlistShouldReRender,
   );
@@ -60,7 +60,6 @@ export default function PlaylistList({ playlistCRUD }: Props) {
     setOpenNewDialog,
     openAddDialog,
     actionFavId,
-    actionFavSong,
 
     onNewFav,
     handleDeleteFavClick,

src/components/dialogs/AddFavDialog.tsx

@@ -6,7 +6,6 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 
-// eslint-disable-next-line import/no-unresolved
 import GenericSelectDialog from '@components/dialogs/GenericSelectDialog';
 import { useNoxSetting } from '@APM/stores/useApp';
 

src/components/lyric/Lyric.js

@@ -6,6 +6,7 @@ import { withStyles } from '@mui/styles';
 import Grid from '@mui/material/Grid';
 
 import { useNoxSetting } from '@APM/stores/useApp';
+import { useDebouncedValue } from '@APM/hooks';
 import useApp from '@stores/useApp';
 import LyricSearchBar from './LyricSearchBar';
 
@@ -32,6 +33,7 @@ export default withStyles(styles)((props) => {
   const [lyricOffset, setLyricOffset] = useState(0);
   const [lyric, setLyric] = useState('');
   const [songTitle, setSongTitle] = useState('');
+  const debouncedSongTitle = useDebouncedValue(songTitle, 1000);
 
   const { classes, currentTime, audioName, audioId, audioCover } = props;
 
@@ -195,7 +197,7 @@ export default withStyles(styles)((props) => {
             xs={12}
           >
             <LyricSearchBar
-              SearchKey={songTitle}
+              SearchKey={debouncedSongTitle}
               songId={String(audioId)}
               setLyricOffset={setLyricOffset}
               setLyric={onSongTitleChange}

src/hooks/usePlayback.ts

@@ -6,7 +6,6 @@ import { useNoxSetting } from '@APM/stores/useApp';
 import useApp from '@stores/useApp';
 import versionUpdate from '@utils/versionupdater/versionupdater';
 import { parseSongList } from '@objects/Playlist';
-// eslint-disable-next-line import/no-unresolved
 import renderExtendsContent from '@components/App/ExtendContent';
 import r128gain from '../utils/ffmpeg/r128util';
 import {

src/hooks/usePlaylistCRUD.ts

@@ -6,7 +6,6 @@ import { DropResult } from 'react-beautiful-dnd';
 import { useNoxSetting } from '@APM/stores/useApp';
 import { dummyPlaylist } from '@APM/objects/Playlist';
 import usePlaylistCRUD from '@APM/hooks/usePlaylistCRUD';
-// eslint-disable-next-line import/no-unresolved
 import textToDialogContent from '@components/dialogs/DialogContent';
 import { updateSubscribeFavList as updateSubscribeFavListRaw } from '@APM/utils/BiliSubscribe';
 import { reorder } from '@APM/utils/Utils';

src/popup/App.tsx

@@ -6,6 +6,7 @@ import { SnackbarProvider } from 'notistack';
 
 import useTimer from '@hooks/useTimer';
 import useApp from '@stores/useApp';
+import { RESOLVE_TYPE } from '@APM/utils/mediafetch/mainbackgroundfetch';
 import useInitializeStore from '../stores/useInitializeStore';
 
 const Player = React.lazy(() => import('../components/App/App'));
@@ -16,7 +17,8 @@ export default function App() {
   const { initializeStores } = useInitializeStore();
   const playerStyle = useApp((state) => state.playerStyle);
   const theme = createTheme(playerStyle.colorTheme.palette);
-  const [backgroundSrc, setBackgroundSrc] = React.useState<string>();
+  const [backgroundSrc, setBackgroundSrc] =
+    React.useState<NoxTheme.backgroundImage>();
   // eslint-disable-next-line no-unused-vars
   const timer = useTimer();
 
@@ -45,14 +47,14 @@ export default function App() {
         <SnackbarProvider maxSnack={1}>
           <ConfirmProvider>
             <div className='container-fluid homepage-bgimage'>
-              {playerStyle.playerBackgroundVideo ? (
+              {backgroundSrc?.type === RESOLVE_TYPE.video ? (
                 <video
                   id='player-bkgrd'
                   autoPlay
                   loop
                   muted
                   className='homepage-bgimage'
-                  src={backgroundSrc}
+                  src={backgroundSrc?.identifier}
                   height={window.innerHeight}
                   width={window.innerWidth}
                 />
@@ -61,21 +63,21 @@ export default function App() {
                   id='player-bkgrd'
                   alt=''
                   className='homepage-bgimage'
-                  src={backgroundSrc}
+                  src={backgroundSrc?.identifier}
                   height={window.innerHeight}
                   width={window.innerWidth}
                 />
               )}
             </div>
             <Box
-              sx={OutmostBox}
+              sx={style.OutmostBox}
               id='master-box'
               style={{
                 backgroundColor: playerStyle.colorTheme.PCBackgroundColor,
                 backgroundBlendMode: 'overlay',
               }}
             >
-              <Box sx={PlayerBox}>
+              <Box sx={style.PlayerBox}>
                 <Player songList={currentSongList} />
               </Box>
             </Box>
@@ -86,22 +88,24 @@ export default function App() {
   );
 }
 
-const OutmostBox = {
-  width: '100vw',
-  height: '95vh',
-  color: '#1234',
-  '& > .MuiBox-root > .MuiBox-root': {
-    p: 1,
+const style = {
+  OutmostBox: {
+    width: '100vw',
+    height: '95vh',
+    color: '#1234',
+    '& > .MuiBox-root > .MuiBox-root': {
+      p: 1,
+    },
   },
-};
-const PlayerBox = {
-  height: '100vh',
-  maxHeight: '100%',
-  display: 'grid',
-  gridTemplateColumns: 'repeat(4, 1fr)',
-  gap: 0,
-  gridTemplateRows: '72px 1fr',
-  gridTemplateAreas: `"Lrc         Lrc      Lrc      search"
+  PlayerBox: {
+    height: '100vh',
+    maxHeight: '100%',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)',
+    gap: 0,
+    gridTemplateRows: '72px 1fr',
+    gridTemplateAreas: `"Lrc         Lrc      Lrc      search"
                         "Lrc         Lrc      Lrc      sidebar"
                         "footer      footer   footer   footer"`,
+  },
 };

src/styles/skins/amelia.ts

@@ -1,28 +1,15 @@
 import NoxTheme from './nox';
-import skinTemplate, { randomChoice } from './template';
+import skinTemplate from './template';
 import APMSkins from './APMSkins';
 
-const { gifs } = APMSkins['阿梅播放器']!;
+const { gifs, backgroundImagesLandscape } = APMSkins['阿梅播放器']!;
 export default () =>
   skinTemplate({
     playerBanner:
       'https://raw.githubusercontent.com/lovegaoshi/azusa-player/nox-player/public/img/Amelia/AmeliaBanner.png',
-    playerBannerMobile: async () =>
-      new Promise<string>((resolve) => {
-        resolve(
-          'https://steamuserimages-a.akamaihd.net/ugc/1652223957177225502/6F39E40090B7202E4DD4D58876D58E233C5BBC4E/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false',
-        );
-      }),
-    // playerBackground: async () => new Promise<string>((resolve) => { resolve('https://cdn.donmai.us/original/f5/cd/__watson_amelia_bubba_and_smol_ame_hololive_and_1_more_drawn_by_ro_g_oowack__f5cd65a11ff91b10f52aba05f46aa5e0.jpg'); }),
-    playerBackground: async () =>
-      new Promise<string>((resolve) => {
-        resolve(
-          'https://rare-gallery.com/livewalls/imgpreview/143356-gawr-gura-and-amelia-watson-vibing-near-a-campfire.mp4',
-        );
-      }),
-    playerBackgroundVideo: true,
+    playerBackground: backgroundImagesLandscape!,
+
     gifs,
-    gifIcon: () => randomChoice(gifs) as string,
     appTitle: 'Amelia-player',
     colorTheme: NoxTheme().colorTheme,
     reactJKPlayerTheme: NoxTheme().reactJKPlayerTheme,

src/styles/skins/aria.ts

@@ -1,19 +1,16 @@
-import { fetchVideoPlayUrl } from '@APM/utils/mediafetch/bilivideo';
 import PomeloTheme from './pomelo';
-import skinTemplate, { randomChoice } from './template';
+import skinTemplate from './template';
 import APMSkins from './APMSkins';
 
-const { gifs } = APMSkins['塞克西废墟']!;
+const { gifs, backgroundImagesLandscape } = APMSkins['塞克西废墟']!;
 
 export default () =>
   skinTemplate({
     playerBanner: PomeloTheme().playerBanner,
-    playerBannerMobile: PomeloTheme().playerBannerMobile,
     // playerBackground: async () => new Promise<string>((resolve) => { resolve('https://cdn.donmai.us/original/f5/cd/__watson_amelia_bubba_and_smol_ame_hololive_and_1_more_drawn_by_ro_g_oowack__f5cd65a11ff91b10f52aba05f46aa5e0.jpg'); }),
-    playerBackground: () => fetchVideoPlayUrl('BV1VM411q7j6'),
+    playerBackground: backgroundImagesLandscape,
     playerBackgroundVideo: true,
     gifs,
-    gifIcon: () => randomChoice(gifs) as string,
     appTitle: '电鱼播放器',
     desktopTheme: 'light',
     colorTheme: PomeloTheme().colorTheme,

src/styles/skins/atom.ts

@@ -1,26 +1,18 @@
-import skinTemplate, { randomChoice } from './template';
+import skinTemplate from './template';
 import APMSkins from './APMSkins';
 
-const { gifs } = APMSkins['录音姬阿童木']!;
+const { gifs, backgroundImagesLandscape } = APMSkins['录音姬阿童木']!;
 
 export default () =>
   skinTemplate({
     playerBanner:
       'https://i0.hdslb.com/bfs/new_dyn/a6055de12310f55ac6590a86bd4008365053504.png',
     playerBannerMobile: async () =>
-      new Promise<string>((resolve) => {
-        resolve(
-          'https://cdn.donmai.us/original/ea/ec/__nox_nijisanji_and_3_more_drawn_by_netural__eaec50f6d554b731ffe4fcace255d0bd.png',
-        );
-      }),
-    playerBackground: async () =>
-      new Promise<string>((resolve) => {
-        resolve(
-          'http://i0.hdslb.com/bfs/live/room_bg/1428a93e4a983a7a6e7ba3dc62b064e403fc8354.png',
-        );
-      }),
+      'https://cdn.donmai.us/original/ea/ec/__nox_nijisanji_and_3_more_drawn_by_netural__eaec50f6d554b731ffe4fcace255d0bd.png',
+
+    playerBackground: backgroundImagesLandscape,
+
     gifs,
-    gifIcon: () => randomChoice(gifs) as string,
     appTitle: 'Nox-player',
     colorTheme: {
       /**