Skip to content

Commit de28085

Browse files
ihadeedihadeed
committed
feat(): add comment, comment-embed, video, and post
1 parent ab4a998 commit de28085

File tree

6 files changed

+352
-2
lines changed

6 files changed

+352
-2
lines changed

‎src/components/fb-comment-embed.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Component, Input, ElementRef, Renderer } from '@angular/core';
2+
import { FBMLAttribute, FBMLComponent } from './fbml-component';
3+
4+
@Component({
5+
selector: 'fb-comment-embed',
6+
template: ''
7+
})
8+
export class FBCommentEmbedComponent extends FBMLComponent {
9+
10+
/**
11+
* The absolute URL of the comment.
12+
*/
13+
@Input()
14+
@FBMLAttribute
15+
href: string;
16+
17+
/**
18+
* The width of the embedded comment container. Min. `220px`. Defaults to `560px`.
19+
*/
20+
@Input()
21+
@FBMLAttribute
22+
width: string;
23+
24+
/**
25+
* Set to `true` to include parent comment (if URL is a reply). Defaults to `false`.
26+
*/
27+
@Input()
28+
@FBMLAttribute
29+
includeParent: boolean;
30+
31+
constructor(
32+
el: ElementRef,
33+
rnd: Renderer
34+
) {
35+
super(el, rnd, 'fb-comment-embed');
36+
}
37+
38+
}

‎src/components/fb-comments.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component, Input, ElementRef, Renderer } from '@angular/core';
2+
import { FBMLAttribute, FBMLComponent } from './fbml-component';
3+
4+
@Component({
5+
selector: 'fb-comments',
6+
template: ''
7+
})
8+
export class FBCommentsComponent extends FBMLComponent {
9+
10+
@Input()
11+
@FBMLAttribute
12+
colorscheme: string;
13+
14+
@Input()
15+
@FBMLAttribute
16+
href: string;
17+
18+
@Input()
19+
@FBMLAttribute
20+
mobile: boolean;
21+
22+
@Input()
23+
@FBMLAttribute
24+
numposts: number;
25+
26+
@Input()
27+
@FBMLAttribute
28+
orderBy: string;
29+
30+
@Input()
31+
@FBMLAttribute
32+
width: string;
33+
34+
constructor(
35+
el: ElementRef,
36+
rnd: Renderer
37+
) {
38+
super(el, rnd, 'fb-comments');
39+
}
40+
41+
}

‎src/components/fb-post.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Component, Input, ElementRef, Renderer } from '@angular/core';
2+
import { FBMLAttribute, FBMLComponent } from './fbml-component';
3+
4+
@Component({
5+
selector: 'fb-post',
6+
template: ''
7+
})
8+
export class FBPostComponent extends FBMLComponent {
9+
10+
/**
11+
* The absolute URL of the post.
12+
*/
13+
@Input()
14+
@FBMLAttribute
15+
href: string;
16+
17+
/**
18+
* The width of the post. Min. `350` pixel; Max. `750` pixel. Set to auto to use fluid width. Defaults to `auto`.
19+
*/
20+
@Input()
21+
@FBMLAttribute
22+
width: string;
23+
24+
/**
25+
* Applied to photo post. Set to `true` to include the text from the Facebook post, if any. Defaults to `false`.
26+
*/
27+
@Input()
28+
@FBMLAttribute
29+
showText: boolean;
30+
31+
constructor(
32+
el: ElementRef,
33+
rnd: Renderer
34+
) {
35+
super(el, rnd, 'fb-post');
36+
}
37+
38+
}

