{"_id":"@albizures/react-native-youtube","_rev":"1-34544a7cc85a2e71fd02994ea4304c59","name":"@albizures/react-native-youtube","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@albizures/react-native-youtube","version":"1.1.0","description":"A <YouTube/> component for React Native.","main":"main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/inProgress-team/react-native-youtube.git"},"keywords":["youtube","react","react-native"],"author":{"name":"Param Aggarwal"},"license":"MIT","bugs":{"url":"https://github.com/inProgress-team/react-native-youtube/issues"},"homepage":"https://github.com/inProgress-team/react-native-youtube#readme","dependencies":{"prop-types":"^15.5.0"},"peerDependencies":{"react-native":">=0.37"},"devDependencies":{"prettier":"^1.10.2"},"rnpm":{"android":{"packageInstance":"new ReactNativeYouTube()"},"assets":["assets"]},"prettier":{"semi":true,"singleQuote":true,"trailingComma":"all","bracketSpacing":true,"printWidth":100},"gitHead":"b777987a83455350d7e7da90900230be39e1f59e","_id":"@albizures/react-native-youtube@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"albizures","email":"albizures3601@gmail.com"},"dist":{"integrity":"sha512-qEye0MZkDrK8wAM6SHtysaJRvw8KbviktjPXxhHRoymSolfy5RsCtKgnnIlxFG+YmbhxEGB48vaC92hWDLH5Cw==","shasum":"13e64113e621e0ae8691a96092b1c9e3a2792335","tarball":"https://registry.npmjs.org/@albizures/react-native-youtube/-/react-native-youtube-1.1.0.tgz","fileCount":36,"unpackedSize":376717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJczy2DCRA9TVsSAnZWagAA414P/1pHlna8f7valVzI1yyy\nU3stlmjhtlXjSuvy1RRDc3ZfYwUdVd1/41cY6uA/yTlB15yJR17Afn4Nrsh+\nAlj2SazeSGg1nrfTAK927XI+EjColYnuozq0pXMeck5G0jpqKjxp+Ab+HAYT\n06G6Gavi50uNA2VZJ5ju84HQjfr1wnzu5rh/qv4d08Zwqa0SDfBe9UlvB1Fz\nBkHhYZxHY3ziuyfZn9CAOZFKdlDqEyb/AoSN9qb0gfJ/tTngTf0rCH50C8vO\nqKvEu4KAHA+MXQw7ci/+TcMi0Od6+4754qiJmyWzJE9H3cqRpFgkOwZDzrN1\nrCgfSwwm7Wu+HltAFd3YCIWk+ahsHw87rVXzuqkiwX3Q2QG9ukitGvbRSvlW\nPDPJDfSVe5SQASFNu8HIhJ6AcqhkZSZy9h0QjOeCJmipYdhsetkL4/6sVZcN\n9uEfqP1TiGfCe22iNeUYTNzfg7xiEiaEyMCpWjhGC8JLOANHXhr5U6eGpDEW\ntSMin9csBFvedT3L4kzLnD7Zo/s5kJbZcGNNxgsrrWTJLdRT3deSi0KD15iL\nJkCQq1NXhcc7rhYIz3OZvrqNe2zjZzTU/THfgmuPoI66jBO6wYgQjiJ/kFw+\nN1UdDKH1SrNRMa+SSz59LlSs8nKFWaK8spyPe50tw8/9kDW43k80tNFumdaz\n3UAF\r\n=51nk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSwRc/NUE3NnBH4d9UFOfQmVz7sEHoYz5cvbarYDLuqwIgXo5jQ3OEylPgjLMZQiCiERye1XiKTUB2G6jYdNbwOOE="}]},"maintainers":[{"name":"albizures","email":"albizures3601@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-youtube_1.1.0_1557081474486_0.12600697403036443"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-05T18:37:54.458Z","1.1.0":"2019-05-05T18:37:54.680Z","modified":"2022-04-04T12:35:30.110Z"},"maintainers":[{"name":"albizures","email":"albizures3601@gmail.com"}],"description":"A <YouTube/> component for React Native.","homepage":"https://github.com/inProgress-team/react-native-youtube#readme","keywords":["youtube","react","react-native"],"repository":{"type":"git","url":"git+https://github.com/inProgress-team/react-native-youtube.git"},"author":{"name":"Param Aggarwal"},"bugs":{"url":"https://github.com/inProgress-team/react-native-youtube/issues"},"license":"MIT","readme":"# react-native-youtube [![react-native-youtube](http://img.shields.io/npm/dm/react-native-youtube.svg)](https://www.npmjs.org/package/react-native-youtube) [![npm version](https://badge.fury.io/js/react-native-youtube.svg)](http://badge.fury.io/js/react-native-youtube) [![Dependency Status](https://david-dm.org/inProgress-team/react-native-youtube.svg)](https://david-dm.org/inProgress-team/react-native-youtube)\nA `<YouTube />` component for React Native.\n\nUses Google's official [youtube-ios-player-helper](https://github.com/youtube/youtube-ios-player-helper) for iOS and [YouTube Android Player API](https://developers.google.com/youtube/android/player/) for Android and exposes much of the API, as declaratively as possible, into React Native.\n\n**[Having problems with Android? Please read this first](https://github.com/inProgress-team/react-native-youtube#known-issues)**\n\n## Screenshot\n![Screenshot of the example app](https://github.com/inProgress-team/react-native-youtube/raw/master/Screenshot.png)\n\n## Usage\n```javascript\n<YouTube\n  videoId=\"KVZ-P-ZI6W4\"   // The YouTube video ID\n  play={true}             // control playback of video with true/false\n  fullscreen={true}       // control whether the video should play in fullscreen or inline\n  loop={true}             // control whether the video should loop when ended\n\n  onReady={e => this.setState({ isReady: true })}\n  onChangeState={e => this.setState({ status: e.state })}\n  onChangeQuality={e => this.setState({ quality: e.quality })}\n  onError={e => this.setState({ error: e.error })}\n\n  style={{ alignSelf: 'stretch', height: 300 }}\n/>\n```\n\n## API\n### YouTube Component\n#### Importing\n```javascript\nimport YouTube from 'react-native-youtube'\n```\n#### Properties\n* `apiKey` (string, *Android*): Your YouTube developer API Key. This parameter is **required**. [More Info](https://developers.google.com/youtube/android/player/register).\n* `videoId` (string): The YouTube video ID to play. Can be changed while mounted to change the video playing.\n* `videoIds` (strings array): YouTube video IDs to be played as an interactive playlist. Can be changed while mounted. Overridden at start by `videoId`.\n* `playlistId` (string): A YouTube Playlist's ID to play as an interactive playlist.\nCan be changed while mounted. Overridden at start by `videoId` and `videoIds`.\n* `play` (boolean): Controls playback of video with `true`/`false`. Setting it as `true` in the beginning itself makes the video autoplay on loading. Default: `false`.\n* `loop` (boolean): Loops the video. Default: `false`.\n* `fullscreen` (boolean): Controls whether the video should play inline or in fullscreen. Default: `false`.\n* `controls` (number): Sets the player's controls scheme. Supported values are `0`, `1`, `2`. Default: `1`. On iOS the numbers conform to [These Parameters](https://developers.google.com/youtube/player_parameters?hl=en#controls). On Android the mapping is `0 = CHROMELSEE`, `1 = DEFAULT`, `2 = MINIMAL` ([More Info](https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer.PlayerStyle)).\n* `showFullscreenButton` (boolean): Show or hide Fullscreen button. Default: `true`.\n* `showinfo` (boolean, *iOS*): Setting the parameter's value to false causes the player to not display information like the video title and uploader before the video starts playing. Default: `true`.\n* `modestbranding` (boolean, *iOS*): This parameter lets you use a YouTube player that does not show a YouTube logo. Default: `false`.\n* `origin` (string, *iOS*): This parameter provides an extra security measure for the iFrame API.\n* `rel` (boolean, *iOS*): Show related videos at the end of the video. Default: `true`.\n* `resumePlayAndroid` (boolean, *Android*): Makes the video resume playback after the app resumes from background. Default: `true`.\n\nThe iOS implementation of this player uses the official YouTube iFrame under the hood, so most parameters behavior [can be further understood here.](https://developers.google.com/youtube/player_parameters)\n\n#### Events\n* `onReady`: Called once when the video player is setup.\n* `onChangeState`: Sends the current state of the player on `e.state`. Common values are `buffering`/`playing`/`paused` and more (on Android there is also a `seeking` state that comes with the location of the playback in seconds on `e.currentTime`).\n* `onChangeQuality`: Sends the current quality of video playback on `e.quality`.\n* `onError`: Sends any errors before and during video playback on `e.error`.\n* `onChangeFullscreen`: Called when the player enters or exits the fullscreen mode on `e.isFullscreen`.\n* `onProgress` *(iOS)*: Called every 500ms with the time progress of the playback on `e.currentTime` and also duration on `e.duration`.\n\n#### Methods\n* `seekTo(seconds)`: Seeks to a specified time in the video.\n* `nextVideo()`: Skip to next video on a playlist (`videoIds` or `playlistId`). When `loop` is true, will skip to the first video from the last. If called on a single video, will restart the video.\n* `previousVideo()`: opposite of `nextVideo()`.\n* `playVideoAt(index)`: Will start playing the video at `index` (zero-based) position in a playlist (`videoIds` or `playlistId`. Not supported for `playlistId` on Android).\n* `videosIndex()`: Returns a Promise that results with the `index` (zero-based) number of the video currently played in a playlist (`videoIds` or `playlistId`. Not supported for `playlistId` on Android) or errors with an errorMessage string.\n* `currentTime()`: Returns a Promise that results with the `currentTime` of the played video (in seconds) or errors with an errorMessage string. Should be used as an alternative for Android to `onProgress` event on iOS.\n* `duration()` *(Android)*: Returns a Promise that results with the `duration` of the played video (in seconds) or errors with an errorMessage string. Should be used as an alternative for Android to `onProgress` event on iOS.\n* `reloadIframe()` *(iOS)*: Specific props (`fullscreen`, `modestbranding`, `showinfo`, `rel`, `controls`, `origin`) can only be set at mounting and initial loading of the underlying WebView that holds the YouTube iFrame (Those are `<iframe>` parameters). If you want to change one of them during the lifecycle of the component, you should know the usability cost of loading the WebView again, and use this method right after the component received the updated prop.\n\n### Standalone Player (iOS)\n#### Setup\nStandalone iOS player Uses [XCDYoutubeKit](https://github.com/0xced/XCDYouTubeKit) (**Warning**: XCDYoutubeKit doesn't conform to YouTube's Terms Of Use). Add the next line to your `Podfile` and run `pod install` inside `/ios` folder:\n```\npod 'XCDYouTubeKit', '~> 2.5'\n```\n\n#### Importing\n```javascript\nimport { YouTubeStandaloneIOS } from 'react-native-youtube';\n```\n\n#### Example\n```javascript\nYouTubeStandaloneIOS.playVideo('KVZ-P-ZI6W4')\n  .then(() => console.log('Standalone Player Exited'))\n  .catch(errorMessage => console.error(errorMessage))\n```\n\n#### `YouTubeStandaloneIOS.playVideo(videoId)` (Static)\nA static method that returns a Promise to launch a standalone YouTube player with a specific video.\n\n* `videoId` (string): The YouTube Video ID to play. **Required**.\n\n### Standalone Player (Android)\n#### Importing\n```javascript\nimport { YouTubeStandaloneAndroid } from 'react-native-youtube';\n```\n\n#### Example\n```javascript\nYouTubeStandaloneAndroid.playVideo({\n  apiKey: 'YOUR_API_KEY',     // Your YouTube Developer API Key\n  videoId: 'KVZ-P-ZI6W4',     // YouTube video ID\n  autoplay: true,             // Autoplay the video\n  startTime: 120,             // Starting point of video (in seconds)\n})\n  .then(() => console.log('Standalone Player Exited'))\n  .catch(errorMessage => console.error(errorMessage))\n```\n\n#### `YouTubeStandaloneAndroid.playVideo(options)` (Static)\nA static method that returns a Promise to launch a standalone YouTube player with a specific video.\n\n`options` is an object with properties:\n* `apiKey` (string): Your developer YouTube API key. **Required**.\n* `videoId` (string): The YouTube Video ID to play. **Required**.\n* `autoplay` (boolean): Should the video start automatically, Default: `false`.\n* `lightboxMode` (boolean): Should the video play inside a lightbox instead of fullscreen. Default: `false`.\n* `startTime` (number): Optional starting time of the video (in seconds). Default: `0`.\n\n#### `YouTubeStandaloneAndroid.playVideos(options)` (Static)\nA static method that returns a Promise to launch a standalone YouTube player with a specific video.\n\n`options` is an object with properties:\n* `apiKey` (string): Your developer YouTube API key. **Required**.\n* `videoIds` (strings array): The list of video IDs to be played. **Required**.\n* `autoplay` (boolean): Should the video start automatically, Default: `false`.\n* `lightboxMode` (boolean): Should the video play inside a lightbox instead of fullscreen. Default: `false`.\n* `startIndex` (number): The index position of the video to play first. Default: `0`.\n* `startTime` (number): Optional starting time of the video (in seconds). Default: `0`.\n\n#### `YouTubeStandaloneAndroid.playPlaylist(options)` (Static)\nA static method that returns a Promise to launch a standalone YouTube player with a specific video.\n\n`options` is an object with properties:\n* `apiKey` (string): Your developer YouTube API key. **Required**.\n* `playlistId` (string): The YouTube Playlist ID to play. **Required**.\n* `autoplay` (boolean): Should the video start automatically, Default: `false`.\n* `lightboxMode` (boolean): Should the video play inside a lightbox instead of fullscreen. Default: `false`.\n* `startIndex` (number): The index position of the video to play first. Default: `0`.\n* `startTime` (number): Optional starting time of the video (in seconds). Default: `0`.\n\n## Installation\nThis component is confirmed to be working on react-native ~0.37 - ~0.45\n\nInstall the latest version to your `package.json`:\n\n`$ npm install react-native-youtube -S`\n\nLink the library to your iOS and Android projects with:\n\n`$ react-native link`\n\n**IMPORTANT! (iOS Only)**: To link `assets/YTPlayerView-iframe-player.html` to your project, `react-native link` is not enough (As of RN ~0.37 - ~0.45). You will need to *also* use the older tool it is based on, `rnpm` (This step must be done **after** `react-native link`):\n\nFirst, if you don't have it installed, globally install `rnpm` (^1.9.0):\n\n`$ npm install -g rnpm`\n\nThen at the project's root folder type:\n\n`$ rnpm link`\n\n(This step can also be done manually by adding `../node_modules/react-native-youtube/assets/YTPlayerView-iframe-player.html` to your Xcode project's root directory)\n\n**IMPORTANT! (Android Only)**: The Android implementation of this component needs to have the official YouTube app installed on the device. Otherwise the user will be prompted to install / activate the app, and an error event will be triggered with `SERVICE_MISSING`/`SERVICE_DISABLED`.\n\n#### OPTIONAL: Activated sound when iPhone (iOS) is on vibrate mode\nOpen AppDelegate.m and add :\n\n* `#import <AVFoundation/AVFoundation.h>`\n\n* `[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error: nil];` in your didFinishLaunchingWithOptions method\n\n## Known Issues\n#### `UNAUTHORIZED_OVERLAY` and `PLAYER_VIEW_TOO_SMALL` on Android\nThe Android version of this component is based on the official Java [YouTube Android Player API](https://developers.google.com/youtube/android/player/) library which have a few built-in limitations and protections that we must mitigate with a few hacks. In some cases the native view that holds the YouTube instance fails to mount correctly inside React-Native's view hierarchy so we initiate [an unnoticeable change in its style after the onReady event fires](https://github.com/inProgress-team/react-native-youtube/blob/master/YouTube.android.js#L101) to force a real re-render on the native views hierarchy. Other than that, the native instance has a built-in mechanism to protect it from being covered by other components (what triggers the `UNAUTHORIZED_OVERLAY` error) and it's triggered if the native instance only *touches* another view. For this reason we must margin the native view from its containing view by `StyleSheet.hairlineWidth` which means a single pixel width for the specific device. `PLAYER_VIEW_TOO_SMALL` error can also be fired due to the same problems.\n\nThese specific hacks are sufficiently solving these related problems in the example app in this repo and also in a private app that I develop which uses standard views and the (now deprecated) NavigationExperimental. On a virtual AVD (Nexus 5X) and on a real Nexus 5X, with React-Native 0.37 through 0.45.\n\n*How do we solve this?*\n\nDifferent configurations and environments can still persist these problems so we must find better and more general ways of mitigating them. **The best thing anybody who encounters these errors can do, before posting an issue**, is try to set up and run the example app in this repo and see if the same behavior persist. If it is, then the problem is probably with the development environment and / or hardware. If not, the problem is probably with other libraries or custom components, and the way they are used in conjunction with this component. Try to understand the nature of the limitations of the native component and gather as much information before posting an issue, even then, better add to [#161](https://github.com/inProgress-team/react-native-youtube/issues/161).\n\n#### No player controls in Android\nThe Android version can sometimes disable the players control even when the controls are explicitly set to be shown. There is no explanation to this behavior yet. This bug is managed in [#131](https://github.com/inProgress-team/react-native-youtube/issues/131).\n\n#### Multiple `<YouTube />` instances on Android\nThe YouTube API for Android is a *singleton*. What it means is that unlike the iOS implementation, no two players can be mounted and play a video at the same time. If you have two scenes that happen to live together, or come one after the other (such as when navigating to a new scene), The new `<YouTube />` Will take the focus of the singleton and play the video, but after being unmounted, the older mounted `<YouTube />` will not be able to take the role back, and will need to be re-mounted.\n\n## Example App and Development\nThis repository includes an example project that can be used for trying, developing and testing all functionalities on a dedicated clean app project.\n\nFirst copy the git repository and install the React-Native project inside `example`:\n```sh\n$ git clone https://github.com/inProgress-team/react-native-youtube.git\n$ cd react-native-youtube/example\n$ npm install\n$ react-native link\n$ rnpm link\n```\n\nDon't forget to install the Pods if you want to test API that depends on XCDYoutubeKit:\n```sh\n$ cd ios\n$ pod install\n```\n\nThen build and run with `react-native run-ios` / `react-native run-android` or your favorite IDE.\n\n#### For Developers\nTo be able to directly test your changes with the example app, re-install the package from the root directory with `npm i $(npm pack ..)`. This command packs the root directory into an npm package tar file and installs it locally to the example app.\n\n## Authors\n* Param Aggarwal (paramaggarwal@gmail.com)\n* David Ohayon ([@davidohayon669](https://twitter.com/davidohayon669))\n* Ownership has been transferred to inProgress-team\n\n## License\nMIT License\n","readmeFilename":"README.md"}