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'; } from './scene';
import { GenderService, DataService, PlaylistService, ArtistService, AlbumService, TrackService, ArianeService, PlayerService } from './service'; import { GenderService, DataService, PlaylistService, ArtistService, AlbumService, TrackService, ArianeService, PlayerService } from './service';
import { UploadScene } from './scene/upload/upload'; 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'; import { common_module_declarations, common_module_imports, common_module_providers, common_module_exports } from 'common/module';
@NgModule({ @NgModule({
@ -35,6 +35,7 @@ import { common_module_declarations, common_module_imports, common_module_provid
ElementSeasonComponent, ElementSeasonComponent,
ElementVideoComponent, ElementVideoComponent,
ElementPlayerAudioComponent, ElementPlayerAudioComponent,
DescriptionAreaComponent,
PopInCreateType, PopInCreateType,
HomeScene, 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"> @if(mediaSource) {
<audio width="1" height="1" src="{{mediaSource}}" <div>
#mediaPlayer <audio width="1" height="1" src="{{mediaSource}}"
preload #mediaPlayer
(play)="changeStateToPlay()" preload
(pause)="changeStateToPause()" (play)="changeStateToPlay()"
(timeupdate)="changeTimeupdate($event.currentTime)" (pause)="changeStateToPause()"
(durationchange)="changeDurationchange($event.duration)" (timeupdate)="changeTimeupdate($event.currentTime)"
(loadedmetadata)="changeMetadata()" (durationchange)="changeDurationchange($event.duration)"
autoplay (loadedmetadata)="changeMetadata()"
(ended)="onAudioEnded()" autoplay
> (ended)="onAudioEnded()"
</audio> >
<div class="controls"> </audio>
<div class="controls-inner"> <div class="controls">
<div class="title text-ellipsis"> <div class="controls-inner">
<label class="unselectable">{{dataTitle}}</label> <div class="title text-ellipsis">
</div> <label class="unselectable">{{dataTitle}}</label>
<div class="text-ellipsis"> </div>
<label class="unselectable">{{dataAuthor}} / {{dataAlbum}}</label> <div class="text-ellipsis">
</div> <label class="unselectable">{{dataAuthor}} / {{dataAlbum}}</label>
<div class="timer-slider"> </div>
<input type="range" min="0" class="slider" <div class="timer-slider">
[value]="currentTime" <input type="range" min="0" class="slider"
[max]="duration" [value]="currentTime"
(input)="seek($event.target)"> [max]="duration"
</div> (input)="seek($event.target)">
<div class="flex-row"> </div>
<label class="unselectable">{{currentTimeDisplay}}</label> <div class="flex-row">
<label class="unselectable flex-row-last">{{durationDisplay}}</label> <label class="unselectable">{{currentTimeDisplay}}</label>
</div> <label class="unselectable flex-row-last">{{durationDisplay}}</label>
<div class="control"> </div>
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button> <div class="control">
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button> @if(!isPlaying) {
<button (click)="onStop()"><i class="material-icons">stop</i></button> <button (click)="onPlay()"><i class="material-icons">play_arrow</i></button>
<div style="margin:auto"></div> }
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button> @else {
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button> <button (click)="onPause()"><i class="material-icons">pause</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> <button (click)="onStop()"><i class="material-icons">stop</i></button>
<div style="margin:auto"></div> <div style="margin:auto"></div>
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button> <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>
</div> </div>
}

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

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

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

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

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

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

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

@ -1,12 +1,14 @@
<div> <div>
<div class="videoImgContainer"> <div class="videoImgContainer">
<div *ngIf="covers"> @if(covers && covers.length > 0) {
<!--<data-image id="{{cover}}"></data-image>--> <div>
<img src="{{covers[0]}}"/> <!--<data-image id="{{cover}}"></data-image>-->
</div> <img src="{{covers[0]}}"/>
<div *ngIf="!covers" class="noImage"> </div>
}
</div> @else {
<div class="noImage"></div>
}
</div> </div>
<div class="title-small" *ngIf="data"> <div class="title-small" *ngIf="data">
{{episodeDisplay}} {{name}} {{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 { ElementPlayerAudioComponent } from "./element-player-audio/element-player-audio";
import { ElementSeasonComponent } from "./element-season/element-season"; import { ElementSeasonComponent } from "./element-season/element-season";
import { ElementSeriesComponent } from "./element-series/element-series"; import { ElementSeriesComponent } from "./element-series/element-series";
@ -12,5 +13,6 @@ export {
ElementSeasonComponent, ElementSeasonComponent,
ElementPlayerAudioComponent, ElementPlayerAudioComponent,
ElementTrackComponent, ElementTrackComponent,
DescriptionAreaComponent,
}; };

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

@ -1,49 +1,22 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title">
<div class="description-area"> <description-area
<div class="title"> [title]="name"
{{name}} [name]="albumName"
</div> [description]="albumDescription"
<div class="title"> [cover1]="artistCovers"
{{albumName}} [cover2]="albumCovers"
</div> (play)="playAll()"
<div class="description" *ngIf="albumDescription"> (shuffle)="playShuffle()"/>
{{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>
@if (tracks) { @if (tracks) {
<div class="fill-content colomn_single"> <div class="fill-content colomn_single">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div> <div class="title">Track{{tracks.length > 1?"s":""}}:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
@for (data of tracks; track data.id;) { @for (data of tracks; track data.id;) {
<app-element-track <app-element-track
[element]="data" [element]="data"
(click)="onSelectTrack($event, data.id)" (click)="onSelectTrack($event, data.id)"
(auxclick)="onSelectTrack($event, data.id)"></app-element-track> (auxclick)="onSelectTrack($event, data.id)"/>
} @empty { } @empty {
Aucune piste accessible. 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 }); this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
} }
} }
playAll(event: any): void { playAll(): void {
let elements: number[] = []; let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) { for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id); elements.push(this.tracks[iii].id);
@ -116,7 +116,7 @@ export class AlbumScene implements OnInit {
this.playerService.clear(); this.playerService.clear();
this.playerService.setNewPlaylist(elements); this.playerService.setNewPlaylist(elements);
} }
playShuffle(event: any): void { playShuffle(): void {
let elements: number[] = []; let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) { for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id); 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="generic-page">
<div class="fill-title"> <description-area
<div class="description-area"> [title]="name"
<div class="title"> [description]="description"
{{name}} [cover1]="covers"
</div> (play)="playAll()"
<div class="description" *ngIf="description"> (shuffle)="playShuffle()"/>
{{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>
<div class="fill-content colomn_single" *ngIf="albums"> <div class="fill-content colomn_single" *ngIf="albums">
<div class="clear"></div> <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" <div *ngFor="let data of albums"
class="item-list" class="item-list"
(click)="onSelectAlbum($event, data.id)" (click)="onSelectAlbum($event, data.id)"
@ -35,20 +18,20 @@
countSubType="Track" countSubType="Track"
[countSubTypeCallBack]="countTrack" [countSubTypeCallBack]="countTrack"
subValues="Artist" subValues="Artist"
[subValuesCallBack]="getArtistsString" [subValuesCallBack]="getArtistsString"/>
></app-element-season>
</div> </div>
</div> </div>
<div class="fill-content colomn_mutiple" *ngIf="tracks"> @if(tracks) {
<div class="clear"></div> <div class="fill-content colomn_mutiple">
<div class="title" *ngIf="tracks.length > 1">Tracks:</div> <div class="clear"></div>
<div class="title" *ngIf="tracks.length == 1">Track:</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)"> @for (data of tracks; track data.id;) {
<app-element-video <div class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
[element]="data" <app-element-video
></app-element-video> [element]="data"/>
</div>
}
</div> </div>
</div> }
<div class="clear-end"></div> <div class="clear-end"></div>
</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); return this.albumService.getArtists(albumId);
} }
ngOnInit() { ngOnInit() {
const self = this;
this.getArtistsString = (id: number) => { return self.getArtistsStringCallback(id); }; this.getArtistsString = (id: number) => { return self.getArtistsStringCallback(id); };
this.countTrack = (id: number) => { return self.countTrackCallback(id); }; this.countTrack = (id: number) => { return self.countTrackCallback(id); };
let self = this;
self.name = "All Albums"; self.name = "All Albums";
self.description = "View all albums (no specific artist)"; 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 }); this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 });
} }
} }
playAll(event: any): void { playAll(): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()
@ -109,7 +109,7 @@ export class AlbumsScene implements OnInit {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });
} }
playShuffle(event: any): void { playShuffle(): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()

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

@ -1,44 +1,23 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title"> <description-area
<div class="description-area"> [title]="name"
<div class="shadow-text title"> [name]="albumName"
{{name}} [description]="albumDescription"
</div> [cover1]="artistCovers"
<div class="shadow-text sub-title-main"> [cover2]="albumCovers"
{{albumName}} (play)="playAll()"
</div> (shuffle)="playShuffle()"/>
<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>
<div class="fill-content colomn_single" *ngIf="tracks"> <div class="fill-content colomn_single" *ngIf="tracks">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div> <div class="title">Track{{tracks.length > 1?"s":""}}:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div> @for (data of tracks; track data.id;) {
<app-element-track <app-element-track
*ngFor="let data of tracks" [element]="data"
[element]="data" (click)="onSelectTrack($event, data.id)"
(click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)"></app-element-track>
(auxclick)="onSelectTrack($event, data.id)"></app-element-track> } @empty {
Aucune piste accessible.
}
</div> </div>
<div class="clear-end"></div> <div class="clear-end"></div>
</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 }); this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
} }
} }
playAll(event: any): void { playAll(): void {
let elements: number[] = []; let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) { for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id); elements.push(this.tracks[iii].id);
@ -107,7 +107,7 @@ export class ArtistAlbumScene implements OnInit {
this.playerService.clear(); this.playerService.clear();
this.playerService.setNewPlaylist(elements); this.playerService.setNewPlaylist(elements);
} }
playShuffle(event: any): void { playShuffle(): void {
let elements: number[] = []; let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) { for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id); 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="generic-page">
<div class="fill-title"> <description-area
<div class="description-area "> [title]="name"
<div class="shadow-text title"> [description]="description"
{{name}} [cover1]="covers"
</div> (play)="playAll()"
<div class="description" *ngIf="description"> (shuffle)="playShuffle()"/>
{{description}} @if(albums) {
</div> <div class="fill-content colomn_single">
<div class="button-area"> <div class="clear"></div>
<button class="circular-button" (click)="playAll($event)" type="submit"> <div class="title">Album{{albums.length > 1?"s":""}}:</div>
<i class="material-icons">play_arrow</i> <div *ngFor="let data of albums" class="item-list" (click)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)">
</button> <app-element-season
<button class="circular-button" (click)="playShuffle($event)" type="submit"> [element]="data"
<i class="material-icons">shuffle</i> countSubType="Track"
</button> [countSubTypeCallBack]="countTrack"
></app-element-season>
</div> </div>
</div> </div>
<div class="cover-area" *ngIf="covers" > }
<div class="cover"> @if(tracks) {
<img src="{{covers[0]}}"/> <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>
</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 class="clear-end"></div>
</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); return this.albumService.getAllTracksForAlbums(elements);
} }
playAll(event: any): void { playAll(): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.getAllTracksIds() this.getAllTracksIds()
@ -111,7 +111,7 @@ export class ArtistScene implements OnInit {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });
} }
playShuffle(event: any): void { playShuffle(): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.getAllTracksIds() this.getAllTracksIds()

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

@ -1,39 +1,24 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title"> <description-area
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'"> [title]="name"
<div class="shadow-text title"> [description]="description"
{{name}} [cover1]="covers"
</div> (play)="playAll()"
<div class="description" *ngIf="description"> (shuffle)="playShuffle()"/>
{{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>
<div class="fill-content colomn_single" *ngIf="artists"> <div class="fill-content colomn_single" *ngIf="artists">
<div class="clear"></div> <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 class="title">Artist{{artists.length > 1?"s":""}}: <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)"> @for (data of artists; track data.id;) {
<app-element-season <div class="item-list" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
[element]="data" <app-element-season
countSubType="Album" [element]="data"
[countSubTypeCallBack]="countAlbum" countSubType="Album"
countSubType2="Track" [countSubTypeCallBack]="countAlbum"
[countSubType2CallBack]="countTrack" countSubType2="Track"
></app-element-season> [countSubType2CallBack]="countTrack"
</div> ></app-element-season>
</div>
}
</div> </div>
<div class="clear-end"></div> <div class="clear-end"></div>
</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> { countAlbumCallback(artistId: number): Promise<Number> {
return this.artistService.countAlbum(artistId); return this.artistService.countAlbum(artistId);
} }
playAll(event: any): void { playAll(): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()
@ -86,7 +86,7 @@ export class ArtistsScene implements OnInit {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });
} }
playShuffle(event: any): void { playShuffle(): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()

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

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

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

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

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

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

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

@ -12,122 +12,156 @@
Please wait. Please wait.
</div> </div>
</div> </div>
@if(!mediaIsNotFound && !mediaIsLoading && !playTrack) {
<div class="fill-all" *ngIf="!mediaIsNotFound && !mediaIsLoading && !playTrack"> <div class="fill-all">
<div class="title"> <div class="title">
{{name}} {{name}}
</div> </div>
<div class="cover-full"> <div class="cover-full">
<div class="cover"> <div class="cover">
<div class="cover-image" *ngIf="covers"> @if (covers && covers.length > 0) {
<img src="{{covers[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>
<div class="cover-no-image" *ngIf="covers"></div> @if (haveNext !== null) {
<div class="cover-button"> <div class="cover-button-next">
<button (click)="onRequirePlay()"> <button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
<i class="material-icons big-button">play_circle_outline</i> <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> </button>
</div> </div>
</div> @if (displayVolumeMenu && (!displayNeedHide || !isPlaying)) {
<div class="cover-button-next" *ngIf="haveNext !== null"> <div class="volume">
<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)"> <div class="volume-menu">
<i class="material-icons big-button">arrow_forward_ios</i> <div class="slidecontainer">
</button> <input type="range" min="0" max="100" class="slider"
</div> [value]="volumeValue"
<div class="cover-button-previous" *ngIf="havePrevious !== null"> (input)="onVolume($event.target)">
<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)"> </div>
<i class="material-icons big-button">arrow_back_ios</i> @if (!trackPlayer.muted) {
</button> <button (click)="onVolumeMute()"><i class="material-icons">volume_mute</i></button>
</div> }
</div> @else {
<div class="clear"></div> <button (click)="onVolumeUnMute()"><i class="material-icons">volume_off</i></button>
<div class="episode" *ngIf="artistName!=null"> }
<b>Artist:</b> {{artistName}} </div>
</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)">
</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> </div>
</div> }
<canvas #canvascreenshoot style="overflow:auto"></canvas> <canvas #canvascreenshoot style="overflow:auto"></canvas>
</div> </div>

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

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