updated mobile view for file cards to be more responsive

streamed audio/video now include the extension in the download

cleaned up unused code in app component

src/app/app.component.html

@@ -82,10 +82,10 @@
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <div *ngIf="mp3s.length > 0;else nomp3s">
-                <mat-grid-list cols="4" rowHeight="150px">
+                <mat-grid-list (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                     <mat-grid-tile *ngFor="let file of mp3s; index as i;">
                         <app-file-card (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
-                            [length]="file.duration" [isAudio]="true"></app-file-card>
+                                [length]="file.duration" [isAudio]="true"></app-file-card>
                     </mat-grid-tile>
                 </mat-grid-list>
             </div>
@@ -101,7 +101,7 @@
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <div *ngIf="mp4s.length > 0;else nomp4s">
-                <mat-grid-list cols="4" rowHeight="150px">
+                <mat-grid-list (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                     <mat-grid-tile *ngFor="let file of mp4s; index as i;">
                         <app-file-card (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
                             [length]="file.duration" [isAudio]="false"></app-file-card>

src/app/app.component.ts

@@ -48,6 +48,7 @@ export class AppComponent implements OnInit {
 
   mp3s: any[] = [];
   mp4s: any[] = [];
+  files_cols = (window.innerWidth <= 450) ? 2 : 4;
 
   urlForm = new FormControl('', [Validators.required]);
 
@@ -143,90 +144,55 @@ export class AppComponent implements OnInit {
   // download helpers
 
   downloadHelperMp3(name, is_playlist = false, forceView = false) {
-    /*
+    this.downloadingfile = false;
-    this.postsService.getFileStatusMp3(name).subscribe(fileExists => {
+
-      const exists = fileExists;
+    // if download only mode, just download the file. no redirect
-      this.exists = exists[0];
+    if (forceView === false && this.downloadOnlyMode && !this.iOS) {
-      if (exists[0] === 'failed') {
+      if (is_playlist) {
-        const percent = exists[2];
+        for (let i = 0; i < name.length; i++) {
-        // console.log(percent);
+          this.downloadAudioFile(name[i]);
-        if (percent > 0.30) {
-          this.determinateProgress = true;
-          this.percentDownloaded = percent * 100;
         }
-        setTimeout(() => this.downloadHelperMp3(name, is_playlist, forceView), 500);
       } else {
-        */
+        this.downloadAudioFile(name);
-        this.downloadingfile = false;
+      }
-
+    } else {
-        // if download only mode, just download the file. no redirect
+      if (is_playlist) {
-        if (forceView === false && this.downloadOnlyMode && !this.iOS) {
+        window.location.href = this.baseStreamPath + this.audioFolderPath + name[0] + '.mp3';
-          if (is_playlist) {
+      } else {
-            for (let i = 0; i < name.length; i++) {
+        window.location.href = this.baseStreamPath + this.audioFolderPath + name + '.mp3';
-              this.downloadAudioFile(name[i]);
+      }
-            }
+    }
-          } else {
-            this.downloadAudioFile(name);
-          }
-        } else {
-          if (is_playlist) {
-            window.location.href = this.baseStreamPath + this.audioFolderPath + name[0];
-          } else {
-            window.location.href = this.baseStreamPath + this.audioFolderPath + name;
-          }
-        }
-
-        // reloads mp3s
-        if (this.fileManagerEnabled) {
-          this.getMp3s();
-        }
-      /* }
-    });*/
 
+    // reloads mp3s
+    if (this.fileManagerEnabled) {
+      this.getMp3s();
+    }
   }
 
   downloadHelperMp4(name, is_playlist = false, forceView = false) {
-    /*
+    this.downloadingfile = false;
-    this.postsService.getFileStatusMp4(name).subscribe(fileExists => {
+
-      const exists = fileExists;
+    // if download only mode, just download the file. no redirect
-      this.exists = exists[0];
+    if (forceView === false && this.downloadOnlyMode) {
-      if (exists[0] === 'failed') {
+      if (is_playlist) {
-        const percent = exists[2];
+        for (let i = 0; i < name.length; i++) {
-        if (percent > 0.30) {
+          this.downloadVideoFile(name[i]);
-          this.determinateProgress = true;
-          this.percentDownloaded = percent * 100;
         }
-        setTimeout(() => this.downloadHelperMp4(name, is_playlist, forceView), 500);
       } else {
-        */
+        this.downloadVideoFile(name);
-        this.downloadingfile = false;
-
-        // if download only mode, just download the file. no redirect
-        if (forceView === false && this.downloadOnlyMode) {
-          if (is_playlist) {
-            for (let i = 0; i < name.length; i++) {
-              this.downloadVideoFile(name[i]);
-            }
-          } else {
-            this.downloadVideoFile(name);
-          }
-        } else {
-          if (is_playlist) {
-            window.location.href = this.baseStreamPath + this.videoFolderPath + name[0];
-          } else {
-            window.location.href = this.baseStreamPath + this.videoFolderPath + name;
-          }
-        }
-
-        // reloads mp4s
-        if (this.fileManagerEnabled) {
-          this.getMp4s();
-        }
-        /*
       }
-    });
+    } else {
-    */
+      if (is_playlist) {
+        window.location.href = this.baseStreamPath + this.videoFolderPath + name[0] + '.mp4';
+      } else {
+        window.location.href = this.baseStreamPath + this.videoFolderPath + name + '.mp4';
+      }
+    }
 
+    // reloads mp4s
+    if (this.fileManagerEnabled) {
+      this.getMp4s();
+    }
   }
 
   // download click handler
@@ -361,5 +327,9 @@ export class AppComponent implements OnInit {
         }
       );
   }
+
+  onResize(event) {
+    this.files_cols = (event.target.innerWidth <= 450) ? 2 : 4;
+  }
 }