mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-05-26 15:13:31 +00:00
6f3e94cf24
theme change behavior slightly modified to improve accessibility added hammerjs settings menu now has minimum width, updated colors, and additional hints
231 lines
10 KiB
HTML
231 lines
10 KiB
HTML
<h4 mat-dialog-title>Settings</h4>
|
|
|
|
<mat-dialog-content>
|
|
<!-- Host -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Host
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input [(ngModel)]="new_config['Host']['url']" matInput placeholder="URL" required>
|
|
<mat-hint>Base URL this app will be accessed from, without the port.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12 mt-4">
|
|
<mat-form-field color="accent">
|
|
<input [(ngModel)]="new_config['Host']['port']" matInput placeholder="Port" required>
|
|
<mat-hint>The desired port. Default is 17442.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<!-- Encryption -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Encryption
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Encryption']['use-encryption']">Use encryption</mat-checkbox>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['cert-file-path']" matInput placeholder="Cert file path">
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['key-file-path']" matInput placeholder="Key file path">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<!-- Downloader -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Downloader
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input matInput [(ngModel)]="new_config['Downloader']['path-audio']" placeholder="Audio folder path" required>
|
|
<mat-hint>Path for audio only downloads. It is relative to YTDL-Material's root folder.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="col-12 mt-4">
|
|
<mat-form-field color="accent">
|
|
<input matInput [(ngModel)]="new_config['Downloader']['path-video']" placeholder="Video folder path" required>
|
|
<mat-hint>Path for video downloads. It is relative to YTDL-Material's root folder.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="col-12 mt-4">
|
|
<mat-form-field color="accent">
|
|
<textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Custom args"></textarea>
|
|
<mat-hint>Global custom args for downloads on the home page.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<!-- Extra -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Extra
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input [(ngModel)]="new_config['Extra']['title_top']" matInput placeholder="Top title" required>
|
|
<mat-hint></mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['file_manager_enabled']">File manager enabled</mat-checkbox>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_quality_select']">Allow quality select</mat-checkbox>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['download_only_mode']">Download only mode</mat-checkbox>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_multi_download_mode']">Allow multi-download mode</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<!-- API -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
API
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['API']['use_youtube_api']">Use YouTube API</mat-checkbox>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input [disabled]="!new_config['API']['use_youtube_api']" [(ngModel)]="new_config['API']['youtube_API_key']" matInput placeholder="Youtube API Key" required>
|
|
<mat-hint><a target="_blank" href="https://developers.google.com/youtube/v3/getting-started">Generating a key</a> is easy!</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<!-- Themes -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Themes
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-select color="accent" style="width: 100px" [(ngModel)]="new_config['Themes']['default_theme']">
|
|
<mat-option value="default">Default</mat-option>
|
|
<mat-option value="dark">Dark</mat-option>
|
|
</mat-select>
|
|
</div>
|
|
|
|
<div class="col-12 mt-4">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Themes']['allow_theme_change']">Allow theme change</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<!-- Subscriptions -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Subscriptions
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Subscriptions']['allow_subscriptions']">Allow subscriptions</mat-checkbox>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_base_path']" matInput placeholder="Subscriptions base path">
|
|
<mat-hint>Base path for videos from your subscribed channels and playlists. It is relative to YTDL-Material's root folder.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12 mt-5">
|
|
<mat-form-field color="accent">
|
|
<input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_check_interval']" matInput placeholder="Check interval">
|
|
<mat-hint>Unit is seconds, only include numbers.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12 mt-4">
|
|
<mat-checkbox color="accent" [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_use_youtubedl_archive']">Use youtube-dl archive</mat-checkbox>
|
|
<p>With youtube-dl's <a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#how-do-i-download-only-new-videos-from-a-playlist">archive</a> feature, downloaded videos from your subscriptions get recorded in a text file in the subscriptions <i>archive</i> sub-directory.</p>
|
|
<p>This enables the ability to permanently delete videos from your subscriptions without unsubscribing, and allows you to record which videos you downloaded in case of data loss.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
|
|
<!-- Advanced -->
|
|
<mat-expansion-panel class="settings-expansion-panel">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
Advanced
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div *ngIf="new_config" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['use_default_downloading_agent']">Use default downloading agent</mat-checkbox>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-form-field color="accent">
|
|
<input [disabled]="!new_config['Advanced']['use_default_downloading_agent']" [(ngModel)]="new_config['Advanced']['custom_downloading_agent']" matInput placeholder="Custom agent" required>
|
|
<mat-hint></mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12">
|
|
<mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['allow_advanced_download']">Allow advanced download</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions>
|
|
<div style="margin-bottom: 10px;">
|
|
<button color="accent" (click)="saveSettings()" [disabled]="settingsSame()" mat-raised-button><mat-icon>done</mat-icon> Save</button>
|
|
<button mat-flat-button [mat-dialog-close]="false"><mat-icon>cancel</mat-icon> Cancel</button>
|
|
</div>
|
|
</mat-dialog-actions> |