Merge pull request #19 from birdgg/feat/list-max-height

feat: add listMaxHeight prop

Author: SevenOutman

docs/pages/docs/api.mdx

@@ -1,16 +1,17 @@
 ## Props
 
-| Prop         | Default          | Description                                                                                                                    |
-| ------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| audio        |                  | Songs' information. Could be a single object or an array of objects                                                            |
-| audio.name   | `"Audio name"`   | Title of the song                                                                                                              |
-| audio.artist | `"Audio artist"` | Artist name of the song                                                                                                        |
-| audio.url    |                  | Url of the media source to play                                                                                                |
-| audio.cover  |                  | Url of the album cover image                                                                                                   |
-| audio.lrc    |                  | Lyrics of the song in raw LRC format                                                                                           |
-| audio.theme  |                  | Override theme color for this song. See `theme` prop for theme color explanation                                               |
-| theme        | `"#ebd0c2"`      | Theme color of the player that applies to progress bar, volume control bar and playlist marker.                                |
-| autoPlay     |                  | [See `autoplay` attribute of `<audio>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attr-autoplay) |
-| volume       | `0.7`            | Initial volume of the player.                                                                                                  |
-| initialLoop  | `"all"`          | Initial loop mode of the player                                                                                                |
-| initialOrder | `"list"`         | Initial playlist order of the player                                                                                           |
+| Prop          | Default          | Description                                                                                                                    |
+| ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| audio         |                  | Songs' information. Could be a single object or an array of objects                                                            |
+| audio.name    | `"Audio name"`   | Title of the song                                                                                                              |
+| audio.artist  | `"Audio artist"` | Artist name of the song                                                                                                        |
+| audio.url     |                  | Url of the media source to play                                                                                                |
+| audio.cover   |                  | Url of the album cover image                                                                                                   |
+| audio.lrc     |                  | Lyrics of the song in raw LRC format                                                                                           |
+| audio.theme   |                  | Override theme color for this song. See `theme` prop for theme color explanation                                               |
+| theme         | `"#ebd0c2"`      | Theme color of the player that applies to progress bar, volume control bar and playlist marker.                                |
+| autoPlay      |                  | [See `autoplay` attribute of `<audio>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attr-autoplay) |
+| volume        | `0.7`            | Initial volume of the player.                                                                                                  |
+| initialLoop   | `"all"`          | Initial loop mode of the player                                                                                                |
+| initialOrder  | `"list"`         | Initial playlist order of the player                                                                                           |
+| listMaxHeight | `250`            | Playerlist max height                                                                                                          |

src/components/list.tsx

@@ -8,22 +8,25 @@ type PlaylistProps = {
   playingAudioUrl?: string;
   onPlayAudio?: (audio: AudioInfo) => void;
   themeColor?: string;
+  listMaxHeight?: number;
 };
 
 export function Playlist({
   open,
   audio,
   playingAudioUrl,
   onPlayAudio,
+  listMaxHeight,
   themeColor = defaultThemeColor,
 }: PlaylistProps) {
+  const olStyle = listMaxHeight ? { maxHeight: listMaxHeight } : undefined;
   return (
     <div
       className={clsx("aplayer-list", {
         "aplayer-list-hide": !open,
       })}
     >
-      <ol>
+      <ol style={olStyle}>
         {audio.map((audioInfo, index) => (
           <li
             key={index}

src/components/player.tsx

@@ -42,6 +42,11 @@ type APlayerProps = {
   initialOrder?: PlaylistOrder;
 
   autoPlay?: boolean;
+
+  /**
+   * @default 250
+   */
+  listMaxHeight?: number;
 };
 
 export function APlayer({
@@ -51,6 +56,7 @@ export function APlayer({
   initialLoop,
   initialOrder,
   autoPlay = false,
+  listMaxHeight = 250,
 }: APlayerProps) {
   const playlist = usePlaylist(Array.isArray(audio) ? audio : [audio], {
     initialLoop,
@@ -208,6 +214,7 @@ export function APlayer({
           audio={playlistAudioProp}
           playingAudioUrl={playlist.currentSong.url}
           onPlayAudio={handlePlayAudioFromList}
+          listMaxHeight={listMaxHeight}
         />
       ) : null}
     </div>