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

[DEV] migrate with succes to angular17

Browse Source
This commit is contained in:
Edouard DUPIN 2024-02-26 00:01:37 +01:00
parent 0af1bbfb52
commit c3e2b7240b
19 changed files with 763 additions and 761 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "karusic", "name": "karusic",
"version": "0.0.0", "version": "0.0.0",
"license": "MIT", "license": "MPL-2",
"scripts": { "scripts": {
"all": "npm run build && npm run test", "all": "npm run build && npm run test",
"ng": "ng", "ng": "ng",
@ -9,6 +9,7 @@
"build": "ng build --prod", "build": "ng build --prod",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"style": "prettier --write .",
"e2e": "ng e2e", "e2e": "ng e2e",
"update_packages": "ncu --upgrade", "update_packages": "ncu --upgrade",
"install_dependency": "npm install" "install_dependency": "npm install"

8
front/src/app/app.component.html
View File

@ -1,15 +1,17 @@
<!-- Generig global menu --> <!-- Generig global menu -->
<app-top-menu [menu]="currentMenu" (callback)="eventOnMenu($event)"></app-top-menu> <app-top-menu [menu]="currentMenu" (callback)="eventOnMenu($event)"></app-top-menu>
<!-- all interfaced pages --> <!-- all interfaced pages -->
<div class="main-content" *ngIf="autoConnectedDone"> <div class="main-content">
@if(autoConnectedDone) {
<router-outlet ></router-outlet> <router-outlet ></router-outlet>
</div> }
<div class="main-content" *ngIf="!autoConnectedDone"> @else {
<div class="generic-page"> <div class="generic-page">
<div class="fill-all colomn_mutiple"> <div class="fill-all colomn_mutiple">
<b style="color:red;">Auto-connection in progress</b> <b style="color:red;">Auto-connection in progress</b>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
}
</div> </div>
<app-element-player-audio></app-element-player-audio> <app-element-player-audio></app-element-player-audio>

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

@ -20,9 +20,4 @@
<div class="title-small"> <div class="title-small">
{{name}} {{name}}
</div> </div>
<!--
<div class="description-small" *ngIf="description">
{{description}}
</div>
-->
</div> </div>

4
front/src/app/component/element-track/element-track.html
View File

@ -2,7 +2,9 @@
<div class="season-small"> <div class="season-small">
{{name}} {{name}}
</div> </div>
<div class="description-small" *ngIf="track"> @if(track) {
<div class="description-small">
n° {{track}} n° {{track}}
</div> </div>
}
</div> </div>

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

@ -1,7 +1,9 @@
<div> <div>
<div class="count-base" *ngIf="counttrack"> @if(counttrack) {
<div class="count-base">
<span class="count">{{counttrack}}</span> <span class="count">{{counttrack}}</span>
</div> </div>
}
<div class="imgContainer-small"> <div class="imgContainer-small">
@if(covers && covers.length > 0) { @if(covers && covers.length > 0) {
<div> <div>
@ -12,7 +14,9 @@
<div class="title-small"> <div class="title-small">
{{name}} {{name}}
</div> </div>
<div class="description-small" *ngIf="description"> @if(description) {
<div class="description-small">
{{description}} {{description}}
</div> </div>
}
</div> </div>

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

@ -10,15 +10,14 @@
<div class="noImage"></div> <div class="noImage"></div>
} }
</div> </div>
<div class="title-small" *ngIf="data"> @if(data) {
<div class="title-small">
{{episodeDisplay}} {{name}} {{episodeDisplay}} {{name}}
</div> </div>
<div class="title-small" *ngIf="!data"> }
@else {
<div class="title-small">
Error meda: {{element?.id}} Error meda: {{element?.id}}
</div> </div>
<!-- }
<div class="description-small" *ngIf="description">
{{description}}
</div>
-->
</div> </div>

36
front/src/app/scene/album-edit/album-edit.html
View File

@ -2,21 +2,26 @@
<div class="title"> <div class="title">
Edit album Edit album
</div> </div>
<div class="fill-all" *ngIf="itemIsRemoved"> @if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The album has been removed The album has been removed
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsNotFound"> }
@else if (itemIsNotFound) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The album does not exist The album does not exist
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsLoading"> }
@else if (itemIsLoading) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
Loading ...<br/> Loading ...<br/>
@ -24,7 +29,9 @@
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> }
@else {
<div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
name: name:
@ -68,10 +75,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- Cover section --------------------------------- --> <!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Covers Covers
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="hide-element"> <div class="hide-element">
<input type="file" <input type="file"
#fileInput #fileInput
@ -81,7 +88,8 @@
</div> </div>
<div class="request_raw"> <div class="request_raw">
<div class="input"> <div class="input">
<div class="cover" *ngFor="let element of coversDisplay"> @for (element of coversDisplay; track element.id;) {
<div class="cover">
<div class="cover-image"> <div class="cover-image">
<img src="{{element.url}}"/> <img src="{{element.url}}"/>
</div> </div>
@ -91,6 +99,7 @@
</button> </button>
</div> </div>
</div> </div>
}
<div class="cover"> <div class="cover">
<div class="cover-no-image"> <div class="cover-no-image">
</div> </div>
@ -105,10 +114,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- ADMIN section --------------------------------- --> <!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Administration Administration
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
<i class="material-icons">data_usage</i> ID: <i class="material-icons">data_usage</i> ID:
@ -131,17 +140,22 @@
<div class="label"> <div class="label">
<i class="material-icons">delete_forever</i> Trash: <i class="material-icons">delete_forever</i> Trash:
</div> </div>
<div class="input" *ngIf="(trackCount == '0')"> @if(trackCount == '0') {
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit"> <button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove album <i class="material-icons">delete</i> Remove album
</button> </button>
</div> </div>
<div class="input" *ngIf="(trackCount != '0')"> }
@else {
<div class="input">
<i class="material-icons">new_releases</i> Can not remove album, track depending on it <i class="material-icons">new_releases</i> Can not remove album, track depending on it
</div> </div>
}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
}
</div> </div>
<upload-progress [mediaTitle]="upload.labelMediaTitle" <upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize" [mediaUploaded]="upload.mediaSendSize"

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

@ -5,11 +5,12 @@
[cover1]="covers" [cover1]="covers"
(play)="playAll()" (play)="playAll()"
(shuffle)="playShuffle()"/> (shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="albums"> @if(albums) {
<div class="fill-content colomn_single">
<div class="clear"></div> <div class="clear"></div>
<div class="title">Album{{albums.length > 1?"s":""}}: <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" @for (data of albums; track data.id;) {
class="item-list" <div class="item-list"
(click)="onSelectAlbum($event, data.id)" (click)="onSelectAlbum($event, data.id)"
(auxclick)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)"
> >
@ -20,7 +21,9 @@
subValues="Artist" subValues="Artist"
[subValuesCallBack]="getArtistsString"/> [subValuesCallBack]="getArtistsString"/>
</div> </div>
}
</div> </div>
}
@if(tracks) { @if(tracks) {
<div class="fill-content colomn_mutiple"> <div class="fill-content colomn_mutiple">
<div class="clear"></div> <div class="clear"></div>

40
front/src/app/scene/artist-edit/artist-edit.html
View File

@ -2,21 +2,26 @@
<div class="title"> <div class="title">
Edit artist Edit artist
</div> </div>
<div class="fill-all" *ngIf="itemIsRemoved"> @if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The artist has been removed The artist has been removed
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsNotFound"> }
@else if (itemIsNotFound) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The artist does not exist The artist does not exist
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsLoading"> }
@else if (itemIsLoading) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
Loading ...<br/> Loading ...<br/>
@ -24,7 +29,9 @@
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> }
@else {
<div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Type: Type:
@ -32,7 +39,9 @@
<div class="input"> <div class="input">
<select [ngModel]="typeId" <select [ngModel]="typeId"
(ngModelChange)="onChangeType($event)"> (ngModelChange)="onChangeType($event)">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option> @for (element of listType; track element.value;) {
<option [ngValue]="element.value">{{element.label}}</option>
}
</select> </select>
</div> </div>
</div> </div>
@ -66,10 +75,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- Cover section --------------------------------- --> <!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Covers Covers
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="hide-element"> <div class="hide-element">
<input type="file" <input type="file"
#fileInput #fileInput
@ -79,7 +88,8 @@
</div> </div>
<div class="request_raw"> <div class="request_raw">
<div class="input"> <div class="input">
<div class="cover" *ngFor="let element of coversDisplay"> @for (element of coversDisplay; track element.id;) {
<div class="cover">
<div class="cover-image"> <div class="cover-image">
<img src="{{element.url}}"/> <img src="{{element.url}}"/>
</div> </div>
@ -89,6 +99,7 @@
</button> </button>
</div> </div>
</div> </div>
}
<div class="cover"> <div class="cover">
<div class="cover-no-image"> <div class="cover-no-image">
</div> </div>
@ -103,10 +114,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- ADMIN section --------------------------------- --> <!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Administration Administration
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
<i class="material-icons">data_usage</i> ID: <i class="material-icons">data_usage</i> ID:
@ -138,17 +149,22 @@
<div class="label"> <div class="label">
<i class="material-icons">delete_forever</i> Trash: <i class="material-icons">delete_forever</i> Trash:
</div> </div>
<div class="input" *ngIf="(trackCount == '0' && albumsCount == '0')"> @if(trackCount == '0' && albumsCount == '0') {
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit"> <button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove Artist <i class="material-icons">delete</i> Remove Artist
</button> </button>
</div> </div>
<div class="input" *ngIf="(trackCount != '0' || albumsCount != '0')"> }
@else {
<div class="input">
<i class="material-icons">new_releases</i> Can not remove album or track depending on it <i class="material-icons">new_releases</i> Can not remove album or track depending on it
</div> </div>
}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
}
</div> </div>
<upload-progress [mediaTitle]="upload.labelMediaTitle" <upload-progress [mediaTitle]="upload.labelMediaTitle"

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

@ -7,7 +7,8 @@
[cover2]="albumCovers" [cover2]="albumCovers"
(play)="playAll()" (play)="playAll()"
(shuffle)="playShuffle()"/> (shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="tracks"> @if(tracks) {
<div class="fill-content colomn_single">
<div class="clear"></div> <div class="clear"></div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div> <div class="title">Track{{tracks.length > 1?"s":""}}:</div>
@for (data of tracks; track data.id;) { @for (data of tracks; track data.id;) {
@ -19,5 +20,6 @@
Aucune piste accessible. Aucune piste accessible.
} }
</div> </div>
}
<div class="clear-end"></div> <div class="clear-end"></div>
</div> </div>

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

@ -9,24 +9,28 @@
<div class="fill-content colomn_single"> <div class="fill-content colomn_single">
<div class="clear"></div> <div class="clear"></div>
<div class="title">Album{{albums.length > 1?"s":""}}:</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)"> @for (data of albums; track data.id;) {
<div class="item-list" (click)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)">
<app-element-season <app-element-season
[element]="data" [element]="data"
countSubType="Track" countSubType="Track"
[countSubTypeCallBack]="countTrack" [countSubTypeCallBack]="countTrack"
></app-element-season> ></app-element-season>
</div> </div>
}
</div> </div>
} }
@if(tracks) { @if(tracks) {
<div class="fill-content colomn_mutiple"> <div class="fill-content colomn_mutiple">
<div class="clear"></div> <div class="clear"></div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</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;) {
<div class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-video <app-element-video
[element]="data" [element]="data"
></app-element-video> ></app-element-video>
</div> </div>
}
</div> </div>
} }
<div class="clear-end"></div> <div class="clear-end"></div>

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

