ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: enhance pre-join component layout and add participant name visibility check

master
Carlos Santos 2025-03-12 18:05:37 +01:00
parent e373d23cc9
commit a64cf1d577
2 changed files with 54 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
View File

@ -3,31 +3,33 @@
height: 100%; height: 100%;
background-color: var(--ov-background-color); background-color: var(--ov-background-color);
display: flex; display: flex;
justify-content: center;
align-items: center;
} }
#loading-container { #loading-container {
position: absolute; position: absolute;
top: 40%; top: 40%;
bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
color: var(--ov-text-primary-color); color: var(--ov-text-primary-color);
} }
#prejoin-card { #prejoin-card {
display: grid; display: flex;
align-content: center; flex-direction: column;
align-items: center;
justify-content: center;
margin: auto; margin: auto;
// margin-left: 0px;
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
width: 70vh; width: 90%;
height: 85vh; max-width: 400px;
padding: 20px; max-height: 650px;
height: min-content;
padding: 55px 40px;
background-color: var(--ov-surface-color); background-color: var(--ov-surface-color);
box-shadow: 6px 4px 20px 0px #0003; box-shadow: 6px 4px 20px rgba(0, 0, 0, 0.3);
position: relative; position: relative;
} }
@ -45,41 +47,46 @@
.video-container { .video-container {
margin: auto; margin: auto;
min-height: 45vh; height: 35vh;
max-height: 45vh; width: 100%;
height: 45vh; max-width: 100%;
max-width: 80%; display: flex;
justify-content: center;
align-items: center;
} }
#video-poster { #video-poster {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative; position: relative;
border-radius: var(--ov-surface-radius);
overflow: hidden;
} }
.media-controls-container { .media-controls-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
max-width: 80%; width: 100%;
margin: auto; margin-top: 15px;
height: 25vh; height: auto;
} }
.participant-name-container { .participant-name-container {
display: block !important; display: block !important;
width: 100%; width: 100%;
margin-bottom: 2%; margin: 10px 0;
} }
.video-controls-container, .video-controls-container,
.audio-controls-container { .audio-controls-container {
width: calc(50% - 3px); width: calc(50% - 10px);
margin-top: 10px; margin: 5px 0;
margin-bottom: 10px;
} }
.join-btn-container { .join-btn-container {
width: 100%; width: 100%;
margin-top: 15px;
} }
#join-button { #join-button {
@ -89,67 +96,61 @@
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
width: 100%; width: 100%;
height: 50px; height: 50px;
transition: background-color 0.3s;
} }
// #join-button:hover {
// background-color: lighten(var(--ov-primary-action-color), 10%);
// }
.error { .error {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
color: var(--ov-error-color); color: var(--ov-error-color);
margin-top: 5px;
} }
/* Styles for screens up to 768px wide */
@media (max-width: 768px) { @media (max-width: 768px) {
/* Specific styles for small screens */
.container {
padding: 0px;
}
#prejoin-card { #prejoin-card {
margin: auto; padding: 10px;
height: 100%;
padding: 0px;
} }
.video-container { .video-container {
height: 50vh; height: 40vh;
width: 90%;
max-width: 90%;
} }
.media-controls-container { .media-controls-container {
height: 30vh; flex-direction: column;
width: 90%; align-items: center;
max-width: 90%; height: auto;
}
.video-controls-container,
.audio-controls-container {
width: 100%;
} }
} }
/* Styles for screens with horizontal orientation */ @media (max-width: 800px) and (orientation: landscape) {
@media (max-width: 800) and (orientation: landscape) { .media-controls-container {
/* Specific styles for screens in landscape orientation */ flex-direction: row;
.container { justify-content: space-between;
height: 100%;
padding: 10px 60px;
}
.prejoin-toolbar {
display: none;
} }
.video-controls-container, .video-controls-container,
.audio-controls-container { .audio-controls-container {
width: 48%; width: 48%;
margin-bottom: 2%;
} }
} }
/* Styles for screens with maximum height of 630px */
@media (max-height: 630px) { @media (max-height: 630px) {
.video-container { .video-container {
max-width: 85%; height: 30vh;
height: 37vh;
min-height: 37vh;
} }
.media-controls-container { .media-controls-container {
height: 35vh; height: auto;
max-width: 85%;
} }
} }
} }

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
View File

@ -117,7 +117,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
} }
joinSession() { joinSession() {
if (!this.participantName) { if (this.showParticipantName && !this.participantName) {
this._error = this.translateService.translate('PREJOIN.NICKNAME_REQUIRED'); this._error = this.translateService.translate('PREJOIN.NICKNAME_REQUIRED');
return; return;
} }