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

better interface

Browse Source
This commit is contained in:
Edouard DUPIN 2022-08-11 23:10:19 +02:00
parent 7a24b688c0
commit d330d623d9
21 changed files with 365 additions and 600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
back/src/org/kar/karusic/api/AlbumResource.java
View File

@ -35,7 +35,7 @@ public class AlbumResource {
@POST @POST
@RolesAllowed("ADMIN") @RolesAllowed("ADMIN")
@Consumes(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON)
public Album put(String jsonRequest) throws Exception { public Album post(String jsonRequest) throws Exception {
return SqlWrapper.insertWithJson(Album.class, jsonRequest); return SqlWrapper.insertWithJson(Album.class, jsonRequest);
} }

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

@ -1,7 +1,7 @@
<div class="bottom" *ngIf="mediaSource"> <div class="bottom" *ngIf="mediaSource">
<div class="media" > <div class="media" >
<div class="media-elem"> <div class="media-elem">
<video width="1" height="1" src="{{mediaSource}}" <audio width="1" height="1" src="{{mediaSource}}"
#mediaPlayer #mediaPlayer
preload preload
(play)="changeStateToPlay()" (play)="changeStateToPlay()"
@ -13,11 +13,14 @@
(ended)="onAudioEnded()" (ended)="onAudioEnded()"
><!-- controls > --> <!--preload="none"--> ><!-- controls > --> <!--preload="none"-->
<!--<p>Your browser does not support HTML5 media player. download media: <a href="{{mediaSource}}>link here</a>.</p>--> <!--<p>Your browser does not support HTML5 media player. download media: <a href="{{mediaSource}}>link here</a>.</p>-->
</video> </audio>
</div> </div>
<div class="controls"> <div class="controls">
<div class="timer"> <div class="timer">
<div> <div class="timer-title">
<label class="unselectable label">{{nameData}}</label>
</div>
<div class="timer-lines">
<input type="range" min="0" class="slider" <input type="range" min="0" class="slider"
[value]="currentTime" [value]="currentTime"
[max]="duration" [max]="duration"
@ -37,20 +40,7 @@
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button> <button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button>
<!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>--> <!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>-->
<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</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>
</div> </div>
</div> </div>
</div> </div>
<div class="volume" *ngIf="volume_displayMenu">
<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="!mediaPlayer.muted"><i class="material-icons">volume_mute</i></button>
<button (click)="onVolumeUnMute()" *ngIf="mediaPlayer.muted"><i class="material-icons">volume_off</i></button>
</div>
</div>
</div> </div>

191
front/src/app/component/element-player-audio/element-player-audio.less
View File

@ -1,32 +1,8 @@
.bottom { .bottom {
/*
position: fixed;
bottom:0px;
left:0px;
display: block;
overflow: visible;
box-shadow: none;
min-height: 56px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
box-sizing: border-box;
flex-shrink: 0;
width: 100%;
margin: 0;
padding: 0 12px 0 12px;
border: none;
max-height: 1000px;
z-index: 3;
box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.6);
*/
.controls { .controls {
//visibility: hidden; //visibility: hidden;
opacity: 0.5; opacity: 0.85;
width: 96%; width: 96%;
height: 150px; height: 150px;
border-radius: 10px; border-radius: 10px;
@ -55,60 +31,6 @@
} }
} }
.bigPause {
position: fixed;
top: 120px;
left: 40%;
width: 20%;
height: calc(90% - 120px*2);
border: none;
box-shadow: none;
cursor: pointer;
.material-icons {
color: #FFF;
font-size: 120px;
color: green;
}
&:focus {
outline: none;
}
opacity: 95%;
}
.bigRewind {
position: fixed;
top: 120px;
left: 20%;
width: 20%;
height: calc(90% - 120px*2);
border: none;
.material-icons {
color: #FFF;
font-size: 120px;
color: red;
}
&:focus {
outline: none;
}
opacity: 95%;
}
.bigForward {
position: fixed;
top: 120px;
left: 60%;
width: 20%;
height: calc(90% - 120px*2);
border: none;
.material-icons {
color: #FFF;
font-size: 120px;
color: blue;
}
&:focus {
outline: none;
}
opacity: 95%;
}
.slidecontainer { .slidecontainer {
line-height: 38px; line-height: 38px;
font-size: 10px; font-size: 10px;
@ -121,7 +43,8 @@
.slider { .slider {
position: relative; position: relative;
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; //width: calc(100% - 60px);
width: 95%;
height: 10px; height: 10px;
top: 5px; top: 5px;
border-radius: 5px; border-radius: 5px;
@ -150,14 +73,29 @@
cursor: pointer; cursor: pointer;
} }
.timer-text { .timer-title {
position: absolute; position: absolute;
//top: 25px;
left: 30px; left: 30px;
width: 100%; width: 100%;
//line-height: 38px;
font-size: 20px; font-size: 20px;
font-weight:bold; font-weight:bold;
bottom: 104px;
}
.timer-lines {
position: absolute;
left: 30px;
//width: calc(100%-60px);
font-size: 20px;
font-weight:bold;
bottom: 82px;
}
.timer-text {
position: absolute;
left: 30px;
width: 100%;
font-size: 20px;
font-weight:bold;
bottom: 40px;
} }
.timer-control { .timer-control {
position: absolute; position: absolute;
@ -167,7 +105,7 @@
//line-height: 38px; //line-height: 38px;
font-size: 30px; font-size: 30px;
font-weight:bold; font-weight:bold;
bottom: 20px; bottom: 0px;
} }
.label { .label {
//transform: translate(-12px,-12px); //transform: translate(-12px,-12px);
@ -218,89 +156,4 @@
} }
.volume-menu {
font-size: 40px;
opacity: 0.5;
width: 300px;
height: 60px;
border-radius: 10px;
position: absolute;
bottom: 90px;
right: 2%;
//margin-left: -200px;
background-color: black;
box-shadow: 3px 3px 5px black;
transition: 1s all;
display: flex;
.material-icons {
vertical-align: middle;
color: #FFF;
font-size: 40px;
}
/* Create an Arraw on the top ob the box ... */
&:after, &:before {
bottom: 100%;
right: 13px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #263238;
border-width: 15px;
margin-left: -15px;
}
button {
border: none;
background: none;
border-radius: 50%;
}
.slidecontainer {
line-height: 38px;
font-size: 10px;
font-family: monospace;
text-shadow: 1px 1px 0px black;
color: white;
flex: 5;
position: relative;
}
.slider {
position: relative;
-webkit-appearance: none;
width: 98%;
height: 10px;
top: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
flex: 5;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
}
} }

116
front/src/app/component/element-player-audio/element-player-audio.ts
View File

@ -4,10 +4,10 @@
* @license PROPRIETARY (see license file) * @license PROPRIETARY (see license file)
*/ */
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { isArrayOf, isNullOrUndefined, isNumberFinite } from 'common/utils'; import { isArray, isArrayOf, isNullOrUndefined, isNumberFinite } from 'common/utils';
import { NodeData } from 'common/model'; import { NodeData } from 'common/model';
import { GenderService, DataService, PlayerService, TrackService } from 'app/service'; import { GenderService, DataService, PlayerService, TrackService, AlbumService, ArtistService } from 'app/service';
import { PlaylistCurrent } from 'app/service/player'; import { PlaylistCurrent } from 'app/service/player';
import { Media } from 'app/model'; import { Media } from 'app/model';
import { HttpWrapperService } from 'common/service'; import { HttpWrapperService } from 'common/service';
@ -27,7 +27,7 @@ export enum PlayMode {
styleUrls: [ './element-player-audio.less' ] styleUrls: [ './element-player-audio.less' ]
}) })
export class ElementPlayerAudioComponent implements OnInit { export class ElementPlayerAudioComponent implements OnInit {
mediaPlayer: HTMLVideoElement; mediaPlayer: HTMLAudioElement;
duration: number; duration: number;
durationDisplay: string; durationDisplay: string;
@ViewChild('mediaPlayer') @ViewChild('mediaPlayer')
@ -48,6 +48,7 @@ export class ElementPlayerAudioComponent implements OnInit {
public volume_value: number = 100; public volume_value: number = 100;
public volume_displayMenu: boolean = false; public volume_displayMenu: boolean = false;
nameData: string;
playStream: boolean; playStream: boolean;
isPlaying: boolean; isPlaying: boolean;
currentTime: any; currentTime: any;
@ -69,12 +70,14 @@ export class ElementPlayerAudioComponent implements OnInit {
constructor( constructor(
private playerService: PlayerService, private playerService: PlayerService,
private trackService: TrackService, private trackService: TrackService,
private albumService: AlbumService,
private artistService: ArtistService,
private httpService: HttpWrapperService, private httpService: HttpWrapperService,
private dataService: DataService) { private dataService: DataService) {
// nothing to do... // nothing to do...
} }
private currentLMedia: Media = undefined; private currentLMedia: Media;
private localIdStreaming: number = undefined; private localIdStreaming: number;
private localListStreaming: number[] = []; private localListStreaming: number[] = [];
ngOnInit() { ngOnInit() {
/* /*
@ -101,7 +104,22 @@ export class ElementPlayerAudioComponent implements OnInit {
this.trackService.get(this.localListStreaming[this.localIdStreaming]) this.trackService.get(this.localListStreaming[this.localIdStreaming])
.then((response: Media) => { .then((response: Media) => {
//console.log(`get response of video : ${ JSON.stringify(response, null, 2)}`); //console.log(`get response of video : ${ JSON.stringify(response, null, 2)}`);
this.currentLMedia = response; self.currentLMedia = response;
self.nameData = response.name;
if (!isNullOrUndefined(response.albumId)) {
this.albumService.get(response.albumId)
.then((response2: NodeData) => {
self.nameData = response2.name + " - " + self.nameData;
})
.catch(() => {});
}
if (!isNullOrUndefined(response.artists) && isArray(response.artists) && response.artists.length > 0) {
this.artistService.get(response.artists[0])
.then((response2: NodeData) => {
self.nameData = self.nameData + " (" + response2.name + ")";
})
.catch(() => {});
}
if (isNullOrUndefined(self.currentLMedia)) { if (isNullOrUndefined(self.currentLMedia)) {
console.log("Can not retreive the media ...") console.log("Can not retreive the media ...")
return; return;
@ -304,9 +322,6 @@ export class ElementPlayerAudioComponent implements OnInit {
this.onNext(); this.onNext();
} }
} }
} }
changeStateToPlay() { changeStateToPlay() {
@ -355,23 +370,21 @@ export class ElementPlayerAudioComponent implements OnInit {
onPlay() { onPlay() {
console.log('play'); console.log('play');
if(isNullOrUndefined(this.mediaPlayer)) {
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${ this.mediaPlayer}`);
return; return;
} }
this.lockPlayerEnable();
this.mediaPlayer.play(); this.mediaPlayer.play();
} }
onPause() { onPause() {
console.log('pause'); console.log('pause');
if(isNullOrUndefined(this.mediaPlayer)) {
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${ this.mediaPlayer}`);
return; return;
} }
this.unlockPlayerEnable();
this.mediaPlayer.pause(); this.mediaPlayer.pause();
} }
@ -386,12 +399,11 @@ export class ElementPlayerAudioComponent implements OnInit {
onStop() { onStop() {
console.log('stop'); console.log('stop');
if(isNullOrUndefined(this.mediaPlayer)) {
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${ this.mediaPlayer}`);
return; return;
} }
this.unlockPlayerEnable();
this.mediaPlayer.pause(); this.mediaPlayer.pause();
this.mediaPlayer.currentTime = 0; this.mediaPlayer.currentTime = 0;
} }
@ -420,9 +432,7 @@ export class ElementPlayerAudioComponent implements OnInit {
seek(newValue:any) { seek(newValue:any) {
console.log(`seek ${ newValue.value}`); console.log(`seek ${ newValue.value}`);
if(isNullOrUndefined(this.mediaPlayer)) {
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${ this.mediaPlayer}`);
return; return;
} }
@ -431,9 +441,7 @@ export class ElementPlayerAudioComponent implements OnInit {
onRewind() { onRewind() {
console.log('rewind'); console.log('rewind');
if(isNullOrUndefined(this.mediaPlayer)) {
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${ this.mediaPlayer}`);
return; return;
} }
@ -442,9 +450,7 @@ export class ElementPlayerAudioComponent implements OnInit {
onForward() { onForward() {
console.log('forward'); console.log('forward');
if(isNullOrUndefined(this.mediaPlayer)) {
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${ this.mediaPlayer}`);
return; return;
} }
@ -453,50 +459,38 @@ export class ElementPlayerAudioComponent implements OnInit {
onMore() { onMore() {
console.log('more'); console.log('more');
if(isNullOrUndefined(this.mediaPlayer)) {
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${ this.mediaPlayer}`);
return; return;
} }
} }
onVolumeMenu() {
this.volume_displayMenu = !this.volume_displayMenu;
//this.startHideTimer();
}
onVolume(newValue:any) { // these element is to permit to not stop music when sceen is off !!
console.log(`onVolume ${ newValue.value}`); wakeLock = null;
//this.startHideTimer(); unlockPlayerEnable() {
if(this.mediaPlayer === null || let tmppp = this.wakeLock;
this.mediaPlayer === undefined) { this.wakeLock = null;
console.log(`error element: ${ this.mediaPlayer}`); if (!isNullOrUndefined(tmppp)) {
return; tmppp.release();
} }
this.volume_value = newValue.value; try {
this.mediaPlayer.volume = this.volume_value / 100; let tmp = navigator as any;
this.mediaPlayer.muted = false; this.wakeLock = tmp.wakeLock.request('screen');
} catch (err) {
// The Wake Lock request has failed - usually system related, such as battery.
console.log(`Can not lock screen element: ${err.name}, ${err.message}`);
} }
onVolumeMute() {
//this.startHideTimer();
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
} }
this.mediaPlayer.muted = true; lockPlayerEnable() {
if ('wakeLock' in navigator) {
try {
let tmp = navigator as any;
this.wakeLock = tmp.wakeLock.request('screen');
} catch (err) {
// The Wake Lock request has failed - usually system related, such as battery.
console.log(`Can not lock screen element: ${err.name}, ${err.message}`);
} }
onVolumeUnMute() {
//this.startHideTimer();
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
} }
this.mediaPlayer.muted = false;
} }
} }

2
front/src/app/component/top-menu/top-menu.ts
View File

@ -157,7 +157,7 @@ export class TopMenuComponent implements OnInit {
onArianeArtist(event: any): void { onArianeArtist(event: any): void {
console.log(`onArianeArtist(${ this.arianeArtistId })`); console.log(`onArianeArtist(${ this.arianeArtistId })`);
//this.arianeService.navigateArtist(this.arianeArtistId, event.which === 2); this.arianeService.navigateArtist( {artistId: this.arianeArtistId, newWindows: event.which === 2 } );
} }
onArianeAlbum(event: any): void { onArianeAlbum(event: any): void {

20
front/src/app/model/media.ts
View File

@ -1,17 +1,16 @@
import { isNumberFinite, isString, isOptionalOf } from "common/utils"; import { isNumberFinite, isString, isOptionalOf, isArray } from "common/utils";
import { isNodeData, NodeData } from "common/model/node"; import { isNodeData, NodeData } from "common/model/node";
export interface Media extends NodeData { export interface Media extends NodeData {
dataId?: number; dataId?: number;
typeId?: number; genderId?: number;
playlistId?: number; artists?: number[];
artistId?: number;
albumId?: number; albumId?: number;
episode?: number; episode?: number;
track?: number;
date?: number; date?: number;
time?: number; time?: number;
ageLimit?: string;
}; };
@ -26,15 +25,15 @@ export function isMedia(data: any): data is Media {
if (!isOptionalOf(data.typeId, isNumberFinite)) { if (!isOptionalOf(data.typeId, isNumberFinite)) {
return false; return false;
} }
if (!isOptionalOf(data.playlistId, isNumberFinite)) { if (!isOptionalOf(data.artists, isArray)) {
return false;
}
if (!isOptionalOf(data.artistId, isNumberFinite)) {
return false; return false;
} }
if (!isOptionalOf(data.albumId, isNumberFinite)) { if (!isOptionalOf(data.albumId, isNumberFinite)) {
return false; return false;
} }
if (!isOptionalOf(data.track, isNumberFinite)) {
return false;
}
if (!isOptionalOf(data.episode, isNumberFinite)) { if (!isOptionalOf(data.episode, isNumberFinite)) {
return false; return false;
} }
@ -44,8 +43,5 @@ export function isMedia(data: any): data is Media {
if (!isOptionalOf(data.time, isNumberFinite)) { if (!isOptionalOf(data.time, isNumberFinite)) {
return false; return false;
} }
if (!isOptionalOf(data.ageLimit, isString)) {
return false;
}
return true; return true;
} }

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

@ -27,16 +27,30 @@
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Number: name:
</div> </div>
<div class="input"> <div class="input">
<input type="number" <input type="text"
placeholder="Id of the album" placeholder="Name of the album"
[value]="numberVal" [value]="nameAlbum"
(input)="onNumber($event.target.value)" (input)="onName($event.target.value)"
/> />
</div> </div>
</div> </div>
<!--
<div class="request_raw">
<div class="label">
<i class="material-icons">date_range</i> Date:
</div>
<div class="input">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="2112"
[value]="data.time"
(input)="onDate($event.target)"/>
</div>
</div>
-->
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Description: Description:

16
front/src/app/scene/album-edit/album-edit.ts
View File

@ -26,14 +26,14 @@ export interface ElementList {
}) })
export class AlbumEditScene implements OnInit { export class AlbumEditScene implements OnInit {
idAlbum:number = -1; idAlbum: number = -1;
itemIsRemoved:boolean = false; itemIsRemoved:boolean = false;
itemIsNotFound:boolean = false; itemIsNotFound:boolean = false;
itemIsLoading:boolean = true; itemIsLoading:boolean = true;
error:string = ''; error:string = '';
numberVal: number = null; nameAlbum:string;
description: string = ''; description: string = '';
coverFile: File; coverFile: File;
uploadFileValue: string = ''; uploadFileValue: string = '';
@ -83,15 +83,13 @@ export class AlbumEditScene implements OnInit {
this.albumService.get(this.idAlbum) this.albumService.get(this.idAlbum)
.then((response: NodeData) => { .then((response: NodeData) => {
console.log(`get response of album : ${ JSON.stringify(response, null, 2)}`); console.log(`get response of album : ${ JSON.stringify(response, null, 2)}`);
if (isNumberFinite(response.name)) { self.nameAlbum = response.name;
self.numberVal = response.name;
}
self.description = response.description; self.description = response.description;
self.updateCoverList(response.covers); self.updateCoverList(response.covers);
self.itemIsLoading = false; self.itemIsLoading = false;
}).catch((response) => { }).catch((response) => {
self.error = 'Can not get the data'; self.error = 'Can not get the data';
self.numberVal = null; self.nameAlbum = null;
self.description = ''; self.description = '';
self.coversDisplay = []; self.coversDisplay = [];
self.itemIsNotFound = true; self.itemIsNotFound = true;
@ -118,8 +116,8 @@ export class AlbumEditScene implements OnInit {
this.coversDisplay = []; this.coversDisplay = [];
} }
} }
onNumber(value:any):void { onName(value:any):void {
this.numberVal = value; this.nameAlbum = value;
} }
onDescription(value:any):void { onDescription(value:any):void {
@ -129,7 +127,7 @@ export class AlbumEditScene implements OnInit {
sendValues():void { sendValues():void {
console.log('send new values....'); console.log('send new values....');
let data = { let data = {
name: this.numberVal, name: this.nameAlbum,
description: this.description description: this.description
}; };
if(this.description === undefined) { if(this.description === undefined) {

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

@ -12,6 +12,12 @@
<div class="description" *ngIf="description"> <div class="description" *ngIf="description">
{{description}} {{description}}
</div> </div>
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i> Play All
</button>
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit">
<i class="material-icons">shuffle</i> Shuffle
</button>
</div> </div>
</div> </div>
<div class="fill-content colomn_mutiple" *ngIf="albums"> <div class="fill-content colomn_mutiple" *ngIf="albums">

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

@ -7,7 +7,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { ArtistService, DataService, ArianeService, AlbumService } from 'app/service'; import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service';
import { NodeData } from 'common/model'; import { NodeData } from 'common/model';
import { isNullOrUndefined } from 'common/utils'; import { isNullOrUndefined } from 'common/utils';
@ -31,6 +31,8 @@
private albumService: AlbumService, private albumService: AlbumService,
private artistService: ArtistService, private artistService: ArtistService,
private arianeService: ArianeService, private arianeService: ArianeService,
private trackService: TrackService,
private playerService: PlayerService,
private dataService: DataService) { private dataService: DataService) {
} }
@ -88,6 +90,36 @@
this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
} }
} }
playAll(event: any):void {
this.playerService.clear();
let self = this;
this.trackService.getData()
.then((response: NodeData[]) => {
let ids = [];
response.forEach(element => {
ids.push(element.id);
});
self.playerService.setNewPlaylist(ids);
})
.catch(() => {
console.log(`error to get list o ftrack ...`)
});
}
playShuffe(event: any):void {
this.playerService.clear();
let self = this;
this.trackService.getData()
.then((response: NodeData[]) => {
let ids = [];
response.forEach(element => {
ids.push(element.id);
});
self.playerService.setNewPlaylistShuffle(ids);
})
.catch(() => {
console.log(`error to get list o ftrack ...`)
});
}
} }

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

@ -15,6 +15,7 @@
<div class="description" *ngIf="albumDescription"> <div class="description" *ngIf="albumDescription">
{{albumDescription}} {{albumDescription}}
</div> </div>
<div class="clear"></div>
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit"> <button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i> Play All <i class="material-icons">play_arrow</i> Play All
</button> </button>

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

@ -1,4 +1,25 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple">
<div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title">
{{name}}
</div>
<div class="description" *ngIf="description">
{{description}}
</div>
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i> Play All
</button>
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit">
<i class="material-icons">shuffle</i> Shuffle
</button>
</div>
</div>
<div class="fill-content colomn_mutiple" *ngIf="artists"> <div class="fill-content colomn_mutiple" *ngIf="artists">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="artists.length > 1">Artists:</div> <div class="title" *ngIf="artists.length > 1">Artists:</div>

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

@ -7,7 +7,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { ArtistService, DataService, ArianeService, AlbumService } from 'app/service'; import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
import { NodeData } from 'common/model'; import { NodeData } from 'common/model';
import { isNullOrUndefined } from 'common/utils'; import { isNullOrUndefined } from 'common/utils';
@ -19,6 +19,8 @@ import { isNullOrUndefined } from 'common/utils';
export class ArtistsScene implements OnInit { export class ArtistsScene implements OnInit {
cover: string = ''; cover: string = '';
covers: Array<string> = []; covers: Array<string> = [];
name: string = "Artists";
description: string = "All available artists";
artists: NodeData[]; artists: NodeData[];
countTrack: (id: number) => Promise<Number>; countTrack: (id: number) => Promise<Number>;
countAlbum: (id: number) => Promise<Number>; countAlbum: (id: number) => Promise<Number>;
@ -27,6 +29,8 @@ export class ArtistsScene implements OnInit {
private route: ActivatedRoute, private route: ActivatedRoute,
private artistService: ArtistService, private artistService: ArtistService,
private albumService: AlbumService, private albumService: AlbumService,
private trackService: TrackService,
private playerService: PlayerService,
private arianeService: ArianeService) { private arianeService: ArianeService) {
} }
@ -60,5 +64,35 @@ 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 {
this.playerService.clear();
let self = this;
this.trackService.getData()
.then((response: NodeData[]) => {
let ids = [];
response.forEach(element => {
ids.push(element.id);
});
self.playerService.setNewPlaylist(ids);
})
.catch(() => {
console.log(`error to get list o ftrack ...`)
});
}
playShuffe(event: any):void {
this.playerService.clear();
let self = this;
this.trackService.getData()
.then((response: NodeData[]) => {
let ids = [];
response.forEach(element => {
ids.push(element.id);
});
self.playerService.setNewPlaylistShuffle(ids);
})
.catch(() => {
console.log(`error to get list o ftrack ...`)
});
}
} }

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

@ -52,44 +52,16 @@
</div> </div>
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
<i class="material-icons">date_range</i> Date: Gender:
</div> </div>
<div class="input"> <div class="input">
<input type="number" <select [ngModel]="data.genderId"
pattern="[0-9]{0-4}" (ngModelChange)="onChangeGender($event)">
placeholder="2112" <option *ngFor="let element of listGender" [ngValue]="element.value">{{element.label}}</option>
[value]="data.time"
(input)="onDate($event.target)"/>
</div>
</div>
<div class="request_raw">
<div class="label">
Type:
</div>
<div class="input">
<select [ngModel]="data.typeId"
(ngModelChange)="onChangeType($event)">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option>
</select> </select>
</div> </div>
<div class="input_add"> <div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newType()" type="submit"> <button class="button color-button-normal color-shadow-black" (click)="newGender()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
</div>
</div>
<div class="request_raw">
<div class="label">
Playlist:
</div>
<div class="input">
<select [ngModel]="data.playlistId"
(ngModelChange)="onChangePlaylist($event)">
<option *ngFor="let element of listPlaylist" [ngValue]="element.value">{{element.label}}</option>
</select>
</div>
<div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newPlaylist()" type="submit">
<i class="material-icons">add_circle_outline</i> <i class="material-icons">add_circle_outline</i>
</button> </button>
</div> </div>
@ -128,55 +100,21 @@
</div> </div>
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Episode: Track n°:
</div> </div>
<div class="input"> <div class="input">
<input type="number" <input type="number"
pattern="[0-9]{0-4}" pattern="[0-9]{0-4}"
placeholder="5" placeholder="5"
[value]="data.episode" [value]="data.track"
(input)="onEpisode($event.target)"/> (input)="onTrack($event.target)"/>
</div> </div>
</div> </div>
<div class="send_value"> <div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" [disabled]="!needSend" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button> <button class="button fill-x color-button-validate color-shadow-black"
</div> [disabled]="!needSend"
<div class="clear"></div> (click)="sendValues()"
</div> type="submit"><i class="material-icons">save_alt</i> Save</button>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
Covers
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
<div class="cover" *ngFor="let element of coversDisplay">
<div class="cover-image">
<img src="{{element.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(element.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
</div>
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
</div>
</div>
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
@ -228,7 +166,8 @@
validateTitle="Create" validateTitle="Create"
(callback)="eventPopUpAlbum($event[0])"> (callback)="eventPopUpAlbum($event[0])">
<p> <p>
Name: <!-- <input type="text" [(ngModel)]="bodyText" /> --> Name: <input type="text"
(input)="onNewAlbumInput($event.target.value)" />
</p> </p>
</app-popin> </app-popin>
@ -240,20 +179,22 @@
validateTitle="Create" validateTitle="Create"
(callback)="eventPopUpArtist($event[0])"> (callback)="eventPopUpArtist($event[0])">
<p> <p>
Name: <!-- <input type="text" [(ngModel)]="bodyText" /> --> Name: <input type="text"
(input)="onNewArtistInput($event.target.value)" />
</p> </p>
</app-popin> </app-popin>
<app-popin id="popin-new-playlist" <app-popin id="popin-new-gender"
popSize="big" popSize="big"
popTitle="Create a new playlist" popTitle="Create a new Gender"
closeTopRight="true" closeTopRight="true"
closeTitle="Cancel" closeTitle="Cancel"
validateTitle="Create" validateTitle="Create"
(callback)="eventPopUpPlaylist($event[0])"> (callback)="eventPopUpGender($event[0])">
<p> <p>
Name: <!-- <input type="text" [(ngModel)]="bodyText" /> --> Name: <input type="text"
(input)="onNewGenderInput($event.target.value)" />
</p> </p>
</app-popin> </app-popin>

0
front/src/app/scene/track-edit/track-edit.less
View File

318
front/src/app/scene/track-edit/track-edit.ts
View File

@ -8,11 +8,12 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { DataService, GenderService, PlaylistService, ArtistService, TrackService, ArianeService } from 'app/service'; import { DataService, GenderService, ArtistService, TrackService, ArianeService, AlbumService } from 'app/service';
import { UploadProgress } from 'common/popin/upload-progress/upload-progress'; import { UploadProgress } from 'common/popin/upload-progress/upload-progress';
import { NodeData } from 'common/model'; import { NodeData } from 'common/model';
import { PopInService } from 'common/service'; import { PopInService } from 'common/service';
import { Media } from 'app/model'; import { Media } from 'app/model';
import { isNullOrUndefined } from 'common/utils';
export interface ElementList { export interface ElementList {
value?: number; value?: number;
@ -23,27 +24,21 @@ export interface ElementList {
class DataToSend { class DataToSend {
name:string = ''; name:string = '';
description:string = ''; description:string = '';
episode?:number; track?:number;
playlistId:number = null;
artistId:number = null; artistId:number = null;
albumId:number = null; albumId:number = null;
dataId:number = -1; dataId:number = -1;
time?:number; genderId:number = null;
typeId:number = null;
covers:number[] = [];
generatedName:string = ''; generatedName:string = '';
clone() { clone() {
let tmp = new DataToSend(); let tmp = new DataToSend();
tmp.name = this.name; tmp.name = this.name;
tmp.description = this.description; tmp.description = this.description;
tmp.episode = this.episode; tmp.track = this.track;
tmp.playlistId = this.playlistId;
tmp.artistId = this.artistId; tmp.artistId = this.artistId;
tmp.albumId = this.albumId; tmp.albumId = this.albumId;
tmp.dataId = this.dataId; tmp.dataId = this.dataId;
tmp.time = this.time; tmp.genderId = this.genderId;
tmp.typeId = this.typeId;
tmp.covers = this.covers;
tmp.generatedName = this.generatedName; tmp.generatedName = this.generatedName;
return tmp; return tmp;
} }
@ -51,8 +46,7 @@ class DataToSend {
@Component({ @Component({
selector: 'app-track-edit', selector: 'app-track-edit',
templateUrl: './track-edit.html', templateUrl: './track-edit.html'
styleUrls: [ './track-edit.less' ]
}) })
export class TrackEditScene implements OnInit { export class TrackEditScene implements OnInit {
@ -65,9 +59,6 @@ export class TrackEditScene implements OnInit {
data:DataToSend = new DataToSend(); data:DataToSend = new DataToSend();
dataOri:DataToSend = new DataToSend(); dataOri:DataToSend = new DataToSend();
coverFile:File;
uploadFileValue:string = '';
selectedFiles:FileList;
needSend:boolean = false; needSend:boolean = false;
@ -78,11 +69,14 @@ export class TrackEditScene implements OnInit {
public confirmDeleteImageUrl:string = null; public confirmDeleteImageUrl:string = null;
private deleteCoverId:number = null; private deleteCoverId:number = null;
private deleteMediaId:number = null; private deleteMediaId:number = null;
// to create new album/artist/gender:
private albumInputNew: string;
private artistInputNew: string;
private genderInputNew: string;
deleteConfirmed() { deleteConfirmed() {
if(this.deleteCoverId !== null) {
this.removeCoverAfterConfirm(this.deleteCoverId);
this.cleanConfirm();
}
if(this.deleteMediaId !== null) { if(this.deleteMediaId !== null) {
this.removeItemAfterConfirm(this.deleteMediaId); this.removeItemAfterConfirm(this.deleteMediaId);
this.cleanConfirm(); this.cleanConfirm();
@ -95,15 +89,9 @@ export class TrackEditScene implements OnInit {
this.deleteMediaId = null; this.deleteMediaId = null;
} }
coversDisplay:Array<any> = []; listGender: ElementList[] = [
listType: ElementList[] = [
{ value: undefined, label: '---' }, { value: undefined, label: '---' },
]; ];
listPlaylist: ElementList[] = [
{ value: undefined, label: '---' },
{ value: null, label: '---' },
];
listArtist: ElementList[] = [ listArtist: ElementList[] = [
{ value: undefined, label: '---' }, { value: undefined, label: '---' },
]; ];
@ -112,8 +100,8 @@ export class TrackEditScene implements OnInit {
]; ];
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private typeService: GenderService, private genderService: GenderService,
private playlistService: PlaylistService, private albumService: AlbumService,
private artistService: ArtistService, private artistService: ArtistService,
private trackService: TrackService, private trackService: TrackService,
private arianeService: ArianeService, private arianeService: ArianeService,
@ -130,16 +118,10 @@ export class TrackEditScene implements OnInit {
if(this.data.description !== this.dataOri.description) { if(this.data.description !== this.dataOri.description) {
this.needSend = true; this.needSend = true;
} }
if(this.data.episode !== this.dataOri.episode) { if(this.data.track !== this.dataOri.track) {
this.needSend = true; this.needSend = true;
} }
if(this.data.time !== this.dataOri.time) { if(this.data.genderId !== this.dataOri.genderId) {
this.needSend = true;
}
if(this.data.typeId !== this.dataOri.typeId) {
this.needSend = true;
}
if(this.data.playlistId !== this.dataOri.playlistId) {
this.needSend = true; this.needSend = true;
} }
if(this.data.artistId !== this.dataOri.artistId) { if(this.data.artistId !== this.dataOri.artistId) {
@ -151,47 +133,23 @@ export class TrackEditScene implements OnInit {
return this.needSend; return this.needSend;
} }
updateCoverList(covers: any) {
this.coversDisplay = [];
this.data.covers = [];
if(covers !== undefined && covers !== null) {
for(let iii = 0; iii < covers.length; iii++) {
this.data.covers.push(covers[iii]);
this.coversDisplay.push({
id:covers[iii],
url:this.dataService.getCoverThumbnailUrl(covers[iii])
});
}
} else {
this.coversDisplay = [];
}
}
ngOnInit() { ngOnInit() {
this.arianeService.updateManual(this.route.snapshot.paramMap); this.arianeService.updateManual(this.route.snapshot.paramMap);
this.idTrack = this.arianeService.getTrackId(); this.idTrack = this.arianeService.getTrackId();
let self = this; let self = this;
this.listType = [ { value: null, label: '---' } ]; this.listGender = [ { value: null, label: '---' } ];
this.listPlaylist = [ { value: null, label: '---' } ];
this.listArtist = [ { value: null, label: '---' } ]; this.listArtist = [ { value: null, label: '---' } ];
this.listAlbum = [ { value: null, label: '---' } ]; this.listAlbum = [ { value: null, label: '---' } ];
this.playlistService.getData() this.genderService.getOrder()
.then((response2) => { .then((response2) => {
for(let iii = 0; iii < response2.length; iii++) { for(let iii = 0; iii < response2.length; iii++) {
self.listPlaylist.push({ value: response2[iii].id, label: response2[iii].name }); self.listGender.push({ value: response2[iii].id, label: response2[iii].name });
}
}).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
});
this.typeService.getData()
.then((response2) => {
for(let iii = 0; iii < response2.length; iii++) {
self.listType.push({ value: response2[iii].id, label: response2[iii].name });
} }
}).catch((response2) => { }).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`); console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
}); });
// this.artistService.getOrder() // this.artistService.getOrder()
this.artistService.getData() this.artistService.getOrder()
.then((response3) => { .then((response3) => {
for(let iii = 0; iii < response3.length; iii++) { for(let iii = 0; iii < response3.length; iii++) {
self.listArtist.push({ value: response3[iii].id, label: response3[iii].name }); self.listArtist.push({ value: response3[iii].id, label: response3[iii].name });
@ -200,34 +158,37 @@ export class TrackEditScene implements OnInit {
}).catch((response3) => { }).catch((response3) => {
console.log(`get response3 : ${ JSON.stringify(response3, null, 2)}`); console.log(`get response3 : ${ JSON.stringify(response3, null, 2)}`);
}); });
this.albumService.getOrder()
.then((response3) => {
for(let iii = 0; iii < response3.length; iii++) {
self.listAlbum.push({ value: response3[iii].id, label: response3[iii].name });
console.log(`[${ self.data.dataId }] Get artist: ${ response3[iii].id }, label:${ response3[iii].name}`);
}
}).catch((response3) => {
console.log(`get response3 : ${ JSON.stringify(response3, null, 2)}`);
});
this.trackService.get(this.idTrack) this.trackService.get(this.idTrack)
.then((response: Media) => { .then((response: Media) => {
console.log(`get response of track : ${ JSON.stringify(response, null, 2)}`); console.log(`get response of track : ${ JSON.stringify(response, null, 2)}`);
self.data.name = response.name; self.data.name = response.name;
self.data.description = response.description; self.data.description = response.description;
self.data.episode = response.episode; self.data.track = response.track;
self.data.playlistId = response.playlistId;
if(self.data.playlistId === undefined) {
self.data.playlistId = null;
}
self.data.dataId = response.dataId; self.data.dataId = response.dataId;
self.data.time = response.time;
self.data.generatedName = "????????? TODO ????????? "; // response.generatedName; self.data.generatedName = "????????? TODO ????????? "; // response.generatedName;
self.onChangeType(response.typeId); self.onChangeGender(response.genderId);
self.onChangeArtist(response.artistId); if (response?.artists.length != 0) {
self.onChangeArtist(response.artists[0]);
}
self.data.albumId = response.albumId; self.data.albumId = response.albumId;
if(self.data.albumId === undefined) { if(self.data.albumId === undefined) {
self.data.albumId = null; self.data.albumId = null;
} }
self.dataOri = self.data.clone(); self.dataOri = self.data.clone();
self.updateCoverList(response.covers);
self.updateNeedSend(); self.updateNeedSend();
console.log(`coversList : ${ JSON.stringify(self.coversDisplay, null, 2)}`);
self.itemIsLoading = false; self.itemIsLoading = false;
}).catch((response) => { }).catch((response) => {
self.error = 'Can not get the data'; self.error = 'Can not get the data';
self.data = new DataToSend(); self.data = new DataToSend();
self.coversDisplay = [];
self.dataOri = self.data.clone(); self.dataOri = self.data.clone();
self.updateNeedSend(); self.updateNeedSend();
self.itemIsNotFound = true; self.itemIsNotFound = true;
@ -235,32 +196,12 @@ export class TrackEditScene implements OnInit {
}); });
} }
onChangeType(value:any):void { onChangeGender(value:any):void {
console.log(`Change requested of type ... ${value}`); console.log(`Change requested of gender ... ${value}`);
this.data.typeId = value; this.data.genderId = value;
if(this.data.typeId === undefined) { if(this.data.genderId === undefined) {
this.data.typeId = null; this.data.genderId = null;
} }
this.data.artistId = null;
this.data.albumId = null;
this.listArtist = [ { value: undefined, label: '---' } ];
this.listAlbum = [ { value: undefined, label: '---' } ];
let self = this;
this.updateNeedSend();
if(this.data.typeId !== undefined) {
self.typeService.getSubArtist(this.data.typeId)
.then((response2: NodeData[]) => {
for(let iii = 0; iii < response2.length; iii++) {
self.listArtist.push({ value: response2[iii].id, label: response2[iii].name });
}
}).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
});
}
}
onChangePlaylist(value:any):void {
this.data.playlistId = value;
this.updateNeedSend(); this.updateNeedSend();
} }
@ -269,23 +210,13 @@ export class TrackEditScene implements OnInit {
if(this.data.artistId === undefined) { if(this.data.artistId === undefined) {
this.data.artistId = null; this.data.artistId = null;
} }
this.data.albumId = null;
this.listAlbum = [ { value: undefined, label: '---' } ];
let self = this;
if(this.data.artistId !== undefined) {
self.artistService.getAlbum(this.data.artistId)
.then((response3: NodeData[]) => {
for(let iii = 0; iii < response3.length; iii++) {
self.listAlbum.push({ value: response3[iii].id, label: `album ${ response3[iii].name}` });
}
}).catch((response3) => {
console.log(`get response22 : ${ JSON.stringify(response3, null, 2)}`);
});
}
this.updateNeedSend(); this.updateNeedSend();
} }
onChangeAlbum(value:any):void { onChangeAlbum(value:any):void {
this.data.albumId = value; this.data.albumId = value;
if(this.data.albumId === undefined) {
this.data.albumId = null;
}
this.updateNeedSend(); this.updateNeedSend();
} }
@ -302,23 +233,12 @@ export class TrackEditScene implements OnInit {
} }
this.updateNeedSend(); this.updateNeedSend();
} }
onDate(value:any):void {
if(value.value.length > 4) {
value.value = this.data.time;
} else {
this.data.time = value.value;
}
if(this.data.time < 10) {
this.data.time = null;
}
this.updateNeedSend();
}
onEpisode(value:any):void { onTrack(value:any):void {
if(value.value.length > 4) { if(value.value.length > 4) {
value.value = this.data.episode; value.value = this.data.track;
} else { } else {
this.data.episode = parseInt(value.value, 10); this.data.track = parseInt(value.value, 10);
} }
this.updateNeedSend(); this.updateNeedSend();
} }
@ -336,31 +256,21 @@ export class TrackEditScene implements OnInit {
data.description = this.data.description; data.description = this.data.description;
} }
} }
if(this.data.episode !== this.dataOri.episode) { if(this.data.track !== this.dataOri.track) {
data.episode = this.data.episode; data.track = this.data.track;
} }
if(this.data.time !== this.dataOri.time) { if(this.data.genderId !== this.dataOri.genderId) {
data.time = this.data.time; if(this.data.genderId === undefined) {
} data.genderId = null;
if(this.data.typeId !== this.dataOri.typeId) {
if(this.data.typeId === undefined) {
data.typeId = null;
} else { } else {
data.typeId = this.data.typeId; data.genderId = this.data.genderId;
}
}
if(this.data.playlistId !== this.dataOri.playlistId) {
if(this.data.playlistId === undefined) {
data.playlistId = null;
} else {
data.playlistId = this.data.playlistId;
} }
} }
if(this.data.artistId !== this.dataOri.artistId) { if(this.data.artistId !== this.dataOri.artistId) {
if(this.data.artistId === undefined) { if(this.data.artistId === undefined) {
data.artistId = null; data.artists = null;
} else { } else {
data.artistId = this.data.artistId; data.artists = [ this.data.artistId ];
} }
} }
if(this.data.albumId !== this.dataOri.albumId) { if(this.data.albumId !== this.dataOri.albumId) {
@ -381,80 +291,6 @@ export class TrackEditScene implements OnInit {
self.updateNeedSend(); self.updateNeedSend();
}); });
} }
// At the drag drop area
// (drop)="onDropFile($event)"
onDropFile(event: DragEvent) {
event.preventDefault();
// this.uploadFile(event.dataTransfer.files[0]);
console.log('error in drag & drop ...');
}
// At the drag drop area
// (dragover)="onDragOverFile($event)"
onDragOverFile(event) {
event.stopPropagation();
event.preventDefault();
}
// At the file input element
// (change)="selectFile($event)"
onChangeCover(value:any):void {
this.selectedFiles = value.files;
this.coverFile = this.selectedFiles[0];
console.log(`select file ${ this.coverFile.name}`);
this.uploadCover(this.coverFile);
this.updateNeedSend();
}
uploadCover(file?:File) {
if(file === undefined) {
console.log('No file selected!');
return;
}
let self = this;
// clean upload labels*
this.upload.clear();
// display the upload pop-in
this.popInService.open('popin-upload-progress');
this.trackService.uploadCover(file, this.idTrack, (count, total) => {
self.upload.mediaSendSize = count;
self.upload.mediaSize = total;
})
.then((response:any) => {
console.log(`get response of cover : ${ JSON.stringify(response, null, 2)}`);
self.upload.result = 'Cover added done';
// we retrive the whiole media ==> update data ...
self.updateCoverList(response.covers);
}).catch((response:any) => {
// self.error = "Can not get the data";
console.log('Can not add the cover in the track...');
self.upload.error = `Error in the upload of the cover...${ JSON.stringify(response, null, 2)}`;
});
}
removeCover(id:number) {
this.cleanConfirm();
this.confirmDeleteComment = `Delete the cover ID: ${ id}`;
this.confirmDeleteImageUrl = this.dataService.getCoverThumbnailUrl(id);
this.deleteCoverId = id;
this.popInService.open('popin-delete-confirm');
}
removeCoverAfterConfirm(id:number) {
console.log(`Request remove cover: ${ id}`);
let self = this;
this.trackService.deleteCover(this.idTrack, id)
.then((response:any) => {
console.log(`get response of remove cover : ${ JSON.stringify(response, null, 2)}`);
self.upload.result = 'Cover remove done';
// we retrive the whiole media ==> update data ...
self.updateCoverList(response.covers);
}).catch((response:any) => {
// self.error = "Can not get the data";
console.log('Can not remove the cover of the track...');
self.upload.error = `Error in the upload of the cover...${ JSON.stringify(response, null, 2)}`;
});
}
removeItem() { removeItem() {
console.log('Request remove Media...'); console.log('Request remove Media...');
this.cleanConfirm(); this.cleanConfirm();
@ -477,18 +313,29 @@ export class TrackEditScene implements OnInit {
eventPopUpAlbum(event: string): void { eventPopUpAlbum(event: string): void {
console.log(`GET event: ${ event}`); console.log(`GET event: ${ event}`);
this.popInService.close('popin-new-album'); this.popInService.close('popin-new-album');
if (event === "validate" && !isNullOrUndefined(this.albumInputNew)) {
this.albumService.insert({
name:this.albumInputNew,
});
}
} }
eventPopUpArtist(event: string): void { eventPopUpArtist(event: string): void {
console.log(`GET event: ${ event}`); console.log(`GET event: ${ event}`);
this.popInService.close('popin-new-artist'); this.popInService.close('popin-new-artist');
if (event === "validate" && !isNullOrUndefined(this.artistInputNew)) {
this.artistService.insert({
name:this.artistInputNew,
});
} }
eventPopUpType(event: string): void {
console.log(`GET event: ${ event}`);
this.popInService.close('popin-new-type');
} }
eventPopUpPlaylist(event: string): void { eventPopUpGender(event: string): void {
console.log(`GET event: ${ event}`); console.log(`GET event: ${ event}`);
this.popInService.close('popin-new-playlist'); this.popInService.close('popin-new-gender');
if (event === "validate" && !isNullOrUndefined(this.genderInputNew)) {
this.genderService.insert({
name:this.genderInputNew,
});
}
} }
newAlbum(): void { newAlbum(): void {
@ -499,13 +346,22 @@ export class TrackEditScene implements OnInit {
console.log('Request new Artist...'); console.log('Request new Artist...');
this.popInService.open('popin-new-artist'); this.popInService.open('popin-new-artist');
} }
newType(): void { newGender(): void {
console.log('Request new Type...'); console.log('Request new Gender...');
this.popInService.open('popin-create-type'); this.popInService.open('popin-new-gender');
} }
newPlaylist() {
console.log('Request new Playlist...'); onNewGenderInput(value) {
this.popInService.open('popin-new-playlist'); console.log(`Request new Gender...${value}`);
this.genderInputNew = value;
}
onNewArtistInput(value) {
console.log(`Request new Gender...${value}`);
this.artistInputNew = value;
}
onNewAlbumInput(value) {
console.log(`Request new Gender...${value}`);
this.albumInputNew = value;
} }
} }

12
front/src/app/scene/track/track.ts
View File

@ -49,7 +49,7 @@ export class TrackScene implements OnInit {
name:string = ''; name:string = '';
description:string = ''; description:string = '';
episode:number = undefined; episode:number = undefined;
artistId:number = undefined; artists:number[] = undefined;
artistName:string = undefined; artistName:string = undefined;
albumId:number = undefined; albumId:number = undefined;
albumName:string = undefined; albumName:string = undefined;
@ -210,7 +210,7 @@ export class TrackScene implements OnInit {
self.name = response.name; self.name = response.name;
self.description = response.description; self.description = response.description;
self.episode = response.episode; self.episode = response.episode;
self.artistId = response.artistId; self.artists = response.artists;
self.albumId = response.albumId; self.albumId = response.albumId;
self.dataId = response.dataId; self.dataId = response.dataId;
self.time = response.time; self.time = response.time;
@ -226,8 +226,8 @@ export class TrackScene implements OnInit {
self.covers = self.dataService.getCoverListUrl(response.covers); self.covers = self.dataService.getCoverListUrl(response.covers);
self.generateName(); self.generateName();
if(self.artistId !== undefined && self.artistId !== null) { if(!isNullOrUndefined(self.artists) && self.artists.length !== 0) {
self.artistService.get(self.artistId) self.artistService.get(self.artists[0])
.then((response2) => { .then((response2) => {
self.artistName = response2.name; self.artistName = response2.name;
self.generateName(); self.generateName();
@ -235,7 +235,7 @@ export class TrackScene implements OnInit {
// nothing to do ... // nothing to do ...
}); });
} }
if(self.albumId !== undefined && self.albumId !== null) { if(!isNullOrUndefined(self.albumId)) {
self.albumService.get(self.albumId) self.albumService.get(self.albumId)
.then((response4) => { .then((response4) => {
self.albumName = response4.name; self.albumName = response4.name;
@ -279,7 +279,7 @@ export class TrackScene implements OnInit {
self.name = ''; self.name = '';
self.description = ''; self.description = '';
self.episode = undefined; self.episode = undefined;
self.artistId = undefined; self.artists = undefined;
self.albumId = undefined; self.albumId = undefined;
self.dataId = -1; self.dataId = -1;
self.time = undefined; self.time = undefined;

6
front/src/app/service/GenericInterfaceModelDB.ts
View File

@ -11,6 +11,7 @@ export class GenericInterfaceModelDB {
// nothing to do ... // nothing to do ...
} }
gets(): Promise<NodeData[]> { gets(): Promise<NodeData[]> {
let self = this; let self = this;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -122,6 +123,11 @@ export class GenericInterfaceModelDB {
}); });
} }
insert(data: any): any {
let ret = this.http.postSpecific([this.serviceName], data);
return this.bdd.addAfterPost(this.serviceName, ret);
}
put(id:number, data:any):any { put(id:number, data:any):any {
let ret = this.http.putSpecific([this.serviceName, id], data); let ret = this.http.putSpecific([this.serviceName, id], data);
return this.bdd.setAfterPut(this.serviceName, id, ret); return this.bdd.setAfterPut(this.serviceName, id, ret);

1
front/src/app/service/gender.ts
View File

@ -20,6 +20,7 @@ export interface MessageLogIn {
@Injectable() @Injectable()
export class GenderService extends GenericInterfaceModelDB { export class GenderService extends GenericInterfaceModelDB {
constructor(http: HttpWrapperService, constructor(http: HttpWrapperService,
bdd: BddService) { bdd: BddService) {
super('gender', http, bdd); super('gender', http, bdd);

18
front/src/common/service/bdd.ts
View File

@ -21,6 +21,24 @@ export class BddService {
console.log('Start BddService'); console.log('Start BddService');
} }
addAfterPost(name: string, ret: any) {
let self = this;
return new Promise((resolve, reject) => {
self.get(name)
.then((response:DataInterface) => {
let responseTmp = response;
ret.then((response2) => {
responseTmp.add(response2);
resolve(response2);
}).catch((response2) => {
reject(response2);
});
}).catch((response) => {
reject(response);
});
});
}
setAfterPut(name: string, id: number, ret: any) { setAfterPut(name: string, id: number, ret: any) {
let self = this; let self = this;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

4
front/src/common/utils/dataInterface.ts
View File

@ -124,6 +124,10 @@ export class DataInterface {
} }
} }
} }
public add(value: NodeData): void {
console.log(`[I] Set ${ this.name }`);
this.bdd.push(value);
}
public delete(id: number): void { public delete(id: number): void {
console.log(`[I] delete ${ this.name } ${ id}`); console.log(`[I] delete ${ this.name } ${ id}`);