YoutubeDL-Material/src/app/components/downloads/downloads.component.ts

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { PostsService } from 'app/posts.services';
import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
import { Router } from '@angular/router';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-downloads',
  templateUrl: './downloads.component.html',
  styleUrls: ['./downloads.component.scss'],
  animations: [
    // nice stagger effect when showing existing elements
    trigger('list', [
      transition(':enter', [
        // child animation selector + stagger
        query('@items',
          stagger(100, animateChild()), { optional: true }
        )
      ]),
    ]),
    trigger('items', [
      // cubic-bezier for a tiny bouncing feel
      transition(':enter', [
        style({ transform: 'scale(0.5)', opacity: 0 }),
        animate('500ms cubic-bezier(.8,-0.6,0.2,1.5)',
          style({ transform: 'scale(1)', opacity: 1 }))
      ]),
      transition(':leave', [
        style({ transform: 'scale(1)', opacity: 1, height: '*' }),
        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
          style({ transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px' }))
      ]),
    ])
  ],
})
export class DownloadsComponent implements OnInit, OnDestroy {

  downloads_check_interval = 1000;
  downloads = [];
  finished_downloads = [];
  interval_id = null;

  keys = Object.keys;

  valid_sessions_length = 0;

  STEP_INDEX_TO_LABEL = {
      0: 'Creating download',
      1: 'Getting info',
      2: 'Downloading file',
      3: 'Complete'
  }

  displayedColumns: string[] = ['date', 'title', 'stage', 'progress', 'actions'];
  dataSource = null; // new MatTableDataSource<Download>();

  @ViewChild(MatPaginator) paginator: MatPaginator;

  sort_downloads = (a, b) => {
    const result = b.timestamp_start - a.timestamp_start;
    return result;
  }

  constructor(public postsService: PostsService, private router: Router) { }

  ngOnInit(): void {
    if (this.postsService.initialized) {
      this.getCurrentDownloadsRecurring();
    } else {
      this.postsService.service_initialized.subscribe(init => {
        if (init) {
          this.getCurrentDownloadsRecurring();
        }
      });
    }
  }

  getCurrentDownloadsRecurring() {
    if (!this.postsService.config['Extra']['enable_downloads_manager']) {
      this.router.navigate(['/home']);
      return;
    }
    this.getCurrentDownloads();
    this.interval_id = setInterval(() => {
      this.getCurrentDownloads();
    }, this.downloads_check_interval);
  }

  ngOnDestroy(): void {
    if (this.interval_id) { clearInterval(this.interval_id) }
  }

  getCurrentDownloads(): void {
    this.postsService.getCurrentDownloads().subscribe(res => {
      if (res['downloads'] !== null 
        && res['downloads'] !== undefined
        && JSON.stringify(this.downloads) !== JSON.stringify(res['downloads'])) {
          this.downloads = res['downloads'];
          this.downloads.sort(this.sort_downloads);
          this.dataSource = new MatTableDataSource<Download>(this.downloads);
          this.dataSource.paginator = this.paginator;
      } else {
        // failed to get downloads
      }
    });
  }

  clearFinishedDownloads(): void {
    this.postsService.clearFinishedDownloads().subscribe(res => {
      if (!res['success']) {
        this.postsService.openSnackBar('Failed to clear finished downloads!');
      }
    });
  }

  pauseDownload(download_uid) {
    this.postsService.pauseDownload(download_uid).subscribe(res => {
      if (!res['success']) {
        this.postsService.openSnackBar('Failed to pause download! See server logs for more info.');
      }
    });
  }

  resumeDownload(download_uid) {
    this.postsService.resumeDownload(download_uid).subscribe(res => {
      if (!res['success']) {
        this.postsService.openSnackBar('Failed to resume download! See server logs for more info.');
      }
    });
  }

  restartDownload(download_uid) {
    this.postsService.restartDownload(download_uid).subscribe(res => {
      if (!res['success']) {
        this.postsService.openSnackBar('Failed to restart download! See server logs for more info.');
      }
    });
  }

  cancelDownload(download_uid) {
    this.postsService.cancelDownload(download_uid).subscribe(res => {
      if (!res['success']) {
        this.postsService.openSnackBar('Failed to cancel download! See server logs for more info.');
      }
    });
  }

  clearDownload(download_uid) {
    this.postsService.clearDownload(download_uid).subscribe(res => {
      if (!res['success']) {
        this.postsService.openSnackBar('Failed to pause download! See server logs for more info.');
      }
    });
  }

  watchContent(download) {
    const container = download['container'];
    localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
    const is_playlist = container['uids']; // hacky, TODO: fix
    if (is_playlist) {
      this.router.navigate(['/player', {playlist_id: container['id'], type: download['type']}]);
    } else {
      this.router.navigate(['/player', {type: download['type'], uid: container['uid']}]);
    }
  }

}

export interface Download {
  timestamp_start: number;
  title: string;
  step_index: number;
  progress: string;
}