From b2730926c82c6294fed0172cf91bd9e225cfbd1c Mon Sep 17 00:00:00 2001 From: Isaac Grynsztein Date: Tue, 17 Mar 2020 21:38:49 -0400 Subject: [PATCH] Updated translation details to improve clarity Added upload date property to files in UI Subscription videos can now be filtered by some of their properties (size, upload date, name, duration) Subscription videos are now centered --- backend/app.js | 21 ++++-- .../video-info-dialog.component.html | 14 ++-- src/app/file-card/file-card.component.html | 2 +- src/app/file-card/file-card.component.ts | 5 +- .../subscription-file-card.component.ts | 3 +- .../subscription/subscription.component.html | 64 +++++++++++-------- .../subscription/subscription.component.scss | 8 +++ .../subscription/subscription.component.ts | 50 +++++++++++++++ 8 files changed, 127 insertions(+), 40 deletions(-) diff --git a/backend/app.js b/backend/app.js index 3fdd32c..9fbecb9 100644 --- a/backend/app.js +++ b/backend/app.js @@ -84,7 +84,7 @@ app.use(bodyParser.json()); // objects -function File(id, title, thumbnailURL, isAudio, duration, url = null, uploader = null, size = null, path = null) { +function File(id, title, thumbnailURL, isAudio, duration, url, uploader, size, path, upload_date) { this.id = id; this.title = title; this.thumbnailURL = thumbnailURL; @@ -94,6 +94,7 @@ function File(id, title, thumbnailURL, isAudio, duration, url = null, uploader = this.uploader = uploader; this.size = size; this.path = path; + this.upload_date = upload_date; } // actual functions @@ -964,12 +965,15 @@ app.post('/api/getMp3s', function(req, res) { var title = jsonobj.title; var url = jsonobj.webpage_url; var uploader = jsonobj.uploader; + var upload_date = jsonobj.upload_date; + upload_date = `${upload_date.substring(0, 4)}-${upload_date.substring(4, 6)}-${upload_date.substring(6, 8)}`; + var size = stats.size; var thumbnail = jsonobj.thumbnail; var duration = jsonobj.duration; var isaudio = true; - var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file); + var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file, upload_date); mp3s.push(file_obj); } @@ -998,12 +1002,15 @@ app.post('/api/getMp4s', function(req, res) { var title = jsonobj.title; var url = jsonobj.webpage_url; var uploader = jsonobj.uploader; - var size = stats.size; - + var upload_date = jsonobj.upload_date; + upload_date = `${upload_date.substring(0, 4)}-${upload_date.substring(4, 6)}-${upload_date.substring(6, 8)}`; var thumbnail = jsonobj.thumbnail; var duration = jsonobj.duration; + + var size = stats.size; + var isaudio = false; - var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file); + var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file, upload_date); mp4s.push(file_obj); } @@ -1118,10 +1125,12 @@ app.post('/api/getSubscription', async (req, res) => { var duration = jsonobj.duration; var url = jsonobj.webpage_url; var uploader = jsonobj.uploader; + var upload_date = jsonobj.upload_date; + upload_date = `${upload_date.substring(0, 4)}-${upload_date.substring(4, 6)}-${upload_date.substring(6, 8)}`; var size = stats.size; var isaudio = false; - var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file); + var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file, upload_date); parsed_files.push(file_obj); } diff --git a/src/app/dialogs/video-info-dialog/video-info-dialog.component.html b/src/app/dialogs/video-info-dialog/video-info-dialog.component.html index 234b77d..0c0c105 100644 --- a/src/app/dialogs/video-info-dialog/video-info-dialog.component.html +++ b/src/app/dialogs/video-info-dialog/video-info-dialog.component.html @@ -2,25 +2,29 @@
-
Name: 
+
Name: 
{{file.title}}
-
URL: 
+
URL: 
{{file.url}}
-
Uploader: 
+
Uploader: 
{{file.uploader ? file.uploader : 'N/A'}}
-
File size: 
+
File size: 
{{filesize(file.size)}}
-
Path: 
+
Path: 
{{file.path}}
+
+
Upload Date: 
+
{{file.upload_date}}
+
diff --git a/src/app/file-card/file-card.component.html b/src/app/file-card/file-card.component.html index fd4317d..ef79cf6 100644 --- a/src/app/file-card/file-card.component.html +++ b/src/app/file-card/file-card.component.html @@ -19,7 +19,7 @@ - + diff --git a/src/app/file-card/file-card.component.ts b/src/app/file-card/file-card.component.ts index 1c896c2..16f33ed 100644 --- a/src/app/file-card/file-card.component.ts +++ b/src/app/file-card/file-card.component.ts @@ -61,11 +61,12 @@ export class FileCardComponent implements OnInit { } - openSubscriptionInfoDialog() { + openVideoInfoDialog() { const dialogRef = this.dialog.open(VideoInfoDialogComponent, { data: { file: this.file, - } + }, + minWidth: '50vw' }); } 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 6c9b3b7..093eb94 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 @@ -61,7 +61,8 @@ export class SubscriptionFileCardComponent implements OnInit { const dialogRef = this.dialog.open(VideoInfoDialogComponent, { data: { file: this.file, - } + }, + minWidth: '50vw' }); } diff --git a/src/app/subscription/subscription/subscription.component.html b/src/app/subscription/subscription/subscription.component.html index d94a0a4..86ece5a 100644 --- a/src/app/subscription/subscription/subscription.component.html +++ b/src/app/subscription/subscription/subscription.component.html @@ -1,30 +1,44 @@ -
- -
-

