Merge pull request #413 from Tzahi12345/cleaner-playlists-and-settings

Dedicated settings page and UI cleanup
2026-03-12 07:40:57 +03:00 · 2021-08-01 21:17:50 -06:00
parent b03b4d173b 2756cfae17
commit f40ac49082
17 changed files with 122 additions and 51 deletions
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,12 +7,14 @@ import { SubscriptionComponent } from './subscription/subscription/subscription.
 import { PostsService } from './posts.services';
 import { LoginComponent } from './components/login/login.component';
 import { DownloadsComponent } from './components/downloads/downloads.component';
+import { SettingsComponent } from './settings/settings.component';

 const routes: Routes = [
  { path: 'home', component: MainComponent, canActivate: [PostsService] },
  { path: 'player', component: PlayerComponent, canActivate: [PostsService]},
  { path: 'subscriptions', component: SubscriptionsComponent, canActivate: [PostsService] },
  { path: 'subscription', component: SubscriptionComponent, canActivate: [PostsService] },
+  { path: 'settings', component: SettingsComponent, canActivate: [PostsService] },
  { path: 'login', component: LoginComponent },
  { path: 'downloads', component: DownloadsComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -23,10 +23,10 @@
                          <span i18n="Dark mode toggle label">Dark</span>
                          <mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'"></mat-slide-toggle>
                        </button>
-                        <button *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('settings')))" (click)="openSettingsDialog()" mat-menu-item>
+                        <!-- <button *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('settings')))" (click)="openSettingsDialog()" mat-menu-item>
                          <mat-icon>settings</mat-icon>
                          <span i18n="Settings menu label">Settings</span>
-                        </button>
+                        </button> -->
                        <button (click)="openAboutDialog()" mat-menu-item>
                            <mat-icon>info</mat-icon>
                            <span i18n="About menu label">About</span>
@@ -42,10 +42,14 @@
                <mat-nav-list>
                    <a *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || postsService.isLoggedIn)" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
                    <a *ngIf="postsService.config && postsService.config.Advanced.multi_user_mode && !postsService.isLoggedIn" mat-list-item (click)="sidenav.close()" routerLink='/login'><ng-container i18n="Navigation menu Login Page title">Login</ng-container></a>
-                    <a *ngIf="postsService.config && allowSubscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
-                    <a *ngIf="postsService.config && enableDownloadsManager && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('downloads_manager')))" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
-                    <ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))">
+                    <a *ngIf="postsService.config && allowSubscriptions && postsService.hasPermission('subscriptions')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
+                    <a *ngIf="postsService.config && enableDownloadsManager && postsService.hasPermission('downloads_manager')" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
+                    <ng-container *ngIf="postsService.config && postsService.hasPermission('settings')">
                        <mat-divider></mat-divider>
+                        <a mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/settings'><ng-container i18n="Settings menu label">Settings</ng-container></a>
+                    </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-avatar [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatar>{{subscription.name}}</a>
                    </ng-container>
                </mat-nav-list>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,6 @@
 import { Component, OnInit, ElementRef, ViewChild, HostBinding, AfterViewInit } from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
 import {PostsService} from './posts.services';
-import {FileCardComponent} from './file-card/file-card.component';
-import { Observable } from 'rxjs/Observable';
-import {FormControl, Validators} from '@angular/forms';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSidenav } from '@angular/material/sidenav';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -16,7 +13,6 @@ import 'rxjs/add/operator/filter'
 import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/switch'
-import { YoutubeSearchService, Result } from './youtube-search.service';
 import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { THEMES_CONFIG } from '../themes';