@ -5,7 +5,8 @@
[cover1]="covers" [cover1]="covers"
(play)="playAll()" (play)="playAll()"
(shuffle)="playShuffle()"/> (shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="artists"> @if(artists) {
<div class="fill-content colomn_single">
<div class="clear"></div> <div class="clear"></div>
<div class="title">Artist{{artists.length > 1?"s":""}}: <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>
@for (data of artists; track data.id;) { @for (data of artists; track data.id;) {
@ -20,5 +21,6 @@
</div> </div>
} }
</div> </div>
}
<div class="clear-end"></div> <div class="clear-end"></div>
</div> </div>

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

@ -11,9 +11,11 @@
<div class="title"> <div class="title">
{{name}} {{name}}
</div> </div>
<div class="description" *ngIf="description"> @if(description) {
<div class="description">
{{description}} {{description}}
</div> </div>
}
</div> </div>
</div> </div>
<div class="fill-content colomn_mutiple"> <div class="fill-content colomn_mutiple">

33
front/src/app/scene/track-edit/track-edit.html
View File

@ -2,21 +2,26 @@
<div class="title"> <div class="title">
Edit Media Edit Media
</div> </div>
<div class="fill-all" *ngIf="itemIsRemoved"> @if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The media has been removed The media has been removed
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsNotFound"> }
@else if (itemIsNotFound) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The media does not exist The media does not exist
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsLoading"> }
@else if (itemIsLoading) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
Loading ...<br/> Loading ...<br/>
@ -24,8 +29,9 @@
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
}
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> @else {
<div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Title: Title:
@ -57,7 +63,9 @@
<div class="input"> <div class="input">
<select [ngModel]="data.genderId" <select [ngModel]="data.genderId"
(ngModelChange)="onChangeGender($event)"> (ngModelChange)="onChangeGender($event)">
<option *ngFor="let element of listGender" [ngValue]="element.value">{{element.label}}</option> @for (element of listGender; track element.value;) {
<option [ngValue]="element.value">{{element.label}}</option>
}
</select> </select>
</div> </div>
<div class="input_add"> <div class="input_add">
@ -73,7 +81,9 @@
<div class="input"> <div class="input">
<select [ngModel]="data.artistId" <select [ngModel]="data.artistId"
(ngModelChange)="onChangeArtist($event)"> (ngModelChange)="onChangeArtist($event)">
<option *ngFor="let element of listArtist" [ngValue]="element.value">{{element.label}}</option> @for (element of listArtist; track element.value;) {
<option [ngValue]="element.value">{{element.label}}</option>
}
</select> </select>
</div> </div>
<div class="input_add"> <div class="input_add">
@ -89,7 +99,9 @@
<div class="input"> <div class="input">
<select [ngModel]="data.albumId" <select [ngModel]="data.albumId"
(ngModelChange)="onChangeAlbum($event)"> (ngModelChange)="onChangeAlbum($event)">
<option *ngFor="let element of listAlbum" [ngValue]="element.value">{{element.label}}</option> @for (element of listAlbum; track element.value;) {
<option [ngValue]="element.value">{{element.label}}</option>
}
</select> </select>
</div> </div>
<div class="input_add"> <div class="input_add">
@ -119,10 +131,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- ADMIN section --------------------------------- --> <!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Administration Administration
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
<i class="material-icons">data_usage</i> ID: <i class="material-icons">data_usage</i> ID:
@ -144,6 +156,7 @@
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
}
</div> </div>
<create-type ></create-type> <create-type ></create-type>

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

