You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
15 KiB
HTML
218 lines
15 KiB
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 [ngClass]="allowQualitySelect ? 'col-sm-9' : null" class="col-12">
|
|
<mat-form-field color="accent" 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 *ngIf="allowQualitySelect" class="col-7 col-sm-3">
|
|
<mat-form-field color="accent" 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]['formats'] && cachedAvailableFormats[url]['formats'][(audioOnly) ? 'audio' : 'video'][option.value]" [value]="option.value">
|
|
{{option.label}}
|
|
</mat-option>
|
|
</ng-container>
|
|
</mat-select>
|
|
<div class="spinner-div" *ngIf="url !== '' && cachedAvailableFormats[url] && cachedAvailableFormats[url]['formats_loading']">
|
|
<mat-spinner [diameter]="25"></mat-spinner>
|
|
</div>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="results-div" *ngIf="results_showing">
|
|
<span *ngFor="let result of results; let i = index">
|
|
<mat-card class="result-card mat-elevation-z7" [ngClass]="[(i === 0 && results.length > 1) ? 'first-result-card' : '', ((i === results.length-1) && results.length > 1) ? 'last-result-card' : '', (results.length === 1) ? 'only-result-card' : '']">
|
|
<div class="search-card-title">
|
|
{{result.title}}
|
|
</div>
|
|
<div style="font-size: 12px; margin-bottom: 10px;">
|
|
{{result.uploaded}}
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</form>
|
|
<br/>
|
|
<mat-checkbox [disabled]="current_download" (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
|
|
<mat-checkbox *ngIf="allowMultiDownloadMode" [disabled]="current_download" (change)="multiDownloadModeChanged($event)" [(ngModel)]="multiDownloadMode" style="float: right; margin-top: -12px">Multi-download mode</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="accent">Download</button>
|
|
<button (click)="cancelDownload()" style="float: right" *ngIf="!!current_download" mat-stroked-button color="warn">Cancel</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
</div>
|
|
<div *ngIf="allowAdvancedDownload" class="big demo-basic">
|
|
<form style="margin-left: 20px; margin-right: 20px;">
|
|
<mat-expansion-panel class="big">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Advanced
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div class="container" style="padding-bottom: 20px;">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6">
|
|
<mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
|
|
<mat-form-field color="accent" style="margin-bottom: 30px;" class="advanced-input">
|
|
<input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args">
|
|
<mat-hint>No need to include URL, just everything after.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
|
|
<mat-form-field style="margin-bottom: 42px;" color="accent" class="advanced-input">
|
|
<input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput placeholder="Custom output">
|
|
<mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">This link</a> will be helpful. Path is relative to the config download path.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12 col-sm-6 mt-2">
|
|
<mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use authentication</mat-checkbox>
|
|
<mat-form-field color="accent" class="advanced-input">
|
|
<input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12 col-sm-6 mt-2">
|
|
<mat-form-field color="accent" class="advanced-input">
|
|
<input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Password">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</form>
|
|
</div>
|
|
<div *ngIf="multiDownloadMode && downloads.length > 0 && !current_download" style="margin-top: 15px;" class="big demo-basic">
|
|
<mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
|
|
<div class="container">
|
|
<div *ngFor="let download of downloads; let i = index;" class="row">
|
|
<ng-container *ngIf="current_download !== download">
|
|
<app-download-item style="width: 100%" [download]="download" [queueNumber]="i+1" (cancelDownload)="cancelDownload($event)"></app-download-item>
|
|
<mat-divider style="position: relative" *ngIf="i !== downloads.length - 1"></mat-divider>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</mat-card>
|
|
</div>
|
|
<br/>
|
|
<div class="centered big" id="bar_div" *ngIf="current_download && current_download.downloading; 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 (opened)="accordionOpened('audio')" (closed)="accordionClosed('audio')" (mouseleave)="accordionLeft('audio')" (mouseenter)="accordionEntered('audio')" 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 #audiofilecard (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
|
|
[length]="file.duration" [isAudio]="true"></app-file-card>
|
|
<mat-progress-bar *ngIf="downloading_content['audio'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
<mat-divider></mat-divider>
|
|
<div style="width: 100%; text-align: center; margin-top: 10px;">
|
|
<h6>Playlists</h6>
|
|
</div>
|
|
<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 #audiofilecard (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-progress-bar *ngIf="downloading_content['audio'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
<div class="add-playlist-button"><button (click)="openCreatePlaylistDialog('audio')" mat-fab><mat-icon>add</mat-icon></button></div>
|
|
<div *ngIf="playlists.audio.length === 0">
|
|
No playlists available. Create one from your downloading audio files by clicking the blue plus button.
|
|
</div>
|
|
</div>
|
|
|
|
</mat-expansion-panel>
|
|
<mat-expansion-panel (opened)="accordionOpened('video')" (closed)="accordionClosed('video')" (mouseleave)="accordionLeft('video')" (mouseenter)="accordionEntered('video')" 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 #videofilecard (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
|
|
[length]="file.duration" [isAudio]="false"></app-file-card>
|
|
<mat-progress-bar *ngIf="downloading_content['video'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
<mat-divider></mat-divider>
|
|
|
|
<div style="width: 100%; text-align: center; margin-top: 10px;">
|
|
<h6>Playlists</h6>
|
|
</div>
|
|
<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 #videofilecard (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-progress-bar *ngIf="downloading_content['video'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
|
|
<!-- Add video playlist button -->
|
|
<div class="add-playlist-button"><button (click)="openCreatePlaylistDialog('video')" mat-fab><mat-icon>add</mat-icon></button></div>
|
|
<div *ngIf="playlists.video.length === 0">
|
|
No playlists available. Create one from your downloading video files by clicking the blue plus button.
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</div>
|
|
|
|
<ng-template #nomp3s>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template #nomp4s>
|
|
|
|
</ng-template> |