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

feat: update broadcasting button logic and improve pre-join styles

ov-components_modernization
Carlos Santos 2025-12-11 18:31:20 +01:00
parent 53927b05a7
commit 68e9398b06
2 changed files with 350 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
View File

@ -71,22 +71,6 @@
[(ngModel)]="broadcastUrl"
id="broadcast-url-input"
/>
<button
mat-icon-button
@if (broadcastingStatus !== broadcastingStatusEnum.STARTED) {
id="broadcasting-btn"
[disabled]="
!broadcastUrl ||
broadcastingStatus === broadcastingStatusEnum.STARTING ||
broadcastingStatus === broadcastingStatusEnum.STOPPING
"
(click)="startBroadcasting()"
matTooltip="{{ 'PANEL.STREAMING.START' | translate }}"
}
>
<mat-icon>play_circle</mat-icon>
</button>
@if (broadcastingStatus === broadcastingStatusEnum.STARTED) {
<button
mat-icon-button
@ -96,6 +80,20 @@
>
<mat-icon>stop_circle</mat-icon>
</button>
} @else {
<button
mat-icon-button
id="broadcasting-btn"
[disabled]="
!broadcastUrl ||
broadcastingStatus === broadcastingStatusEnum.STARTING ||
broadcastingStatus === broadcastingStatusEnum.STOPPING
"
(click)="startBroadcasting()"
matTooltip="{{ 'PANEL.STREAMING.START' | translate }}"
>
<mat-icon>play_circle</mat-icon>
</button>
}
</div>

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

@ -2,8 +2,9 @@
display: block;
width: 100%;
height: 100%;
}
.prejoin-container {
.prejoin-container {
min-height: 100vh;
background: var(--ov-background-color);
display: flex;
@ -278,15 +279,12 @@
}
}
}
}
// Mobile Layout Optimization
.prejoin-container.mobile {
all: unset;
&.mobile {
padding: 0;
display: content;
height: 100vh;
min-height: 100vh;
height: 100vh;
max-height: 100vh;
overflow: hidden;
@ -303,7 +301,6 @@
flex-direction: column;
.video-preview-section {
// Video takes all remaining space
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
@ -321,7 +318,6 @@
gap: 16px;
background: var(--ov-surface-color, #ffffff);
// Ensure content is displayed in column
display: flex;
flex-direction: column;
@ -332,7 +328,6 @@
}
.vb-container {
// Virtual background panel - also adapts to content
flex: 0 0 auto;
max-height: 60vh;
overflow-y: auto;
@ -341,20 +336,10 @@
}
}
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
// Responsive Design for Desktop/Tablet
@media (max-width: 640px) and (min-height: 640px) {
// Responsive Design for Desktop/Tablet
@media (max-width: 640px) and (min-height: 640px) {
.prejoin-container:not(.mobile) {
padding: 16px;
@ -375,9 +360,9 @@
padding: 16px 20px;
}
}
}
}
@media (max-width: 480px) and (min-height: 640px) {
@media (max-width: 480px) and (min-height: 640px) {
.prejoin-container:not(.mobile) {
padding: 12px;
@ -402,22 +387,22 @@
padding: 12px 16px;
}
}
}
}
// Short screens - optimize for horizontal space
@media (max-height: 640px) and (min-width: 640px) {
// Short screens - optimize for horizontal space
@media (max-height: 640px) and (min-width: 640px) {
.prejoin-container:not(.mobile) {
align-items: flex-start;
padding-top: 60px; // Space for top toolbar
padding-top: 60px;
.video-preview-section .video-preview-container {
aspect-ratio: 16/9; // Wider aspect ratio for short screens
}
aspect-ratio: 16/9;
}
}
}
// Dark theme support
@media (prefers-color-scheme: dark) {
// Dark theme support
@media (prefers-color-scheme: dark) {
.prejoin-container {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}
@ -433,10 +418,10 @@
background-color: #3a3a3a;
border-color: #555;
}
}
}
// Animation keyframes
@keyframes fadeIn {
// Animation keyframes
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
@ -445,5 +430,15 @@
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}