nativescript-youtubeplayer Don't show nothing on Android and iOS - NS 7 + Angular 11

[vnavarrou]

Hello @triniwiz

I followed the documentation of nativescript-youtubeplayer, but when I enter to the page that I created to show a YouTube video, appears this error in Android and iOS:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method run failed
System.err: ReferenceError: __classPrivateFieldGet is not defined
System.err: StackTrace:
System.err: destroy(file: node_modules/@triniwiz/nativescript-youtubeplayer/index.android.js:345:8)
System.err: at disposeNativeView(file: node_modules/@triniwiz/nativescript-youtubeplayer/index.android.js:177:13)
System.err: at _tearDownUI(file: node_modules/@nativescript/core/ui/core/view-base/index.js:616:13)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:593:18)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:27)
System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:13)
System.err: at _tearDownUI(file: node_modules/@nativescript/core/ui/core/view-base/index.js:592:13)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:593:18)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:27)
System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:13)
System.err: at _tearDownUI(file: node_modules/@nativescript/core/ui/core/view-base/index.js:592:13)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:593:18)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:27)
System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:13)
System.err: at _tearDownUI(file: node_modules/@nativescript/core/ui/core/view-base/index.js:592:13)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:593:18)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:27)
System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:13)
System.err: at _tearDownUI(file: node_modules/@nativescript/core/ui/core/view-base/index.js:592:13)
System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:593:18)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/content-view/index.js:65:12)
System.err: at eachChildView(file: node_modules/@nativescript/core/ui/page/page-common.js:99:14)
System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:13)
System.err: at _tearDownUI(file: node_modules/@nativescript/core/ui/core/view-base/index.js:592:13)
System.err: at _removeViewCore(file: node_modules/@nativescript/core/ui/core/view-base/index.js:471:17)
System.err: at _removeView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:461:13)
System.err: at _removeEntry(file: node_modules/@nativescript/core/ui/frame/frame-common.js:165:18)
System.err: at _removeEntry(file: node_modules/@nativescript/core/ui/frame/index.android.js:381:14)
System.err: at _updateBackstack(file: node_modules/@nativescript/core/ui/frame/frame-common.js:236:17)
System.err: at setCurrent(file: node_modules/@nativescript/core/ui/frame/index.android.js:240:17)
System.err: at (file: node_modules/@nativescript/core/ui/frame/fragment.transitions.android.js:545:35)
System.err: at e.invokeTask(file: node_modules/@nativescript/zone-js/zone-nativescript.js:421:30)
System.err: at n.runTask(file: node_modules/@nativescript/zone-js/zone-nativescript.js:188:46)
System.err: at t.invokeTask(file: node_modules/@nativescript/zone-js/zone-nativescript.js:496:33)
System.err: at s.useG.invoke(file: node_modules/@nativescript/zone-js/zone-nativescript.js:485:47)
System.err: at n.args.(file: node_modules/@nativescript/zone-js/zone-nativescript.js:1561:28)
System.err: at (file: node_modules/@nativescript/core/timer/index.android.js:18:25)
System.err: at e.invoke(file: node_modules/@nativescript/zone-js/zone-nativescript.js:388:25)
System.err: at n.runGuarded(file: node_modules/@nativescript/zone-js/zone-nativescript.js:151:46)
System.err: at (file: node_modules/@nativescript/zone-js/zone-nativescript.js:129:28)
System.err: at run(file: node_modules/@nativescript/core/timer/index.android.js:22:12)
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err: at com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err: at android.os.Handler.handleCallback(Handler.java)
System.err: at android.os.Handler.dispatchMessage(Handler.java)
System.err: at android.os.Looper.loop(Looper.java)
System.err: at android.app.ActivityThread.main(ActivityThread.java)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java)

What I'm doing wrong?

These are my packages.json dependencies:

"dependencies": {
"@angular/animations": "~11.0.0",
"@angular/common": "~11.0.0",
"@angular/compiler": "~11.0.0",
"@angular/core": "~11.0.0",
"@angular/forms": "~11.0.0",
"@angular/platform-browser": "~11.0.0",
"@angular/platform-browser-dynamic": "~11.0.0",
"@angular/router": "~11.0.0",
"@fortawesome/fontawesome-free": "^5.15.3",
"@nativescript/angular": "^11.2.0",
"@nativescript/camera": "^5.0.8",
"@nativescript/core": "~7.0.0",
"@nativescript/datetimepicker": "^2.1.0",
"@nativescript/firebase": "^11.1.3",
"@nativescript/geolocation": "^7.1.1",
"@nativescript/theme": "~3.0.1",
"@triniwiz/nativescript-youtubeplayer": "^4.1.2",
"core-js": "^3.6.0",
"reflect-metadata": "~0.1.13",
"rxjs": "^6.6.7",
"sweetalert2": "^10.16.0",
"tslib": "1.10.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^11.0.0",
"@angular-devkit/build-angular": "~0.1100.0",
"@angular/cli": "~11.0.0",
"@angular/compiler-cli": "~11.0.0",
"@nativescript/android": "8.0.0",
"@nativescript/ios": "8.0.0",
"@nativescript/schematics": "^11.0.0",
"@nativescript/tslint-rules": "^0.0.5",
"@nativescript/types": "^8.0.0",
"@nativescript/webpack": "~4.1.0",
"@types/jasmine": "~3.6.9",
"@types/jasminewd2": "~2.0.8",
"@types/node": "~14.14.37",
"codelyzer": "^6.0.1",
"jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~7.0.0",
"sass": "^1.32.8",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.7"
}

Kind regards and hace a nice day.

[triniwiz]

That comes from using the new # private modifier but I wonder if it's related to this

[SmailHammour]

@triniwiz what's the status on this? I'm having the same error with @triniwiz/nativescript-couchbase.

[triniwiz]

@vnavarrou can you try updating to the latest version that should fix things for u

[vnavarrou]

@vnavarrou can you try updating to the latest version that should fix things for u

Well, After this month and a half I updated Nativescript to V8 and I tried to use this plugin to play directly from YouTube, but I get this error on Android:

chromium: [INFO:CONSOLE(723)] "Unrecognized feature: 'picture-in-picture'.", source: https://www.youtube.com/s/player/0b643cd1/www-widgetapi.vflset/www-widgetapi.js (723)
chromium: [ERROR:tile_manager.cc(811)] WARNING: tile memory limits exceeded, some content may not draw
chromium: [ERROR:tile_manager.cc(811)] WARNING: tile memory limits exceeded, some content may not draw

Probably the memory issue is because I have a Xiaomi MI4 to test the app, also, in my screen I have this message:

Can't load the web page ns-yt://onApiReady because:
net::ERR_UNKNOWN_URL_SCHEME

In iOS I get this after pressing Play button:
CONSOLE ERROR: ERROR TypeError: Cannot read property 'nativeElement' of undefined

[martinbuezas]

In my case, using Angular, I was not seeing the player after upgrading. Solved it by specifying the height on the player.

<YoutubePlayer height="260" videoId="..."></YoutubePlayer>

[essekia]

@vnavarrou Did you find a solution for this? I have a similar issue...

[vadiminsk]

In my case, using Angular, I was not seeing the player after upgrading. Solved it by specifying the height on the player.

<YoutubePlayer height="260" videoId="..."></YoutubePlayer>

Thanks! It helped me also in Vue