diff --git a/backend/app.js b/backend/app.js index 3fdd32cb..9fbecb91 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 234b77d8..0c0c1057 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 fd4317d1..ef79cf6a 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 1c896c26..16f33ed1 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 6c9b3b77..093eb948 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 d94a0a46..86ece5aa 100644 --- a/src/app/subscription/subscription/subscription.component.html +++ b/src/app/subscription/subscription/subscription.component.html @@ -1,30 +1,44 @@ -
- -
-

- {{subscription.name}} -

-
- -
- -
-
-
-
-

Videos

-
-
- - - search - -
+
+ +
+

+ {{subscription.name}} +

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

Videos

+
+
+ + + search + +
+
+
+
+
+ +
diff --git a/src/app/subscription/subscription/subscription.component.scss b/src/app/subscription/subscription/subscription.component.scss index 10557a0c..a9c26bb6 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 0bcf0089..f9ff060f 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']); + } + }