Merge branch 'longsleep-better-welcome'

src/styles/global/_base.scss

@@ -128,7 +128,6 @@ a {
   position: absolute;
   right: 0;
   top: 44px;
-  user-select: none;
 }
 
 .welcome {
@@ -136,7 +135,35 @@ a {
   font-size: 1.1em;
   margin-top: 80px;
   text-shadow: 0 0 5px black;
-  max-width:500px;
+  max-width:600px;
+
+  h1 {
+    text-align: center;
+  }
+
+  .welcome-container {
+    max-width: 450px;
+    margin: 0 auto;
+  }
+
+  .welcome-input {
+    position: relative;
+    input {
+      padding-right: 105px;
+    }
+  }
+
+  .welcome-input-buttons {
+    text-shadow: none;
+    position: absolute;
+    top: 6px;
+    right: 8px;
+    a {
+      padding-right: .5em;
+      color: black;
+    }
+  }
+
 }
 
 .help-block {

static/js/controllers/roomchangecontroller.js

@@ -54,22 +54,32 @@ define([], function() {
 			return roomid;
 		};
 
+		$scope.refreshRoom = function() {
+			if (ctrl.enabled) {
+				ctrl.getRoom(function(roomdata) {
+					console.info("Retrieved room data", roomdata);
+					$scope.roomdata = roomdata;
+				});
+			}
+		};
+
 		$scope.$on("$destroy", function() {
 			//console.log("Room change controller destroyed");
 			ctrl.enabled = false;
 		});
 
+		$scope.roomdata = {};
+		$scope.$watch("roomdata.name", function(n) {
+			console.log("roomdata.name changed", n);
+			var u = encodeURIComponent(n);
+			$scope.roomdata.url = "/" + u;
+			$scope.roomdata.link = mediaStream.url.room(n);
+		});
+
 		var roomDataLinkInput = $element.find(".roomdata-link-input");
 		if (roomDataLinkInput.length) {
-			$scope.roomdata = {};
 			$timeout(function() {
-				if (ctrl.enabled) {
-					ctrl.getRoom(function(roomdata) {
-						console.info("Retrieved room data", roomdata);
-						$scope.roomdata = roomdata;
-						roomdata.link = $scope.roomlink = mediaStream.url.room(roomdata.name);
-					});
-				}
+				$scope.refreshRoom();
 			}, 100);
 		}
 

static/partials/buddylist.html

@@ -3,6 +3,6 @@
     <div>
     </div>
   </div>
-  <div class="buddylistloading"><i class="fa fa-spinner fa-spin"></i></div>
+  <div class="buddylistloading"><i class="fa fa-circle-o-notch fa-spin"></i></div>
   <div class="buddylistempty">{{_("No other users online")}}</div>
 </div>

static/partials/buddypicture.html

@@ -20,6 +20,6 @@
 	</div>
 	<a class="btn btn-small btn-success" ng-show="!showTakePicture" ng-disabled="waitingForPermission" ng-click="initPicture()"> {{_('Take picture')}}</a>
 	<span ng-show="waitingForPermission">
-		<i class="fa fa-spinner fa-spin"></i> {{_('Waiting for camera')}}
+		<i class="fa fa-circle-o-notch fa-spin"></i> {{_('Waiting for camera')}}
 	</span>
 </div>

static/partials/page.html

@@ -1,4 +1,4 @@
-<div id="page">
+<div id="page" class="ng-cloak">
 	<div ng-if="page" ng-include="page"></div>
 	<div ng-hide="page" id="help">
 		<usability/>

static/partials/page/welcome.html

@@ -1,20 +1,17 @@
 <div class="welcome container-fluid" ng-controller="RoomchangeController">
-<h3 style="margin-top:0px">{{_("Create your room")}}</h3>
-<p><i>{{_("This is your room link:")}}</i></p>
-<p>
-  <div class="input-group input-group-lg">
-    <input type="text" class="form-control roomdata-link-input" 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>
-<p><i>{{_("Just click start")}}</i></p>
-<small>
-  <ul class="fa-ul">
-    <li><i class="fa-li fa fa-share-square"></i>{{_("Share this URL with the people you want to meet.")}}</li>
-    <li><i class="fa-li fa fa-repeat"></i>{{_("You can use and re-use this room as many times as you want.")}}</li>
-  </ul>
-</small>
-<social-share/>
+	<h1>{{_("Create a room and talk together")}}</h1>
+	<div class="welcome-container">
+		<p>
+		  <div class="form-group welcome-input">
+		    <input type="text" class="form-control roomdata-link-input input-lg" ng-model="roomdata.name" placeholder="{{_('Creating room ...')}}">
+		    <div class="welcome-input-buttons">
+		      <a class="fa fa-refresh" ng-click="refreshRoom()"></a>
+		      <button class="btn btn-primary" type="button" ng-disabled="!roomdata.link" ng-click="changeRoomToId(roomdata.name)">{{_("Create")}}</button>
+		    </div>
+		  </div>
+		</p>
+		<center>
+		    <p ng-show="roomdata.name"><i class="fa fa-external-link"></i> <a href="{{roomdata.link}}" ng-click="changeRoomToId(roomdata.name);$event.preventDefault()">{{roomdata.link}}</a></p>
+		</center>
+	</div>
 </div>

static/partials/statusmessage.html

@@ -1,12 +1,12 @@
 <span class="middle status-{{status}}" ng-switch on="status">
-  <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span>
+  <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-circle-o-notch fa-spin"></i></span>
   <span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span>
-  <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span>
+  <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-circle-o-notch fa-spin"></i> {{_("Hangup")}}</a></span>
   <span ng-switch-when="connected"><span class="msg">{{_("In call with")}} {{peer|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doHangup()"><i class="fa fa-sign-out"></i> {{_("Hangup")}}</a></span>
   <span ng-switch-when="conference"><span class="msg">{{_("Conference with")}} {{peer|displayName}}<span>{{conferencePeers|displayConference}}</span></span> <a class="btn btn-small btn-danger" ng-click="doHangup()"><i class="fa fa-sign-out"></i> {{_("Hangup")}}</a></span>
   <span ng-switch-when="closed"><span class="msg">{{_("Your are offline")}}</span> <a class="btn btn-small btn-success" ng-click="doReconnect()"><i class="fa fa-sign-in"></i> {{_("Go online")}}</a></span>
-  <span ng-switch-when="reconnecting">{{_("Connection interrupted")}} <i class="text-warning fa fa-spinner fa-spin"></i></span>
+  <span ng-switch-when="reconnecting">{{_("Connection interrupted")}} <i class="text-warning fa fa-circle-o-notch fa-spin"></i></span>
   <span ng-switch-when="error"><span class="msg">{{_("An error occured")}}</span> <a class="btn btn-small btn-success" ng-click="doReconnect()"><i class="fa fa-refresh"></i> {{_("Retry")}}</a></span>
   <span ng-switch-when="ringing"><span class="msg long">{{_("Incoming call")}} {{_("from")}} {{incoming|displayName}}</span> <span class="actions"><a class="btn btn-small btn-success btn-shakeityeah" ng-click="doAccept()"><i class="fa fa-phone"></i> {{_("Accept call")}}</a> <a class="btn btn-small btn-danger" ng-click="doReject()"><i class="fa fa-sign-out"></i> {{_("Reject")}}</a></span></span>
-  <span ng-switch-when="waitforusermedia"><span class="msg">{{_("Waiting for camera/microphone access")}}</span> <a class="btn btn-small btn-danger" ng-click="doHangup()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span>
+  <span ng-switch-when="waitforusermedia"><span class="msg">{{_("Waiting for camera/microphone access")}}</span> <a class="btn btn-small btn-danger" ng-click="doHangup()"><i class="fa fa-circle-o-notch fa-spin"></i> {{_("Hangup")}}</a></span>
 </span>

static/partials/usability.html

@@ -1,7 +1,7 @@
 <div class="fadetogglecontainer" ng-hide="peer">
     <div class="animate-show" ng-hide="layout.settings">
         <div class="fadetogglecontainer" ng-switch="usabilityInfo">
-          <div ng-switch-when="initializing"><h1 style="text-align:center">{{_("Please wait")}} <i class="fa fa-spinner fa-spin"></i></h1></div>
+          <div ng-switch-when="initializing"><h1 style="text-align:center">{{_("Please wait")}} <i class="fa fa-circle-o-notch fa-spin"></i></h1></div>
           <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="usermedia"><i><i class="fa fa-hand-o-up fa-4x pull-right"></i>{{_("Please allow access to your camera and microphone.")}}</i></div>
           <div ng-switch-when="denied"><i><i class="fa fa-exclamation-triangle fa-4x pull-right"></i>{{_("Camera / microphone access required.")}}</i></div>