Implemented room selection screed with automatic room id generator.

Signed-off-by: Simon Eisenmann <simon@struktur.de>

server.conf.in

@@ -16,6 +16,7 @@ listen = 127.0.0.1:8080
 sessionSecret = the-default-secret-do-not-keep
 #tokenFile = tokens.txt # If set, everyone needs to give one of the tokens to launch the web client. One token per line in the file.
 #globalRoom = global # Enables a global room. Users in that room are in all rooms.
+#defaultRoomEnabled = true # Set to false to disable default room.
 #extra = /usr/share/spreed-speakfreely-server/extra # Extra templates directory. Add .html files to define extra-* template slots here.
 #plugin = plugins/example1 # Plugin support.
 

src/app/spreed-speakfreely-server/main.go

@@ -214,6 +214,12 @@ func runner(runtime phoenix.Runtime) error {
 		plugin = ""
 	}
 
+	defaultRoomEnabled := true
+	defaultRoomEnabledString, err := runtime.GetString("app", "defaultRoomEnabled")
+	if err == nil {
+		defaultRoomEnabled = defaultRoomEnabledString == "true"
+	}
+
 	// Create token provider.
 	var tokenProvider TokenProvider
 	if tokenFile != "" {
@@ -221,8 +227,6 @@ func runner(runtime phoenix.Runtime) error {
 		tokenProvider = TokenFileProvider(tokenFile)
 	}
 
-	defaultRoomEnabled := false
-
 	// Create configuration data structure.
 	config = NewConfig(title, ver, runtimeVersion, basePath, stunURIs, turnURIs, tokenProvider != nil, globalRoomid, defaultRoomEnabled, plugin)
 

src/styles/components/_usability.scss

@@ -26,17 +26,7 @@ left:15%;
 right:0px;
 width:400px;
 font-size:1.4em;
-font-style:italic;
 color:#aaa;
-font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
-}
-#help > div {
-}
-#help i {
-float:right;
-}
-#help li {
-padding:0 0 20px 0;
 }
 #help .help-subline {
 padding:20px 0;

static/js/controllers/controllers.js

