diff --git a/comments.json b/comments.json
index 28816136..7ecb89d6 100644
--- a/comments.json
+++ b/comments.json
@@ -12,16 +12,26 @@
{
"id": 1464988635157,
"author": "ben",
- "text": "*abc*"
+ "text": "*abc* 123"
},
{
"id": 1464988636500,
"author": "ben",
- "text": "*abc*"
+ "text": "*abc* woeifjwef"
},
{
"id": 1464988717637,
"author": "evil",
"text": "alert(1)"
+ },
+ {
+ "id": 1475871802860,
+ "author": "erg",
+ "text": "werwer"
+ },
+ {
+ "id": 1475871806673,
+ "author": "vwer",
+ "text": "qweqwe"
}
]
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index eb201204..3b589d1b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,8 +13,149 @@
-
diff --git a/public/scripts/example.js b/public/scripts/example.js
index 6493fea9..3cb4150a 100644
--- a/public/scripts/example.js
+++ b/public/scripts/example.js
@@ -1,147 +1,156 @@
-/**
- * This file provided by Facebook is for non-commercial testing and evaluation
- * purposes only. Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
- * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
- * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
+(function (window) {
-var Comment = React.createClass({
- rawMarkup: function() {
- var md = new Remarkable();
- var rawMarkup = md.render(this.props.children.toString());
- return { __html: rawMarkup };
- },
+ var data = [
+ {id: 1, author: "Pete Hunt", text: "This is one comment"},
+ {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
+ ];
- render: function() {
- return (
-
-
- {this.props.author}
-
-
-
- );
- }
-});
+ var Comment = React.createClass({
+ rawMarkup: function() {
+ var md = new Remarkable();
+ var rawMarkup = md.render(this.props.children.toString());
+ return { __html: rawMarkup };
+ },
+ render: function() {
+ return (
+
+
+ {this.props.author}
+
+ {}
+
+ );
+ }
+ });
-var CommentBox = React.createClass({
- loadCommentsFromServer: function() {
- $.ajax({
- url: this.props.url,
- dataType: 'json',
- cache: false,
- success: function(data) {
- this.setState({data: data});
- }.bind(this),
- error: function(xhr, status, err) {
- console.error(this.props.url, status, err.toString());
- }.bind(this)
- });
- },
- handleCommentSubmit: function(comment) {
- var comments = this.state.data;
- // Optimistically set an id on the new comment. It will be replaced by an
- // id generated by the server. In a production application you would likely
- // not use Date.now() for this and would have a more robust system in place.
- comment.id = Date.now();
- var newComments = comments.concat([comment]);
- this.setState({data: newComments});
- $.ajax({
- url: this.props.url,
- dataType: 'json',
- type: 'POST',
- data: comment,
- success: function(data) {
- this.setState({data: data});
- }.bind(this),
- error: function(xhr, status, err) {
- this.setState({data: comments});
- console.error(this.props.url, status, err.toString());
- }.bind(this)
- });
- },
- getInitialState: function() {
- return {data: []};
- },
- componentDidMount: function() {
- this.loadCommentsFromServer();
- setInterval(this.loadCommentsFromServer, this.props.pollInterval);
- },
- render: function() {
- return (
-
-
Comments
-
-
-
- );
- }
-});
+ var CommentList = React.createClass({
+ render: function() {
+ var commentNodes = this.props.data.map(function(comment) {
+ return (
+
+ {comment.text}
+
+ );
+ });
+ return (
+
+ {commentNodes}
+
+ );
+ }
+ });
-var CommentList = React.createClass({
- render: function() {
- var commentNodes = this.props.data.map(function(comment) {
- return (
-
- {comment.text}
-
+ var CommentForm = React.createClass({
+ getInitialState: function() {
+ return {author: '', text: ''};
+ },
+ handleAuthorChange: function(e) {
+ this.setState({author: e.target.value});
+ },
+ handleTextChange: function(e) {
+ this.setState({text: e.target.value});
+ },
+ handleSubmit: function(e) {
+ e.preventDefault();
+ var author = this.state.author.trim();
+ var text = this.state.text.trim();
+ if (!text || !author) {
+ return;
+ }
+ // TODO: send request to the server
+ this.props.onCommentSubmit({author: author, text: text});
+ this.setState({author: '', text: ''});
+ },
+ render: function() {
+ return (
+
+ );
+ }
+ });
+
+ var CommentBox = React.createClass({
+ loadCommentsFromServer: function() {
+ //replace with firebase.on or once
+ $.ajax({
+ url: this.props.url,
+ dataType: 'json',
+ cache: false,
+ success: function(data) {
+ //updates the state whenever there is new data
+ this.setState({data: data});
+ }.bind(this),
+ error: function(xhr, status, err) {
+ console.error(this.props.url, status, err.toString());
+ }.bind(this)
+ });
+ },
+ handleCommentSubmit: function(comment) {
+ var comments = this.state.data;
+ // Optimistically set an id on the new comment. It will be replaced by an
+ // id generated by the server. In a production application you would likely
+ // not use Date.now() for this and would have a more robust system in place.
+ comment.id = Date.now();
+ var newComments = comments.concat([comment]);
+ this.setState({data: newComments});
+ $.ajax({
+ url: this.props.url,
+ dataType: 'json',
+ type: 'POST',
+ data: comment,
+ success: function(data) {
+ this.setState({data: data});
+ }.bind(this),
+ error: function(xhr, status, err) {
+ console.error(this.props.url, status, err.toString());
+ this.setState({data: comments}); //If ajax fails, set to original state
+ }.bind(this)
+ });
+ },
+ getInitialState: function() {
+ return {data: []};
+ },
+ componentDidMount: function() {
+ this.loadCommentsFromServer();
+ //Won't need polling with firebase.
+ setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+ },
+ render: function() {
+ return (
+
+
Comments
+
+
+
+ );
+ }
+ });
+
+ ReactDOM.render(
+ ,
+ document.getElementById('content')
);
- });
- return (
-
- {commentNodes}
-
- );
- }
-});
-var CommentForm = React.createClass({
- getInitialState: function() {
- return {author: '', text: ''};
- },
- handleAuthorChange: function(e) {
- this.setState({author: e.target.value});
- },
- handleTextChange: function(e) {
- this.setState({text: e.target.value});
- },
- handleSubmit: function(e) {
- e.preventDefault();
- var author = this.state.author.trim();
- var text = this.state.text.trim();
- if (!text || !author) {
- return;
- }
- this.props.onCommentSubmit({author: author, text: text});
- this.setState({author: '', text: ''});
- },
- render: function() {
- return (
-
- );
- }
-});
+ // declare
+ var videoFeed = {};
+
+ // your sdk init function
+ videoFeed.init = function () {
+ // ...
+ };
+
+ // define your namespace videoFeed
+ window.videoFeed = videoFeed;
-ReactDOM.render(
- ,
- document.getElementById('content')
-);
+})(window, undefined);
\ No newline at end of file