Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-jplaylist
Advanced tools
Html5 audio and video playlist library for React that implements react-jPlayer
react-jPlaylist is an add-on to react-jPlayer that provides playlist functionality and components for you to use.
https://github.com/jplayer/react-jPlayer-examples
npm install --save react-jplaylist
Same as react-jPlayer
initializeOptions(jPlayerOptions, jPlaylistOptions)
: RequiredUsed for setting up the default options for your jPlaylist. Deep merges the options that you pass in with react-jPlayer's and react-jPlaylist's default options. The result of this is used as the initial state for your jPlaylist.
Arguments
jPlayerOptions
(object): The jPlayer options to specify for your jPlaylist.jPlaylistOptions
(object): The jPlaylist options to specify for your jPlaylist.reducer()
: RequiredThe jPlaylist reducer that will be called whenever a jPlaylist function is dispatched. Must be passed to your store with the key named 'jPlaylists'.
All of the actions need to be dispatched using Reduxes dispatch
function as you normally do with actions.
setOption(id, key, value)
Sets any jPlaylist option.
Arguments
id
(string): Id of the jPlaylist to apply this to.key
(string): The name of the option that you want to set. Specifying nested keys is not supported.value
(any): The value to set the option to.setPlaylist(id, playlist)
Sets the playlist of the jPlaylist. You don't need to use this on jPlaylist load because this method is automatically called internally on componentDidMount
with the playlist you supplied in options.playlist.
Arguments
id
(string): Id of the jPlaylist to apply this to.playlist
(array: objects): The new playlist which will be set to your jPlaylist.add(id, media, playNow?)
Adds the media to the end of the playlist.
Arguments
id
(string): Id of the jPlaylist to apply this to.media
(object): The media to be added to your playlist.playNow
(bool): Optionally play the media as soon as it's added.remove(id, index)
Removes the media from the playlist at the specified index.
Arguments
id
(string): Id of the jPlaylist to apply this to.index
(number): The index of the playlist array with which to remove.clear(id)
Clears the playlist array and resets some jPlaylist values back to default.
Arguments
id
(string): Id of the jPlaylist to apply this to.play(id, index?)
Plays the jPlaylist. If no index is supplied then it plays the current media.
Arguments
id
(string): Id of the jPlaylist to apply this to.index
(number): Optionally play the media at the supplied index.shuffle(id, shuffled?, playNow?)
Shuffles the playlist.
Arguments
id
(string): Id of the jPlaylist to apply this to.shuffled
(bool): Toggles shuffled setting if no param is given. True always shuffles the playlist. False will un-shuffle if it was shuffled.playNow
(bool): Optionally play the media as soon as it's shuffled.next(id)
Plays the next media item in the playlist.
Arguments
id
(string): Id of the jPlaylist to apply this to.previous(id)
Plays the previous media item in the playlist.
Arguments
id
(string): Id of the jPlaylist to apply this to.Properties in this object are used to initialize the jPlaylist. They are deep merged with the default jPlaylist options.
playlist
(array: objects) : RequiredjPlaylist will load the playlist from this option on load automatically. Each object within the array should be the same as react-jPlayer's media schema but also must include an id that can be a string or a number.
E.g.
media: { { id: 0, // react jPlayer media options here... } }
id
needs to be a number or a string.
loopOnPrevious
(bool)Default: true
The playlist will loop back to the end when calling previous()
.
shuffleOnLoop
(bool)Default: true
If loop is 'loop-playlist' and shuffled is true, the playlist will shuffle when calling next()
on the last item.
loop
(string)Default: "loop-playlist"
There are three settings which jPlaylist recognizes for loop:
next()
is called.next()
on the last item.hidePlaylist
(bool)Default: false
Hides or shows the playlist. Used internally with the TogglePlaylist
component.
JPlaylist
: Requiredprops
children
(element) : Required: Must be the JPlayer component.id
(string) : Required: Must be the same as the one you supplied to the jPlayer options.keyBindings
(object): Specifies the keyBindings to be applied when that key is pressed. Deep merges these props with the jPlaylist's default keyBindings.
See react-jPlayer's keyBindings for more information.Default:
keyBindings: {
next: {
key: 221, // ]
fn: () => dispatch(next(id)),
},
previous: {
key: 219, // [
fn: () => dispatch(previous(id)),
},
shuffle: {
key: 83, // s
fn: () => dispatch(shuffle(id, undefined, true)),
},
loop: {
key: 76, // l
fn: () => {
const loop = getLoopState(stateProps.loop);
dispatch(setOption(id, 'loop', loop));
},
},
}
This component needs to wrap the JPlayer component
Playlist
props
children
(node) : RequiredAny component that is a child of this component will be duplicated x number of times where x is the size of your playlist.
Remove
props
children
(node) : RequiredDefault: ×
Should be nested as a child of the Playlist
component. Renders the remove controls for each media in your playlist.
MediaLink
props
children
(node) : RequiredShould be nested as a child of the Playlist
component. Renders the media links for the playlist and allows the user to select other media's in your playlist.
Title
Default: media.artist
- media.title
Should be nested as a child of the Playlist
component. Renders the artist and title of the current media.
Poster
Should be nested as a child of the Playlist
component. Renders the poster of the current media.
TogglePlaylist
props
children
(node) : RequiredUsed in conjunction with the hidePlaylist
property. Toggles the visiblity of the playlist onClick
.
Previous
props
children
(node) : RequiredonClick
calls the previous
action internally and sets the media to the previous item.
Next
props
children
(node) : RequiredonClick
calls the next
action internally and sets the media to the next item.
Shuffle
props
children
(node) : RequiredonClick
calls the shuffle
action internally and shuffles the media.
Repeat
props
children
(node) : RequiredonClick
calls the setOption
action internally and sets the loop to the next state, i.e. if loop is currently 'off" then clicking on this component will set the loop state to 'loop'.
FAQs
Html5 audio and video playlist library for React that implements react-jPlayer
The npm package react-jplaylist receives a total of 23 weekly downloads. As such, react-jplaylist popularity was classified as not popular.
We found that react-jplaylist demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.