YoutubeDL-Material/src/app/dialogs/video-info-dialog/video-info-dialog.component.html

<h4 mat-dialog-title>
    {{file.title}}
    <div class="favorite-button">
        <button [disabled]="!initialized || retrieving_file || !write_access" mat-icon-button (click)="editing = !editing"><mat-icon>edit</mat-icon></button>
        <button [disabled]="!initialized || retrieving_file || !write_access" (click)="toggleFavorite()" mat-icon-button ><mat-icon>{{file.favorite ? 'favorite_filled' : 'favorite_outline'}}</mat-icon></button>
    </div>
</h4>

<mat-dialog-content>
    <mat-form-field class="info-field">
        <mat-label i18n="Name">Name</mat-label>
        <input [(ngModel)]="new_file.title" matInput [disabled]="!editing">
    </mat-form-field>
    <mat-form-field class="info-field">
        <mat-label i18n="URL">URL</mat-label>
        <input [(ngModel)]="new_file.url" matInput [disabled]="!editing">
        <button mat-icon-button matSuffix (click)="window.open(new_file.url, '_blank')">
            <mat-icon>link</mat-icon>
        </button>
    </mat-form-field>
    <mat-form-field class="info-field">
        <mat-label i18n="Uploader">Uploader</mat-label>
        <input [(ngModel)]="new_file.uploader" matInput [disabled]="!editing">
    </mat-form-field>
    <mat-form-field class="info-field">
        <mat-label i18n="Upload date">Upload date</mat-label>
        <input [value]="upload_date" matInput [matDatepicker]="picker" (dateChange)="uploadDateChanged($event)" [disabled]="!editing">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <mat-form-field class="info-field">
        <mat-label i18n="Thumbnail path">Thumbnail path</mat-label>
        <input [(ngModel)]="new_file.thumbnailPath" matInput [disabled]="!editing">
    </mat-form-field>
    <mat-form-field class="info-field">
        <mat-label i18n="Thumbnail URL">Thumbnail URL</mat-label>
        <input [(ngModel)]="new_file.thumbnailURL" matInput [disabled]="!editing || new_file.thumbnailPath">
    </mat-form-field>
    <mat-form-field *ngIf="initialized && postsService.categories" class="info-field">
        <mat-select placeholder="Category" i18n-placeholder="Category" [value]="category" (selectionChange)="categoryChanged($event)" [compareWith]="categoryComparisonFunction" [disabled]="!editing">
            <mat-option [value]="{}">
                N/A
            </mat-option>
            <mat-option *ngFor="let available_category of postsService.categories | keyvalue" [value]="available_category.value">
                {{available_category.value.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field class="info-field">
        <mat-label i18n="View count">View count</mat-label>
        <input type="number" [(ngModel)]="new_file.view_count" matInput [disabled]="!editing">
    </mat-form-field>
    <mat-form-field class="info-field">
        <mat-label i18n="Local view count">Local view count</mat-label>
        <input type="number" [(ngModel)]="new_file.local_view_count" matInput [disabled]="!editing">
    </mat-form-field>

    <mat-divider style="margin-bottom: 16px;"></mat-divider>

    <div *ngIf="!new_file.isAudio" class="info-item">
        <div class="info-item-label"><strong><ng-container i18n="Video resolution property">Resolution:</ng-container>&nbsp;</strong></div>
        <div class="info-item-value">{{new_file.height ? new_file.height + 'p' : 'N/A'}}</div>
    </div>
    <div class="info-item">
        <div class="info-item-label"><strong><ng-container i18n="Video audio bitrate property">Audio bitrate:</ng-container>&nbsp;</strong></div>
        <div class="info-item-value">{{new_file.abr ? new_file.abr + ' Kbps' : 'N/A'}}</div>
    </div>
    <div class="info-item">
        <div class="info-item-label"><strong><ng-container i18n="Video file size property">File size:</ng-container>&nbsp;</strong></div>
        <div class="info-item-value">{{new_file.size ? filesize(new_file.size) : 'N/A'}}</div>
    </div>
    <div class="info-item">
        <div class="info-item-label"><strong><ng-container i18n="Video path property">Path:</ng-container>&nbsp;</strong></div>
        <div class="info-item-value">{{new_file.path ? new_file.path : 'N/A'}}</div>
    </div>

</mat-dialog-content>

<mat-dialog-actions>
    <button mat-button mat-dialog-close><ng-container i18n="Close video info button">Close</ng-container></button>
    <button mat-button [disabled]="!metadataChanged()" (click)="saveChanges()"><ng-container i18n="Save video info button">Save</ng-container></button>
</mat-dialog-actions>