How do I get @ vimeo / player to work on my Angular2 / Typescript project?

Question

Question:

How to get @ vimeo / player to work on my Angular2 / Typescript project (specifically Ionic2)?

Description:

Trying to get vimeo player to work with Angular2 / Typescript.

npm install --save @vimeo/player

According to their documentation, the library can be used as follows:

If you use a module package, such as a web package or a cumulative package, the exported object will be the Player constructor (unlike the browser in which it is attached to window.Vimeo):

import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});

Which looks super promising! But does not work.

What I tried:

I installed and I created the player component in my Ionic2 application. @vimeo/player @types/vimeo__player

player.ts:

import {Component, ViewChild} from '@angular/core';
import {NavController} from "ionic-angular/index";

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  @ViewChild('player_container') playerContainer;
  private player: Player;

  constructor(public navCtrl: NavController){}

  ngAfterViewInit() {
    // child is set
    this.player = new Player(this.playerContainer);
    console.log(Player);
  }

}

view child, ID .

player.html

<div #player_container></div>

:

Uncaught ( ): TypeError: , . Player @http://localhost: 8100/build/main.js: 102846: 32 ngAfterViewInit @http://localhost: 8100/build/main.js: 74715: 80 callProviderLifecycles @http://localhost: 8100/build/main.js: 11417: 33 callElementProvidersLifecycles @http://localhost: 8100/build/main.js: 11392: 35 callLifecycleHooksChildrenFirst @http://localhost: 8100/build/main.js: 11376: 47 checkAndUpdateView @http://localhost:8100/build/main.js:12408:36 callWithDebugContext @http://localhost: 8100/build/main.js: 13462: 47 detectChanges @http://localhost: 8100/build/main.js: 10474: 81 _viewAttachToDOM @http://localhost: 8100/build/main.js: 43884: 53 _transition @http://localhost: 8100/build/main.js: 43976: 34 onInvoke @http://localhost: 8100/build/main.js: 4406: 43 @http://localhost: 8100/build/polyfills.js: 3: 4146 http://localhost: 8100/build/polyfills.js: 3: 13734 onInvokeTask @http://localhost:8100/build/main.js:4397:47 runTask @http://localhost: 8100/build/polyfills.js: 3: 4841 o @http://localhost: 8100/build/polyfills.js: 3: 1898 invoke @http://localhost: 8100/ /polyfills.js: 3: 10674

, , .

@types/vimeo__player , , , @vimeo/player

github, vimeo__player, , .

, JS, , . , ? --listFiles , .

:

Vimeo github.

Answer 1

@types/vimeo__player /.

TypeScript , , . , , JavaScript .

, , Player , , , .

, : TypeError: You must pass either a valid element or a valid id..

Player , HTMLElement.

, @ViewChild() Angular. , . ElementRef nativeElement, DOM.

, :

this.player = new Player(this.playerContainer);

:

this.player = new Player(this.playerContainer.nativeElement);

: " TypeScript , ?". , , , .

:

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";

?

import { Player } from '@vimeo/player';

.d.ts, , . , @vimeo/player JavaScript. TypeScript, ;)

Answer 2

typescript .

import * as Player from "@vimeo/player/dist/player.js";

Answer 3

ViewChild undefined (- ..), :

• ViewChild ren ViewChild;
• , DOM ;

:

import { Component, ViewChildren } from '@angular/core';
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  private player: Player;
  @ViewChildren('player_container') playerContainer;

  ngAfterViewInit() {
    /* wait DOM be available */
    this.playerContainer.changes.subscribe(item => {
        if (this.playerContainer.length) {
            /* DOM AVAILABLE */
            this.player = new Player(this.playerContainer.first.nativeElement);

            this.player.on('play', function() {
                console.log('played the video!');
            });

            this.player.getVideoTitle().then(function(title) {
                console.log('title:', title);
            });
        }
    })
  }
}

Answer 4

How to call the instance method inside this function on ('play', func ...) to execute any other functions, such as calling the API, In angular 4+. Please, help.

Thanks Varun