Fix UI issues with modals. Resize webcam video

bigbluebutton-html5/app/client/lib/bbb_verto_resources_use/verto_extension.js

@@ -169,10 +169,11 @@ this.docall_verto = function(extension, conferenceUsername, conferenceIdNumber,
 // displays a local feed of the user's webcam
 this.doWebcamPreview = function(onSuccess, onFailure, videoTag) {
 	var selectedVideoConstraints = getChosenWebcamResolution(); // this is the video profile the user chose
-	my_real_size(selectedVideoConstraints);
 	selectedVideoConstraints = getWebcamConstraintsFromResolution(selectedVideoConstraints); // convert to a valid constraints object
 	console.log("screen constraints", selectedVideoConstraints)
 	previewLocalMedia(webcamStream, selectedVideoConstraints, videoTag, onSuccess, onFailure);
+	window.videoTag = videoTag;
+	my_real_size()
 }
 
 // return the webcam resolution that the user has selected

bigbluebutton-html5/app/client/stylesheets/verto.less

@@ -6,34 +6,12 @@
 	padding: 5px;
 }
 
-.screenshareShow {
+.screenshareShow, .screenshareStart, .webcamStart, .webcamShow {
 	color: lime;
 	font-size: 30px;
 }
 
-.screenshareHide {
-	color: red;
-	display: none;
-	font-size: 30px;
-}
-
-.screenshareStart {
-	color: lime;
-	font-size: 30px;
-}
-
-.screenshareStop {
-	color: red;
-	display: none;
-	font-size: 30px;
-}
-
-.webcamStart {
-	color: lime;
-	font-size: 30px;
-}
-
-.webcamStop {
+.screenshareHide, .screenshareStop, .webcamStop, .webcamHide {
 	color: red;
 	display: none;
 	font-size: 30px;

bigbluebutton-html5/app/client/verto.coffee

@@ -2,25 +2,28 @@ Template.vertoDeskshareMenu.events
 	"click .vertoButton": (event) ->
 		$("#settingsModal").foundation('reveal', 'close')
 
-	"click #getAdjustedResolutions": (event) ->
-		getAdjustedResolutions (result) ->
-			for i of result
-				$("#adjustedResolutions").append(i + ": " + result[i].width + "x" + result[i].height + "<br/>")
-
 	"click .screenshareShow": (event) ->
 		$("#deskshareModal").foundation('reveal', 'open');
 		$("#screenshareShow").hide()
 		$("#screenshareHide").show()
 
 	"click .screenshareHide": (event) ->
+		if(!!window["deskshareStream"])
+			$("#webcam").src = null;
+			window["deskshareStream"].stop();
+		else
+			screenStart(false, (->))
+
 		$("#screenshareShow").show()
 		$("#screenshareHide").hide()
+		$("#screenshareStart").show()
+		$("#screenshareStop").hide()
 
 Template.deskshareModal.events
 	"click .screenshareStart": (event) ->
 		$("#deskshareModal").foundation('reveal', 'close')
 		$("#screenshareStart").hide()
-		$("#screenshareStaop").show()
+		$("#screenshareStop").show()
 		screenStart(true, (->), "webcam")
 
 	"click .screenshareStop": (event) ->
@@ -32,7 +35,24 @@ Template.deskshareModal.events
 	"click #desksharePreview": (event) ->
 		doDesksharePreview((->), (->), "webcam");
 
-Template.vertoWebcam.events
+Template.vertoWebcamMenu.events
+	"click .vertoButton": (event) ->
+		$("#settingsModal").foundation('reveal', 'close')
+
+	"click .webcamShow": (event) ->
+		$("#webcamModal").foundation('reveal', 'open');
+		$("#webcamShow").hide()
+		$("#webcamHide").show()
+
+	"click .webcamHide": (event) ->
+		if(!!window["webcamStream"])
+			$("#webcam").src = null;
+			window["webcamStream"].stop();
+
+		$("#webcamShow").show()
+		$("#webcamHide").hide()
+
+Template.webcamModal.events
 	"click .vertoButton": (event) ->
 		$("#settingsModal").foundation('reveal', 'close')
 
@@ -45,8 +65,13 @@ Template.vertoWebcam.events
 		$("#webcamStart").show()
 		$("#webcamStop").hide()
 
-	# "click #webcamPreview": (event) ->
-	# 	doWebcamPreview((->), (->), "webcam");
+	"click #webcamPreview": (event) ->
+		doWebcamPreview((->), (->), "webcam");
+
+	"click #getAdjustedResolutions": (event) ->
+		getAdjustedResolutions (result) ->
+			for i of result
+				$("#adjustedResolutions").append(i + ": " + result[i].width + "x" + result[i].height + "<br/>")
 
 @toggleWhiteboardVideo = (display) ->
 	if display is "whiteboard"

bigbluebutton-html5/app/client/verto.html

@@ -3,7 +3,7 @@
 	{{> makeButton id="screenshareHide" btn_class="screenshareHide vertoButton settingsButton" i_class="fi-monitor" rel="tooltip" data_placement="bottom" title="Stop sharing your screen"}}
 </template>
 
-<template name="vertoWebcam">
-	{{> makeButton id="webcamStart" btn_class="webcamStart vertoButton settingsButton" i_class="fi-camera" rel="tooltip" data_placement="bottom" title="Share your webcam"}}
-	{{> makeButton id="webcamStop" btn_class="webcamStop vertoButton settingsButton" i_class="fi-camera" rel="tooltip" data_placement="bottom" title="Stop sharing your webcam"}}
+<template name="vertoWebcamMenu">
+	{{> makeButton id="webcamShow" btn_class="webcamShow vertoButton settingsButton" i_class="fi-camera" rel="tooltip" data_placement="bottom" title="Share your webcam"}}
+	{{> makeButton id="webcamHide" btn_class="webcamHide vertoButton settingsButton" i_class="fi-camera" rel="tooltip" data_placement="bottom" title="Stop sharing your webcam"}}
 </template>

bigbluebutton-html5/app/client/views/modals/settings.html

@@ -44,7 +44,7 @@
     {{> optionsFontSize}}
     <br/>
     {{> vertoDeskshareMenu}}
-    {{> vertoWebcam}}
+    {{> vertoWebcamMenu}}
     <br/>
     {{{getBBBSettingsInfo}}}
   </div>