Add new option to jitsi-popover

modules/UI/util/JitsiPopover.js

@@ -8,17 +8,14 @@ var JitsiPopover = (function () {
      */
     function JitsiPopover(element, options)
     {
-        this.options = {
-            skin: "white",
-            content: ""
-        };
-        if(options)
-        {
-            if(options.skin)
-                this.options.skin = options.skin;
+        let { skin, content, hasArrow } = options;
+        this.options = {};
+        this.options.skin = skin || 'white';
+        this.options.content = content || '';
+        this.options.hasArrow = true;
 
-            if(options.content)
-                this.options.content = options.content;
+        if (typeof(hasArrow) !== 'undefined') {
+            this.options.hasArrow = false;
         }
 
         this.elementIsHovered = false;
@@ -27,10 +24,7 @@ var JitsiPopover = (function () {
 
         element.data("jitsi_popover", this);
         this.element = element;
-        this.template = ' <div class="jitsipopover ' + this.options.skin +
-            '"><div class="arrow"></div>' +
-            '<div class="jitsipopover__content"></div>' +
-            '<div class="jitsipopover__menu-padding"></div></div>';
+        this.template = this.getTemplate();
         var self = this;
         this.element.on("mouseenter", function () {
             self.elementIsHovered = true;
@@ -43,6 +37,22 @@ var JitsiPopover = (function () {
         });
     }
 
+    /**
+     * Returns template for popover
+     */
+    JitsiPopover.prototype.getTemplate = function () {
+        let arrow = '';
+        if (this.options.hasArrow) {
+            arrow = '<div class="arrow"></div>';
+        }
+        return  (
+            `<div class="jitsipopover ${this.options.skin}">
+                ${arrow}
+                <div class="jitsipopover__content"></div>
+            <div class="jitsipopover__menu-padding"></div></div>`
+        );
+    };
+
     /**
      * Shows the popover
      */

modules/UI/videolayout/RemoteVideo.js

@@ -22,7 +22,7 @@ function RemoteVideo(user, VideoLayout, emitter) {
     this.emitter = emitter;
     this.videoSpanId = `participant_${this.id}`;
     SmallVideo.call(this, VideoLayout);
-    this.hasRemoteVideoMenu = false;
+    this.hasRemoteVideoMenu = true;
     this.addRemoteVideoContainer();
     this.connectionIndicator = new ConnectionIndicator(this, this.id);
     this.setDisplayName();
@@ -75,14 +75,17 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
  * to display in the popup
  */
 RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) {
-    this.popover = new JitsiPopover(
-        $("#" + this.videoSpanId + " .remotevideomenu"),
-        {   content: popupMenuElement.outerHTML,
-            skin: "black"});
+    let options = {
+        content: popupMenuElement.outerHTML,
+        skin: "black",
+        hasArrow: false
+    };
+    let element = $("#" + this.videoSpanId + " .remotevideomenu");
+    this.popover = new JitsiPopover(element, options);
 
     // override popover show method to make sure we will update the content
     // before showing the popover
-    var origShowFunc = this.popover.show;
+    let origShowFunc = this.popover.show;
     this.popover.show = function () {
         // update content by forcing it, to finish even if popover
         // is not visible