From 441a470990a7a689897ee0e4a0e10e179293d527 Mon Sep 17 00:00:00 2001
From: Isaac Abadi <IsaacMGrynsztein@gmail.com>
Date: Sat, 19 Dec 2020 03:51:30 -0500
Subject: [PATCH] Added ability to view playlist in reverse order in the
 playlist editing dialog

---
 .../modify-playlist.component.html            | 20 ++++++++++++++-----
 .../modify-playlist.component.scss            |  5 -----
 .../modify-playlist.component.ts              | 15 ++++++++++++++
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/app/dialogs/modify-playlist/modify-playlist.component.html b/src/app/dialogs/modify-playlist/modify-playlist.component.html
index d35db91..69f4cad 100644
--- a/src/app/dialogs/modify-playlist/modify-playlist.component.html
+++ b/src/app/dialogs/modify-playlist/modify-playlist.component.html
@@ -8,14 +8,24 @@
         </mat-form-field>
     </div>
 
+    <div style="margin-bottom: 10px; height: 40px;">
+        <div style="float: left">
+            <span *ngIf="reverse_order === false" i18n="Normal order">Normal order&nbsp;</span>
+            <span *ngIf="reverse_order === true" i18n="Reverse order">Reverse order&nbsp;</span>
+            <button (click)="togglePlaylistOrder()" mat-icon-button><mat-icon>{{!reverse_order ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+        </div>
+
+        <div style="float: right">
+            <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu"><ng-container i18n="Add content">Add content</ng-container></button>
+        </div>
+    </div>
+
     <!-- Playlist order -->
     <mat-button-toggle-group class="media-list" cdkDropList (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-        <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of playlist.fileNames; let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
+        <!-- The following for loop can be optimized but it requires a pipe https://stackoverflow.com/a/35703364/8088021 -->
+        <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of (reverse_order ? playlist.fileNames.slice().reverse() : playlist.fileNames); let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
     </mat-button-toggle-group>
-
-    <div class="add-content-button">
-        <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu"><ng-container i18n="Add more content">Add more content</ng-container></button>
-    </div>
+    
     <mat-menu #menu="matMenu">
         <button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file}}</button>
     </mat-menu>
diff --git a/src/app/dialogs/modify-playlist/modify-playlist.component.scss b/src/app/dialogs/modify-playlist/modify-playlist.component.scss
index 84d3c54..0be9a78 100644
--- a/src/app/dialogs/modify-playlist/modify-playlist.component.scss
+++ b/src/app/dialogs/modify-playlist/modify-playlist.component.scss
@@ -30,11 +30,6 @@ border: none;
 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.add-content-button {
-margin-top: 15px;
-margin-bottom: 10px;
-}
-
 .remove-item-button {
     right: 10px;
     position: absolute;
diff --git a/src/app/dialogs/modify-playlist/modify-playlist.component.ts b/src/app/dialogs/modify-playlist/modify-playlist.component.ts
index 18db662..414fc92 100644
--- a/src/app/dialogs/modify-playlist/modify-playlist.component.ts
+++ b/src/app/dialogs/modify-playlist/modify-playlist.component.ts
@@ -15,6 +15,7 @@ export class ModifyPlaylistComponent implements OnInit {
   available_files = [];
   all_files = [];
   playlist_updated = false;
+  reverse_order = false;
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: any,
               private postsService: PostsService,
@@ -26,6 +27,8 @@ export class ModifyPlaylistComponent implements OnInit {
       this.original_playlist = JSON.parse(JSON.stringify(this.data.playlist));
       this.getFiles();
     }
+
+    this.reverse_order = localStorage.getItem('default_playlist_order_reversed') === 'true';
   }
 
   getFiles() {
@@ -72,11 +75,23 @@ export class ModifyPlaylistComponent implements OnInit {
   }
 
   removeContent(index) {
+    if (this.reverse_order) {
+      index = this.playlist.fileNames.length - 1 - index;
+    }
     this.playlist.fileNames.splice(index, 1);
     this.processFiles();
   }
 
+  togglePlaylistOrder() {
+    this.reverse_order = !this.reverse_order;
+    localStorage.setItem('default_playlist_order_reversed', '' + this.reverse_order);
+  }
+
   drop(event: CdkDragDrop<string[]>) {
+    if (this.reverse_order) {
+      event.previousIndex = this.playlist.fileNames.length - 1 - event.previousIndex;
+      event.currentIndex = this.playlist.fileNames.length - 1 - event.currentIndex;
+    }
     moveItemInArray(this.playlist.fileNames, event.previousIndex, event.currentIndex);
   }