barmej / react-native-youtube-player Goto Github PK

Hello! Please, would you help to find the reason why control panel buttons doesn't work at all... Play, pause, fullscreen - no one of them. I've rechecked instalation manual twice and seems everything is correct.
My 'package.json':
"dependencies": {
"@react-native-community/async-storage": "^1.8.0",
"@react-native-community/masked-view": "^0.1.6",
"@react-native-community/slider": "^1.1.2",
"axios": "^0.19.2",
"install": "^0.13.0",
"jetifier": "^1.6.5",
"moment": "^2.24.0",
"native-base": "^2.13.8",
"npm": "^6.13.7",
"react": "16.8.3",
"react-native": "0.59.8",
"react-native-device-info": "^5.5.3",
"react-native-fbsdk": "^1.1.2",
"react-native-gesture-handler": "^1.6.0",
"react-native-google-signin": "^2.1.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-orientation": "^3.1.3",
"react-native-reanimated": "^1.7.0",
"react-native-render-html": "^4.1.2",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.0.0-beta.10",
"react-native-snap-carousel": "^3.8.4",
"react-native-splash-screen": "^3.2.0",
"react-native-status-bar-height": "^2.4.0",
"react-native-svg": "^11.0.1",
"react-native-vector-icons": "^6.6.0",
"react-native-webview": "^5.10.0",
"react-native-webview-invoke": "^0.5.0",
"react-native-yt-player": "^1.0.6",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.1",
"react-navigation-tabs": "^2.7.0"
},
"devDependencies": {
"@babel/core": "7.8.4",
"@babel/runtime": "7.8.4",
"babel-jest": "25.1.0",
"jest": "25.1.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.8.3"
},

I have react-native-webview as a dependency of my app, and I'm getting this error after install react-native-youtube-player. I think it is because my version of RNCWebView is different than your.

Error while updating property 'thumbImage' of a view managed by: RNCSlider

value for thumbImage cannot be cast from double to readablenativemap.

Testing on Real Device and Emulator. results are same. if you need screenshots.

Hi there, thanks for the wonderful alternative for youtube player but I am getting this error on most of the videos.
"This video contains from ###### films, which has blocked it from the display on this web or application" getting this error

Looks like this is not updated for reanimated v2 which is being used already in my project so cant downgrade.
Error:

interpolate is not a function. (in interpolate(width, {
......

in v2 the name has been changed to interpolateNode for whatever reason

It's not support for re-animated v2

When im trying to update the videoId using setState() or useState() it doenst refelect in the video player.

Controls are not appearing. i am unable to pause/seek/full screen . Kindly help

Hi, thanks for your good component for React native
Could you do me a favor?
Video don't display. it is only loading spinner.

Hope your kind contact.
Thanks

Hello,

Is it just me or are the player controls on android extremely slow to respond?

I've installed all modules correctly and linked them successfully( including react-native-orientation )

Is there an additional step that isn't written on the docs I missed?

Thanks

can we use it in functional component also can i disable share button .

I have wasted my 3 hour with this trash there is error after error..I request you to pls take this down so that other dont waste thier time

Slider Seek not working with React native version 0.60.0

Please give me example how to change video height and width in custom view and as well as give me example how to work with seek change.

Hi, thanks for the package. Does this support the option to change the quality of the video?

Any way to jump to a certain time?

I'm getting this error when I start the app on Android (I'm using Yarn as package manager):

I did not link anything, since I'm using RN 0.62.

package.json:

{
  "name": "mobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/bottom-tabs": "^5.2.5",
    "@react-navigation/native": "^5.1.3",
    "@react-navigation/stack": "^5.2.6",
    "axios": "^0.19.2",
    "react": "16.9.0",
    "react-native": "0.62",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-orientation": "^3.1.3",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview-invoke": "^0.5.1",
    "react-native-yt-player": "^1.0.6",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-axios-middleware": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "symbol-observable": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "@types/hoist-non-react-statics": "^3.3.1",
    "@types/jest": "^24.0.24",
    "@types/react-native": "^0.60.25",
    "@types/react-redux": "^7.1.7",
    "@types/react-test-renderer": "16.9.1",
    "@typescript-eslint/eslint-plugin": "^2.12.0",
    "@typescript-eslint/parser": "^2.12.0",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "typescript": "^3.7.3"
  },
  "workspaces": {
    "nohoist": [
      "react",
      "react/**",
      "react-native",
      "react-native/**",
      "@babel",
      "@babel/**",
      "@react-native-community",
      "@react-native-community/**",
      "redux",
      "redux/**",
      "react-redux",
      "react-redux/**",
      "symbol-observable",
      "react-native-linear-gradient",
      "react-native-gesture-handler",
      "@react-navigation",
      "@react-navigation/**",
      "redux-thunk",
      "axios",
      "react-native-keyboard-aware-scroll-view",
      "redux-logger",
      "react-native-elements",
      "react-native-elements/**",
      "react-native-vector-icons",
      "react-native-vector-icons/**",
      "react-native-reanimated",
      "react-native-reanimated/**",
      "react-native-webview",
      "react-native-webview/**",
      "react-native-webview-invoke",
      "react-native-webview-invoke/**",
      "react-native-orientation",
      "react-native-orientation/**"
    ]
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

im trying to use the player with a live video from youtube and it crashes 2 seconds before it plays.. there is any way to use the player with live video?
thank you

When the component is defined inside stack navigator screens the play pause or moving the slider doesnt work

Well done, is there non typescript version.. modifying to plug in to expo is huge task..

Hi! If I set the videoId from the component state, the player is not updated. Is there any workaround to force the update?

I'm looking at implementing this, as I've had the issue with react-native-youtube freezing due to overlay problem with react-native-navigation. Hoping this solution might solve it.

In regards to this API, would it support providing a start/end time for the video, as youtube URL's support this?

Hi, I didn't succeed to adjust the size of the Player and while looking at the code, it seems that the custom style is not take into account.

Player-Render-Function

Play pause not working with the latest npx react-native init
Not able to apply for full screen also

Hi,

I am getting an error message saying that the npm is found, however the package itself specifies a main module field that could not be resolved. I gone through the node_modules and I realize that this npm is using typescript and my application runs on .js so I am not sure if that could be the reason why I am getting this error message. Please let me know if this npm does support with javascript. Thank you!

Hi, it seems really helpful, thanks for the person who has shared it, but I was wondering if it does work with expo Cli, I do not know how to do the linking part with expo Cli?

Hey!

Thanks for the awesome lib!
How to get updated iframe api that you hold in html var?
https://github.com/barmej/react-native-youtube-player/blob/master/src/mobile/YTWebView.tsx#L64-L65

I'm making custom component based on your lib and setPlaybackRate is not working

First of all, thanks a lot for this amazing library to provide a utility to play the youtube videos.

I am using this youtube player for an iOS application. Most of the youtube videos are being played successfully by the player, but some of the videos take forever to load in some of the iOS devices.
For example, I am trying to play this youtube video, but it takes forever to load the video. The player get stuck with a loading indicator.

My code for the player is:

<YoutubePlayer
     loop
     videoId="moZOrq0qL3Q"
     autoPlay
     onStart={() => console.log('Video started')}
     onEnd={() => alert('Video Ended')}
     onError={() => {
          console.log('error loading video');
     }}
 />

Testing Environment:

react-native: "0.62.2"
react-native-youtube-player: "1.0.6"
iOS device: iPhone 6
iOS version: "12.4.8"

Can anyone please help me in this or suggest any workaround/solution for this?