Implemented cookies upload dialog and the ability to "enable cookies" to hopefully circumvent 429 errors

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, LOCALE_ID } from '@angular/core';
 import { registerLocaleData, CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -25,21 +25,21 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTabsModule } from '@angular/material/tabs';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatSortModule} from '@angular/material/sort';
-import {MatTableModule} from '@angular/material/table';
-import {DragDropModule} from '@angular/cdk/drag-drop';
-import {ClipboardModule} from '@angular/cdk/clipboard';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
 import { FileCardComponent } from './file-card/file-card.component';
-import {RouterModule} from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { AppRoutingModule } from './app-routing.module';
 import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
-import {VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule} from 'ngx-videogular';
+import { VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule } from 'ngx-videogular';
 import { InputDialogComponent } from './input-dialog/input-dialog.component';
 import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image';
 import { audioFilesMouseHovering, videoFilesMouseHovering, audioFilesOpened, videoFilesOpened } from './main/main.component';
@@ -52,7 +52,8 @@ import { SubscriptionFileCardComponent } from './subscription/subscription-file-
 import { SubscriptionInfoDialogComponent } from './dialogs/subscription-info-dialog/subscription-info-dialog.component';
 import { SettingsComponent } from './settings/settings.component';
 import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
-import {MatChipsModule} from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { NgxFileDropModule } from 'ngx-file-drop';
 
 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
@@ -69,6 +70,8 @@ import { ModifyUsersComponent } from './components/modify-users/modify-users.com
 import { AddUserDialogComponent } from './dialogs/add-user-dialog/add-user-dialog.component';
 import { ManageUserComponent } from './components/manage-user/manage-user.component';
 import { ManageRoleComponent } from './components/manage-role/manage-role.component';
+import { CookiesUploaderDialogComponent } from './dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component';
+
 registerLocaleData(es, 'es');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -105,7 +108,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     ModifyUsersComponent,
     AddUserDialogComponent,
     ManageUserComponent,
