openvidu/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html

<div class="video-device-selector" [class.compact]="compact">
	<!-- Unified Device Button (Compact Mode) -->
	@if (compact) {
		@if (hasVideoDevices) {
			<div class="unified-device-button">
				<!-- Main toggle button -->
				<button
					mat-flat-button
					class="toggle-section"
					[disabled]="!hasVideoDevices || cameraStatusChanging"
					[class.device-enabled]="isCameraEnabled"
					[class.device-disabled]="!isCameraEnabled"
					(click)="toggleCam($event)"
					[matTooltip]="isCameraEnabled ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)"
					[matTooltipDisabled]="!hasVideoDevices"
					id="camera-button"
				>
					<mat-icon [id]="isCameraEnabled ? 'videocam' : 'videocam_off'">
						{{ isCameraEnabled ? 'videocam' : 'videocam_off' }}
					</mat-icon>
				</button>

				<!-- Dropdown section -->
				@if (isCameraEnabled) {
					<button
						mat-flat-button
						id="video-dropdown"
						class="dropdown-section"
						[matMenuTriggerFor]="cameraMenu"
						[disabled]="cameraStatusChanging"
					>
						<mat-icon>expand_more</mat-icon>
					</button>
				}
			</div>
		} @else {
			<!-- No Camera Available -->
			<div id="no-video-device-message" class="no-device-message">
				<mat-icon class="warning-icon">warning</mat-icon>
				<span>{{ 'PREJOIN.NO_VIDEO_DEVICE' | translate }}</span>
			</div>
		}
	} @else {
		<!-- Normal Mode - Input-style Selector -->
		<div class="normal-device-selector">
			<!-- Device Selector (Input Style) -->
			@if (isCameraEnabled) {
				<div class="device-input-selector">
					<button
						mat-flat-button
						id="video-dropdown"
						class="selector-button"
						[matMenuTriggerFor]="cameraMenu"
						[disabled]="cameraStatusChanging || cameras.length <= 1"
					>
						<mat-icon class="device-icon">videocam</mat-icon>
						<span class="selected-device-name">{{ cameraSelected?.label || 'No camera selected' }}</span>
						<mat-icon class="dropdown-icon" *ngIf="cameras.length > 1">expand_more</mat-icon>
					</button>
				</div>
			} @else {
				@if (hasVideoDevices) {
					<!-- Disabled state message -->
					<div class="device-input-selector disabled">
						<div class="selector-button disabled">
							<mat-icon class="device-icon">videocam_off</mat-icon>
							<span class="selected-device-name">{{ 'PANEL.SETTINGS.DISABLED_VIDEO' | translate }}</span>
						</div>
					</div>
				} @else {
					<!-- No Camera Available -->
					<div id="no-video-device-message" class="no-device-message">
						<mat-icon class="warning-icon">warning</mat-icon>
						<span>{{ 'PREJOIN.NO_VIDEO_DEVICE' | translate }}</span>
					</div>
				}
			}
		</div>
	}

	<!-- Device Selection Menu (Shared) -->
	<mat-menu #cameraMenu="matMenu" class="device-menu">
		@for (camera of cameras; track camera.device) {
			<button
				mat-menu-item
				id="option-{{ camera.label }}"
				(click)="onCameraSelected({ value: camera })"
				[class.selected]="camera.device === cameraSelected?.device"
			>
				<mat-icon *ngIf="camera.device === cameraSelected?.device" class="check-icon">check</mat-icon>
				<span>{{ camera.label }}</span>
			</button>
		}
	</mat-menu>
</div>