@@ -23,13 +23,15 @@ define([
 
   'controllers/mediastreamcontroller',
   'controllers/statusmessagecontroller',
-  'controllers/chatroomcontroller'
+  'controllers/chatroomcontroller',
-], function(_, MediastreamController, StatusmessageController, ChatroomController) {
+  'controllers/roomchangecontroller'
+], function(_, MediastreamController, StatusmessageController, ChatroomController, RoomchangeController) {
 
   var controllers = {
       MediastreamController: MediastreamController,
       StatusmessageController: StatusmessageController,
-      ChatroomController: ChatroomController
+      ChatroomController: ChatroomController,
+      RoomchangeController: RoomchangeController
   };
 
   var initialize = function (angModule) {

static/js/controllers/roomchangecontroller.js

@@ -0,0 +1,76 @@
+/*
+ * Spreed Speak Freely.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed Speak Freely.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+define([], function() {
+
+    // RoomchangeController
+    return ["$scope", "$element", "$window", "$location", "mediaStream", "$http", "$timeout", function($scope, $element, $window, $location, mediaStream, $http, $timeout) {
+
+        console.log("Room change controller", $element, $scope.roomdata);
+
+        var baseurl = $window.location.protocol+'//'+$window.location.host+mediaStream.config.B;
+        var url = (mediaStream.config.B || "/") + "api/v1/rooms";
+
+        var ctrl = this;
+        ctrl.enabled = true;
+        ctrl.getRoom = function(cb) {
+            $http({
+                method: "POST",
+                url: url,
+                data: $.param({
+                }),
+                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+            }).
+            success(function(data, status) {
+                cb(data);
+            }).
+            error(function() {
+                console.log("Failed to retrieve room link", arguments);
+                cb(data);
+            });
+        };
+
+        $scope.changeRoomToId = function(id) {
+            var roomid = $window.encodeURIComponent(id);
+            $location.path("/"+roomid);
+            return roomid;
+        };
+
+        $scope.$on("$destroy", function() {
+            //console.log("Room change controller destroyed");
+            ctrl.enabled = false;
+        });
+
+        if (typeof $scope.roomdata !== "undefined") {
+            $scope.roomdata = {};
+            $timeout(function() {
+                if (ctrl.enabled) {
+                    ctrl.getRoom(function(roomdata) {
+                        console.info("Retrieved room data", roomdata);
+                        $scope.roomdata = roomdata;
+                        roomdata.link = baseurl + encodeURI(roomdata.name);
+                    });
+                }
+            }, 500);
+        }
+
+    }];
+
+});

static/js/directives/buddylist.js

@@ -50,6 +50,13 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) {
 
             };
 
+            $scope.setRoomStatus = function(status) {
+                if (status !== $scope.enabled) {
+                    $scope.enabled = status;
+                    $scope.$emit("roomStatus", status);
+                }
+            };
+
             window.doAudioConference = $scope.doAudioConference;
 
             var buddylist = $scope.buddylist = buddyList.buddylist($element, $scope, {});
@@ -64,7 +71,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) {
                 }
             });
             mediaStream.api.e.on("received.users", function(event, data) {
-                $scope.enabled = true;
+                $scope.setRoomStatus(true);
                 var selfId = $scope.id;
                 _.each(data, function(p) {
                     if (p.Id !== selfId) {
@@ -77,7 +84,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) {
                 onStatus(data);
             });
             mediaStream.connector.e.on("closed error", function() {
-                $scope.enabled = false;
+                $scope.setRoomStatus(false);
                 buddylist.onClosed();
             });
 

static/js/directives/roombar.js

@@ -23,15 +23,15 @@ define(['underscore', 'text!partials/roombar.html'], function(_, template) {
     // roomBar
     return ["$window", "$rootScope", "$location", function($window, $rootScope, $location) {
 
-        var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+        var link = function($scope) {
 
+            //console.log("roomBar directive link", arguments);
             $scope.newroomid = $rootScope.roomid;
             $scope.hideRoomBar = true;
 
             $scope.save = function() {
-                var roomid = $window.encodeURIComponent($scope.newroomid);
+                var roomid = $scope.changeRoomToId($scope.newroomid);
                 if (roomid !== $rootScope.roomid) {
-                    $location.path("/"+roomid).replace();
                     $scope.roombarform.$setPristine();
                 }
                 $scope.hideRoomBar = true;
@@ -61,12 +61,6 @@ define(['underscore', 'text!partials/roombar.html'], function(_, template) {
                 }
             });
 
-        }];
-
-        var link = function(scope, iElement, iAttrs, controller) {
-
-            //console.log("roomBar directive link", arguments);
-
         };
 
         return {
@@ -74,7 +68,7 @@ define(['underscore', 'text!partials/roombar.html'], function(_, template) {
             replace: true,
             scope: true,
             template: template,
-            controller: controller,
+            controller: "RoomchangeController",
             link: link
         }
 

static/js/directives/usability.js

@@ -24,9 +24,14 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _,
 
   return ["mediaStream", function(mediaStream) {
 
-    var controller = ['$scope', "mediaStream", "safeApply", function($scope, mediaStream, safeApply) {
+    var controller = ['$scope', "mediaStream", "safeApply", "$rootScope", "$timeout", function($scope, mediaStream, safeApply, $rootScope, $timeout) {
+
+      $scope.roomdata = {};
 
       var pending = true;
+      var complete = false;
+
+      var initalizer = null;
 
       var ctrl = this;
       ctrl.setInfo = function(info) {
@@ -40,10 +45,13 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _,
           if (status) {
             localStorage.setItem("mediastream-mediacheck", MEDIA_CHECK)
             $scope.connect()
-            ctrl.setInfo("complete");
+            ctrl.setInfo("initializing");
+            initializer = $timeout(function() {
+              ctrl.setInfo("noroom");
+            }, 1000);
+            complete = true;
           } else {
             ctrl.setInfo("denied");
-            $scope.mediaAccessDenied = true;
           }
           // Check if we should show settings per default.
           $scope.showSettings = $scope.loadedUser ? 0 : 1;
@@ -84,9 +92,21 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _,
           }
       });
 
+      $rootScope.$on("roomStatus", function(event, status) {
+        //console.log("roomStatus", status);
+        if (complete) {
+          if (initializer !== null) {
+            $timeout.cancel(initializer);
+            initializer = null;
+          }
+          ctrl.setInfo(status ? "room" : "noroom");
+        }
+      });
+
     }];
 
     return {
+      scope: true,
       restrict: 'E',
       replace: true,
       template: template,

static/js/services/mediastream.js

@@ -111,7 +111,7 @@ define([
                         $location.path("/"+defaultRoom).replace();
                         return
                     }
-                    console.info("Room is:", [room]);
+                    console.info("Selected room is:", [room]);
                     if (!ready || !cont) {
                         ready = true;
                         connector.roomid = room;

static/partials/usability.html

@@ -2,13 +2,29 @@
     <div class="animate-show" ng-hide="showSettings">
         <div ng-switch="usabilityInfo">
           <div ng-switch-when="checking"><i class="fa fa-refresh fa-spin fa-4x pull-right"></i>{{_("Checking camera and microphone access.")}}</div>
-          <div ng-switch-when="complete">
+          <div ng-switch-when="room">
             <i class="fa fa-hand-o-right fa-4x pull-right"></i>
             <p>{{_("Select one of the users from the online list to start a video call.")}}</p>
             <p>{{_("Hover over users in the list for more actions.")}}</p>
             <p>{{_("Double click on video for fullscreen when in a call.")}}</p>
             <p>{{_("Drag files into a chat window to share files with this room or person.")}}</p>
           </div>
+          <div ng-switch-when="noroom" ng-controller="RoomchangeController">
+            <h3 style="margin-top:0px">Create your room</h3>
+            <p><i>Just click start</i></p>
+            <p>
+              <div class="input-group input-group-lg">
+                <input type="text" class="form-control" ng-model="roomdata.link" placeholder="Creating room link ..." disabled>
+                <span class="input-group-btn">
+                  <button class="btn btn-primary" type="button" ng-disabled="!roomdata.link" ng-click="changeRoomToId(roomdata.name)">Start</button>
+                </span>
+              </div>
+            </p>
+            <ul class="fa-ul">
+              <li><i class="fa-li fa fa-files-o"></i>Share this URL with the people you want to meet.</li>
+              <li><i class="fa-li fa fa-clipboard"></i>You can use and re-use this room as many times as you want.</li>
+            </ul>
+          </div>
           <div ng-switch-when="usermedia"><i class="fa fa-hand-o-up fa-4x pull-right"></i>{{_("Please allow access to your camera and microphone.")}}</div>
           <div ng-switch-when="denied"><i class="fa fa-exclamation-triangle fa-4x pull-right"></i>{{_("Camera / microphone access required.")}}</div>
         </div>