-    ManageRoleComponent
+    ManageRoleComponent,
+    CookiesUploaderDialogComponent
   ],
   imports: [
     CommonModule,
@@ -145,6 +149,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatChipsModule,
     DragDropModule,
     ClipboardModule,
+    NgxFileDropModule,
     VgCoreModule,
     VgControlsModule,
     VgOverlayPlayModule,

src/app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component.html

@@ -0,0 +1,40 @@
+<h4 mat-dialog-title i18n="Cookies uploader dialog title">Upload new cookies</h4>
+
+<mat-dialog-content>
+    <div>
+        <div class="center">
+            <ngx-file-drop [multiple]="false" accept=".txt" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" 
+            (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+                <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                    <div>
+                        <div>
+                            <ng-container i18n="Drag and Drop">Drag and Drop</ng-container>
+                        </div>
+                        <div style="margin-top: 6px;">
+                            <button mat-stroked-button (click)="openFileSelector()">Browse Files</button>
+                        </div>
+                    </div>
+                </ng-template>
+            </ngx-file-drop>
+            <div style="margin-top: 15px;">
+                <p style="font-size: 14px;" i18n="Cookies upload warning">NOTE: Uploading new cookies will overrride your previous cookies. Also note that cookies are instance-wide, not per-user.</p>
+            </div>
+            <div style="margin-top: 10px;">
+                <table class="table">
+                    <tbody class="upload-name-style">
+                        <tr *ngFor="let item of files; let i=index">
+                            <td style="vertical-align: middle;">
+                                <strong>{{ item.relativePath }}</strong>
+                            </td>
+                            <td>
+                                <button [disabled]="uploading || uploaded" (click)="uploadFile()" style="float: right" matTooltip="Upload" mat-mini-fab><mat-icon>publish</mat-icon><mat-spinner *ngIf="uploading" class="spinner" [diameter]="38"></mat-spinner></button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions><button style="margin-bottom: 5px;" mat-dialog-close mat-stroked-button><ng-container i18n="Close">Close</ng-container></button></mat-dialog-actions>

src/app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component.scss

@@ -0,0 +1,5 @@
+.spinner {
+    bottom: 1px;
+    left: 0.5px;
+    position: absolute;
+}

src/app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CookiesUploaderDialogComponent } from './cookies-uploader-dialog.component';
+
+describe('CookiesUploaderDialogComponent', () => {
+  let component: CookiesUploaderDialogComponent;
+  let fixture: ComponentFixture<CookiesUploaderDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CookiesUploaderDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CookiesUploaderDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-cookies-uploader-dialog',
+  templateUrl: './cookies-uploader-dialog.component.html',
+  styleUrls: ['./cookies-uploader-dialog.component.scss']
+})
+export class CookiesUploaderDialogComponent implements OnInit {
+  public files: NgxFileDropEntry[] = [];
+
+  uploading = false;
+  uploaded = false;
+
+  constructor(private postsService: PostsService) { }
+
+  ngOnInit(): void {
+
+  }
+
+  public dropped(files: NgxFileDropEntry[]) {
+    this.files = files;
+    this.uploading = false;
+    this.uploaded = false;
+  }
+
+  uploadFile() {
+    this.uploading = true;
+    for (const droppedFile of this.files) {
+      // Is it a file?
+      if (droppedFile.fileEntry.isFile) {
+        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+        fileEntry.file((file: File) => {
+          // You could upload it like this:
+          const formData = new FormData()
+          formData.append('cookies', file, droppedFile.relativePath);
+          this.postsService.uploadCookiesFile(formData).subscribe(res => {
+            this.uploading = false;
+            if (res['success']) {
+              this.uploaded = true;
+              this.postsService.openSnackBar('Cookies successfully uploaded!');
+            }
+          }, err => {
+            this.uploading = false;
+          });
+        });
+      }
+    }
+  }
+
+  public fileOver(event) {
+  }
+
+  public fileLeave(event) {
+  }
+}

src/app/posts.services.ts

@@ -218,6 +218,10 @@ export class PostsService implements CanActivate {
                                                           {responseType: 'blob', params: this.httpOptions.params});
     }
 
+    uploadCookiesFile(fileFormData) {
+        return this.http.post(this.path + 'uploadCookies', fileFormData, this.httpOptions);
+    }
+
     downloadArchive(sub) {
         return this.http.post(this.path + 'downloadArchive', {sub: sub}, {responseType: 'blob', params: this.httpOptions.params});
     }

src/app/settings/settings.component.html

@@ -287,6 +287,15 @@
                 </div>
             </div>
             <mat-divider></mat-divider>
+            <div *ngIf="new_config" class="container-fluid">
+                <div class="row">
+                    <div class="col-12 mt-4">
+                        <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">
                 <app-updater></app-updater>
             </div>

src/app/settings/settings.component.scss

@@ -24,4 +24,10 @@
 
 .text-field {
     min-width: 30%;
+}
+
+.checkbox-button {
+    margin-left: 15px;
+    margin-bottom: 12px;
+    bottom: 4px;
 }

src/app/settings/settings.component.ts

@@ -8,6 +8,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ArgModifierDialogComponent } from 'app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
 import { CURRENT_VERSION } from 'app/consts';
 import { MatCheckboxChange } from '@angular/material/checkbox';
+import { CookiesUploaderDialogComponent } from 'app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component';
 
 @Component({
   selector: 'app-settings',
@@ -156,6 +157,12 @@ export class SettingsComponent implements OnInit {
     });
   }
 
+  openCookiesUploaderDialog() {
+    this.dialog.open(CookiesUploaderDialogComponent, {
+      width: '65vw'
+    });
+  }
+
   // snackbar helper
   public openSnackBar(message: string, action: string = '') {
     this.snackBar.open(message, action, {