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/app.component.html

@@ -38,15 +38,15 @@
     </div>
     <div class="sidenav-container" style="height: calc(100% - 64px)">
         <mat-sidenav-container style="height: 100%">
-            <mat-sidenav #sidenav>
+            <mat-sidenav mode="side" #sidenav>
                 <mat-nav-list>
                     <a *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || postsService.isLoggedIn)" mat-list-item (click)="sidenav.close()" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
                     <a *ngIf="postsService.config && postsService.config.Advanced.multi_user_mode && !postsService.isLoggedIn" mat-list-item (click)="sidenav.close()" routerLink='/login'><ng-container i18n="Navigation menu Login Page title">Login</ng-container></a>
                     <a *ngIf="postsService.config && allowSubscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))" mat-list-item (click)="sidenav.close()" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
                     <a *ngIf="postsService.config && enableDownloadsManager && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('downloads_manager')))" mat-list-item (click)="sidenav.close()" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
-                    <ng-container *ngIf="postsService.config && allowSubscriptions && subscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))">
+                    <ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))">
                         <mat-divider></mat-divider>
-                        <a *ngFor="let subscription of subscriptions" mat-list-item (click)="sidenav.close()" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatar [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatar><ng-container i18n="Navigation menu Downloads Page title">{{subscription.name}}</ng-container></a>
+                        <a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="sidenav.close()" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatar [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatar><ng-container i18n="Navigation menu Downloads Page title">{{subscription.name}}</ng-container></a>
                     </ng-container>
                 </mat-nav-list>
             </mat-sidenav>

src/app/app.component.ts

@@ -46,8 +46,6 @@ export class AppComponent implements OnInit {
   @ViewChild('hamburgerMenu', { read: ElementRef }) hamburgerMenuButton: ElementRef;
   navigator: string = null;
 
-  subscriptions = null;
-
   constructor(public postsService: PostsService, public snackBar: MatSnackBar, private dialog: MatDialog,
     public router: Router, public overlayContainer: OverlayContainer, private elementRef: ElementRef) {
 
@@ -92,7 +90,7 @@ export class AppComponent implements OnInit {
     // gets the subscriptions
     if (this.allowSubscriptions) {
       this.postsService.getAllSubscriptions().subscribe(res => {
-        this.subscriptions = res['subscriptions'];
+        this.postsService.subscriptions = res['subscriptions'];
       })
     }
   }

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>();
+
+  /*
+    Planned sizes:
+    small: 150x175
+    medium: 200x200
+    big: 250x200
+  */
 
-  constructor() { }
+  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) {

src/app/main/main.component.html

@@ -183,6 +183,7 @@
 <ng-template #nofile>
 
 </ng-template>
+<app-recent-videos></app-recent-videos>
 <div style="margin: 20px" *ngIf="fileManagerEnabled && (!postsService.isLoggedIn || postsService.permissions.includes('filemanager'))">
     <mat-accordion>
         <mat-expansion-panel (opened)="accordionOpened('audio')" (closed)="accordionClosed('audio')" (mouseleave)="accordionLeft('audio')" (mouseenter)="accordionEntered('audio')" class="big">

src/app/posts.services.ts

@@ -47,6 +47,7 @@ export class PostsService implements CanActivate {
     open_create_default_admin_dialog = new BehaviorSubject<boolean>(false);
 
     config = null;
+    subscriptions = null;
     constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document,
                 public snackBar: MatSnackBar) {
         console.log('PostsService Initialized...');
@@ -113,6 +114,15 @@ export class PostsService implements CanActivate {
         this.theme = this.THEMES_CONFIG[theme];
     }
 
+    getSubscriptionByID(sub_id) {
+        for (let i = 0; i < this.subscriptions.length; i++) {
+            if (this.subscriptions[i]['id'] === sub_id) {
+                return this.subscriptions[i];
+            }
+        }
+        return null;
+    }
+
     startHandshake(url: string) {
         return this.http.get(url + 'geturl');
     }