‎src/components/fb-video.ts

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
import { Component, Input, Output, ElementRef, Renderer, OnInit, EventEmitter } from '@angular/core';
2+
import { FBMLAttribute, FBMLComponent, FBMLInstanceMethod } from './fbml-component';
3+
declare var FB: any;
4+
5+
/**
6+
* @usage
7+
* ```html
8+
* <!-- basic usage -->
9+
* <fb-video href="path/to/video"></fb-video>
10+
*
11+
* <!-- event emitters -->
12+
* <fb-video href="path/to/video" (startPlaying)="onVideoStartPlaying($event)" (paused)="onVideoPaused($event)"></fb-video>
13+
* ```
14+
*
15+
* To manually interact with the video player, fetch it using `ViewChild`.
16+
*
17+
* ```ts
18+
* import { Component, ViewChild } from '@angular/core';
19+
* import { FBVideoComponent } from 'ng2-facebook-sdk';
20+
*
21+
* @Component(...)
22+
* export class MyComponent {
23+
*
24+
* @ViewChild(FBVideoComponent) video: FBVideoComponent;
25+
*
26+
* ngAfterViewInit() {
27+
* this.video.play();
28+
* this.video.pause();
29+
* this.video.getVolume();
30+
* }
31+
*
32+
* }
33+
*
34+
* ```
35+
*/
36+
@Component({
37+
selector: 'fb-video',
38+
template: ''
39+
})
40+
export class FBVideoComponent extends FBMLComponent implements OnInit {
41+
42+
private _instance: any;
43+
44+
/**
45+
* The absolute URL of the video.
46+
*/
47+
@Input()
48+
@FBMLAttribute
49+
href: string;
50+
51+
/**
52+
* Allow the video to be played in fullscreen mode. Can be false or true. Defaults to false;
53+
*/
54+
@Input()
55+
@FBMLAttribute
56+
allowfullscreen: boolean;
57+
58+
/**
59+
* 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.
60+
*/
61+
@Input()
62+
@FBMLAttribute
63+
autoplay: boolean;
64+
65+
/**
66+
* The width of the video container. Min. 220px.
67+
*/
68+
@Input()
69+
@FBMLAttribute
70+
width: string;
71+
72+
/**
73+
* Set to true to include the text from the Facebook post associated with the video, if any.
74+
*/
75+
@Input()
76+
@FBMLAttribute
77+
showText: boolean;
78+
79+
/**
80+
* Set to true to show captions (if available) by default. Captions are only available on desktop.
81+
*/
82+
@Input()
83+
@FBMLAttribute
84+
showCaptions: boolean;
85+
86+
/**
87+
* Fired when video starts to play.
88+
* @type {EventEmitter<any>}
89+
*/
90+
@Output()
91+
startedPlaying: EventEmitter<any> = new EventEmitter<any>();
92+
93+
/**
94+
* Fired when video pauses.
95+
* @type {EventEmitter<any>}
96+
*/
97+
@Output()
98+
paused: EventEmitter<any> = new EventEmitter<any>();
99+
100+
/**
101+
*
102+
Fired when video finishes playing.
103+
* @type {EventEmitter<any>}
104+
*/
105+
@Output()
106+
finishedPlaying: EventEmitter<any> = new EventEmitter<any>();
107+
108+
/**
109+
* Fired when video starts to buffer.
110+
* @type {EventEmitter<any>}
111+
*/
112+
@Output()
113+
startedBuffering: EventEmitter<any> = new EventEmitter<any>();
114+
115+
/**
116+
* Fired when video recovers from buffering.
117+
* @type {EventEmitter<any>}
118+
*/
119+
@Output()
120+
finishedBuffering: EventEmitter<any> = new EventEmitter<any>();
121+
122+
/**
123+
* Fired when an error occurs on the video.
124+
* @type {EventEmitter<any>}
125+
*/
126+
@Output()
127+
error: EventEmitter<any> = new EventEmitter<any>();
128+
129+
constructor(
130+
el: ElementRef,
131+
rnd: Renderer
132+
) {
133+
super(el, rnd, 'fb-video');
134+
}
135+
136+
/**
137+
* @hidden
138+
*/
139+
ngOnInit() {
140+
FB.Event.subscribe('xfbml.ready', (msg: any) => {
141+
if (msg.type === 'video') {
142+
this._instance = msg.instance;
143+
console.log(msg);
144+
// TODO make sure that we getting the right instance, in case we have more than one player
145+
146+
this._instance.subscribe('startedPlaying', (e: any) => this.startedPlaying.emit(e));
147+
this._instance.subscribe('paused', (e: any) => this.paused.emit(e));
148+
this._instance.subscribe('finishedPlaying', (e: any) => this.finishedPlaying.emit(e));
149+
this._instance.subscribe('startedBuffering', (e: any) => this.startedBuffering.emit(e));
150+
this._instance.subscribe('finishedBuffering', (e: any) => this.finishedBuffering.emit(e));
151+
this._instance.subscribe('error', (e: any) => this.error.emit(e));
152+
}
153+
});
154+
}
155+
156+
/**
157+
* Plays the video.
158+
*/
159+
@FBMLInstanceMethod
160+
play() {}
161+
162+
/**
163+
* Pauses the video.
164+
*/
165+
@FBMLInstanceMethod
166+
pause() {}
167+
168+
/**
169+
* Seeks to specified position.
170+
* @param seconds {number}
171+
*/
172+
@FBMLInstanceMethod
173+
seek(seconds: number) {}
174+
175+
/**
176+
* Mute the video.
177+
*/
178+
@FBMLInstanceMethod
179+
mute() {}
180+
181+
/**
182+
* Unmute the video.
183+
*/
184+
@FBMLInstanceMethod
185+
unmute() {}
186+
187+
/**
188+
* Returns true if video is muted, false if not.
189+
*/
190+
@FBMLInstanceMethod
191+
isMuted(): boolean { return; }
192+
193+
/**
194+
* Set the volume
195+
* @param volume
196+
*/
197+
@FBMLInstanceMethod
198+
setVolume(volume: number) {}
199+
200+
/**
201+
* Get the volume
202+
*/
203+
@FBMLInstanceMethod
204+
getVolume(): number { return; }
205+
206+
/**
207+
* Returns the current video time position in seconds
208+
*/
209+
@FBMLInstanceMethod
210+
getCurrentPosition() {}
211+
212+
/**
213+
* Returns the video duration in seconds
214+
*/
215+
@FBMLInstanceMethod
216+
getDuration() {}
217+
218+
}

‎src/components/fbml-component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,20 @@ export function FBMLAttribute(target: any, key: string) {
1212
});
1313
}
1414

15+
export function FBMLInstanceMethod(target: any, key: string) {
16+
return {
17+
enumerable: true,
18+
value: function(...args) {
19+
if (this._instance) {
20+
return this._instance[key].apply(this, args);
21+
} else {
22+
console.warn('ng2-facebook-sdk: tried calling instance method before component is ready.');
23+
return null;
24+
}
25+
}
26+
}
27+
}
28+
1529
/**
1630
* @hidden
1731
*/

‎tsconfig.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
"module": "commonjs",
55
"moduleResolution": "node",
66
"sourceMap": true,
7+
"inlineSources": true,
78
"emitDecoratorMetadata": true,
89
"experimentalDecorators": true,
910
"removeComments": false,
10-
"noImplicitAny": false,
11+
"noImplicitAny": true,
1112
"declaration": true,
1213
"outDir": "dist",
1314
"lib": [
@@ -21,4 +22,4 @@
2122
"angularCompilerOptions": {
2223
"genDir": "aot"
2324
}
24-
}
25+
}

0 commit comments

Comments
 (0)