@ -1,17 +1,21 @@
<div class="main-reduce"> <div class="main-reduce">
<div class="fill-all" *ngIf="mediaIsNotFound"> @if(mediaIsNotFound) {
<div class="fill-all">
<div class="title"> <div class="title">
Play media<br/><br/><br/><br/><br/> Play media<br/><br/><br/><br/><br/>
The media does not exist The media does not exist
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="mediaIsLoading"> }
@if(mediaIsLoading) {
<div class="fill-all">
<div class="title"> <div class="title">
Play media<br/><br/><br/><br/><br/> Play media<br/><br/><br/><br/><br/>
Loading ...<br/> Loading ...<br/>
Please wait. Please wait.
</div> </div>
</div> </div>
}
@if(!mediaIsNotFound && !mediaIsLoading && !playTrack) { @if(!mediaIsNotFound && !mediaIsLoading && !playTrack) {
<div class="fill-all"> <div class="fill-all">
<div class="title"> <div class="title">
@ -20,7 +24,7 @@
<div class="cover-full"> <div class="cover-full">
<div class="cover"> <div class="cover">
@if (covers && covers.length > 0) { @if (covers && covers.length > 0) {
<div class="cover-image" *ngIf=""> <div class="cover-image">
<img src="{{covers[0]}}"/> <img src="{{covers[0]}}"/>
</div> </div>
} }
@ -134,15 +138,16 @@
} }
</div> </div>
} }
@if(!isFullScreen || !isPlaying) {
<div class="title-inline" *ngIf="!isFullScreen || !isPlaying"> <div class="title-inline">
{{generatedName}} {{generatedName}}
</div> </div>
<div class="track-button" *ngIf="!isFullScreen || !isPlaying"> <div class="track-button">
<button (click)="onRequireStop()"> <button (click)="onRequireStop()">
<i class="material-icons big-button">highlight_off</i> <i class="material-icons big-button">highlight_off</i>
</button> </button>
</div> </div>
}
@if (displayVolumeMenu && (!displayNeedHide || !isPlaying)) { @if (displayVolumeMenu && (!displayNeedHide || !isPlaying)) {
<div class="volume"> <div class="volume">
<div class="volume-menu"> <div class="volume-menu">

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

@ -63,7 +63,9 @@
<td class="right-colomn"> <td class="right-colomn">
<!--<select [ngModel]="genreId"--> <!--<select [ngModel]="genreId"-->
<select (ngModelChange)="onChangeGender($event)"> <select (ngModelChange)="onChangeGender($event)">
<option *ngFor="let element of listGender" [ngValue]="element.value">{{element.label}}</option> @for (element of listGender; track element.value;) {
<option [ngValue]="element.value">{{element.label}}</option>
}
</select> </select>
</td> </td>
<td class="tool-colomn"> <td class="tool-colomn">
@ -89,7 +91,9 @@
<td class="right-colomn"> <td class="right-colomn">
<select [ngModel]="artistId" <select [ngModel]="artistId"
(ngModelChange)="onChangeArtist($event)"> (ngModelChange)="onChangeArtist($event)">
<option *ngFor="let element of listArtist" [ngValue]="element.value">{{element.label}}</option> @for (element of listArtist; track element.value;) {
<option [ngValue]="element.value">{{element.label}}</option>
}
</select> </select>
</td> </td>
<td class="tool-colomn"> <td class="tool-colomn">
@ -115,7 +119,9 @@
<td class="right-colomn"> <td class="right-colomn">
<select [ngModel]="albumId"> <select [ngModel]="albumId">
<!--(ngModelChange)="onChangeAlbum($event)">--> <!--(ngModelChange)="onChangeAlbum($event)">-->
<option *ngFor="let element of listAlbum" [ngValue]="element.value">{{element.label}}</option> @for (element of listAlbum; track element.value;) {
<option [ngValue]="element.value">{{element.label}}</option>
}
</select> </select>
</td> </td>
<td class="tool-colomn"> <td class="tool-colomn">
@ -144,7 +150,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of this.parsedElement"> @for (data of parsedElement; track data.trackId;) {
<tr>
<td class="left-colomn"> <td class="left-colomn">
<input type="number" <input type="number"
pattern="[0-9]{0-4}" pattern="[0-9]{0-4}"
@ -161,19 +168,22 @@
(input)="onTitle(data, $event.target.value)" (input)="onTitle(data, $event.target.value)"
[class.error]="data.title === ''" [class.error]="data.title === ''"
/> />
<span *ngIf="data.nameDetected === true" class="error"> @if(data.nameDetected === true) {
<span class="error">
^^^This title already exist !!! ^^^This title already exist !!!
</span> </span>
}
</td> </td>
<td class="tool-colomn" > <td class="tool-colomn" >
<button class="button color-button-cancel color-shadow-black" <button class="button color-button-cancel color-shadow-black"
(click)="removeElmentFromList(data, $event.target.value)" (click)="removeElementFromList(data, $event.target.value)"
type="submit" type="submit"
alt="Delete"> alt="Delete">
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
</td> </td>
</tr> </tr>
}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -187,7 +197,8 @@
</button> </button>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="request_raw_table" *ngIf="this.listFileInBdd"> @if(listFileInBdd) {
<div class="request_raw_table">
<table> <table>
<colgroup> <colgroup>
<col style="width:10%"> <col style="width:10%">
@ -201,13 +212,16 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of this.listFileInBdd"> @for (data of listFileInBdd; track data.id;) {
<tr>
<td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td> <td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td>
<td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td> <td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td>
</tr> </tr>
}
</tbody> </tbody>
</table> </table>
</div> </div>
}
</div> </div>
} }
@if(parsedElement.length !== 0) { @if(parsedElement.length !== 0) {
@ -219,20 +233,14 @@
<col style="width:80%"> <col style="width:80%">
</colgroup> </colgroup>
<tbody> <tbody>
<!-- no need @for (data of parsedFailedElement; track data.id;) {
<tr *ngFor="let data of this.parsedElement"> <tr>
<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="left-colomn">Rejected:</td>
<td class="right-colomn"> <td class="right-colomn">
{{data.file.name}}<br/> ==&gt; {{data.reason}} {{data.file.name}}<br/> ==&gt; {{data.reason}}
</td> </td>
</tr> </tr>
}
</tbody> </tbody>
</table> </table>
</div> </div>

62
front/src/app/scene/upload/upload.ts
View File

@ -6,7 +6,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { GenderService, ArtistService, TrackService, ArianeService, AlbumService } from 'app/service'; import { GenderService, ArtistService, TrackService, AlbumService } from 'app/service';
import { NodeData } from 'common/model'; import { NodeData } from 'common/model';
import { UploadProgress } from 'common/popin/upload-progress/upload-progress'; import { UploadProgress } from 'common/popin/upload-progress/upload-progress';
import { PopInService } from 'common/service'; import { PopInService } from 'common/service';
@ -22,21 +22,22 @@ export class ElementList {
export class FileParsedElement { export class FileParsedElement {
public isSended: boolean = false; public isSended: boolean = false;
public nameDetected: boolean = false; public nameDetected: boolean = false;
public episodeDetected: boolean = false;s public trackIdDetected: boolean = false; s
constructor( constructor(
public file: File, public file: File,
public artist: string, public artist: string,
public album: string, public album: string,
public trackId: number, public trackId: number,
public title: string) { public title: string) {
// nothiing to do. // nothing to do.
} }
} }
export class FileFailParsedElement { export class FileFailParsedElement {
constructor( constructor(
public id: number,
public file: File, public file: File,
public reason: string) { public reason: string) {
// nothiing to do. // nothing to do.
} }
} }
@ -56,7 +57,7 @@ export class UploadScene implements OnInit {
albumId: number = null; albumId: number = null;
needSend: boolean = false; needSend: boolean = false;
// list of all files already registered in the bdd to compare with the curent list of files. // list of all files already registered in the bdd to compare with the current list of files.
listFileInBdd: any[] = undefined; listFileInBdd: any[] = undefined;
// section tha define the upload value to display in the pop-in of upload // section tha define the upload value to display in the pop-in of upload
@ -81,7 +82,7 @@ export class UploadScene implements OnInit {
*/ */
config = { config = {
displayKey: 'description', // if objects array passed which key to be displayed defaults to description displayKey: 'description', // if objects array passed which key to be displayed defaults to description
search: true, // true/false for the search functionlity defaults to false, search: true, // true/false for the search functionality defaults to false,
height: 'auto', // height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear height: 'auto', // height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
placeholder: 'Select', // text to be displayed when no item is selected defaults to Select, placeholder: 'Select', // text to be displayed when no item is selected defaults to Select,
customComparator: () => { }, // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case, customComparator: () => { }, // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case,
@ -99,7 +100,6 @@ export class UploadScene implements OnInit {
private artistService: ArtistService, private artistService: ArtistService,
private albumService: AlbumService, private albumService: AlbumService,
private trackService: TrackService, private trackService: TrackService,
private arianeService: ArianeService,
private popInService: PopInService) { private popInService: PopInService) {
// nothing to do. // nothing to do.
} }
@ -115,11 +115,6 @@ export class UploadScene implements OnInit {
this.needSend = false; this.needSend = false;
} }
} }
/*
if(isNullOrUndefined(this.genderId)) {
this.needSend = false;
}
*/
return this.needSend; return this.needSend;
} }
@ -250,18 +245,19 @@ export class UploadScene implements OnInit {
data.title = value; data.title = value;
this.updateNeedSend(); this.updateNeedSend();
} }
removeElmentFromList(data: FileParsedElement, value: any): void {
removeElementFromList(data: FileParsedElement, value: any): void {
for (let iii = 0; iii < this.parsedElement.length; iii++) { for (let iii = 0; iii < this.parsedElement.length; iii++) {
if (this.parsedElement[iii] === data) { if (this.parsedElement[iii] === data) {
this.parsedElement.splice(iii, 1); this.parsedElement.splice(iii, 1);
break; break;
} }
} }
this.parsedFailedElement.push(new FileFailParsedElement(data.file, 'Removed by user.')); this.parsedFailedElement.push(new FileFailParsedElement(this.parsedFailedElement.length, data.file, 'Removed by user.'));
this.updateNeedSend(); this.updateNeedSend();
} }
onEpisode(data: FileParsedElement, value: any): void { onTrackId(data: FileParsedElement, value: any): void {
data.trackId = value; data.trackId = value;
// console.log("change episode ID: " + value + " ==> " + this.parseEpisode.toString()); // console.log("change episode ID: " + value + " ==> " + this.parseEpisode.toString());
this.updateNeedSend(); this.updateNeedSend();
@ -346,7 +342,7 @@ export class UploadScene implements OnInit {
/*for(let iii = 1; iii < this.parsedElement.length; iii++) { /*for(let iii = 1; iii < this.parsedElement.length; iii++) {
console.log(`check gender [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[0].gender } !== ${ this.parsedElement[iii].gender }'`); console.log(`check gender [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[0].gender } !== ${ this.parsedElement[iii].gender }'`);
if(this.parsedElement[0].gender !== this.parsedElement[iii].gender) { if(this.parsedElement[0].gender !== this.parsedElement[iii].gender) {
this.parsedFailedElement.push(new FileFailParsedElement(this.parsedElement[iii].file, 'Remove from list due to wrong gender value')); this.parsedFailedElement.push(new FileFailParsedElement(this.parsedFailedElement.length, this.parsedElement[iii].file, 'Remove from list due to wrong gender value'));
console.log(`Remove from list (!= playlist) : [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[iii].file.name }'`); console.log(`Remove from list (!= playlist) : [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[iii].file.name }'`);
this.parsedElement.splice(iii, 1); this.parsedElement.splice(iii, 1);
iii--; iii--;
@ -357,7 +353,7 @@ export class UploadScene implements OnInit {
for (let iii = 1; iii < this.parsedElement.length; iii++) { for (let iii = 1; iii < this.parsedElement.length; iii++) {
console.log(`check artist [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[0].artist} !== ${this.parsedElement[iii].artist}'`); console.log(`check artist [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[0].artist} !== ${this.parsedElement[iii].artist}'`);
if (this.parsedElement[0].artist !== this.parsedElement[iii].artist) { if (this.parsedElement[0].artist !== this.parsedElement[iii].artist) {
this.parsedFailedElement.push(new FileFailParsedElement(this.parsedElement[iii].file, 'Remove from list due to wrong artist value')); this.parsedFailedElement.push(new FileFailParsedElement(this.parsedFailedElement.length, this.parsedElement[iii].file, 'Remove from list due to wrong artist value'));
console.log(`Remove from list (!= artist) : [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[iii].file.name}'`); console.log(`Remove from list (!= artist) : [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[iii].file.name}'`);
this.parsedElement.splice(iii, 1); this.parsedElement.splice(iii, 1);
iii--; iii--;
@ -367,7 +363,7 @@ export class UploadScene implements OnInit {
for (let iii = 1; iii < this.parsedElement.length; iii++) { for (let iii = 1; iii < this.parsedElement.length; iii++) {
console.log(`check album [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[0].album} !== ${this.parsedElement[iii].album}'`); console.log(`check album [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[0].album} !== ${this.parsedElement[iii].album}'`);
if (this.parsedElement[0].album !== this.parsedElement[iii].album) { if (this.parsedElement[0].album !== this.parsedElement[iii].album) {
this.parsedFailedElement.push(new FileFailParsedElement(this.parsedElement[iii].file, 'Remove from list due to wrong album value')); this.parsedFailedElement.push(new FileFailParsedElement(this.parsedFailedElement.length, this.parsedElement[iii].file, 'Remove from list due to wrong album value'));
console.log(`Remove from list (!= album) : [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[iii].file.name}'`); console.log(`Remove from list (!= album) : [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[iii].file.name}'`);
this.parsedElement.splice(iii, 1); this.parsedElement.splice(iii, 1);
iii--; iii--;
@ -404,7 +400,7 @@ export class UploadScene implements OnInit {
self.upload.error = `Error in the upload of the data...${value}`; self.upload.error = `Error in the upload of the data...${value}`;
}); });
} }
uploadFile(elemnent: FileParsedElement, id: number, total: number, sendDone: any, errorOccured: any): void { uploadFile(element: FileParsedElement, id: number, total: number, sendDone: any, errorOccurred: any): void {
let self = this; let self = this;
self.upload.labelMediaTitle = ''; self.upload.labelMediaTitle = '';
@ -429,24 +425,24 @@ export class UploadScene implements OnInit {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}s${self.globalAlbum.toString()}`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}s${self.globalAlbum.toString()}`;
} }
// add episode ID // add episode ID
if(!isNullOrUndefined(elemnent.trackId) && elemnent.trackId.toString().length !== 0) { if (!isNullOrUndefined(element.trackId) && element.trackId.toString().length !== 0) {
if (self.upload.labelMediaTitle.length !== 0) { if (self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
} }
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }e${ elemnent.trackId.toString()}`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}e${element.trackId.toString()}`;
} }
// add title // add title
if (self.upload.labelMediaTitle.length !== 0) { if (self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
} }
self.upload.labelMediaTitle = `[${ id + 1 }/${ total }]${ self.upload.labelMediaTitle }${elemnent.title}`; self.upload.labelMediaTitle = `[${id + 1}/${total}]${self.upload.labelMediaTitle}${element.title}`;
self.trackService.uploadFile(elemnent.file, self.trackService.uploadFile(element.file,
self.globalGender, self.globalGender,
self.globalArtist, self.globalArtist,
self.globalAlbum, self.globalAlbum,
elemnent.trackId, element.trackId,
elemnent.title, element.title,
(count, totalTmp) => { (count, totalTmp) => {
// console.log("upload : " + count*100/totalTmp); // console.log("upload : " + count*100/totalTmp);
self.upload.mediaSendSize = count; self.upload.mediaSendSize = count;
@ -458,7 +454,7 @@ export class UploadScene implements OnInit {
}).catch((response) => { }).catch((response) => {
// self.error = "Can not get the data"; // self.error = "Can not get the data";
console.log('Can not add the data in the system...'); console.log('Can not add the data in the system...');
errorOccured(JSON.stringify(response, null, 2)); errorOccurred(JSON.stringify(response, null, 2));
}); });
} }
@ -479,21 +475,21 @@ export class UploadScene implements OnInit {
return false; return false;
} }
checkConcordence():void { checkConcordance(): void {
if (isNullOrUndefined(this.parsedElement)) { if (isNullOrUndefined(this.parsedElement)) {
return; return;
} }
// ckear checker // ckear checker
for (let iii = 0; iii < this.parsedElement.length; iii++) { for (let iii = 0; iii < this.parsedElement.length; iii++) {
this.parsedElement[iii].nameDetected = false; this.parsedElement[iii].nameDetected = false;
this.parsedElement[iii].episodeDetected = false; this.parsedElement[iii].trackIdDetected = false;
} }
if (isNullOrUndefined(this.listFileInBdd)) { if (isNullOrUndefined(this.listFileInBdd)) {
return; return;
} }
for (let iii = 0; iii < this.listFileInBdd.length; iii++) { for (let iii = 0; iii < this.listFileInBdd.length; iii++) {
this.listFileInBdd[iii].nameDetected = false; this.listFileInBdd[iii].nameDetected = false;
this.listFileInBdd[iii].episodeDetected = false; this.listFileInBdd[iii].trackIdDetected = false;
} }
for (let iii = 0; iii < this.parsedElement.length; iii++) { for (let iii = 0; iii < this.parsedElement.length; iii++) {
for (let jjj = 0; jjj < this.listFileInBdd.length; jjj++) { for (let jjj = 0; jjj < this.listFileInBdd.length; jjj++) {
@ -502,8 +498,8 @@ export class UploadScene implements OnInit {
this.listFileInBdd[jjj].nameDetected = true; this.listFileInBdd[jjj].nameDetected = true;
} }
if (this.parsedElement[iii].trackId === this.listFileInBdd[jjj].episode) { if (this.parsedElement[iii].trackId === this.listFileInBdd[jjj].episode) {
this.parsedElement[iii].episodeDetected = true; this.parsedElement[iii].trackIdDetected = true;
this.listFileInBdd[jjj].episodeDetected = true; this.listFileInBdd[jjj].trackIdDetected = true;
} }
} }
} }
@ -526,7 +522,7 @@ export class UploadScene implements OnInit {
// for (let iii = 0; iii<response.length; iii++) { // for (let iii = 0; iii<response.length; iii++) {
// console.log(" - " + JSON.stringify(response[iii])); // console.log(" - " + JSON.stringify(response[iii]));
// } // }
self.checkConcordence(); self.checkConcordance();
}).catch((response) => { }).catch((response) => {
self.listFileInBdd = undefined; self.listFileInBdd = undefined;
}); });
@ -557,7 +553,7 @@ export class UploadScene implements OnInit {
// for (let iii = 0; iii<response2.length; iii++) { // for (let iii = 0; iii<response2.length; iii++) {
// console.log(" - " + JSON.stringify(response2[iii])); // console.log(" - " + JSON.stringify(response2[iii]));
// } // }
self.checkConcordence(); self.checkConcordance();
}).catch((response3) => { }).catch((response3) => {
self.listFileInBdd = undefined; self.listFileInBdd = undefined;
}); });

2
front/src/common

@ -1 +1 @@
Subproject commit 39b97f7c06e793ae05b6bad94d111adb878c9b7e Subproject commit 147a955b195eb7c90e445d404f043d9a363087ca

66
front/src/polyfills.ts
View File

@ -1,66 +0,0 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
//import 'babel-polyfill';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
//import 'core-js/es7/reflect';
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/