mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-03-10 14:50:58 +03:00
2b2a033b7e
Created arg modifier dialog to assist in editing youtube-dl args - This arg dialog contains all the available args and their description - Includes a convenient search bar and categorized list of args to help you find the one you're looking for, or just explore what's available. Arg modifier is available for both global args (in settings) and local args (in the advanced mode)
284 lines
19 KiB
HTML
284 lines
19 KiB
HTML
<br/>
|
|
<div class="big demo-basic">
|
|
<mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
|
|
<mat-card-title>
|
|
<ng-container i18n="Youtube downloader home page label">Youtube Downloader</ng-container>
|
|
</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">
|
|
<ng-container i18n="Enter valid URL error">Please enter a valid URL!</ng-container>
|
|
</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>
|
|
<ng-container i18n="Quality select label">
|
|
Quality
|
|
</ng-container>
|
|
</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)">
|
|
<ng-container i18n="YT search Use URL button for searched video">Use URL</ng-container>
|
|
</button>
|
|
<button mat-stroked-button color="primary" (click)="visitURL(result.videoUrl)" style="float: right">
|
|
<ng-container i18n="YT search View button for searched video">
|
|
View
|
|
</ng-container>
|
|
</button>
|
|
</mat-card>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
<br/>
|
|
<mat-checkbox [disabled]="current_download" (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">
|
|
<ng-container i18n="Only Audio checkbox">
|
|
Only Audio
|
|
</ng-container>
|
|
</mat-checkbox>
|
|
<mat-checkbox *ngIf="allowMultiDownloadMode" [disabled]="current_download" (change)="multiDownloadModeChanged($event)" [(ngModel)]="multiDownloadMode" style="float: right; margin-top: -12px">
|
|
<ng-container i18n="Multi-download Mode checkbox">
|
|
Multi-download Mode
|
|
</ng-container>
|
|
</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">
|
|
<ng-container i18n="Main download button">
|
|
Download
|
|
</ng-container>
|
|
</button>
|
|
<button (click)="cancelDownload()" style="float: right" *ngIf="!!current_download" mat-stroked-button color="warn">
|
|
<ng-container i18n="Cancel download button">
|
|
Cancel
|
|
</ng-container>
|
|
</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>
|
|
<ng-container i18n="Advanced download mode panel">
|
|
Advanced
|
|
</ng-container>
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<p *ngIf="this.simulatedOutput">
|
|
<ng-container i18n="Simulated command label">
|
|
Simulated command:
|
|
</ng-container>
|
|
<i>{{this.simulatedOutput}}</i></p>
|
|
<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="z-index: 999" [ngModelOptions]="{standalone: true}">
|
|
<ng-container i18n="Use custom args checkbox">
|
|
Use custom args
|
|
</ng-container>
|
|
</mat-checkbox>
|
|
<button class="edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
|
|
<mat-form-field color="accent" style="margin-bottom: 42px;" class="advanced-input">
|
|
<input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args" i18n-placeholder="Custom args placeholder">
|
|
<mat-hint>
|
|
<ng-container i18n="Custom Args input hint">
|
|
No need to include URL, just everything after.
|
|
</ng-container>
|
|
</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="z-index: 999" [ngModelOptions]="{standalone: true}">
|
|
<ng-container i18n="Use custom output checkbox">
|
|
Use custom output
|
|
</ng-container>
|
|
</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" i18n-placeholder="Custom output placeholder">
|
|
<mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
|
|
<ng-container i18n="Youtube-dl output template documentation link">Documentation</ng-container></a>.
|
|
<ng-container i18n="Custom Output input hint">Path is relative to the config download path. Don't include extension.</ng-container>
|
|
</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
|
|
<mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">
|
|
<ng-container i18n="Use authentication checkbox">
|
|
Use authentication
|
|
</ng-container>
|
|
</mat-checkbox>
|
|
<mat-form-field color="accent" class="advanced-input">
|
|
<input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username" i18n-placeholder="YT Username placeholder">
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
|
|
<mat-form-field style="margin-top: 31px;" color="accent" class="advanced-input">
|
|
<input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Password" i18n-placeholder="YT Password placeholder">
|
|
</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>
|
|
<ng-container i18n="Audio files title">
|
|
Audio
|
|
</ng-container>
|
|
</mat-panel-title>
|
|
<mat-panel-description>
|
|
<ng-container i18n="Audio files description">
|
|
Your audio files are here
|
|
</ng-container>
|
|
</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)" [file]="file" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
|
|
[length]="file.duration" [isAudio]="true" [use_youtubedl_archive]="use_youtubedl_archive"></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 i18n="Playlists title">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" [use_youtubedl_archive]="use_youtubedl_archive"></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">
|
|
<ng-container i18n="No video playlists available text">
|
|
No playlists available. Create one from your downloading audio files by clicking the blue plus button.
|
|
</ng-container>
|
|
</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>
|
|
<ng-container i18n="Video files title">
|
|
Video
|
|
</ng-container>
|
|
</mat-panel-title>
|
|
<mat-panel-description>
|
|
<ng-container i18n="Video files description">
|
|
Your video files are here
|
|
</ng-container>
|
|
</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)" [file]="file" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
|
|
[length]="file.duration" [isAudio]="false" [use_youtubedl_archive]="use_youtubedl_archive"></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 i18n="Playlists title">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" [use_youtubedl_archive]="use_youtubedl_archive"></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">
|
|
<ng-container i18n="No video playlists available text">
|
|
No playlists available. Create one from your downloading video files by clicking the blue plus button.
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</div>
|
|
|
|
<ng-template #nomp3s>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template #nomp4s>
|
|
|
|
</ng-template> |