{"_id":"@aulamejor/react-jw-player","_rev":"2-d5013b6eb5b00d80d988090004a9527c","name":"@aulamejor/react-jw-player","dist-tags":{"latest":"1.18.4"},"versions":{"1.18.4":{"name":"@aulamejor/react-jw-player","version":"1.18.4","description":"A React component for launching JW Player instances on the client.","main":"dist/react-jw-player.js","module":"es/index.js","scripts":{"build":"babel src --out-dir dist","clean":"rm -rf dist","lint":"eslint .","prepublish":"npm run lint && npm run test && npm run clean && npm run build","test":"npm run lint && npm run test:unit && npm run test:browser","test:unit":"babel-tape-runner ./test/*.test.js* | faucet","test:browser":"babel-tape-runner ./test/*.browser-test.js* | faucet","watch":"babel src --out-dir dist --watch"},"repository":{"type":"git","url":"git+ssh://git@bitbucket.org/aulamejor_dev/react-jw-player.aulamejor.com.git"},"keywords":["react","jwplayer","jw-player","video","autoplay","events"],"author":{"name":"Mic Network, Inc."},"license":"MIT","bugs":{"url":"https://bitbucket.org/aulamejor_dev/react-jw-player.aulamejor.com/issue"},"homepage":"https://bitbucket.org/aulamejor_dev/react-jw-player.aulamejor.com/src/master/README.md","devDependencies":{"babel-cli":"^6.18.0","babel-eslint":"^7.2.3","babel-plugin-transform-object-assign":"^6.22.0","babel-preset-es2015":"^6.18.0","babel-preset-react":"^6.16.0","babel-tape-runner":"^2.0.1","enzyme":"^2.7.0","eslint":"^3.15.0","eslint-config-airbnb":"^13.0.0","eslint-config-mic":"^1.0.0","eslint-plugin-babel":"^4.1.2","eslint-plugin-flowtype":"^2.39.1","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.10.3","faucet":"0.0.1","jsdom":"^9.9.1","jsdom-global":"^2.1.1","miclint":"^4.1.0","prop-types":"^15.5.10","react":"^15.4.1","react-addons-test-utils":"^15.4.1","react-dom":"^15.4.2","react-test-renderer":"^15.4.2","tape":"^4.6.3"},"peerDependencies":{"prop-types":"^15.5.10","react":"^15.4.1 || ^16.0.0"},"dependencies":{"react-fast-compare":"^2.0.1"},"gitHead":"1f5fae5cd680a69c7171bf148519456baf0c5d00","_id":"@aulamejor/react-jw-player@1.18.4","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"juanelorganelo","email":"cokenrocknroll@gmail.com"},"dist":{"integrity":"sha512-5fLGNQVo2LPLCQjlbdMnbmCLBLgtr3LbRCMHMXEwuj4LXy90FwsoxxvMFSRUc8nZVzsA3xRGBoJC9LPRnfd/Hw==","shasum":"5c70685d09960aa2bb9e895a596945f4bf0bc6a8","tarball":"https://registry.npmjs.org/@aulamejor/react-jw-player/-/react-jw-player-1.18.4.tgz","fileCount":25,"unpackedSize":45159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbvpZfCRA9TVsSAnZWagAAThoP/j8Y8rHPwepnDdZ8AcBq\nt9mmcmGV+nNcQQ9cYpMy015WtppoM9wfwjFpRS5szZLa74bjSBqVNLL5uQoV\nkCCa024hJK2dDC6xxU0tGEPu7676RDUwYJniq9S+vHDOFhBqUm2fRfXaBC0L\nuDOKbuETaOYU5s1+e4VV+azMDcdGLOxDGFlLH+1PsMfdLawDrw25y0uj6s3N\nqYO9ZNNjhDtqsklHoY+mmxDT1cHJWdHtlE9UGfIU42aZ+3YlYjq+BhsPpM8M\nVZ0iZ70b4Tox0O8l8HGQvgvZsCPCEBUKAIufnZ03cgQVHe75u2GKbMaFrL7X\ndhpcl0znFNXbQPgBwWRIOIwZ5WE/jAvPtWjQazECSRrZQVs1/j0NkD+bheMf\nSUgJUNXbvpg+qXt0b8AVzM9Mt3BlKa9v3PL2fSVdQvILiyX6uUcfdpDXlZ/l\n19lovR+CPZwPWp2CaSYETSZ0ejqwWtrjNpZ2DqLJpq3MssAAcC3ebtzdh77o\nFJBUagP1pgVQtAl49Y5hf+kqWvrjac1V7Odw2MzahjWP/TKBCiuw7MaO0FPG\nzxK9xRZ/sdj2v3iDWU7TTfT/5/EAy/zqGVoP/jvXdKCJYybkst+fT+fT6Dni\nmxTmOWZdd0wv9xrjOMNiYOhp+OpXv9EY4klef7B4t723WdIeQSm0p+A0wKLC\nX8yx\r\n=uwnn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfMryDI52UxCebwpDrbgQSYKv0XzruiLVmLH8lEL8QnAIgP5tX2DGGqvbTqfVeDxUoUJcEGhTK9tAOxwrpPhOr0zk="}]},"maintainers":[{"name":"androiderik","email":"erik.genaro@gmail.com"},{"name":"juanelorganelo","email":"cokenrocknroll@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-jw-player_1.18.4_1539216990334_0.9118090655953801"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-11T00:16:30.252Z","1.18.4":"2018-10-11T00:16:30.474Z","modified":"2022-04-04T16:24:51.234Z"},"maintainers":[{"email":"erik.genaro@gmail.com","name":"androiderik"}],"description":"A React component for launching JW Player instances on the client.","homepage":"https://bitbucket.org/aulamejor_dev/react-jw-player.aulamejor.com/src/master/README.md","keywords":["react","jwplayer","jw-player","video","autoplay","events"],"repository":{"type":"git","url":"git+ssh://git@bitbucket.org/aulamejor_dev/react-jw-player.aulamejor.com.git"},"author":{"name":"Mic Network, Inc."},"bugs":{"url":"https://bitbucket.org/aulamejor_dev/react-jw-player.aulamejor.com/issue"},"license":"MIT","readme":"# react-jw-player :movie_camera: [![Build Status](https://travis-ci.com/micnews/react-jw-player.svg?token=oCXvx519mb3xud77T3xi&branch=master)](https://travis-ci.com/micnews/react-jw-player)\n\n`` is a React Component for initializing client-side instances of JW Player. Simply give `` the id of your player script, and the id of a JW Player video or playlist. The component comes with several event hooks that can be accessed through component props.\n\n## Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* Props\n * [Required Props](#required-props)\n * Optional Props\n * [Configuration](#optional-configuration-props)\n * [Event Hooks](#event-hooks)\n * [Advertising](#optional-advertising-event-hook-props)\n * [Player Events](#optional-player-event-hook-props)\n * [Time Events](#optional-time-event-hook-props)\n* [Example Container Component](#example-container-component)\n* [Contributing](#contributing)\n\n## Installation\n\n```shell\nnpm install react-jw-player\n```\n\n## Usage\n\nAt the mininum, you can just use something like the three following code snippets:\n\n### Playing a JW Player JSON Playlist\n``` javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactJWPlayer from 'react-jw-player';\n\nReactDOM.render(\n ,\n document.getElementById('my-root-div');\n);\n```\n\n### Playing a custom Playlist\n``` javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactJWPlayer from 'react-jw-player';\n\nconst playlist = [{\n file: 'https://link-to-my-video.mp4',\n image: 'https://link-to-my-poster.jpg',\n tracks: [{\n file: 'https://link-to-subtitles.vtt',\n label: 'English',\n kind: 'captions',\n 'default': true\n }],\n},\n{\n file: 'https://link-to-my-other-video.mp4',\n image: 'https://link-to-my-other-poster.jpg',\n}];\n\nReactDOM.render(\n ,\n document.getElementById('my-root-div');\n);\n```\n\n### Playing a Specific File\n``` javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactJWPlayer from 'react-jw-player';\n\nReactDOM.render(\n ,\n document.getElementById('my-root-div');\n);\n```\n\nFor more complex interaction, check out the container component example [here](#example-container-component)\n\nTo generate preroll, supply the player with the `generatePrerollUrl` prop. This prop just needs to be a function that returns a valid VAST tag! See (Optional Configuration Props)[#optional-configuration-props] for more info.\n\n## Required Props\n\nThese are props that modify the basic behavior of the component.\n* `playerId`\n * A unique Id for the player instance. Used to distinguish the container divs.\n * Type: `string`\n * Example: `playerId=\"my-jw-player-instance\"`\n* `playerScript`\n * Link to a valid JW Player script.\n * Type: `string`\n * Example: `https://content.jwplatform.com/libraries/abCD1234.js`\n* `playlist` OR `file`\n * Link to a valid JW Player playlist or video file, or playlist array. Cool tip: JW Player automatically generates JSON feeds for individual videos if you use the video id in place of `abCD1234`. You can use this to get meta data on the videos without loading an actual playlist.\n * Type: `string` (for `file` and `playlist`) or `array` (for `playlist`)\n * Example: `https//content.jwplatform.com/feeds/abCD1234.json`\n\n## Optional Configuration Props\n* `aspectRatio`\n * An optional aspect ratio to give the video player. Can be 'inherit', `1:1` or `16:9` currently.\n * Defaults to 'inherit'.\n* `className`\n * An optional class name to give the container div.\n * Type: `string`\n* `customProps`\n * An optional object containing properties to be applied directly to the JW Player instance. Add anything in the API, like skins, into this object. `customProps={{ skin: { name: 'six' } }}`.\n * Type: `object`\n* `isAutoPlay`\n * Determines whether the player starts automatically or not.\n * Type: `boolean`\n* `isMuted`\n * Determines whether the player starts muted or not.\n * Type: `boolean`\n* `generatePrerollUrl(video)`\n * Supply a function that returns a VAST or GOOGIMA tag for use in generating a preroll advertisement.\n * Arguments:\n * `video`\n * This is a video object for the current item loaded in the player. You can use it to help generate your preroll tags.\n* `image`\n * URL to a poster image to display before playback starts\n * Type: `string`\n* `licenseKey`\n * License Key as supplied in the jwplayer dashboard, under: Players > Tools > Downloads > JW Player X (Self-Hosted)\n * Type: `string`\n* `useMultiplePlayerScripts`\n * EXPERIMENTAL - Allows you to load multiple player scripts and still load the proper configuration. Expect bugs, but report them!\n * Type: `boolean`\n\n# Event Hooks\n\n`react-jw-player` dynamically supports all events in JW Player. Simply preface the event name with `on` and pass it in as a prop.\n\nExamples:\n* `ready` => `onReady`\n* `setupError` => `onSetupError`\n\n`react-jw-player` has layered some different functionality on some of these events, so please check the docs below if you find any unexpected behavior!\n\n## Optional Advertising Event Hook Props\n* `onAdPause(event)`\n * A function that is run when the user pauses the preroll advertisement.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onAdPlay(event)`\n * A function that is run once, when the preroll advertisement first starts to play.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onAdResume(event)`\n * A function that is run when the user resumes playing the preroll advertisement.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onAdSkipped(event)`\n * A function that is run when the user skips an advertisement.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onAdComplete(event)`\n * A function that is run when an ad has finished playing.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n\n## Optional Player Event Hook Props\n* `onAutoStart(event)`\n * A function that is run once, when an autoplaying player starts to play a video.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onEnterFullScreen(event)`\n * A function that is run when the user fullscreens a video.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onError(event)`\n * A function that is run when the player errors.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onExitFullScreen(event)`\n * A function that is run when the user un-fullscreens a video.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onMute(event)`\n * A function that is run when the user mutes the player.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onPause(event)`\n * A function that is run when the user pauses the player during a video.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onPlay(event)`\n * A function that is run when a video first starts to play.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onReady(event)`\n * A function that is run once when the video player is ready.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onResume(event)`\n * A function that is run when the user plays a video after pausing it.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onSetupError(event)`\n * A function that is run when the player errors during setup.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onTime(event)`\n * A function that is run whenever the playback position gets updated.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onUnmute(event)`\n * A function that is run when the user unmutes the player.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onVideoLoad(event)`\n * A function that is run whenever a new video is loaded into the player.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n\n## Optional Time Event Hook Props\n* `onThreeSeconds(event)`\n * A function that is run when the playhead reaches passed the 3 second mark.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onTenSeconds(event)`\n * A function that is run when the playhead reaches passed the 10 second mark.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onThirtySeconds(event)`\n * A function that is run when the playhead reaches passed the 30 second mark.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onTwentyFivePercent(event)`\n * A function that is run when the playhead reaches passed the 25% mark.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onFiftyPercent(event)`\n * A function that is run when the playhead reaches passed the 50% mark.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onSeventyFivePercent(event)`\n * A function that is run when the playhead reaches passed the 75% mark.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onNinetyFivePercent(event)`\n * A function that is run when the playhead reaches passed the 95% mark.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n* `onOneHundredPercent(event)`\n * A function that is run when the a video ends.\n * Type: `function`\n * Arguments:\n * `event`\n * This is the event object passed back from JW Player itself.\n\n## Example Container Component\n``` javascript\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ReactJWPlayer from 'react-jw-player';\n\nconst displayName = 'ReactJWPlayerContainer';\n\nconst propTypes = {\n playlist: PropTypes.string.isRequired,\n playerScript: PropTypes.string.isRequired\n};\n\nclass ReactJWPlayerContainer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n videoTitle: '',\n };\n\n this.onAdPlay = this.onAdPlay.bind(this);\n this.onReady = this.onReady.bind(this);\n this.onVideoLoad = this.onVideoLoad.bind(this);\n\n // each instance of needs a unique id.\n // we randomly generate it here and assign to the container instance.\n this.playerId = someFunctionToRandomlyGenerateId();\n }\n onReady(event) {\n // interact with JW Player API here\n const player = window.jwplayer(this.playerId);\n }\n onAdPlay(event) {\n // track the ad play here\n }\n onVideoLoad(event) {\n this.setState({\n videoTitle: event.item.description // this only works with json feeds!\n });\n }\n render() {\n return (\n
\n

{ this.state.videoTitle }

\n \n
\n );\n }\n}\n\nReactJWPlayerContainer.propTypes = propTypes;\nReactJWPlayerContainer.defaultProps = defaultProps;\nReactJWPlayerContainer.displayName = displayName;\nexport default ReactJWPlayerContainer;\n```\n\n## Contributing\n\n**Just do it!**\n\n![shia](https://media.giphy.com/media/87xihBthJ1DkA/giphy.gif)\n","readmeFilename":"README.md"}