kangaroo-and-rabbit/karusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

[DEV] continue migration to Angular17

Browse Source
This commit is contained in:
Edouard DUPIN 2024-02-23 00:37:47 +01:00
parent d37ce25621
commit 619973459a
25 changed files with 666 additions and 614 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/app/app.module.ts
View File

@ -22,7 +22,7 @@ import {
} from './scene';
import { GenderService, DataService, PlaylistService, ArtistService, AlbumService, TrackService, ArianeService, PlayerService } from './service';
import { UploadScene } from './scene/upload/upload';
import { ElementSeriesComponent, ElementTrackComponent, ElementSeasonComponent, ElementVideoComponent, ElementPlayerAudioComponent } from './component';
import { ElementSeriesComponent, ElementTrackComponent, ElementSeasonComponent, ElementVideoComponent, ElementPlayerAudioComponent, DescriptionAreaComponent } from './component';
import { common_module_declarations, common_module_imports, common_module_providers, common_module_exports } from 'common/module';
@NgModule({
@ -35,6 +35,7 @@ import { common_module_declarations, common_module_imports, common_module_provid
ElementSeasonComponent,
ElementVideoComponent,
ElementPlayerAudioComponent,
DescriptionAreaComponent,
PopInCreateType,
HomeScene,

42
front/src/app/component/description-area/description-area.html Normal file
View File

@ -0,0 +1,42 @@
<div class="fill-title">
<div class="description-area">
@if(title) {
<div class="shadow-text title">
{{title}}
</div>
}
@if(name) {
<div class="shadow-text sub-title-main">
{{name}}
</div>
}
@if(description) {
<div class="description">
{{description}}
</div>
}
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
<div style="flex:1;"></div>
</div>
</div>
@if (cover1 && cover1.length > 0) {
<div class="cover-area">
<div class="cover">
<img src="{{cover1[0]}}"/>
</div>
</div>
}
@if (cover2 && cover2.length > 0) {
<div class="cover-area">
<div class="cover">
<img src="{{cover2[0]}}"/>
</div>
</div>
}
</div>

0
front/src/app/component/description-area/description-area.less Normal file
View File

34
front/src/app/component/description-area/description-area.ts Normal file
View File

@ -0,0 +1,34 @@
/** @file
* @author Edouard DUPIN
* @copyright 2018, Edouard DUPIN, all right reserved
* @license PROPRIETARY (see license file)
*/
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { isArrayOf, isNullOrUndefined, isNumberFinite } from 'common/utils';
import { NodeData } from 'common/model';
import { GenderService, DataService } from 'app/service';
@Component({
selector: 'description-area',
templateUrl: './description-area.html',
styleUrls: ['./description-area.less']
})
export class DescriptionAreaComponent {
@Input() title: string;
@Input() name?: string;
@Input() description?: string;
@Input() cover1?: number[];
@Input() cover2?: number[];
@Output() play = new EventEmitter<void>();
@Output() shuffle = new EventEmitter<void>();
playShuffle(event: any): void {
this.shuffle.emit();
}
playAll(event: any): void {
this.play.emit();
}
}

93
front/src/app/component/element-player-audio/element-player-audio.html
View File

@ -1,45 +1,52 @@
<div *ngIf="mediaSource">
<audio width="1" height="1" src="{{mediaSource}}"
#mediaPlayer
preload
(play)="changeStateToPlay()"
(pause)="changeStateToPause()"
(timeupdate)="changeTimeupdate($event.currentTime)"
(durationchange)="changeDurationchange($event.duration)"
(loadedmetadata)="changeMetadata()"
autoplay
(ended)="onAudioEnded()"
>
</audio>
<div class="controls">
<div class="controls-inner">
<div class="title text-ellipsis">
<label class="unselectable">{{dataTitle}}</label>
</div>
<div class="text-ellipsis">
<label class="unselectable">{{dataAuthor}} / {{dataAlbum}}</label>
</div>
<div class="timer-slider">
<input type="range" min="0" class="slider"
[value]="currentTime"
[max]="duration"
(input)="seek($event.target)">
</div>
<div class="flex-row">
<label class="unselectable">{{currentTimeDisplay}}</label>
<label class="unselectable flex-row-last">{{durationDisplay}}</label>
</div>
<div class="control">
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
<button (click)="onStop()"><i class="material-icons">stop</i></button>
<div style="margin:auto"></div>
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button>
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
<button [disabled]="haveNext" (click)="onNext()"><i class="material-icons">navigate_next</i></button>
<div style="margin:auto"></div>
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button>
@if(mediaSource) {
<div>
<audio width="1" height="1" src="{{mediaSource}}"
#mediaPlayer
preload
(play)="changeStateToPlay()"
(pause)="changeStateToPause()"
(timeupdate)="changeTimeupdate($event.currentTime)"
(durationchange)="changeDurationchange($event.duration)"
(loadedmetadata)="changeMetadata()"
autoplay
(ended)="onAudioEnded()"
>
</audio>
<div class="controls">
<div class="controls-inner">
<div class="title text-ellipsis">
<label class="unselectable">{{dataTitle}}</label>
</div>
<div class="text-ellipsis">
<label class="unselectable">{{dataAuthor}} / {{dataAlbum}}</label>
</div>
<div class="timer-slider">
<input type="range" min="0" class="slider"
[value]="currentTime"
[max]="duration"
(input)="seek($event.target)">
</div>
<div class="flex-row">
<label class="unselectable">{{currentTimeDisplay}}</label>
<label class="unselectable flex-row-last">{{durationDisplay}}</label>
</div>
<div class="control">
@if(!isPlaying) {
<button (click)="onPlay()"><i class="material-icons">play_arrow</i></button>
}
@else {
<button (click)="onPause()"><i class="material-icons">pause</i></button>
}
<button (click)="onStop()"><i class="material-icons">stop</i></button>
<div style="margin:auto"></div>
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button>
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
<button [disabled]="haveNext" (click)="onNext()"><i class="material-icons">navigate_next</i></button>
<div style="margin:auto"></div>
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button>
</div>
</div>
</div>
</div>
</div>
}

72
front/src/app/component/element-season/element-season.html
View File

@ -1,41 +1,45 @@
<div class="imgContainer-small">
<div *ngIf="covers">
<!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/>
</div>
<div *ngIf="!covers" class="noImage">
</div>
@if(covers && covers.length > 0) {
<div>
<img src="{{covers[0]}}"/>
</div>
}
@else {
<div class="noImage"></div>
}
</div>
<div class="season-small">
{{prefixName}} {{numberAlbum}}
</div>
<div class="description-small" *ngIf="countSubType && (!count || count == 0)">
No {{countSubType}}
</div>
<div class="description-small" *ngIf="countSubType && count > 1">
{{count}} {{countSubType}}s
</div>
<div class="description-small" *ngIf="countSubType && count == 1">
{{count}} {{countSubType}}
</div>
@if(countSubType) {
<div class="description-small">
@if(!count || count == 0) {
No {{countSubType}}
}
@else {
{{count}} {{countSubType}}{{count>1?"s":""}}
}
</div>
}
<div class="description-small" *ngIf="countSubType2 && (!count2 || count2 == 0)">
No {{countSubType2}}
</div>
<div class="description-small" *ngIf="countSubType2 && count2 > 1">
{{count2}} {{countSubType2}}s
</div>
<div class="description-small" *ngIf="countSubType2 && count2 == 1">
{{count2}} {{countSubType2}}
</div>
<div class="description-small" *ngIf="subValueData">
{{subValues}}: {{subValueData}}
</div>
<div class="description-small" *ngIf="!description">
{{description}}
</div>
@if(countSubType2) {
<div class="description-small">
@if(!count2 || count2 == 0) {
No {{countSubType2}}
}
@else {
{{count2}} {{countSubType2}}{{count2>1?"s":""}}
}
</div>
}
@if(subValueData) {
<div class="description-small">
{{subValues}}: {{subValueData}}
</div>
}
@if(!description) {
<div class="description-small">
{{description}}
</div>
}

24
front/src/app/component/element-series/element-series.html
View File

@ -1,17 +1,21 @@
<div>
<div class="count-base">
<div class="count" *ngIf="counttrack">
{{counttrack}}
</div>
@if(counttrack) {
<div class="count">
{{counttrack}}
</div>
}
</div>
<div class="imgContainer-small">
<div *ngIf="covers">
<!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/>
</div>
<div *ngIf="!covers" class="noImage">
</div>
@if(covers && covers.length > 0) {
<div>
<!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/>
</div>
}
@else {
<div class="noImage"></div>
}
</div>
<div class="title-small">
{{name}}

8
front/src/app/component/element-type/element-type.html
View File

@ -3,9 +3,11 @@
<span class="count">{{counttrack}}</span>
</div>
<div class="imgContainer-small">
<div *ngIf="covers">
<img src="{{covers[0]}}" class="miniature-small"/>
</div>
@if(covers && covers.length > 0) {
<div>
<img src="{{covers[0]}}" class="miniature-small"/>
</div>
}
</div>
<div class="title-small">
{{name}}

16
front/src/app/component/element-video/element-video.html
View File

@ -1,12 +1,14 @@
<div>
<div class="videoImgContainer">
<div *ngIf="covers">
<!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/>
</div>
<div *ngIf="!covers" class="noImage">
</div>
@if(covers && covers.length > 0) {
<div>
<!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/>
</div>
}
@else {
<div class="noImage"></div>
}
</div>
<div class="title-small" *ngIf="data">
{{episodeDisplay}} {{name}}

2
front/src/app/component/index.ts
View File

@ -1,3 +1,4 @@
import { DescriptionAreaComponent } from "./description-area/description-area";
import { ElementPlayerAudioComponent } from "./element-player-audio/element-player-audio";
import { ElementSeasonComponent } from "./element-season/element-season";
import { ElementSeriesComponent } from "./element-series/element-series";
@ -12,5 +13,6 @@ export {
ElementSeasonComponent,
ElementPlayerAudioComponent,
ElementTrackComponent,
DescriptionAreaComponent,
};

49
front/src/app/scene/album/album.html
View File

@ -1,49 +1,22 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area">
<div class="title">
{{name}}
</div>
<div class="title">
{{albumName}}
</div>
<div class="description" *ngIf="albumDescription">
{{albumDescription}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
@if (artistCovers) {
<div class="cover-area">
<div class="cover">
<img src="{{artistCovers[0]}}"/>
</div>
</div>
}
@if (albumCovers) {
<div class="cover-area">
<div class="cover">
<img src="{{albumCovers[0]}}"/>
</div>
</div>
}
</div>
<description-area
[title]="name"
[name]="albumName"
[description]="albumDescription"
[cover1]="artistCovers"
[cover2]="albumCovers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
@if (tracks) {
<div class="fill-content colomn_single">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
@for (data of tracks; track data.id;) {
<app-element-track
[element]="data"
(click)="onSelectTrack($event, data.id)"
(auxclick)="onSelectTrack($event, data.id)"></app-element-track>
(auxclick)="onSelectTrack($event, data.id)"/>
} @empty {
Aucune piste accessible.
}

4
front/src/app/scene/album/album.ts
View File

@ -108,7 +108,7 @@ export class AlbumScene implements OnInit {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
}
}
playAll(event: any): void {
playAll(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);
@ -116,7 +116,7 @@ export class AlbumScene implements OnInit {
this.playerService.clear();
this.playerService.setNewPlaylist(elements);
}
playShuffle(event: any): void {
playShuffle(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);

55
front/src/app/scene/album/albums.html
View File

@ -1,30 +1,13 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area">
<div class="title">
{{name}}
</div>
<div class="description" *ngIf="description">
{{description}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
<div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<description-area
[title]="name"
[description]="description"
[cover1]="covers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="albums">
<div class="clear"></div>
<div class="title">Album<span *ngIf="albums.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div class="title">Album{{albums.length > 1?"s":""}}: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div *ngFor="let data of albums"
class="item-list"
(click)="onSelectAlbum($event, data.id)"
@ -35,20 +18,20 @@
countSubType="Track"
[countSubTypeCallBack]="countTrack"
subValues="Artist"
[subValuesCallBack]="getArtistsString"
></app-element-season>
[subValuesCallBack]="getArtistsString"/>
</div>
</div>
<div class="fill-content colomn_mutiple" *ngIf="tracks">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<div *ngFor="let data of tracks" class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-video
[element]="data"
></app-element-video>
@if(tracks) {
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
@for (data of tracks; track data.id;) {
<div class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-video
[element]="data"/>
</div>
}
</div>
</div>
}
<div class="clear-end"></div>
</div>

6
front/src/app/scene/album/albums.ts
View File

@ -45,9 +45,9 @@ export class AlbumsScene implements OnInit {
return this.albumService.getArtists(albumId);
}
ngOnInit() {
const self = this;
this.getArtistsString = (id: number) => { return self.getArtistsStringCallback(id); };
this.countTrack = (id: number) => { return self.countTrackCallback(id); };
let self = this;
self.name = "All Albums";
self.description = "View all albums (no specific artist)";
@ -94,7 +94,7 @@ export class AlbumsScene implements OnInit {
this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 });
}
}
playAll(event: any): void {
playAll(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()
@ -109,7 +109,7 @@ export class AlbumsScene implements OnInit {
console.log(`error to get list o ftrack ...`)
});
}
playShuffle(event: any): void {
playShuffle(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()

55
front/src/app/scene/artist/artist-album.html
View File

@ -1,44 +1,23 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area">
<div class="shadow-text title">
{{name}}
</div>
<div class="shadow-text sub-title-main">
{{albumName}}
</div>
<div class="description" *ngIf="albumDescription">
{{albumDescription}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
<div class="cover-area" *ngIf="artistCovers" >
<div class="cover">
<img src="{{artistCovers[0]}}"/>
</div>
</div>
<div class="cover-area" *ngIf="albumCovers" >
<div class="cover">
<img src="{{albumCovers[0]}}"/>
</div>
</div>
</div>
<description-area
[title]="name"
[name]="albumName"
[description]="albumDescription"
[cover1]="artistCovers"
[cover2]="albumCovers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="tracks">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<app-element-track
*ngFor="let data of tracks"
[element]="data"
(click)="onSelectTrack($event, data.id)"
(auxclick)="onSelectTrack($event, data.id)"></app-element-track>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
@for (data of tracks; track data.id;) {
<app-element-track
[element]="data"
(click)="onSelectTrack($event, data.id)"
(auxclick)="onSelectTrack($event, data.id)"></app-element-track>
} @empty {
Aucune piste accessible.
}
</div>
<div class="clear-end"></div>
</div>

4
front/src/app/scene/artist/artist-album.ts
View File

@ -99,7 +99,7 @@ export class ArtistAlbumScene implements OnInit {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
}
}
playAll(event: any): void {
playAll(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);
@ -107,7 +107,7 @@ export class ArtistAlbumScene implements OnInit {
this.playerService.clear();
this.playerService.setNewPlaylist(elements);
}
playShuffle(event: any): void {
playShuffle(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);

67
front/src/app/scene/artist/artist.html
View File

@ -1,48 +1,33 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area ">
<div class="shadow-text title">
{{name}}
</div>
<div class="description" *ngIf="description">
{{description}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
<description-area
[title]="name"
[description]="description"
[cover1]="covers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
@if(albums) {
<div class="fill-content colomn_single">
<div class="clear"></div>
<div class="title">Album{{albums.length > 1?"s":""}}:</div>
<div *ngFor="let data of albums" class="item-list" (click)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)">
<app-element-season
[element]="data"
countSubType="Track"
[countSubTypeCallBack]="countTrack"
></app-element-season>
</div>
</div>
<div class="cover-area" *ngIf="covers" >
<div class="cover">
<img src="{{covers[0]}}"/>
}
@if(tracks) {
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
<div *ngFor="let data of tracks" class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-video
[element]="data"
></app-element-video>
</div>
</div>
</div>
<div class="fill-content colomn_single" *ngIf="albums">
<div class="clear"></div>
<div class="title" *ngIf="albums.length > 1">Albums:</div>
<div class="title" *ngIf="albums.length == 1">Album:</div>
<div *ngFor="let data of albums" class="item-list" (click)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)">
<app-element-season
[element]="data"
countSubType="Track"
[countSubTypeCallBack]="countTrack"
></app-element-season>
</div>
</div>
<div class="fill-content colomn_mutiple" *ngIf="tracks">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<div *ngFor="let data of tracks" class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-video
[element]="data"
></app-element-video>
</div>
</div>
}
<div class="clear-end"></div>
</div>

4
front/src/app/scene/artist/artist.ts
View File

@ -100,7 +100,7 @@ export class ArtistScene implements OnInit {
return this.albumService.getAllTracksForAlbums(elements);
}
playAll(event: any): void {
playAll(): void {
this.playerService.clear();
let self = this;
this.getAllTracksIds()
@ -111,7 +111,7 @@ export class ArtistScene implements OnInit {
console.log(`error to get list o ftrack ...`)
});
}
playShuffle(event: any): void {
playShuffle(): void {
this.playerService.clear();
let self = this;
this.getAllTracksIds()

51
front/src/app/scene/artist/artists.html
View File

@ -1,39 +1,24 @@
<div class="generic-page">
<div class="fill-title">
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="shadow-text title">
{{name}}
</div>
<div class="description" *ngIf="description">
{{description}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
<div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<description-area
[title]="name"
[description]="description"
[cover1]="covers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="artists">
<div class="clear"></div>
<div class="title">Artist<span *ngIf="artists.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div *ngFor="let data of artists" class="item-list" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<app-element-season
[element]="data"
countSubType="Album"
[countSubTypeCallBack]="countAlbum"
countSubType2="Track"
[countSubType2CallBack]="countTrack"
></app-element-season>
</div>
<div class="title">Artist{{artists.length > 1?"s":""}}: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
@for (data of artists; track data.id;) {
<div class="item-list" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<app-element-season
[element]="data"
countSubType="Album"
[countSubTypeCallBack]="countAlbum"
countSubType2="Track"
[countSubType2CallBack]="countTrack"
></app-element-season>
</div>
}
</div>
<div class="clear-end"></div>
</div>

4
front/src/app/scene/artist/artists.ts
View File

@ -71,7 +71,7 @@ export class ArtistsScene implements OnInit {
countAlbumCallback(artistId: number): Promise<Number> {
return this.artistService.countAlbum(artistId);
}
playAll(event: any): void {
playAll(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()
@ -86,7 +86,7 @@ export class ArtistsScene implements OnInit {
console.log(`error to get list o ftrack ...`)
});
}
playShuffle(event: any): void {
playShuffle(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()

24
front/src/app/scene/gender/gender.html
View File

@ -1,9 +1,11 @@
<div class="generic-page">
<div class="fill-title colomn_mutiple">
<div class="cover-area">
<div class="cover" *ngIf="cover != null" >
<img src="{{cover}}"/>
</div>
@if (cover != null) {
<div class="cover">
<img src="{{cover}}"/>
</div>
}
</div>
<div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title">
@ -16,15 +18,19 @@
</div>
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div *ngFor="let data of artists" class="item" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<app-element-artist [element]="data"></app-element-artist>
</div>
@for (data of artists; track data.id;) {
<div class="item" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<!--<app-element-artist [element]="data"/>-->
</div>
}
</div>
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div *ngFor="let data of tracks" class="item item-track" (click)="onSelectMedia($event, data.id)" (auxclick)="onSelectMedia($event, data.id)">
<app-element-track [element]="data"></app-element-track>
</div>
@for (data of tracks; track data.id;) {
<div class="item item-track" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-track [element]="data"/>
</div>
}
</div>
<div class="clear"></div>
</div>

8
front/src/app/scene/home/home.html
View File

@ -3,9 +3,11 @@
Karusic
</div>
<div class="fill-all colomn_mutiple">
<div *ngFor="let data of dataList" class="item-home" (click)="onSelectType($event, data.id)" (auxclick)="onSelectType($event, data.id)">
<app-element-type [element]="data"></app-element-type>
</div>
@for (data of dataList; track data.id) {
<div class="item-home" (click)="onSelectType($event, data.id)" (auxclick)="onSelectType($event, data.id)">
<app-element-type [element]="data"></app-element-type>
</div>
}
<div class="clear"></div>
</div>
</div>

8
front/src/app/scene/playlist/playlist.html
View File

@ -1,8 +1,10 @@
<div class="generic-page">
<div class="fill-all colomn_mutiple">
<div *ngFor="let data of tracks" class="item item-track" (click)="onSelectTrack($event, data)" (auxclick)="onSelectTrack($event, data)">
<app-element-track [element]="data"></app-element-track>
</div>
@for (data of tracks; track data.id) {
<div class="item item-track" (click)="onSelectTrack($event, data)" (auxclick)="onSelectTrack($event, data)">
<app-element-track [element]="data"></app-element-track>
</div>
}
<div class="clear"></div>
</div>
</div>

256
front/src/app/scene/track/track.html
View File

@ -12,122 +12,156 @@
Please wait.
</div>
</div>
<div class="fill-all" *ngIf="!mediaIsNotFound && !mediaIsLoading && !playTrack">
<div class="title">
{{name}}
</div>
<div class="cover-full">
<div class="cover">
<div class="cover-image" *ngIf="covers">
<img src="{{covers[0]}}"/>
@if(!mediaIsNotFound && !mediaIsLoading && !playTrack) {
<div class="fill-all">
<div class="title">
{{name}}
</div>
<div class="cover-full">
<div class="cover">
@if (covers && covers.length > 0) {
<div class="cover-image" *ngIf="">
<img src="{{covers[0]}}"/>
</div>
}
@else {
<div class="cover-no-image"></div>
}
<div class="cover-button">
<button (click)="onRequirePlay()">
<i class="material-icons big-button">play_circle_outline</i>
</button>
</div>
</div>
<div class="cover-no-image" *ngIf="covers"></div>
<div class="cover-button">
<button (click)="onRequirePlay()">
<i class="material-icons big-button">play_circle_outline</i>
@if (haveNext !== null) {
<div class="cover-button-next">
<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
<i class="material-icons big-button">arrow_forward_ios</i>
</button>
</div>
}
@if (havePrevious !== null) {
<div class="cover-button-previous">
<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
<i class="material-icons big-button">arrow_back_ios</i>
</button>
</div>
}
</div>
<div class="clear"></div>
@if (artistName!=null) {
<div class="episode">
<b>Artist:</b> {{artistName}}
</div>
}
@if (albumName!=null) {
<div class="episode">
<b>Album:</b> {{albumName}}
</div>
}
@if (episode!=null) {
<div class="episode">
<b>Episode:</b> {{episode}}
</div>
}
<div class="episode">
<b>generatedName:</b> {{generatedName}}
</div>
<div class="description">
{{description}}
</div>
</div>
}
@if (playTrack) {
<div class="fill-all bg-black">
<div class="track"
#globalVideoElement
(mousemove)="startHideTimer()"
(fullscreenchange)="onFullscreenChange()">
<div class="track-elem">
<video src="{{trackSource}}"
#trackPlayer
preload
(play)="changeStateToPlay()"
(pause)="changeStateToPause()"
(timeupdate)="changeTimeupdate($event.currentTime)"
(durationchange)="changeDurationchange($event.duration)"
(loadedmetadata)="changeMetadata()"
(audioTracks)="audioTracks($event)"
autoplay
(ended)="onTrackEnded()"
><!-- controls > --> <!--preload="none"-->
<!--<p>Your browser does not support HTML5 track player. download track: <a href="{{trackSource}}>link here</a>.</p>-->
</video>
</div>
@if (!displayNeedHide || !isPlaying) {
<div class="controls">
@if (!isPlaying) {
<button (click)="onPlay()"><i class="material-icons">play_arrow</i></button>
}
@else {
<button (click)="onPause()"><i class="material-icons">pause</i></button>
}
<button (click)="onStop()" ><i class="material-icons">stop</i></button>
<div class="timer">
<div>
<input type="range" min="0" class="slider"
[value]="currentTime"
[max]="duration"
(input)="seek($event.target)">
</div>
<div class="timer-text">
<label class="unselectable">{{currentTimeDisplay}} / {{durationDisplay}}</label>
</div>
</div>
<!--<button (click)="onBefore()"><i class="material-icons">navigate_before</i></button>-->
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
<!--<button (click)="onNext()"><i class="material-icons">navigate_next</i></button>-->
<!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>-->
@if (!isFullScreen) {
<button (click)="onFullscreen()"><i class="material-icons">fullscreen</i></button>
}
@else {
<button (click)="onFullscreenExit()"><i class="material-icons">fullscreen_exit</i></button>
}
<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</i></button>-->
<button (click)="onVolumeMenu()" ><i class="material-icons">volume_up</i></button>
@if (!isPlaying) {
<button class="bigPause" (click)="onPauseToggle()"><i class="material-icons">play_circle_outline</i></button>
<button class="bigRewind" (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button class="bigForward" (click)="onForward()"><i class="material-icons">fast_forward</i></button>
}
</div>
}
<div class="title-inline" *ngIf="!isFullScreen || !isPlaying">
{{generatedName}}
</div>
<div class="track-button" *ngIf="!isFullScreen || !isPlaying">
<button (click)="onRequireStop()">
<i class="material-icons big-button">highlight_off</i>
</button>
</div>
</div>
<div class="cover-button-next" *ngIf="haveNext !== null">
<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
<i class="material-icons big-button">arrow_forward_ios</i>
</button>
</div>
<div class="cover-button-previous" *ngIf="havePrevious !== null">
<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
<i class="material-icons big-button">arrow_back_ios</i>
</button>
</div>
</div>
<div class="clear"></div>
<div class="episode" *ngIf="artistName!=null">
<b>Artist:</b> {{artistName}}
</div>
<div class="episode" *ngIf="albumName!=null">
<b>Album:</b> {{albumName}}
</div>
<div class="episode" *ngIf="episode!=null">
<b>Episode:</b> {{episode}}
</div>
<div class="episode">
<b>generatedName:</b> {{generatedName}}
</div>
<div class="description">
{{description}}
</div>
</div>
<div class="fill-all bg-black" *ngIf="playTrack">
<div class="track"
#globalVideoElement
(mousemove)="startHideTimer()"
(fullscreenchange)="onFullscreenChange($event)">
<div class="track-elem">
<video src="{{trackSource}}"
#trackPlayer
preload
(play)="changeStateToPlay()"
(pause)="changeStateToPause()"
(timeupdate)="changeTimeupdate($event.currentTime)"
(durationchange)="changeDurationchange($event.duration)"
(loadedmetadata)="changeMetadata()"
(audioTracks)="audioTracks($event)"
autoplay
(ended)="onTrackEnded()"
><!-- controls > --> <!--preload="none"-->
<!--<p>Your browser does not support HTML5 track player. download track: <a href="{{trackSource}}>link here</a>.</p>-->
</video>
</div>
<div class="controls" *ngIf="!displayNeedHide || !isPlaying">
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
<button (click)="onStop()" ><i class="material-icons">stop</i></button>
<div class="timer">
<div>
<input type="range" min="0" class="slider"
[value]="currentTime"
[max]="duration"
(input)="seek($event.target)">
@if (displayVolumeMenu && (!displayNeedHide || !isPlaying)) {
<div class="volume">
<div class="volume-menu">
<div class="slidecontainer">
<input type="range" min="0" max="100" class="slider"
[value]="volumeValue"
(input)="onVolume($event.target)">
</div>
@if (!trackPlayer.muted) {
<button (click)="onVolumeMute()"><i class="material-icons">volume_mute</i></button>
}
@else {
<button (click)="onVolumeUnMute()"><i class="material-icons">volume_off</i></button>
}
</div>
</div>
<div class="timer-text">
<label class="unselectable">{{currentTimeDisplay}} / {{durationDisplay}}</label>
</div>
</div>
<!--<button (click)="onBefore()"><i class="material-icons">navigate_before</i></button>-->
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
<!--<button (click)="onNext()"><i class="material-icons">navigate_next</i></button>-->
<!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>-->
<button (click)="onFullscreen()" *ngIf="!isFullScreen"><i class="material-icons">fullscreen</i></button>
<button (click)="onFullscreenExit()" *ngIf="isFullScreen"><i class="material-icons">fullscreen_exit</i></button>
<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</i></button>-->
<button (click)="onVolumeMenu()" ><i class="material-icons">volume_up</i></button>
<button class="bigPause" (click)="onPauseToggle()"><i *ngIf="!isPlaying" class="material-icons">play_circle_outline</i></button>
<button class="bigRewind" (click)="onRewind()"><i *ngIf="!isPlaying" class="material-icons">fast_rewind</i></button>
<button class="bigForward" (click)="onForward()"><i *ngIf="!isPlaying" class="material-icons">fast_forward</i></button>
</div>
<div class="title-inline" *ngIf="!isFullScreen || !isPlaying">
{{generatedName}}
</div>
<div class="track-button" *ngIf="!isFullScreen || !isPlaying">
<button (click)="onRequireStop()">
<i class="material-icons big-button">highlight_off</i>
</button>
</div>
<div class="volume" *ngIf="displayVolumeMenu && (!displayNeedHide || !isPlaying)">
<div class="volume-menu">
<div class="slidecontainer">
<input type="range" min="0" max="100" class="slider"
[value]="volumeValue"
(input)="onVolume($event.target)">
</div>
<button (click)="onVolumeMute()" *ngIf="!trackPlayer.muted"><i class="material-icons">volume_mute</i></button>
<button (click)="onVolumeUnMute()" *ngIf="trackPlayer.muted"><i class="material-icons">volume_off</i></button>
</div>
}
</div>
</div>
</div>
}
<canvas #canvascreenshoot style="overflow:auto"></canvas>
</div>

391
front/src/app/scene/upload/upload.html
View File

@ -32,207 +32,212 @@
</tbody>
</table>
</div>
<div *ngIf="this.parsedElement.length !== 0" class="title">
Meta-data:
</div>
@if(parsedElement.length !== 0) {
<div class="title">
Meta-data:
</div>
}
<div class="clear"><br/></div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<tbody>
<tr>
<td class="left-colomn">Gender:</td>
<td class="right-colomn">
<input type="text"
placeholder="Genre of the Media"
[value]="globalGender"
(input)="onGender($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="genreId"
(ngModelChange)="onChangeGender($event)">
<option *ngFor="let element of listGender" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newArtist()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
<tr>
<td class="left-colomn">Artist:</td>
<td class="right-colomn">
<input type="text"
placeholder="Artist of the Media"
[value]="globalArtist"
(input)="onArtist($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="artistId"
(ngModelChange)="onChangeArtist($event)">
<option *ngFor="let element of listArtist" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newArtist()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
<tr>
<td class="left-colomn">Album:</td>
<td class="right-colomn">
<input type="text"
placeholder="Album title"
[value]="globalAlbum"
(input)="onAlbum($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="albumId"
(ngModelChange)="onChangeAlbum($event)">
<option *ngFor="let element of listAlbum" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newArtist()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
<div class="request_raw_table">
<table>
<colgroup>
@if(parsedElement.length !== 0) {
<div class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Track ID:</th>
<th>Title:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of this.parsedElement">
<td class="left-colomn">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="e?"
[value]="data.trackId"
(input)="onTrackId(data, $event.target.value)"
[class.error]="data.trackIdDetected === true"
/>
</td>
<td class="right-colomn" >
<input type="text"
placeholder="Name of the Media"
[value]="data.title"
(input)="onTitle(data, $event.target.value)"
[class.error]="data.title === ''"
</colgroup>
<tbody>
<tr>
<td class="left-colomn">Gender:</td>
<td class="right-colomn">
<input type="text"
placeholder="Genre of the Media"
[value]="globalGender"
(input)="onGender($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<!--<select [ngModel]="genreId"-->
<select (ngModelChange)="onChangeGender($event)">
<option *ngFor="let element of listGender" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newArtist()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
<tr>
<td class="left-colomn">Artist:</td>
<td class="right-colomn">
<input type="text"
placeholder="Artist of the Media"
[value]="globalArtist"
(input)="onArtist($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="artistId"
(ngModelChange)="onChangeArtist($event)">
<option *ngFor="let element of listArtist" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newArtist()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
<tr>
<td class="left-colomn">Album:</td>
<td class="right-colomn">
<input type="text"
placeholder="Album title"
[value]="globalAlbum"
(input)="onAlbum($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="albumId">
<!--(ngModelChange)="onChangeAlbum($event)">-->
<option *ngFor="let element of listAlbum" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newArtist()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Track ID:</th>
<th>Title:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of this.parsedElement">
<td class="left-colomn">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="e?"
[value]="data.trackId"
(input)="onTrackId(data, $event.target.value)"
[class.error]="data.trackIdDetected === true"
/>
<span *ngIf="data.nameDetected === true" class="error">
^^^This title already exist !!!
</span>
</td>
<td class="tool-colomn" >
<button class="button color-button-cancel color-shadow-black"
(click)="removeElmentFromList(data, $event.target.value)"
type="submit"
alt="Delete">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
</tbody>
</table>
</td>
<td class="right-colomn" >
<input type="text"
placeholder="Name of the Media"
[value]="data.title"
(input)="onTitle(data, $event.target.value)"
[class.error]="data.title === ''"
/>
<span *ngIf="data.nameDetected === true" class="error">
^^^This title already exist !!!
</span>
</td>
<td class="tool-colomn" >
<button class="button color-button-cancel color-shadow-black"
(click)="removeElmentFromList(data, $event.target.value)"
type="submit"
alt="Delete">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black"
[disabled]="!needSend"
(click)="sendFile()"
type="submit">
<i class="material-icons">cloud_upload</i> Upload
</button>
</div>
<div class="clear"></div>
<div class="request_raw_table" *ngIf="this.listFileInBdd">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Track ID:</th>
<th>Title:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of this.listFileInBdd">
<td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td>
<td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clear"></div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black"
[disabled]="!needSend"
(click)="sendFile()"
type="submit">
<i class="material-icons">cloud_upload</i> Upload
</button>
</div>
<div class="clear"></div>
<div class="request_raw_table" *ngIf="this.listFileInBdd">
<table>
<colgroup>
}
@if(parsedElement.length !== 0) {
<div class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Track ID:</th>
<th>Title:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of this.listFileInBdd">
<td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td>
<td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td>
</tr>
</tbody>
</table>
<col style="width:80%">
</colgroup>
<tbody>
<!-- no need
<tr *ngFor="let data of this.parsedElement">
<td class="left-colomn">Keep:</td>
<td class="right-colomn">
{{data.file.name}}
</td>
</tr>
-->
<tr *ngFor="let data of this.parsedFailedElement">
<td class="left-colomn">Rejected:</td>
<td class="right-colomn">
{{data.file.name}}<br/> ==&gt; {{data.reason}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:80%">
</colgroup>
<tbody>
<!-- no need
<tr *ngFor="let data of this.parsedElement">
<td class="left-colomn">Keep:</td>
<td class="right-colomn">
{{data.file.name}}
</td>
</tr>
-->
<tr *ngFor="let data of this.parsedFailedElement">
<td class="left-colomn">Rejected:</td>
<td class="right-colomn">
{{data.file.name}}<br/> ==&gt; {{data.reason}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
}
</div>
<upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize"