Fix opacity of own media icons when local video is disabled

When local video was disabled all the media icons had a reduced opacity,
even if the audio or screensharing was enabled (in which case they
should have full opacity). This is fixed now by using two separate CSS
classes, "video-disabled" and "local-video-disabled"; the first is used
only on the video icon and controls its opacity like "audio-disabled"
and "screensharing-disabled" do for audio and screensharing icons, and
the second one is used in all the media icons and controls their colour.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

css/style.scss

@@ -466,15 +466,15 @@ video {
 	 * use dark icons.
 	 * There is no need to override "icon-video" and "icon-screensharing", as
 	 * they will never be shown with dark icons. */
-	&#hideVideo.video-disabled,
-	&#mute.video-disabled,
-	&#screensharing-button.video-disabled {
+	&#hideVideo.local-video-disabled,
+	&#mute.local-video-disabled,
+	&#screensharing-button.local-video-disabled {
 		filter: none;
 	}
-	&#hideVideo.video-disabled {
+	&#hideVideo.local-video-disabled {
 		background-image: var(--icon-video-off-000);
 	}
-	&#mute.video-disabled {
+	&#mute.local-video-disabled {
 		&.icon-audio-off {
 			background-image: var(--icon-audio-off-000);
 		}
@@ -482,7 +482,7 @@ video {
 			background-image: var(--icon-audio-000);
 		}
 	}
-	&#screensharing-button.video-disabled {
+	&#screensharing-button.local-video-disabled {
 		background-image: var(--icon-screen-off-000);
 	}
 

js/app.js

@@ -773,10 +773,10 @@
 			var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo');
 
 			$hideVideoButton.attr('data-original-title', t('spreed', 'Disable video (v)'))
-				.removeClass('video-disabled icon-video-off')
+				.removeClass('local-video-disabled video-disabled icon-video-off')
 				.addClass('icon-video');
-			$audioMuteButton.removeClass('video-disabled');
-			$screensharingButton.removeClass('video-disabled');
+			$audioMuteButton.removeClass('local-video-disabled');
+			$screensharingButton.removeClass('local-video-disabled');
 
 			avatarContainer.hide();
 			localVideo.show();
@@ -799,10 +799,10 @@
 
 			if (!$hideVideoButton.hasClass('no-video-available')) {
 				$hideVideoButton.attr('data-original-title', t('spreed', 'Enable video (v)'))
-					.addClass('video-disabled icon-video-off')
+					.addClass('local-video-disabled video-disabled icon-video-off')
 					.removeClass('icon-video');
-				$audioMuteButton.addClass('video-disabled');
-				$screensharingButton.addClass('video-disabled');
+				$audioMuteButton.addClass('local-video-disabled');
+				$screensharingButton.addClass('local-video-disabled');
 			}
 
 			var avatar = avatarContainer.find('.avatar');