openvidu/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html

<div class="dashboard-container">
	<mat-toolbar class="header">
		<span>{{ 'ADMIN.DASHBOARD' | translate }}</span>
		<div class="refresh-btn">
			<button matSuffix mat-icon-button aria-label="Refresh" (click)="logout()">
				<mat-icon>logout</mat-icon>
			</button>
		</div>
	</mat-toolbar>

	<div class="dashboard-body">
		<div id="toolbar-search">
			<div class="search-bar">
				<textarea
					id="search-input"
					maxlength="100"
					rows="4"
					placeholder="{{ 'ADMIN.SEARCH' | translate }}"
					autocomplete="off"
					[(ngModel)]="searchValue"
				></textarea>
				<div>
					<button *ngIf="searchValue" matSuffix mat-icon-button aria-label="Clear" (click)="searchValue = ''">
						<mat-icon>close</mat-icon>
					</button>
					<button *ngIf="!searchValue" matSuffix mat-icon-button aria-label="Search">
						<mat-icon>search</mat-icon>
					</button>
				</div>
			</div>
			<div>
				<button id="sort-menu-btn" color="primary" mat-flat-button [matMenuTriggerFor]="sortMenu">
					{{ sortByLegend }}
					<mat-icon>arrow_drop_down</mat-icon>
				</button>

				<mat-menu #sortMenu="matMenu">
					<button mat-menu-item class="order-select-btn" (click)="sortRecordingsByDate()">{{ 'ADMIN.DATE' | translate }}</button>
					<button mat-menu-item class="order-select-btn" (click)="sortRecordingsByDuration()">
						{{ 'ADMIN.DURATION' | translate }}
					</button>
					<button mat-menu-item class="order-select-btn" (click)="sortRecordingsBySize()">{{ 'ADMIN.SIZE' | translate }}</button>
				</mat-menu>

				<div class="refresh-btn">
					<button matSuffix mat-icon-button aria-label="Refresh" (click)="refreshRecordings()">
						<mat-icon>refresh</mat-icon>
					</button>
				</div>
			</div>
		</div>

		<div *ngIf="recordings.length === 0" class="no-recordings-warn">
			<span>{{ 'ADMIN.NO_RECORDINGS' | translate }}</span>
		</div>

		<div class="recordings-container">
			<div
				*ngFor="
					let recording of recordings
						| searchByStringProperty: { properties: ['sessionId', 'properties.name'], filter: searchValue }
				"
				class="item"
			>
				<mat-card class="recording-card">
					<mat-card-content>
						<div class="video-div-container">
							<img
								*ngIf="
									!!recording.url &&
									recording.properties.hasVideo &&
									(recording.properties.outputMode === 'COMPOSED' ||
										recording.properties.outputMode === 'COMPOSED_QUICK_START')
								"
								[src]="recording.thumbnailB64"
							/>
							<div class="video-btns">
								<button
									*ngIf="
										recording.status !== 'failed' &&
										recording.status !== 'stopped' &&
										recording.properties.outputMode !== 'INDIVIDUAL'
									"
									mat-icon-button
									(click)="play(recording)"
								>
									<mat-icon id="play" aria-label="Play" title="{{ 'PANEL.RECORDING.PLAY' | translate }}"
										>play_arrow</mat-icon
									>
								</button>

								<button
									(click)="download(recording)"
									*ngIf="!!recording.url && recording.status !== 'failed' && recording.status !== 'stopped'"
									mat-icon-button
									aria-label="Download"
									title="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
								>
									<mat-icon id="download">download</mat-icon>
								</button>
								<button mat-icon-button class="delete-recording-btn" (click)="deleteRecording(recording.id)">
									<mat-icon id="delete" aria-label="Delete" title="{{ 'PANEL.RECORDING.DELETE' | translate }}"
										>delete</mat-icon
									>
								</button>
							</div>
						</div>
						<div class="video-info-container">
							<div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.NAME' | translate }}</span
									><span class="video-card-value">{{ recording.properties.name }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.SESSION' | translate }}</span
									><span class="video-card-value">{{ recording.sessionId }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.OUTPUT' | translate }}</span
									><span class="video-card-value">{{ recording.properties.outputMode }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.DATE' | translate }}</span
									><span class="video-card-value">{{ recording.createdAt | date: 'M/d/yy, H:mm' }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.DURATION' | translate }}</span
									><span class="video-card-value">{{ recording.duration | duration }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.SIZE' | translate }}</span
									><span class="video-card-value">{{ recording.size / 1024 / 1024 | number: '1.1-2' }} MBs</span>
								</div>
								<div class="video-div-tag" style="margin-top: 11px">
									<span class="video-card-tag">{{ 'ADMIN.STATUS' | translate }}</span
									><span class="video-card-value status-value" [ngClass]="recording.status">{{ recording.status }}</span>
								</div>
							</div>
						</div>
					</mat-card-content>
				</mat-card>
			</div>
		</div>
	</div>

	<mat-toolbar class="footer" fxLayout fxLayout.xs="row" fxLayoutGap="2px" id="footer" role="heading">
		<span>{{ 'ADMIN.POWERED_BY' | translate }}</span>
		<a href="https://openvidu.io/">OpenVidu</a>
	</mat-toolbar>
</div>