Unified file card now supports playlists
Added custom playlists component Removed legacy file manager from home screenpull/192/head
Isaac Abadi
5 years ago
parent
fcaf8b5a62
commit
1cdc1640ac
@ -0,0 +1,13 @@
|
|||||||
|
<div *ngIf="playlists && playlists.length > 0">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div *ngFor="let playlist of playlists; let i = index" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
|
||||||
|
<app-unified-file-card [index]="i" [card_size]="card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)"></app-unified-file-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="playlists && playlists.length === 0" style="text-align: center;">
|
||||||
|
No playlists available. Create one from your downloading files by clicking the blue plus button.
|
||||||
|
</div>
|
||||||
|
<div class="add-playlist-button"><button (click)="openCreatePlaylistDialog()" mat-fab><mat-icon>add</mat-icon></button></div>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
.add-playlist-button {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-col {
|
||||||
|
max-width: 240px;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { CustomPlaylistsComponent } from './custom-playlists.component';
|
||||||
|
|
||||||
|
describe('CustomPlaylistsComponent', () => {
|
||||||
|
let component: CustomPlaylistsComponent;
|
||||||
|
let fixture: ComponentFixture<CustomPlaylistsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ CustomPlaylistsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(CustomPlaylistsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { PostsService } from 'app/posts.services';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
import { CreatePlaylistComponent } from 'app/create-playlist/create-playlist.component';
|
||||||
|
import { ModifyPlaylistComponent } from 'app/dialogs/modify-playlist/modify-playlist.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-custom-playlists',
|
||||||
|
templateUrl: './custom-playlists.component.html',
|
||||||
|
styleUrls: ['./custom-playlists.component.scss']
|
||||||
|
})
|
||||||
|
export class CustomPlaylistsComponent implements OnInit {
|
||||||
|
|
||||||
|
playlists = null;
|
||||||
|
playlists_received = false;
|
||||||
|
card_size = 'medium';
|
||||||
|
downloading_content = {'video': {}, 'audio': {}};
|
||||||
|
|
||||||
|
constructor(private postsService: PostsService, private router: Router, private dialog: MatDialog) { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.postsService.service_initialized.subscribe(init => {
|
||||||
|
if (init) {
|
||||||
|
this.getAllPlaylists();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getAllPlaylists() {
|
||||||
|
this.playlists_received = false;
|
||||||
|
this.postsService.getAllFiles().subscribe(res => {
|
||||||
|
this.playlists = res['playlists'];
|
||||||
|
this.playlists_received = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// creating a playlist
|
||||||
|
openCreatePlaylistDialog() {
|
||||||
|
const dialogRef = this.dialog.open(CreatePlaylistComponent, {
|
||||||
|
data: {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
if (result) {
|
||||||
|
this.getAllPlaylists();
|
||||||
|
this.postsService.openSnackBar('Successfully created playlist!', '');
|
||||||
|
} else if (result === false) {
|
||||||
|
this.postsService.openSnackBar('ERROR: failed to create playlist!', '');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
goToPlaylist(playlist) {
|
||||||
|
const playlistID = playlist.id;
|
||||||
|
const type = playlist.type;
|
||||||
|
|
||||||
|
if (playlist) {
|
||||||
|
if (this.postsService.config['Extra']['download_only_mode']) {
|
||||||
|
this.downloading_content[type][playlistID] = true;
|
||||||
|
this.downloadPlaylist(playlist.fileNames, type, playlist.name, playlistID);
|
||||||
|
} else {
|
||||||
|
localStorage.setItem('player_navigator', this.router.url);
|
||||||
|
const fileNames = playlist.fileNames;
|
||||||
|
this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID, uid: playlistID}]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// playlist not found
|
||||||
|
console.error(`Playlist with ID ${playlistID} not found!`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
downloadPlaylist(fileNames, type, zipName = null, playlistID = null) {
|
||||||
|
this.postsService.downloadFileFromServer(fileNames, type, zipName).subscribe(res => {
|
||||||
|
if (playlistID) { this.downloading_content[type][playlistID] = false };
|
||||||
|
const blob: Blob = res;
|
||||||
|
saveAs(blob, zipName + '.zip');
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
deletePlaylist(args) {
|
||||||
|
const playlist = args.file;
|
||||||
|
const index = args.index;
|
||||||
|
const playlistID = playlist.id;
|
||||||
|
this.postsService.removePlaylist(playlistID, 'audio').subscribe(res => {
|
||||||
|
if (res['success']) {
|
||||||
|
this.playlists.splice(index, 1);
|
||||||
|
this.postsService.openSnackBar('Playlist successfully removed.', '');
|
||||||
|
}
|
||||||
|
this.getAllPlaylists();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
editPlaylistDialog(args) {
|
||||||
|
const playlist = args.playlist;
|
||||||
|
const index = args.index;
|
||||||
|
const dialogRef = this.dialog.open(ModifyPlaylistComponent, {
|
||||||
|
data: {
|
||||||
|
playlist: playlist,
|
||||||
|
width: '65vw'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(res => {
|
||||||
|
// updates playlist in file manager if it changed
|
||||||
|
if (dialogRef.componentInstance.playlist_updated) {
|
||||||
|
this.playlists[index] = dialogRef.componentInstance.original_playlist;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue