diff --git a/bigbluebutton-html5/imports/ui/components/fullscreen-button/styles.scss b/bigbluebutton-html5/imports/ui/components/fullscreen-button/styles.scss
index adf07c7f7a0caee29e3784f91204819978bf12d9..76ac48bd309671e8c2bf0f027d415c36f022a3ae 100644
--- a/bigbluebutton-html5/imports/ui/components/fullscreen-button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/fullscreen-button/styles.scss
@@ -7,7 +7,6 @@
background-color: var(--color-transparent);
cursor: pointer;
border: 0;
- border-radius: 5px;
z-index: 2;
[dir="rtl"] & {
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 73dc7525825ebb55e32f604aa5f722705f639b84..44b244ac74ed25335cacc35db5cc3c209474b3eb 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -159,6 +159,51 @@ $after-content-order: 3;
width: 100% !important;
}
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(-360deg);
+ }
+}
+
+.connectingSpinner {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+ color: var(--color-white-with-transparency);
+ font-size: 2.5rem;
+ text-align: center;
+ white-space: nowrap;
+ z-index: 1;
+
+
+ &::after {
+ content: '';
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ margin: 0 -0.25em 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 -0.25em
+ }
+ }
+
+ &::before {
+ content: "\e949";
+ /* ascii code for the ellipsis character */
+ font-family: 'bbb-icons' !important;
+ display: inline-block;
+
+ :global(.animationsEnabled) & {
+ animation: spin 4s infinite linear;
+ }
+ }
+}
span[class^=resizeWrapper] {
div {
@@ -166,4 +211,4 @@ span[class^=resizeWrapper] {
z-index: 1;
bottom: -10px !important;
}
-}
\ No newline at end of file
+}
diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss b/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
index 74e285a439fd4e6b945514c82f577cc1071aac2b..aff8c3d1932b53bfe58544b3a3dc44a37bb7942b 100755
--- a/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
@@ -1,8 +1,8 @@
@import "/imports/ui/stylesheets/variables/_all";
-@import "/imports/ui/components/video-provider/video-list/styles";
+@import "/imports/ui/components/media/styles";
.connecting {
- @extend .connecting;
+ @extend .connectingSpinner;
z-index: -1;
background-color: transparent;
color: var(--color-white);
@@ -17,4 +17,4 @@
position: relative;
width: 100%;
height: 100%;
-}
\ No newline at end of file
+}
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
index cd8821a7d2792b3c36efaa1b13cc754cd5cf571f..f29b64f1438f8f820e90c8116c00fd2448f3f1ac 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
@@ -24,16 +24,14 @@
.videoList {
display: grid;
- border-radius: 5px;
grid-auto-flow: dense;
- grid-gap: 5px;
+ grid-gap: 1px;
- align-items: center;
justify-content: center;
@include mq($medium-up) {
- grid-gap: 10px;
+ grid-gap: 2px;
}
}
@@ -57,7 +55,6 @@
position: relative;
display: flex;
min-width: 100%;
- border-radius: 5px;
&::after {
content: "";
@@ -66,8 +63,7 @@
right: 0;
bottom: 0;
left: 0;
- border: 5px solid var(--color-white-with-transparency);
- border-radius: 5px;
+ border: 5px solid var(--color-primary);
opacity: 0;
pointer-events: none;
@@ -77,7 +73,7 @@
}
&.talking::after {
- opacity: 1;
+ opacity: 0.7;
}
}
@@ -86,7 +82,7 @@
height: 100%;
width: 100%;
object-fit: contain;
- border-radius: 5px;
+ background-color: var(--color-black);
}
.cursorGrab{
@@ -97,16 +93,6 @@
cursor: grabbing;
}
-@keyframes spin {
- from {
- transform: rotate(0deg);
- }
-
- to {
- transform: rotate(-360deg);
- }
-}
-
.videoContainer{
width: 100%;
height: 100%;
@@ -114,41 +100,30 @@
.connecting {
@extend %media-area;
+ display: flex;
+ justify-content: center;
+ align-items: center;
position: absolute;
- color: var(--color-white-with-transparency);
- font-size: 2.5rem;
- text-align: center;
white-space: nowrap;
z-index: 1;
+ vertical-align: middle;
+ margin: 0 -0.25em 0 0;
+ border-radius: 1px;
+ opacity: 1;
-
- &::after {
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- margin: 0 -0.25em 0 0;
-
- [dir="rtl"] & {
- margin: 0 0 0 -0.25em
- }
+ [dir="rtl"] & {
+ margin: 0 0 0 -0.25em
}
+}
- &::before {
- content: "\e949";
- /* ascii code for the ellipsis character */
- font-family: 'bbb-icons' !important;
- display: inline-block;
-
- :global(.animationsEnabled) & {
- animation: spin 4s infinite linear;
- }
- }
+.loadingText {
+ @extend %text-elipsis;
+ color: var(--color-white);
+ font-size: 100%;
}
.media {
@extend %media-area;
- background-color: var(--color-gray);
}
.info {
@@ -157,7 +132,7 @@
bottom: 5px;
left: 5px;
right: 5px;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
height: 1.25rem;
z-index: 2;
@@ -165,7 +140,6 @@
.dropdown,
.dropdownFireFox {
- flex: 1;
display: flex;
outline: none !important;
width: var(--cam-dropdown-width);
@@ -185,12 +159,12 @@
.userName {
@extend %text-elipsis;
position: relative;
- background-color: var(--color-black);
- opacity: .5;
- color: var(--color-white);
- font-size: 80%;
- border-radius: 15px;
+ // Keep the background with 0.5 opacity, but leave the text with 1
+ background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 1px;
+ color: var(--color-off-white);
padding: 0 1rem 0 .5rem !important;
+ font-size: 80%;
}
.noMenu {
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
index 86e7e76b3a106e1240290e7843e5ba9e333c8dc9..a962bb505d6ca1e15fb189841f5586571fc423cd 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
@@ -160,8 +160,10 @@ class VideoListItem extends Component {
})}
>
{
- !videoIsReady
- && <div className={styles.connecting} />
+ !videoIsReady &&
+ <div className={styles.connecting}>
+ <span className={styles.loadingText}>{name}</span>
+ </div>
}
<div
className={styles.videoContainer}
@@ -183,7 +185,8 @@ class VideoListItem extends Component {
/>
{videoIsReady && this.renderFullscreenButton()}
</div>
- <div className={styles.info}>
+ { videoIsReady &&
+ <div className={styles.info}>
{enableVideoMenu && availableActions.length >= 3
? (
<Dropdown className={isFirefox ? styles.dropdownFireFox : styles.dropdown}>
@@ -214,6 +217,7 @@ class VideoListItem extends Component {
{voiceUser.muted && !voiceUser.listenOnly ? <Icon className={styles.muted} iconName="unmute_filled" /> : null}
{voiceUser.listenOnly ? <Icon className={styles.voice} iconName="listen" /> : null}
</div>
+ }
</div>
);
}