From de133a21f2569cd1f5080efe8b0fa117ce34fd44 Mon Sep 17 00:00:00 2001 From: Travis Arnold Date: Mon, 24 Oct 2016 17:53:06 -0700 Subject: [PATCH] 0.6.0 release --- README.md | 180 +++++++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 96 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index d233a73..7abd1ce 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,6 @@ Components and decorators to help build video & audio players in React. Supports `npm install react-media-player --save` -`bower install react-media-player --save` - ```html (UMD library exposed as `ReactMediaPlayer`) @@ -17,106 +15,80 @@ Components and decorators to help build video & audio players in React. Supports ## `Media` component +A special wrapper component that collects information from the `Player` component and passes down the proper props to `withMediaProps` decorator. + +## `Player` component + +This is another special component that renders your player and communicates with the `Media` wrapper. + #### `src`: PropTypes.string.isRequired -Pass the source into the decorated component. This is the source of the media you want to play. Currently supporting Youtube, Vimeo, and any HTML5 compatible video or audio. +This is the source of the media you want to play. Currently supporting Youtube, Vimeo, and any HTML5 compatible video or audio. #### `vendor`: PropTypes.oneOf(['youtube', 'vimeo', 'audio', 'video']) -Pass the vendor into the decorated component. Explicitly choose which component to render for the player. If not set, the library does its best to determine what player to render based on the source. +Explicitly choose which internal component to render for the player. If nothing is set, the library does its best to determine what player to render based on the source passed in. #### `autoPlay`: PropTypes.bool +Autoplay media when the component is mounted or `src` changes. + #### `loop`: PropTypes.bool +Loop the current `src` indefinitely. + #### `onPlay`: PropTypes.func +Callback when media starts playing. + #### `onPause`: PropTypes.func +Callback when media has been paused. + #### `onError`:PropTypes.func +Callback when an error occurs. + #### `onDuration`: PropTypes.func +Callback when the duration of the media has been calculated. + #### `onProgress`: PropTypes.func +Callback when media starts downloading. + #### `onTimeUpdate`: PropTypes.func +Callback when media time has changed. + #### `onMute`: PropTypes.func +Callback when the player has been muted. + #### `onVolumeChange`: PropTypes.func +Callback when the player volume has changed. + ```js import React, { Component } from 'react' -import { Media, controls } from 'react-media-player' +import { Media, Player, controls } from 'react-media-player' const { PlayPause, MuteUnmute, } = controls class MediaPlayer extends Component { render() { return ( - - {Player => -
-
- {Player} -
-
- - -
+ +
+
+ +
+
+ +
- } - - ) - } -} -``` - -
- -## `withMediaPlayer` decorator - -Convenience component that uses the `Media` component internally to pass down `Player` as a prop. - -```js - -import React, { Component } from 'react' -import { withMediaPlayer, controls } from 'react-media-player' -const { PlayPause, CurrentTime, Progress, SeekBar, Duration, MuteUnmute, Volume, Fullscreen } = controls - -class MediaPlayer extends Component { - render() { - const { Player } = this.props - - return ( -
-
- { Player }
- -
- ) - } -} -MediaPlayer = withMediaPlayer(MediaPlayer) - -class App extends Component { - state = { - currentSource: 'http://www.youtube.com/embed/h3YVKTxTOgU' - } - - render() { - return ( - + ) } } @@ -196,39 +168,77 @@ export default withMediaProps(CustomPlayPause)
-## `withKeyboardControls` decorator props exposed under `this.props.keyboardControls` +## `utils.keyboardControls` -Provides a prop with keyboard functionality to control the `Media` component. +A special function that will provide keyboard support to the media player. ```js import React, { Component } from 'react' -import { withMediaPlayer, withKeyboardControls, controls } from 'react-media-player' +import { Media, Player, controls, utils } from 'react-media-player' const { PlayPause, CurrentTime, Progress, SeekBar, Duration, MuteUnmute, Volume, Fullscreen } = controls +const { keyboardControls } = utils class MediaPlayer extends Component { render() { const { Player, keyboardControls } = this.props return ( -
-
- { Player } -
- -
+ + { mediaProps => +
+ +
+ + + + + + + + +
+
+ } + + ) + } +} +``` + +
+ +## `utils.formatTime` + +A helper function to format time. + +```js + +import React, { Component } from 'react' +import { withMediaProps, utils } from 'react-media-player' +const { formatTime } = utils + +class CurrentTime extends Component { + shouldComponentUpdate({ media }) { + return this.props.media.currentTime !== media.currentTime + } + + render() { + const { className, style, media } = this.props + return ( + ) } } -MediaPlayer = withMediaPlayer(withKeyboardControls(MediaPlayer)) + +export default withMediaProps(CurrentTime) ```
diff --git a/package.json b/package.json index d3d8c54..0a5687e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-media-player", - "version": "0.5.0", + "version": "0.6.0", "description": "React media player.", "main": "lib/react-media-player.js", "files": [