feat(): add comment, comment-embed, video, and post

src/components/fb-comment-embed.ts

@@ -0,0 +1,38 @@
+import { Component, Input, ElementRef, Renderer } from '@angular/core';
+import { FBMLAttribute, FBMLComponent } from './fbml-component';
+
+@Component({
+  selector: 'fb-comment-embed',
+  template: ''
+})
+export class FBCommentEmbedComponent extends FBMLComponent {
+
+  /**
+   * The absolute URL of the comment.
+   */
+  @Input()
+  @FBMLAttribute
+  href: string;
+
+  /**
+   * The width of the embedded comment container. Min. `220px`. Defaults to `560px`.
+   */
+  @Input()
+  @FBMLAttribute
+  width: string;
+
+  /**
+   * Set to `true` to include parent comment (if URL is a reply). Defaults to `false`.
+   */
+  @Input()
+  @FBMLAttribute
+  includeParent: boolean;
+
+  constructor(
+    el: ElementRef,
+    rnd: Renderer
+  ) {
+    super(el, rnd, 'fb-comment-embed');
+  }
+
+}

src/components/fb-comments.ts

@@ -0,0 +1,41 @@
+import { Component, Input, ElementRef, Renderer } from '@angular/core';
+import { FBMLAttribute, FBMLComponent } from './fbml-component';
+
+@Component({
+  selector: 'fb-comments',
+  template: ''
+})
+export class FBCommentsComponent extends FBMLComponent {
+
+  @Input()
+  @FBMLAttribute
+  colorscheme: string;
+
+  @Input()
+  @FBMLAttribute
+  href: string;
+
+  @Input()
+  @FBMLAttribute
+  mobile: boolean;
+
+  @Input()
+  @FBMLAttribute
+  numposts: number;
+
+  @Input()
+  @FBMLAttribute
+  orderBy: string;
+
+  @Input()
+  @FBMLAttribute
+  width: string;
+
+  constructor(
+    el: ElementRef,
+    rnd: Renderer
+  ) {
+    super(el, rnd, 'fb-comments');
+  }
+
+}

src/components/fb-post.ts

@@ -0,0 +1,38 @@
+import { Component, Input, ElementRef, Renderer } from '@angular/core';
+import { FBMLAttribute, FBMLComponent } from './fbml-component';
+
+@Component({
+  selector: 'fb-post',
+  template: ''
+})
+export class FBPostComponent extends FBMLComponent {
+
+  /**
+   * The absolute URL of the post.
+   */
+  @Input()
+  @FBMLAttribute
+  href: string;
+
+  /**
+   * The width of the post. Min. `350` pixel; Max. `750` pixel. Set to auto to use fluid width. Defaults to `auto`.
+   */
+  @Input()
+  @FBMLAttribute
+  width: string;
+
+  /**
+   * Applied to photo post. Set to `true` to include the text from the Facebook post, if any. Defaults to `false`.
+   */
+  @Input()
+  @FBMLAttribute
+  showText: boolean;
+
+  constructor(
+    el: ElementRef,
+    rnd: Renderer
+  ) {
+    super(el, rnd, 'fb-post');
+  }
+
+}

src/components/fb-video.ts

