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

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

@@ -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>
 

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

@@ -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 {
+	&.mobile {
-		all: unset;
 		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 {
+// Responsive Design for Desktop/Tablet
-		from {
+@media (max-width: 640px) and (min-height: 640px) {
-			opacity: 0;
-			transform: translateX(20px);
-		}
-		to {
-			opacity: 1;
-			transform: translateX(0);
-		}
-	}
-
-	// 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
+// Short screens - optimize for horizontal space
-	@media (max-height: 640px) and (min-width: 640px) {
+@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
+// Dark theme support
-	@media (prefers-color-scheme: dark) {
+@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
+// Animation keyframes
-	@keyframes fadeIn {
+@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);
 	}
 }