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}} -