Migrated playlist and subscription (per video and sub-wide) video downloading functionality to new schema

Migrated modify playlist component to new schema

Moved wait function and playlist generation function(s) to utils
- added tests for zip generation

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

@@ -97,7 +97,7 @@ export class CustomPlaylistsComponent implements OnInit {
     const index = args.index;
     const dialogRef = this.dialog.open(ModifyPlaylistComponent, {
       data: {
-        playlist: playlist,
+        playlist_id: playlist.id,
         width: '65vw'
       }
     });

src/app/create-playlist/create-playlist.component.html

@@ -20,8 +20,8 @@
                 <mat-label *ngIf="type === 'video'"><ng-container i18n="Videos title">Videos</ng-container></mat-label>
                 <mat-select [formControl]="filesSelect" multiple required aria-required>
                     <ng-container *ngIf="filesToSelectFrom"><mat-option *ngFor="let file of filesToSelectFrom" [value]="file.uid">{{file.id}}</mat-option></ng-container>
-                    <ng-container *ngIf="audiosToSelectFrom && type === 'audio'"><mat-option *ngFor="let file of audiosToSelectFrom" [value]="file.id">{{file.id}}</mat-option></ng-container>
-                    <ng-container *ngIf="videosToSelectFrom && type === 'video'"><mat-option *ngFor="let file of videosToSelectFrom" [value]="file.id">{{file.id}}</mat-option></ng-container>
+                    <ng-container *ngIf="audiosToSelectFrom && type === 'audio'"><mat-option *ngFor="let file of audiosToSelectFrom" [value]="file.uid">{{file.id}}</mat-option></ng-container>
+                    <ng-container *ngIf="videosToSelectFrom && type === 'video'"><mat-option *ngFor="let file of videosToSelectFrom" [value]="file.uid">{{file.id}}</mat-option></ng-container>
                 </mat-select>
             </mat-form-field>
             <!-- No videos available -->

src/app/dialogs/modify-playlist/modify-playlist.component.html

@@ -1,38 +1,40 @@
 <h4 mat-dialog-title><ng-container i18n="Modify playlist dialog title">Modify playlist</ng-container></h4>
 
 <mat-dialog-content>
-    <!-- Playlist info -->
-    <div>
-        <mat-form-field color="accent">
-            <input matInput placeholder="Name" i18n-placeholder="Name" [(ngModel)]="playlist.name">
-        </mat-form-field>
-    </div>
-
-    <div style="margin-bottom: 10px; height: 40px;">
-        <div style="float: left">
-            <span *ngIf="reverse_order === false" i18n="Normal order">Normal order&nbsp;</span>
-            <span *ngIf="reverse_order === true" i18n="Reverse order">Reverse order&nbsp;</span>
-            <button (click)="togglePlaylistOrder()" mat-icon-button><mat-icon>{{!reverse_order ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+    <div *ngIf="playlist">
+        <!-- Playlist info -->
+        <div>
+            <mat-form-field color="accent">
+                <input matInput placeholder="Name" i18n-placeholder="Name" [(ngModel)]="playlist.name">
+            </mat-form-field>
         </div>
 
-        <div style="float: right">
-            <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu"><ng-container i18n="Add content">Add content</ng-container></button>
-        </div>
-    </div>
+        <div style="margin-bottom: 10px; height: 40px;">
+            <div style="float: left">
+                <span *ngIf="reverse_order === false" i18n="Normal order">Normal order&nbsp;</span>
+                <span *ngIf="reverse_order === true" i18n="Reverse order">Reverse order&nbsp;</span>
+                <button (click)="togglePlaylistOrder()" mat-icon-button><mat-icon>{{!reverse_order ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+            </div>
 
-    <!-- Playlist order -->
-    <mat-button-toggle-group class="media-list" cdkDropList (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-        <!-- The following for loop can be optimized but it requires a pipe https://stackoverflow.com/a/35703364/8088021 -->
-        <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of (reverse_order ? playlist.fileNames.slice().reverse() : playlist.fileNames); let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
-    </mat-button-toggle-group>
-    
-    <mat-menu #menu="matMenu">
-        <button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file}}</button>
-    </mat-menu>
+            <div style="float: right">
+                <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu"><ng-container i18n="Add content">Add content</ng-container></button>
+            </div>
+        </div>
+
+        <!-- Playlist order -->
+        <mat-button-toggle-group class="media-list" cdkDropList (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
+            <!-- The following for loop can be optimized but it requires a pipe https://stackoverflow.com/a/35703364/8088021 -->
+            <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of (reverse_order ? playlist_file_objs.slice().reverse() : playlist_file_objs); let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item.title}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
+        </mat-button-toggle-group>
+        
+        <mat-menu #menu="matMenu">
+            <button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file.title}}</button>
+        </mat-menu>
+    </div>
 
 </mat-dialog-content>
 
 <mat-dialog-actions>
     <!-- Save -->
-    <button [disabled]="!playlistChanged()" (click)="updatePlaylist()" [disabled]="playlistChanged()" mat-raised-button color="accent"><ng-container i18n="Save">Save</ng-container></button>
+    <button [disabled]="!playlist || !playlistChanged()" (click)="updatePlaylist()" mat-raised-button color="accent"><ng-container i18n="Save">Save</ng-container></button>
 </mat-dialog-actions>

src/app/dialogs/modify-playlist/modify-playlist.component.ts

@@ -10,8 +10,12 @@ import { PostsService } from 'app/posts.services';
 })
 export class ModifyPlaylistComponent implements OnInit {
 
+  playlist_id = null;
+
   original_playlist = null;
   playlist = null;
+  playlist_file_objs = null;
+
   available_files = [];
   all_files = [];
   playlist_updated = false;
@@ -23,9 +27,8 @@ export class ModifyPlaylistComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.data) {
-      this.playlist = JSON.parse(JSON.stringify(this.data.playlist));
-      this.original_playlist = JSON.parse(JSON.stringify(this.data.playlist));
-      this.getFiles();
+      this.playlist_id = this.data.playlist_id;
+      this.getPlaylist();
     }
 
     this.reverse_order = localStorage.getItem('default_playlist_order_reversed') === 'true';
