From 4ebb2d429798dd1037a0a01af883a630c59c067f Mon Sep 17 00:00:00 2001 From: Isaac Grynsztein Date: Mon, 13 Jul 2020 22:09:48 -0400 Subject: [PATCH] Created unified file card component, recent videos component (not done) and started scaffolding work on the backend --- backend/app.js | 18 +++++ src/app/app.component.html | 4 + src/app/app.component.ts | 14 ++++ src/app/app.module.ts | 8 +- .../recent-videos.component.html | 9 +++ .../recent-videos.component.scss | 3 + .../recent-videos.component.spec.ts | 25 ++++++ .../recent-videos/recent-videos.component.ts | 29 +++++++ .../unified-file-card.component.html | 24 ++++++ .../unified-file-card.component.scss | 76 +++++++++++++++++++ .../unified-file-card.component.spec.ts | 25 ++++++ .../unified-file-card.component.ts | 57 ++++++++++++++ .../subscription-file-card.component.ts | 2 +- .../subscription/subscription.component.ts | 19 ++++- 14 files changed, 310 insertions(+), 3 deletions(-) create mode 100644 src/app/components/recent-videos/recent-videos.component.html create mode 100644 src/app/components/recent-videos/recent-videos.component.scss create mode 100644 src/app/components/recent-videos/recent-videos.component.spec.ts create mode 100644 src/app/components/recent-videos/recent-videos.component.ts create mode 100644 src/app/components/unified-file-card/unified-file-card.component.html create mode 100644 src/app/components/unified-file-card/unified-file-card.component.scss create mode 100644 src/app/components/unified-file-card/unified-file-card.component.spec.ts create mode 100644 src/app/components/unified-file-card/unified-file-card.component.ts diff --git a/backend/app.js b/backend/app.js index 88b5313..eb33fd9 100644 --- a/backend/app.js +++ b/backend/app.js @@ -2046,6 +2046,24 @@ app.post('/api/getFile', optionalJwt, function (req, res) { } }); +app.post('/api/getAllFiles', optionalJwt, function (req, res) { + files = null; + playlists = null; + if (req.isAuthenticated()) { + const videos = auth_api.getUserVideos(req.user.uid, 'video'); + const audios = auth_api.getUserVideos(req.user.uid, 'audio'); + const audio_playlists = null; + const video_playlists = null; + } else { + + } + + res.send({ + files: files, + playlists: playlists + }) +}); + // video sharing app.post('/api/enableSharing', optionalJwt, function(req, res) { var type = req.body.type; diff --git a/src/app/app.component.html b/src/app/app.component.html index 254158d..5f44212 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -44,6 +44,10 @@ Login Subscriptions Downloads + + + {{subscription.name}} + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index aab27fb..b2ec5bf 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -46,6 +46,8 @@ export class AppComponent implements OnInit { @ViewChild('hamburgerMenu', { read: ElementRef }) hamburgerMenuButton: ElementRef; navigator: string = null; + subscriptions = null; + constructor(public postsService: PostsService, public snackBar: MatSnackBar, private dialog: MatDialog, public router: Router, public overlayContainer: OverlayContainer, private elementRef: ElementRef) { @@ -86,6 +88,13 @@ export class AppComponent implements OnInit { if (!localStorage.getItem('theme')) { this.setTheme(themingExists ? this.defaultTheme : 'default'); } + + // gets the subscriptions + if (this.allowSubscriptions) { + this.postsService.getAllSubscriptions().subscribe(res => { + this.subscriptions = res['subscriptions']; + }) + } } // theme stuff @@ -162,6 +171,11 @@ onSetTheme(theme, old_theme) { } + getSubscriptions() { + + } + + goBack() { if (!this.navigator) { this.router.navigate(['/home']); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0bacb30..4705f5e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -53,6 +53,7 @@ import { SubscriptionInfoDialogComponent } from './dialogs/subscription-info-dia import { SettingsComponent } from './settings/settings.component'; import { MatChipsModule } from '@angular/material/chips'; import { NgxFileDropModule } from 'ngx-file-drop'; +import { AvatarModule } from 'ngx-avatar'; import es from '@angular/common/locales/es'; import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component'; @@ -73,6 +74,8 @@ import { CookiesUploaderDialogComponent } from './dialogs/cookies-uploader-dialo import { LogsViewerComponent } from './components/logs-viewer/logs-viewer.component'; import { ModifyPlaylistComponent } from './dialogs/modify-playlist/modify-playlist.component'; import { ConfirmDialogComponent } from './dialogs/confirm-dialog/confirm-dialog.component'; +import { UnifiedFileCardComponent } from './components/unified-file-card/unified-file-card.component'; +import { RecentVideosComponent } from './components/recent-videos/recent-videos.component'; registerLocaleData(es, 'es'); @@ -113,7 +116,9 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible CookiesUploaderDialogComponent, LogsViewerComponent, ModifyPlaylistComponent, - ConfirmDialogComponent + ConfirmDialogComponent, + UnifiedFileCardComponent, + RecentVideosComponent ], imports: [ CommonModule, @@ -154,6 +159,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible DragDropModule, ClipboardModule, NgxFileDropModule, + AvatarModule, VgCoreModule, VgControlsModule, VgOverlayPlayModule, diff --git a/src/app/components/recent-videos/recent-videos.component.html b/src/app/components/recent-videos/recent-videos.component.html new file mode 100644 index 0000000..b9b92b4 --- /dev/null +++ b/src/app/components/recent-videos/recent-videos.component.html @@ -0,0 +1,9 @@ +
+
+
+
+ +
+
+
+
\ 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 new file mode 100644 index 0000000..5d98591 --- /dev/null +++ b/src/app/components/recent-videos/recent-videos.component.scss @@ -0,0 +1,3 @@ +.file-col { + max-width: 240px; +} \ No newline at end of file diff --git a/src/app/components/recent-videos/recent-videos.component.spec.ts b/src/app/components/recent-videos/recent-videos.component.spec.ts new file mode 100644 index 0000000..4869c76 --- /dev/null +++ b/src/app/components/recent-videos/recent-videos.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecentVideosComponent } from './recent-videos.component'; + +describe('RecentVideosComponent', () => { + let component: RecentVideosComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RecentVideosComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RecentVideosComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/recent-videos/recent-videos.component.ts b/src/app/components/recent-videos/recent-videos.component.ts new file mode 100644 index 0000000..77d46fd --- /dev/null +++ b/src/app/components/recent-videos/recent-videos.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import { PostsService } from 'app/posts.services'; + +@Component({ + selector: 'app-recent-videos', + templateUrl: './recent-videos.component.html', + styleUrls: ['./recent-videos.component.scss'] +}) +export class RecentVideosComponent implements OnInit { + + normal_files_received = false; + subscription_files_received = false; + files: any[] = null; + + constructor(private postsService: PostsService) { } + + ngOnInit(): void { + } + + getAllFiles() { + + } + + sortFiles(a, b) { + // uses the 'registered' flag as the timestamp + const result = b.registered - a.registered; + return result; + } +} 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 new file mode 100644 index 0000000..58cd542 --- /dev/null +++ b/src/app/components/unified-file-card/unified-file-card.component.html @@ -0,0 +1,24 @@ +
+
+ Length: {{file_length}} +
+ + + + + + + +
+
+ Thumbnail +
+ + {{file_title}} +
+ +
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 new file mode 100644 index 0000000..65cd869 --- /dev/null +++ b/src/app/components/unified-file-card/unified-file-card.component.scss @@ -0,0 +1,76 @@ +.example-card { + width: 200px; + height: 200px; + padding: 0px; + cursor: pointer; + } + + .menuButton { + right: 0px; + top: -1px; + position: absolute; + z-index: 999; + + } + + /* Coerce the icon container away from display:inline */ + .mat-icon-button .mat-button-wrapper { + display: flex; + justify-content: center; + } + + .image { + width: 200px; + height: 112.5px; + object-fit: cover; + } + + .example-full-width-height { + width: 100%; + height: 100% + } + + .centered { + margin: 0 auto; + top: 50%; + left: 50%; + } + + .img-div { + max-height: 80px; + padding: 0px; + margin: 32px 0px 0px -5px; + width: calc(100% + 5px + 5px); + } + + .max-two-lines { + display: -webkit-box; + display: -moz-box; + max-height: 2.4em; + line-height: 1.2em; + overflow: hidden; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + bottom: 5px; + position: absolute; + } + + .duration-time { + position: absolute; + left: 5px; + top: 5px; + z-index: 99999; + } + + @media (max-width: 576px){ + + .example-card { + width: 175px !important; + } + + .image { + width: 175px; + } + + } diff --git a/src/app/components/unified-file-card/unified-file-card.component.spec.ts b/src/app/components/unified-file-card/unified-file-card.component.spec.ts new file mode 100644 index 0000000..4482471 --- /dev/null +++ b/src/app/components/unified-file-card/unified-file-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UnifiedFileCardComponent } from './unified-file-card.component'; + +describe('UnifiedFileCardComponent', () => { + let component: UnifiedFileCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UnifiedFileCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UnifiedFileCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..2d600de --- /dev/null +++ b/src/app/components/unified-file-card/unified-file-card.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-unified-file-card', + templateUrl: './unified-file-card.component.html', + styleUrls: ['./unified-file-card.component.scss'] +}) +export class UnifiedFileCardComponent implements OnInit { + + // required info + file_title = ''; + file_length = ''; + file_thumbnail = ''; + type = null; + use_youtubedl_archive = false; + + isSubscriptionFile: boolean = null; + + @Input() file_obj = null; + + constructor() { } + + ngOnInit(): void { + this.file_length = fancyTimeFormat(this.file_obj.duration); + } + + deleteFile(blacklistMode = false) { + + } + + navigateToFile() { + + } + + openFileInfoDialog() { + + } + +} + +function fancyTimeFormat(time) { + // Hours, minutes and seconds + const hrs = ~~(time / 3600); + const mins = ~~((time % 3600) / 60); + const secs = ~~time % 60; + + // Output like "1:01" or "4:03:59" or "123:03:59" + let ret = ''; + + if (hrs > 0) { + ret += '' + hrs + ':' + (mins < 10 ? '0' : ''); + } + + ret += '' + mins + ':' + (secs < 10 ? '0' : ''); + ret += '' + secs; + return ret; +} diff --git a/src/app/subscription/subscription-file-card/subscription-file-card.component.ts b/src/app/subscription/subscription-file-card/subscription-file-card.component.ts index 12794e5..c63a6f3 100644 --- a/src/app/subscription/subscription-file-card/subscription-file-card.component.ts +++ b/src/app/subscription/subscription-file-card/subscription-file-card.component.ts @@ -108,4 +108,4 @@ function fancyTimeFormat(time) { ret += '' + mins + ':' + (secs < 10 ? '0' : ''); ret += '' + secs; return ret; -} \ No newline at end of file +} diff --git a/src/app/subscription/subscription/subscription.component.ts b/src/app/subscription/subscription/subscription.component.ts index 54a1b96..694def4 100644 --- a/src/app/subscription/subscription/subscription.component.ts +++ b/src/app/subscription/subscription/subscription.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { PostsService } from 'app/posts.services'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute, Router, ParamMap } from '@angular/router'; @Component({ selector: 'app-subscription', @@ -43,9 +43,26 @@ export class SubscriptionComponent implements OnInit { filterProperty = this.filterProperties['upload_date']; downloading = false; + initialized = false; + constructor(private postsService: PostsService, private route: ActivatedRoute, private router: Router) { } ngOnInit() { + this.route.paramMap.subscribe((params: ParamMap) => { + this.id = params.get('id'); + this.postsService.service_initialized.subscribe(init => { + if (init) { + this.initialized = true; + this.getConfig(); + this.getSubscription(); + } + }); + + if (!this.initialized) { + this.getConfig(); + this.getSubscription(); + } + }); if (this.route.snapshot.paramMap.get('id')) { this.id = this.route.snapshot.paramMap.get('id');