YoutubeDL-Material/src/app/main/main.component.html

<br/>
<div class="big demo-basic">
    <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
        <mat-card-title>
            Youtube Downloader
        </mat-card-title>
        <mat-card-content>
            <div style="position: relative;">
                <form class="example-form">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12 col-sm-9">
                                <mat-form-field class="example-full-width">
                                    <input style="padding-right: 25px;" matInput (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" [formControl]="urlForm" required #urlinput>
                                    <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
                                    <button class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
                                </mat-form-field>
                            </div>
                            <div class="col-7 col-sm-3">
                                <mat-form-field style="display: inline-block; width: inherit; min-width: 120px;">
                                    <mat-label>Quality</mat-label>
                                    <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedQuality">
                                      <ng-container *ngFor="let option of qualityOptions[(audioOnly) ? 'audio' : 'video']">
                                        <mat-option *ngIf="option.value === '' || url && cachedAvailableFormats[url] && cachedAvailableFormats[url] && cachedAvailableFormats[url][(audioOnly) ? 'audio' : 'video'][option.value]" [value]="option.value">
                                            {{option.label}}
                                        </mat-option>
                                      </ng-container>
                                    </mat-select>
                                    <div class="spinner-div" *ngIf="formats_loading && !cachedAvailableFormats[url]">
                                        <mat-spinner [diameter]="25"></mat-spinner>
                                    </div>
                                </mat-form-field>
                            </div>
                        </div>
                    </div>
                    <span *ngIf="results_showing">
                        <span *ngFor="let result of results">
                            <mat-card style="height: 120px; border-radius: 0px">
                                <div class="search-card-title">
                                    {{result.title}}
                                </div>
                                <div style="font-size: 12px">
                                    {{result.uploaded}}
                                </div>
                                <br/>
                                <button mat-flat-button color="primary" style="float: left;" (click)="useURL(result.videoUrl)">Use URL</button>
                                <button mat-stroked-button color="primary" (click)="visitURL(result.videoUrl)" style="float: right">View</button>
                            </mat-card>
                        </span>
                    </span>
                </form>
                <br/>
                <mat-checkbox (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
                
            </div>
        </mat-card-content>
        <mat-card-actions>
            <button style="margin-left: 8px; margin-bottom: 8px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-stroked-button
                color="primary">Download</button>
        </mat-card-actions>
    </mat-card>
</div>
<br/>
<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
    <div class="margined">
        <div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
            <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
            <br/>
        </div>
        <div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
            <mat-spinner [diameter]="25"></mat-spinner>
        </div>
        <ng-template #indeterminateprogress>
            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </ng-template>
    </div>
    <br/>
</div>
<ng-template #nofile>

</ng-template>
<div style="margin: 20px" *ngIf="fileManagerEnabled">
    <mat-accordion>
        <mat-expansion-panel class="big">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    Audio
                </mat-panel-title>
                <mat-panel-description>
                    Your audio files are here
                </mat-panel-description>
            </mat-expansion-panel-header>
            <div *ngIf="mp3s.length > 0;else nomp3s">
                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                    <mat-grid-tile *ngFor="let file of mp3s; index as i;">
                        <app-file-card (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
                                [length]="file.duration" [isAudio]="true"></app-file-card>
                    </mat-grid-tile>
                </mat-grid-list>
                <mat-divider *ngIf="playlists.audio.length > 0"></mat-divider>
                <mat-grid-list *ngIf="playlists.audio.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                    <mat-grid-tile *ngFor="let playlist of playlists.audio; let i = index;">
                        <app-file-card (removeFile)="removePlaylistMp3(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
                            [length]="null" [isAudio]="true" [isPlaylist]="true" [count]="playlist.fileNames.length"></app-file-card>
                    </mat-grid-tile>
                </mat-grid-list>
            </div>

        </mat-expansion-panel>
        <mat-expansion-panel class="big">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    Video
                </mat-panel-title>
                <mat-panel-description>
                    Your video files are here
                </mat-panel-description>
            </mat-expansion-panel-header>
            <div *ngIf="mp4s.length > 0;else nomp4s">
                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                    <mat-grid-tile *ngFor="let file of mp4s; index as i;">
                        <app-file-card (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
                            [length]="file.duration" [isAudio]="false"></app-file-card>
                    </mat-grid-tile>
                </mat-grid-list>
                <mat-divider *ngIf="playlists.video.length > 0"></mat-divider>
                <mat-grid-list *ngIf="playlists.video.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                    <mat-grid-tile *ngFor="let playlist of playlists.video; let i = index;">
                        <app-file-card (removeFile)="removePlaylistMp4(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
                            [length]="null" [isAudio]="false" [isPlaylist]="true" [count]="playlist.fileNames.length"></app-file-card>
                    </mat-grid-tile>
                </mat-grid-list>
            </div>
        </mat-expansion-panel>
    </mat-accordion>
</div>

<ng-template #nomp3s>

</ng-template>

<ng-template #nomp4s>

</ng-template>