From cdae08182d32f672202c20596b7950c6d8cd8ca7 Mon Sep 17 00:00:00 2001
From: Simon Eisenmann <simon@longsleep.org>
Date: Sun, 20 Apr 2014 13:04:29 +0200
Subject: [PATCH] Fixed a couple of mouse hover issues due to CSS transitions.

---
 src/styles/components/_audiovideo.scss | 15 ++++++++++++++-
 src/styles/components/_webrtc.scss     |  5 +----
 static/js/directives/audiovideo.js     |  7 +++----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss
index bcfc04c7..7469774f 100644
--- a/src/styles/components/_audiovideo.scss
+++ b/src/styles/components/_audiovideo.scss
@@ -54,6 +54,11 @@ right:520px;
 	height:100%;
 }
 
+.audioVideo.active {
+	perspective: 1000;
+	-webkit-perspective: 1000;
+}
+
 .audioVideo .overlayactions {
 	position: absolute;
 	left:0px;
@@ -62,11 +67,11 @@ right:520px;
 	height:70px;
 	margin:auto 0;
 	width:40px;
-	opacity:0.5;
 	padding:3px 0;
 	background: rgba(0,0,0,0.2);
 	text-shadow: 0 0 5px black;
 	z-index:5;
+	opacity:0;
 
 	button {
 		width:40px;
@@ -76,6 +81,14 @@ right:520px;
 	}
 }
 
+.audioVideo.active:hover .overlayactions {
+	opacity: 0.3;
+}
+
+.audioVideo.active .overlayactions:hover {
+	opacity: 0.6;
+}
+
 .remoteVideo .peerlabel {
 	-webkit-transition: color 500ms ease-out;
 	-moz-transition: color 500ms ease-out;
diff --git a/src/styles/components/_webrtc.scss b/src/styles/components/_webrtc.scss
index b97279a4..b9446333 100644
--- a/src/styles/components/_webrtc.scss
+++ b/src/styles/components/_webrtc.scss
@@ -20,9 +20,6 @@
  */
 #container {
 position: absolute;
-/*margin: 0px auto;*/
-perspective: 1000;
--webkit-perspective: 1000;
 top:0px;
 left:0px;
 bottom:0px;
@@ -169,7 +166,7 @@ pointer-events:auto;
 .remoteVideo .peeractions i {
 font-size:3vw;
 }
-.peeractions:hover {
+.remoteVideo .peeractions:hover {
 opacity:.5;
 }
 .remoteVideo .peerlabel {
diff --git a/static/js/directives/audiovideo.js b/static/js/directives/audiovideo.js
index b7a71cf5..d6d04a56 100644
--- a/static/js/directives/audiovideo.js
+++ b/static/js/directives/audiovideo.js
@@ -30,7 +30,6 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
             var peers = {};
             var events = $({});
 
-            $scope.card = $element;
             $scope.container = $element.parent().get(0);
             $scope.layoutparent = $element.parent().parent();
 
@@ -136,7 +135,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
                 if (!$scope.isActive) {
                     $scope.isActive = true;
                     $scope.remoteVideos.style.opacity = 1;
-                    $scope.card.addClass("active");
+                    $element.addClass("active");
                     //console.log("active 3");
                     _.delay(function() {
                         $scope.localVideo.style.opacity = 0;
@@ -202,7 +201,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
                 $scope.mini.removeClass("visible");
                 $scope.localVideo.style.opacity = 0;
                 $scope.remoteVideos.style.opacity = 0;
-                $scope.card.removeClass('active');
+                $element.removeClass('active');
                 _.each(peers, function(scope, k) {
                     scope.$destroy();
                     delete peers[k];
@@ -241,7 +240,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 
                 //console.log("compile", arguments)
 
-                $(scope.card).on("doubletap dblclick", _.debounce(scope.toggleFullscreen, 100, true));
+                iElement.on("doubletap dblclick", _.debounce(scope.toggleFullscreen, 100, true));
 
                 var rendererName = null;
                 var getRendererName = function() {