Skip to content

Commit

Permalink
init: Port from react-dailymotion.
Browse files Browse the repository at this point in the history
  • Loading branch information
goto-bus-stop committed Apr 23, 2017
0 parents commit 8c32c36
Show file tree
Hide file tree
Showing 13 changed files with 550 additions and 0 deletions.
26 changes: 26 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"presets": [
["env", {
"modules": false,
"loose": true
}],
"react"
],
"plugins": [
"transform-class-properties",
["transform-react-remove-prop-types", { "mode": "wrap" }]
],

"env": {
"test": {
"plugins": [
"transform-es2015-modules-commonjs"
]
},
"rollup": {
"plugins": [
"external-helpers"
]
}
}
}
23 changes: 23 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true


[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2


[*.js]
indent_style = space
indent_size = 2


[*.md]
trim_trailing_whitespace = false
3 changes: 3 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
lib
node_modules
example/bundle.js
9 changes: 9 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"react/jsx-filename-extension": "off",
"react/require-default-props": "off",
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
}
}
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
/lib
/example/bundle.js
/generated-docs.md
.eslintcache
4 changes: 4 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
/tools
/example
/generated-docs.md
6 changes: 6 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
language: node_js
sudo: false
node_js:
- "4"
- "6"
- "7"
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2016 Renée Kooi

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
74 changes: 74 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# @u-wave/react-vimeo

Vimeo player component for React.

[Install][] - [Usage][] - [Demo][] - [Props][]

## Install

```
npm install --save @u-wave/react-vimeo
```

## Usage

[Demo][] - [Demo source code][]

```js
import Vimeo from '@u-wave/react-vimeo';

<Vimeo
video="x2to0hs"
autoplay
/>
```

## Props

| Name | Type | Default | Description |
|:-----|:-----|:-----|:-----|
| video | union | | A Vimeo video ID or URL. |
| id | string | | DOM ID for the player element. |
| className | string | | CSS className for the player element. |
| width | union | | Width of the player element. |
| height | union | | Height of the player element. |
| paused | bool | | Pause the video. |
| volume | number | | |
| autopause | bool | true | Pause this video automatically when another one plays. |
| autoplay | bool | false | Automatically start playback of the video. Note that this won’t work on some devices. |
| showByline | bool | true | Show the byline on the video. |
| color | string | | Specify the color of the video controls. Colors may be overridden by the embed settings of the video. |
| loop | bool | false | Play the video again when it reaches the end. |
| showPortrait | bool | true | Show the portrait on the video. |
| showTitle | bool | true | Show the title on the video. |
| onReady | function | | Sent when the Vimeo player API has loaded. |
| onError | function | | Sent when the player triggers an error. |
| onPlay | function | | Triggered when the video plays. |
| onPause | function | | Triggered when the video pauses. |
| onEnd | function | | Triggered any time the video playback reaches the end. Note: when `loop` is turned on, the ended event will not fire. |
| onTimeUpdate | function | | Triggered as the `currentTime` of the video updates. It generally fires every 250ms, but it may vary depending on the browser. |
| onProgress | function | | Triggered as the video is loaded. Reports back the amount of the video that has been buffered. |
| onSeeked | function | | Triggered when the player seeks to a specific time. An `onTimeUpdate` event will also be fired at the same time. |
| onTextTrackChange | function | | Triggered when the active text track (captions/subtitles) changes. The values will be `null` if text tracks are turned off. |
| onCueChange | function | | Triggered when the active cue for the current text track changes. It also fires when the active text track changes. There may be multiple cues active. |
| onCuePoint | function | | Triggered when the current time hits a registered cue point. |
| onVolumeChange | function | | Triggered when the volume in the player changes. Some devices do not support setting the volume of the video independently from the system volume, so this event will never fire on those devices. |
| onLoaded | function | | Triggered when a new video is loaded in the player. |

## Related

- [@u-wave/react-youtube][] - A YouTube component with a similar declarative API.
- [react-dailymotion][] - A Dailymotion component with a similar declarative API.

## License

[MIT]

[Install]: #install
[Usage]: #usage
[Props]: #props
[Demo]: https://u-wave.github.io/react-vimeo
[Demo source code]: ./example
[MIT]: ./LICENSE
[@u-wave/react-youtube]: https://github.com/u-wave/react-youtube
[react-dailymotion]: https://github.com/u-wave/react-dailymotion
68 changes: 68 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{
"name": "@u-wave/react-vimeo",
"version": "0.0.0",
"description": "Vimeo player component for React.",
"main": "lib/rollup.js",
"module": "lib/rollup.es.js",
"scripts": {
"prepublish": "npm run build",
"build": "rollup -c",
"lint": "eslint --cache .",
"test": "npm run lint && cross-env BABEL_ENV=test mocha",
"docs": "node tools/generate-docs.js > generated-docs.md",
"example": "npm install && cd example && npm install"
},
"repository": {
"type": "git",
"url": "git+https://github.com/u-wave/react-vimeo.git"
},
"keywords": [
"youtube",
"react",
"player",
"react-component",
"video"
],
"author": "Renée Kooi <[email protected]>",
"license": "MIT",
"bugs": {
"url": "https://github.com/u-wave/react-vimeo/issues"
},
"homepage": "https://github.com/u-wave/react-vimeo#readme",
"dependencies": {
"@vimeo/player": "^2.0.1",
"prop-types": "^15.5.4"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0"
},
"devDependencies": {
"babel-eslint": "^7.2.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-react-remove-prop-types": "^0.3.2",
"babel-preset-env": "^1.3.2",
"babel-preset-react": "^6.23.0",
"babel-register": "^6.24.0",
"cross-env": "^4.0.0",
"doctrine": "^2.0.0",
"eslint": "^3.18.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"expect": "^1.20.2",
"global": "^4.3.1",
"mocha": "^3.2.0",
"proxyquire": "^1.7.11",
"react": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
"react-docgen": "^2.13.0",
"react-dom": "^15.4.2",
"regenerator-runtime": "^0.10.3",
"rollup": "^0.41.6",
"rollup-plugin-babel": "^2.7.1",
"through2": "^2.0.3"
}
}
19 changes: 19 additions & 0 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import babel from 'rollup-plugin-babel';

const meta = require('./package.json');

process.env.BABEL_ENV = 'rollup';

export default {
entry: './src/index.js',
targets: [
{ format: 'cjs', dest: meta.main, exports: 'named' },
{ format: 'es', dest: meta.module },
],

external: Object.keys(meta.dependencies)
.concat(Object.keys(meta.peerDependencies)),
plugins: [
babel(),
],
};
15 changes: 15 additions & 0 deletions src/eventNames.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default {
ready: 'onReady',
play: 'onPlay',
pause: 'onPause',
ended: 'onEnd',
timeupdate: 'onTimeUpdate',
progress: 'onProgress',
seeked: 'onSeeked',
texttrackchange: 'onTextTrackChange',
cuechange: 'onCueChange',
cuepoint: 'onCuePoint',
volumechange: 'onVolumeChange',
error: 'onError',
loaded: 'onLoaded',
};
Loading

0 comments on commit 8c32c36

Please sign in to comment.