Fixed an issue where subs would only display 10 of their videos in the subscription component (#851)

Fixed an issue where a sub would get stuck in the downloading state

Fixed UI bug in the subscriptions component

backend/subscriptions.js

@@ -432,7 +432,8 @@ async function getAllSubscriptions() {
 }
 
 async function getSubscription(subID) {
-    const sub = await db_api.getRecord('subscriptions', {id: subID});
+    // stringify and parse because we may override the 'downloading' property
+    const sub = JSON.parse(JSON.stringify(await db_api.getRecord('subscriptions', {id: subID})));
     // now with the download_queue, we may need to override 'downloading'
     const current_downloads = await db_api.getRecords('download_queue', {running: true, sub_id: sub.id}, true);
     if (!sub['downloading']) sub['downloading'] = current_downloads > 0;

src/app/components/recent-videos/recent-videos.component.ts

@@ -215,7 +215,7 @@ export class RecentVideosComponent implements OnInit {
     const range = [current_file_index, current_file_index + this.pageSize];
     const fileTypeFilter = this.getFileTypeFilter();
     const favoriteFilter = this.getFavoriteFilter();
-    this.postsService.getAllFiles(sort, range, this.search_mode ? this.search_text : null, fileTypeFilter as FileTypeFilter, favoriteFilter, this.sub_id).subscribe(res => {
+    this.postsService.getAllFiles(sort, this.usePaginator ? range : null, this.search_mode ? this.search_text : null, fileTypeFilter as FileTypeFilter, favoriteFilter, this.sub_id).subscribe(res => {
       this.file_count = res['file_count'];
       this.paged_data = res['files'];
       for (let i = 0; i < this.paged_data.length; i++) {

src/app/subscription/subscription/subscription.component.html

@@ -9,8 +9,9 @@
     <mat-divider style="width: 80%; margin: 0 auto"></mat-divider>
     <br/>
 
-    <div *ngIf="subscription">
-        <app-recent-videos #recentVideos [sub_id]="subscription.id" [usePaginator]="false"></app-recent-videos>
+    <!-- Extra margin added for floating buttons to have room -->
+    <div style="margin-bottom: 100px;" *ngIf="subscription">
+        <app-recent-videos #recentVideos [sub_id]="subscription.id"></app-recent-videos>
     </div>
     <button class="edit-button" color="primary" (click)="editSubscription()" [disabled]="downloading" matTooltip="Edit" i18n-matTooltip="Edit" mat-fab><mat-icon class="save-icon">edit</mat-icon></button>
     <button class="watch-button" color="primary" (click)="watchSubscription()" matTooltip="Play all" i18n-matTooltip="Play all" mat-fab><mat-icon class="save-icon">video_library</mat-icon></button>

src/app/subscription/subscription/subscription.component.scss

@@ -62,15 +62,18 @@
     left: 25px;
     position: fixed;
     bottom: 25px;
+    z-index: 99999;
 }
 
 .save-icon {
     bottom: 1px;
     position: relative;
+    z-index: 99999;
 }
 
 .watch-button {
     left: 90px;
     position: fixed;
     bottom: 25px;
+    z-index: 99999;
 }