[
{
"path": ".babelrc.js",
"content": "const TEST = process.env.BABEL_ENV === 'test';\nconst CJS = process.env.BABEL_ENV === 'cjs';\n\nmodule.exports = {\n presets: [\n ['@babel/env', {\n modules: TEST || CJS ? 'commonjs' : false,\n loose: true,\n targets: TEST ? { node: 'current' } : {},\n }],\n '@babel/react',\n ],\n plugins: TEST ? [\n 'dynamic-import-node',\n ] : [],\n};\n"
},
{
"path": ".editorconfig",
"content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# editorconfig.org\n\nroot = true\n\n\n[*]\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nindent_style = space\nindent_size = 2\n\n\n[*.js]\nindent_style = space\nindent_size = 2\n\n\n[*.md]\ntrim_trailing_whitespace = false\n"
},
{
"path": ".eslintignore",
"content": "node_modules\nexample/bundle.js\ndist\n"
},
{
"path": ".eslintrc.js",
"content": "module.exports = {\n extends: 'airbnb',\n parserOptions: {\n ecmaVersion: 2022,\n sourceType: 'module',\n },\n rules: {\n // I disagree\n 'react/jsx-filename-extension': 'off',\n // I disagree\n 'react/require-default-props': 'off',\n // Our babel config doesn't support class properties\n 'react/state-in-constructor': 'off',\n 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],\n 'jsx-a11y/label-has-for': ['error', {\n components: [],\n required: {\n some: ['nesting', 'id'],\n },\n allowChildren: false,\n }],\n },\n};\n"
},
{
"path": ".github/dependabot.yml",
"content": "version: 2\nupdates:\n- package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: weekly\n open-pull-requests-limit: 10\n- package-ecosystem: github-actions\n directory: \"/\"\n schedule:\n interval: weekly\n"
},
{
"path": ".github/workflows/ci.yml",
"content": "name: CI\n\non: [push, pull_request]\n\njobs:\n types:\n name: Types\n runs-on: ubuntu-latest\n steps:\n - name: Checkout sources\n uses: actions/checkout@v4\n - name: Install Node.js\n uses: actions/setup-node@v4\n with:\n node-version: lts/*\n - name: Install dependencies\n run: npm install\n - name: Check types\n run: npm run tsd\n\n lint:\n name: Code style\n runs-on: ubuntu-latest\n steps:\n - name: Checkout sources\n uses: actions/checkout@v4\n - name: Install Node.js\n uses: actions/setup-node@v4\n with:\n node-version: lts/*\n - name: Install dependencies\n run: npm install\n - name: Check code style\n run: npm run lint\n\n test:\n name: Tests\n strategy:\n fail-fast: false\n matrix:\n node-version: [16.x, 18.x, 20.x]\n react-version: [17.x, 18.x, 19.x]\n include:\n - node-version: 14.x\n react-version: 16.0.0\n runs-on: ubuntu-latest\n steps:\n - name: Checkout sources\n uses: actions/checkout@v4\n - name: Install Node.js ${{matrix.node-version}}\n uses: actions/setup-node@v4\n with:\n node-version: ${{matrix.node-version}}\n - name: Install dependencies\n run: npm install\n - name: Install React ${{matrix.react-version}}\n if: matrix.react-version != '18.x'\n run: |\n npm install --save-dev \\\n react@${{matrix.react-version}} \\\n react-dom@${{matrix.react-version}}\n - name: Run tests\n run: npm run tests-only\n"
},
{
"path": ".github/workflows/deploy.yml",
"content": "name: Deploy\n\non:\n push:\n branches:\n - default\n\njobs:\n publish:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n - name: Install\n run: npm install\n - name: Run tests\n run: npm test\n - name: Build example\n run: |\n npm run example\n mkdir _deploy\n cp example/bundle.js example/index.html _deploy\n - name: Publish site\n if: success()\n uses: crazy-max/ghaction-github-pages@v4\n with:\n target_branch: gh-pages\n build_dir: _deploy\n keep_history: true\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n"
},
{
"path": ".gitignore",
"content": "node_modules\n/dist\n/example/bundle.js\n/generated-docs.md\n.eslintcache\npackage-lock.json\n"
},
{
"path": ".npmignore",
"content": ".eslintcache\nnode_modules\n/tools\n/example\n/generated-docs.md\n"
},
{
"path": ".npmrc",
"content": "package-lock=false\n"
},
{
"path": "CHANGELOG.md",
"content": "# @u-wave/react-vimeo change log\n\nAll notable changes to this project will be documented in this file.\n\nThis project adheres to [Semantic Versioning](http://semver.org/).\n\n## 0.9.12\n * Add React 19 to supported `peerDependencies` range. (#282)\n\n## 0.9.11\n * Fix type bug. (d0d38a84d4b5f3f94d6aaad681d0f90492c8ef4c)\n\n## 0.9.10\n * Fix npm package keywords. (bb944df)\n\n## 0.9.9\n * Bump minimum `@vimeo/player` version. (@k-p-jones in #191)\n * Document `controls` as pro-account-only. (fd61877)\n * Add `onPlaying` event, fix documentation for `onPlay`. (@Aliath in #212)\n * Add `playbackRate` prop. (@chidimi in #220)\n * Support changing the `quality` prop during playback. (941b68b)\n * Add support for passing a URL to the `video` prop, eg. for embedding private videos. (e7128b6)\n\n## 0.9.8\n * Fix a warning about workspaces when installing with yarn. (#190)\n\n## 0.9.7\n * Add React 18 to supported `peerDependencies` range. (@dockwarder in #189)\n * Accept typings from React 17 and 18 … hopefully npm picks the correct version for you :)\n\n## 0.9.6\n * Add `textTrack`, `playsInline`, `pip`, `keyboard`, `quality` props. (@thanhsonng in #178)\n\n## 0.9.5\n * Add the `dnt` prop to the typescript definitions. (@k-p-jones in #140)\n\n## 0.9.4\n * Add prop for the `speed` player option. (@warrenmcquinn in #128)\n\n This option enables speed controls so the user can select speeds in the Vimeo frame UI,\n it does not itself control the playback rate.\n\n## 0.9.3\n * Add prop for the `dnt` player option. (@k-p-jones in #125)\n\n## 0.9.2\n * Add prop for the `onPlaybackRateChange` event. (@houmark in #120)\n\n## 0.9.1\n * Add React 17 to allowed peerDependency range. (#114)\n\n## 0.9.0\n * Add typescript typings. (#103)\n\n## 0.8.3\n * Set `sideEffects: false` in package.json.\n * Add `style` pass-through property to set CSS properties on the container element. (@Authchirion in #100)\n\n## 0.8.2\n * Call `onError()` prop if initial load fails (#96).\n * Call `setCurrentTime()` after a new video has loaded. (#95)\n\n## 0.8.1\n * Add color string example to docs. (@ivoilic in #82)\n * Fix documentation for union prop types.\n\n## 0.8.0\n * Add `controls` prop, set to `controls={false}` to disable UI on videos uploaded by pro accounts. (@ljmsouza in #81)\n\n## 0.7.0\n * Add `responsive` prop that automatically fills the parent element. (@deJong in #80)\n\n## 0.6.0\n * Add working `onReady` callback. You can use it to get access to the raw [@vimeo/player](https://github.com/vimeo/player.js) instance.\n\n## 0.5.0\n * Clean up the `@vimeo/player` instance when unmounting.\n\n## 0.4.0\n * Add `muted` and `background` props from new Vimeo player. (@pgib in #5)\n"
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2016 Renée Kooi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# @u-wave/react-vimeo\n\nVimeo player component for React.\n\n[Install][] - [Usage][] - [Demo][] - [Props][]\n\n## Install\n\n```\nnpm install --save @u-wave/react-vimeo\n```\n\n## Usage\n\n[Demo][] - [Demo source code][]\n\n```js\nimport Vimeo from '@u-wave/react-vimeo';\n\n\n```\n\n## Props\n| Name | Type | Default | Description |\n|:-----|:-----|:-----|:-----|\n| video | number, string | | A Vimeo video ID or URL. |\n| id | string | | DOM ID for the player element. |\n| className | string | | CSS className for the player element. |\n| style | object | | Inline style for container element. |\n| width | number, string | | Width of the player element. |\n| height | number, string | | Height of the player element. |\n| paused | bool | | Pause the video. |\n| volume | number | | The playback volume as a number between 0 and 1. |\n| start | number | | The time in seconds at which to start playing the video. |\n| autopause | bool | true | Pause this video automatically when another one plays. |\n| autoplay | bool | false | Automatically start playback of the video. Note that this won’t work on some devices. |\n| showByline | bool | true | Show the byline on the video. |\n| color | string | | Specify the color of the video controls. Colors may be overridden by the embed settings of the video. _(Ex: \"ef2f9f\")_ |\n| dnt | bool | false | Blocks the player from tracking any session data, including all cookies and analytics. |\n| controls | bool | true | Hide all elements in the player, such as the progress bar, sharing buttons, etc. (requires Vimeo PRO / Business account) |\n| loop | bool | false | Play the video again when it reaches the end. |\n| showPortrait | bool | true | Show the portrait on the video. |\n| showTitle | bool | true | Show the title on the video. |\n| muted | bool | false | Starts in a muted state to help with autoplay |\n| background | bool | false | Starts in a background state with no controls to help with autoplay |\n| responsive | bool | false | Enable responsive mode and resize according to parent element (experimental) |\n| playbackRate | number | | Specify playback rate (requires Vimeo PRO / Business account)\n| speed | bool | false | Enable playback rate controls (requires Vimeo PRO / Business account) |\n| keyboard | bool | true | Allows for keyboard input to trigger player events. |\n| pip | bool | false | Show the picture-in-picture button in the controlbar and enable the picture-in-picture API. |\n| playsInline | bool | true | Play video inline on mobile devices, to automatically go fullscreen on playback set this parameter to false. |\n| quality | string | | Vimeo Plus, PRO, and Business members can default an embedded video to a specific quality on desktop. |\n| textTrack | string | | Turn captions/subtitles on for a specific language by default. |\n| transparent | bool | true | The responsive player and transparent background are enabled by default, to disable set this parameter to false. |\n| onReady | function | | Sent when the Vimeo player API has loaded. Receives the Vimeo player object in the first parameter. |\n| onError | function | | Sent when the player triggers an error. |\n| onPlay | function | | Triggered when video playback is initiated. |\n| onPlaying | function | | Triggered when the video starts playing. |\n| onPause | function | | Triggered when the video pauses. |\n| onEnd | function | | Triggered any time the video playback reaches the end. Note: when `loop` is turned on, the ended event will not fire. |\n| onTimeUpdate | function | | Triggered as the `currentTime` of the video updates. It generally fires every 250ms, but it may vary depending on the browser. |\n| onProgress | function | | Triggered as the video is loaded. Reports back the amount of the video that has been buffered. |\n| onSeeked | function | | Triggered when the player seeks to a specific time. An `onTimeUpdate` event will also be fired at the same time. |\n| onTextTrackChange | function | | Triggered when the active text track (captions/subtitles) changes. The values will be `null` if text tracks are turned off. |\n| 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. |\n| onCuePoint | function | | Triggered when the current time hits a registered cue point. |\n| 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. |\n| onPlaybackRateChange | function | | Triggered when the playback rate changes. |\n| onLoaded | function | | Triggered when a new video is loaded in the player. |\n\n## Related\n\n - [@u-wave/react-youtube][] - A YouTube component with a similar declarative API.\n - [react-dailymotion][] - A Dailymotion component with a similar declarative API.\n\n## License\n\n[MIT]\n\n[Install]: #install\n[Usage]: #usage\n[Props]: #props\n[Demo]: https://u-wave.github.io/react-vimeo\n[Demo source code]: ./example\n[MIT]: ./LICENSE\n[@u-wave/react-youtube]: https://github.com/u-wave/react-youtube\n[react-dailymotion]: https://github.com/u-wave/react-dailymotion\n"
},
{
"path": "example/.babelrc.js",
"content": "module.exports = require('../.babelrc');\n"
},
{
"path": "example/app.js",
"content": "/* global document */\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Vimeo from '@u-wave/react-vimeo'; // eslint-disable-line import/no-unresolved\n\nconst videos = [\n { id: 115783408, name: 'Jambinai - Connection' },\n { id: 162959050, name: 'Jambinai - They Keep Silence' },\n { id: 169408731, name: 'Hoody - Like You' },\n];\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n videoIndex: 0,\n volume: 1,\n paused: false,\n };\n\n this.handlePause = this.handlePause.bind(this);\n this.handlePlayerPause = this.handlePlayerPause.bind(this);\n this.handlePlayerPlay = this.handlePlayerPlay.bind(this);\n this.handleVolume = this.handleVolume.bind(this);\n }\n\n handlePause(event) {\n this.setState({\n paused: event.target.checked,\n });\n }\n\n handlePlayerPause() {\n this.setState({ paused: true });\n }\n\n handlePlayerPlay() {\n this.setState({ paused: false });\n }\n\n handleVolume(event) {\n this.setState({\n volume: parseFloat(event.target.value),\n });\n }\n\n selectVideo(index) {\n this.setState({ videoIndex: index });\n }\n\n render() {\n const { videoIndex, paused, volume } = this.state;\n\n const video = videos[videoIndex];\n return (\n
\n \n \n \n\n"
},
{
"path": "example/package.json",
"content": "{\n \"private\": true,\n \"name\": \"@u-wave/react-vimeo-example\",\n \"description\": \"@u-wave/react-vimeo example.\",\n \"version\": \"0.0.0-example\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"build\": \"esbuild --bundle app.js --loader:.js=jsx --sourcemap=inline --minify > bundle.js\",\n \"start\": \"serve .\"\n },\n \"dependencies\": {\n \"@u-wave/react-vimeo\": \"file:..\",\n \"esbuild\": \"^0.14.0\",\n \"react\": \"^18.0.0\",\n \"react-dom\": \"^18.0.0\",\n \"serve\": \"^13.0.2\"\n }\n}\n"
},
{
"path": "index.d.ts",
"content": "import * as React from 'react'\nimport Player, { Error } from '@vimeo/player'\n\nexport type PlayEvent = {\n /**\n * The length of the video in seconds.\n */\n duration: number\n /**\n * The amount of the video, in seconds, that has played.\n */\n seconds: number\n /**\n * The amount of the video that has played in comparison to the length of the video;\n * multiply by 100 to obtain the percentage.\n */\n percent: number\n}\n\nexport type PlayingEvent = PlayEvent;\n\nexport type PauseEvent = {\n /**\n * The length of the video in seconds.\n */\n duration: number\n /**\n * The amount of the video, in seconds, that has played to the pause position.\n */\n seconds: number\n /**\n * The amount of the video that has played to the pause position in comparison to the length of the video; multiply by 100 to obtain the percentage.\n */\n percent: number\n}\n\nexport type EndEvent = PauseEvent\n\nexport type TimeUpdateEvent = {\n /**\n * The length of the video in seconds.\n */\n duration: number\n /**\n * The amount of the video, in seconds, that has played from the current playback position.\n */\n seconds: number\n /**\n * The amount of the video that has played from the current playback position in comparison to the length of the video; multiply by 100 to obtain the percentage.\n */\n percent: number\n}\n\nexport type ProgressEvent = {\n /**\n * The length of the video in seconds.\n */\n duration: number\n /**\n * The amount of the video, in seconds, that has buffered.\n */\n seconds: number\n /**\n * The amount of the video that has buffered in comparison to the length of the video;\n * multiply by 100 to obtain the percentage.\n */\n percent: number\n}\n\nexport type SeekedEvent = {\n /**\n * The length of the video in seconds.\n */\n duration: number\n /**\n * The amount of the video, in seconds, that has played from the new seek position.\n */\n seconds: number\n /**\n * The amount of the video that has played from the new seek position in comparison to the length of the video; multiply by 100 to obtain the percentage.\n */\n percent: number\n}\n\nexport type TextTrackEvent = {\n kind: 'captions' | 'subtitles'\n label: string\n language: string\n}\n\nexport type Cue = {\n html: string\n text: string\n}\n\nexport type CueChangeEvent = {\n cues: Cue[]\n kind: 'captions' | 'subtitles'\n label: string\n language: string\n}\n\nexport type CuePointEvent = {\n /**\n * The location of the cue point in seconds.\n */\n time: number\n /**\n * The ID of the cue point.\n */\n id: string\n /**\n * The custom data from the `addCuePoint()` call, or an empty object.\n */\n data: object\n}\n\nexport type VolumeEvent = {\n /**\n * The new volume level.\n */\n volume: number\n}\n\nexport type PlaybackRateEvent = {\n /**\n * The new playback rate.\n */\n playbackRate: number\n}\n\nexport type LoadEvent = {\n /**\n * The ID of the new video.\n */\n id: number\n}\n\nexport interface VimeoProps {\n /**\n * A Vimeo video ID or URL.\n */\n video: number | string\n /**\n * DOM ID for the player element.\n */\n id?: string\n /**\n * CSS className for the player element.\n */\n className?: string\n /**\n * Inline style for container element.\n */\n style?: React.CSSProperties\n /**\n * Width of the player element.\n */\n width?: number | string\n /**\n * Height of the player element.\n */\n height?: number | string\n\n /**\n * Pause the video.\n */\n paused?: boolean\n\n /**\n * The playback volume as a number between 0 and 1.\n */\n volume?: number\n\n /**\n * The time in seconds at which to start playing the video.\n */\n start?: number\n\n /**\n * Pause this video automatically when another one plays.\n */\n autopause?: boolean\n\n /**\n * Automatically start playback of the video. Note that this won’t work on\n * some devices.\n */\n autoplay?: boolean\n\n /**\n * Show the byline on the video.\n */\n showByline?: boolean\n\n /**\n * Specify the color of the video controls. Colors may be overridden by the\n * embed settings of the video. _(Ex: \"ef2f9f\")_\n */\n color?: string\n\n /**\n * Hide all elements in the player, such as the progress bar, sharing buttons, etc.\n * (requires Vimeo PRO / Business account)\n */\n controls?: boolean\n\n /**\n * Play the video again when it reaches the end.\n */\n loop?: boolean\n\n /**\n * Show the portrait on the video.\n */\n showPortrait?: boolean\n\n /**\n * Show the title on the video.\n */\n showTitle?: boolean\n\n /**\n * Starts in a muted state to help with autoplay\n */\n muted?: boolean\n\n /**\n * Starts in a background state with no controls to help with autoplay\n */\n background?: boolean\n\n /**\n * Enable responsive mode and resize according to parent element (experimental)\n */\n responsive?: boolean\n\n /**\n * Specify playback rate (requires Vimeo PRO / Business account)\n */\n playbackRate?: number\n\n /**\n * Enable playback rate controls (requires Vimeo PRO / Business account)\n */\n speed?: boolean\n\n /**\n * Blocks the player from tracking any session data, including all cookies and analytics\n */\n dnt?: boolean\n\n /**\n * Allows for keyboard input to trigger player events.\n */\n keyboard?: boolean\n\n /**\n * Show the picture-in-picture button in the controlbar\n * and enable the picture-in-picture API.\n */\n pip?: boolean\n\n /**\n * Play video inline on mobile devices, to automatically\n * go fullscreen on playback set this parameter to false.\n */\n playsInline?: boolean\n\n /**\n * Vimeo Plus, PRO, and Business members can default\n * an embedded video to a specific quality on desktop.\n */\n quality?: string\n\n /**\n * Turn captions/subtitles on for a specific language by default.\n */\n textTrack?: string\n\n /**\n * The responsive player and transparent background are enabled\n * by default, to disable set this parameter to false.\n */\n transparent?: boolean\n\n /**\n * Sent when the Vimeo player API has loaded.\n * Receives the Vimeo player object in the first parameter.\n */\n onReady?: (player: Player) => void\n /**\n * Sent when the player triggers an error.\n */\n onError?: (error: Error) => void\n /**\n * Triggered when video playback is initiated.\n */\n onPlay?: (event: PlayEvent) => void\n /**\n * Triggered when the video starts playing.\n */\n onPlaying?: (event: PlayingEvent) => void\n /**\n * Triggered when the video pauses.\n */\n onPause?: (event: PauseEvent) => void\n /**\n * Triggered any time the video playback reaches the end.\n * Note: when `loop` is turned on, the ended event will not fire.\n */\n onEnd?: (event: EndEvent) => void\n /**\n * Triggered as the `currentTime` of the video updates. It generally fires\n * every 250ms, but it may vary depending on the browser.\n */\n onTimeUpdate?: (event: TimeUpdateEvent) => void\n /**\n * Triggered as the video is loaded. Reports back the amount of the video\n * that has been buffered.\n */\n onProgress?: (event: ProgressEvent) => void\n /**\n * Triggered when the player seeks to a specific time. An `onTimeUpdate`\n * event will also be fired at the same time.\n */\n onSeeked?: (event: SeekedEvent) => void\n /**\n * Triggered when the active text track (captions/subtitles) changes. The\n * values will be `null` if text tracks are turned off.\n */\n onTextTrackChange?: (event: TextTrackEvent) => void\n /**\n * Triggered when the active cue for the current text track changes. It also\n * fires when the active text track changes. There may be multiple cues\n * active.\n */\n onCueChange?: (event: CueChangeEvent) => void\n /**\n * Triggered when the current time hits a registered cue point.\n */\n onCuePoint?: (event: CuePointEvent) => void\n /**\n * Triggered when the volume in the player changes. Some devices do not\n * support setting the volume of the video independently from the system\n * volume, so this event will never fire on those devices.\n */\n onVolumeChange?: (event: VolumeEvent) => void\n /**\n * Triggered when the playback rate in the player changes.\n */\n onPlaybackRateChange?: (event: PlaybackRateEvent) => void\n /**\n * Triggered when a new video is loaded in the player.\n */\n onLoaded?: (event: LoadEvent) => void\n}\n\n/**\n * Vimeo player component for React.\n */\nexport default class Vimeo extends React.Component {}\n"
},
{
"path": "index.test-d.tsx",
"content": "import { expectError, expectType } from 'tsd'\nimport * as React from 'react'\nimport Vimeo from '.'\n\n// Missing required prop `video`.\nexpectError()\n\n{\n const element = (\n {\n expectType(event.seconds)\n expectType(event.duration)\n expectType(event.percent)\n }}\n />\n )\n}\n\n{\n const element = \n}\n\n{\n const element = (\n {\n player.getCurrentTime()\n }}\n />\n )\n}\n\n{\n const element = (\n \n )\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"@u-wave/react-vimeo\",\n \"version\": \"0.9.12\",\n \"description\": \"Vimeo player component for React.\",\n \"main\": \"dist/react-vimeo.js\",\n \"module\": \"dist/react-vimeo.es.js\",\n \"types\": \"index.d.ts\",\n \"scripts\": {\n \"prepare\": \"npm run build\",\n \"build\": \"rollup -c\",\n \"lint\": \"eslint --cache .\",\n \"test\": \"npm run lint && npm run tests-only && npm run tsd\",\n \"tests-only\": \"cross-env BABEL_ENV=test mocha --require @babel/register test/*.js\",\n \"tsd\": \"tsd\",\n \"docs\": \"prop-types-table src/index.js | md-insert README.md --header Props -i\",\n \"example\": \"npm run --prefix example build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/u-wave/react-vimeo.git\"\n },\n \"keywords\": [\n \"vimeo\",\n \"react\",\n \"player\",\n \"react-component\",\n \"video\"\n ],\n \"author\": \"Renée Kooi \",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/u-wave/react-vimeo/issues\"\n },\n \"homepage\": \"https://github.com/u-wave/react-vimeo#readme\",\n \"dependencies\": {\n \"@types/react\": \"^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"@types/vimeo__player\": \"^2.10.0\",\n \"@vimeo/player\": \"^2.16.4\",\n \"prop-types\": \"^15.7.2\"\n },\n \"peerDependencies\": {\n \"react\": \"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.12.10\",\n \"@babel/preset-env\": \"^7.12.10\",\n \"@babel/preset-react\": \"^7.12.10\",\n \"@babel/register\": \"^7.12.10\",\n \"@rollup/plugin-babel\": \"^6.0.0\",\n \"@u-wave/react-vimeo-example\": \"file:example\",\n \"babel-plugin-dynamic-import-node\": \"^2.3.3\",\n \"cross-env\": \"^7.0.3\",\n \"eslint\": \"^8.2.0\",\n \"eslint-config-airbnb\": \"^19.0.0\",\n \"eslint-plugin-import\": \"^2.25.3\",\n \"eslint-plugin-jsx-a11y\": \"^6.5.1\",\n \"eslint-plugin-react\": \"^7.27.0\",\n \"eslint-plugin-react-hooks\": \"^4.3.0\",\n \"expect\": \"^1.20.2\",\n \"md-insert\": \"^2.0.0\",\n \"min-react-env\": \"^2.0.0\",\n \"mocha\": \"^10.0.0\",\n \"prop-types-table\": \"^1.0.0\",\n \"proxyquire\": \"^2.1.3\",\n \"react\": \"^18.0.0\",\n \"react-dom\": \"^18.0.0\",\n \"rollup\": \"^3.1.0\",\n \"tsd\": \"^0.32.0\"\n },\n \"sideEffects\": false\n}\n"
},
{
"path": "rollup.config.mjs",
"content": "import fs from 'fs';\nimport babel from '@rollup/plugin-babel';\n\nconst pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));\n\nprocess.env.BABEL_ENV = 'rollup';\n\nexport default {\n input: './src/index.js',\n output: [\n { format: 'cjs', file: pkg.main, exports: 'named' },\n { format: 'es', file: pkg.module },\n ],\n\n external: Object.keys(pkg.dependencies)\n .concat(Object.keys(pkg.peerDependencies)),\n plugins: [\n babel({\n babelHelpers: 'bundled',\n }),\n ],\n};\n"
},
{
"path": "src/eventNames.js",
"content": "export default {\n play: 'onPlay',\n playing: 'onPlaying',\n pause: 'onPause',\n ended: 'onEnd',\n timeupdate: 'onTimeUpdate',\n progress: 'onProgress',\n seeked: 'onSeeked',\n texttrackchange: 'onTextTrackChange',\n cuechange: 'onCueChange',\n cuepoint: 'onCuePoint',\n volumechange: 'onVolumeChange',\n playbackratechange: 'onPlaybackRateChange',\n error: 'onError',\n loaded: 'onLoaded',\n};\n"
},
{
"path": "src/index.js",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport Player from '@vimeo/player';\nimport eventNames from './eventNames';\n\nclass Vimeo extends React.Component {\n constructor(props) {\n super(props);\n\n this.refContainer = this.refContainer.bind(this);\n }\n\n componentDidMount() {\n this.createPlayer();\n }\n\n componentDidUpdate(prevProps) {\n // eslint-disable-next-line react/destructuring-assignment\n const changes = Object.keys(this.props).filter((name) => this.props[name] !== prevProps[name]);\n\n this.updateProps(changes);\n }\n\n componentWillUnmount() {\n this.player.destroy();\n }\n\n /**\n * @private\n */\n getInitialOptions() {\n const { video } = this.props;\n const videoType = /^https?:/i.test(video) ? 'url' : 'id';\n /* eslint-disable react/destructuring-assignment */\n return {\n [videoType]: video,\n width: this.props.width,\n height: this.props.height,\n autopause: this.props.autopause,\n autoplay: this.props.autoplay,\n byline: this.props.showByline,\n color: this.props.color,\n controls: this.props.controls,\n loop: this.props.loop,\n portrait: this.props.showPortrait,\n title: this.props.showTitle,\n muted: this.props.muted,\n background: this.props.background,\n responsive: this.props.responsive,\n dnt: this.props.dnt,\n speed: this.props.speed,\n keyboard: this.props.keyboard,\n pip: this.props.pip,\n playsinline: this.props.playsInline,\n quality: this.props.quality,\n texttrack: this.props.textTrack,\n transparent: this.props.transparent,\n };\n /* eslint-enable react/destructuring-assignment */\n }\n\n /**\n * @private\n */\n updateProps(propNames) {\n const { player } = this;\n propNames.forEach((name) => {\n // eslint-disable-next-line react/destructuring-assignment\n const value = this.props[name];\n switch (name) {\n case 'autopause':\n player.setAutopause(value);\n break;\n case 'color':\n player.setColor(value);\n break;\n case 'loop':\n player.setLoop(value);\n break;\n case 'volume':\n player.setVolume(value);\n break;\n case 'paused':\n player.getPaused().then((paused) => {\n if (value && !paused) {\n return player.pause();\n }\n if (!value && paused) {\n return player.play();\n }\n return null;\n });\n break;\n case 'width':\n case 'height':\n player.element[name] = value;\n break;\n case 'video':\n if (value) {\n const { start } = this.props;\n const loaded = player.loadVideo(value);\n // Set the start time only when loading a new video.\n // It seems like this has to be done after the video has loaded, else it just starts at\n // the beginning!\n if (typeof start === 'number') {\n loaded.then(() => {\n player.setCurrentTime(start);\n });\n }\n } else {\n player.unload();\n }\n break;\n case 'playbackRate':\n player.setPlaybackRate(value);\n break;\n case 'quality':\n player.setQuality(value);\n break;\n default:\n // Nothing\n }\n });\n }\n\n /**\n * @private\n */\n createPlayer() {\n const { start, volume, playbackRate } = this.props;\n\n this.player = new Player(this.container, this.getInitialOptions());\n\n Object.keys(eventNames).forEach((dmName) => {\n const reactName = eventNames[dmName];\n this.player.on(dmName, (event) => {\n // eslint-disable-next-line react/destructuring-assignment\n const handler = this.props[reactName];\n if (handler) {\n handler(event);\n }\n });\n });\n\n const { onError, onReady } = this.props;\n this.player.ready().then(() => {\n if (onReady) {\n onReady(this.player);\n }\n }, (err) => {\n if (onError) {\n onError(err);\n } else {\n throw err;\n }\n });\n\n if (typeof start === 'number') {\n this.player.setCurrentTime(start);\n }\n\n if (typeof volume === 'number') {\n this.updateProps(['volume']);\n }\n\n if (typeof playbackRate === 'number') {\n this.updateProps(['playbackRate']);\n }\n }\n\n /**\n * @private\n */\n refContainer(container) {\n this.container = container;\n }\n\n render() {\n const { id, className, style } = this.props;\n\n return (\n \n );\n }\n}\n\nif (process.env.NODE_ENV !== 'production') {\n Vimeo.propTypes = {\n /**\n * A Vimeo video ID or URL.\n */\n video: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n ]),\n /**\n * DOM ID for the player element.\n */\n id: PropTypes.string,\n /**\n * CSS className for the player element.\n */\n className: PropTypes.string,\n /**\n * Inline style for container element.\n */\n style: PropTypes.object, // eslint-disable-line react/forbid-prop-types\n /**\n * Width of the player element.\n */\n width: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n ]),\n /**\n * Height of the player element.\n */\n height: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n ]),\n\n /**\n * Pause the video.\n */\n paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types\n\n /**\n * The playback volume as a number between 0 and 1.\n */\n volume: PropTypes.number,\n\n /**\n * The time in seconds at which to start playing the video.\n */\n start: PropTypes.number,\n\n // Player parameters\n /**\n * Pause this video automatically when another one plays.\n */\n autopause: PropTypes.bool,\n\n /**\n * Automatically start playback of the video. Note that this won’t work on\n * some devices.\n */\n autoplay: PropTypes.bool,\n\n /**\n * Show the byline on the video.\n */\n showByline: PropTypes.bool,\n\n /**\n * Specify the color of the video controls. Colors may be overridden by the\n * embed settings of the video. _(Ex: \"ef2f9f\")_\n */\n color: PropTypes.string,\n\n /**\n * Blocks the player from tracking any session data, including all cookies and analytics.\n */\n dnt: PropTypes.bool,\n\n // Player controls\n /**\n * Hide all elements in the player, such as the progress bar, sharing buttons, etc.\n * (requires Vimeo PRO / Business account)\n */\n controls: PropTypes.bool,\n\n /**\n * Play the video again when it reaches the end.\n */\n loop: PropTypes.bool,\n\n /**\n * Show the portrait on the video.\n */\n showPortrait: PropTypes.bool,\n\n /**\n * Show the title on the video.\n */\n showTitle: PropTypes.bool,\n\n /**\n * Starts in a muted state to help with autoplay\n */\n muted: PropTypes.bool,\n\n /**\n * Starts in a background state with no controls to help with autoplay\n */\n background: PropTypes.bool,\n\n /**\n * Enable responsive mode and resize according to parent element (experimental)\n */\n responsive: PropTypes.bool,\n\n /**\n * Specify playback rate (requires Vimeo PRO / Business account)\n */\n playbackRate: PropTypes.number,\n\n /**\n * Enable playback rate controls (requires Vimeo PRO / Business account)\n */\n speed: PropTypes.bool,\n\n /**\n * Allows for keyboard input to trigger player events.\n */\n keyboard: PropTypes.bool,\n\n /**\n * Show the picture-in-picture button in the controlbar\n * and enable the picture-in-picture API.\n */\n pip: PropTypes.bool,\n\n /**\n * Play video inline on mobile devices, to automatically\n * go fullscreen on playback set this parameter to false.\n */\n playsInline: PropTypes.bool,\n\n /**\n * Vimeo Plus, PRO, and Business members can default\n * an embedded video to a specific quality on desktop.\n */\n quality: PropTypes.string,\n\n /**\n * Turn captions/subtitles on for a specific language by default.\n */\n textTrack: PropTypes.string,\n\n /**\n * The responsive player and transparent background are enabled\n * by default, to disable set this parameter to false.\n */\n transparent: PropTypes.bool,\n\n // Events\n /* eslint-disable react/no-unused-prop-types */\n\n /**\n * Sent when the Vimeo player API has loaded.\n * Receives the Vimeo player object in the first parameter.\n */\n onReady: PropTypes.func,\n /**\n * Sent when the player triggers an error.\n */\n onError: PropTypes.func,\n /**\n * Triggered when video playback is initiated.\n */\n onPlay: PropTypes.func,\n /**\n * Triggered when the video starts playing.\n */\n onPlaying: PropTypes.func,\n /**\n * Triggered when the video pauses.\n */\n onPause: PropTypes.func,\n /**\n * Triggered any time the video playback reaches the end.\n * Note: when `loop` is turned on, the ended event will not fire.\n */\n onEnd: PropTypes.func,\n /**\n * Triggered as the `currentTime` of the video updates. It generally fires\n * every 250ms, but it may vary depending on the browser.\n */\n onTimeUpdate: PropTypes.func,\n /**\n * Triggered as the video is loaded. Reports back the amount of the video\n * that has been buffered.\n */\n onProgress: PropTypes.func,\n /**\n * Triggered when the player seeks to a specific time. An `onTimeUpdate`\n * event will also be fired at the same time.\n */\n onSeeked: PropTypes.func,\n /**\n * Triggered when the active text track (captions/subtitles) changes. The\n * values will be `null` if text tracks are turned off.\n */\n onTextTrackChange: PropTypes.func,\n /**\n * Triggered when the active cue for the current text track changes. It also\n * fires when the active text track changes. There may be multiple cues\n * active.\n */\n onCueChange: PropTypes.func,\n /**\n * Triggered when the current time hits a registered cue point.\n */\n onCuePoint: PropTypes.func,\n /**\n * Triggered when the volume in the player changes. Some devices do not\n * support setting the volume of the video independently from the system\n * volume, so this event will never fire on those devices.\n */\n onVolumeChange: PropTypes.func,\n /**\n * Triggered when the playback rate changes.\n */\n onPlaybackRateChange: PropTypes.func,\n /**\n * Triggered when a new video is loaded in the player.\n */\n onLoaded: PropTypes.func,\n\n /* eslint-enable react/no-unused-prop-types */\n };\n}\n\nVimeo.defaultProps = {\n autopause: true,\n autoplay: false,\n showByline: true,\n controls: true,\n loop: false,\n showPortrait: true,\n showTitle: true,\n muted: false,\n background: false,\n responsive: false,\n dnt: false,\n speed: false,\n keyboard: true,\n pip: false,\n playsInline: true,\n transparent: true,\n};\n\nexport default Vimeo;\n"
},
{
"path": "test/.eslintrc.js",
"content": "module.exports = {\n extends: '../.eslintrc.js',\n env: {\n mocha: true,\n },\n rules: {\n // We have good reasons\n 'react/jsx-props-no-spreading': 'off',\n },\n};\n"
},
{
"path": "test/test.js",
"content": "import expect, { createSpy } from 'expect';\nimport render from './util/render';\n\ndescribe('Vimeo', () => {\n it('should create a Vimeo player when mounted', async () => {\n const onReady = createSpy();\n const { sdkMock, playerMock } = await render({\n video: 169408731,\n onReady,\n });\n expect(sdkMock).toHaveBeenCalled();\n expect(sdkMock.calls[0].arguments[1]).toMatch({ id: 169408731 });\n await playerMock.ready();\n expect(onReady).toHaveBeenCalled();\n expect(onReady.calls[0].arguments[0]).toBe(playerMock);\n });\n\n it('should use `url` prop for full vimeo URLs', async () => {\n const { sdkMock } = await render({ video: 'https://vimeo.com/179290396' });\n expect(sdkMock).toHaveBeenCalled();\n expect(sdkMock.calls[0].arguments[1]).toMatch({ url: 'https://vimeo.com/179290396' });\n });\n\n it('should all onError when `ready()` fails', async () => {\n const onError = createSpy();\n const { sdkMock } = await render({\n video: 404,\n shouldFail: true,\n onError,\n });\n await Promise.resolve();\n expect(sdkMock).toHaveBeenCalled();\n expect(sdkMock.calls[0].arguments[1]).toMatch({ id: 404 });\n expect(onError).toHaveBeenCalled();\n expect(onError.calls[0].arguments[0]).toEqual(new Error('artificial failure'));\n });\n\n it('should load a different video when \"video\" prop changes', async () => {\n const { sdkMock, playerMock, rerender } = await render({\n video: 169408731,\n });\n expect(sdkMock).toHaveBeenCalled();\n expect(sdkMock.calls[0].arguments[1]).toMatch({ id: 169408731 });\n\n await rerender({ video: 162959050 });\n\n expect(playerMock.loadVideo).toHaveBeenCalled();\n expect(playerMock.loadVideo.calls[0].arguments[0]).toEqual(162959050);\n });\n\n it('should pause the video using the \"paused\" prop', async () => {\n const { playerMock, rerender } = await render({\n video: 169408731,\n autoplay: true,\n });\n\n // Don't call `play` again when we were already playing\n await rerender({ paused: false });\n expect(playerMock.play).toNotHaveBeenCalled();\n\n await rerender({ paused: true });\n expect(playerMock.pause).toHaveBeenCalled();\n\n await rerender({ paused: false });\n expect(playerMock.play).toHaveBeenCalled();\n });\n\n it('should set the volume using the \"volume\" prop', async () => {\n const { playerMock, rerender } = await render({\n video: 169408731,\n volume: 0.5,\n });\n expect(playerMock.setVolume).toHaveBeenCalledWith(0.5);\n\n await rerender({ volume: 1 });\n\n expect(playerMock.setVolume).toHaveBeenCalledWith(1);\n });\n\n it('should set the start time using the \"start\" prop', async () => {\n const { playerMock, rerender } = await render({\n video: 169408731,\n start: 60,\n });\n expect(playerMock.setCurrentTime).toHaveBeenCalledWith(60);\n\n playerMock.setCurrentTime.reset();\n await rerender({ start: 90 });\n expect(playerMock.setCurrentTime).toNotHaveBeenCalled();\n\n await rerender({ video: 169408732, start: 120 });\n expect(playerMock.setCurrentTime).toHaveBeenCalledWith(120);\n });\n\n it('should set the player color using the \"color\" prop', async () => {\n const { playerMock, sdkMock, rerender } = await render({\n video: 169408731,\n color: '#0000ff',\n });\n expect(sdkMock).toHaveBeenCalled();\n expect(sdkMock.calls[0].arguments[1]).toMatch({ color: '#0000ff' });\n\n await rerender({ color: '#ff0000' });\n expect(playerMock.setColor).toHaveBeenCalledWith('#ff0000');\n await rerender({ color: '#00ff00' });\n expect(playerMock.setColor).toHaveBeenCalledWith('#00ff00');\n });\n\n it('should set the looping flag using the \"loop\" prop', async () => {\n const { playerMock, sdkMock, rerender } = await render({\n video: 169408731,\n loop: false,\n });\n expect(sdkMock).toHaveBeenCalled();\n expect(sdkMock.calls[0].arguments[1]).toMatch({ loop: false });\n\n await rerender({ loop: true });\n expect(playerMock.setLoop).toHaveBeenCalledWith(true);\n await rerender({ loop: false });\n expect(playerMock.setLoop).toHaveBeenCalledWith(false);\n });\n\n it('should set the iframe width/height using the width/height props', async () => {\n const { sdkMock, playerMock, rerender } = await render({\n video: 169408731,\n width: 640,\n height: 320,\n });\n expect(sdkMock.calls[0].arguments[1]).toMatch({\n width: 640,\n height: 320,\n });\n\n await rerender({\n width: '100%',\n height: 800,\n });\n\n expect(playerMock.setWidth).toHaveBeenCalledWith('100%');\n expect(playerMock.setHeight).toHaveBeenCalledWith(800);\n });\n\n it('should set the playback rate using the \"playbackRate\" props', async () => {\n const { playerMock, rerender } = await render({\n video: 169408731,\n playbackRate: 0.5,\n });\n\n expect(playerMock.setPlaybackRate).toHaveBeenCalledWith(0.5);\n\n await rerender({ playbackRate: 2 });\n\n expect(playerMock.setPlaybackRate).toHaveBeenCalledWith(2);\n });\n\n it('should destroy player when unmounting', async () => {\n const { playerMock, unmount } = await render({\n video: 169408731,\n width: 640,\n height: 320,\n });\n\n unmount();\n\n expect(playerMock.destroy).toHaveBeenCalled();\n });\n});\n"
},
{
"path": "test/util/createVimeo.js",
"content": "import { createSpy } from 'expect';\nimport proxyquire from 'proxyquire';\n\nexport default function createVimeo({ shouldFail = false } = {}) {\n let isPaused = true;\n\n const createPromiseSpy = () => createSpy().andCall(() => Promise.resolve());\n\n const playerMock = {\n on: createSpy(),\n ready() {\n return shouldFail\n ? Promise.reject(new Error('artificial failure'))\n : Promise.resolve();\n },\n setVolume: createPromiseSpy(),\n setPlaybackRate: createPromiseSpy(),\n setCurrentTime: createPromiseSpy(),\n setAutopause: createPromiseSpy(),\n setColor: createPromiseSpy(),\n setLoop: createPromiseSpy(),\n loadVideo: createPromiseSpy(),\n playing: createPromiseSpy(),\n unload: createPromiseSpy(),\n play: createSpy().andCall(() => {\n isPaused = false;\n }),\n pause: createSpy().andCall(() => {\n isPaused = true;\n }),\n getPaused() {\n return Promise.resolve(isPaused);\n },\n destroy: createSpy(),\n setWidth: createSpy(),\n setHeight: createSpy(),\n element: {\n set width(value) {\n playerMock.setWidth(value);\n },\n set height(value) {\n playerMock.setHeight(value);\n },\n },\n };\n\n const sdkMock = createSpy().andCall((container, options) => {\n isPaused = !options.autoplay;\n return playerMock;\n });\n\n const Vimeo = proxyquire.noCallThru().load('../../src/index.js', {\n '@vimeo/player': function Player(...args) {\n return sdkMock(...args);\n },\n }).default;\n\n return { Vimeo, sdkMock, playerMock };\n}\n"
},
{
"path": "test/util/render.js",
"content": "/**\n * Taken from react-youtube's tests at\n * https://github.com/troybetz/react-youtube\n */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { act } from 'react-dom/test-utils';\n// Doing this after React is loaded makes React do a bit less DOM work\nimport 'min-react-env/install';\nimport env from 'min-react-env';\nimport createVimeo from './createVimeo';\n\nconst reactMajor = parseInt((ReactDOM.version || '16').split('.')[0], 10);\n\nfunction noAct(fn) {\n return fn();\n}\n\nasync function render(initialProps) {\n const { Vimeo, sdkMock, playerMock } = createVimeo({\n shouldFail: initialProps.shouldFail,\n });\n\n let component;\n // Emulate changes to component.props using a container component's state\n class Container extends React.Component {\n constructor(ytProps) {\n super(ytProps);\n\n this.state = { props: ytProps };\n }\n\n render() {\n const { props } = this.state;\n\n return (\n { component = vimeo; }}\n {...props}\n />\n );\n }\n }\n\n const div = env.document.createElement('div');\n let root;\n if (reactMajor >= 18) {\n const { createRoot } = await import('react-dom/client');\n root = createRoot(div);\n } else {\n root = {\n render(element) {\n // eslint-disable-next-line react/no-deprecated\n ReactDOM.render(element, div);\n },\n unmount() {\n // eslint-disable-next-line react/no-deprecated\n ReactDOM.unmountComponentAtNode(div);\n },\n };\n }\n const container = await new Promise((resolve) => {\n root.render();\n });\n\n function rerender(newProps) {\n return (act || noAct)(async () => {\n container.setState({ props: newProps });\n });\n }\n\n function unmount() {\n root.unmount();\n }\n\n return {\n sdkMock,\n playerMock,\n component,\n rerender,\n unmount,\n };\n}\n\nexport default render;\n"
}
]