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

<div>
	<mat-list *ngIf="isOpenViduPro">
		<div>
			<mat-list-item>
				<div mat-line>{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
				<mat-slide-toggle
					id="captions-toggle-slide"
					(change)="toggleCaptions()"
					[checked]="captionsEnabled"
					[disableRipple]="true"
				></mat-slide-toggle>
			</mat-list-item>
		</div>

		<div id="lang-section">
			<mat-list-item class="lang-section-item">
				<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
				<button mat-flat-button [matMenuTriggerFor]="menu" [disabled]="!isSttReady" class="lang-button">
					<span>{{ langSelected }}</span>
					<mat-icon>expand_more</mat-icon>
				</button>
				<mat-menu #menu="matMenu">
					<button *ngFor="let langOpt of languagesAvailable" mat-menu-item [id]="langOpt.lang" (click)="onLangSelected(langOpt)">
						<span>{{ langOpt.name }}</span>
					</button>
				</mat-menu>
			</mat-list-item>
			<span class="section-description">{{ 'PANEL.SETTINGS.CAPTIONS_LANG_TEXT' | translate }}</span>
		</div>
	</mat-list>

	<div *ngIf="!isOpenViduPro" class="pro-feature">
		<img
			src="data:image/png;base64,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
		/>
		<p [innerHTML]="'PANEL.PRO_FEATURE' | translate"></p>
	</div>
</div>