Added video info dialog

File cards and subscription file cards now use video info dialog so that users can see info on each individual video Ellipsis are now added client-side to video titles in file cards
2026-03-07 12:00:01 +03:00 · 2020-03-17 06:58:05 -04:00
parent 3bdacd4b52
commit 1a79b489ab
13 changed files with 168 additions and 28 deletions
--- a/backend/app.js
+++ b/backend/app.js
@@ -84,12 +84,16 @@ app.use(bodyParser.json());

 // objects

-function File(id, title, thumbnailURL, isAudio, duration) {
+function File(id, title, thumbnailURL, isAudio, duration, url = null, uploader = null, size = null, path = null) {
    this.id = id;
    this.title = title;
    this.thumbnailURL = thumbnailURL;
    this.isAudio = isAudio;
    this.duration = duration;
+    this.url = url;
+    this.uploader = uploader;
+    this.size = size;
+    this.path = path;
 }

 // actual functions
@@ -951,20 +955,21 @@ app.post('/api/getMp3s', function(req, res) {
    for (let i = 0; i < files.length; i++) {
        let file = files[i];
        var file_path = file.substring(audioFolderPath.length, file.length);
+
+        var stats = fs.statSync(file);
+
        var id = file_path.substring(0, file_path.length-4);
        var jsonobj = getJSONMp3(id);
        if (!jsonobj) continue;
        var title = jsonobj.title;
-
-        if (title.length > 14) // edits title if it's too long
-        {
-            title = title.substring(0,12) + "...";
-        }
+        var url = jsonobj.webpage_url;
+        var uploader = jsonobj.uploader;
+        var size = stats.size;

        var thumbnail = jsonobj.thumbnail;
        var duration = jsonobj.duration;
        var isaudio = true;
-        var file_obj = new File(id, title, thumbnail, isaudio, duration);
+        var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file);
        mp3s.push(file_obj);
    }

@@ -984,20 +989,21 @@ app.post('/api/getMp4s', function(req, res) {
    for (let i = 0; i < files.length; i++) {
        let file = files[i];
        var file_path = file.substring(videoFolderPath.length, file.length);
+
+        var stats = fs.statSync(file);
+        
        var id = file_path.substring(0, file_path.length-4);
        var jsonobj = getJSONMp4(id);
        if (!jsonobj) continue;
        var title = jsonobj.title;
-
-        if (title.length > 14) // edits title if it's too long
-        {
-            title = title.substring(0,12) + "...";
-        }
+        var url = jsonobj.webpage_url;
+        var uploader = jsonobj.uploader;
+        var size = stats.size;

        var thumbnail = jsonobj.thumbnail;
        var duration = jsonobj.duration;
        var isaudio = false;
-        var file_obj = new File(id, title, thumbnail, isaudio, duration);
+        var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file);
        mp4s.push(file_obj);
    }

@@ -1101,6 +1107,8 @@ app.post('/api/getSubscription', async (req, res) => {
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            var file_path = file.substring(appended_base_path.length, file.length);
+            var stats = fs.statSync(file);
+
            var id = file_path.substring(0, file_path.length-4);
            var jsonobj = getJSONMp4(id, appended_base_path);
            if (!jsonobj) continue;
@@ -1108,8 +1116,12 @@ app.post('/api/getSubscription', async (req, res) => {

            var thumbnail = jsonobj.thumbnail;
            var duration = jsonobj.duration;
+            var url = jsonobj.webpage_url;
+            var uploader = jsonobj.uploader;
+            var size = stats.size;
+
            var isaudio = false;
-            var file_obj = new File(id, title, thumbnail, isaudio, duration);
+            var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file);
            parsed_files.push(file_obj);
        }

--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
    "@locl/core": "0.0.1-beta.2",
    "core-js": "^2.4.1",
    "file-saver": "^2.0.2",
+    "filesize": "^6.1.0",
    "ng-lazyload-image": "^7.0.1",
    "ng4-configure": "^0.1.7",
    "ngx-content-loading": "^0.1.3",
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -49,6 +49,7 @@ import { SettingsComponent } from './settings/settings.component';

 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
+import { VideoInfoDialogComponent } from './dialogs/video-info-dialog/video-info-dialog.component';
 registerLocaleData(es, 'es');

 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -70,7 +71,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
    SubscriptionFileCardComponent,
    SubscriptionInfoDialogComponent,
    SettingsComponent,
-    AboutDialogComponent
+    AboutDialogComponent,
+    VideoInfoDialogComponent
  ],
  imports: [
    BrowserModule,
--- a/src/app/dialogs/video-info-dialog/video-info-dialog.component.html
+++ b/src/app/dialogs/video-info-dialog/video-info-dialog.component.html
@@ -0,0 +1,28 @@
+<h4 mat-dialog-title>{{file.title}}</h4>
+
+<mat-dialog-content>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Subscription video name property">Name:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{file.title}}</div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Subscription video URL property">URL:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value"><a target="_blank" [href]="file.url">{{file.url}}</a></div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Subscription video ID property">Uploader:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{file.uploader ? file.uploader : 'N/A'}}</div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Subscription video file size property">File size:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{filesize(file.size)}}</div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Subscription video path property">Path:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{file.path}}</div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close><ng-container i18n="Close subscription info button">Close</ng-container></button>
+</mat-dialog-actions>
--- a/src/app/dialogs/video-info-dialog/video-info-dialog.component.scss
+++ b/src/app/dialogs/video-info-dialog/video-info-dialog.component.scss
@@ -0,0 +1,18 @@
+.info-item {
+    margin-bottom: 12px;
+    width: 100%;
+}
+
+.info-item-value {
+    font-size: 13px;
+    display: inline-block;
+    width: 70%;
+}
+
+.spacer {flex: 1 1 auto;}
+
+.info-item-label {
+    display: inline-block;
+    width: 30%;
+    vertical-align: top;
+}
--- a/src/app/dialogs/video-info-dialog/video-info-dialog.component.spec.ts
+++ b/src/app/dialogs/video-info-dialog/video-info-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoInfoDialogComponent } from './video-info-dialog.component';
+
+describe('VideoInfoDialogComponent', () => {
+  let component: VideoInfoDialogComponent;
+  let fixture: ComponentFixture<VideoInfoDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoInfoDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoInfoDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/dialogs/video-info-dialog/video-info-dialog.component.ts
+++ b/src/app/dialogs/video-info-dialog/video-info-dialog.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import filesize from 'filesize';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-video-info-dialog',
+  templateUrl: './video-info-dialog.component.html',
+  styleUrls: ['./video-info-dialog.component.scss']
+})
+export class VideoInfoDialogComponent implements OnInit {
+  file: any;
+  filesize;
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  ngOnInit(): void {
+    this.filesize = filesize;
+    if (this.data) {
+      this.file = this.data.file;
+    }
+  }
+
+}
--- a/src/app/file-card/file-card.component.css
+++ b/src/app/file-card/file-card.component.css
@@ -51,6 +51,14 @@
  -webkit-line-clamp: 2;
 }

+.file-link {
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
@media (max-width: 576px){
 
  .example-card {
--- a/src/app/file-card/file-card.component.html
+++ b/src/app/file-card/file-card.component.html
@@ -1,8 +1,9 @@
 <mat-card class="example-card mat-elevation-z6">
  <div style="padding:5px">
    <div style="height: 52px;">
-      <b><a href="javascript:void(0)" (click)="!isPlaylist ? mainComponent.goToFile(name, isAudio) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
-      <br/>
+      <div>
+        <b><a class="file-link" href="javascript:void(0)" (click)="!isPlaylist ? mainComponent.goToFile(name, isAudio) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
+      </div>
      <span class="max-two-lines"><ng-container i18n="File or playlist ID">ID:</ng-container>&nbsp;{{name}}</span>
      <div *ngIf="isPlaylist"><ng-container i18n="Playlist video count">Count:</ng-container>&nbsp;{{count}}</div>
    </div>
@@ -15,10 +16,11 @@
      </span>
    </div>
  </div>
-  <button *ngIf="!use_youtubedl_archive" (click)="deleteFile()" class="deleteButton" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
-  <button [matMenuTriggerFor]="action_menu" *ngIf="use_youtubedl_archive" class="deleteButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+  <button *ngIf="isPlaylist" (click)="deleteFile()" class="deleteButton" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+  <button [matMenuTriggerFor]="action_menu" *ngIf="!isPlaylist" class="deleteButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
  <mat-menu #action_menu="matMenu">
+    <button (click)="openSubscriptionInfoDialog()" 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>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
-    <button (click)="deleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
+    <button *ngIf="use_youtubedl_archive" (click)="deleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
  </mat-menu>
 </mat-card>
--- a/src/app/file-card/file-card.component.ts
+++ b/src/app/file-card/file-card.component.ts
@@ -5,6 +5,8 @@ import {EventEmitter} from '@angular/core';
 import { MainComponent } from 'app/main/main.component';
 import { Subject, Observable } from 'rxjs';
 import 'rxjs/add/observable/merge';
+import { MatDialog } from '@angular/material/dialog';
+import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';

@Component({
  selector: 'app-file-card',
@@ -12,7 +14,7 @@ import 'rxjs/add/observable/merge';
  styleUrls: ['./file-card.component.css']
 })
 export class FileCardComponent implements OnInit {
-
+  @Input() file: any;
  @Input() title: string;
  @Input() length: string;
  @Input() name: string;
@@ -29,8 +31,10 @@ export class FileCardComponent implements OnInit {
  scrollSubject;
  scrollAndLoad;

-  constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent) {
-    this.scrollSubject = new Subject();
+  constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent, 
+    private dialog: MatDialog) {
+
+      this.scrollSubject = new Subject();
    this.scrollAndLoad = Observable.merge(
      Observable.fromEvent(window, 'scroll'),
      this.scrollSubject
@@ -57,6 +61,14 @@ export class FileCardComponent implements OnInit {

  }

+  openSubscriptionInfoDialog() {
+    const dialogRef = this.dialog.open(VideoInfoDialogComponent, {
+      data: {
+        file: this.file,
+      }
+    });
+  }
+
  onImgError(event) {
    this.image_errored = true;
  }
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -203,7 +203,7 @@
            <div *ngIf="mp3s.length > 0;else nomp3s">
                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                    <mat-grid-tile *ngFor="let file of mp3s; index as i;">
-                        <app-file-card #audiofilecard (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
+                        <app-file-card #audiofilecard (removeFile)="removeFromMp3($event)" [file]="file" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
                                [length]="file.duration" [isAudio]="true" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
                        <mat-progress-bar *ngIf="downloading_content['audio'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
                    </mat-grid-tile>
@@ -244,7 +244,7 @@
            <div *ngIf="mp4s.length > 0;else nomp4s">
                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                    <mat-grid-tile *ngFor="let file of mp4s; index as i;">
-                        <app-file-card #videofilecard (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
+                        <app-file-card #videofilecard (removeFile)="removeFromMp4($event)" [file]="file" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
                            [length]="file.duration" [isAudio]="false" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
                        <mat-progress-bar *ngIf="downloading_content['video'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
                    </mat-grid-tile>
--- a/src/app/subscription/subscription-file-card/subscription-file-card.component.html
+++ b/src/app/subscription/subscription-file-card/subscription-file-card.component.html
@@ -4,6 +4,7 @@
    </div>
    <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
    <mat-menu #action_menu="matMenu">
+        <button (click)="openSubscriptionInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Subscription video info button">Info</ng-container></button>
        <button (click)="deleteAndRedownload()" 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)="deleteForever()" mat-menu-item *ngIf="sub.archive && use_youtubedl_archive"><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container></button>
    </mat-menu>
--- a/src/app/subscription/subscription-file-card/subscription-file-card.component.ts
+++ b/src/app/subscription/subscription-file-card/subscription-file-card.component.ts
@@ -3,6 +3,8 @@ import { Observable, Subject } from 'rxjs';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { PostsService } from 'app/posts.services';
+import { MatDialog } from '@angular/material/dialog';
+import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';

@Component({
  selector: 'app-subscription-file-card',
@@ -25,7 +27,7 @@ export class SubscriptionFileCardComponent implements OnInit {
  @Output() goToFileEmit = new EventEmitter<any>();
  @Output() reloadSubscription = new EventEmitter<boolean>();

-  constructor(private snackBar: MatSnackBar, private postsService: PostsService) {
+  constructor(private snackBar: MatSnackBar, private postsService: PostsService, private dialog: MatDialog) {
    this.scrollSubject = new Subject();
    this.scrollAndLoad = Observable.merge(
      Observable.fromEvent(window, 'scroll'),
@@ -55,6 +57,14 @@ export class SubscriptionFileCardComponent implements OnInit {
    this.goToFileEmit.emit(this.file.id);
  }

+  openSubscriptionInfoDialog() {
+    const dialogRef = this.dialog.open(VideoInfoDialogComponent, {
+      data: {
+        file: this.file,
+      }
+    });
+  }
+
  deleteAndRedownload() {
    this.postsService.deleteSubscriptionFile(this.sub, this.file.id, false).subscribe(res => {
      this.reloadSubscription.emit(true);
@@ -77,8 +87,7 @@ export class SubscriptionFileCardComponent implements OnInit {

 }

-function fancyTimeFormat(time)
-{
+function fancyTimeFormat(time) {
    // Hours, minutes and seconds
    const hrs = ~~(time / 3600);
    const mins = ~~((time % 3600) / 60);