Created unified file card component, recent videos component (not done) and started scaffolding work on the backend

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

@@ -0,0 +1,9 @@
+<div>
+    <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>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,3 @@
+.file-col {
+    max-width: 240px;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecentVideosComponent } from './recent-videos.component';
+
+describe('RecentVideosComponent', () => {
+  let component: RecentVideosComponent;
+  let fixture: ComponentFixture<RecentVideosComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RecentVideosComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecentVideosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-recent-videos',
+  templateUrl: './recent-videos.component.html',
+  styleUrls: ['./recent-videos.component.scss']
+})
+export class RecentVideosComponent implements OnInit {
+
+  normal_files_received = false;
+  subscription_files_received = false;
+  files: any[] = null;
+
+  constructor(private postsService: PostsService) { }
+
+  ngOnInit(): void {
+  }
+
+  getAllFiles() {
+
+  }
+
+  sortFiles(a, b) {
+    // uses the 'registered' flag as the timestamp
+    const result = b.registered - a.registered;
+    return result;
+  }
+}

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

@@ -0,0 +1,24 @@
+<div style="position: relative; width: fit-content;">
+    <div class="duration-time">
+        <ng-container i18n="Video duration label">Length:</ng-container>&nbsp;{{file_length}}
+    </div>
+    <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)="deleteFile()" mat-menu-item>
+            <mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container>
+        </button>
+        <button (click)="deleteFile(true)" mat-menu-item *ngIf="use_youtubedl_archive">
+            <mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container>
+        </button>
+    </mat-menu>
+    <mat-card (click)="navigateToFile()" matRipple class="example-card mat-elevation-z6">
+        <div style="padding:5px">
+            <div *ngIf="fileThumbnail" class="img-div">
+                <img class="image" [src]="file_thumbnail" alt="Thumbnail">
+            </div>
+
+            <span class="max-two-lines"><strong>{{file_title}}</strong></span>      
+        </div>
+    </mat-card>
+</div>

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

@@ -0,0 +1,76 @@
+.example-card {
+    width: 200px;
+    height: 200px;
+    padding: 0px;
+    cursor: pointer;
+  }
+  
+  .menuButton {
+    right: 0px;
+    top: -1px;
+    position: absolute;
+    z-index: 999;
+    
+  }
+  
+  /* Coerce the <span> icon container away from display:inline */
+  .mat-icon-button .mat-button-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .image {
+    width: 200px;
+    height: 112.5px;
+    object-fit: cover;
+  }
+  
+  .example-full-width-height {
+    width: 100%;
+    height: 100%
+  }
+  
+  .centered {
+    margin: 0 auto;
+    top: 50%;
+    left: 50%;
+  }
+  
+  .img-div {
+    max-height: 80px;
+    padding: 0px;
+    margin: 32px 0px 0px -5px;
+    width: calc(100% + 5px + 5px);
+  }
+  
+  .max-two-lines {
+    display: -webkit-box;
+    display: -moz-box;
+    max-height: 2.4em;
+    line-height: 1.2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    bottom: 5px;
+    position: absolute;
+  }
+
+  .duration-time {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    z-index: 99999;
+  }
+  
+  @media (max-width: 576px){
+   
+    .example-card {
+      width: 175px !important;
+    }
+
+    .image {
+        width: 175px;
+    }
+     
+  }

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UnifiedFileCardComponent } from './unified-file-card.component';
+
+describe('UnifiedFileCardComponent', () => {
+  let component: UnifiedFileCardComponent;
+  let fixture: ComponentFixture<UnifiedFileCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UnifiedFileCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnifiedFileCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-unified-file-card',
+  templateUrl: './unified-file-card.component.html',
+  styleUrls: ['./unified-file-card.component.scss']
+})
+export class UnifiedFileCardComponent implements OnInit {
+
+  // required info
+  file_title = '';
+  file_length = '';
+  file_thumbnail = '';
+  type = null;
+  use_youtubedl_archive = false;
+
+  isSubscriptionFile: boolean = null;
+
+  @Input() file_obj = null;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.file_length = fancyTimeFormat(this.file_obj.duration);
+  }
+
+  deleteFile(blacklistMode = false) {
+
+  }
+
+  navigateToFile() {
+
+  }
+
+  openFileInfoDialog() {
+
+  }
+  
+}
+
+function fancyTimeFormat(time) {
+  // Hours, minutes and seconds
+  const hrs = ~~(time / 3600);
+  const mins = ~~((time % 3600) / 60);
+  const secs = ~~time % 60;
+
+  // Output like "1:01" or "4:03:59" or "123:03:59"
+  let ret = '';
+
+  if (hrs > 0) {
+      ret += '' + hrs + ':' + (mins < 10 ? '0' : '');
+  }
+
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '');
+  ret += '' + secs;
+  return ret;
+}