Merge b8d03796f5 into af1524d60e

html/main.html

@@ -18,6 +18,7 @@
             <div class="navbar-brand left">
                 <%template "logo" .%>
             </div>
+            <buddycondensed></buddycondensed>
         </div>
         <div class="navbar-collapse collapse" collapse="isCollapsed">
             <ul class="nav navbar-nav navbar-right right">

src/styles/components/_buddycondensed.scss

@@ -0,0 +1,116 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * 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/>.
+ *
+ */
+#buddycondensed {
+  display: inline-block;
+  position: fixed;
+  padding-left: 20px;
+  @media (max-width: 1125px) {
+    display: none;
+  }
+}
+.buddycondensed {
+  &.buddy {
+    background: none;
+    border-bottom: none;
+    cursor: auto;
+    min-height: 50px;
+    vertical-align: bottom;
+    overflow: visible;
+    .buddyPicture {
+      margin: 2px;
+    }
+    &:hover .desc {
+      height: 0;
+      opacity: 0;
+      overflow: hidden;
+    }
+    &:hover .overDefaultDisplayNum {
+      height: 51px;
+      opacity: 1;
+      overflow: visible;
+    }
+  }
+  .overNum ~ .overDefaultDisplayNum {
+    width: 250px;
+  }
+  .overDefaultDisplayNum {
+    background: #f8f8f8;
+    display: inline-block;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    max-width: 80%;
+    position: fixed;
+    top: 49px;
+  }
+  .desc {
+    display: none;
+    font-weight: bold;
+    padding-left: 10px;
+    cursor: default;
+    &.overNum {
+      display: inline-block;
+    }
+  }
+  .buddyPicture:hover  .actions {
+    height: 51px;
+    opacity: 1;
+  }
+  .actions {
+    background: #FFF;
+    border: 1px solid rgba(128,128,128,0.16);
+    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    border-radius: 2px;
+    cursor: default;
+    display: inline-block;
+    height: 0;
+    left: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0 10px;
+    bottom: 12px;
+    position: absolute;
+    top: 48px;
+    -webkit-transition: opacity .1s .1s linear, height .4s .1s ease-out;
+    transition: opacity .1s .1s linear, height .4s .1s ease-out;
+    white-space: nowrap;
+    z-index: 10;
+    .btn-group {
+      margin-bottom: 5px;
+      width: 55px;
+    }
+    .btn-primary {
+      padding: 2px 4px;
+    }
+    .fa {
+      font-size: 20px;
+      color: #FFF;
+      line-height: 24px;
+    }
+    .displayName {
+      margin-right: 10px;
+    }
+  }
+  .buddyPicture {
+    cursor: default;
+    overflow: visible;
+  }
+}

src/styles/main.scss

@@ -37,6 +37,7 @@
 @import "components/rightslide";
 @import "components/bar";
 @import "components/buddylist";
+@import "components/buddycondensed";
 @import "components/buddypicturecapture";
 @import "components/buddypictureupload";
 @import "components/settings";

static/js/directives/buddycondensed.js

