{"_id":"@arist0tl3/react-player-controls","_rev":"3-2610758728550e028d66aa5d7c0adb68","name":"@arist0tl3/react-player-controls","dist-tags":{"latest":"1.1.4"},"versions":{"1.1.1":{"name":"@arist0tl3/react-player-controls","version":"1.1.1","description":"UI components for media players","main":"dist/index.js","scripts":{"prebuild":"rimraf dist","build":"babel --out-dir dist src","dev":"npm run build -- --watch","lint":"eslint src tests","test":"mocha --require @babel/register --require jsdom-global/register --require tests/helpers/configure-enzyme.js tests/*.js","test:w":"npm test -- -w","release":"paco release"},"repository":{"type":"git","url":"git+https://github.com/alexanderwallin/react-player-controls.git"},"author":{"name":"Reactify","email":"developer@reactifymusic.com","url":"http://reactifymusic.com"},"contributors":[{"name":"Alexander Wallin","email":"office@alexanderwallin.com","url":"http://alexanderwallin.com"}],"license":"ISC","bugs":{"url":"https://github.com/alexanderwallin/react-player-controls/issues"},"homepage":"http://alexanderwallin.github.io/react-player-controls/","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-decorators":"^7.2.3","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-eslint":"^10.0.1","babel-plugin-transform-class-properties":"^6.11.5","babel-plugin-transform-object-rest-spread":"^6.26.0","chai":"^4.2.0","chai-enzyme":"^1.0.0-beta.1","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","eslint":"^5.12.0","eslint-config-standard":"^12.0.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-node":"^8.0.1","eslint-plugin-promise":"^4.0.1","eslint-plugin-react":"^7.12.3","eslint-plugin-standard":"^4.0.0","jsdom-global":"^3.0.2","mocha":"^5.2.0","mocha-jsdom":"^2.0.0","paco":"^0.4.0","react":"^16.7.0","react-dom":"^16.7.0","rimraf":"^2.6.3","sinon":"^7.2.2"},"peerDependencies":{"react":"^15.0.0 || ^16.0.0"},"dependencies":{"autobind-decorator":"^2.4.0","prop-types":"^15.6.2"},"directories":{"doc":"docs","test":"tests"},"gitHead":"976fa85921224578a0592a64e616a52aa515831b","_id":"@arist0tl3/react-player-controls@1.1.1","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-i94oO0NQ6EdlS9MqG/JA2QevHi3okapdh05MVnvsojGu72CGmP36RxbvI5vWPgewpgtfpB6IsCPUPS+PENfhWQ==","shasum":"3e1d90efa7544ad3131ac79b53eb4b7ddade5cec","tarball":"https://registry.npmjs.org/@arist0tl3/react-player-controls/-/react-player-controls-1.1.1.tgz","fileCount":17,"unpackedSize":37284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYpJRCRA9TVsSAnZWagAADcEP/3Hwd5b1FW/QuXd/jAF7\nX0wYHjbn2yIgFzibPOZMJ9Bjyuk4X5Zjo38u/pFul+mju7Pe8GzdRkU8jhgl\nG0DWkxKNlb74vyuFtQJHupmtLUO5kTyUXfd1OdEAv5GcYuAzxViQYz1FI0/U\nYhAK+jzFFlcgDjcUXeo3TcBbykifrMtAHBFHUI7SPgp6ZTDyZabAIXBn7Ju4\n3LCOzhWLdC5NtKBWcrenoTi7fffhDOx6AXMuCIwN7PV7p1whKcP2vV3UcXIc\nNwua42+ImQlSfc0eVy1f5EUgjfTCHdfsDhove2DHEHLrWTaAwLZ0QSYs4160\nVekAuHpFN8FQge+on8f0307i10r5cIgHqPeh+lX4aYbQKl+0JGrs6nMzWg9v\nWjwKUlf2pE/AImMYSfNR9WHYr7d5xwXo0QgX9R7ITnH0IOLKmmmm6kIMv5O9\niGD0Au5r9YCRLZ1X7zAvaaz8f0WCe4opv9kazjZ0QqVnke2HNaDahHarlkYZ\n6SpjQ67tx2GadGvSf5QWMUfxfeE2q5a9ftdFRbh2ZITBFMpPnA+s2SreCFNb\n7UY9mML3Om+k0VRKmaSp7BnaC+IFXyHfvT19UxReplxfQDtE3z0lav/jbAw+\nLOfMAjCaD+fBpvJaF4x1IACGguYwjKNo6Yx8T/cIxFX9IhHa0fc3Pa/IxsOm\nCelx\r\n=eUY/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL25aDFcNw3cLKeflrUhscP84A9V5jWRFvHmPUJ4FPPAIgaotrOQalMg651gjZeG/9VKfQ+Ovi30DscOZXlslXZmc="}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-player-controls_1.1.1_1600295504765_0.8609169914621939"},"_hasShrinkwrap":false},"1.1.2":{"name":"@arist0tl3/react-player-controls","version":"1.1.2","description":"UI components for media players","main":"dist/index.js","scripts":{"prebuild":"rimraf dist","build":"babel --out-dir dist src","dev":"npm run build -- --watch","lint":"eslint src tests","test":"mocha --require @babel/register --require jsdom-global/register --require tests/helpers/configure-enzyme.js tests/*.js","test:w":"npm test -- -w","release":"paco release"},"repository":{"type":"git","url":"git+https://github.com/alexanderwallin/react-player-controls.git"},"author":{"name":"Reactify","email":"developer@reactifymusic.com","url":"http://reactifymusic.com"},"contributors":[{"name":"Alexander Wallin","email":"office@alexanderwallin.com","url":"http://alexanderwallin.com"}],"license":"ISC","bugs":{"url":"https://github.com/alexanderwallin/react-player-controls/issues"},"homepage":"http://alexanderwallin.github.io/react-player-controls/","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-decorators":"^7.2.3","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-eslint":"^10.0.1","babel-plugin-transform-class-properties":"^6.11.5","babel-plugin-transform-object-rest-spread":"^6.26.0","chai":"^4.2.0","chai-enzyme":"^1.0.0-beta.1","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","eslint":"^5.12.0","eslint-config-standard":"^12.0.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-node":"^8.0.1","eslint-plugin-promise":"^4.0.1","eslint-plugin-react":"^7.12.3","eslint-plugin-standard":"^4.0.0","jsdom-global":"^3.0.2","mocha":"^5.2.0","mocha-jsdom":"^2.0.0","paco":"^0.4.0","react":"^16.7.0","react-dom":"^16.7.0","rimraf":"^2.6.3","sinon":"^7.2.2"},"peerDependencies":{"react":"^15.0.0 || ^16.0.0"},"dependencies":{"autobind-decorator":"^2.4.0","prop-types":"^15.6.2"},"directories":{"doc":"docs","test":"tests"},"gitHead":"976fa85921224578a0592a64e616a52aa515831b","_id":"@arist0tl3/react-player-controls@1.1.2","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-O6DGRqtuwdRHTOm58ZVG96cfCYzqpm7wX1r8cnNn8fTefvzmtLGlLf4fVwVherKINYUeCqdl2AvMP3rCaVszpw==","shasum":"2b7ec2b0625a2c5b965aff5663f2afc47a1443f9","tarball":"https://registry.npmjs.org/@arist0tl3/react-player-controls/-/react-player-controls-1.1.2.tgz","fileCount":25,"unpackedSize":74478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYpORCRA9TVsSAnZWagAAX0QP/jusATJGN+tmEYP77E0e\nWypAUuwgpVgSVDt0bPfejF8jVX8HF0OaG3Ufl0YCuBnL+18sQdN1c0e6ts61\n9Tjjht1sbVLcZw8YaLUw7ywjK0ydNmxz2haNBj+cqNeN1urPKTNd1TGHLknr\nqq1EwNS+A+XmHMi3rivgNTjQIU2ynHIv4Q3ruCrSEuU2dcCcwCwjfScdiLxF\nuC5cmrpfoXpB28XmPey6XRF0xU6netScdysx4gSIIrJEvGvSkNwZuUFah9mD\nslpC20pBV0nsLEJers+tLbJkcNB9hcmGwlQUkEcgdXtKLbli1S3lGEvKJ3Et\n94AX69JnP1Q4urnreaREPhUpuECD2PanFlKR80WvyLqDqHtaIqF7+kMqQLMt\nsukEE44ealHsFFh7gEwFw+dXIy3BEttaBEnGJETYfSOTjUJmxn5hOdrjVIX6\npcqNzVSUHXqbkO4Ucb1UkPy9VcIDUV5snsd0kCPBlYBUepoY7MnnhTvW3ywx\n8oqF8v1RvurpqgLBKovnvmmRUTt0hpHbDYwmyN7ZGhbYY38dIITJwvbgL988\nJByWNPt8xYHJ0bjg4RvwSvPMB8c3mi1NFV86/ldS7OxM8xcBpcDSV/HV1wCz\n5yCluzYA0mFjS7VmerTR50oYkw1Z4E5oPTWtLp2Ov+m83oiGa84VptHRK8SQ\nPDha\r\n=lLlo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdh9/0VytiPtx+EUvkSRzFf3j0taMZ4MtwTq31vPE0sgIgHLLGnhzdK5PttLNMsNgcNxOqF5vWIarisHCsRAEbwdU="}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-player-controls_1.1.2_1600295824690_0.6145279599693196"},"_hasShrinkwrap":false},"1.1.4":{"name":"@arist0tl3/react-player-controls","version":"1.1.4","description":"UI components for media players","main":"dist/index.js","scripts":{"prebuild":"rimraf dist","build":"babel --out-dir dist src","dev":"npm run build -- --watch","lint":"eslint src tests","test":"mocha --require @babel/register --require jsdom-global/register --require tests/helpers/configure-enzyme.js tests/*.js","test:w":"npm test -- -w","release":"paco release"},"repository":{"type":"git","url":"git+https://github.com/alexanderwallin/react-player-controls.git"},"author":{"name":"Reactify","email":"developer@reactifymusic.com","url":"http://reactifymusic.com"},"contributors":[{"name":"Alexander Wallin","email":"office@alexanderwallin.com","url":"http://alexanderwallin.com"}],"license":"ISC","bugs":{"url":"https://github.com/alexanderwallin/react-player-controls/issues"},"homepage":"http://alexanderwallin.github.io/react-player-controls/","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-decorators":"^7.2.3","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-eslint":"^10.0.1","babel-plugin-transform-class-properties":"^6.11.5","babel-plugin-transform-object-rest-spread":"^6.26.0","chai":"^4.2.0","chai-enzyme":"^1.0.0-beta.1","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","eslint":"^5.12.0","eslint-config-standard":"^12.0.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-node":"^8.0.1","eslint-plugin-promise":"^4.0.1","eslint-plugin-react":"^7.12.3","eslint-plugin-standard":"^4.0.0","jsdom-global":"^3.0.2","mocha":"^5.2.0","mocha-jsdom":"^2.0.0","paco":"^0.4.0","react":"^16.7.0","react-dom":"^16.7.0","rimraf":"^2.6.3","sinon":"^7.2.2"},"peerDependencies":{"react":"^15.0.0 || ^16.0.0"},"dependencies":{"autobind-decorator":"^2.4.0","prop-types":"^15.6.2"},"directories":{"doc":"docs","test":"tests"},"gitHead":"ac9e6d4dad68b5d3bda72dfaa769d336e0ed5dee","_id":"@arist0tl3/react-player-controls@1.1.4","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-meImLIPC3AEenEF328XWad9nVhKD+8fMDPS0KvEXkY8NTIj8s073mDdXt9ABYZRJQgdsF5q4+3NlLPRFk9Li4Q==","shasum":"6c747e9d13db3e0457032679678a258e51166331","tarball":"https://registry.npmjs.org/@arist0tl3/react-player-controls/-/react-player-controls-1.1.4.tgz","fileCount":25,"unpackedSize":74478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYpQkCRA9TVsSAnZWagAAbuYP/1CgHW7vFDNclcoQsSA/\ngvhXWoLiGltzwlRhNRBFFH15UJoJ9USn9roRvQSVV9WCN/QPBqYrt0DSFDIO\nEPSm/2EtBGHwqp4vHMF0Jq357rbXShbgnonmCuHB3Vj+Syy9omDf+5snuUw9\n0rfHFPX5cm2X2w3tsXWqvMbOxPdOnKTvmf3+pMc/D+nxWQi7gYxcoOrh9Dt5\nhxsF3c2ZqNiZh9JBHl+7MO0vdxDsFjkmAuUsmBRdchLLWnjb8JkVRbYj7Npw\nbkGlkGuNfTdu2UHgPjZ+HzAzNkLyl5rvAwWssWeKulTMgbCyTuuD28m8C+HX\n/dCx8oH5YqoH5PQSO/p1zGv1AG1R0GwLj6ciQxXq7XQZW8PVkFmOeY0V8Kjf\nhEbPHnO4hSGy4/5m8ry/QcYQHtBbCKC595R+VZ4ecfeQASzr8CLrowtvxxFx\n3hnYnE3LKPLW+/gEDHvh2JSK38GSUXZ7fseBFro+fruu4HPtXcGXjT1vOEWx\nkv1sYh5aFU3H57CLvMf8MiXwT1Ou6kbd7STQpgc+4ZuoshOqWDH1g2/Loj4d\nEQv9CVbWpAs+7fKxd05dEUzBBN2IUgAnNrCT497qLJNsAn0gBSDDPL+EVnVe\nO6Bh8Gkui3/1oIg6DPflhU20CxKhihLltgz3S2LVfULTere1UafR7f6lG099\nFDu6\r\n=6etg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLZLY/kJS9PpgPe997fUQBWWLKoEiYoiA/3ZPKWI9sDgIhAMxXcfWFWpgo+rnXm24ZDO/6p3nd/zxar16PDKcdRJUZ"}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-player-controls_1.1.4_1600295971983_0.9577719896063064"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-16T22:31:44.726Z","1.1.1":"2020-09-16T22:31:44.859Z","modified":"2022-04-04T15:27:54.472Z","1.1.2":"2020-09-16T22:37:04.790Z","1.1.4":"2020-09-16T22:39:32.148Z"},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"description":"UI components for media players","homepage":"http://alexanderwallin.github.io/react-player-controls/","repository":{"type":"git","url":"git+https://github.com/alexanderwallin/react-player-controls.git"},"contributors":[{"name":"Alexander Wallin","email":"office@alexanderwallin.com","url":"http://alexanderwallin.com"}],"author":{"name":"Reactify","email":"developer@reactifymusic.com","url":"http://reactifymusic.com"},"bugs":{"url":"https://github.com/alexanderwallin/react-player-controls/issues"},"license":"ISC","readme":"<h1 align=\"center\">\n  <img src=\"https://cdn.rawgit.com/alexanderwallin/react-player-controls/master/docs/img/logo-icon.svg\" width=\"100\" height=\"100\" />\n  <br />\n  react-player-controls\n  <br />\n  &nbsp;\n</h1>\n\n[![npm version](https://badge.fury.io/js/react-player-controls.svg)](https://npmjs.com/package/react-player-controls)\n[![Build Status](https://travis-ci.org/alexanderwallin/react-player-controls.svg?branch=master)](https://travis-ci.org/alexanderwallin/react-player-controls)\n[![Dependencies](https://img.shields.io/david/alexanderwallin/react-player-controls.svg?style=flat-square)](https://david-dm.org/alexanderwallin/react-player-controls)\n[![Dev dependency status](https://david-dm.org/alexanderwallin/react-player-controls/dev-status.svg?style=flat-square)](https://david-dm.org/alexanderwallin/react-player-controls#info=devDependencies)\n\nThis is a minimal set of modular, tested and hopefully useful React components for composing media player interfaces. It is designed for you to compose media player controls yourself using a [small and easy-to-learn API](#api).\n\n> 👴 Check the old [README for version 0.5.x](https://github.com/alexanderwallin/react-player-controls/blob/dd30d5f062f5606feb69e6a381a6490cf556e63b/README.md), which contained more pre-baked components, if you are still on that version. 👵\n\nFrom a library point of view, creating and providing components like `<Player />` or `<ProgressBar />` tends to result in abstractions with tons of props, often preventing arbitrary customisation, whilst providing little real value. These abstractions prove especially hindering when it comes to styling child elements. Therefor, instead of shipping these composite components, there is [a collection of recipies](#recipies) that you can more or less copy-paste right into your project. Along with these plain components are a few boilerplate sets of styles in different forms that you can use if you want.\n\nYou can see the base components in action on the [examples page](https://alexanderwallin.github.io/react-player-controls).\n\n⚠️  **NOTE:** This library does not deal with actual media in any way, only the UI. ⚠️\n\n### Table of contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [API](#api)\n* [Recipies](#recipies)\n* [Contribute](#contribute)\n\n\n## Installation\n\n```sh\nnpm i react-player-controls\n```\n\n## Usage\n\n```js\n// ES2015+ import\nimport { Slider, Direction } from 'react-player-controls'\n\n// Using CommonJS\nconst { Slider, Direction } = require('react-player-controls')\n```\n\n## API\n\n* [`<Button />`](#button-)\n* [`Direction`](#direction)\n* [`<FormattedTime />`](#formattedtime-)\n* [`<PlayerIcon />`](#playericon-)\n* [`<Slider />`](#slider-)\n\n### `<Button />`\n\n`<Button />` is basically a simple HTML `button`.\n\n```js\n<Button onClick={() => alert('clicked')}>\n  Click me\n</Button>\n```\n\n| Prop name | Default value | Description |\n|-----------|---------------|-------------|\n| `onClick` | - | **Required.** A callback function that is invoked when the button is clicked. |\n| `isEnabled` | `true` | Whether the button is enabled. Setting this to `false` will set the `disabled` attribute on the `button` element to `true`. |\n| `className` | `null` | A string to set as the HTML `class` attribute |\n| `style` | `{}` | Styles to set on the `button` element. |\n| `children` | `null` | Child elements. |\n\n### `Direction`\n\nAn enum describing a slider's active axis.\n\n| Key | Value |\n|-----|-------|\n| `HORIZONTAL` | `\"HORIZONTAL\"` |\n| `VERTICAL` | `\"VERTICAL\"` |\n\n### `<FormattedTime />`\n\n`<FormattedTime />` translates a number of seconds into the player-friendly format of `m:ss`, or `h:mm:ss` if the total time is one hour or higher.\n\n```js\n// This will render -1:01:02\n<FormattedTime numSeconds={-3662} />\n```\n\n| Prop name | Default value | Description |\n|-----------|---------------|-------------|\n| `numSeconds` | `0` | A number of seconds, positive or negative |\n| `className` | `null` | A string to set as the HTML `class` attribute |\n| `style` | `{}` | Styles to set on the wrapping `span` element. |\n\n### `<PlayerIcon />`\n\n`<PlayerIcon />` is not really a component in itself, but a container of a number of icon components.\n\n```js\n<PlayerIcon.Play />\n<PlayerIcon.Pause />\n<PlayerIcon.Previous />\n<PlayerIcon.Next />\n<PlayerIcon.SoundOn />\n<PlayerIcon.SoundOff />\n```\n\nAny props passed to a `<PlayerIcon.* />` component will be passed onto the underlying `svg` element.\n\n### `<Slider />`\n\nThe `<Slider />` helps you build things like volume controls and progress bars. Slightly counterintuitively, **it does not take a `value` prop**, but expects you to keep track of this yourself and render whatever you want inside it.\n\nWhat this component actually does is that it renders an element inside itself, on top of its children, which listens to mouse events and invokes change and intent callbacks with relative, normalised values based on those events.\n\n```js\n<Slider\n  direction={Direction.HORIZONTAL}\n  isEnabled\n  onIntent={intent => console.log(`hovered at ${intent}`)}\n  onIntentStart={intent => console.log(`entered with mouse at ${intent}`)}\n  onIntentEnd={() => console.log('left with mouse')}\n  onChange={newValue => console.log(`clicked at ${newValue}`)}\n  onChangeStart={startValue => console.log(`started dragging at ${startValue}`)}\n  onChangeEnd={endValue => console.log(`stopped dragging at ${endValue}`)}\n>\n  {/* Here we render whatever we want. Nothings is rendered by default. */}\n</Slider>\n```\n\n| Prop name | Default value | Description |\n|-----------|---------------|-------------|\n| `direction` | `Direction.HORIZONTAL` | The slider's direction |\n| `isEnabled` | `true` | Whether the slider is interactable |\n| `onIntent` | `() => {}` | A function that is invoked with the relative, normalised value at which the user is hovering (when not dragging). |\n| `onIntentStart` | `() => {}` | A function this is invoked with the relative, normalised value at which the user started hovering the slider (when not dragging). |\n| `onIntentEnd` | `() => {}` | A function this is invoked when the mouse left the slider area (when not dragging). |\n| `onChange` | `() => {}` | A function that is invoked with the latest relative, normalised value that the user has set by either clicking or dragging. |\n| `onChangeStart` | `() => {}` | A function that is invoked with the relative, normalised value at which the user started changing the slider's value. |\n| `onChangeEnd` | `() => {}` | A function that is invoked with the relative, normalised value at which the user stopped changing the slider's value. When the component unmounts, this function will be invoked with a value of `null`. |\n| `children` | `null` | Child elements. |\n| `className` | `null` | A string to set as the HTML `class` attribute. |\n| `style` | `{}` | Styles to set on the wrapping `div` element. |\n| `overlayZIndex` | 10 | The `z-index` of the invisible overlay that captures mouse events |\n\n\n## Recipies\n\n<details>\n<summary>Styled buttons with icons</summary>\n\n```js\nimport { Button, PlayerIcon } from 'react-player-controls'\n\n// A base component that has base styles applied to it\nconst PlayerButton = ({ style, children, ...props }) => (\n  <Button\n    style={{\n      appearance: 'none',\n      outline: 'none',\n      border: 'none',\n      borderRadius: 3,\n      background: 'white',\n      color: 'blue',\n      '&:hover': {\n        'color': 'lightblue',\n      },\n      ...style,\n    }}\n    {...props}\n  >\n    {children}\n  </Button>\n)\n\n// Compose buttons with matching icons. Use whatever icon library\n// you want. If you don't have any particular logic for each of the\n// buttons, you might not need this abstraction.\nconst PlayButton = props => <Button {...props}><PlayerIcon.Play /></Button>\nconst PauseButton = props => <Button {...props}><PlayerIcon.Pause /></Button>\nconst PreviousButton = props => <Button {...props}><PlayerIcon.Previous /></Button>\nconst NextButton = props => <Button {...props}><PlayerIcon.Next /></Button>\n```\n</details>\n\n<details>\n<summary>Styled slider</summary>\n\n```js\nimport { Direction, Slider } from 'react-player-controls'\n\nconst WHITE_SMOKE = '#eee'\nconst GRAY = '#878c88'\nconst GREEN = '#72d687'\n\n// A colored bar that will represent the current value\nconst SliderBar = ({ direction, value, style }) => (\n  <div\n    style={Object.assign({}, {\n      position: 'absolute',\n      background: GRAY,\n      borderRadius: 4,\n    }, direction === Direction.HORIZONTAL ? {\n      top: 0,\n      bottom: 0,\n      left: 0,\n      width: `${value * 100}%`,\n    } : {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      height: `${value * 100}%`,\n    }, style)}\n  />\n)\n\n// A handle to indicate the current value\nconst SliderHandle = ({ direction, value, style }) => (\n  <div\n    style={Object.assign({}, {\n      position: 'absolute',\n      width: 16,\n      height: 16,\n      background: GREEN,\n      borderRadius: '100%',\n      transform: 'scale(1)',\n      transition: 'transform 0.2s',\n      '&:hover': {\n        transform: 'scale(1.3)',\n      }\n    }, direction === Direction.HORIZONTAL ? {\n      top: 0,\n      left: `${value * 100}%`,\n      marginTop: -4,\n      marginLeft: -8,\n    } : {\n      left: 0,\n      bottom: `${value * 100}%`,\n      marginBottom: -8,\n      marginLeft: -4,\n    }, style)}\n  />\n)\n\n// A composite progress bar component\nconst ProgressBar = ({ isEnabled, direction, value, ...props }) => (\n  <Slider\n    isEnabled={isEnabled}\n    direction={direction}\n    onChange={/* store value somehow */}\n    style={{\n      width: direction === Direction.HORIZONTAL ? 200 : 8,\n      height: direction === Direction.HORIZONTAL ? 8 : 130,\n      borderRadius: 4,\n      background: WHITE_SMOKE,\n      transition: direction === Direction.HORIZONTAL ? 'width 0.1s' : 'height 0.1s',\n      cursor: isEnabled === true ? 'pointer' : 'default',\n    }}\n    {...props}\n  >\n    <SliderBar direction={direction} value={value} style={{ background: isEnabled ? GREEN : GRAY }} />\n    <SliderHandle direction={direction} value={value} style={{ background: isEnabled ? GREEN : GRAY }} />\n  </Slider>\n)\n\n// Now use <ProgressBar /> somewhere\n<ProgressBar\n  isEnabled\n  direction={Direction.HORIZONTAL}\n  value={currentTime / currentSong.duration}\n  onChange={value => seek(value * currentSong.duration)}\n/>\n```\n</details>\n\n<details>\n<summary>Playback controls</summary>\n\n```js\nimport { Button } from 'react-player-controls'\nimport Icon from 'some-icon-library'\n\nconst PlaybackControls = ({\n  isPlaying,\n  onPlaybackChange,\n  hasPrevious,\n  onPrevious,\n  hasNext,\n  onNext,\n}) => (\n  <div>\n    <Button disabled={hasPrevious === false} onClick={onPrevious}>\n      <Icon.Previous />\n    </Button>\n\n    <Button onClick={() => onPlaybackChange(!isPlaying)}>\n      {isPlaying ? <Icon.Pause /> : <Icon.Play />}\n    </Button>\n\n    <Button disabled={hasNext === false} onClick={onNext}>\n      <Icon.Next />\n    </Button>\n  </div>\n)\n\n// Use PlaybackControls in a player context\n<PlaybackControls\n  isPlaying={player.isPlaying}\n  onPlaybackChange={isPlaying => player.setIsPlaying(isPlaying)}\n  hasPrevious={songs.indexOf(currentSong) > 0}\n  hasNext={songs.indexOf(currentSong) < songs.length - 1}\n  onPrevious={player.setSong(songs[songs.indexOf(currentSong) - 1])}\n  onNext={player.setSong(songs[songs.indexOf(currentSong) + 1])}\n/>\n```\n</details>\n\n<details>\n<summary>Progress bar with buffer</summary>\n\n```js\nimport { Direction, Slider } from 'react-player-controls'\n\nconst Bar = ({ style, children, ...props }) => (\n  <div\n    style={{\n      height: 6,\n      width: '100%',\n      ...style,\n    }}\n  >\n    {children}\n  </div>\n)\n\nconst ProgressBarWithBuffer = ({\n  amountBuffered,\n  ...props,\n}) => (\n  <Slider\n    direction={Direction.HORIZONTAL}\n    {...props}\n  >\n    {/* Background bar */}\n    <Bar style={{ background: 'gray', width: '100%' }} />\n\n    {/* Buffer bar */}\n    <Bar style={{ background: 'silver', width: `${amountBuffered * 100}%` }} />\n\n    {/* Playtime bar */}\n    <Bar style={{ background: 'blue', width: `${100 * currentTime / duration}%` }} />\n  </Slider>\n)\n\n// Use buffer bar somewhere\n<ProgressBarWithBuffer\n  amountBuffered={secondsBuffered / duration}\n  {/* callback props etc */}\n/>\n```\n</details>\n\n<details>\n<summary>Progress bar that shows the target time on hover</summary>\n\n```js\nimport { Direction, FormattedTime, Slider } from 'react-player-controls'\n\n// Create a basic bar that represents time\nconst TimeBar = ({ children }) => (\n  <div\n    style={{\n      height: 6,\n      width: '100%',\n      background: 'gray',\n    }}\n  >\n    {children}\n  </div>\n)\n\n// Create a tooltip that will show the time\nconst TimeTooltip = ({ numSeconds, style = {} }) => (\n  <div\n    style={{\n      display: 'inline-block',\n      position: 'absolute',\n      bottom: '100%',\n      transform: 'translateX(-50%)',\n      padding: 8,\n      borderRadius: 3,\n      background: 'darkblue',\n      color: 'white',\n      fontSize: 12,\n      fontWeight: 'bold',\n      lineHeight: 16,\n      textAlign: 'center',\n      ...style,\n    }}\n  >\n    <FormattedTime numSeconds={numSeconds} />\n  </div>\n)\n\n// Create a component to keep track of user interactions\nclass BarWithTimeOnHover extends React.Component {\n  static propTypes = {\n    duration: PropTypes.number.isRequired,\n  }\n\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      // This will be a normalised value between 0 and 1,\n      // or null when not hovered\n      hoverValue: null,\n    }\n\n    this.handleIntent = this.handleIntent.bind(this)\n    this.handleIntentEnd = this.handleIntentEnd.bind(this)\n  }\n\n  handleIntent(value) {\n    this.setState({\n      hoverValue: value,\n    })\n  }\n\n  handleIntentEnd() {\n    // Note that this might not be invoked if the user ends\n    // a control change with the mouse outside of the slider\n    // element, so you might want to do this inside a\n    // onChangeEnd callback too.\n    this.setState({\n      hoverValue: null,\n    })\n  }\n\n  render() {\n    const { duration } = this.props\n    const { hoverValue } = this.state\n\n    return (\n      <Slider\n        direction={Direction.HORIZONTAL}\n        style={{\n          position: 'relative',\n        }}\n        onIntent={this.handleIntent}\n        onIntentEnd={this.handleIntentEnd}\n      >\n        <TimeBar />\n\n        {hoverValue !== null && (\n          <TimeTooltip\n            numSeconds={hoverValue * duration}\n            style={{\n              left: `${hoverValue * 100}%`,\n            }}\n          />\n        )}\n      </Slider>\n    )\n  }\n}\n\n// Let's use it somewhere\n<BarWithTimeOnHover duration={video.duration} />\n```\n</details>\n\n<details>\n<summary>Base CSS styles (as seen on the docs page)</summary>\n\n```css\n/* Root slider component */\n.slider {\n  position: relative;\n}\n\n.slider.is-horizontal {\n  width: 200px;\n  height: 8px;\n}\n\n.slider.is-vertical {\n  width: 8px;\n  height: 200px;\n}\n\n/* Bars – can be progress. value, buffer or whatever */\n.bar {\n  position: absolute;\n  border-radius: 50%;\n}\n\n.bar.is-background {\n  background: #878c88;\n}\n\n.bar.is-value {\n  background: #72d687;\n}\n\n.bar.is-horizontal {\n  top: 0;\n  bottom: 0;\n  left: 0;\n  /* width: set dynamically in js */;\n  height: 100%;\n}\n\n.bar.is-vertical {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  /* height: set dynamically in js */;\n}\n\n/* Slider handle */\n.handle {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  background: 'green';\n  border-radius: 50%;\n  transform: scale(1);\n  transition: transform 0.2s;\n}\n\n.handle:hover {\n  transform: scale(1.3);\n}\n\n.handle.is-horizontal {\n  top: 0;\n  /* left: set dynamically in js to x %; */\n  margin-top: -4px;\n  margin-left: -8px;\n}\n\n.handle.is-vertical {\n  left: 0;\n  /* bottom: set dynamically in js to x %; */\n  margin-bottom: -8px;\n  margin-left: -4px;\n}\n```\n</details>\n\n\n## Contribute\n\nContributions are very welcome, no matter your experience! Please submit a PR and we'll take it from there.\n","readmeFilename":"README.md"}