TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-24 08:03:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added ability to view playlist in reverse order in the playlist editing dialog

Browse Source
This commit is contained in:
Isaac Abadi
2020-12-19 03:51:30 -05:00
parent eb7661c14a
commit 441a470990
3 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/dialogs/modify-playlist/modify-playlist.component.html
View File

@@ -8,14 +8,24 @@
</mat-form-field> </mat-form-field>
</div> </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 --> <!-- 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-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> </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"> <mat-menu #menu="matMenu">
<button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file}}</button> <button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file}}</button>
</mat-menu> </mat-menu>

5
src/app/dialogs/modify-playlist/modify-playlist.component.scss
View File

@@ -30,11 +30,6 @@ border: none;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
} }
.add-content-button {
margin-top: 15px;
margin-bottom: 10px;
}
.remove-item-button { .remove-item-button {
right: 10px; right: 10px;
position: absolute; position: absolute;

15
src/app/dialogs/modify-playlist/modify-playlist.component.ts
View File

@@ -15,6 +15,7 @@ export class ModifyPlaylistComponent implements OnInit {
available_files = []; available_files = [];
all_files = []; all_files = [];
playlist_updated = false; playlist_updated = false;
reverse_order = false;
constructor(@Inject(MAT_DIALOG_DATA) public data: any, constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private postsService: PostsService, private postsService: PostsService,
@@ -26,6 +27,8 @@ export class ModifyPlaylistComponent implements OnInit {
this.original_playlist = JSON.parse(JSON.stringify(this.data.playlist)); this.original_playlist = JSON.parse(JSON.stringify(this.data.playlist));
this.getFiles(); this.getFiles();
} }
this.reverse_order = localStorage.getItem('default_playlist_order_reversed') === 'true';
} }
getFiles() { getFiles() {
@@ -72,11 +75,23 @@ export class ModifyPlaylistComponent implements OnInit {
} }
removeContent(index) { removeContent(index) {
if (this.reverse_order) {
index = this.playlist.fileNames.length - 1 - index;
}
this.playlist.fileNames.splice(index, 1); this.playlist.fileNames.splice(index, 1);
this.processFiles(); this.processFiles();
} }
togglePlaylistOrder() {
this.reverse_order = !this.reverse_order;
localStorage.setItem('default_playlist_order_reversed', '' + this.reverse_order);
}
drop(event: CdkDragDrop<string[]>) { 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); moveItemInArray(this.playlist.fileNames, event.previousIndex, event.currentIndex);
} }