Add support for sharing fullscreen on Firefox.

Signed-off-by: Joachim Bauch <bauch@struktur.de>

4 files changed, 105 insertions, 56 deletions

diff --git a/js/app.js b/js/app.js
index 9d64d60a8..23f45703f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -256,67 +256,103 @@
 					return;
 				}
 
+				var splitShare = false;
+				if (window.navigator.userAgent.match('Firefox')) {
+					var ffver = parseInt(window.navigator.userAgent.match(/Firefox\/(.*)/)[1], 10);
+					splitShare = (ffver >= 52);
+				}
+
+				// The parent CSS of the menu list items is using "display:block !important",
+				// so we need to also hide with "!important".
 				if (webrtc.getLocalScreen()) {
+					$('#show-window-entry').attr('style','display:none !important');
+					$('#stop-screen-entry').show();
 					$('#screensharing-menu').toggleClass('open');
 				} else {
-					var screensharingButton = $(this);
-					screensharingButton.prop('disabled', true);
-					webrtc.shareScreen(function(err) {
-						screensharingButton.prop('disabled', false);
-						if (!err) {
-							$('#screensharing-button').attr('data-original-title', t('spreed', 'Screensharing options'))
-								.removeClass('screensharing-disabled icon-screen-off')
-								.addClass('icon-screen');
-							return;
-						}
+					if (splitShare) {
+						$('#show-window-entry').show();
+						$('#stop-screen-entry').attr('style','display:none !important');
+						$('#screensharing-menu').toggleClass('open');
+						return;
+					}
 
-						switch (err.name) {
-							case "HTTPS_REQUIRED":
-								OC.Notification.showTemporary(t('spreed', 'Screensharing requires the page to be loaded through HTTPS.'));
-								break;
-							case "PERMISSION_DENIED":
-							case "NotAllowedError":
-							case "CEF_GETSCREENMEDIA_CANCELED":  // Experimental, may go away in the future.
-								break;
-							case "FF52_REQUIRED":
-								OC.Notification.showTemporary(t('spreed', 'Sharing your screen only works with Firefox version 52 or newer.'));
-								break;
-							case "EXTENSION_UNAVAILABLE":
-								var  extensionURL = null;
-								if (!!window.chrome && !!window.chrome.webstore) {// Chrome
-									extensionURL = 'https://chrome.google.com/webstore/detail/screensharing-for-nextclo/kepnpjhambipllfmgmbapncekcmabkol';
-								}
-
-								if (extensionURL) {
-									var text = t('spreed', 'Screensharing extension is required to share your screen.');
-									var element = $('<a>').attr('href', extensionURL).attr('target','_blank').text(text);
-
-									OC.Notification.showTemporary(element, {isHTML: true});
-								} else {
-									OC.Notification.showTemporary(t('spreed', 'Please use a different browser like Firefox or Chrome to share your screen.'));
-								}
-								break;
-							default:
-								OC.Notification.showTemporary(t('spreed', 'An error occurred while starting screensharing.'));
-								console.log("Could not start screensharing", err);
-								break;
-						}
-					});
+					this.startShareScreen();
 				}
-			});
+			}.bind(this));
 
 			$("#show-screen-button").on('click', function() {
-				var currentUser = OCA.SpreedMe.webrtc.connection.getSessionid();
-				OCA.SpreedMe.sharedScreens.switchScreenToId(currentUser);
+				if (webrtc.getLocalScreen()) {
+					var currentUser = OCA.SpreedMe.webrtc.connection.getSessionid();
+					OCA.SpreedMe.sharedScreens.switchScreenToId(currentUser);
+				} else {
+					this.startShareScreen('screen');
+				}
 
 				$('#screensharing-menu').toggleClass('open', false);
-			});
+			}.bind(this));
+
+			$("#show-window-button").on('click', function() {
+				if (webrtc.getLocalScreen()) {
+					var currentUser = OCA.SpreedMe.webrtc.connection.getSessionid();
+					OCA.SpreedMe.sharedScreens.switchScreenToId(currentUser);
+				} else {
+					this.startShareScreen('window');
+				}
+
+				$('#screensharing-menu').toggleClass('open', false);
+			}.bind(this));
 
 			$("#stop-screen-button").on('click', function() {
 				OCA.SpreedMe.webrtc.stopScreenShare();
 			});
 		},
 
