mirror of
https://github.com/block-core/blockcore-notes.git
synced 2024-09-29 06:20: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">
|
<div class="page">
|
||||||
|
<div class="media-list">
|
||||||
<button (click)="this.optionsService.values.showMediaPlayer = true">Open player</button>
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { ApplicationState } from '../services/applicationstate';
|
import { ApplicationState } from '../services/applicationstate';
|
||||||
|
import { MediaItem } from '../services/interfaces';
|
||||||
|
import { MediaService } from '../services/media';
|
||||||
import { OptionsService } from '../services/options';
|
import { OptionsService } from '../services/options';
|
||||||
|
import { Utilities } from '../services/utilities';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-queue',
|
selector: 'app-queue',
|
||||||
@ -8,10 +11,14 @@ import { OptionsService } from '../services/options';
|
|||||||
styleUrls: ['./queue.css'],
|
styleUrls: ['./queue.css'],
|
||||||
})
|
})
|
||||||
export class QueueComponent {
|
export class QueueComponent {
|
||||||
constructor(private appState: ApplicationState, public optionsService: OptionsService) {}
|
constructor(private appState: ApplicationState, public optionsService: OptionsService, public media: MediaService, public utilities: Utilities) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.appState.updateTitle('Media Queue');
|
this.appState.updateTitle('Media Queue');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
remove(item: MediaItem) {
|
||||||
|
this.media.dequeue (item);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||||
|
import { findIndex } from 'rxjs';
|
||||||
import { MediaItem } from './interfaces';
|
import { MediaItem } from './interfaces';
|
||||||
import { OptionsService } from './options';
|
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() {
|
async start() {
|
||||||
if (this.index === -1) {
|
if (this.index === -1) {
|
||||||
this.index = 0;
|
this.index = 0;
|
||||||
|
Loading…
Reference in New Issue
Block a user