Adding a participant to a room can be done only by the owner and
moderators of that room, so the "Add participant" dropdown should be
shown only to those types of participants.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The default position (taking into account the CSS rules from the server)
of the menu in the room and participant lists shows the arrow aligned to
the center of the menu button. Moving it to the left is not needed, and
it causes the arrow to be no longer aligned with the center of the
button. Besides the contacts menu, which is already ignored in the CSS
rule, the other only element that has the "bubble" CSS class is the menu
in the participant list, so the rule can be safely removed.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Before a user could disable her own video, but she had no way to disable
the videos from other participants. This could be needed, for example,
to alleviate the load on low-end systems, as in that case playing the
video from remote participants could be too much for the system. Now a
toggle is provided to manually show or hide the video of each remote
participant if needed.
The toggle is shown only when the remote participant is sending video;
if the remote participant has disabled her own video (or does not have a
camera) the toggle is hidden.
Note that the toggle just shows or hides the HTML video element; it does
not notify the remote participant to mute her video or to fully stop
sending it. It is purely a local change that does not affect the remote
clients. In the future this could be extended to involve the remote
clients too, but for now just hiding the HTML video element notably
reduces the CPU load in most systems (although unfortunately in some
cases it does not).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The "hidden" CSS class is not used in the avatar container of remote
participants (only for the local one), so there is no need to remove it.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the streams are initialized and there is no audio or no video the
"audio/videoNotFound" flag is set. This flag prevents the audio or video
from being enabled later, and it is also used to discard calls to
"disableAudio/Video", as there would be no need to disable them if they
were not found. However, in that last case, it is necessary to
explicitly disable them before the flag is set.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Buttons with icons should have a size of 44x44px for easier interaction.
This matches the height of the participant list item in which the button
appears, and as such also centers the button vertically with the name of
the participant.
With the larger size the default grey background of the button is now
much more visible, but as the button has no border the background looks
strange. Due to this the background is removed, which also gives the
menu button in the participant list a consistent look with the menu
button in the room list.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When a participant is selected in the select2 dropdown the "change"
event is triggered for the "Add participants" input; this sets the value
of the input and also adds the participant to the room. However, the
event is triggered only if the selected item is different than the
current value of the "Add participant" input. Due to this, the value has
to be cleared when it is set to make possible to add the same
participant several times in a row (for example, in different rooms).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The links in the tab header use an "icon-XXX" CSS class to define the
icon that is shown next to it; icons are defined using a
"background-image" CSS property in a ".icon-XXX" CSS selector.
The links in the tab header have their own CSS rules to place them in
the right position. Those CSS rules use a more specific selector than
the one used for the icons, so the CSS rules for the links in the tab
header override the CSS rules for the icons. Therefore, the
"background-repeat" and "background-position" properties must be
specified individually. Otherwise, if the general "background" CSS
property is used the "background-image" from the icon would be overriden
with a null image and thus no icon would be shown.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>