+		startShareScreen: function(mode) {
+			var screensharingButton = $('#screensharing-button');
+			screensharingButton.prop('disabled', true);
+			webrtc.shareScreen(mode, function(err) {
+				screensharingButton.prop('disabled', false);
+				if (!err) {
+					$('#screensharing-button').attr('data-original-title', t('spreed', 'Screensharing options'))
+						.removeClass('screensharing-disabled icon-screen-off')
+						.addClass('icon-screen');
+					return;
+				}
+
+				switch (err.name) {
+					case "HTTPS_REQUIRED":
+						OC.Notification.showTemporary(t('spreed', 'Screensharing requires the page to be loaded through HTTPS.'));
+						break;
+					case "PERMISSION_DENIED":
+					case "NotAllowedError":
+					case "CEF_GETSCREENMEDIA_CANCELED":  // Experimental, may go away in the future.
+						break;
+					case "FF52_REQUIRED":
+						OC.Notification.showTemporary(t('spreed', 'Sharing your screen only works with Firefox version 52 or newer.'));
+						break;
+					case "EXTENSION_UNAVAILABLE":
+						var  extensionURL = null;
+						if (!!window.chrome && !!window.chrome.webstore) {// Chrome
+							extensionURL = 'https://chrome.google.com/webstore/detail/screensharing-for-nextclo/kepnpjhambipllfmgmbapncekcmabkol';
+						}
+
+						if (extensionURL) {
+							var text = t('spreed', 'Screensharing extension is required to share your screen.');
+							var element = $('<a>').attr('href', extensionURL).attr('target','_blank').text(text);
+
+							OC.Notification.showTemporary(element, {isHTML: true});
+						} else {
+							OC.Notification.showTemporary(t('spreed', 'Please use a different browser like Firefox or Chrome to share your screen.'));
+						}
+						break;
+					default:
+						OC.Notification.showTemporary(t('spreed', 'An error occurred while starting screensharing.'));
+						console.log("Could not start screensharing", err);
+						break;
+				}
+			});
+		},
+
 		_onKeyUp: function(event) {
 			// Define which objects to check for the event properties.
 			var key = event.which;
diff --git a/js/simplewebrtc.js b/js/simplewebrtc.js
index 182e43650..150239640 100644
--- a/js/simplewebrtc.js
+++ b/js/simplewebrtc.js
@@ -3874,8 +3874,8 @@
 // cache for constraints and callback
 	var cache = {};
 
-	module.exports = function (constraints, cb) {
-		var hasConstraints = arguments.length === 2;
+	module.exports = function (mode, constraints, cb) {
+		var hasConstraints = arguments.length === 3;
 		var callback = hasConstraints ? cb : constraints;
 		var error;
 
@@ -3970,10 +3970,11 @@
 		} else if (window.navigator.userAgent.match('Firefox')) {
 			var ffver = parseInt(window.navigator.userAgent.match(/Firefox\/(.*)/)[1], 10);
 			if (ffver >= 52) {
+				mode = mode || 'window';
 				constraints = (hasConstraints && constraints) || {
 					video: {
-						mozMediaSource: 'window',
-						mediaSource: 'window'
+						mozMediaSource: mode,
+						mediaSource: mode
 					}
 				};
 				getUserMedia(constraints, function (err, stream) {
@@ -7607,9 +7608,9 @@
 		});
 	};
 
-	LocalMedia.prototype.startScreenShare = function (cb) {
+	LocalMedia.prototype.startScreenShare = function (mode, cb) {
 		var self = this;
-		getScreenMedia(function (err, stream) {
+		getScreenMedia(mode, function (err, stream) {
 			if (!err) {
 				self.localScreens.push(stream);
 
@@ -18295,8 +18296,8 @@
 		return this.getEl(this.config.remoteVideosEl);
 	};
 
-	SimpleWebRTC.prototype.shareScreen = function (cb) {
-		this.webrtc.startScreenShare(cb);
+	SimpleWebRTC.prototype.shareScreen = function (mode, cb) {
+		this.webrtc.startScreenShare(mode, cb);
 	};
 
 	SimpleWebRTC.prototype.getLocalScreen = function () {
diff --git a/templates/index-public.php b/templates/index-public.php
index abdcb93a1..5623a43d7 100644
--- a/templates/index-public.php
+++ b/templates/index-public.php
@@ -78,7 +78,13 @@ script(
 									<span><?php p($l->t('Show your screen'));?></span>
 								</button>
 							</li>
-							<li>
+							<li id="show-window-entry">
+								<button id="show-window-button">
+									<span class="icon-screen"></span>
+									<span><?php p($l->t('Show a single window'));?></span>
+								</button>
+							</li>
+							<li id="stop-screen-entry">
 								<button id="stop-screen-button">
 									<span class="icon-screen-off"></span>
 									<span><?php p($l->t('Stop screensharing'));?></span>
diff --git a/templates/index.php b/templates/index.php
index d351c92fd..9d4bccd5c 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -85,7 +85,13 @@ script(
 								<span><?php p($l->t('Show your screen'));?></span>
 							</button>
 						</li>
-						<li>
+						<li id="show-window-entry">
+							<button id="show-window-button">
+								<span class="icon-screen"></span>
+								<span><?php p($l->t('Show a single window'));?></span>
+							</button>
+						</li>
+						<li id="stop-screen-entry">
 							<button id="stop-screen-button">
 								<span class="icon-screen-off"></span>
 								<span><?php p($l->t('Stop screensharing'));?></span>