mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-03-07 12:00:01 +03:00
Updated to material design v15
This commit is contained in:
Isaac Abadi
1
chrome-extension/css/bootstrap.min.css
vendored
1
chrome-extension/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
1146
package-lock.json
generated
1146
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -23,13 +23,13 @@
|
||||
"dependencies": {
|
||||
"@angular-devkit/core": "^15.0.1",
|
||||
"@angular/animations": "^15.0.1",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/cdk": "^15.0.0",
|
||||
"@angular/common": "^15.0.1",
|
||||
"@angular/compiler": "^15.0.1",
|
||||
"@angular/core": "^15.0.1",
|
||||
"@angular/forms": "^15.0.1",
|
||||
"@angular/localize": "^15.0.1",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/material": "^15.0.0",
|
||||
"@angular/platform-browser": "^15.0.1",
|
||||
"@angular/platform-browser-dynamic": "^15.0.1",
|
||||
"@angular/router": "^15.0.1",
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
}
|
||||
|
||||
.theme-slide-toggle {
|
||||
top: 2px;
|
||||
left: 10px;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
@@ -26,3 +25,8 @@
|
||||
.top-toolbar {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
::ng-deep .mdc-list-item__primary-text {
|
||||
width: 85px;
|
||||
height: 26px;
|
||||
}
|
||||
@@ -51,7 +51,7 @@
|
||||
</ng-container>
|
||||
<ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && postsService.hasPermission('subscriptions')">
|
||||
<mat-divider *ngIf="postsService.subscriptions.length > 0"></mat-divider>
|
||||
<a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatars [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatars>{{subscription.name}}</a>
|
||||
<a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatars [style.display]="'inline-block'" [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatars>{{subscription.name}}</a>
|
||||
</ng-container>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
|
||||
@@ -12,17 +12,15 @@
|
||||
}
|
||||
|
||||
.login-button-div {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.login-button-div > button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0px 0px 4px 4px !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<mat-dialog-content *ngIf="role">
|
||||
<mat-list>
|
||||
<mat-list-item role="listitem" *ngFor="let permission of available_permissions">
|
||||
<h3 matLine>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</h3>
|
||||
<span matLine>
|
||||
<div matListItemTitle>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</div>
|
||||
<div matListItemLine>
|
||||
<mat-radio-group [disabled]="permission === 'settings' && role.key === 'admin'" (change)="changeRolePermissions($event, permission, permissions[permission])" [(ngModel)]="permissions[permission]" [attr.aria-label]="'Give role permission for ' + permission">
|
||||
<mat-radio-button value="yes"><ng-container i18n="Yes">Yes</ng-container></mat-radio-button>
|
||||
<mat-radio-button value="no"><ng-container i18n="No">No</ng-container></mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</span>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-dialog-content>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.mat-radio-button {
|
||||
.mat-mdc-radio-button {
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@@ -13,14 +13,14 @@
|
||||
<div>
|
||||
<mat-list>
|
||||
<mat-list-item role="listitem" *ngFor="let permission of available_permissions">
|
||||
<h3 matLine>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</h3>
|
||||
<span matLine>
|
||||
<div matListItemTitle>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</div>
|
||||
<div matListItemLine>
|
||||
<mat-radio-group [disabled]="permission === 'settings' && postsService.user.uid === user.uid" (change)="changeUserPermissions($event, permission)" [(ngModel)]="permissions[permission]" [attr.aria-label]="'Give user permission for ' + permission">
|
||||
<mat-radio-button value="default"><ng-container i18n="Use role default">Use role default</ng-container></mat-radio-button>
|
||||
<mat-radio-button value="yes"><ng-container i18n="Yes">Yes</ng-container></mat-radio-button>
|
||||
<mat-radio-button value="no"><ng-container i18n="No">No</ng-container></mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</span>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.mat-radio-button {
|
||||
.mat-mdc-radio-button {
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@@ -15,12 +15,13 @@ export class ManageUserComponent implements OnInit {
|
||||
permissions = null;
|
||||
|
||||
permissionToLabel = {
|
||||
'filemanager': 'File manager',
|
||||
'settings': 'Settings access',
|
||||
'subscriptions': 'Subscriptions',
|
||||
'sharing': 'Share files',
|
||||
'advanced_download': 'Use advanced download mode',
|
||||
'downloads_manager': 'Use downloads manager'
|
||||
'filemanager': $localize`File manager`,
|
||||
'settings': $localize`Settings access`,
|
||||
'subscriptions': $localize`Subscriptions`,
|
||||
'sharing': $localize`Share files`,
|
||||
'advanced_download': $localize`Use advanced download mode`,
|
||||
'downloads_manager': $localize`Use downloads manager`,
|
||||
'tasks_manager': $localize`Use tasks manager`,
|
||||
}
|
||||
|
||||
settingNewPassword = false;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<div *ngIf="dataSource; else loading">
|
||||
<div style="padding: 15px">
|
||||
<div class="row">
|
||||
<div class="table table-responsive pb-4 pt-2">
|
||||
<div class="table table-responsive pb-4 pt-4">
|
||||
<div class="example-header">
|
||||
<mat-form-field>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" i18n-placeholder="search field description">
|
||||
<mat-form-field appearance="outline">
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" i18n-placeholder="search field description">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
|
||||
<div>
|
||||
<div style="display: inline-block;">
|
||||
<mat-form-field style="width: 132px;">
|
||||
<mat-form-field appearance="outline" style="width: 165px;">
|
||||
<mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
|
||||
<mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
|
||||
{{filterOption['value']['label']}}
|
||||
@@ -21,7 +21,7 @@
|
||||
<h4 *ngIf="customHeader" class="my-videos-title">{{customHeader}}</h4>
|
||||
</div>
|
||||
<div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
|
||||
<mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
|
||||
<mat-form-field appearance="outline" [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
|
||||
<input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
</mat-form-field>
|
||||
@@ -96,7 +96,7 @@
|
||||
</div>
|
||||
|
||||
<div style="position: relative;" *ngIf="usePaginator && selectedIndex > 0">
|
||||
<div style="position: absolute; margin-left: 8px; margin-top: 5px; scale: 0.8">
|
||||
<div style="position: absolute; margin-left: 8px; margin-top: -2px; scale: 0.8">
|
||||
<mat-form-field>
|
||||
<mat-label><ng-container i18n="File type">File type</ng-container></mat-label>
|
||||
<mat-select color="accent" [(ngModel)]="fileTypeFilter" (selectionChange)="fileTypeFilterChanged($event.value)">
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
.search-bar-unfocused {
|
||||
width: 132px;
|
||||
width: 165px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@@ -44,7 +44,7 @@
|
||||
.sort-dir-div {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.paginator {
|
||||
|
||||
@@ -21,14 +21,17 @@
|
||||
|
||||
.menuButton {
|
||||
right: 0px;
|
||||
top: -1px;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
|
||||
}
|
||||
|
||||
/* Coerce the <span> icon container away from display:inline */
|
||||
.mat-icon-button .mat-button-wrapper {
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
|
||||
.mat-mdc-icon-button .mat-button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -18,6 +18,6 @@ i {
|
||||
|
||||
.logo-image {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
@@ -5,73 +5,77 @@
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<mat-card class="mat-elevation-z6">
|
||||
<h6 i18n="Simulated args title">Simulated new args</h6>
|
||||
<mat-chip-list class="example-chip" #chipList aria-label="Args array" cdkDropList cdkDropListDisabled
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)">
|
||||
<mat-chip [matTooltip]="argsByKey[arg] ? argsByKey[arg]['description'] : null" *ngFor="let arg of args_array; let i = index;" [selectable]="selectable" [removable]="removable" (removed)="remove(i)" cdkDrag>
|
||||
{{arg}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
<mat-form-field style="width: 100%" color="accent">
|
||||
<mat-card-content>
|
||||
<h6 i18n="Simulated args title">Simulated new args</h6>
|
||||
<mat-chip-grid class="example-chip" #chipList aria-label="Args array" cdkDropList cdkDropListDisabled
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)">
|
||||
<mat-chip-row [matTooltip]="argsByKey[arg] ? argsByKey[arg]['description'] : null" *ngFor="let arg of args_array; let i = index;" [selectable]="selectable" [removable]="removable" (removed)="remove(i)" cdkDrag>
|
||||
{{arg}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip-row>
|
||||
</mat-chip-grid>
|
||||
<mat-form-field style="width: 100%" color="accent">
|
||||
|
||||
<input #chipper style="width: 100%;" [formControl]="chipCtrl" matInput [matAutocomplete]="autochip" [matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
[matChipInputAddOnBlur]="addOnBlur"
|
||||
(matChipInputTokenEnd)="add($event)">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #autochip="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredChipOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : chipCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
<input #chipper style="width: 100%;" [formControl]="chipCtrl" matInput [matAutocomplete]="autochip" [matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
[matChipInputAddOnBlur]="addOnBlur"
|
||||
(matChipInputTokenEnd)="add($event)">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #autochip="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredChipOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : chipCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<mat-card class="mat-elevation-z6 my-2">
|
||||
<h6 i18n="Add arg card title">Add an arg</h6>
|
||||
<form >
|
||||
<div>
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input matInput placeholder="Arg" [matAutocomplete]="auto" [formControl]="stateCtrl">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : stateCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<mat-card-content>
|
||||
<h6 i18n="Add arg card title">Add an arg</h6>
|
||||
<form >
|
||||
<div>
|
||||
<mat-menu #argsByCategoryMenu="matMenu">
|
||||
<ng-container *ngFor="let argsInCategory of argsByCategory | keyvalue">
|
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu">{{argsInfo[argsInCategory.key].label}}</button>
|
||||
<mat-menu #subMenu="matMenu">
|
||||
<button mat-menu-item *ngFor="let arg of argsInCategory.value" (click)="setFirstArg(arg.key)"><div style="display: inline-block;">{{arg.key}}</div> <div class="info-menu-icon"><mat-icon [matTooltip]="arg.description">info</mat-icon></div></button>
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input matInput placeholder="Arg" [matAutocomplete]="auto" [formControl]="stateCtrl">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : stateCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
</mat-menu>
|
||||
<div>
|
||||
<mat-menu #argsByCategoryMenu="matMenu">
|
||||
<ng-container *ngFor="let argsInCategory of argsByCategory | keyvalue">
|
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu">{{argsInfo[argsInCategory.key].label}}</button>
|
||||
<mat-menu #subMenu="matMenu">
|
||||
<button mat-menu-item *ngFor="let arg of argsInCategory.value" (click)="setFirstArg(arg.key)"><div style="display: inline-block;">{{arg.key}}</div> <div class="info-menu-icon"><mat-icon [matTooltip]="arg.description">info</mat-icon></div></button>
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
|
||||
|
||||
<button style="margin-bottom: 15px" mat-stroked-button [matMenuTriggerFor]="argsByCategoryMenu"><ng-container i18n="Search args by category button">Search by category</ng-container></button>
|
||||
<button style="margin-bottom: 15px" mat-stroked-button [matMenuTriggerFor]="argsByCategoryMenu"><ng-container i18n="Search args by category button">Search by category</ng-container></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mat-checkbox color="accent" [ngModelOptions]="{standalone: true}" [(ngModel)]="secondArgEnabled"><ng-container i18n="Use arg value checkbox">Use arg value</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div *ngIf="secondArgEnabled">
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" placeholder="Arg value" i18n-placeholder="Arg value placeholder" [(ngModel)]="secondArg">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<mat-checkbox color="accent" [ngModelOptions]="{standalone: true}" [(ngModel)]="secondArgEnabled"><ng-container i18n="Use arg value checkbox">Use arg value</ng-container></mat-checkbox>
|
||||
<button (click)="addArg()" [disabled]="!canAddArg()" mat-stroked-button color="accent"><ng-container i18n="Search args by category button">Add arg</ng-container></button>
|
||||
</div>
|
||||
<div *ngIf="secondArgEnabled">
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" placeholder="Arg value" i18n-placeholder="Arg value placeholder" [(ngModel)]="secondArg">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<button (click)="addArg()" [disabled]="!canAddArg()" mat-stroked-button color="accent"><ng-container i18n="Search args by category button">Add arg</ng-container></button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.spacer {flex: 1 1 auto;}
|
||||
|
||||
.mat-spinner {
|
||||
.mat-mdc-progress-spinner {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class="col-12" *ngIf="!download_all && editor_initialized">
|
||||
<ng-container i18n="Download time range prefix">Download videos uploaded in the last</ng-container>
|
||||
<mat-form-field color="accent" style="width: 50px; text-align: center; margin-left: 10px;">
|
||||
<mat-form-field color="accent" class="amount-select">
|
||||
<input type="number" matInput [(ngModel)]="timerange_amount" (ngModelChange)="timerangeChanged($event, false)">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="unit-select">
|
||||
@@ -29,23 +29,26 @@
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Max quality" i18n-placeholder="Max quality placeholder" [disabled]="new_sub.type === 'audio'" [(ngModel)]="new_sub.maxQuality">
|
||||
<mat-label i18n="Max quality">Max quality</mat-label>
|
||||
<mat-select [disabled]="new_sub.type === 'audio'" [(ngModel)]="new_sub.maxQuality">
|
||||
<mat-option *ngFor="let available_quality of available_qualities" [value]="available_quality['value']">{{available_quality['label']}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="new_sub.custom_args" matInput placeholder="Custom args" i18n-placeholder="Subscription custom args placeholder">
|
||||
<mat-label i18n="Custom args">Custom args</mat-label>
|
||||
<input [(ngModel)]="new_sub.custom_args" matInput>
|
||||
<button class="args-edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
|
||||
<mat-hint>
|
||||
<ng-container i18n="Custom args hint">These are added after the standard args.</ng-container>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="new_sub.custom_output" matInput placeholder="Custom file output" i18n-placeholder="Subscription custom file output placeholder">
|
||||
<mat-label i18n="Custom file output">Custom file output</mat-label>
|
||||
<input [(ngModel)]="new_sub.custom_output" matInput>
|
||||
<mat-hint>
|
||||
<a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
|
||||
<ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.
|
||||
|
||||
@@ -3,7 +3,13 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.amount-select {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.unit-select {
|
||||
width: 75px;
|
||||
width: 110px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@@ -3,9 +3,10 @@
|
||||
<mat-dialog-content>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="col-12 mb-3">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="url" matInput placeholder="URL" i18n-placeholder="Subscription URL input placeholder" required aria-required="true">
|
||||
<mat-label i18n="URL">URL</mat-label>
|
||||
<input [(ngModel)]="url" matInput required aria-required="true">
|
||||
<mat-hint><ng-container i18n="Subscription URL input hint">The playlist or channel URL</ng-container></mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -14,12 +15,13 @@
|
||||
<mat-divider></mat-divider>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="name" matInput placeholder="Custom name" i18n-placeholder="Subscription custom name placeholder">
|
||||
<mat-label i18n="Custom name">Custom name</mat-label>
|
||||
<input [(ngModel)]="name" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 mt-3">
|
||||
<div class="col-12">
|
||||
<mat-checkbox [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12" *ngIf="!download_all">
|
||||
@@ -37,7 +39,8 @@
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Max quality" i18n-placeholder="Max quality placeholder" [disabled]="audioOnlyMode" [(ngModel)]="maxQuality">
|
||||
<mat-label i18n="Max quality">Max quality</mat-label>
|
||||
<mat-select [disabled]="audioOnlyMode" [(ngModel)]="maxQuality">
|
||||
<mat-option *ngFor="let available_quality of available_qualities" [value]="available_quality['value']">{{available_quality['label']}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@@ -47,9 +50,10 @@
|
||||
<mat-checkbox [(ngModel)]="audioOnlyMode"><ng-container i18n="Streaming-only mode">Audio-only mode</ng-container></mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="col-12 mb-4">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="customArgs" matInput placeholder="Custom args" i18n-placeholder="Subscription custom args placeholder">
|
||||
<mat-label i18n="Custom args">Custom args</mat-label>
|
||||
<input [(ngModel)]="customArgs" matInput>
|
||||
<button class="args-edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
|
||||
<mat-hint>
|
||||
<ng-container i18n="Custom args hint">These are added after the standard args.</ng-container>
|
||||
@@ -58,7 +62,8 @@
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="customFileOutput" matInput placeholder="Custom file output" i18n-placeholder="Subscription custom file output placeholder">
|
||||
<mat-label i18n="Custom file output">Custom file output</mat-label>
|
||||
<input [(ngModel)]="customFileOutput" matInput>
|
||||
<mat-hint>
|
||||
<a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
|
||||
<ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mat-spinner {
|
||||
.mat-mdc-progress-spinner {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.mat-spinner {
|
||||
.mat-mdc-progress-spinner {
|
||||
margin-left: 5%;
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-basic .mat-card-content {
|
||||
.demo-basic .mat-mdc-card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ mat-toolbar.top {
|
||||
width: 80%
|
||||
}
|
||||
|
||||
mat-form-field.mat-form-field {
|
||||
mat-form-field.mat-mdc-form-field {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@ mat-form-field.mat-form-field {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: -40px;
|
||||
right: -16px;
|
||||
}
|
||||
|
||||
.margined {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="big demo-basic">
|
||||
<mat-card id="card" style="margin-right: 20px; margin-left: 20px;" [ngClass]="(allowAdvancedDownload) ? 'no-border-radius-bottom' : 'border-radius-both'">
|
||||
<mat-card-content style="padding: 0px 8px 0px 8px;">
|
||||
<div style="position: relative; margin-right: 15px;">
|
||||
<div style="position: relative; margin-right: 15px; margin-top: 20px;">
|
||||
<form class="example-form">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
@@ -31,16 +31,16 @@
|
||||
</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 class="spinner-div" *ngIf="url !== '' && cachedAvailableFormats[url] && cachedAvailableFormats[url]['formats_loading']">
|
||||
<mat-spinner [diameter]="25"></mat-spinner>
|
||||
</div>
|
||||
</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' : '']">
|
||||
<mat-card appearance="outlined" 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>
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
|
||||
::ng-deep .mat-button-toggle-label-content {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<div class="col-12 mt-3">
|
||||
<mat-checkbox color="accent" [(ngModel)]="new_config['Subscriptions']['allow_subscriptions']"><ng-container i18n="Allow subscriptions setting">Allow subscriptions</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-12 mt-2 mb-3">
|
||||
<mat-form-field class="text-field" color="accent">
|
||||
<input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_base_path']" matInput placeholder="Subscriptions base path" i18n-placeholder="Subscriptions base path input setting placeholder">
|
||||
<mat-hint><ng-container i18n="Subscriptions base path setting input hint">Base path for videos from your subscribed channels and playlists. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
|
||||
@@ -51,7 +51,7 @@
|
||||
<mat-hint><ng-container i18n="Check interval setting input hint">Unit is seconds, only include numbers.</ng-container></mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 mt-4 mb-3">
|
||||
<div class="col-12 mt-3 mb-3">
|
||||
<mat-checkbox color="accent" [(ngModel)]="new_config['Subscriptions']['redownload_fresh_uploads']" matTooltip="Sometimes new videos are downloaded before being fully processed. This setting will mean new videos will be checked for a higher quality version the following day." i18n-matTooltip="Redownload fresh uploads tooltip"><ng-container i18n="Redownload fresh uploads">Redownload fresh uploads</ng-container></mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,7 +112,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-3">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<mat-form-field class="text-field" color="accent">
|
||||
<input matInput [(ngModel)]="new_config['Downloader']['default_file_output']" matInput placeholder="Default file output" i18n-placeholder="Default file output placeholder">
|
||||
<mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
|
||||
@@ -122,7 +122,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-3 mb-4">
|
||||
<div class="col-12 mt-4 mb-5">
|
||||
<mat-form-field class="text-field" style="margin-right: 12px;" color="accent">
|
||||
<textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Global custom args" i18n-placeholder="Custom args input placeholder"></textarea>
|
||||
<mat-hint><ng-container i18n="Custom args setting input hint">Global custom args for downloads on the home page. (Set args for subscriptions for each subscriptions separately!) Args are delimited using two commas like so: ,,</ng-container></mat-hint>
|
||||
@@ -136,7 +136,7 @@
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3">
|
||||
<h6 i18n="Categories">Categories</h6>
|
||||
<div *ngIf="postsService.categories && postsService.categories.length > 0" kDropList class="category-list" (cdkDropListDropped)="dropCategory($event)">
|
||||
<div *ngIf="postsService.categories && postsService.categories.length > 0" cdkDropList class="category-list" (cdkDropListDropped)="dropCategory($event)">
|
||||
<div class="category-box" *ngFor="let category of postsService.categories" cdkDrag>
|
||||
<div class="category-custom-placeholder" *cdkDragPlaceholder></div>
|
||||
{{category['name']}}
|
||||
@@ -219,7 +219,7 @@
|
||||
<div class="col-12">
|
||||
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['download_only_mode']"><ng-container i18n="Download only mode setting">Download only mode</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-12 mb-2">
|
||||
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_autoplay']"><ng-container i18n="Allow autoplay setting">Allow autoplay</ng-container></mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
@@ -375,7 +375,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<div class="col-12">
|
||||
<mat-form-field>
|
||||
<mat-label><ng-container i18n="Log Level label">Log Level</ng-container></mat-label>
|
||||
<mat-select color="accent" [(ngModel)]="new_config['Advanced']['logger_level']">
|
||||
@@ -387,7 +387,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 mb-1">
|
||||
<div class="col-12">
|
||||
<mat-form-field>
|
||||
<mat-label><ng-container i18n="Login expiration select label">Login expiration</ng-container></mat-label>
|
||||
<mat-select color="accent" [(ngModel)]="new_config['Advanced']['jwt_expiration']">
|
||||
@@ -399,7 +399,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-12 mb-1">
|
||||
<mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['allow_advanced_download']"><ng-container i18n="Allow advanced downloading setting">Allow advanced download</ng-container></mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
@@ -407,14 +407,14 @@
|
||||
<mat-divider></mat-divider>
|
||||
<div *ngIf="new_config" class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-4">
|
||||
<div class="col-12 mt-2 mb-2">
|
||||
<mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['use_cookies']"><ng-container i18n="Use cookies setting">Use Cookies</ng-container></mat-checkbox>
|
||||
<button class="checkbox-button" mat-stroked-button (click)="openCookiesUploaderDialog()"><ng-container i18n="Set cookies button">Set Cookies</ng-container></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<div *ngIf="new_config" class="container-fluid mt-1">
|
||||
<div *ngIf="new_config" class="container-fluid mt-3">
|
||||
<app-updater></app-updater>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-body {
|
||||
::ng-deep .mat-mdc-tab-body {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@@ -38,8 +38,6 @@
|
||||
|
||||
.checkbox-button {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 12px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
|
||||
@@ -7,19 +7,21 @@
|
||||
|
||||
<h4 i18n="Subscriptions channels title" style="text-align: center;">Channels</h4>
|
||||
<mat-nav-list class="sub-nav-list">
|
||||
<mat-list-item *ngFor="let sub of channel_subscriptions">
|
||||
<a class="a-list-item" matLine (click)="goToSubscription(sub)" href="javascript:void(0)">
|
||||
<mat-list-item *ngFor="let sub of channel_subscriptions" style="pointer-events: none">
|
||||
<a style="pointer-events: auto;" class="a-list-item" matListItemTitle (click)="goToSubscription(sub)">
|
||||
<strong *ngIf="sub.name">{{ sub.name }} <ng-container *ngIf="sub.paused" i18n="Paused suffix">(Paused)</ng-container></strong>
|
||||
<div *ngIf="!sub.name">
|
||||
<ng-container i18n="Subscription playlist not available text">Name not available. Channel retrieval in progress.</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
<button mat-icon-button (click)="editSubscription(sub)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="showSubInfo(sub)">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<div style="pointer-events: auto; color: unset" matListItemMeta>
|
||||
<button mat-icon-button (click)="editSubscription(sub)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="showSubInfo(sub)">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
|
||||
@@ -29,19 +31,21 @@
|
||||
|
||||
<h4 i18n="Subscriptions playlists title" style="text-align: center; margin-top: 10px;">Playlists</h4>
|
||||
<mat-nav-list class="sub-nav-list">
|
||||
<mat-list-item *ngFor="let sub of playlist_subscriptions">
|
||||
<a class="a-list-item" matLine (click)="goToSubscription(sub)" href="javascript:void(0)">
|
||||
<strong>{{ sub.name }} <ng-container *ngIf="sub.paused" i18n="Paused suffix">(Paused)</ng-container></strong>
|
||||
<div class="content-loading-div" *ngIf="!sub.name">
|
||||
<ng-container i18n="Subscription playlist not available text">Name not available. Playlist retrieval in progress.</ng-container>
|
||||
<mat-list-item *ngFor="let sub of playlist_subscriptions" style="pointer-events: none">
|
||||
<a style="pointer-events: auto;" class="a-list-item" matListItemTitle (click)="goToSubscription(sub)">
|
||||
<strong *ngIf="sub.name">{{ sub.name }} <ng-container *ngIf="sub.paused" i18n="Paused suffix">(Paused)</ng-container></strong>
|
||||
<div *ngIf="!sub.name">
|
||||
<ng-container i18n="Subscription playlist not available text">Name not available. Channel retrieval in progress.</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
<button mat-icon-button (click)="editSubscription(sub)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="showSubInfo(sub)">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<div style="pointer-events: auto; color: unset" matListItemMeta>
|
||||
<button mat-icon-button (click)="editSubscription(sub)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="showSubInfo(sub)">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
|
||||
|
||||
@@ -18,7 +18,13 @@
|
||||
|
||||
.a-list-item {
|
||||
height: 48px;
|
||||
padding-top: 12px !important;
|
||||
color: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
::ng-deep .mdc-list-item__primary-text {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sub-nav-list {
|
||||
|
||||
3
src/bootstrap.min.css
vendored
3
src/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -42,7 +42,7 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
@include angular-material-theme($dark-theme);
|
||||
}
|
||||
|
||||
.mat-stroked-button, .mat-raised-button, .mat-flat-button {
|
||||
.mat-mdc-outlined-button, .mat-mdc-raised-button, .mat-mdc-flat-button {
|
||||
border-radius: 24px !important
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user