Added support for navigating to files in recent videos (subscription and not). No support for download-only mode yet

Added navigate to subscription menu item for the files

Sidenav mode is "side" now for testing, likely not a permanent change and will be optional in the future

src/app/components/recent-videos/recent-videos.component.html

@@ -2,7 +2,7 @@
     <div class="container">
         <div class="row justify-content-center">
             <div *ngFor="let file of files" class="col-6 col-lg-4 mb-2 mt-2 file-col">
-                <app-unified-file-card [file_obj]="file"></app-unified-file-card>
+                <app-unified-file-card (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file"></app-unified-file-card>
             </div>
         </div>
     </div>

src/app/components/recent-videos/recent-videos.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PostsService } from 'app/posts.services';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-recent-videos',
@@ -12,7 +13,7 @@ export class RecentVideosComponent implements OnInit {
   subscription_files_received = false;
   files: any[] = null;
 
-  constructor(private postsService: PostsService) { }
+  constructor(private postsService: PostsService, private router: Router) { }
 
   ngOnInit(): void {
     this.postsService.service_initialized.subscribe(init => {
@@ -30,6 +31,43 @@ export class RecentVideosComponent implements OnInit {
     });
   }
 
+  goToFile(file) {
+    if (this.postsService.config['Extra']['download_only_mode']) {
+      this.downloadFile(file);
+    } else {
+      this.navigateToFile(file);
+    }
+  }
+
+  navigateToFile(file) {
+    localStorage.setItem('player_navigator', this.router.url);
+    if (file.sub_id) {
+      const sub = this.postsService.getSubscriptionByID(file.sub_id)
+      if (sub.streamingOnly) {
+        this.router.navigate(['/player', {name: file.id,
+                                          url: file.requested_formats ? file.requested_formats[0].url : file.url}]);
+      } else {
+        this.router.navigate(['/player', {fileNames: file.id,
+          type: file.isAudio ? 'audio' : 'video', subscriptionName: sub.name,
+          subPlaylist: sub.isPlaylist, uuid: this.postsService.user ? this.postsService.user.uid : null}]);
+      }
+    } else {
+      this.router.navigate(['/player', {type: file.isAudio ? 'audio' : 'video', uid: file.uid}]);
+    }
+  }
+
+  downloadFile(file) {
+    if (file.sub_id) {
+
+    } else {
+
+    }
+  }
+
+  goToSubscription(file) {
+    this.router.navigate(['/subscription', {id: file.sub_id}]);
+  }
+
   sortFiles(a, b) {
     // uses the 'registered' flag as the timestamp
     const result = b.registered - a.registered;

src/app/components/unified-file-card/unified-file-card.component.html

@@ -5,6 +5,7 @@
     <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
     <mat-menu #action_menu="matMenu">
         <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
+        <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
         <button (click)="deleteFile()" mat-menu-item>
             <mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container>
         </button>

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

@@ -1,4 +1,6 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';
 
 @Component({
   selector: 'app-unified-file-card',
@@ -14,28 +16,46 @@ export class UnifiedFileCardComponent implements OnInit {
   type = null;
   use_youtubedl_archive = false;
 
-  isSubscriptionFile: boolean = null;
-
   @Input() file_obj = null;
+  @Output() goToFile = new EventEmitter<any>();
+  @Output() goToSubscription = new EventEmitter<any>();
 
-  constructor() { }
+  /*
+    Planned sizes:
+    small: 150x175
+    medium: 200x200
+    big: 250x200
+  */
+
+  constructor(private dialog: MatDialog) { }
 
   ngOnInit(): void {
     this.file_length = fancyTimeFormat(this.file_obj.duration);
   }
 
   deleteFile(blacklistMode = false) {
+    if (this.file_obj.sub_id) {
 
+    }
   }
 
   navigateToFile() {
+    this.goToFile.emit(this.file_obj);
+  }
 
+  navigateToSubscription() {
+    this.goToSubscription.emit(this.file_obj);
   }
 
   openFileInfoDialog() {
-
+    this.dialog.open(VideoInfoDialogComponent, {
+      data: {
+        file: this.file_obj,
+      },
+      minWidth: '50vw'
+    })
   }
-  
+
 }
 
 function fancyTimeFormat(time) {