Implements the functionality to set subject to the chat room.

chat.js

@@ -39,10 +39,19 @@ var Chat = (function (my) {
         $('#usermsg').keydown(function (event) {
             if (event.keyCode === 13) {
                 event.preventDefault();
-                var message = Util.escapeHtml(this.value);
+                var value = this.value;
                 $('#usermsg').val('').trigger('autosize.resize');
                 this.focus();
-                connection.emuc.sendMessage(message, nickname);
+                var command = new CommandsProcessor(value);
+                if(command.isCommand())
+                {
+                    command.processCommand();
+                }
+                else
+                {
+                    var message = Util.escapeHtml(value);
+                    connection.emuc.sendMessage(message, nickname);
+                }
             }
         });
 
@@ -90,6 +99,45 @@ var Chat = (function (my) {
                 { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
     };
 
+    /**
+     * Appends error message to the conversation
+     * @param errorMessage the received error message.
+     * @param originalText the original message.
+     */
+    my.chatAddError = function(errorMessage, originalText)
+    {
+        errorMessage = Util.escapeHtml(errorMessage);
+        originalText = Util.escapeHtml(originalText);
+
+        $('#chatconversation').append('<div class="errorMessage"><b>Error: </b>'
+            + 'Your message' + (originalText? (' \"'+ originalText + '\"') : "")
+            + ' was not sent.' + (errorMessage? (' Reason: ' + errorMessage) : '')
+            +  '</div>');
+        $('#chatconversation').animate(
+            { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
+
+    }
+
+    /**
+     * Sets the subject to the UI
+     * @param subject the subject
+     */
+    my.chatSetSubject = function(subject)
+    {
+        if(subject)
+            subject = subject.trim();
+        $('#subject').html(linkify(Util.escapeHtml(subject)));
+        if(subject == "")
+        {
+            $("#subject").css({display: "none"});
+        }
+        else
+        {
+            $("#subject").css({display: "block"});
+        }
+    }
+
+
     /**
      * Opens / closes the chat area.
      */

commands.js

@@ -0,0 +1,98 @@
+/**
+ * Handles commands received via chat messages.
+ */
+var CommandsProcessor = (function()
+{
+    /**
+     * Constructs new CommandProccessor instance from a message.
+     * @param message the message
+     * @constructor
+     */
+    function CommandsPrototype(message)
+    {
+        /**
+         * Extracts the command from the message.
+         * @param message the received message
+         * @returns {string} the command
+         */
+        function getCommand(message)
+        {
+            if(message)
+            {
+                for(var command in commands)
+                {
+                    if(message.indexOf("/" + command) == 0)
+                        return command;
+                }
+            }
+            return "";
+        };
+
+        var command = getCommand(message);
+
+        /**
+         * Returns the name of the command.
+         * @returns {String} the command
+         */
+        this.getCommand = function()
+        {
+            return command;
+        }
+
+
+        var messageArgument = message.substr(command.length + 2);
+
+        /**
+         * Returns the arguments of the command.
+         * @returns {string}
+         */
+        this.getArgument = function()
+        {
+            return messageArgument;
+        }
+    }
+
+    /**
+     * Checks whether this instance is valid command or not.
+     * @returns {boolean}
+     */
+    CommandsPrototype.prototype.isCommand = function()
+    {
+        if(this.getCommand())
+            return true;
+        return false;
+    }
+
+    /**
+     * Processes the command.
+     */
+    CommandsPrototype.prototype.processCommand = function()
+    {
+        if(!this.isCommand())
+            return;
+
+        commands[this.getCommand()](this.getArgument());
+
+    }
+
+    /**
+     * Processes the data for topic command.
+     * @param commandArguments the arguments of the topic command.
+     */
+    var processTopic = function(commandArguments)
+    {
+        var topic = Util.escapeHtml(commandArguments);
+        connection.emuc.setSubject(topic);
+    }
+
+    /**
+     * List with supported commands. The keys are the names of the commands and
+     * the value is the function that processes the message.
+     * @type {{String: function}}
+     */
+    var commands = {
+        "topic" : processTopic
+    };
+
+    return CommandsPrototype;
+})();

css/main.css

@@ -43,6 +43,10 @@ html, body{
     color: #087dba;
 }
 
+.errorMessage {
+    color: red;
+}
+
 .remoteuser {
     color: #424242;
 }

css/videolayout_default.css

@@ -235,7 +235,6 @@
 #header{
     display:none;
     position:absolute;
-    height: 0px;
     text-align:center;
     top:0;
     left:0;
@@ -256,6 +255,21 @@
     border-bottom-right-radius: 12px;
 }
 
+#subject {
+    position: relative;
+    z-index: 3;
+    width: auto;
+    padding: 5px;
+    margin-left: 40%;
+    margin-right: 40%;
+    text-align: center;
+    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
+    -webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    display: none;
+}
+
 .watermark {
     display: block;
     position: absolute;

index.html

@@ -23,12 +23,13 @@
     <script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="config.js?v=2"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
-    <script src="muc.js?v=11"></script><!-- simple MUC library -->
+    <script src="muc.js?v=12"></script><!-- simple MUC library -->
     <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
     <script src="desktopsharing.js?v=2"></script><!-- desktop sharing -->
     <script src="data_channels.js?v=1"></script><!-- data channels -->
     <script src="app.js?v=28"></script><!-- application logic -->
-    <script src="chat.js?v=5"></script><!-- chat logic -->
+    <script src="commands.js?v=1"></script><!-- application logic -->
+    <script src="chat.js?v=6"></script><!-- chat logic -->
     <script src="util.js?v=5"></script><!-- utility functions -->
     <script src="etherpad.js?v=8"></script><!-- etherpad plugin -->
     <script src="prezi.js?v=4"></script><!-- prezi plugin -->
@@ -38,11 +39,11 @@
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_stats.js?v=1"></script><!-- RTP stats processing -->
     <script src="videolayout.js?v=3"></script><!-- video ui -->
-    <script src="toolbar.js?v=1"></script><!-- toolbar ui -->
+    <script src="toolbar.js?v=2"></script><!-- toolbar ui -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=20"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=21"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=6" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=7" id="videolayout_default"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
     <link rel="stylesheet" href="css/popup_menu.css?v=2">
@@ -56,37 +57,40 @@
     <script src="libs/prezi_player.js?v=2"></script>
   </head>
   <body>
-    <div id="header">
+    <div style="position: relative;" id="header_container">
-        <span id="toolbar">
+        <div id="header">
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
+            <span id="toolbar">
-                <i id="mute" class="icon-microphone"></i></a>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
-            <div class="header_button_separator"></div>
+                    <i id="mute" class="icon-microphone"></i></a>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
-                <i id="video" class="icon-camera"></i></a>
-            <div class="header_button_separator"></div>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
-                <i id="lockIcon" class="icon-security"></i></a>
-            <div class="header_button_separator"></div>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();"><i class="icon-link"></i></a>
-            <div class="header_button_separator"></div>
-            <span class="toolbar_span">
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'><i id="chatButton" class="icon-chat"></i></a>
-                <span id="unreadMessages"></span>
-            </span>
-            <div class="header_button_separator"></div>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'><i class="icon-prezi"></i></a>
-            <span id="etherpadButton">
                 <div class="header_button_separator"></div>
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'><i class="icon-share-doc"></i></a>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
-            </span>
+                    <i id="video" class="icon-camera"></i></a>
-            <div class="header_button_separator"></div>
-            <span id="desktopsharing" style="display: none">
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();"><i class="icon-share-desktop"></i></a>
                 <div class="header_button_separator"></div>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
+                    <i id="lockIcon" class="icon-security"></i></a>
+                <div class="header_button_separator"></div>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();"><i class="icon-link"></i></a>
+                <div class="header_button_separator"></div>
+                <span class="toolbar_span">
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'><i id="chatButton" class="icon-chat"></i></a>
+                    <span id="unreadMessages"></span>
+                </span>
+                <div class="header_button_separator"></div>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'><i class="icon-prezi"></i></a>
+                <span id="etherpadButton">
+                    <div class="header_button_separator"></div>
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'><i class="icon-share-doc"></i></a>
+                </span>
+                <div class="header_button_separator"></div>
+                <span id="desktopsharing" style="display: none">
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();"><i class="icon-share-desktop"></i></a>
+                    <div class="header_button_separator"></div>
+                </span>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
+                    <i id="fullScreen" class="icon-full-screen"></i></a>
             </span>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
+        </div>
-                <i id="fullScreen" class="icon-full-screen"></i></a>
+        <div id="subject"></div>
-        </span>
     </div>
     <div id="settings">
       <h1>Connection Settings</h1>

muc.js

@@ -170,12 +170,36 @@ Strophe.addConnectionPlugin('emuc', {
         }
         this.connection.send(msg);
     },
+    setSubject: function (subject){
+        var msg = $msg({to: this.roomjid, type: 'groupchat'});
+        msg.c('subject', subject);
+        this.connection.send(msg);
+        console.log("topic changed to " + subject);
+    },
     onMessage: function (msg) {
-        var txt = $(msg).find('>body').text();
-        // TODO: <subject/>
         // FIXME: this is a hack. but jingle on muc makes nickchanges hard
         var from = msg.getAttribute('from');
         var nick = $(msg).find('>nick[xmlns="http://jabber.org/protocol/nick"]').text() || Strophe.getResourceFromJid(from);
+
+        var txt = $(msg).find('>body').text();
+        var type = msg.getAttribute("type");
+        if(type == "error")
+        {
+            Chat.chatAddError($(msg).find('>text').text(), txt);
+            return true;
+        }
+
+        var subject = $(msg).find('>subject');
+        if(subject.length)
+        {
+            var subjectText = subject.text();
+            if(subjectText || subjectText == "") {
+                Chat.chatSetSubject(subjectText);
+                console.log("Subject is changed to " + subjectText);
+            }
+        }
+
+
         if (txt) {
             console.log('chat', nick, txt);
 

toolbar.js

@@ -154,6 +154,7 @@ var Toolbar = (function (my) {
     my.showToolbar = function() {
         if (!$('#header').is(':visible')) {
             $('#header').show("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "+=40"}, 300);
 
             if (toolbarTimeout) {
                 clearTimeout(toolbarTimeout);
@@ -222,6 +223,7 @@ var Toolbar = (function (my) {
 
         if (!isToolbarHover) {
             $('#header').hide("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "-=40"}, 300);
         }
         else {
             toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);