Added progress bar to file downloads

Added two new API calls, to update the server to a particular version and to get the updater status

You can now update through the UI, and a status dialog displays after

src/app/app.module.ts

@@ -52,6 +52,8 @@ import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
 import { VideoInfoDialogComponent } from './dialogs/video-info-dialog/video-info-dialog.component';
 import { ArgModifierDialogComponent, HighlightPipe } from './dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
+import { UpdaterComponent } from './updater/updater.component';
+import { UpdateProgressDialogComponent } from './dialogs/update-progress-dialog/update-progress-dialog.component';
 registerLocaleData(es, 'es');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -77,7 +79,9 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     AboutDialogComponent,
     VideoInfoDialogComponent,
     ArgModifierDialogComponent,
-    HighlightPipe
+    HighlightPipe,
+    UpdaterComponent,
+    UpdateProgressDialogComponent
   ],
   imports: [
     CommonModule,

src/app/consts.ts

@@ -0,0 +1 @@
+export const CURRENT_VERSION = 'v3.5';

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

@@ -18,7 +18,7 @@
         <h5 style="margin-top: 10px;">Installation details:</h5>
         <p>
             <ng-container i18n="Version label">Installed version:</ng-container>&nbsp;{{current_version_tag}} - <span style="display: inline-block" *ngIf="checking_for_updates"><mat-spinner class="version-spinner" [diameter]="22"></mat-spinner>&nbsp;<ng-container i18n="Checking for updates text">Checking for updates...</ng-container></span>
-            <mat-icon *ngIf="!checking_for_updates" class="version-checked-icon">done</mat-icon>&nbsp;&nbsp;<a *ngIf="!checking_for_updates && latestGithubRelease['tag_name'] !== current_version_tag" [href]="latestUpdateLink" target="_blank"><ng-container i18n="View latest update">Update available</ng-container> - {{latestGithubRelease['tag_name']}}</a>
+            <mat-icon *ngIf="!checking_for_updates" class="version-checked-icon">done</mat-icon>&nbsp;&nbsp;<a *ngIf="!checking_for_updates && latestGithubRelease['tag_name'] !== current_version_tag" [href]="latestUpdateLink" target="_blank"><ng-container i18n="View latest update">Update available</ng-container> - {{latestGithubRelease['tag_name']}}</a>. <ng-container i18n="Update through settings menu hint">You can update from the settings menu.</ng-container>
             <span *ngIf="!checking_for_updates && latestGithubRelease['tag_name'] === current_version_tag">You are up to date.</span>
         </p>
         <p>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PostsService } from 'app/posts.services';
