Sidepanel mode and card size is now configurable and can be set from the about dialog (temp location)

src/app/app.component.html

@@ -38,7 +38,7 @@
     </div>
     <div class="sidenav-container" style="height: calc(100% - 64px)">
         <mat-sidenav-container style="height: 100%">
-            <mat-sidenav mode="side" #sidenav>
+            <mat-sidenav [mode]="postsService.sidepanel_mode" #sidenav>
                 <mat-nav-list>
                     <a *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || postsService.isLoggedIn)" mat-list-item (click)="sidenav.close()" 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>

src/app/components/custom-playlists/custom-playlists.component.html

@@ -1,8 +1,8 @@
 <div *ngIf="playlists && playlists.length > 0">
     <div class="container">
         <div class="row justify-content-center">
-            <div *ngFor="let playlist of playlists; let i = index" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+            <div *ngFor="let playlist of playlists; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
-                <app-unified-file-card [index]="i" [card_size]="card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)"></app-unified-file-card>
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)"></app-unified-file-card>
             </div>
         </div>
     </div>

src/app/components/custom-playlists/custom-playlists.component.ts

@@ -14,10 +14,9 @@ export class CustomPlaylistsComponent implements OnInit {
 
   playlists = null;
   playlists_received = false;
-  card_size = 'medium';
   downloading_content = {'video': {}, 'audio': {}};
 
-  constructor(private postsService: PostsService, private router: Router, private dialog: MatDialog) { }
+  constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog) { }
 
   ngOnInit(): void {
     this.postsService.service_initialized.subscribe(init => {

src/app/components/recent-videos/recent-videos.component.html

@@ -26,8 +26,8 @@
 <div>
     <div class="container">
         <div class="row justify-content-center">
-            <div *ngFor="let file of filtered_files; let i = index" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+            <div *ngFor="let file of filtered_files; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
-                <app-unified-file-card [index]="i" [card_size]="card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
             </div>
         </div>
     </div>

src/app/components/recent-videos/recent-videos.component.ts

@@ -13,7 +13,6 @@ export class RecentVideosComponent implements OnInit {
   subscription_files_received = false;
   files: any[] = null;
   filtered_files: any[] = null;
-  card_size = 'medium';
   downloading_content = {'video': {}, 'audio': {}};
   search_mode = false;
   search_text = '';
@@ -48,7 +47,7 @@ export class RecentVideosComponent implements OnInit {
   };
   filterProperty = this.filterProperties['upload_date'];
 
-  constructor(private postsService: PostsService, private router: Router) { }
+  constructor(public postsService: PostsService, private router: Router) { }
 
   ngOnInit(): void {
     this.postsService.service_initialized.subscribe(init => {

src/app/dialogs/about-dialog/about-dialog.component.html

@@ -24,6 +24,34 @@
         <p>
             <ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container>
         </p>
+        <mat-divider></mat-divider>
+        <div style="margin-top: 10px;">
+            <h5>Personal settings:</h5>
+            <mat-form-field placeholder="Sidepanel mode">
+                <mat-select [(ngModel)]="sidepanel_mode" (selectionChange)="sidePanelModeChanged($event.value)">
+                    <mat-option value="over">
+                        Over
+                    </mat-option>
+                    <mat-option value="side">
+                        Side
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <br/>
+            <mat-form-field placeholder="Card size">
+                <mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
+                    <mat-option value="large" [disabled]="true">
+                        Large
+                    </mat-option>
+                    <mat-option value="medium">
+                        Medium
+                    </mat-option>
+                    <mat-option value="small">
+                        Small
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
     </div>
 </mat-dialog-content>
 

src/app/dialogs/about-dialog/about-dialog.component.ts

@@ -16,11 +16,13 @@ export class AboutDialogComponent implements OnInit {
   checking_for_updates = true;
 
   current_version_tag = CURRENT_VERSION;
+  sidepanel_mode = this.postsService.sidepanel_mode;
+  card_size = this.postsService.card_size;
 
   constructor(private postsService: PostsService) { }
 
   ngOnInit(): void {
-    this.getLatestGithubRelease()
+    this.getLatestGithubRelease();
   }
 
   getLatestGithubRelease() {
@@ -30,4 +32,14 @@ export class AboutDialogComponent implements OnInit {
     });
   }
 
+  sidePanelModeChanged(new_mode) {
+    localStorage.setItem('sidepanel_mode', new_mode);
+    this.postsService.sidepanel_mode = new_mode;
+  }
+
+  cardSizeOptionChanged(new_size) {
+    localStorage.setItem('card_size', new_size);
+    this.postsService.card_size = new_size;
+  }
+
 }

src/app/posts.services.ts

@@ -22,6 +22,8 @@ export class PostsService implements CanActivate {
     handShakeComplete = false;
     THEMES_CONFIG = THEMES_CONFIG;
     theme;
+    card_size = 'medium';
+    sidepanel_mode = 'over';
     settings_changed = new BehaviorSubject<boolean>(false);
     auth_token = '4241b401-7236-493e-92b5-b72696b9d853';
     session_id = null;
@@ -102,6 +104,14 @@ export class PostsService implements CanActivate {
         this.reload_config.subscribe(yes_reload => {
             if (yes_reload) { this.reloadConfig(); }
         });
+
+        if (localStorage.getItem('sidepanel_mode')) {
+            this.sidepanel_mode = localStorage.getItem('sidepanel_mode');
+        }
+
+        if (localStorage.getItem('card_size')) {
+            this.card_size = localStorage.getItem('card_size');
+        }
     }
     canActivate(route, state): Promise<boolean> {
         return new Promise(resolve => {