- {{subscription.name}} -

-
- -
+
+ +
+

+ {{subscription.name}} +

+
+ +
-
-
-
-
-

Videos

-
-
- - - search - +
+
+
+
+ + + {{filterOption['value']['label']}} + + +
+
+ +
+
+
+
+
+

Videos

+
+
+ + + search + +
-
-
-
-
- +
+
+
+ +
diff --git a/src/app/subscription/subscription/subscription.component.scss b/src/app/subscription/subscription/subscription.component.scss index 10557a0..a9c26bb 100644 --- a/src/app/subscription/subscription/subscription.component.scss +++ b/src/app/subscription/subscription/subscription.component.scss @@ -8,6 +8,13 @@ left: 15px; } +.filter-select-parent { + position: absolute; + top: 0px; + left: 20px; + display: block; +} + .search-bar { transition: all .5s ease; position: relative; @@ -29,6 +36,7 @@ .flex-grid { width: 100%; display: block; + position: relative; } .col { width: 33%; diff --git a/src/app/subscription/subscription/subscription.component.ts b/src/app/subscription/subscription/subscription.component.ts index 0bcf008..f9ff060 100644 --- a/src/app/subscription/subscription/subscription.component.ts +++ b/src/app/subscription/subscription/subscription.component.ts @@ -17,6 +17,30 @@ export class SubscriptionComponent implements OnInit { search_mode = false; search_text = ''; searchIsFocused = false; + descendingMode = true; + filterProperties = { + 'upload_date': { + 'key': 'upload_date', + 'label': 'Upload Date', + 'property': 'upload_date' + }, + 'name': { + 'key': 'name', + 'label': 'Name', + 'property': 'title' + }, + 'file_size': { + 'key': 'file_size', + 'label': 'File Size', + 'property': 'size' + }, + 'duration': { + 'key': 'duration', + 'label': 'Duration', + 'property': 'duration' + } + }; + filterProperty = this.filterProperties['upload_date']; constructor(private postsService: PostsService, private route: ActivatedRoute, private router: Router) { } @@ -27,6 +51,12 @@ export class SubscriptionComponent implements OnInit { this.getSubscription(); this.getConfig(); } + + // set filter property to cached + const cached_filter_property = localStorage.getItem('filter_property'); + if (cached_filter_property && this.filterProperties[cached_filter_property]) { + this.filterProperty = this.filterProperties[cached_filter_property]; + } } goBack() { @@ -42,6 +72,7 @@ export class SubscriptionComponent implements OnInit { } else { this.filtered_files = this.files; } + this.filterByProperty(this.filterProperty['property']); }); } @@ -72,4 +103,23 @@ export class SubscriptionComponent implements OnInit { this.filtered_files = this.files.filter(option => option.id.toLowerCase().includes(filterValue)); } + filterByProperty(prop) { + if (this.descendingMode) { + this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? -1 : 1)); + } else { + this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? 1 : -1)); + } + } + + filterOptionChanged(value) { + // this.filterProperty = value; + this.filterByProperty(value['property']); + localStorage.setItem('filter_property', value['key']); + } + + toggleModeChange() { + this.descendingMode = !this.descendingMode; + this.filterByProperty(this.filterProperty['property']); + } + }