+import { CURRENT_VERSION } from 'app/consts';
 
 @Component({
   selector: 'app-about-dialog',
@@ -14,7 +15,7 @@ export class AboutDialogComponent implements OnInit {
   latestGithubRelease = null;
   checking_for_updates = true;
 
-  current_version_tag = 'v3.5.1';
+  current_version_tag = CURRENT_VERSION;
 
   constructor(private postsService: PostsService) { }
 

src/app/dialogs/update-progress-dialog/update-progress-dialog.component.html

@@ -0,0 +1,18 @@
+<h4 i18n="Update progress dialog title" mat-dialog-title>Updater</h4>
+
+<mat-dialog-content>
+    <div *ngIf="updateStatus">
+        <div style="margin-bottom: 8px;">
+            <h6 *ngIf="updateStatus['updating']">Update in progress</h6>
+            <h6 *ngIf="!updateStatus['updating'] && updateStatus['error']">Update failed</h6>
+            <h6 *ngIf="!updateStatus['updating'] && !updateStatus['error']">Update succeeded!</h6>
+        </div>
+        <mat-progress-bar *ngIf="updateStatus['updating']" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="!updateStatus['updating']" mode="determinate" value="100"></mat-progress-bar>
+        <p style="margin-top: 4px; font-size: 13px;" *ngIf="updateStatus['details']">{{updateStatus['details']}}</p>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close><ng-container i18n="Close update progress dialog">Close</ng-container></button>
+</mat-dialog-actions>

src/app/dialogs/update-progress-dialog/update-progress-dialog.component.spec.ts

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

src/app/dialogs/update-progress-dialog/update-progress-dialog.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-update-progress-dialog',
+  templateUrl: './update-progress-dialog.component.html',
+  styleUrls: ['./update-progress-dialog.component.scss']
+})
+export class UpdateProgressDialogComponent implements OnInit {
+
+  updateStatus = null;
+  updateInterval = 250;
+  errored = false;
+
+  constructor(private postsService: PostsService, private snackBar: MatSnackBar) { }
+
+  ngOnInit(): void {
+    this.getUpdateProgress();
+    setInterval(() => {
+      this.getUpdateProgress();
+    }, 250);
+  }
+
+  getUpdateProgress() {
+    this.postsService.getUpdaterStatus().subscribe(res => {
+      this.updateStatus = res;
+      if (!this.updateStatus) {
+        // update complete?
+        console.log('Update complete? or not started');
+      }
+      if (this.updateStatus && this.updateStatus['error']) {
+        this.openSnackBar('Update failed. Check logs for more details.');
+      }
+    });
+  }
+
+  public openSnackBar(message: string, action: string = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}

src/app/posts.services.ts

@@ -185,14 +185,23 @@ export class PostsService {
     }
 
     // updates the server to the latest version
-    updateServer() {
-        return this.http.post(this.path + 'updateServer', {});
+    updateServer(tag) {
+        return this.http.post(this.path + 'updateServer', {tag: tag});
+    }
+
+    getUpdaterStatus() {
+        return this.http.get(this.path + 'updaterStatus');
     }
 
     // gets tag of the latest version of youtubedl-material
     getLatestGithubRelease() {
         return this.http.get('https://api.github.com/repos/tzahi12345/youtubedl-material/releases/latest');
     }
+
+    getAvailableRelease() {
+        return this.http.get('https://api.github.com/repos/tzahi12345/youtubedl-material/releases');
+    }
+
 }
 
 

src/app/settings/settings.component.html

@@ -247,6 +247,18 @@
     </div>
 </mat-expansion-panel>
 
+<!-- Version Control -->
+<mat-expansion-panel class="settings-expansion-panel mat-elevation-z4">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Version settings title">Version</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <app-updater></app-updater>
+    </div>
+</mat-expansion-panel>
+
 
 <!-- Advanced -->
 <mat-expansion-panel class="settings-expansion-panel mat-elevation-z4">

src/app/settings/settings.component.ts

@@ -6,6 +6,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import {DomSanitizer} from '@angular/platform-browser';
 import { MatDialog } from '@angular/material/dialog';
 import { ArgModifierDialogComponent } from 'app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
+import { CURRENT_VERSION } from 'app/consts';
 
 @Component({
   selector: 'app-settings',
@@ -24,6 +25,9 @@ export class SettingsComponent implements OnInit {
 
   _settingsSame = true;
 
+  latestGithubRelease = null;
+  CURRENT_VERSION = CURRENT_VERSION
+
   get settingsAreTheSame() {
     this._settingsSame = this.settingsSame()
     return this._settingsSame;
@@ -40,6 +44,8 @@ export class SettingsComponent implements OnInit {
     this.getConfig();
 
     this.generated_bookmarklet_code = this.sanitizer.bypassSecurityTrustUrl(this.generateBookmarkletCode());
+
+    this.getLatestGithubRelease();
   }
 
   getConfig() {
@@ -129,6 +135,12 @@ export class SettingsComponent implements OnInit {
    });
  }
 
+ getLatestGithubRelease() {
+    this.postsService.getLatestGithubRelease().subscribe(res => {
+      this.latestGithubRelease = res;
+    });
+  }
+
   // snackbar helper
   public openSnackBar(message: string, action: string = '') {
     this.snackBar.open(message, action, {

src/app/updater/updater.component.html

@@ -0,0 +1,18 @@
+<div style="display: block">
+    <div style="display: inline-block">
+        <ng-container i18n="Select a version">Select a version:</ng-container>
+    </div>
+    <div *ngIf="availableVersions" style="display: inline-block; margin-left: 15px;">
+        <mat-form-field>
+        <mat-select [(ngModel)]="selectedVersion">
+            <mat-option *ngFor="let version of availableVersionsFiltered" [value]="version['tag_name']">
+                {{version['tag_name'] + (version === latestStableRelease ? ' - Latest Stable' : '') + (version['tag_name'] === CURRENT_VERSION ? ' - Current Version' : '')}}
+            </mat-option>
+        </mat-select>
+        </mat-form-field>
+    </div>
+    <div *ngIf="selectedVersion && selectedVersion !== CURRENT_VERSION" style="display: inline-block; margin-left: 15px;">
+        <button (click)="updateServer()" color="accent" mat-raised-button><mat-icon>update</mat-icon>&nbsp;&nbsp;
+            <ng-container *ngIf="selectedVersion > CURRENT_VERSION">Upgrade to</ng-container><ng-container *ngIf="selectedVersion < CURRENT_VERSION">Downgrade to</ng-container>&nbsp;{{selectedVersion}}</button>
+    </div>
+</div>

src/app/updater/updater.component.spec.ts

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

src/app/updater/updater.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { CURRENT_VERSION } from 'app/consts';
+import { MatDialog } from '@angular/material/dialog';
+import { UpdateProgressDialogComponent } from 'app/dialogs/update-progress-dialog/update-progress-dialog.component';
+@Component({
+  selector: 'app-updater',
+  templateUrl: './updater.component.html',
+  styleUrls: ['./updater.component.scss']
+})
+export class UpdaterComponent implements OnInit {
+
+  availableVersions = null;
+  availableVersionsFiltered = [];
+  versionsShowLimit = 5;
+  latestStableRelease = null;
+  selectedVersion = null;
+  CURRENT_VERSION = CURRENT_VERSION;
+
+  constructor(private postsService: PostsService, private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.getAvailableVersions();
+  }
+
+  updateServer() {
+    this.postsService.updateServer(this.selectedVersion).subscribe(res => {
+      if (res['success']) {
+        this.openUpdateProgressDialog();
+      }
+    });
+  }
+
+  getAvailableVersions() {
+    this.availableVersionsFiltered = [];
+    this.postsService.getAvailableRelease().subscribe(res => {
+      this.availableVersions = res;
+      for (let i = 0; i < this.availableVersions.length; i++) {
+        const currentVersion = this.availableVersions[i];
+        // if a stable release has not been found and the version is not "rc" (meaning it's stable) then set it as the stable release
+        if (!this.latestStableRelease && !currentVersion.tag_name.includes('rc')) {
+          this.latestStableRelease = currentVersion;
+          this.selectedVersion = this.latestStableRelease.tag_name;
+        }
+
+        if (this.latestStableRelease && i >= this.versionsShowLimit) {
+          break;
+        }
+
+        this.availableVersionsFiltered.push(currentVersion);
+      }
+    });
+  }
+
+  openUpdateProgressDialog() {
+    this.dialog.open(UpdateProgressDialogComponent, {
+      minWidth: '300px',
+      minHeight: '200px'
+    });
+  }
+
+}