@@ -44,11 +47,12 @@ export class ModifyPlaylistComponent implements OnInit {
   }
 
   processFiles(new_files = null) {
-    if (new_files) { this.all_files = new_files.map(file => file.id); }
-    this.available_files = this.all_files.filter(e => !this.playlist.fileNames.includes(e))
+    if (new_files) { this.all_files = new_files; }
+    this.available_files = this.all_files.filter(e => !this.playlist_file_objs.includes(e))
   }
 
   updatePlaylist() {
+    this.playlist['uids'] = this.playlist_file_objs.map(playlist_file_obj => playlist_file_obj['uid'])
     this.postsService.updatePlaylist(this.playlist).subscribe(res => {
       this.playlist_updated = true;
       this.postsService.openSnackBar('Playlist updated successfully.');
@@ -61,24 +65,26 @@ export class ModifyPlaylistComponent implements OnInit {
   }
 
   getPlaylist() {
-    this.postsService.getPlaylist(this.playlist.id, this.playlist.type, null).subscribe(res => {
+    this.postsService.getPlaylist(this.playlist_id, null, true).subscribe(res => {
       if (res['playlist']) {
         this.playlist = res['playlist'];
+        this.playlist_file_objs = res['file_objs'];
         this.original_playlist = JSON.parse(JSON.stringify(this.playlist));
+        this.getFiles();
       }
     });
   }
 
   addContent(file) {
-    this.playlist.fileNames.push(file);
+    this.playlist_file_objs.push(file);
     this.processFiles();
   }
 
   removeContent(index) {
     if (this.reverse_order) {
-      index = this.playlist.fileNames.length - 1 - index;
+      index = this.playlist_file_objs.length - 1 - index;
     }
-    this.playlist.fileNames.splice(index, 1);
+    this.playlist_file_objs.splice(index, 1);
     this.processFiles();
   }
 
@@ -89,10 +95,10 @@ export class ModifyPlaylistComponent implements OnInit {
 
   drop(event: CdkDragDrop<string[]>) {
     if (this.reverse_order) {
-      event.previousIndex = this.playlist.fileNames.length - 1 - event.previousIndex;
-      event.currentIndex = this.playlist.fileNames.length - 1 - event.currentIndex;
+      event.previousIndex = this.playlist_file_objs.length - 1 - event.previousIndex;
+      event.currentIndex = this.playlist_file_objs.length - 1 - event.currentIndex;
     }
-    moveItemInArray(this.playlist.fileNames, event.previousIndex, event.currentIndex);
+    moveItemInArray(this.playlist_file_objs, event.previousIndex, event.currentIndex);
   }
 
 }

src/app/file-card/file-card.component.ts

@@ -84,7 +84,7 @@ export class FileCardComponent implements OnInit {
   editPlaylistDialog() {
     const dialogRef = this.dialog.open(ModifyPlaylistComponent, {
       data: {
-        playlist: this.playlist,
+        playlist_id: this.playlist.id,
         width: '65vw'
       }
     });

src/app/main/main.component.ts

@@ -657,7 +657,7 @@ export class MainComponent implements OnInit {
   }
 
   downloadPlaylist(playlist) {
-    this.postsService.downloadFileFromServer(playlist.id, null, true).subscribe(res => {
+    this.postsService.downloadPlaylistFromServer(playlist.id).subscribe(res => {
       if (playlist.id) { this.downloading_content[playlist.type][playlist.id] = false };
       const blob: Blob = res;
       saveAs(blob, playlist.name + '.zip');

src/app/player/player.component.ts

@@ -187,6 +187,7 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
     this.postsService.getPlaylist(this.playlist_id, this.uuid, true).subscribe(res => {
       if (res['playlist']) {
         this.db_playlist = res['playlist'];
+        this.db_playlist['file_objs'] = res['file_objs'];
         this.uids = this.db_playlist.uids;
         this.type = res['type'];
         this.show_player = true;
@@ -316,7 +317,7 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
 
     const zipName = fileNames[0].split(' ')[0] + fileNames[1].split(' ')[0];
     this.downloading = true;
-    this.postsService.downloadFileFromServer(this.playlist_id, this.uuid, true).subscribe(res => {
+    this.postsService.downloadPlaylistFromServer(this.playlist_id, this.uuid).subscribe(res => {
       this.downloading = false;
       const blob: Blob = res;
       saveAs(blob, zipName + '.zip');
@@ -330,7 +331,7 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
     const ext = (this.type === 'audio') ? '.mp3' : '.mp4';
     const filename = this.playlist[0].title;
     this.downloading = true;
-    this.postsService.downloadFileFromServer(this.uid, this.uuid, false).subscribe(res => {
+    this.postsService.downloadFileFromServer(this.uid, this.uuid, this.sub_id).subscribe(res => {
       this.downloading = false;
       const blob: Blob = res;
       saveAs(blob, filename + ext);

src/app/posts.services.ts

@@ -247,17 +247,29 @@ export class PostsService implements CanActivate {
         return this.http.post(this.path + 'downloadTwitchChatByVODID', {id: id, type: type, vodId: vodId, uuid: uuid, sub: sub}, this.httpOptions);
     }
 
-    downloadFileFromServer(uid, uuid = null, is_playlist = false) {
+    downloadFileFromServer(uid, uuid = null, sub_id = null) {
         return this.http.post(this.path + 'downloadFile', {
                                                             uid: uid,
                                                             uuid: uuid,
-                                                            is_playlist: is_playlist
+                                                            sub_id: sub_id
                                                             },
                                                           {responseType: 'blob', params: this.httpOptions.params});
     }
 
     downloadPlaylistFromServer(playlist_id, uuid = null) {
-        return this.http.post(this.path + 'downloadPlaylist', {playlist_id: playlist_id, uuid: uuid});
+        return this.http.post(this.path + 'downloadFile', {
+                                                            uuid: uuid,
+                                                            playlist_id: playlist_id
+                                                            },
+                                                          {responseType: 'blob', params: this.httpOptions.params});
+    }
+
+    downloadSubFromServer(sub_id, uuid = null) {
+        return this.http.post(this.path + 'downloadFile', {
+                                                            uuid: uuid,
+                                                            sub_id: sub_id
+                                                            },
+                                                          {responseType: 'blob', params: this.httpOptions.params});
     }
 
     checkConcurrentStream(uid) {

src/app/subscription/subscription/subscription.component.ts

@@ -153,15 +153,14 @@ export class SubscriptionComponent implements OnInit, OnDestroy {
     }
 
     this.downloading = true;
-    // TODO: add download subscription route
-    /*this.postsService.downloadFileFromServer(fileNames, 'video', this.subscription.name, true).subscribe(res => {
+    this.postsService.downloadSubFromServer(this.subscription.id).subscribe(res => {
       this.downloading = false;
       const blob: Blob = res;
       saveAs(blob, this.subscription.name + '.zip');
     }, err => {
       console.log(err);
       this.downloading = false;
-    });*/
+    });
   }
 
   editSubscription() {