@@ -0,0 +1,218 @@
+import { Component, Input, Output, ElementRef, Renderer, OnInit, EventEmitter } from '@angular/core';
+import { FBMLAttribute, FBMLComponent, FBMLInstanceMethod } from './fbml-component';
+declare var FB: any;
+
+/**
+ * @usage
+ * ```html
+ * <!-- basic usage -->
+ * <fb-video href="path/to/video"></fb-video>
+ *
+ * <!-- event emitters -->
+ * <fb-video href="path/to/video" (startPlaying)="onVideoStartPlaying($event)" (paused)="onVideoPaused($event)"></fb-video>
+ * ```
+ *
+ * To manually interact with the video player, fetch it using `ViewChild`.
+ *
+ * ```ts
+ * import { Component, ViewChild } from '@angular/core';
+ * import { FBVideoComponent } from 'ng2-facebook-sdk';
+ *
+ * @Component(...)
+ * export class MyComponent {
+ *
+ *   @ViewChild(FBVideoComponent) video: FBVideoComponent;
+ *
+ *   ngAfterViewInit() {
+ *     this.video.play();
+ *     this.video.pause();
+ *     this.video.getVolume();
+ *   }
+ *
+ * }
+ *
+ * ```
+ */
+@Component({
+  selector: 'fb-video',
+  template: ''
+})
+export class FBVideoComponent extends FBMLComponent implements OnInit {
+
+  private _instance: any;
+
+  /**
+   * The absolute URL of the video.
+   */
+  @Input()
+  @FBMLAttribute
+  href: string;
+
+  /**
+   * Allow the video to be played in fullscreen mode. Can be false or true. Defaults to false;
+   */
+  @Input()
+  @FBMLAttribute
+  allowfullscreen: boolean;
+
+  /**
+   * Automatically start playing the video when the page loads. The video will be played without sound (muted). People can turn on sound via the video player controls. This setting does not apply to mobile devices. Can be false or true. Defaults to false.
+   */
+  @Input()
+  @FBMLAttribute
+  autoplay: boolean;
+
+  /**
+   * The width of the video container. Min. 220px.
+   */
+  @Input()
+  @FBMLAttribute
+  width: string;
+
+  /**
+   * Set to true to include the text from the Facebook post associated with the video, if any.
+   */
+  @Input()
+  @FBMLAttribute
+  showText: boolean;
+
+  /**
+   * Set to true to show captions (if available) by default. Captions are only available on desktop.
+   */
+  @Input()
+  @FBMLAttribute
+  showCaptions: boolean;
+
+  /**
+   * Fired when video starts to play.
+   * @type {EventEmitter<any>}
+   */
+  @Output()
+  startedPlaying: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * Fired when video pauses.
+   * @type {EventEmitter<any>}
+   */
+  @Output()
+  paused: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   *
+   Fired when video finishes playing.
+   * @type {EventEmitter<any>}
+   */
+  @Output()
+  finishedPlaying: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * Fired when video starts to buffer.
+   * @type {EventEmitter<any>}
+   */
+  @Output()
+  startedBuffering: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * Fired when video recovers from buffering.
+   * @type {EventEmitter<any>}
+   */
+  @Output()
+  finishedBuffering: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * Fired when an error occurs on the video.
+   * @type {EventEmitter<any>}
+   */
+  @Output()
+  error: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    el: ElementRef,
+    rnd: Renderer
+  ) {
+    super(el, rnd, 'fb-video');
+  }
+
+  /**
+   * @hidden
+   */
+  ngOnInit() {
+    FB.Event.subscribe('xfbml.ready', (msg: any) => {
+      if (msg.type === 'video') {
+        this._instance = msg.instance;
+        console.log(msg);
+        // TODO make sure that we getting the right instance, in case we have more than one player
+
+        this._instance.subscribe('startedPlaying', (e: any) => this.startedPlaying.emit(e));
+        this._instance.subscribe('paused', (e: any) => this.paused.emit(e));
+        this._instance.subscribe('finishedPlaying', (e: any) => this.finishedPlaying.emit(e));
+        this._instance.subscribe('startedBuffering', (e: any) => this.startedBuffering.emit(e));
+        this._instance.subscribe('finishedBuffering', (e: any) => this.finishedBuffering.emit(e));
+        this._instance.subscribe('error', (e: any) => this.error.emit(e));
+      }
+    });
+  }
+
+  /**
+   * Plays the video.
+   */
+  @FBMLInstanceMethod
+  play() {}
+
+  /**
+   * Pauses the video.
+   */
+  @FBMLInstanceMethod
+  pause() {}
+
+  /**
+   * Seeks to specified position.
+   * @param seconds {number}
+   */
+  @FBMLInstanceMethod
+  seek(seconds: number) {}
+
+  /**
+   * Mute the video.
+   */
+  @FBMLInstanceMethod
+  mute() {}
+
+  /**
+   * Unmute the video.
+   */
+  @FBMLInstanceMethod
+  unmute() {}
+
+  /**
+   * Returns true if video is muted, false if not.
+   */
+  @FBMLInstanceMethod
+  isMuted(): boolean { return; }
+
+  /**
+   * Set the volume
+   * @param volume
+   */
+  @FBMLInstanceMethod
+  setVolume(volume: number) {}
+
+  /**
+   * Get the volume
+   */
+  @FBMLInstanceMethod
+  getVolume(): number { return; }
+
+  /**
+   * Returns the current video time position in seconds
+   */
+  @FBMLInstanceMethod
+  getCurrentPosition() {}
+
+  /**
+   * Returns the video duration in seconds
+   */
+  @FBMLInstanceMethod
+  getDuration() {}
+
+}

src/components/fbml-component.ts

@@ -12,6 +12,20 @@ export function FBMLAttribute(target: any, key: string) {
   });
 }
 
+export function FBMLInstanceMethod(target: any, key: string) {
+  return {
+    enumerable: true,
+    value: function(...args) {
+      if (this._instance) {
+        return this._instance[key].apply(this, args);
+      } else {
+        console.warn('ng2-facebook-sdk: tried calling instance method before component is ready.');
+        return null;
+      }
+    }
+  }
+}
+
 /**
  * @hidden
  */

tsconfig.json

@@ -4,10 +4,11 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
+    "inlineSources": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
-    "noImplicitAny": false,
+    "noImplicitAny": true,
     "declaration": true,
     "outDir": "dist",
     "lib": [
@@ -21,4 +22,4 @@
   "angularCompilerOptions": {
     "genDir": "aot"
   }
-}
+}