Merge pull request #1096 from kkrisstoff/task/video-thumbnail-menu-should-appear-on-hover

show/hide video thumbnail menu on hover

css/_jitsi_popover.scss

@@ -15,13 +15,12 @@
     /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
     white-space: normal;
     margin-top: -10px;
-    margin-bottom: 35px;
 
     &__menu-padding {
-        height: 35px;
+        height: 10px;
         width: 100px;
         position: absolute;
-        bottom: -35px;
+        bottom: -10px;
     }
 
     &__showmore {

css/_videolayout_default.scss

@@ -117,11 +117,23 @@
 /**
  * Hovered video thumbnail.
  */
-#remoteVideos .videocontainer:hover {
-    cursor: hand;
-    border: 2px solid $videoThumbnailHovered;
-    box-shadow: inset 0 0 3px $videoThumbnailHovered,
-              0 0 3px $videoThumbnailHovered;
+#remoteVideos .videocontainer {
+    .remotevideomenu {
+        display: none;
+    }
+
+    /**
+     * Show/hide items for hover event here
+     */
+    &:hover {
+        cursor: hand;
+        border: 2px solid $videoThumbnailHovered;
+        box-shadow: inset 0 0 3px $videoThumbnailHovered,
+            0 0 3px $videoThumbnailHovered;
+        .remotevideomenu {
+            display: inline-block;
+        }
+    }
 }
 
 #localVideoWrapper {

modules/UI/util/JitsiPopover.js

@@ -53,7 +53,8 @@ var JitsiPopover = (function () {
             `<div class="jitsipopover ${this.options.skin}">
                 ${arrow}
                 <div class="jitsipopover__content"></div>
-            <div class="jitsipopover__menu-padding"></div></div>`
+                <div class="jitsipopover__menu-padding"></div>
+            </div>`
         );
     };
 

modules/UI/videolayout/RemoteVideo.js

@@ -516,7 +516,7 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
     }
 
     $(streamElement).click(onClickHandler);
-},
+};
 
 /**
  * Show/hide peer container for the given id.
@@ -629,7 +629,7 @@ RemoteVideo.prototype.removeRemoteVideoMenu = function() {
 RemoteVideo.createContainer = function (spanId) {
     let container = document.createElement('span');
     container.id = spanId;
-    container.className = 'videocontainer';
+    container.className = 'videocontainer videocontainer_remote';
 
     let wrapper = document.createElement('div');
     wrapper.className = 'videocontainer__background';