Added support for screen sharing options (fit screen).

src/i18n/messages-de.po

@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Spreed Speak Freely\n"
 "Report-Msgid-Bugs-To: simon@struktur.de\n"
-"POT-Creation-Date: 2014-03-20 18:31+0100\n"
-"PO-Revision-Date: 2014-03-20 18:31+0100\n"
+"POT-Creation-Date: 2014-03-25 12:57+0100\n"
+"PO-Revision-Date: 2014-03-25 12:58+0100\n"
 "Last-Translator: Simon Eisenmann <simon@struktur.de>\n"
 "Language-Team: de <LL@li.org>\n"
 "Plural-Forms: nplurals=1; plural=0\n"
@@ -111,6 +111,12 @@ msgstr "Raum verlassen"
 msgid "Current room"
 msgstr "Raum"
 
+msgid "Screen sharing options"
+msgstr "Optionen für Bildschirmfreigabe"
+
+msgid "Fit screen."
+msgstr "Bildschirm einpassen."
+
 msgid "Your picture"
 msgstr "Ihr Bild"
 

src/i18n/messages.pot

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Spreed Speak Freely 1.0\n"
 "Report-Msgid-Bugs-To: simon@struktur.de\n"
-"POT-Creation-Date: 2014-03-20 18:31+0100\n"
+"POT-Creation-Date: 2014-03-25 12:57+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -111,6 +111,12 @@ msgstr ""
 msgid "Current room"
 msgstr ""
 
+msgid "Screen sharing options"
+msgstr ""
+
+msgid "Fit screen."
+msgstr ""
+
 msgid "Your picture"
 msgstr ""
 

src/styles/components/_roombar.scss

@@ -24,8 +24,6 @@
 	top:44px;
 	right:0px;
 	min-width:260px;
-	color:#ccc;
-	text-shadow: 0 0 5px black;
 	z-index:4;
 }
 #roombar .roombar {
@@ -33,56 +31,5 @@
 	left:0px;
 	top:0px;
 	right:0px;
-	padding:3px 8px 0px 30px;
-	vertical-align:middle;
-	background: rgba(0,0,0,0.2);
-	min-height:36px;
-}
-#roombar .roombar.notvisible {
-	background:transparent;
-}
-#roombar .roombarcontent {
-	display:inline-block;
-	margin-left:.5em;
-	margin-bottom:0px;
-	max-width:60%;
-}
-#roombar .btn.btn-default {
-	text-shadow: none;
-}
-.roombarbutton {
-	font-size:20px;
-	vertical-align:middle;
-	position:absolute;
-	left: 3px;
-	top: 1px;
-	padding:6px;
-	display:block;
-	color:#ccc;
-	z-index:15;
-	opacity:0.7;
-}
-.roombarcontent .input-group {
-	max-width:160px;
-}
-.roombarcontent > * {
-	padding-right:.5em;
-}
-.roombar label {
-	padding-top:7px !important;
-}
-.roombar .roomlabellabel {
-	display:none;
-	opacity: 0.7;
-	text-align:left;
-	margin-left:0.5em;
-	padding-top:2px;
-}
-#roombar .roombar.notvisible {
-	.roombarcontent {
-		display: none;
-	}
-	.roomlabellabel {
-		display:block;
-	}
 }
+

src/styles/components/_screenshare.scss

@@ -28,10 +28,30 @@
 	right:0px;
 	top:0px;
 	bottom:0px;
+}
+.screensharepane {
+	position:absolute;
+	left:0px;
+	right:0px;
+	bottom:0px;
+	top:0px;
 	overflow:auto;
+	background:black;
 }
