Flexible Playlist Controller For React – ListPlayer

ListPlayer is a React component that provides a user interface to control playback of a list of media items.

It is fully responsive, and will, by default, adapt to the size of its container element. It also comes with several built-in sizes that the component can “snap” to or smoothly switched between.

How to use it:

1. Install and import the react-playlist-player component.

# NPM
$ npm install bouzidanas/react-playlist-player}
import { useState } from 'react';
import { ListPlayer } from './ListPlayer'
import { ListPlayerContext } from './ListPlayerContext';}

2. Use the component in your app.

/* List info
{
  type: 'playlist',
  name: 'Liked Songs',
  creationDate: "12/12/2020",
  numTracks: 10,
  duration: "30 min",
  imageSrc: "https://res.cloudinary.com/dqriqmsdk/image/upload/v1704626899/bird-berry.%7E.e1a90b8aa388f4da20db23617643eda5.jpg"
}
*/
const myListInfo = {}; 
/* Tracks here
[
  {
    title: [
      {
        type: 'text',
        content: 'Sos',
        className: 'title'
      },
      {
        type: 'badge',
        content: 'New',
        className: 'new'
      }
    ],
    artist: [
      {
        type: 'text',
        content: 'Timothy Fleet',
        className: 'artist',
        link: 'https://music.youtube.com/channel/UCmGqnW6VmhOV4KW67vhzPCA'
      },
      {
        type: 'text',
        content: '&',
        className: 'artist'
      },
      {
        type: 'text',
        content: 'Wayne Murray and company',
        className: 'artist',
        link: 'https://music.youtube.com/channel/UCkZXltuX3Rta9OiD-O505xg'
      }
    ],
    album: [
      {
        type: 'text',
        content: 'Vintage Radio: 1980s',
        className: 'album'
      },
      {
        type: 'badge',
        content: 'Explicit',
        className: 'explicit'
      }
    ],
    duration: "2:37"
  },
]
*/
const myTracks = [...]; 
function App() {
  const [selectedTrack, setSelectedTrack] = useState(-1);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isMuted, setIsMuted] = useState(false); 
  return (
    <ListPlayerContext.Provider value={{selectedTrack, setSelectedTrack, isPlaying, setIsPlaying, isMuted, setIsMuted}}>
      <div className='container-for-sizing-player'>
        <ListPlayer 
          tracks={testTracks} 
          listInfo={testListInfo}
        />
      </div>
    </ListPlayerContext.Provider>
  )
}

Preview:

Flexible Playlist Controller For React

Download Details:

Author: bouzidanas

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/bouzidanas/react-playlist-player

License: MIT

Add Comment