Release 0.4.0

Gruntfile.js

@@ -221,9 +221,9 @@ module.exports = function (grunt) {
                     port: 8085,
                     open: 'https://localhost:8085',
                     protocol: 'https',
-                    key: grunt.file.read('server.key').toString(),
-                    cert: grunt.file.read('server.crt').toString(),
-                    ca: grunt.file.read('ca.crt').toString()
+                    //key: grunt.file.read('server.key').toString(),
+                    //cert: grunt.file.read('server.crt').toString(),
+                    //ca: grunt.file.read('ca.crt').toString()
                 }
             },
             production: {

README.md

@@ -4,6 +4,14 @@ getaroom.io
 > Pretty nifty cross device and cross browser WebRTC audio/video conferencing demo of [SkylinkJS](http://github.com/Temasys/SkylinkJS) using [React](http://facebook.github.io/react/).
 > Try it out at http://getaroom.io
 
+For more other advanced features of SkylinkJS like the file transfers or the privileged key feature, [see the SkylinkJS demos list](https://github.com/Temasys/SkylinkJS/tree/master/demo). 
+
+Browser support
+----
+Currently, the demo only support up to 10 peers. You may modify the demo to fit to your own limit, but the actual connection limits depends on the user's network connection and computer available memory.
+
+See SkylinkJS support https://github.com/Temasys/SkylinkJS/#supported-browsers
+
 
 Setup
 ----
@@ -16,6 +24,39 @@ You'll need node, npm and grunt installed. Clone the repo and run `npm install`
 
 Replace the API keys and hostnames in the `configs.jsx` file with your own. You can [sign up for your own API key here](https://developer.temasys.com.sg).
 
+Note that it's important to reference the correct `socket.io-client` and `adapterjs` dependencies version based on the version of SkylinkJS you are using.
+
+Files and Folders
+----
+
+You do not need to modify the `.js` files in `/js` folder nor modify from the `styles/app.css` file, since they are auto-generated everytime you do `grunt dev`. 
+
+- `assets/`: Contains the logo.
+- `img/`: Contains the icon images.
+- `js/`: The output auto-generated javascript `.js` files after `grunt dev` is invoked.
+- `jsx/`: The source files where you do modifications to the demo scripts (JS). Files are in JSX (React).
+- `jsx/components/`: The folder that stores the UI components.
+- `jsx/components/chat.jsx`: This file contains the chat layout.
+- `jsx/components/controls.jsx`: This file contains the user controls layout.
+- `jsx/components/userareas.jsx`: This file contains the user video view layout.
+- `jsx/configs.jsx`: This file contains the configuration keys. It's advisable to use your own.
+- `jsx/constants.jsx`: This file contains the constants configuration used by other `jsx` files.
+- `jsx/loader.jsx`: This file contains the dependencies url to load.
+- `jsx/main.jsx`: This file contains handling the SkylinkJS logic.
+- `jsx/utils.jsx`: This file contains utility functions used by some other `jsx` files.
+- `styles/`: The source files where you do modifications to the demo UI styling (CSS). Files are in Stylus.
+- `styles/app.css`: The output auto-generated stylesheet `.css` file after `grunt dev` is invoked.
+- `styles/app.styl`: This file contains the demo styling.
+- `index.html`: This file is the main HTML template. Modify with your own Google Analytics if required.
+
+Note that the self-signed certificate files `ca.crt`, `server.crt` and `server.key` are for your `localhost` domain. You might have to replace with your own certificates if you are hosting this demo on your page.
+
+
+Need help or want something changed?
+----
+
+You can raise tickets on [our support portal](http://support.temasys.com.sg) or on [our Github Page](https://developer.temasys.com.sg/support).
+
 
 License
 ----

source/index.html

@@ -46,6 +46,25 @@
   ga('create', 'UA-53665926-1', 'auto');
   ga('send', 'pageview');
 
+  </script>
+  <script>
+    if (!(window.history && window.history.pushState)) {
+      window.historyNotSupported = true;
+    }
+
+    /**
+     * Gets the query string information
+     */
+    window.getQuery = function (variable) {
+      var query = window.location.search.substring(1);
+      var vars = query.split('&');
+      for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split('=');
+        if (decodeURIComponent(pair[0]) == variable) {
+            return decodeURIComponent(pair[1]);
+        }
+      }
+    };
   </script>
   <img src="/img/camera.svg" style="visibility: hidden; width: 1px; height: 1px;" />
   <img src="/img/lock.svg" style="visibility: hidden; width: 1px; height: 1px;" />

source/js/components/chat.js

@@ -1,112 +1,127 @@
 /** @jsx React.DOM */
 
 define([
-    'react',
-    'utils',
-    'constants',
-    'configs',
-    'skylink',
-    'marked'
+  'react',
+  'utils',
+  'constants',
+  'configs',
+  'skylink',
+  'marked'
+
 ], function (
-    React,
-    Utils,
-    Constants,
-    Configs,
-    Skylink,
-    Marked
+
+  React,
+  Utils,
+  Constants,
+  Configs,
+  Skylink,
+  Marked
 ) {
 
-    var Chat = React.createClass({displayName: 'Chat',
-        marked: Marked,
-        handleFocus: function(e) {
-            if(e.target.tagName === 'A') {
-                return;
-            }
-            Dispatcher.toggleControls(false);
-            Dispatcher.toggleChat();
-        },
-        handleSendMessage: function(e) {
-            if(!e.keyCode || e.keyCode === 13) {
-                var user = this.props.state.users.filter(function (user) {
-                    return user.id === 0;
-                })[0];
-
-                if(user.name) {
-                    Dispatcher.sendMessage(e.currentTarget.value);
-                }
-                else {
-                    Dispatcher.setName(e.currentTarget.value);
-                }
-
-                e.currentTarget.value = '';
-                Dispatcher.toggleControls(false);
-            }
-        },
-        componentDidUpdate: function() {
-            var cont = document.getElementById('messages');
-            if(cont) {
-                cont.scrollTop = cont.scrollHeight;
-            }
-        },
-        render: function() {
-            if(this.props.state.state !== Constants.AppState.IN_ROOM) {
-                return (
-                        React.DOM.section({id: "chat", className: "offline"})
-                    );
-            }
-
-            var res = [];
-            var messages = this.props.state.room.messages || [];
-            var user = this.props.state.users.filter(function (user) {
-                return user.id === 0;
-            })[0];
-
-            for(var i = 0; i < messages.length; i++) {
-                var message = messages[i];
-
-                var className = 'message';
-                if(message.user === 0) {
-                    className = className + ' you';
-                }
-                if(message.type === Constants.MessageType.ACTION) {
-                    className = className + ' action';
-                }
-
-                if(message.img) {
-                    res.push(
-                        React.DOM.div({key: message.date, className: className}, 
-                            React.DOM.img({src: message.img}), 
-                            React.DOM.span({className: "name"}, message.name), 
-                            React.DOM.span({className: "body", dangerouslySetInnerHTML: {__html: this.marked(message.content)}})
-                        )
-                        );
-                }
-                else {
-                    res.push(
-                        React.DOM.div({key: message.date, className: className}, 
-                            React.DOM.span({className: "name"}, message.name), 
-                            React.DOM.span({className: "body", dangerouslySetInnerHTML: {__html: this.marked(message.content)}})
-                        )
-                        );
-                }
-            }
-
-            return (
-                React.DOM.section({id: "chat"}, 
+  var Chat = React.createClass({displayName: 'Chat',
+    marked: Marked,
+
+    /**
+     * Handles when the chatbox is in focus
+     */
+    handleFocus: function(e) {
+      if(e.target.tagName === 'A') {
+        return;
+      }
+      Dispatcher.toggleControls(false);
+      Dispatcher.toggleChat();
+    },
+
+    /**
+     * Handles sending chat message
+     */
+    handleSendMessage: function(e) {
+      if(!e.keyCode || e.keyCode === 13) {
+        var user = this.props.state.users.filter(function (user) {
+          return user.id === 0;
+        })[0];
+
+        Dispatcher.sendMessage(e.currentTarget.value);
+        //Dispatcher.setName(e.currentTarget.value);
+
+        e.currentTarget.value = '';
+        Dispatcher.toggleControls(false);
+      }
+    },
+
+    /**
+     * Handles when Chat updates
+     */
+    componentDidUpdate: function() {
+      var cont = document.getElementById('messages');
+      if(cont) {
+        cont.scrollTop = cont.scrollHeight;
+      }
+    },
+
+    /**
+     * Handles rendering of the Chat
+     */
+    render: function() {
+      if(this.props.state.state !== Constants.AppState.IN_ROOM) {
+        return (React.DOM.section({id: "chat", className: "offline"}));
+      }
+
+      var res = [];
+      var messages = this.props.state.room.messages || [];
+      var user = this.props.state.users.filter(function (user) {
+        return user.id === 0;
+      })[0];
+
+      for(var i = 0; i < messages.length; i++) {
+        var message = messages[i];
+
+        var className = 'message';
+
+        if(message.user === 0) {
+          className = className + ' you';
+        }
+
+        if(message.type === Constants.MessageType.ACTION) {
+          className = className + ' action';
+        }
+
+        // If adding image
+        if(message.img) {
+          res.push(
+            React.DOM.div({key: message.date, className: className}, 
+                React.DOM.img({src: message.img}), 
+                React.DOM.span({className: "name"}, message.name), 
+                React.DOM.span({className: "body", dangerouslySetInnerHTML: {__html: this.marked(message.content)}})
+            )
+          );
+        // Else
+        } else {
+          res.push(
+            React.DOM.div({key: message.date, className: className}, 
+                React.DOM.span({className: "name"}, message.name), 
+                React.DOM.span({className: "body", dangerouslySetInnerHTML: {__html: this.marked(message.content)}})
+            )
+          );
+        }
+      }
+
+      return (
+        React.DOM.section({id: "chat"}, 
+            React.DOM.div(null, 
+                React.DOM.div({id: "messages", onClick: this.handleFocus}, 
                     React.DOM.div(null, 
-                        React.DOM.div({id: "messages", onClick: this.handleFocus}, 
-                            React.DOM.div(null, 
-                               res
-                            )
-                        ), 
-                        React.DOM.div({id: "input", className: this.props.state.room.status !== Constants.RoomState.CONNECTED ? 'disabled' : ''}, 
-                            React.DOM.input({id: "messageInput", type: "text", placeholder: user.name ? 'Chat message' : 'What‘s your name?', autoComplete: "off", onKeyDown: this.handleSendMessage})
-                        )
+                       res
                     )
+                ), 
+                React.DOM.div({id: "input", className: this.props.state.room.status !== Constants.RoomState.CONNECTED ? 'disabled' : ''}, 
+                    React.DOM.input({id: "messageInput", type: "text", placeholder: "Chat message", autoComplete: "off", onKeyDown: this.handleSendMessage})
                 )
-                )
-        }
-    });
+            )
+        )
+      )
+    }
+  });
 
-    return Chat;
+  return Chat;
 });