From 919e2a649afc0185769e1a71ca5a4cda7e29ba72 Mon Sep 17 00:00:00 2001 From: Isaac Abadi Date: Sat, 22 Aug 2020 18:34:28 -0400 Subject: [PATCH] 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 --- package-lock.json | 15 +++++++++++++ package.json | 1 + src/app/app.module.ts | 3 ++- .../custom-playlists.component.html | 4 ++-- .../custom-playlists.component.scss | 10 ++++++++- .../recent-videos.component.html | 17 ++++++++++----- .../recent-videos.component.scss | 12 +++++++++++ .../recent-videos/recent-videos.component.ts | 17 ++++++++++++++- .../unified-file-card.component.html | 21 +++++++++++++------ .../unified-file-card.component.scss | 6 ++++++ .../unified-file-card.component.ts | 5 ++++- 11 files changed, 94 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index e9f53c3..08cd667 100644 --- 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", diff --git a/package.json b/package.json index 4a0f16f..14aa13e 100644 --- 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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f7a1269..69cba76 100644 --- 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, diff --git a/src/app/components/custom-playlists/custom-playlists.component.html b/src/app/components/custom-playlists/custom-playlists.component.html index f5a90bd..31d626f 100644 --- a/src/app/components/custom-playlists/custom-playlists.component.html +++ b/src/app/components/custom-playlists/custom-playlists.component.html @@ -1,8 +1,8 @@
-
- +
+
diff --git a/src/app/components/custom-playlists/custom-playlists.component.scss b/src/app/components/custom-playlists/custom-playlists.component.scss index 98c1d5b..eb2f48b 100644 --- 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; } \ No newline at end of file diff --git a/src/app/components/recent-videos/recent-videos.component.html b/src/app/components/recent-videos/recent-videos.component.html index 5c36084..3397a4f 100644 --- a/src/app/components/recent-videos/recent-videos.component.html +++ b/src/app/components/recent-videos/recent-videos.component.html @@ -1,4 +1,4 @@ -
+
@@ -17,7 +17,7 @@
-

My videos

+

My videos

@@ -30,9 +30,16 @@
-
- -
+ +
+ +
+ + +
+ +
+
\ No newline at end of file diff --git a/src/app/components/recent-videos/recent-videos.component.scss b/src/app/components/recent-videos/recent-videos.component.scss index c580895..5530225 100644 --- 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; + } } \ No newline at end of file diff --git a/src/app/components/recent-videos/recent-videos.component.ts b/src/app/components/recent-videos/recent-videos.component.ts index b47f26f..40dd773 100644 --- 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; }); } diff --git a/src/app/components/unified-file-card/unified-file-card.component.html b/src/app/components/unified-file-card/unified-file-card.component.html index 79a8437..8b54e7c 100644 --- 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 @@
-
{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}  {{file_obj.registered | date:'shortDate'}}
- +
{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}  {{file_obj.registered | date:'shortDate'}}
+
+ - + @@ -15,15 +16,18 @@ - + + + +
-
+
Thumbnail
@@ -33,7 +37,12 @@
- {{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}{{!is_playlist ? file_obj.title : file_obj.name}} +
+ +
+ + {{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}{{!is_playlist ? file_obj.title : file_obj.name}} +
diff --git a/src/app/components/unified-file-card/unified-file-card.component.scss b/src/app/components/unified-file-card/unified-file-card.component.scss index e11761f..865b72a 100644 --- 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 { diff --git a/src/app/components/unified-file-card/unified-file-card.component.ts b/src/app/components/unified-file-card/unified-file-card.component.ts index 03f148e..5ab6f04 100644 --- 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) {