How to configure that the participant's name is always visible during the conference?

The case is that I need that the username, once it has been requested at the beginning of the session, also remains visible at all times.

By default it is only shown by mouseover action.

I have explored the generated CSS and see that the name field has an attribute *hidden". Nothing to do this way.

I have reviewed the following files:
interface_config.js which makes me think that I could add that necessary line to change that hidden attribute or block the mouse over action. I also do not know what the syntax of that line would be.

Curiosity led me to the conference.js file and got me hanging around NAMEs and USERIDs.

I think I need help. Thanks in advance

This is a text translated by Google. Please excuse any possible writing errors.

1 Like

There is no configuration option,
You need to change SmallVideo.js and recompile the user interface
Use the latest npm with LTS support from https://www.npmjs.com/get-npm and then follow the development guide how to compile the userinterface: https://github.com/jitsi/jitsi-meet/blob/master/doc/development.md

diff below of the SmallVideo.js with relevant lines changed to always show the displayname

diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js
index 1126359a0..6830d5d80 100644
--- a/modules/UI/videolayout/SmallVideo.js
+++ b/modules/UI/videolayout/SmallVideo.js
@@ -458,7 +458,7 @@ export default class SmallVideo {
         }
 
         // check hovering and change state to avatar with name
-        return input.isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+        return DISPLAY_AVATAR_WITH_NAME;
     }
 
     /**
@@ -527,8 +527,8 @@ export default class SmallVideo {
             break;
         case DISPLAY_AVATAR:
         default:
-            displayModeString = 'avatar';
-            this.$container.addClass('display-avatar-only');
+            displayModeString = 'avatar-with-name';
+            this.$container.addClass('display-avatar-with-name');
             break;
         }
3 Likes

How good! :grinning:
Many thanks!. I will pass this information on to my team :+1:

1 Like

Hi xranby

I was able to implement the solution you gave apradoc.

But the solution is only for avatars (when there’s no video being displayed).
I need to make participant name always visible inside the video as well, at the bottom of the “square”.

Editing SmallVideo.js I was able to put the participant name inside the video, and always visible, but as a side effect “hovering” is always on, and no luck putting the name in the bottom of the square :frowning_face:

Can you or any other dev help me?

Thanks in advance for this fantastic tool :smiley:

You probably have to work with the CSS to place the text at the position you want. I am no CSS expert but you want to archive something like this:
css/_videolayout_default.scss

.displayname, .videocontainer .displayname, .videocontainer .editdisplayname {
    position:absolute;
    bottom:0;
    right:0;
}
1 Like

Thanks for the reply, gonna work on that :smiley:

Do you know how to always show the text in the video, without triggering the hover effect?

not sure what you mean by the hover effect, but i guess you want to remove the gray tint to the background to make the video clear, this is also a CSS setting

.display-avatar-with-name .avatar-container, .display-avatar-with-name .displayNameContainer, .display-avatar-with-name .videocontainer__hoverOverlay {
visibility: visible; <---- remove this line
}
.videocontainer__hoverOverlay {
background: rgba(0,0,0,.6); <— or remove this line
}

2 Likes

That’s exactly what I want! Working smoothly now :grin:

Thanks a lot!

#alwaysOnTop .displayname,
.videocontainer .displayname,
.videocontainer .editdisplayname {
    background-color: #273746;
    display: inline-block;
    position: absolute;
    left: 5%;
    bottom: 7%;
    color: #d5d8dc;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    line-height: $thumbnailToolbarHeight;
    z-index: $zindex2;
}
(...)
.display-video {
    .displayNameContainer {
        visibility: visible;
    }
}
(...)
.display-avatar-only {
    .displayNameContainer {
        visibility: visible;
    }
}

The final result :sunglasses:

You are a lifesaver xranby :rofl:

(frankly, I dont know why this is not a native option in Jitsi…)

4 Likes

i tried other color & font family options and they dont work for me… any idea why?

background-color: #ffffff;
display: inline-block;
position: absolute;
left: 10%;
bottom: 7%;
color: #ff6a00;
text-align: left;
font-family: Herculanum, fantasy;
font-size: 15px;
font-weight: bold;
line-height: $thumbnailToolbarHeight;
z-index: $zindex2;
}

I was looking for this solution, but im trying to manage everything in jitsi without recompile the code.

Is there any chance Jitsi provide this as an option in interface_config.js or config.js?

the development guide how to compile the userinterface: https://github.com/jitsi/jitsi-meet/blob/master/doc/development.md link is not available. can you share alternate

The development guide has been moved to

read it here:

sourcecode for the dev guide is here:

For others that may find their way here:

This can also easily be done with CSS only, without recompiling from src. See this reply for an alternate approach.

1 Like

where is the location of SmallVideo.js?

Hello, would you please tell me how did you do this?
I put your code, in all.css but the display name appear just for 1 second and disappear. Did you change anything on SmallVideo.js, I coud not find this file. if it’s necessary would you plz tell me about the location of SmallVideo.js
thank you

SmallVideo.js is located in the jitsi-meet sourcecode here: https://github.com/jitsi/jitsi-meet/blob/master/modules/UI/videolayout/SmallVideo.js

as suggested , are the changes made in /usr/share/jitsi-meet/css/all.css files , so that the participants name is always visible during the conference.
thanks in advance

thanks for the changes to be made in css file. i got the changes and working. but the name as shown in yellow colored arrow is getting behind the video. as a result the names are getting chopped. any suggestions please…