mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-03-09 22:31:14 +03:00
bb6503e86d
Added support for MongoDB Added tests relating to new DB system Category rules are now case insensitive Fixed playlist modification change state
210 lines
14 KiB
HTML
210 lines
14 KiB
HTML
<br/>
|
|
<div class="big demo-basic">
|
|
<mat-card id="card" style="margin-right: 20px; margin-left: 20px;" [ngClass]="(allowAdvancedDownload) ? 'no-border-radius-bottom' : null">
|
|
<mat-card-content style="padding: 0px 8px 0px 8px;">
|
|
<div style="position: relative; margin-right: 15px;">
|
|
<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 (keyup.enter)="downloadClicked()" (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" #urlinput>
|
|
</mat-form-field>
|
|
<button type="button" class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
|
|
</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">
|
|
<mat-option [value]="''">
|
|
Max
|
|
</mat-option>
|
|
<ng-container *ngIf="url && cachedAvailableFormats && cachedAvailableFormats[url]?.formats">
|
|
<ng-container *ngFor="let option of cachedAvailableFormats[url]['formats'][audioOnly ? 'audio' : 'video']">
|
|
<mat-option *ngIf="option.key !== 'best_audio_format'" [value]="option">
|
|
{{option.key}}
|
|
</mat-option>
|
|
</ng-container>
|
|
</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 no-border-radius-top">
|
|
<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. Args are delimited using two commas like so: ,,
|
|
</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-3">
|
|
<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-3">
|
|
<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 class="col-12 col-sm-6 mt-3">
|
|
<mat-checkbox color="accent" [disabled]="current_download" [(ngModel)]="cropFile" style="z-index: 999" [ngModelOptions]="{standalone: true}">
|
|
<ng-container i18n="Crop video checkbox">
|
|
Crop file
|
|
</ng-container>
|
|
</mat-checkbox>
|
|
<mat-form-field color="accent" class="advanced-input">
|
|
<input [(ngModel)]="cropFileStart" type="number" [ngModelOptions]="{standalone: true}" [disabled]="!cropFile" matInput placeholder="Crop from (seconds)" i18n-placeholder="Crom from placeholder">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12 col-sm-6 mt-3">
|
|
<mat-form-field style="margin-top: 31px;" color="accent" class="advanced-input">
|
|
<input [(ngModel)]="cropFileEnd" type="number" [ngModelOptions]="{standalone: true}" [disabled]="!cropFile" matInput placeholder="Crop to (seconds)" i18n-placeholder="Crop to 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 && download['downloading']">
|
|
<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]="(+percentDownloaded > 99)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="current_download.percent_complete && current_download.percent_complete > 1;else indeterminateprogress">
|
|
<mat-progress-bar style="border-radius: 5px;" mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
|
|
<br/>
|
|
</div>
|
|
<div *ngIf="+percentDownloaded > 99" class="spinner">
|
|
<mat-spinner [diameter]="25"></mat-spinner>
|
|
</div>
|
|
<ng-template #indeterminateprogress>
|
|
<mat-progress-bar style="border-radius: 5px;" mode="indeterminate"></mat-progress-bar>
|
|
</ng-template>
|
|
</div>
|
|
<br/>
|
|
</div>
|
|
<ng-template #nofile>
|
|
|
|
</ng-template>
|
|
|
|
<ng-container *ngIf="cachedFileManagerEnabled || fileManagerEnabled">
|
|
<app-recent-videos #recentVideos></app-recent-videos>
|
|
<br/>
|
|
<h4 style="text-align: center">Custom playlists</h4>
|
|
<app-custom-playlists></app-custom-playlists>
|
|
</ng-container>
|