Updated styling of recent videos

Added content loader module which will add ghosting to the recent videos component while the files are loading Updated custom playlists component to support large sized cards
2026-03-07 12:00:01 +03:00 · 2020-08-22 18:34:28 -04:00
parent dc6dd5f5a2
commit 919e2a649a
11 changed files with 94 additions and 17 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1404,6 +1404,21 @@
        }
      }
    },
+    "@ngneat/content-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@ngneat/content-loader/-/content-loader-5.0.0.tgz",
+      "integrity": "sha512-XrS53rsiJoQIOy2BwmOHkvgPv0a5cTzXbbM+/3IpgezPFdNqDunpZW+AciWQffVOfgbmL+7cYp1DVb6WM15LhQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
    "@ngtools/webpack": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
    "@angular/platform-browser": "^9.1.0",
    "@angular/platform-browser-dynamic": "^9.1.0",
    "@angular/router": "^9.1.0",
+    "@ngneat/content-loader": "^5.0.0",
    "core-js": "^2.4.1",
    "file-saver": "^2.0.2",
    "filesize": "^6.1.0",
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -54,6 +54,7 @@ import { SettingsComponent } from './settings/settings.component';
 import { MatChipsModule } from '@angular/material/chips';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { AvatarModule } from 'ngx-avatar';
+import { ContentLoaderModule } from '@ngneat/content-loader';

 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
@@ -152,7 +153,6 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
    MatMenuModule,
    MatDialogModule,
    MatSlideToggleModule,
-    MatMenuModule,
    MatAutocompleteModule,
    MatTabsModule,
    MatTooltipModule,
@@ -164,6 +164,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
    ClipboardModule,
    NgxFileDropModule,
    AvatarModule,
+    ContentLoaderModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
--- a/src/app/components/custom-playlists/custom-playlists.component.html
+++ b/src/app/components/custom-playlists/custom-playlists.component.html
@@ -1,8 +1,8 @@
 <div *ngIf="playlists && playlists.length > 0">
    <div class="container">
        <div class="row justify-content-center">
-            <div *ngFor="let playlist of playlists; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
-                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)"></app-unified-file-card>
+            <div *ngFor="let playlist of playlists; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)" [loading]="false"></app-unified-file-card>
            </div>
        </div>
    </div>
--- a/src/app/components/custom-playlists/custom-playlists.component.scss
+++ b/src/app/components/custom-playlists/custom-playlists.component.scss
@@ -5,6 +5,14 @@
    right: 15px;
 }

-.file-col {
+.large-col {
+    max-width: 320px;
+}
+
+.medium-col {
+    max-width: 240px;
+}
+
+.small-col {
    max-width: 240px;
 }
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid">
+<div class="container-fluid" style="max-width: 941px;">
    <div class="row">
        <div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
            <div>
@@ -17,7 +17,7 @@
            </div>
        </div>
        <div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
-            <h4 style="text-align: center; position: relative; top: 12px;">My videos</h4>
+            <h4 class="my-videos-title" i18n="My videos title">My videos</h4>
        </div>
        <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
            <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
@@ -30,9 +30,16 @@
 <div>
    <div class="container">
        <div class="row justify-content-center">
-            <div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
-            </div>
+            <ng-container *ngIf="normal_files_received">
+                <div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
+                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)"></app-unified-file-card>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
+                <div *ngFor="let file of loading_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
+                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [file_obj]="null" [loading]="true"></app-unified-file-card>
+                </div>
+            </ng-container>
        </div>
    </div>
 </div>
--- a/src/app/components/recent-videos/recent-videos.component.scss
+++ b/src/app/components/recent-videos/recent-videos.component.scss
@@ -45,4 +45,16 @@
    display: inline-block;
    position: absolute;
    top: 10px;
+}
+
+.my-videos-title {
+    text-align: center;
+    position: relative;
+    top: 12px;
+}
+
+@media (max-width: 576px) {
+    .my-videos-title {
+        top: 0px;
+    }
 }
