diff --git a/front/src/app/component/element-player-audio/element-player-audio.ts b/front/src/app/component/element-player-audio/element-player-audio.ts index 12b65a6..b7a873a 100644 --- a/front/src/app/component/element-player-audio/element-player-audio.ts +++ b/front/src/app/component/element-player-audio/element-player-audio.ts @@ -137,7 +137,7 @@ export class ElementPlayerAudioComponent implements OnInit { self.mediaSource = self.httpService.createRESTCall2({ api: `data/${self.currentLMedia.dataId}/unknowMediaName.webm`, //${self.generatedName}`, addURLToken: true, - }); + }).replace("http://localhost:19080", "https://atria-soft.org"); }).catch(() => { console.error("error not ùmanaged in audio player ... 111"); }) diff --git a/front/src/app/scene/album/album.html b/front/src/app/scene/album/album.html index bf5985e..b8fc6f0 100644 --- a/front/src/app/scene/album/album.html +++ b/front/src/app/scene/album/album.html @@ -1,11 +1,6 @@
-
-
-
- -
-
-
+
+
{{name}}
@@ -15,18 +10,22 @@
{{albumDescription}}
-
- {{albumDescription}} +
+ + +
+
+
+
+
- -
-
+
Tracks:
Track:
diff --git a/front/src/app/scene/album/album.ts b/front/src/app/scene/album/album.ts index f8f7dc0..89ac5f6 100644 --- a/front/src/app/scene/album/album.ts +++ b/front/src/app/scene/album/album.ts @@ -4,117 +4,116 @@ * @license PROPRIETARY (see license file) */ - import { Component, OnInit } from '@angular/core'; - import { Media } from 'app/model'; - - import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service'; - - @Component({ - selector: 'app-album', - templateUrl: './album.html' - }) - - export class AlbumScene implements OnInit { - public idArtist = -1; - public idAlbum = -1; - public name: string = ''; - public description: string = undefined; - public covers: Array = undefined; - public albumName: string = ''; - public albumDescription: string = undefined; - public albumCovers: string[] = undefined; - - public tracksIds: number[] = undefined; - public tracks: Media[] = undefined; - - constructor( - private artistService: ArtistService, - private albumService: AlbumService, - private trackService: TrackService, - private arianeService: ArianeService, - private playerService: PlayerService, - private dataService: DataService) { - - } - - ngOnInit() { - // this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId')); - // this.idType = parseInt(this.route.snapshot.paramMap.get('typeId')); - this.idArtist = this.arianeService.getArtistId(); - this.idAlbum = this.arianeService.getAlbumId(); - let self = this; - this.artistService.get(this.idArtist) - .then((response) => { - self.name = response.name; - self.description = response.description; - self.covers = this.dataService.getCoverListUrl(response.covers); - }).catch((response) => { - self.description = undefined; - self.name = '???'; - self.covers = undefined; - // no check just ==> an error occured on album - }); - this.albumService.get(this.idAlbum) - .then((response) => { - self.albumName = response.name; - self.albumDescription = response.description; - self.albumCovers = this.dataService.getCoverListUrl(response.covers); - }).catch((response) => { - self.albumDescription = undefined; - self.albumName = '???'; - self.albumCovers = undefined; - // no check just ==> an error occured on album - }); - - //console.log("all the tracks: " + self.tracksIds); - this.trackService.getWithAlbum(self.idAlbum) - .then((response2: Media[]) => { - self.tracks = response2; - //console.log(`>>>>BBB get tracks : ${JSON.stringify(response2, null, 2)}`); - }).catch((response) => { - //console.log(`>>>>BBB plop`); - self.tracks = undefined; - }); - } - - onSelectTrack(event: any, idSelected: number):void { - if (event.ctrlKey === false) { - //this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); - // TODO: add on global player ... - //this.playerService.play(idSelected); - - let elements: number[] = []; - let valuePlayed: number = undefined; - for (let iii=0; iii< this.tracks.length; iii++) { - elements.push(this.tracks[iii].id); - //console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`); - if (this.tracks[iii].id == idSelected) { - //console.log(` ==> find`); - valuePlayed = iii; - } - } - this.playerService.playInList(valuePlayed, elements); - - } else { - this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); - } - } - playAll(event: any):void { +import { Component, OnInit } from '@angular/core'; +import { Media } from 'app/model'; + +import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service'; + +@Component({ + selector: 'app-album', + templateUrl: './album.html' +}) + +export class AlbumScene implements OnInit { + public idArtist = -1; + public idAlbum = -1; + public name: string = ''; + public description: string = undefined; + public covers: Array = undefined; + public albumName: string = ''; + public albumDescription: string = undefined; + public albumCovers: string[] = undefined; + + public tracksIds: number[] = undefined; + public tracks: Media[] = undefined; + + constructor( + private artistService: ArtistService, + private albumService: AlbumService, + private trackService: TrackService, + private arianeService: ArianeService, + private playerService: PlayerService, + private dataService: DataService) { + + } + + ngOnInit() { + // this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId')); + // this.idType = parseInt(this.route.snapshot.paramMap.get('typeId')); + this.idArtist = this.arianeService.getArtistId(); + this.idAlbum = this.arianeService.getAlbumId(); + let self = this; + this.artistService.get(this.idArtist) + .then((response) => { + self.name = response.name; + self.description = response.description; + self.covers = this.dataService.getCoverListUrl(response.covers); + }).catch((response) => { + self.description = undefined; + self.name = '???'; + self.covers = undefined; + // no check just ==> an error occured on album + }); + this.albumService.get(this.idAlbum) + .then((response) => { + self.albumName = response.name; + self.albumDescription = response.description; + self.albumCovers = this.dataService.getCoverListUrl(response.covers); + }).catch((response) => { + self.albumDescription = undefined; + self.albumName = '???'; + self.albumCovers = undefined; + // no check just ==> an error occured on album + }); + + //console.log("all the tracks: " + self.tracksIds); + this.trackService.getWithAlbum(self.idAlbum) + .then((response2: Media[]) => { + self.tracks = response2; + //console.log(`>>>>BBB get tracks : ${JSON.stringify(response2, null, 2)}`); + }).catch((response) => { + //console.log(`>>>>BBB plop`); + self.tracks = undefined; + }); + } + + onSelectTrack(event: any, idSelected: number): void { + if (event.ctrlKey === false) { + //this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); + // TODO: add on global player ... + //this.playerService.play(idSelected); + + let elements: number[] = []; + let valuePlayed: number = undefined; + for (let iii = 0; iii < this.tracks.length; iii++) { + elements.push(this.tracks[iii].id); + //console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`); + if (this.tracks[iii].id == idSelected) { + //console.log(` ==> find`); + valuePlayed = iii; + } + } + this.playerService.playInList(valuePlayed, elements); + + } else { + this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 }); + } + } + playAll(event: any): void { let elements: number[] = []; - for (let iii=0; iii< this.tracks.length; iii++) { + for (let iii = 0; iii < this.tracks.length; iii++) { elements.push(this.tracks[iii].id); } this.playerService.clear(); this.playerService.setNewPlaylist(elements); - } - playShuffe(event: any):void { + } + playShuffle(event: any): void { let elements: number[] = []; - for (let iii=0; iii< this.tracks.length; iii++) { + for (let iii = 0; iii < this.tracks.length; iii++) { elements.push(this.tracks[iii].id); } this.playerService.clear(); this.playerService.setNewPlaylistShuffle(elements); - } - } - - \ No newline at end of file + } +} + diff --git a/front/src/app/scene/album/albums.html b/front/src/app/scene/album/albums.html index dce238c..008e04d 100644 --- a/front/src/app/scene/album/albums.html +++ b/front/src/app/scene/album/albums.html @@ -1,26 +1,28 @@
-
-
-
- -
-
-
+
+
{{name}}
{{description}}
- - +
+ + +
+
+
+
+ +
-
+
Albums:
Album:
diff --git a/front/src/app/scene/album/albums.ts b/front/src/app/scene/album/albums.ts index 849d42c..6a8dbd9 100644 --- a/front/src/app/scene/album/albums.ts +++ b/front/src/app/scene/album/albums.ts @@ -4,17 +4,17 @@ * @license PROPRIETARY (see license file) */ - import { Component, OnInit } from '@angular/core'; - - import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service'; - import { NodeData } from 'common/model'; - - @Component({ - selector: 'app-albums', - templateUrl: './albums.html' - }) - - export class AlbumsScene implements OnInit { +import { Component, OnInit } from '@angular/core'; + +import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service'; +import { NodeData } from 'common/model'; + +@Component({ + selector: 'app-albums', + templateUrl: './albums.html' +}) + +export class AlbumsScene implements OnInit { public name: string = ''; public description: string = undefined; public covers: string[] = undefined; @@ -23,99 +23,98 @@ public countSubElement: number = undefined; countTrack: (id: number) => Promise; getArtistsString: (id: number) => Promise; - + constructor( - private albumService: AlbumService, - private artistService: ArtistService, - private arianeService: ArianeService, - private trackService: TrackService, - private playerService: PlayerService, - private dataService: DataService) { - + private albumService: AlbumService, + private artistService: ArtistService, + private arianeService: ArianeService, + private trackService: TrackService, + private playerService: PlayerService, + private dataService: DataService) { + } - - countTrackCallback(albumId: number) : Promise { + + countTrackCallback(albumId: number): Promise { return this.albumService.countTrack(albumId); - } - - getArtistsStringCallback(albumId: number) : Promise { + } + + getArtistsStringCallback(albumId: number): Promise { //console.log(`request all artist for album: {albumId}`) return this.albumService.getArtists(albumId); } ngOnInit() { - this.getArtistsString = (id:number) => {return self.getArtistsStringCallback(id);}; - this.countTrack = (id:number) => {return self.countTrackCallback(id);}; - let self = this; - self.name = "All Albums"; - self.description = "View all albums (no specific artist)"; - - //console.log(`get parameter id: ${ this.idArtist}`); - this.albumService.getOrder() - .then((response: NodeData[]) => { - //console.log(`>>>> get album : ${JSON.stringify(response)}`) - self.albums = response; - }).catch((response) => { - self.albums = undefined; - }); - // TODO later: get all orfan tracks ... - /* - this.artistService.getTrack(this.idArtist) - .then((response: NodeData[]) => { - //console.log(`>>>> get track : ${JSON.stringify(response)}`) - self.tracks = response; - }).catch((response) => { - self.tracks = undefined; - }); - */ - } - - - - onSelectAlbum(event: any, idSelected: number):void { + this.getArtistsString = (id: number) => { return self.getArtistsStringCallback(id); }; + this.countTrack = (id: number) => { return self.countTrackCallback(id); }; + let self = this; + self.name = "All Albums"; + self.description = "View all albums (no specific artist)"; + + //console.log(`get parameter id: ${ this.idArtist}`); + this.albumService.getOrder() + .then((response: NodeData[]) => { + //console.log(`>>>> get album : ${JSON.stringify(response)}`) + self.albums = response; + }).catch((response) => { + self.albums = undefined; + }); + // TODO later: get all orfan tracks ... + /* + this.artistService.getTrack(this.idArtist) + .then((response: NodeData[]) => { + //console.log(`>>>> get track : ${JSON.stringify(response)}`) + self.tracks = response; + }).catch((response) => { + self.tracks = undefined; + }); + */ + } + + + + onSelectAlbum(event: any, idSelected: number): void { if (event.ctrlKey) { - this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 } ); + this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 }); } else { - this.arianeService.navigateAlbum({albumId: idSelected, newWindows: event.which === 2 } ); + this.arianeService.navigateAlbum({ albumId: idSelected, newWindows: event.which === 2 }); } - } - - onSelectTrack(event: any, idSelected: number):void { - if (event.ctrlKey) { - this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); - } else { - 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 ...`) - }); - } - } - - \ No newline at end of file + } + + onSelectTrack(event: any, idSelected: number): void { + if (event.ctrlKey) { + this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 }); + } else { + 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 ...`) + }); + } + playShuffle(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 ...`) + }); + } +} + diff --git a/front/src/app/scene/artist/artist-album.html b/front/src/app/scene/artist/artist-album.html index 5f43457..3b72be1 100644 --- a/front/src/app/scene/artist/artist-album.html +++ b/front/src/app/scene/artist/artist-album.html @@ -1,30 +1,31 @@
-
-
-
- -
-
-
-
+
+
+
{{name}}
-
+
{{albumName}}
{{albumDescription}}
-
- - +
+ + +
+
+
+
+ +
-
+
Tracks:
Track:
diff --git a/front/src/app/scene/artist/artist-album.ts b/front/src/app/scene/artist/artist-album.ts index 3515529..3d3102c 100644 --- a/front/src/app/scene/artist/artist-album.ts +++ b/front/src/app/scene/artist/artist-album.ts @@ -28,11 +28,11 @@ export class ArtistAlbumScene implements OnInit { public tracks: Media[] = undefined; constructor( - private artistService: ArtistService, - private albumService: AlbumService, - private trackService: TrackService, - private arianeService: ArianeService, - private playerService: PlayerService, + private artistService: ArtistService, + private albumService: AlbumService, + private trackService: TrackService, + private arianeService: ArianeService, + private playerService: PlayerService, private dataService: DataService) { } @@ -65,7 +65,7 @@ export class ArtistAlbumScene implements OnInit { self.albumCovers = undefined; // no check just ==> an error occured on album }); - + //console.log("all the tracks: " + self.tracksIds); this.trackService.getWithAlbum(self.idAlbum) .then((response2: Media[]) => { @@ -77,7 +77,7 @@ export class ArtistAlbumScene implements OnInit { }); } - onSelectTrack(event: any, idSelected: number):void { + onSelectTrack(event: any, idSelected: number): void { if (event.ctrlKey === false) { //this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); // TODO: add on global player ... @@ -85,7 +85,7 @@ export class ArtistAlbumScene implements OnInit { let elements: number[] = []; let valuePlayed: number = undefined; - for (let iii=0; iii< this.tracks.length; iii++) { + for (let iii = 0; iii < this.tracks.length; iii++) { elements.push(this.tracks[iii].id); //console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`); if (this.tracks[iii].id == idSelected) { @@ -96,23 +96,23 @@ export class ArtistAlbumScene implements OnInit { this.playerService.playInList(valuePlayed, elements); } else { - this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); + this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 }); } } - playAll(event: any):void { - let elements: number[] = []; - for (let iii=0; iii< this.tracks.length; iii++) { - elements.push(this.tracks[iii].id); - } - this.playerService.clear(); - this.playerService.setNewPlaylist(elements); + playAll(event: any): void { + let elements: number[] = []; + for (let iii = 0; iii < this.tracks.length; iii++) { + elements.push(this.tracks[iii].id); + } + this.playerService.clear(); + this.playerService.setNewPlaylist(elements); } - playShuffe(event: any):void { - let elements: number[] = []; - for (let iii=0; iii< this.tracks.length; iii++) { - elements.push(this.tracks[iii].id); - } - this.playerService.clear(); - this.playerService.setNewPlaylistShuffle(elements); + playShuffle(event: any): void { + let elements: number[] = []; + for (let iii = 0; iii < this.tracks.length; iii++) { + elements.push(this.tracks[iii].id); + } + this.playerService.clear(); + this.playerService.setNewPlaylistShuffle(elements); } } diff --git a/front/src/app/scene/artist/artist.html b/front/src/app/scene/artist/artist.html index 27774c0..66558d4 100644 --- a/front/src/app/scene/artist/artist.html +++ b/front/src/app/scene/artist/artist.html @@ -1,26 +1,28 @@
-
-
-
- -
-
-
-
+
+
+
{{name}}
{{description}}
- - +
+ + +
+
+
+
+ +
-
+
Albums:
Album:
diff --git a/front/src/app/scene/artist/artist.ts b/front/src/app/scene/artist/artist.ts index 430ba59..1ad7365 100644 --- a/front/src/app/scene/artist/artist.ts +++ b/front/src/app/scene/artist/artist.ts @@ -25,20 +25,20 @@ export class ArtistScene implements OnInit { countTrack: (id: number) => Promise; constructor( - private albumService: AlbumService, - private artistService: ArtistService, - private playerService: PlayerService, - private arianeService: ArianeService, + private albumService: AlbumService, + private artistService: ArtistService, + private playerService: PlayerService, + private arianeService: ArianeService, private dataService: DataService) { } - - countTrackCallback(albumId: number) : Promise { + + countTrackCallback(albumId: number): Promise { return this.albumService.countTrack(albumId); } ngOnInit() { - this.countTrack = (id:number) => {return self.countTrackCallback(id);}; + this.countTrack = (id: number) => { return self.countTrackCallback(id); }; // this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId')); // this.idType = parseInt(this.route.snapshot.paramMap.get('typeId')); this.idArtist = this.arianeService.getArtistId(); @@ -76,48 +76,48 @@ export class ArtistScene implements OnInit { - onSelectAlbum(event: any, idSelected: number):void { + onSelectAlbum(event: any, idSelected: number): void { if (event.ctrlKey) { - this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 } ); + this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 }); } else { - this.arianeService.navigateArtist({artistId: this.idArtist, albumId: idSelected, newWindows: event.which === 2 } ); + this.arianeService.navigateArtist({ artistId: this.idArtist, albumId: idSelected, newWindows: event.which === 2 }); } } - onSelectTrack(event: any, idSelected: number):void { + onSelectTrack(event: any, idSelected: number): void { if (event.ctrlKey === false) { - this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); + this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 }); } else { - this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); + this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 }); } } getAllTracksIds(): Promise { let elements: number[] = []; - for (let iii=0; iii< this.albums.length; iii++) { + for (let iii = 0; iii < this.albums.length; iii++) { elements.push(this.albums[iii].id); } return this.albumService.getAllTracksForAlbums(elements); } - playAll(event: any):void { - this.playerService.clear(); + playAll(event: any): void { + this.playerService.clear(); let self = this; - this.getAllTracksIds() + this.getAllTracksIds() .then((response: number[]) => { self.playerService.setNewPlaylist(response); - }) + }) .catch(() => { console.log(`error to get list o ftrack ...`) }); } - playShuffe(event: any):void { - this.playerService.clear(); + playShuffle(event: any): void { + this.playerService.clear(); let self = this; - this.getAllTracksIds() + this.getAllTracksIds() .then((response: number[]) => { self.playerService.setNewPlaylistShuffle(response); - }) + }) .catch(() => { console.log(`error to get list o ftrack ...`) }); diff --git a/front/src/app/scene/artist/artists.html b/front/src/app/scene/artist/artists.html index df4ad01..0c82d4d 100644 --- a/front/src/app/scene/artist/artists.html +++ b/front/src/app/scene/artist/artists.html @@ -1,26 +1,28 @@
-
-
-
- -
-
+
-
+
{{name}}
{{description}}
- - +
+ + +
+
+
+
+ +
-
+
Artists:
Artist:
diff --git a/front/src/app/scene/artist/artists.ts b/front/src/app/scene/artist/artists.ts index 6e846f8..0843a48 100644 --- a/front/src/app/scene/artist/artists.ts +++ b/front/src/app/scene/artist/artists.ts @@ -24,18 +24,18 @@ export class ArtistsScene implements OnInit { countAlbum: (id: number) => Promise; constructor( - private artistService: ArtistService, - private albumService: AlbumService, - private trackService: TrackService, - private playerService: PlayerService, - private arianeService: ArianeService) { + private artistService: ArtistService, + private albumService: AlbumService, + private trackService: TrackService, + private playerService: PlayerService, + private arianeService: ArianeService) { } ngOnInit() { let self = this; - this.countTrack = (id:number) => {return self.countTrackCallback(id);}; - this.countAlbum = (id:number) => {return self.countAlbumCallback(id);}; + this.countTrack = (id: number) => { return self.countTrackCallback(id); }; + this.countAlbum = (id: number) => { return self.countAlbumCallback(id); }; // this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId')); // this.idType = parseInt(this.route.snapshot.paramMap.get('typeId')); this.artistService.getOrder() @@ -46,46 +46,46 @@ export class ArtistsScene implements OnInit { self.artists = undefined; }); } - onSelectArtist(event: any, idSelected: number):void { + onSelectArtist(event: any, idSelected: number): void { if (event.ctrlKey) { - this.arianeService.navigateArtistEdit({id: idSelected, newWindows:event.which === 2} ); + this.arianeService.navigateArtistEdit({ id: idSelected, newWindows: event.which === 2 }); } else { - this.arianeService.navigateArtist({artistId: idSelected, newWindows:event.which === 2} ); + this.arianeService.navigateArtist({ artistId: idSelected, newWindows: event.which === 2 }); } } - countTrackCallback(artistId: number) : Promise { + countTrackCallback(artistId: number): Promise { return this.artistService.countTrack(artistId); } - countAlbumCallback(artistId: number) : Promise { + countAlbumCallback(artistId: number): Promise { return this.artistService.countAlbum(artistId); } - playAll(event: any):void { - this.playerService.clear(); + playAll(event: any): void { + this.playerService.clear(); let self = this; - this.trackService.getData() + 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(); + playShuffle(event: any): void { + this.playerService.clear(); let self = this; - this.trackService.getData() + 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 ...`) }); diff --git a/front/src/app/service/data.ts b/front/src/app/service/data.ts index 56fe496..4bae8ab 100644 --- a/front/src/app/service/data.ts +++ b/front/src/app/service/data.ts @@ -12,26 +12,26 @@ import { HTTPMimeType, HTTPRequestModel, HttpWrapperService, ModelResponseHttp } @Injectable() export class DataService { // 0: Not hide password; 1 hide password; - private serviceName:string = 'data'; + private serviceName: string = 'data'; constructor(private http: HttpWrapperService) { console.log('Start DataService'); } - getData():any { + getData(): any { return this.http.getSpecific(this.serviceName); } - get(_id:number):any { + get(_id: number): any { return this.http.getSpecific([this.serviceName, _id]); } - uploadFile(_form:FormData, _progress:any = null) { + uploadFile(_form: FormData, _progress: any = null) { // return this.http.uploadFileMultipart(this.serviceName, null, _file); - return this.http.uploadMultipart(`${this.serviceName }/upload/`, _form, _progress); + return this.http.uploadMultipart(`${this.serviceName}/upload/`, _form, _progress); } - getImage(_id:number) : Promise { + getImage(_id: number): Promise { return this.http.requestImage({ endPoint: this.serviceName, requestType: HTTPRequestModel.GET, @@ -39,7 +39,7 @@ export class DataService { contentType: HTTPMimeType.JSON, }); } - getImageThumbnail(_id:number) : Promise { + getImageThumbnail(_id: number): Promise { return this.http.requestImage({ endPoint: this.serviceName + "/thumbnail/" + _id, requestType: HTTPRequestModel.GET, @@ -64,12 +64,12 @@ export class DataService { * @returns the url of the cover */ getCoverListUrl(coverIds?: number[]): string[] | undefined { - if(!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) { + if (!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) { return undefined; } let covers = [] as string[]; - for(let iii = 0; iii < coverIds.length; iii++) { - covers.push(this.getCoverUrl(coverIds[iii])); + for (let iii = 0; iii < coverIds.length; iii++) { + covers.push(this.getCoverUrl(coverIds[iii]).replace("http://localhost:19080", "https://atria-soft.org")); } return covers; } @@ -90,11 +90,11 @@ export class DataService { * @returns the url of the cover */ getCoverListThumbnailUrl(coverIds?: number[]): string[] | undefined { - if(!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) { + if (!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) { return undefined; } let covers = [] as string[]; - for(let iii = 0; iii < coverIds.length; iii++) { + for (let iii = 0; iii < coverIds.length; iii++) { covers.push(this.getCoverThumbnailUrl(coverIds[iii])); } return covers; diff --git a/front/src/generic_page.less b/front/src/generic_page.less index 0f0b787..2a4345e 100644 --- a/front/src/generic_page.less +++ b/front/src/generic_page.less @@ -1,113 +1,111 @@ - - // landscape @media screen and (orientation:landscape) { .clear { - display: block; - float: left; - width: 100%; + clear: both; + text-align: center; } + .clear-end { - display: block; - float: left; - width: 100%; + clear: both; + text-align: center; height: 250px; } + + .button-area { + grid-gap: 50px; + display: flex; + flex-direction: row; + + button { + padding-left: 10px; + } + } + .generic-page { .fill-title { - display:block; - position:fixed; - left: 0px; - top: 50px; - width: 400px; - float: left; - padding: 1%; - .cover-area { - float: right; + display: flex; + flex-direction: row; + grid-gap: 5px; + padding-top: 10px; + padding-left: 10px; + padding-right: 10px; + } + + .shadow-text { + text-align: left; + text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + color: rgb(204, 204, 204); + } + + .cover-area { + display: flex; + align-items: flex-start; + flex: 1; + max-width: 400px; + + img { width: 100%; - .cover { - align: center; - width: 60%; - margin: 0 auto; - img { - width: 100%; - } - } + box-shadow: 0 0 40px black; + border-radius: 25px; + min-width: 150px; + max-width: 400px; + max-height: 400px; } - .description-area-cover { - width: 100%; - } - .description-area-no-cover { - width: 100%; - } - .description-area { - float: left; - .title { - font-size: 45px; - font-weight: bold; - line-height: 60px; - width:100%; - align: left; - text-align: left; - vertical-align: middle; - margin: 10px 0 10px 0; - text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white; - text-transform: uppercase; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } - .sub-title-main { - font-size: 33px; - font-weight: bold; - line-height: 40px; - width:100%; - align: center; - text-align: left; - vertical-align: middle; - margin: 10px 0 10px 0; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } - .sub-title { - font-size: 33px; - font-weight: bold; - line-height: 40px; - width:100%; - align: left; - text-align: left; - vertical-align: middle; - margin: 10px 0 10px 0; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } - .description { - //background-color: orange; - font-size: 24px; - width: ~"calc(100% - 14px * 2)";//calc(100% - 40px * 2 - 14px * 2); - text-align: left; - vertical-align: middle; - //margin: 0 40px 10px 40px; - background: rgba(150, 150, 150, 0.9); - //border-radius: 7px; - padding: 14px; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } + + .cover { + max-width: 400px; + margin-left: auto; } } + + .description-area { + flex: 3; + min-width: 200px; + + .title { + font-size: 27px; + font-weight: bold; + line-height: 60px; + vertical-align: middle; + //margin: 10px 0 10px 0; + text-transform: uppercase; + } + + .sub-title-main { + font-size: 22px; + font-weight: bold; + line-height: 40px; + width: 100%; + //margin: 10px 0 10px 0; + } + + .sub-title { + font-size: 22px; + font-weight: bold; + line-height: 40px; + width: 100%; + } + + .description { + font-size: 15px; + text-align: left; + padding: 14px; + } + } + .fill-content { - display:block; - //position:relative; - margin: 0 0 0 430px; - padding: 0px; - float: left; .title { font-size: 33px; font-weight: bold; line-height: 40px; - width:100%; - align: left; + width: 100%; text-align: left; vertical-align: middle; margin: 10px 0 10px 0; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; } + .item { font-size: 20px; padding: 1px; @@ -118,20 +116,23 @@ overflow: hidden; line-height: normal; border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; will-change: box-shadow; outline: none; cursor: pointer; transition-duration: 0.4s; - float:left; + float: left; + //display:inline; &:hover { box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); } + .material-icons { vertical-align: middle; } + .material-icons { position: absolute; top: 50%; @@ -141,27 +142,29 @@ width: 24px; } } - + .item-list { font-size: 20px; padding: 1px; height: 110px; - width: 80%; + width: 95%; margin: 5px auto 5px auto; padding: 5px; overflow: hidden; line-height: normal; border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; will-change: box-shadow; outline: none; cursor: pointer; background: rgba(256, 256, 256, 0.3); border-radius: 7px; + .material-icons { vertical-align: middle; } + .material-icons { position: absolute; top: 50%; @@ -172,13 +175,7 @@ } } } - .cover { - width: 30%; - //margin: 0 auto; - img { - width: 100%; - } - } + } } @@ -189,43 +186,49 @@ } } -@media all and (min-width: 3700px) and (max-width: 3910px) and (orientation:landscape){ +@media all and (min-width: 3700px) and (max-width: 3910px) and (orientation:landscape) { .colomn_mutiple { width: ~"calc(210px * 15)"; margin: auto; } - + } -@media all and (min-width: 3390px) and (max-width: 3700px) and (orientation:landscape){ + +@media all and (min-width: 3390px) and (max-width: 3700px) and (orientation:landscape) { .colomn_mutiple { width: ~"calc(210px * 14)"; margin: auto; } } + @media all and (min-width: 3180px) and (max-width: 3390px) and (orientation:landscape) { .colomn_mutiple { width: ~"calc(210px * 13)"; margin: auto; } } -@media all and (min-width: 2970px) and (max-width: 3180px) and (orientation:landscape){ + +@media all and (min-width: 2970px) and (max-width: 3180px) and (orientation:landscape) { .colomn_mutiple { width: ~"calc(210px * 12)"; margin: auto; } } + @media all and (min-width: 2760px) and (max-width: 2970px) and (orientation:landscape) { .colomn_mutiple { width: ~"calc(210px * 11)"; margin: auto; } } + @media all and (min-width: 2550px) and (max-width: 2760px) and (orientation:landscape) { .colomn_mutiple { width: ~"calc(210px * 10)"; margin: auto; } } + @media all and (min-width: 2340px) and (max-width: 2550px) and (orientation:landscape) { .colomn_mutiple { width: ~"calc(210px * 9)"; @@ -281,115 +284,119 @@ } } +.colomn_single { + margin-left: 50px; + margin-right: 50px; +} + + // portrait @media screen and (orientation:portrait) { .clear { clear: both; text-align: center; - } - + } + .clear-end { clear: both; text-align: center; height: 250px; } + + .button-area { + grid-gap: 5px; + display: flex; + flex-direction: row; + flex-flow: row wrap; + max-width: 150px; + } + .generic-page { .fill-title { - display:block; - position:relative; - //width: 100%; - //height: 400px; - padding: 1%; - .cover-area { - //position:relative; - float: right; - //right: 0px; - width: 300px; - //height: 100%; - .cover { - width: 100%; - margin: auto; - img { - width: 100%; - } - } - } - .description-area-cover { - width: ~"calc( 100% - 302px)"; - } - .description-area-no-cover { - width: 100%; - } - .description-area { - //position: sticky; - float: left; - //height: 100%; - //margin: 0; - //border: solid 1px; - //border-color: rgba(255, 0, 0, 0.7); + display: flex; + flex-direction: row; + grid-gap: 5px; + padding-top: 10px; + padding-left: 10px; + padding-right: 10px; + } - .title { - //background-color: green; - font-size: 45px; - font-weight: bold; - line-height: 60px; - width:100%; - align: left; - text-align: left; - vertical-align: middle; - margin: 10px 0 10px 0; - text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white; - text-transform: uppercase; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } - .sub-title-main { - font-size: 33px; - font-weight: bold; - line-height: 40px; - width:100%; - align: center; - text-align: left; - vertical-align: middle; - margin: 10px 0 10px 0; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } - .sub-title { - font-size: 33px; - font-weight: bold; - line-height: 40px; - width:100%; - align: left; - text-align: left; - vertical-align: middle; - margin: 10px 0 10px 0; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } - .description { - //background-color: orange; - font-size: 24px; - text-align: left; - width: ~"calc(100% - 14px * 2)";//calc(100% - 40px * 2 - 14px * 2); - vertical-align: middle; - //margin: 0 40px 10px 40px; - background: rgba(150, 150, 150, 0.9); - //border-radius: 7px; - padding: 14px; - font-family: "Roboto","Helvetica","Arial",sans-serif; - } + .shadow-text { + text-align: left; + text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + color: rgb(204, 204, 204); + } + + .cover-area { + display: flex; + align-items: flex-start; + flex: 1; + max-width: 400px; + + img { + width: 100%; + box-shadow: 0 0 40px black; + border-radius: 25px; + min-width: 150px; + max-width: 400px; + max-height: 400px; + } + + .cover { + max-width: 400px; + margin-left: auto; } } + + .description-area { + flex: 3; + min-width: 200px; + color: rgb(204, 204, 204); + + .title { + font-size: 27px; + font-weight: bold; + line-height: 60px; + vertical-align: middle; + //margin: 10px 0 10px 0; + text-transform: uppercase; + } + + .sub-title-main { + font-size: 22px; + font-weight: bold; + line-height: 40px; + width: 100%; + //margin: 10px 0 10px 0; + } + + .sub-title { + font-size: 22px; + font-weight: bold; + line-height: 40px; + width: 100%; + } + + .description { + font-size: 20px; + text-align: left; + padding: 14px; + } + } + .fill-content { .title { font-size: 33px; font-weight: bold; line-height: 40px; - width:100%; - align: left; + width: 100%; text-align: left; vertical-align: middle; margin: 10px 0 10px 0; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; } + .item { font-size: 20px; padding: 1px; @@ -400,20 +407,23 @@ overflow: hidden; line-height: normal; border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; will-change: box-shadow; outline: none; cursor: pointer; transition-duration: 0.4s; - float:left; + float: left; + //display:inline; &:hover { box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); } + .material-icons { vertical-align: middle; } + .material-icons { position: absolute; top: 50%; @@ -423,7 +433,7 @@ width: 24px; } } - + .item-list { font-size: 20px; padding: 1px; @@ -434,16 +444,24 @@ overflow: hidden; line-height: normal; border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; will-change: box-shadow; outline: none; cursor: pointer; - background: rgba(256, 256, 256, 0.3); + background: rgba(156, 156, 156, 0.5); border-radius: 7px; + .material-icons { vertical-align: middle; } + + //display:inline; + &:hover { + background-color: rgba(156, 156, 156, 1); + box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); + } + .material-icons { position: absolute; top: 50%; @@ -454,15 +472,10 @@ } } } - .cover { - width: 30%; - //margin: 0 auto; - img { - width: 100%; - } - } + } } + @media all and (min-width: 3510px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 15)"; @@ -476,78 +489,91 @@ margin: auto; } } + @media all and (min-width: 2990px) and (max-width: 3300px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 14)"; margin: auto; } } + @media all and (min-width: 2780px) and (max-width: 2990px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 13)"; margin: auto; } } + @media all and (min-width: 2570px) and (max-width: 2780px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 12)"; margin: auto; } } + @media all and (min-width: 2360px) and (max-width: 2570px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 11)"; margin: auto; } } + @media all and (min-width: 2150px) and (max-width: 2360px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 10)"; margin: auto; } } + @media all and (min-width: 1940px) and (max-width: 2150px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 9)"; margin: auto; } } + @media all and (min-width: 1730px) and (max-width: 1940px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 8)"; margin: auto; } } + @media all and (min-width: 1520px) and (max-width: 1730px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 7)"; margin: auto; } } + @media all and (min-width: 1310px) and (max-width: 1520px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 6)"; margin: auto; } } + @media all and (min-width: 1100px) and (max-width: 1310px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 5)"; margin: auto; } } + @media all and (min-width: 890px) and (max-width: 1100px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 4)"; margin: auto; } } + @media all and (min-width: 680px) and (max-width: 890px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 3)"; margin: auto; } } + @media all and (max-width: 680px) and (orientation:portrait) { .colomn_mutiple { width: ~"calc(210px * 2)"; @@ -562,7 +588,7 @@ font-size: 45px; font-weight: bold; line-height: 60px; - width:100%; + width: 100%; align: center; height: 50px; text-align: center; @@ -570,30 +596,32 @@ margin: 10px 0 10px 0; text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white; text-transform: uppercase; - font-family: "Roboto","Helvetica","Arial",sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; } - - .fill-all{ + + .fill-all { //width:100%; - max-width:80%; - height:100%; + max-width: 80%; + height: 100%; margin: 20px auto; padding: 20px; - border:0; + border: 0; background-color: rgba(200, 200, 200, 0.5); box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); } - + .message-big { width: 90%; margin: 0 auto; font-size: 50px; text-align: center; } + .request_raw2 { width: 90%; margin: 0 auto; height: 160px; + .label { width: 15%; margin-right: 10px; @@ -601,10 +629,12 @@ float: left; display: block; } + .input { width: 75%; float: left; display: block; + textarea { width: 100%; font-size: 20px; @@ -612,10 +642,12 @@ } } } + .request_raw { width: 90%; margin: 0 auto; height: 45px; + .label { width: 15%; margin-right: 10px; @@ -623,84 +655,104 @@ float: left; display: block; } + .input { width: 75%; float: left; display: block; + input { width: 100%; font-size: 20px; } + select { width: 100%; font-size: 20px; } + textarea { width: 100%; font-size: 20px; } } + .input_add { width: 5%; float: right; display: block; } } + .send_value { width: 300px; margin: 0 auto; padding: 10px; display: block; } + .hide-element { display: none; } - + .cover { - position:relative; + position: relative; width: 200px; height: 250px; //margin: 0 auto; - overflow:hidden; + overflow: hidden; float: left; display: block; - + .cover-image { - position:absolute; + position: absolute; width: 200px; height: 250px; + img { max-width: 100%; max-height: 100%; height: auto; } - }; + } + + ; + .cover-no-image { - position:absolute; + position: absolute; width: 190px; height: 240px; margin: 0 auto; border: solid 5px; border-color: rgba(0, 0, 0, 0.7); - }; + } + + ; + .cover-button { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - }; - + } + + ; + button { border: none; background: none; - }; + } + + ; + .button-remove { - font-size:75px; + font-size: 75px; color: #F00000; } + .button-add { - font-size:75px; + font-size: 75px; color: #00F000; } } diff --git a/front/src/styles.less b/front/src/styles.less index e5c229a..904dd0e 100644 --- a/front/src/styles.less +++ b/front/src/styles.less @@ -104,6 +104,7 @@ html { .circular-button { + position: relative; border-radius: 50%; font-size: 24px; height: 56px; @@ -294,7 +295,7 @@ label { background-attachment: fixed; background-position: 50% 50%; - z-index: -1; + z-index: -100; } @@ -302,6 +303,18 @@ label { * FLEX TOOLS *****************************************************************************/ +.flex-column { + display: flex; + flex-direction: column; +} + +.flex-column-last { + margin-top: auto; +} + +.flex-column-first { + margin-bottom: auto; +} .flex-row { display: flex;