From a0eff4d96d275f874f79d1951f844e4507a5ce1c Mon Sep 17 00:00:00 2001 From: Isaac Grynsztein Date: Sun, 23 Feb 2020 03:18:26 -0500 Subject: [PATCH] images on file cards now load when the accordion is hovered over to increase responsiveness. images are loading maybe a second before clicking so hopefully they're done by the time the expansion finishes added the ability to create playlists in the gui through a new dialog reloading mp3s/mp4s doesn't cause an image refresh anymore when the list is unchanged fixed loading spinner of available formats so it now only shows when it is loading the current url file card images now don't show when errored or thumbnailurl doesn't exist --- src/app/app.module.ts | 17 +++- .../create-playlist.component.html | 19 ++++ .../create-playlist.component.scss | 0 .../create-playlist.component.spec.ts | 25 +++++ .../create-playlist.component.ts | 58 +++++++++++ src/app/file-card/file-card.component.html | 4 +- src/app/file-card/file-card.component.ts | 22 ++++- src/app/main/main.component.css | 4 + src/app/main/main.component.html | 36 ++++--- src/app/main/main.component.ts | 97 +++++++++++++++---- 10 files changed, 245 insertions(+), 37 deletions(-) create mode 100644 src/app/create-playlist/create-playlist.component.html create mode 100644 src/app/create-playlist/create-playlist.component.scss create mode 100644 src/app/create-playlist/create-playlist.component.spec.ts create mode 100644 src/app/create-playlist/create-playlist.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fd7b0c7..967e631 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,8 +24,15 @@ import {VgControlsModule} from 'videogular2/compiled/controls'; import {VgOverlayPlayModule} from 'videogular2/compiled/overlay-play'; import {VgBufferingModule} from 'videogular2/compiled/buffering'; import { InputDialogComponent } from './input-dialog/input-dialog.component'; -import { LazyLoadImageModule } from 'ng-lazyload-image'; +import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image'; import { NgxContentLoadingModule } from 'ngx-content-loading'; +import { audioFilesMouseHovering, videoFilesMouseHovering } from './main/main.component'; +import { Observable } from 'rxjs'; +import { CreatePlaylistComponent } from './create-playlist/create-playlist.component'; + +function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps) { + return (element.id === 'video' ? videoFilesMouseHovering : audioFilesMouseHovering); +} @NgModule({ declarations: [ @@ -33,7 +40,8 @@ import { NgxContentLoadingModule } from 'ngx-content-loading'; FileCardComponent, MainComponent, PlayerComponent, - InputDialogComponent + InputDialogComponent, + CreatePlaylistComponent ], imports: [ BrowserModule, @@ -64,13 +72,14 @@ import { NgxContentLoadingModule } from 'ngx-content-loading'; VgControlsModule, VgOverlayPlayModule, VgBufferingModule, - LazyLoadImageModule, + LazyLoadImageModule.forRoot({ isVisible }), NgxContentLoadingModule, RouterModule, AppRoutingModule, ], entryComponents: [ - InputDialogComponent + InputDialogComponent, + CreatePlaylistComponent ], providers: [PostsService], bootstrap: [AppComponent] diff --git a/src/app/create-playlist/create-playlist.component.html b/src/app/create-playlist/create-playlist.component.html new file mode 100644 index 0000000..6b75e53 --- /dev/null +++ b/src/app/create-playlist/create-playlist.component.html @@ -0,0 +1,19 @@ + +
+
+ + + +
+
+ + {{(type === 'audio') ? 'Audio files' : 'Videos'}} + + {{file.id}} + + +
+
+ +
+ diff --git a/src/app/create-playlist/create-playlist.component.scss b/src/app/create-playlist/create-playlist.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/create-playlist/create-playlist.component.spec.ts b/src/app/create-playlist/create-playlist.component.spec.ts new file mode 100644 index 0000000..862e64b --- /dev/null +++ b/src/app/create-playlist/create-playlist.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CreatePlaylistComponent } from './create-playlist.component'; + +describe('CreatePlaylistComponent', () => { + let component: CreatePlaylistComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CreatePlaylistComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreatePlaylistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/create-playlist/create-playlist.component.ts b/src/app/create-playlist/create-playlist.component.ts new file mode 100644 index 0000000..b3d04bf --- /dev/null +++ b/src/app/create-playlist/create-playlist.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; +import { FormControl } from '@angular/forms'; +import { PostsService } from 'app/posts.services'; + +@Component({ + selector: 'app-create-playlist', + templateUrl: './create-playlist.component.html', + styleUrls: ['./create-playlist.component.scss'] +}) +export class CreatePlaylistComponent implements OnInit { + // really "createPlaylistDialogComponent" + + filesToSelectFrom = null; + type = null; + filesSelect = new FormControl(); + name = ''; + + create_in_progress = false; + + constructor(@Inject(MAT_DIALOG_DATA) public data: any, + private postsService: PostsService, + public dialogRef: MatDialogRef) { } + + + ngOnInit() { + if (this.data) { + this.filesToSelectFrom = this.data.filesToSelectFrom; + this.type = this.data.type; + } + } + + createPlaylist() { + const thumbnailURL = this.getThumbnailURL(); + this.create_in_progress = true; + this.postsService.createPlaylist(this.name, this.filesSelect.value, this.type, thumbnailURL).subscribe(res => { + this.create_in_progress = false; + if (res['success']) { + this.dialogRef.close(true); + } else { + this.dialogRef.close(false); + } + }); + } + + getThumbnailURL() { + for (let i = 0; i < this.filesToSelectFrom.length; i++) { + const file = this.filesToSelectFrom[i]; + if (file.id === this.filesSelect.value[0]) { + // different services store the thumbnail in different places + if (file.thumbnailURL) { return file.thumbnailURL }; + if (file.thumbnail) { return file.thumbnail }; + } + } + return null; + } + +} diff --git a/src/app/file-card/file-card.component.html b/src/app/file-card/file-card.component.html index a3caec2..c40a0ef 100644 --- a/src/app/file-card/file-card.component.html +++ b/src/app/file-card/file-card.component.html @@ -5,8 +5,8 @@
ID: {{name}}
Count: {{count}}
-
- Thumbnail +
+ Thumbnail diff --git a/src/app/file-card/file-card.component.ts b/src/app/file-card/file-card.component.ts index 81541c4..67a9f75 100644 --- a/src/app/file-card/file-card.component.ts +++ b/src/app/file-card/file-card.component.ts @@ -3,6 +3,8 @@ import {PostsService} from '../posts.services'; import {MatSnackBar} from '@angular/material'; import {EventEmitter} from '@angular/core'; import { MainComponent } from 'app/main/main.component'; +import { Subject, Observable } from 'rxjs'; +import 'rxjs/add/observable/merge'; @Component({ selector: 'app-file-card', @@ -21,8 +23,18 @@ export class FileCardComponent implements OnInit { @Input() count = null; type; image_loaded = false; + image_errored = false; - constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent) { } + scrollSubject; + scrollAndLoad; + + constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent) { + this.scrollSubject = new Subject(); + this.scrollAndLoad = Observable.merge( + Observable.fromEvent(window, 'scroll'), + this.scrollSubject + ); + } ngOnInit() { this.type = this.isAudio ? 'audio' : 'video'; @@ -44,6 +56,14 @@ export class FileCardComponent implements OnInit { } + onImgError(event) { + this.image_errored = true; + } + + onHoverResponse() { + this.scrollSubject.next(); + } + imageLoaded(loaded) { this.image_loaded = true; } diff --git a/src/app/main/main.component.css b/src/app/main/main.component.css index e50149a..5ec8b78 100644 --- a/src/app/main/main.component.css +++ b/src/app/main/main.component.css @@ -111,4 +111,8 @@ mat-form-field.mat-form-field { position: absolute; bottom: 0px; width: 150px; +} + +.add-playlist-button { + float: right; } \ No newline at end of file diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index c281784..63ad205 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -11,7 +11,7 @@
- + Please enter a valid URL! @@ -21,12 +21,12 @@ Quality - + {{option.label}} -