Add proper icons to screensharing toggle button.

Signed-off-by: Ivan Sein <ivan@nextcloud.com>

css/style.css

@@ -341,8 +341,10 @@ video {
 	height: 44px;
 	background-size: 25px;
 }
+
 .nameIndicator button.audio-disabled,
-.nameIndicator button.video-disabled {
+.nameIndicator button.video-disabled,
+.nameIndicator button.screensharing-disabled {
 	opacity: .7;
 }
 

js/app.js

@@ -212,6 +212,9 @@
 
 			var screensharingStopped = function() {
 				console.log("Screensharing now stopped");
+				$('#toogleScreensharing').data('title', 'Enable screensharing')
+					.addClass('screensharing-disabled icon-screen-off-white')
+					.removeClass('icon-screen-white');
 			};
 
 			OCA.SpreedMe.webrtc.on('localScreenStopped', function() {
@@ -232,6 +235,9 @@
 					webrtc.shareScreen(function(err) {
 						if (!err) {
 							OC.Notification.showTemporary(t('spreed', 'Screensharing is about to start…'));
+							$('#toogleScreensharing').data('title', 'Stop screensharing')
+								.removeClass('screensharing-disabled icon-screen-off-white')
+								.addClass('icon-screen-white');
 							return;
 						}
 

templates/index-public.php

@@ -63,7 +63,7 @@ script(
 				<div class="nameIndicator">
 					<button id="mute" class="icon-audio-white" data-title="<?php p($l->t('Mute audio')) ?>"></button>
 					<button id="hideVideo" class="icon-video-white" data-title="<?php p($l->t('Pause video')) ?>"></button>
-					<button id="toogleScreensharing" class="icon-view-play" data-title="<?php p($l->t('Toggle screensharing')) ?>"></button>
+					<button id="toogleScreensharing" class="icon-screen-off-white screensharing-disabled" data-title="<?php p($l->t('Toggle screensharing')) ?>"></button>
 				</div>
 			</div>
 		</div>

templates/index.php

@@ -49,7 +49,7 @@ script(
 				<div class="nameIndicator">
 					<button id="mute" class="icon-audio-white" data-title="<?php p($l->t('Mute audio')) ?>"></button>
 					<button id="hideVideo" class="icon-video-white" data-title="<?php p($l->t('Pause video')) ?>"></button>
-					<button id="toogleScreensharing" class="icon-view-play" data-title="<?php p($l->t('Toggle screensharing')) ?>"></button>
+					<button id="toogleScreensharing" class="icon-screen-off-white screensharing-disabled" data-title="<?php p($l->t('Toggle screensharing')) ?>"></button>
 				</div>
 			</div>
 		</div>