_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

jukebox

Browse Source
This commit is contained in:
_Bastler 2022-01-03 12:40:17 +01:00
parent 86c48ac23c
commit eb6e3f93ba
3 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app-routing.module.ts
View File

@ -37,7 +37,7 @@ import { JukeboxComponent } from './pages/jukebox/jukebox.compontent';
const routes: Routes = [
{ path: 'profile/:username', component: UserComponent, canActivate: [ AuthUpdateGuard ] },
{ path: 'edit-profile', component: ProfileComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'partey/jukebox', component: JukeboxComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'jukebox', component: JukeboxComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'partey/manage', component: ParteyComponent, canActivate: [ AuthenticatedGuard ] },
{
path: '', component: MainComponent, children: [
@ -73,6 +73,7 @@ const routes: Routes = [
{ path: 'jitsi', component: JitsiComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'partey', component: ParteyComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'partey/timeslots', component: ParteyTimeslotsComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'partey/jukebox', component: JukeboxComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'minetest/accounts', component: MinetestAccountsComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'dividertest', component: DividertestComponent },
{ path: 'urlshortener', component: UrlShortenerComponent, canActivate: [ AuthenticatedGuard ] },

24
src/app/pages/jukebox/jukebox.component.html
View File

@ -4,7 +4,19 @@
<mat-card-header>
<mat-card-title>{{'jukebox' | i18n}}</mat-card-title>
</mat-card-header>
<mat-card-title-group *ngIf="currentTrack">
<img *ngIf="getImageUrl(currentTrack)" mat-card-sm-image [src]="getImageUrl(currentTrack)">
<mat-card-title><small>{{'jukebox.current' | i18n}}</small></mat-card-title>
<mat-card-title>{{currentTrack.name}}</mat-card-title>
<mat-card-subtitle>
<span *ngFor="let artist of currentTrack.artists; let i = index">
{{artist.name}}<span *ngIf="(i+1) < currentTrack.artists.length">, </span>
</span>
</mat-card-subtitle>
</mat-card-title-group>
<mat-card-content>
<mat-divider></mat-divider>
<br />
<mat-form-field>
<input matInput [formControl]="searchFormControl" placeholder="{{'jukebox.search' | i18n}}">
</mat-form-field>
@ -21,7 +33,7 @@
<p *ngIf="timeout">{{'jukebox.timeout' | i18n:timeout}}</p>
<div *ngIf="searchResult && searchResult.items">
<mat-card class="track" *ngFor="let track of searchResult.items" (click)="queue(track)">
<mat-card class="track" *ngFor="let track of searchResult.items; let i = index" (click)="queue(track)">
<mat-card-title-group>
<img *ngIf="getImageUrl(track)" mat-card-sm-image [src]="getImageUrl(track)">
<mat-card-title>{{track.name}}</mat-card-title>
@ -32,10 +44,14 @@
</mat-card-subtitle>
</mat-card-title-group>
</mat-card>
<mat-card *ngIf="searchResult && ((searchResult.offset + searchResult.limit) < searchResult.total)">
<mat-card-actions>
<button mat-button (click)="searchMore()"> {{'jukebox.search.more' | i18n}}</button>
</mat-card-actions>
</mat-card>
</div>
<button *ngIf="searchResult && ((searchResult.offset + searchResult.limit) < searchResult.total)" mat-button
(click)="searchMore()"> {{'jukebox.search.more' | i18n}}</button>
</div>
<mat-card class="accent" *ngIf="wait">
@ -72,4 +88,4 @@
</mat-card-content>
<mat-card-actions>
</mat-card-actions>
</mat-card>
</mat-card>

5
src/app/pages/jukebox/jukebox.compontent.ts
View File

@ -20,6 +20,7 @@ export class JukeboxComponent implements OnInit {
timeout: number = 0;
timer;
searchResult: any;
currentTrack: any;
active: boolean = false;
wait: boolean = false;
forbidden: boolean = false;
@ -47,6 +48,10 @@ export class JukeboxComponent implements OnInit {
this.forbidden = false;
this.unavailable = false;
this.jukeboxService.check().subscribe((response) => {
if (response) {
this.currentTrack = response;
}
this.active = true;
}, (error) => {
this.active = false;