@@ -28,7 +24,11 @@ import { SetDefaultAdminDialogComponent } from './dialogs/set-default-admin-dial
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  providers: [{
+    provide: MatDialogRef,
+    useValue: {}
+  }]
 })
 export class AppComponent implements OnInit, AfterViewInit {

--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,5 +1,5 @@
 <mat-card class="login-card">
-    <mat-tab-group [(selectedIndex)]="selectedTabIndex">
+    <mat-tab-group style="margin-bottom: 20px" [(selectedIndex)]="selectedTabIndex">
        <mat-tab label="Login">
            <div style="margin-top: 10px;">
                <mat-form-field>
@@ -11,9 +11,6 @@
                    <input [(ngModel)]="loginPasswordInput" (keyup.enter)="login()" type="password" matInput placeholder="Password">
                </mat-form-field>
            </div>
-            <div style="margin-bottom: 10px; margin-top: 10px;">
-                <button [disabled]="loggingIn" color="primary" (click)="login()" mat-raised-button><ng-container i18n="Login">Login</ng-container></button>
-            </div>
        </mat-tab>
        <mat-tab *ngIf="registrationEnabled" label="Register">
            <div style="margin-top: 10px;">
@@ -31,9 +28,14 @@
                    <input [(ngModel)]="registrationPasswordConfirmationInput" type="password" matInput placeholder="Confirm Password">
                </mat-form-field>
            </div>
-            <div style="margin-bottom: 10px; margin-top: 10px;">
-                <button [disabled]="registering" color="primary" (click)="register()" mat-raised-button><ng-container i18n="Register">Register</ng-container></button>
-            </div>
        </mat-tab>
    </mat-tab-group>
+    <div *ngIf="selectedTabIndex === 0" class="login-button-div">
+        <button [disabled]="loggingIn" color="primary" (click)="login()" mat-raised-button><ng-container i18n="Login">Login</ng-container></button>
+        <mat-progress-bar *ngIf="loggingIn" class="login-progress-bar" mode="indeterminate"></mat-progress-bar>
+    </div>
+    <div *ngIf="selectedTabIndex === 1" class="login-button-div">
+        <button [disabled]="registering" color="primary" (click)="register()" mat-raised-button><ng-container i18n="Register">Register</ng-container></button>
+        <mat-progress-bar *ngIf="registering" class="login-progress-bar" mode="indeterminate"></mat-progress-bar>
+    </div>
 </mat-card>
--- a/src/app/components/login/login.component.scss
+++ b/src/app/components/login/login.component.scss
@@ -1,6 +1,33 @@
 .login-card {
-    max-width: 600px;
+    max-width: 400px;
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
+    padding-top: 8px;
+}
+
+.login-div {
+    height: calc(100% - 170px);
+    overflow-y: auto;
+}
+
+.login-button-div {
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: -16px;
+    margin-right: -16px;
+    bottom: 0px;
+    width: 100%;
+    position: absolute;
+}
+
+.login-button-div > button {
+    width: 100%;
+    border-radius: 0px 0px 4px 4px !important;
+}
+
+.login-progress-bar {
+    position: absolute;
+    bottom: 0px;
+    border-radius: 0px 0px 4px 4px;
 }
--- a/src/app/components/logs-viewer/logs-viewer.component.html
+++ b/src/app/components/logs-viewer/logs-viewer.component.html
@@ -1,4 +1,4 @@
-<div style="height: 275px;">
+<div style="height: 100%;">
    <div *ngIf="logs_loading" style="z-index: 999; position: absolute; top: 40%; left: 50%">
        <mat-spinner [diameter]="32"></mat-spinner>
    </div>
@@ -10,7 +10,7 @@
    </cdk-virtual-scroll-viewport>-->

    <!-- Non-virtual mode (slow, bug-free) -->
-    <div style="height: 274px; overflow-y: auto">
+    <div style="height: 100%; overflow-y: auto">
        <div *ngFor="let log of logs; let i = index" class="example-item">
            <span [ngStyle]="{'color':log.color}">{{log.text}}</span>
        </div>
--- a/src/app/components/modify-users/modify-users.component.html
+++ b/src/app/components/modify-users/modify-users.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="dataSource; else loading">
    <div style="padding: 15px">
    <div class="row">
-        <div class="table table-responsive px-5 pb-4 pt-2">
+        <div class="table table-responsive pb-4 pt-2">
        <div class="example-header">
            <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" i18n-placeholder="search field description">
--- a/src/app/components/modify-users/modify-users.component.scss
+++ b/src/app/components/modify-users/modify-users.component.scss
@@ -1,5 +1,4 @@
 .edit-role {
    position: relative;
    top: -50px;
-    left: 35px;
 }
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -28,7 +28,7 @@
    </div>
 </div>
 <div>
-    <div class="container">
+    <div class="container" style="margin-bottom: 16px">
        <div class="row justify-content-center">
            <ng-container *ngIf="normal_files_received && paged_data">
                <div *ngFor="let file of paged_data; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
--- a/src/app/main/main.component.css
+++ b/src/app/main/main.component.css
@@ -133,12 +133,16 @@ mat-form-field.mat-form-field {
    top: -5px;
 }

+.border-radius-both {
+    border-radius: 16px;
+}
+
 .no-border-radius-bottom {
-    border-radius: 4px 4px 0px 0px;
+    border-radius: 16px 16px 0px 0px;
 }

 .no-border-radius-top {
-    border-radius: 0px 0px 4px 4px;
+    border-radius: 0px 0px 16px 16px;
 }

@media (max-width: 576px) {
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,6 +1,6 @@
 <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 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;">
                <form class="example-form">
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -230,7 +230,7 @@ export class MainComponent implements OnInit {
  async loadConfig() {
    // loading config
    this.fileManagerEnabled = this.postsService.config['Extra']['file_manager_enabled']
-                              && (!this.postsService.isLoggedIn || this.postsService.permissions.includes('filemanager'));
+                              && this.postsService.hasPermission('filemanager');
    this.downloadOnlyMode = this.postsService.config['Extra']['download_only_mode'];
    this.allowMultiDownloadMode = this.postsService.config['Extra']['allow_multi_download_mode'];
    this.audioFolderPath = this.postsService.config['Downloader']['path-audio'];
@@ -242,7 +242,7 @@ export class MainComponent implements OnInit {
    this.youtubeAPIKey = this.youtubeSearchEnabled ? this.postsService.config['API']['youtube_API_key'] : null;
    this.allowQualitySelect = this.postsService.config['Extra']['allow_quality_select'];
    this.allowAdvancedDownload = this.postsService.config['Advanced']['allow_advanced_download']
-                                  && (!this.postsService.isLoggedIn || this.postsService.permissions.includes('advanced_download'));
+                                  && this.postsService.hasPermission('advanced_download');
    this.useDefaultDownloadingAgent = this.postsService.config['Advanced']['use_default_downloading_agent'];
    this.customDownloadingAgent = this.postsService.config['Advanced']['custom_downloading_agent'];

--- a/src/app/posts.services.ts
+++ b/src/app/posts.services.ts
@@ -511,6 +511,12 @@ export class PostsService implements CanActivate {
        this.resetHttpParams();
    }

+    hasPermission(permission) {
+        // assume not logged in users never have permission
+        if (this.config.Advanced.multi_user_mode && !this.isLoggedIn) return false;
+        return this.config.Advanced.multi_user_mode ? this.permissions.includes(permission) : true;
+    }
+
    // user methods
    register(username, password) {
        const call = this.http.post(this.path + 'auth/register', {userid: username,
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -1,13 +1,12 @@
-<h4 i18n="Settings title" mat-dialog-title>Settings</h4>
+<h4 class="settings-title" i18n="Settings title">Settings</h4>
 <!-- <ng-container i18n="Allow subscriptions setting"></ng-container> -->
-<mat-dialog-content>

 <!-- Language
 <div style="margin-bottom: 10px;">

 </div> -->

-<mat-tab-group>
+<mat-tab-group style="height: 76vh" mat-align-tabs="center">
    <!-- Server -->
    <mat-tab label="Main" i18n-label="Main settings label">
        <ng-template matTabContent style="padding: 15px;">
@@ -391,7 +390,7 @@
                <app-updater></app-updater>
            </div>
            <mat-divider></mat-divider>
-            <div *ngIf="new_config" class="container">
+            <div *ngIf="new_config" class="container-fluid">
                <div class="row">
                    <div class="col-12 mt-4">
                        <button (click)="restartServer()" mat-stroked-button color="warn"><ng-container i18n="Restart server button">Restart server</ng-container></button>
@@ -401,8 +400,7 @@
        </ng-template>
    </mat-tab>
    <mat-tab *ngIf="postsService.config && postsService.config.Advanced.multi_user_mode" label="Users" i18n-label="Users settings label">
-        
-        <div style="margin-left: 48px; margin-top: 24px; margin-bottom: -25px;">
+        <div *ngIf="new_config" style="margin-top: 24px; margin-bottom: -25px;">
            <div>
                <mat-checkbox color="accent" [(ngModel)]="new_config['Users']['allow_registration']"><ng-container i18n="Allow registration setting">Allow user registration</ng-container></mat-checkbox>
            </div>
@@ -446,25 +444,23 @@
            </div>
            <mat-divider></mat-divider>
        </div>
-        <app-modify-users></app-modify-users>
+        <app-modify-users *ngIf="new_config"></app-modify-users>
    </mat-tab>
    <mat-tab *ngIf="postsService.config" label="Logs" i18n-label="Logs settings label">
        <ng-template matTabContent>
-            <div style="margin-left: 48px; margin-top: 24px; height: 340px">
+            <div style="margin-top: 15px; height: 84%;">
                <app-logs-viewer></app-logs-viewer>
            </div>
        </ng-template>
    </mat-tab>
 </mat-tab-group>
-</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>&nbsp;&nbsp;
-            <ng-container i18n="Settings save button">Save</ng-container>
-        </button>
-        <button mat-flat-button [mat-dialog-close]="false"><mat-icon>cancel</mat-icon>&nbsp;&nbsp;
-            <span i18n="Settings cancel and close button">{settingsAreTheSame + "", select, true {Close} false {Cancel} other {otha}}</span>
-        </button>
-    </div>
-</mat-dialog-actions>
+<div class="action-buttons">
+    <button style="margin-left: 10px; height: 37.3px" color="accent" (click)="saveSettings()" [disabled]="settingsSame()" mat-raised-button><mat-icon>done</mat-icon>&nbsp;&nbsp;
+        <ng-container i18n="Settings save button">Save</ng-container>
+    </button>
+    <button style="margin-left: 10px;" mat-flat-button (click)="cancelSettings()" [disabled]="settingsSame()"><mat-icon>cancel</mat-icon>&nbsp;&nbsp;
+        <span i18n="Settings cancel button">Cancel</span>
+    </button>
+</div>
+
--- a/src/app/settings/settings.component.scss
+++ b/src/app/settings/settings.component.scss
@@ -2,6 +2,15 @@
    margin-bottom: 20px;
 }

+.settings-title {
+    text-align: center;
+    margin-top: 15px;
+}
+
+::ng-deep .mat-tab-body {
+    margin-left: 15px;
+}
+
 .ext-divider {
    margin-bottom: 14px;
 }
@@ -90,4 +99,9 @@

 .transfer-db-div {
    margin-bottom: 10px;
+}
+
+.action-buttons {
+    position: absolute;
+    bottom: 15px;
 }
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -51,8 +51,17 @@ export class SettingsComponent implements OnInit {
    private dialog: MatDialog) { }

  ngOnInit() {
-    this.getConfig();
-    this.getDBInfo();
+    if (this.postsService.initialized) {
+      this.getConfig();
+      this.getDBInfo();
+    } else {
+      this.postsService.service_initialized.subscribe(init => {
+        if (init) {
+          this.getConfig();
+          this.getDBInfo();
+        }
+      });
+    }

    this.generated_bookmarklet_code = this.sanitizer.bypassSecurityTrustUrl(this.generateBookmarkletCode());

@@ -85,6 +94,10 @@ export class SettingsComponent implements OnInit {
    })
  }

+  cancelSettings() {
+    this.new_config = JSON.parse(JSON.stringify(this.initial_config));
+  }
+
  dropCategory(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.postsService.categories, event.previousIndex, event.currentIndex);
    this.postsService.updateCategories(this.postsService.categories).subscribe(res => {
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -42,6 +42,10 @@ $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 {
+  border-radius: 24px !important
+}
+
 // Light theme
 $light-primary: mat-palette($mat-grey, 200, 500, 300);
 $light-accent: mat-palette($mat-brown, 200);
@@ -50,7 +54,7 @@ $light-warn: mat-palette($mat-deep-orange, 200);
 $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

 .light-theme {
-  @include angular-material-theme($light-theme)
+  @include angular-material-theme($light-theme);
 }

 .no-outline {