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" [(ngModel)]="broadcastUrl"
id="broadcast-url-input" 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) { @if (broadcastingStatus === broadcastingStatusEnum.STARTED) {
<button <button
mat-icon-button mat-icon-button
@ -96,6 +80,20 @@
> >
<mat-icon>stop_circle</mat-icon> <mat-icon>stop_circle</mat-icon>
</button> </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> </div>

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

@ -2,6 +2,7 @@
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.prejoin-container { .prejoin-container {
min-height: 100vh; min-height: 100vh;
@ -278,15 +279,12 @@
} }
} }
} }
}
// Mobile Layout Optimization // Mobile Layout Optimization
.prejoin-container.mobile { &.mobile {
all: unset;
padding: 0; padding: 0;
display: content;
height: 100vh;
min-height: 100vh; min-height: 100vh;
height: 100vh;
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow: hidden;
@ -303,7 +301,6 @@
flex-direction: column; flex-direction: column;
.video-preview-section { .video-preview-section {
// Video takes all remaining space
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
@ -321,7 +318,6 @@
gap: 16px; gap: 16px;
background: var(--ov-surface-color, #ffffff); background: var(--ov-surface-color, #ffffff);
// Ensure content is displayed in column
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -332,7 +328,6 @@
} }
.vb-container { .vb-container {
// Virtual background panel - also adapts to content
flex: 0 0 auto; flex: 0 0 auto;
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
@ -341,16 +336,6 @@
} }
} }
} }
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
} }
// Responsive Design for Desktop/Tablet // Responsive Design for Desktop/Tablet
@ -408,10 +393,10 @@
@media (max-height: 640px) and (min-width: 640px) { @media (max-height: 640px) and (min-width: 640px) {
.prejoin-container:not(.mobile) { .prejoin-container:not(.mobile) {
align-items: flex-start; align-items: flex-start;
padding-top: 60px; // Space for top toolbar padding-top: 60px;
.video-preview-section .video-preview-container { .video-preview-section .video-preview-container {
aspect-ratio: 16/9; // Wider aspect ratio for short screens aspect-ratio: 16/9;
} }
} }
} }
@ -446,4 +431,14 @@
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
} }