--- a/src/app/components/recent-videos/recent-videos.component.ts
+++ b/src/app/components/recent-videos/recent-videos.component.ts
@@ -9,6 +9,9 @@ import { Router } from '@angular/router';
 })
 export class RecentVideosComponent implements OnInit {

+  cached_file_count = 0;
+  loading_files = null;
+
  normal_files_received = false;
  subscription_files_received = false;
  files: any[] = null;
@@ -47,7 +50,14 @@ export class RecentVideosComponent implements OnInit {
  };
  filterProperty = this.filterProperties['upload_date'];

-  constructor(public postsService: PostsService, private router: Router) { }
+  constructor(public postsService: PostsService, private router: Router) {
+    // get cached file count
+    if (localStorage.getItem('cached_file_count')) {
+      this.cached_file_count = +localStorage.getItem('cached_file_count');
+      this.loading_files = Array(this.cached_file_count).fill(0);
+      console.log(this.loading_files);
+    }
+  }

  ngOnInit(): void {
    this.postsService.service_initialized.subscribe(init => {
@@ -114,6 +124,11 @@ export class RecentVideosComponent implements OnInit {
        this.filtered_files = this.files;
      }
      this.filterByProperty(this.filterProperty['property']);
+
+      // set cached file count for future use, note that we convert the amount of files to a string
+      localStorage.setItem('cached_file_count', '' + this.files.length);
+
+      this.normal_files_received = true;
    });
  }

--- a/src/app/components/unified-file-card/unified-file-card.component.html
+++ b/src/app/components/unified-file-card/unified-file-card.component.html
@@ -1,8 +1,9 @@
 <div (mouseover)="elevated=true" (mouseout)="elevated=false" style="position: relative; width: fit-content;">
-    <div class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
-    <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+    <div *ngIf="!loading" class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
+    <div *ngIf="loading" class="download-time" style="width: 75%; margin-top: 5px;"><content-loader width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></div>
+    <button [disabled]="loading" [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
    <mat-menu #action_menu="matMenu">
-        <ng-container *ngIf="!is_playlist">
+        <ng-container *ngIf="!is_playlist && !loading">
            <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>
            <mat-divider></mat-divider>
@@ -15,15 +16,18 @@
            <button *ngIf="!file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
            <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
        </ng-container>
-        <ng-container *ngIf="is_playlist">
+        <ng-container *ngIf="is_playlist && !loading">
            <button (click)="emitEditPlaylist()" mat-menu-item><mat-icon>edit</mat-icon><ng-container i18n="Playlist edit button">Edit</ng-container></button>
            <mat-divider></mat-divider>
            <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
        </ng-container>
+        <ng-container *ngIf="loading">
+            <button mat-menu-item>Placeholder</button>
+        </ng-container>
    </mat-menu>
    <mat-card [matTooltip]="null" (click)="navigateToFile()" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'large-mat-card': card_size === 'large', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
        <div style="padding:5px">
-            <div *ngIf="file_obj.thumbnailURL" class="img-div">
+            <div *ngIf="!loading && file_obj.thumbnailURL" class="img-div">
                <div style="position: relative">
                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
                    <div class="duration-time">
@@ -33,7 +37,12 @@
                
            </div>

-            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>      
+            <div *ngIf="loading" class="img-div">
+                <content-loader width="100" height="55"><svg:rect x="0" y="0" rx="0" ry="0" width="100" height="55" /></content-loader>
+            </div>
+
+            <span *ngIf="!loading" [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>
+            <span *ngIf="loading" class="title-loading"><content-loader width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></span>
        </div>
    </mat-card>
 </div>
--- a/src/app/components/unified-file-card/unified-file-card.component.scss
+++ b/src/app/components/unified-file-card/unified-file-card.component.scss
@@ -117,6 +117,12 @@
  top: 6px;
 }

+.title-loading {
+  width: 93%;
+  position: absolute;
+  bottom: 1px;
+}
+
@media (max-width: 576px){
  
  // .example-card {
--- a/src/app/components/unified-file-card/unified-file-card.component.ts
+++ b/src/app/components/unified-file-card/unified-file-card.component.ts
@@ -16,6 +16,7 @@ export class UnifiedFileCardComponent implements OnInit {
  type = null;
  elevated = false;

+  @Input() loading = true;
  @Input() file_obj = null;
  @Input() card_size = 'medium';
  @Input() use_youtubedl_archive = false;
@@ -36,7 +37,9 @@ export class UnifiedFileCardComponent implements OnInit {
  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {
-    this.file_length = fancyTimeFormat(this.file_obj.duration);
+    if (!this.loading) {
+      this.file_length = fancyTimeFormat(this.file_obj.duration);
+    }
  }

  emitDeleteFile(blacklistMode = false) {