feat: new icons & add packup and empty custom icon

README.md

@@ -373,7 +373,7 @@ const customLocale = {
   },
   openText: '',
   closeText: '',
-  notContentText: '',
+  emptyText: '',
   clickToPlayText: '',
   clickToPauseText: '',
   nextTrackText: '',

__tests__/tests/__snapshots__/locale.test.js.snap

@@ -145,7 +145,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
               >
                 <span>
                   Playlists
-                   / 
+                   /
                 </span>
                 <span
                   class="audio-lists-panel-header-num"
@@ -437,7 +437,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
             "emptyLyricText": "No lyric",
             "lightThemeText": "L",
             "nextTrackText": "Next track",
-            "notContentText": "No music",
+            "emptyText": "No music",
             "openText": "Open",
             "playListsText": "Playlists",
             "playModeText": Object {
@@ -480,7 +480,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
             >
               <span>
                 Playlists
-                 / 
+                 /
               </span>
               <span
                 className="audio-lists-panel-header-num"
@@ -777,7 +777,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
               >
                 <span>
                   Playlists
-                   / 
+                   /
                 </span>
                 <span
                   class="audio-lists-panel-header-num"
@@ -937,7 +937,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
               >
                 <span>
                   播放列表
-                   / 
+                   /
                 </span>
                 <span
                   class="audio-lists-panel-header-num"
@@ -1229,7 +1229,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
             "emptyLyricText": "暂无歌词",
             "lightThemeText": "亮",
             "nextTrackText": "下一首",
-            "notContentText": "音乐播放列表为空",
+            "emptyText": "音乐播放列表为空",
             "openText": "打开",
             "playListsText": "播放列表",
             "playModeText": Object {
@@ -1272,7 +1272,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
             >
               <span>
                 播放列表
-                 / 
+                 /
               </span>
               <span
                 className="audio-lists-panel-header-num"

__tests__/tests/icon.test.js

@@ -1,7 +1,7 @@
-import React from 'react'
 import { mount } from 'enzyme'
-import ReactJkMusicPlayer from '../../src'
+import React from 'react'
 import lyric from '../../example/lyric'
+import ReactJkMusicPlayer from '../../src'
 
 const PauseIcon = () => <div>1</div>
 const PlayIcon = () => <div>1</div>
@@ -22,6 +22,8 @@ const OrderIcon = () => <div>1</div>
 const OrderLoopIcon = () => <div>1</div>
 const ShuffleIcon = () => <div>1</div>
 const LoadingIcon = () => <div>1</div>
+const PackUpPanelMobileIcon = () => <div>1</div>
+const EmptyIcon = () => <div>1</div>
 
 const createPlayer = (props) => (
   <ReactJkMusicPlayer
@@ -57,6 +59,8 @@ const createPlayer = (props) => (
       orderLoop: <OrderLoopIcon />,
       shuffle: <ShuffleIcon />,
       loading: <LoadingIcon />,
+      packUpPanelMobile: <PackUpPanelMobileIcon />,
+      empty: <EmptyIcon />,
     }}
     {...props}
   />

index.d.ts

@@ -80,7 +80,7 @@ export interface ReactJkMusicPlayerCustomLocale {
   },
   openText: string | React.ReactNode,
   closeText: string | React.ReactNode,
-  notContentText: string | React.ReactNode,
+  emptyText: string | React.ReactNode,
   clickToPlayText: string | React.ReactNode,
   clickToPauseText: string | React.ReactNode,
   nextTrackText: string | React.ReactNode,

src/components/AudioListsPanel.js

@@ -1,7 +1,6 @@
-import React, { memo } from 'react'
 import cls from 'classnames'
+import React, { memo } from 'react'
 import ReactDragListView from 'react-drag-listview/lib/ReactDragListView'
-import { NotContentIcon, ArrowDownIcon } from './Icon'
 
 const AudioListsPanel = ({
   audioLists,
@@ -49,7 +48,7 @@ const AudioListsPanel = ({
             title={locale.closeText}
             onClick={onCancel}
           >
-            {isMobile ? <ArrowDownIcon /> : icon.close}
+            {isMobile ? icon.packUp : icon.close}
           </span>
         </span>
       </h2>
@@ -121,10 +120,10 @@ const AudioListsPanel = ({
         </ReactDragListView>
       ) : (
         <>
-          <span>
-            <NotContentIcon />
+          <span>{icon.empty}</span>
+          <span className="no-data">
+            {locale.emptyText || locale.notContentText}
           </span>
-          <span className="no-data">{locale.notContentText}</span>
         </>
       )}
     </div>

src/components/Icon.js

@@ -1,31 +1,35 @@
 import React from 'react'
-import { FaPlayCircle, FaPauseCircle } from 'react-icons/fa'
+import { FaPauseCircle, FaPlayCircle } from 'react-icons/fa'
 
 export {
+  FaBook as LyricIcon,
   FaHeadphones as FaHeadphonesIcon,
   FaRegMinusSquare as FaMinusSquareOIcon,
-  FaBook as LyricIcon,
-  FaSyncAlt as ReloadIcon,
-  FaCloudDownloadAlt as DownloadIcon,
   FaSpinner as LoadIcon,
-  FaTrashAlt as DeleteIcon,
-  FaAngleDoubleDown as ArrowDownIcon,
+  FaSyncAlt as ReloadIcon,
 } from 'react-icons/fa'
-
+export { FiChevronsDown as ArrowDownIcon } from 'react-icons/fi'
 export {
-  MdVolumeUp as MdVolumeDownIcon,
-  MdVolumeMute as MdVolumeMuteIcon,
-  MdRepeatOne as LoopIcon,
+  GoMute as VolumeMuteIcon,
+  GoUnmute as VolumeUnmuteIcon,
+} from 'react-icons/go'
+export {
+  MdClose as CloseIcon,
+  MdLibraryMusic as EmptyIcon,
   MdRepeat as RepeatIcon,
+  MdRepeatOne as LoopIcon,
   MdSkipNext as NextAudioIcon,
   MdSkipPrevious as PrevAudioIcon,
   MdViewHeadline as OrderPlayIcon,
-  MdQueueMusic as PlayListsIcon,
-  MdClose as CloseIcon,
-  MdLibraryMusic as NotContentIcon,
 } from 'react-icons/md'
-
-export { TiArrowShuffle as ShufflePlayIcon } from 'react-icons/ti'
+export {
+  RiDeleteBinLine as DeleteIcon,
+  RiPlayList2Fill as PlayListsIcon,
+} from 'react-icons/ri'
+export {
+  TiArrowShuffle as ShufflePlayIcon,
+  TiDownload as DownloadIcon,
+} from 'react-icons/ti'
 
 export const AnimatePlayIcon = () => (
   <FaPlayCircle className="react-jinke-music-player-play-icon" />

src/config/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import Locale from './locale'
-import { THEME } from './theme'
 import { MODE } from './mode'
+import { THEME } from './theme'
 
 const playModePropTypes = PropTypes.oneOf([
   'order',
@@ -40,7 +40,7 @@ export default {
   toggleMiniModeText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   destroyText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   downloadText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  notContentText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  emptyText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   controllerTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   defaultPosition: PropTypes.shape({
     top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

src/index.js

@@ -18,22 +18,24 @@ import CircleProcessBar from './components/CircleProcessBar'
 import {
   AnimatePauseIcon,
   AnimatePlayIcon,
+  ArrowDownIcon,
   CloseIcon,
   DeleteIcon,
   DownloadIcon,
+  EmptyIcon,
   FaMinusSquareOIcon,
   LoadIcon,
   LoopIcon,
   LyricIcon,
-  MdVolumeDownIcon,
-  MdVolumeMuteIcon,
   NextAudioIcon,
   OrderPlayIcon,
   PlayListsIcon,
   PrevAudioIcon,
   ReloadIcon,
   RepeatIcon,
   ShufflePlayIcon,
+  VolumeMuteIcon,
+  VolumeUnmuteIcon,
 } from './components/Icon'
 import AudioPlayerMobile from './components/PlayerMobile'
 import PlayModel from './components/PlayModel'
@@ -64,21 +66,23 @@ const DEFAULT_ICON = {
   play: <AnimatePlayIcon />,
   destroy: <CloseIcon />,
   close: <CloseIcon />,
-  delete: <DeleteIcon size={20} />,
-  download: <DownloadIcon />,
+  delete: <DeleteIcon size={24} />,
+  download: <DownloadIcon size={26} />,
   toggle: <FaMinusSquareOIcon />,
   lyric: <LyricIcon />,
-  volume: <MdVolumeDownIcon />,
-  mute: <MdVolumeMuteIcon />,
+  volume: <VolumeUnmuteIcon size={26} />,
+  mute: <VolumeMuteIcon size={26} />,
   next: <NextAudioIcon />,
   prev: <PrevAudioIcon />,
   playLists: <PlayListsIcon />,
-  reload: <ReloadIcon />,
-  loop: <LoopIcon />,
-  order: <OrderPlayIcon />,
-  orderLoop: <RepeatIcon />,
-  shuffle: <ShufflePlayIcon />,
+  reload: <ReloadIcon size={22} />,
+  loop: <LoopIcon size={26} />,
+  order: <OrderPlayIcon size={26} />,
+  orderLoop: <RepeatIcon size={26} />,
+  shuffle: <ShufflePlayIcon size={26} />,
   loading: <LoadIcon />,
+  packUpPanelMobile: <ArrowDownIcon size={26} />,
+  empty: <EmptyIcon />,
 }
 
 export default class ReactJkMusicPlayer extends PureComponent {
@@ -556,11 +560,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
                           : locale.clickToPlayText
                       }
                     >
-                      {playing ? (
-                        <span>{this.iconMap.pause}</span>
-                      ) : (
-                        <span>{this.iconMap.play}</span>
-                      )}
+                      {playing ? this.iconMap.pause : this.iconMap.play}
                     </span>
                     <span
                       className="group next-audio"

src/locale/en_US.js

@@ -10,7 +10,7 @@ export default {
   },
   openText: 'Open',
   closeText: 'Close',
-  notContentText: 'No music',
+  emptyText: 'No music',
   clickToPlayText: 'Click to play',
   clickToPauseText: 'Click to pause',
   nextTrackText: 'Next track',

src/locale/zh_CN.js

@@ -10,7 +10,7 @@ export default {
   },
   openText: '打开',
   closeText: '关闭',
-  notContentText: '音乐播放列表为空',
+  emptyText: '音乐播放列表为空',
   clickToPlayText: '点击播放',
   clickToPauseText: '点击暂停',
   nextTrackText: '下一首',

src/styles/audioListsPanel.less

@@ -109,6 +109,9 @@
     }
     &.no-content {
       .center();
+      > span {
+        display: flex;
+      }
     }
     .no-data {
       margin-left: 10px;

src/styles/index.less

@@ -278,6 +278,10 @@
             cursor: pointer;
           }
 
+          .group {
+            display: flex;
+          }
+
           text-align: center;
           flex: 1;
           margin: 0 10px;
@@ -342,6 +346,7 @@
           }
 
           .sounds-icon {
+            display: flex;
             margin-right: 15px;
             flex: 1 1 auto;
           }
@@ -351,17 +356,27 @@
           }
         }
 
+        .destroy-btn {
+          svg {
+            font-size: 28px;
+          }
+        }
+
         .audio-lists-btn {
           user-select: none;
           min-width: 60px;
-          height: 23px;
+          height: 28px;
           border-radius: 40px;
           background-color: rgba(0, 0, 0, 0.3);
           padding: 0 10px;
           box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.02);
           position: relative;
           transition: color, background-color @common-animate-time;
 
+          .audio-lists-icon {
+            display: flex;
+          }
+
           > .group:hover {
             &,
             & > svg {

src/styles/playerMobile.less

@@ -198,7 +198,7 @@
     .play-btn {
       padding: 0 40px;
       svg {
-        font-size: 60px;
+        font-size: 45px;
       }
     }
     @media screen and (max-width: 320px) {
@@ -210,7 +210,7 @@
       }
       .play-btn {
         svg {
-          font-size: 50px;
+          font-size: 40px;
         }
       }
     }
@@ -231,10 +231,6 @@
         text-align: center;
         svg {
           color: @base-color;
-          font-size: 25px;
-          @media screen and (max-width: 320px) {
-            font-size: 20px;
-          }
         }
       }
     }