@@ -0,0 +1,149 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * 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(['jquery', 'text!partials/buddycondensed.html'], function($, template) {
+
+	// buddycondensed
+	return [function() {
+
+		var controller = ['$scope', 'mediaStream', 'contacts', 'buddyData', function($scope, mediaStream, contacts, buddyData) {
+			var buddycondensed = [];
+			var getContactSessionId = function(userid) {
+				var session = null;
+				var scope = buddyData.lookup(userid, false, false);
+				if (scope) {
+					session = scope.session.get();
+				}
+				return session && session.Id ? session.Id : null;
+			};
+			var empty = function(x) {
+				return x === null || x === undefined || x === "";
+			};
+			var sortCondensed = function() {
+				buddycondensed.sort(function(current, next) {
+					if (!current.Status || current.Status && empty(current.Status.displayName)) {
+						return 1;
+					} else {
+						if (next.Status && !empty(next.Status.displayName)) {
+							if (current.Status.displayName < next.Status.displayName) {
+								return -1;
+							} else if (current.Status.displayName > next.Status.displayName) {
+								return 1;
+							} else {
+								return 0;
+							}
+						} else {
+							return 0;
+						}
+					}
+				});
+			};
+			var joined = function(buddy) {
+				buddycondensed.push(buddy);
+			};
+			var left = function(id) {
+				for (var i in buddycondensed) {
+					if (buddycondensed[i].Id === id) {
+						buddycondensed.splice(i,1);
+						break;
+					}
+				}
+				$scope.$apply();
+			};
+			var contactadded = function(data) {
+				//console.log('contactadded', data);
+				var hasSession = false;
+				for (var i in buddycondensed) {
+					// replace session data with contact data
+					if (buddycondensed[i].Userid === data.Userid) {
+						buddycondensed[i] = data;
+						hasSession = true;
+						break;
+					}
+				}
+				if (!hasSession) {
+					joined(data);
+				}
+				$scope.$apply();
+			};
+			$scope.doCall = function(buddy) {
+				mediaStream.webrtc.doCall(getContactSessionId(buddy.Userid));
+			};
+			$scope.doChat = function(buddy) {
+				$scope.$emit("startchat", getContactSessionId(buddy.Userid), {
+					autofocus: true,
+					restore: true
+				});
+			};
+			$scope.listDefault = function() {
+				if (buddycondensed.length > $scope.maxBuddiesToShow) {
+					return buddycondensed.slice(0, $scope.maxBuddiesToShow);
+				} else {
+					return buddycondensed;
+				}
+			};
+			$scope.listOverDefault = function() {
+				if (buddycondensed.length > $scope.maxBuddiesToShow) {
+					return buddycondensed.slice($scope.maxBuddiesToShow);
+				} else {
+					return [];
+				}
+			};
+			$scope.maxBuddiesToShow = 5;
+			contacts.e.on("contactadded", function(event, data) {
+				contactadded(data);
+				sortCondensed();
+			});
+			mediaStream.api.e.on("received.userleftorjoined", function(event, dataType, data) {
+				//console.log("received.userleftorjoined", data.Id);
+				if (dataType === "Left") {
+					left(data.Id);
+				} else {
+					joined(data);
+				}
+				sortCondensed();
+			});
+			mediaStream.api.e.on("received.users", function(event, data) {
+				//console.log("received.users", data);
+				var selfId = $scope.id;
+				data.forEach(function(x) {
+					if (x.Id !== selfId) {
+						joined(x);
+					}
+				});
+				sortCondensed();
+				$scope.$apply();
+			});
+		}];
+
+		var link = function($scope, elem, attrs, ctrl) {};
+
+		return {
+			restrict: 'E',
+			scope: true,
+			replace: true,
+			link: link,
+			controller: controller,
+			template: template
+		};
+
+	}];
+
+});

static/js/directives/directives.js

@@ -46,7 +46,8 @@ define([
 	'directives/presentation',
 	'directives/youtubevideo',
 	'directives/bfi',
-	'directives/title'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title) {
+	'directives/title',
+	'directives/buddycondensed'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title, buddycondensed) {
 
 	var directives = {
 		onEnter: onEnter,
@@ -72,7 +73,8 @@ define([
 		presentation: presentation,
 		youtubevideo: youtubevideo,
 		bfi: bfi,
-		title: title
+		title: title,
+		buddycondensed: buddycondensed
 	};
 
 	var initialize = function(angModule) {

static/partials/buddycondensed.html

@@ -0,0 +1,35 @@
+<div id="buddycondensed">
+    <div class="buddycondensed buddy">
+        <span class="desc" ng-class="{overNum:listOverDefault().length > 0}">+ {{listOverDefault().length}} {{_("more")}}</span>
+        <div class="defaultDisplayNum pull-left">
+            <span ng-repeat="buddy in listDefault()">
+                <span class="buddyPicture">
+                    <i class="fa fa-user"/>
+                    <img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/>
+                    <span class="actions">
+                        <span class="displayName">{{buddy.Userid|displayName}}</span>
+                        <div class="btn-group">
+                            <a class="btn btn-primary" ng-click="doCall(buddy)" title="Start video call"><i class="fa fa-phone"></i></a>
+                            <a class="btn btn-primary" ng-click="doChat(buddy)" title="Start chat"><i class="fa fa-comments-o"></i></a>
+                        </div>
+                    </span>
+                </span>
+            </span>
+        </div>
+        <div class="overDefaultDisplayNum">
+            <span ng-repeat="buddy in listOverDefault()">
+                <span class="buddyPicture">
+                    <i class="fa fa-user"/>
+                    <img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/>
+                    <span class="actions">
+                        <span class="displayName">{{buddy.Userid|displayName}}</span>
+                        <div class="btn-group">
+                            <a class="btn btn-primary" ng-click="doCall(buddy)" title="Start video call"><i class="fa fa-phone"></i></a>
+                            <a class="btn btn-primary" ng-click="doChat(buddy)" title="Start chat"><i class="fa fa-comments-o"></i></a>
+                        </div>
+                    </span>
+                </span>
+            </span>
+        </div>
+    </div>
+</div>