Angular Tippy.JS Directive & Service

This is a wrapper around the Tippy.js. Easily create tooltips using a directive or utilize the service

Installation

Install Using NPM

  npm install --save angular-tippy

Adding Module

import { AppComponent } from './app.component';
import { AngularYoutubePlayerModule } from 'angular-youtube-player';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularYoutubePlayerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

*.component.html

<ng-youtube-player 
  (stateChange)="handleStateChange($event)"
  [config]="config">
</ng-youtube-player>

*.component.ts

  export class AppComponent {
    config: PlayerConfig;
    constructor() {
      this.config = {
        videoId: 'eP4j6GF6iM8',
        autoPlay: false
      };
    }

    handleStateChange(event) {
      // Do Something when state changes i.e pause / play
    }
  }

API

  interface PlayerConfig {
    videoId?: string;
    width?: string;
    height?: string;
    startSeconds?: number;
    autoPlay?: boolean;
    mediaContentUrl?: string;
    endSeconds?: number;
    suggestedQuality?: 'large' | 'medium' | 'small';
  }

  interface AngularYoutubePlayerComponent {
    @ViewChild('player') private player: ElementRef;
    @Input() config: PlayerConfig;
    @Input() videosList: string[];
    @Output() ready: EventEmitter;
    @Output() error: EventEmitter;
    @Output() stateChange: EventEmitter;
    @Output() playbackRateChange: EventEmitter;;
    @Output() playbackQualityChange: EventEmitter;
  }

PlayerConfig API

| | |--------------------------------------------------------------------------------------------------------------| | Property Name,Property Type,Description | | VideoId,String,The id of the video that you would like to embed | | Width,String,"The width of the video player, i.e '300px'" | | Height,String,"The height of the video player, i.e '300px'" | | startSeconds,Number,The start time in seconds | | endSeconds,Number,The end time in seconds | | autoPlayer,Boolean,If the video should auto play the video | | mediaContentUrl,String,The url of the video you would like to embed | | suggestQuality,'large' | 'small' | 'medium' | 'hd720' | 'highres' | default,Specfiy the quality of the video |

AngularYoutubePlayerComponent API

| | |---------------------------------------------------------------------------------| | Property,Type,Description | | config,PlayerConfig,Configuration of the video player | | videoList,string[],Array of video urls or ids | | ready,EventEmitter,Notify when the video is ready | | error,EventEmitter,Notify when an error has occured | | stateChange,EventEmitter,Notify when the state of the player has changed | | playbackRateChange,EventEmitter,Notify when the playback rate has changed | | playbackQualityChange,EventEmitter,Notify when the playback quality has changed |

License

Apache License Version 2.0, January 2004