react jPlaylist

React-JplayList是React-Jplayer的一个附加组件，可提供播放列表功能和组件供您使用。

• 例子
• 安装
  • NPM
  • UMD
• 特征
• 支持的浏览器

• 文档
  • initializeOptions(jPlayerOptions, jPlaylistOptions) ：必需
  • reducer() ：必需
  • 动作
    • setOption(id, key, value)
    • setPlaylist(id, playlist)
    • add(id, media, playNow?)
    • remove(id, index)
    • clear(id)
    • play(id, index?)
    • shuffle(id, shuffled?, playNow?)
    • next(id)
    • previous(id)
  • 选项
    • playlist （数组：对象）：必需
    • loopOnPrevious （bool）
    • shuffleOnLoop （布尔）
    • loop （字符串）
    • hidePlaylist （bool）
  • 成分
    • JPlaylist ：必需
    • Playlist
    • Remove
    • MediaLink
    • Title
    • Poster
    • TogglePlaylist
    • Previous
    • Next
    • Shuffle
    • Repeat

https://githu*b.c*o*m/jplayer/reeact-jplayer-examples

npm install --save react-jplaylist

使用此软件包的推荐方法是通过NPM和WebPack。但是，如果您坚持包括.js和.css文件手动，则可以从/dist/文件夹中获得未启示和缩小的版本。该软件包的依赖项已被排除在UMD构建中，因此您需要按照React-jplayer-example的UMDPlayList中所示手动包含它们。

该模块被导出到称为ReactJPlaylist的变量。

• 与许多遗留不同的HTML5浏览器兼容
• 返回，向前，洗牌，播放列表选择，播放列表循环
• 完全自定义，模块化和组件
• 为您的玩家带来了完全恢复性的CSS皮肤

与React-Jplayer相同

用于为您的JplayList设置默认选项。 Deep将您传递的选项与React-Jplayer和React-Jplaylist的默认选项合并。结果的结果用作您的JplayList的初始状态。

争论

1. jPlayerOptions （对象）：为JplayList指定的JPLAYER选项。
2. jPlaylistOptions （对象）：为JplayList指定的JplayList选项。

每当派遣JplayList函数时，Jplaylist还原器将被称为。必须用名为“ JplayLists”的钥匙将其传递给您的商店。

所有操作都需要使用REDUXES dispatch函数来派遣，就像您在动作中一样。

设置任何JplayList选项。

争论

1. id （字符串）：将其应用于JplayList的ID。
2. key （字符串）：要设置的选项的名称。不支持指定嵌套键。
3. value （ANY）：设置选项的值。

设置Jplaylist的播放列表。您无需在JplayList load上使用此方法，因为此方法是在componentDidMount上自动调用的，其中包含您在options.playlist中提供的播放列表。

争论

1. id （字符串）：将其应用于JplayList的ID。
2. playlist （数组：对象）：将设置为JplayList的新播放列表。

将媒体添加到播放列表的末尾。

争论

1. id （字符串）：将其应用于JplayList的ID。
2. media （对象）：要添加到您的播放列表中的媒体。
3. playNow （Bool）：添加后，可选地播放媒体。

以指定的索引从播放列表中删除媒体。

争论

1. id （字符串）：将其应用于JplayList的ID。
2. index （编号）：播放列表数组的索引要删除。

清除播放列表数组，并将一些Jplaylist值重置回默认值。

争论

1. id （字符串）：将其应用于JplayList的ID。

播放Jplaylist。如果没有提供索引，则播放当前的媒体。

争论

1. id （字符串）：将其应用于JplayList的ID。
2. index （编号）：可选地在提供的索引上播放媒体。

洗牌播放列表。

争论

1. id （字符串）：将其应用于JplayList的ID。
2. shuffled （bool）：如果未给出参数，则切换洗牌设置。真实地将播放列表随机播放。如果被改组，假会拆除。
3. playNow （Bool）：一旦播放，它就可以选择地播放媒体。

在播放列表中播放下一个媒体项目。

争论

1. id （字符串）：将其应用于JplayList的ID。

在播放列表中播放以前的媒体项目。

争论

1. id （字符串）：将其应用于JplayList的ID。

该对象中的属性用于初始化JplayList。它们与默认的Jplaylist选项深入合并。

JplayList将在加载列表中自动加载该选项的播放列表。数组中的每个对象都应与React-Jplayer的媒体架构相同，但也必须包括一个可以是字符串或数字的ID。

例如

媒体：{{id：0，// react jplayer媒体选项在这里...}}

id需要是数字或字符串。

默认值：true

播放列表将在调用previous()时循环回到结束。

默认值：true

如果循环为“循环播放列表”并且洗牌是正确的，则播放列表在最后一项上调用next()时会随机散步。

默认值：“ loop-playlist”

Jplaylist在循环中识别三个设置：

1. “ OFF”：不循环播放列表或当前媒体，在调用next()时停止最后一项。
2. “循环”：循环播放列表中的当前媒体。
3. “ loop-playList”：在最后一项上调用next()时，将整个播放列表循环。

默认值：false

隐藏或显示播放列表。内部与TogglePlaylist组件一起使用。

道具

1. children （元素）：必需：必须是Jplayer组件。
2. id （字符串）：必需：必须与您提供给Jplayer选项的id相同。
3. keyBindings （对象）：指定按下该键时要应用的键键。深层将这些道具与Jplaylist的默认键键合并。有关更多信息，请参见React-Jplayer的钥匙扣。

默认：

 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));
    },
  },
}

此组件需要包装Jplayer组件

道具

1. children （节点）：必需

任何是该组件的孩子的组件都将被重复x x，其中x是您的播放列表的大小。

道具

1. children （节点）：必需

默认值： ×

应作为Playlist组件的孩子嵌套。为您的播放列表中的每个媒体提供删除控件。

道具

1. children （节点）：必需

应作为Playlist组件的孩子嵌套。呈现播放列表的媒体链接，并允许用户在播放列表中选择其他媒体。

默认值： media.artist media.title

应作为Playlist组件的孩子嵌套。使艺术家和当前媒体的头衔。

应作为Playlist组件的孩子嵌套。提供当前媒体的海报。

道具

1. children （节点）：必需

与hidePlaylist属性结合使用。切换播放列表onClick的景象。

道具

1. children （节点）：必需

onClick在内部拨打previous一个动作，并将媒体设置为上一个项目。

道具

1. children （节点）：必需

onClick在内部拨打next操作，并将媒体设置为下一个项目。

道具

1. children （节点）：必需

onClick在内部打电话给shuffle Action，并将媒体洗牌。

道具

1. children （节点）：必需

onClick在内部调用setOption操作，并将循环设置为下一个状态，即如果循环当前“关闭”，则单击此组件将将循环状态设置为'loop'。