-.screenshare .remoteScreen {
+.screensharepane .remotescreen {
 	position:relative;
 }
-.screenshare video {
+.screensharepane video {
+	width: 100%;
+	max-height: 100%;
+}
+.remotesize .screensharepane video {
+	width: auto;
+	max-height: none;
+}
+
+.screenshare .overlaybar {
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
 }

src/styles/global/_overlaybar.scss

@@ -0,0 +1,87 @@
+.overlaybar {
+	position:absolute;
+	padding:3px 8px 0px 30px;
+	vertical-align:middle;
+	background: rgba(0,0,0,0.2);
+	min-height:36px;
+	color: #ccc;
+	text-shadow: 0 0 5px black;
+	input[type="radio"], input[type="checkbox"] {
+		margin-top:2px;
+	}
+}
+
+.overlaybar:hover {
+	background: rgba(0,0,0,0.5);
+}
+
+.overlaybar.notvisible {
+	background: transparent;
+	pointer-events: none;
+}
+.overlaybar.notvisible:hover {
+	background: transparent;
+}
+
+.overlaybar .btn {
+	text-shadow: none;
+}
+
+.overlaybar .btn-link {
+	text-shadow: 0 0 5px black;
+}
+
+.overlaybar .overlaybarbutton {
+	font-size:20px;
+	vertical-align:middle;
+	position:absolute;
+	left: 3px;
+	top: 1px;
+	padding:6px;
+	display:block;
+	color:#ccc;
+	z-index:15;
+	opacity:0.7;
+	pointer-events: auto;
+}
+
+.overlaybar .overlaybarcontent {
+	display:inline-block;
+	margin-left:.5em;
+	margin-bottom:0px;
+	max-width:60%;
+}
+
+.overlaybarcontent > * {
+	padding-right:.5em;
+}
+
+.overlaybarcontent .input-group {
+	max-width:160px;
+}
+
+.overlaybar label {
+	padding-top:7px !important;
+}
+
+.overlaybar .overlaybaroverlay {
+	display:none;
+	opacity: 0.7;
+	text-align:left;
+	margin-left:0.5em;
+	padding-top:2px;
+}
+
+.overlaybar.notvisible {
+	.overlaybarcontent {
+		display: none;
+	}
+	.overlaybaroverlay {
+		display: block;
+	}
+}
+
+.overlaybar .form-group > * {
+	float: left;
+	padding-top: 0px;
+}

src/styles/main.scss

@@ -29,6 +29,7 @@
 @import "global/angular";
 @import "global/nicescroll";
 @import "global/animations";
+@import "global/overlaybar";
 
 @import "components/rightslide";
 @import "components/bar";

static/js/directives/screenshare.js

@@ -28,12 +28,16 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
 
 			var screenCount = 0;
 			var screens = {};
+			var pane = $element.find(".screensharepane");
 
 			$scope.layout.screenshare = false;
 			$scope.usermedia = null;
 			$scope.connected = false;
 			$scope.screenshare = null;
 
+			$scope.hideOptionsBar = true;
+			$scope.fitScreen = true;
+
 			var handleRequest = function(event, currenttoken, to, data, type, to2, from, peerscreenshare) {
 
 				console.log("Screen share answer message", currenttoken, data, type);
@@ -125,7 +129,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
 				var peerid = subscope.peerid = currentscreenshare.id;
 
 				peerTemplate(subscope, function(clonedElement, scope) {
-					$element.append(clonedElement);
+					pane.append(clonedElement);
 					scope.element = clonedElement;
 					var video = clonedElement.find("video").get(0);
 					$window.attachMediaStream(video, stream);
@@ -254,7 +258,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
 					if (elem) {
 						BigScreen.toggle(elem);
 					} else {
-						BigScreen.toggle($element.get(0));
+						BigScreen.toggle(pane.get(0));
 					}
                 }
 
@@ -272,7 +276,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
 
 		var compile = function(tElement, tAttr) {
 			return function(scope, iElement, iAttrs, controller) {
-				$(iElement).on("dblclick", ".remoteScreen", function(event) {
+				$(iElement).on("dblclick", ".remotescreen", function(event) {
 					scope.toggleFullscreen(event.delegateTarget);
 				});
 			}

static/partials/roombar.html

@@ -1,6 +1,6 @@
-<div class="roombar form-horizontal" ng-class="{notvisible: hideRoomBar}">
-	<a class="roombarbutton" ng-model="hideRoomBar" btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Change room')}}"><i class="fa fa-th-list"></i></a>
-	<form name="roombarform" class="roombarcontent form-group">
+<div class="roombar overlaybar form-horizontal" ng-class="{notvisible: hideRoomBar}">
+	<a class="overlaybarbutton" ng-model="hideRoomBar" btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Change room')}}"><i class="fa fa-th-list"></i></a>
+	<form name="roombarform" class="overlaybarcontent form-group">
 		<label class="pull-left control-label hidden-xs">{{_('Room')}}</label>
 		<div class="pull-left">
 			<div class="input-group">
@@ -11,5 +11,5 @@
 			<social-share/>
 		</div>
 	</form>
-	<label class="control-label roomlabellabel" title="{{_('Current room')}}">{{roomid}}</label>
+	<label class="control-label overlaybaroverlay" title="{{_('Current room')}}">{{roomid}}</label>
 </div>

static/partials/screenshare.html

@@ -1 +1,13 @@
-<div class="screenshare nicescroll"></div>
+<div class="screenshare" ng-class="{remotesize: !fitScreen}">
+	<div class="screensharepane nicescroll"></div>
+	<div class="overlaybar form-horizontal" ng-class="{notvisible: hideOptionsBar}">
+		<a class="overlaybarbutton" ng-model="hideOptionsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Screen sharing options')}}"><i class="fa fa-cogs"></i></a>
+		<form class="overlaybarcontent form-group">
+			<div class="checkbox">
+		        <label class="control-label pull-left">
+		          <input type="checkbox" ng-model="fitScreen"> {{_('Fit screen.')}}
+		        </label>
+	      	</div>
+		</form>
+	</div>
+</div>

static/partials/screensharepeer.html

@@ -1,3 +1,3 @@
-<div class="remoteScreen">
+<div class="remotescreen">
 	<video autoplay="autoplay"></video>
 </div>