mirror of
https://github.com/block-core/blockcore-notes.git
synced 2024-09-28 22:10:42 +00:00
Add list to media-queue (#68)
This commit is contained in:
parent
737c450e0c
commit
f12629dadb
@ -0,0 +1,3 @@
|
||||
.queue-artwork {
|
||||
border-radius: 0 !important;
|
||||
}
|
@ -1,7 +1,16 @@
|
||||
<div class="page">
|
||||
|
||||
<button (click)="this.optionsService.values.showMediaPlayer = true">Open player</button>
|
||||
<div class="media-list">
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let item of media.media; let i = index">
|
||||
<img matListItemAvatar class="queue-artwork" [src]="utilities.sanitizeImageUrl(item.artwork)"/>
|
||||
<span matListItemTitle>{{i+1}}.{{item.title}}</span>
|
||||
<span matListItemLine>{{item.artist}}</span>
|
||||
<span matListItemMeta class="delete-button">
|
||||
<button (click)="remove(item)" mat-icon-button matTooltip="Remove from queue" color="grey">
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>
|
||||
</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
@ -1,6 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ApplicationState } from '../services/applicationstate';
|
||||
import { MediaItem } from '../services/interfaces';
|
||||
import { MediaService } from '../services/media';
|
||||
import { OptionsService } from '../services/options';
|
||||
import { Utilities } from '../services/utilities';
|
||||
|
||||
@Component({
|
||||
selector: 'app-queue',
|
||||
@ -8,10 +11,14 @@ import { OptionsService } from '../services/options';
|
||||
styleUrls: ['./queue.css'],
|
||||
})
|
||||
export class QueueComponent {
|
||||
constructor(private appState: ApplicationState, public optionsService: OptionsService) {}
|
||||
constructor(private appState: ApplicationState, public optionsService: OptionsService, public media: MediaService, public utilities: Utilities) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.appState.updateTitle('Media Queue');
|
||||
|
||||
}
|
||||
|
||||
remove(item: MediaItem) {
|
||||
this.media.dequeue (item);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { findIndex } from 'rxjs';
|
||||
import { MediaItem } from './interfaces';
|
||||
import { OptionsService } from './options';
|
||||
|
||||
@ -95,6 +96,14 @@ export class MediaService {
|
||||
// });
|
||||
}
|
||||
|
||||
dequeue (file : MediaItem) {
|
||||
const index = this.media.findIndex((e)=>e=== file);
|
||||
if (index === -1){
|
||||
return
|
||||
}
|
||||
this.media.splice(index, 1)
|
||||
}
|
||||
|
||||
async start() {
|
||||
if (this.index === -1) {
|
||||
this.index = 0;
|
||||
|
Loading…
Reference in New Issue
Block a user