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

[DEV] corrrect the desplay of the player overflow (and some redesign)

Browse Source
This commit is contained in:
Edouard DUPIN 2024-01-25 23:37:36 +01:00
parent 9da93a2831
commit 70c63882e4
8 changed files with 318 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
back/pom.xml
View File

@ -20,7 +20,7 @@
<dependency> <dependency>
<groupId>kangaroo-and-rabbit</groupId> <groupId>kangaroo-and-rabbit</groupId>
<artifactId>archidata</artifactId> <artifactId>archidata</artifactId>
<version>0.6.0</version> <version>0.6.1</version>
</dependency> </dependency>
<dependency> <dependency>
<groupId>org.slf4j</groupId> <groupId>org.slf4j</groupId>

2
front/package.json
View File

@ -5,7 +5,7 @@
"scripts": { "scripts": {
"all": "npm run build && npm run test", "all": "npm run build && npm run test",
"ng": "ng", "ng": "ng",
"start": "ng serve --configuration=develop --watch --port 4203", "dev": "ng serve --configuration=develop --watch --port 4203",
"build": "ng build --prod", "build": "ng build --prod",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",

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

@ -1,46 +1,45 @@
<div class="bottom" *ngIf="mediaSource"> <div *ngIf="mediaSource">
<div class="media" > <audio width="1" height="1" src="{{mediaSource}}"
<div class="media-elem"> #mediaPlayer
<audio width="1" height="1" src="{{mediaSource}}" preload
#mediaPlayer (play)="changeStateToPlay()"
preload (pause)="changeStateToPause()"
(play)="changeStateToPlay()" (timeupdate)="changeTimeupdate($event.currentTime)"
(pause)="changeStateToPause()" (durationchange)="changeDurationchange($event.duration)"
(timeupdate)="changeTimeupdate($event.currentTime)" (loadedmetadata)="changeMetadata()"
(durationchange)="changeDurationchange($event.duration)" autoplay
(loadedmetadata)="changeMetadata()" (ended)="onAudioEnded()"
autoplay >
(ended)="onAudioEnded()" </audio>
><!-- controls > --> <!--preload="none"--> <div class="controls">
<!--<p>Your browser does not support HTML5 media player. download media: <a href="{{mediaSource}}>link here</a>.</p>--> <div class="controls-inner">
</audio> <div class="title text-ellipsis">
</div> <label class="unselectable">{{dataTitle}}</label>
<div class="controls"> </div>
<div class="timer"> <div class="text-ellipsis">
<div class="timer-title"> <label class="unselectable">{{dataAuthor}} / {{dataAlbum}}</label>
<label class="unselectable label">{{nameData}}</label> </div>
</div> <div class="timer-slider">
<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" (input)="seek($event.target)">
(input)="seek($event.target)"> </div>
</div> <div class="flex-row">
<div class="timer-text"> <label class="unselectable">{{currentTimeDisplay}}</label>
<label class="unselectable label">{{currentTimeDisplay}} / {{durationDisplay}}</label> <label class="unselectable flex-row-last">{{durationDisplay}}</label>
</div> </div>
<div class="timer-control"> <div class="control">
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button> <button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button> <button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
<button (click)="onStop()" ><i class="material-icons">stop</i></button> <button (click)="onStop()"><i class="material-icons">stop</i></button>
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button> <div style="margin:auto"></div>
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button> <button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button>
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button> <button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button [disabled]="haveNext" (click)="onNext()"><i class="material-icons">navigate_next</i></button> <button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button> <button [disabled]="haveNext" (click)="onNext()"><i class="material-icons">navigate_next</i></button>
<!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>--> <div style="margin:auto"></div>
<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</i></button>--> <button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,159 +1,111 @@
.controls {
//visibility: hidden;
opacity: 0.85;
width: 96%;
//height: 150px;
border-radius: 10px;
position: absolute;
bottom: 20px;
left: 2%;
//margin-left: -200px;
background-color: black;
box-shadow: 3px 3px 5px black;
transition: 1s all;
display: flex;
font-size: 40px;
.bottom {
.controls { .controls-inner {
//visibility: hidden; position: relative;
opacity: 0.85; width: fill;
width: 96%; height: fill;
height: 150px; font-family: monospace;
border-radius: 10px; color: white;
position: absolute; margin: 10px 15px 1px 15px;
bottom: 20px; font-size: 20px;
left: 2%; }
//margin-left: -200px;
background-color: black; .material-icons {
box-shadow: 3px 3px 5px black; color: #FFF;
transition: 1s all;
display: flex;
font-size: 40px; font-size: 40px;
}
button {
border: none;
background: none;
}
button:disabled,
button[disabled] {
.material-icons { .material-icons {
color: #FFF; color: rgb(46, 46, 46);
font-size: 40px;
}
button {
border: none;
background: none;
} }
}
button:disabled, .slider {
button[disabled] { position: relative;
.material-icons { -webkit-appearance: none;
color: rgb(46, 46, 46); width: 100%;
} height: 10px;
} top: 5px;
border-radius: 5px;
.slidecontainer { background: #d3d3d3;
line-height: 38px; outline: none;
font-size: 10px; opacity: 0.7;
font-family: monospace; -webkit-transition: .2s;
text-shadow: 1px 1px 0px black; transition: opacity .2s;
color: white; flex: 5;
flex: 5; }
position: relative;
}
.slider {
position: relative;
-webkit-appearance: none;
//width: calc(100% - 60px);
width: 95%;
height: 10px;
top: 5px;
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;
}
.timer-title { .slider::-webkit-slider-thumb {
position: absolute; -webkit-appearance: none;
left: 30px; appearance: none;
width: 100%; width: 25px;
font-size: 20px; height: 25px;
font-weight:bold; border-radius: 50%;
bottom: 104px; background: #4CAF50;
} cursor: pointer;
.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 {
position: absolute;
//top: 25px;
left: 0px;
width: 100%;
//line-height: 38px;
font-size: 30px;
font-weight:bold;
bottom: 0px;
}
.label {
//transform: translate(-12px,-12px);
vertical-align: text-top;
line-height: 18px;
min-width: 50%;
//display: block,
}
} }
/*
:hover .controls, :focus .controls { .slider::-moz-range-thumb {
opacity: 1; width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
} }
*/
.text-ellipsis {
button:before { overflow: hidden;
font-family: HeydingsControlsRegular; text-overflow: ellipsis;
font-size: 30px; white-space: nowrap;
position: relative;
color: #FFF;
//text-shadow: 1px 1px 0px black;
} }
.timer {
line-height: 38px; .title {
font-size: 24px;
font-weight: bold;
}
.timer-slider {
width: 100%;
margin: 4px 0px 4px 0px;
font-size: 20px;
padding-bottom: 10px;
}
.control {
width: 100%;
font-size: 30px; font-size: 30px;
font-family: monospace; font-weight: bold;
text-shadow: 1px 1px 0px black; display: flex;
color: white; justify-content: center;
flex: 5;
position: relative;
} }
.timer div {
width:100%;
line-height: 38px;
font-size: 10px;
font-family: monospace;
text-shadow: 1px 1px 0px black;
color: white;
flex: 5;
position: relative;
}
.timer span {
position: absolute;
z-index: 3;
left: 19px;
}
} }
button:before {
font-family: HeydingsControlsRegular;
font-size: 30px;
position: relative;
color: #FFF;
}

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

@ -26,16 +26,16 @@ export enum PlayMode {
@Component({ @Component({
selector: 'app-element-player-audio', selector: 'app-element-player-audio',
templateUrl: './element-player-audio.html', templateUrl: './element-player-audio.html',
styleUrls: [ './element-player-audio.less' ] styleUrls: ['./element-player-audio.less']
}) })
export class ElementPlayerAudioComponent implements OnInit { export class ElementPlayerAudioComponent implements OnInit {
mediaPlayer: HTMLAudioElement; mediaPlayer: HTMLAudioElement;
duration: number; duration: number;
durationDisplay: string; durationDisplay: string;
@ViewChild('mediaPlayer') @ViewChild('mediaPlayer')
set mainVideoEl(el: ElementRef) { set mainVideoEl(el: ElementRef) {
if(el !== null && el !== undefined) { if (el !== null && el !== undefined) {
this.mediaPlayer = el.nativeElement; this.mediaPlayer = el.nativeElement;
} }
} }
public mediaSource: string = undefined; public mediaSource: string = undefined;
@ -50,7 +50,9 @@ 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; dataTitle: string;
dataAlbum: string;
dataAuthor: string;
playStream: boolean; playStream: boolean;
isPlaying: boolean; isPlaying: boolean;
currentTime: any; currentTime: any;
@ -103,28 +105,27 @@ export class ElementPlayerAudioComponent implements OnInit {
} }
let self = this; let self = this;
this.havePrevious = this.localIdStreaming <= 0; this.havePrevious = this.localIdStreaming <= 0;
this.haveNext = this.localIdStreaming >= this.localListStreaming.length-1; this.haveNext = this.localIdStreaming >= this.localListStreaming.length - 1;
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)}`);
self.currentLMedia = response; self.currentLMedia = response;
self.nameData = response.name; self.dataTitle = response.name;
if (!isNullOrUndefined(response.albumId)) { if (!isNullOrUndefined(response.albumId)) {
this.albumService.get(response.albumId) this.albumService.get(response.albumId)
.then((response2: NodeData) => { .then((response2: NodeData) => {
self.nameData = response2.name + " - " + self.nameData; self.dataAlbum = response2.name;
this.titleService.setTitle(`${environment.applName} > ${self.nameData}`) self.updateTitle();
}) })
.catch(() => {}); .catch(() => { });
} }
if (!isNullOrUndefined(response.artists) && isArray(response.artists) && response.artists.length > 0) { if (!isNullOrUndefined(response.artists) && isArray(response.artists) && response.artists.length > 0) {
this.artistService.get(response.artists[0]) this.artistService.get(response.artists[0])
.then((response2: NodeData) => { .then((response2: NodeData) => {
self.nameData = `${self.nameData} (${response2.name})`; self.dataAuthor = response2.name;
this.titleService.setTitle(`${environment.applName} > ${self.nameData}`)
}) })
.catch(() => {}); .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;
@ -136,187 +137,45 @@ export class ElementPlayerAudioComponent implements OnInit {
self.mediaSource = self.httpService.createRESTCall2({ self.mediaSource = self.httpService.createRESTCall2({
api: `data/${self.currentLMedia.dataId}/unknowMediaName.webm`, //${self.generatedName}`, api: `data/${self.currentLMedia.dataId}/unknowMediaName.webm`, //${self.generatedName}`,
addURLToken: true, addURLToken: true,
}); }).replace("http://localhost:19080", "https://atria-soft.org");
}).catch(() => { }).catch(() => {
console.error("error not ùmanaged in audio player ... 111"); console.error("error not ùmanaged in audio player ... 111");
}) })
} }
updateTitle() {
let title = this.dataTitle;
if (!isNullOrUndefined(this.dataAlbum)) {
title = `${this.dataAlbum} - ${title}`;
}
if (!isNullOrUndefined(this.dataAuthor)) {
title = `${title} (${this.dataAuthor})`;
}
generateName() { this.titleService.setTitle(`${environment.applName} > ${title}`)
/*
this.generatedName = '';
if(this.seriesName !== undefined) {
this.generatedName = `${this.generatedName }${this.seriesName }-`;
}
if(this.seasonName !== undefined) {
if(this.seasonName.length < 2) {
this.generatedName = `${this.generatedName }s0${ this.seasonName }-`;
} else {
this.generatedName = `${this.generatedName }s${ this.seasonName }-`;
}
}
if(this.episode !== undefined) {
if(this.episode < 10) {
this.generatedName = `${this.generatedName }e0${ this.episode }-`;
} else {
this.generatedName = `${this.generatedName }e${ this.episode }-`;
}
}
this.generatedName = this.generatedName + this.name;
this.generatedName = this.generatedName.replace(new RegExp('&', 'g'), '_');
this.generatedName = this.generatedName.replace(new RegExp('/', 'g'), '_');
// update the path of the uri request
this.mediaSource = this.httpService.createRESTCall2({
api: `data/${ this.dataId}/${this.generatedName}`,
addURLToken: true,
});
*/
}
myPeriodicCheckFunction() {
console.log('check ... ');
} }
changeMetadata() { changeMetadata() {
console.log('list of the stream:'); console.log('list of the stream:');
/*
let captureStream = this.audioPlayer.audioTracks;
for (let iii=0; iii < captureStream.length; iii++) {
console.log(" - " + captureStream[iii].language);
if (captureStream[iii].language.substring(0,2) === "fr") {
captureStream[iii].enabled = true;
} else {
captureStream[iii].enabled = false;
}
}
*/
} }
/* myPeriodicCheckFunction() {
ngOnInit() { console.log('check ... ');
let self = this;
this.arianeService.updateManual(this.route.snapshot.paramMap);
this.idVideo = this.arianeService.getVideoId();
this.arianeService.mediaChange.subscribe((mediaId) => {
console.log(`Detect mediaId change...${ mediaId}`);
self.idVideo = mediaId;
self.updateDisplay();
});
self.updateDisplay();
}
*/
updateDisplay():void {
let self = this;
/*
self.haveNext = null;
self.havePrevious = null;
this.mediaService.get(this.idVideo)
.then((response) => {
console.log(`get response of media : ${ JSON.stringify(response, null, 2)}`);
self.error = '';
self.name = response.name;
self.description = response.description;
self.episode = response.episode;
self.seriesId = response.seriesId;
self.seasonId = response.seasonId;
self.dataId = response.dataId;
self.time = response.time;
self.generatedName = "????????? TODO: ???????" //response.generatedName;
if(self.dataId !== -1) {
self.mediaSource = self.httpService.createRESTCall2({
api: `data/${ self.dataId}/${self.generatedName}`,
addURLToken: true,
});
} else {
self.mediaSource = '';
}
self.covers = self.dataService.getCoverListUrl(response.covers);
self.generateName();
if(self.seriesId !== undefined && self.seriesId !== null) {
self.seriesService.get(self.seriesId)
.then((response2) => {
self.seriesName = response2.name;
self.generateName();
}).catch((response3) => {
// nothing to do ...
});
}
if(self.seasonId !== undefined && self.seasonId !== null) {
self.seasonService.get(self.seasonId)
.then((response4) => {
self.seasonName = response4.name;
self.generateName();
}).catch((response5) => {
// nothing to do ...
});
self.seasonService.getVideo(self.seasonId)
.then((response6:any) => {
// console.log("saison property: " + JSON.stringify(response, null, 2));
self.haveNext = null;
self.havePrevious = null;
for(let iii = 0; iii < response6.length; iii++) {
if(isNullOrUndefined(response6[iii].episode)) {
continue;
}
if(response6[iii].episode < self.episode) {
if(self.havePrevious === null) {
self.havePrevious = response6[iii];
} else if(self.havePrevious.episode < response6[iii].episode) {
self.havePrevious = response6[iii];
}
} else if(response6[iii].episode > self.episode) {
if(self.haveNext === null) {
self.haveNext = response6[iii];
} else if(self.haveNext.episode > response6[iii].episode) {
self.haveNext = response6[iii];
}
}
self.covers.push(self.dataService.getCoverUrl(response6[iii]));
}
}).catch((response7:any) => {
});
}
self.mediaIsLoading = false;
// console.log("display source " + self.mediaSource);
// console.log("set transformed : " + JSON.stringify(self, null, 2));
}).catch((response8) => {
self.error = 'Can not get the data';
self.name = '';
self.description = '';
self.episode = undefined;
self.seriesId = undefined;
self.seasonId = undefined;
self.dataId = -1;
self.time = undefined;
self.generatedName = '';
self.mediaSource = '';
self.covers = undefined;
self.seriesName = undefined;
self.seasonName = undefined;
self.mediaIsNotFound = true;
self.mediaIsLoading = false;
});
*/
} }
onRequirePlay() { onRequirePlay() {
this.playStream = true; this.playStream = true;
} }
onRequireStop() { onRequireStop() {
this.playStream = false; this.playStream = false;
} }
onAudioEnded() { onAudioEnded() {
if (this.playMode === PlayMode.PLAY_ONE) { if (this.playMode === PlayMode.PLAY_ONE) {
this.playStream = false; this.playStream = false;
} else if (this.playMode === PlayMode.PLAY_ALL) { } else if (this.playMode === PlayMode.PLAY_ALL) {
this.onNext(); this.onNext();
} else if (this.playMode === PlayMode.PLAY_ONE_LOOP) { } else if (this.playMode === PlayMode.PLAY_ONE_LOOP) {
this.mediaPlayer.currentTime = 0; this.mediaPlayer.currentTime = 0;
this.onPlay(); this.onPlay();
} else { } else {
if (this.localIdStreaming == this.localListStreaming.length-1) { if (this.localIdStreaming == this.localListStreaming.length - 1) {
this.localIdStreaming = 0; this.localIdStreaming = 0;
this.updateMediaStreamed(); this.updateMediaStreamed();
if (this.localListStreaming.length == 1) { if (this.localListStreaming.length == 1) {
@ -336,25 +195,25 @@ export class ElementPlayerAudioComponent implements OnInit {
this.isPlaying = false; this.isPlaying = false;
} }
convertIndisplayTime(time:number) : string { convertIndisplayTime(time: number): string {
let tmpp = parseInt(`${ time}`, 10); let temporaryValue = parseInt(`${time}`, 10);
let heures = parseInt(`${ tmpp / 3600}`, 10); let hours = parseInt(`${temporaryValue / 3600}`, 10);
tmpp = tmpp - heures * 3600; temporaryValue = temporaryValue - hours * 3600;
let minutes = parseInt(`${ tmpp / 60}`, 10); let minutes = parseInt(`${temporaryValue / 60}`, 10);
let seconds = tmpp - minutes * 60; let seconds = temporaryValue - minutes * 60;
let out = ''; let out = '';
if(heures !== 0) { if (hours !== 0) {
out = `${out }${heures }:`; out = `${out}${hours}:`;
} }
if(minutes >= 10) { if (minutes >= 10) {
out = `${out }${minutes }:`; out = `${out}${minutes}:`;
} else { } else {
out = `${out }0${ minutes }:`; out = `${out}0${minutes}:`;
} }
if(seconds >= 10) { if (seconds >= 10) {
out = out + seconds; out = out + seconds;
} else { } else {
out = `${out }0${ seconds}`; out = `${out}0${seconds}`;
} }
return out; return out;
} }
@ -368,15 +227,15 @@ export class ElementPlayerAudioComponent implements OnInit {
} }
changeDurationchange(duration: any) { changeDurationchange(duration: any) {
console.log('duration change '); console.log('duration change ');
console.log(` ==> ${ this.mediaPlayer.duration}`); console.log(` ==> ${this.mediaPlayer.duration}`);
this.duration = this.mediaPlayer.duration; this.duration = this.mediaPlayer.duration;
this.durationDisplay = this.convertIndisplayTime(this.duration); this.durationDisplay = this.convertIndisplayTime(this.duration);
} }
onPlay() { onPlay() {
console.log('play'); console.log('play');
if(isNullOrUndefined(this.mediaPlayer)) { if (isNullOrUndefined(this.mediaPlayer)) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${this.mediaPlayer}`);
return; return;
} }
this.lockPlayerEnable(); this.lockPlayerEnable();
@ -385,8 +244,8 @@ export class ElementPlayerAudioComponent implements OnInit {
onPause() { onPause() {
console.log('pause'); console.log('pause');
if(isNullOrUndefined(this.mediaPlayer)) { if (isNullOrUndefined(this.mediaPlayer)) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${this.mediaPlayer}`);
return; return;
} }
this.unlockPlayerEnable(); this.unlockPlayerEnable();
@ -395,7 +254,7 @@ export class ElementPlayerAudioComponent implements OnInit {
onPauseToggle() { onPauseToggle() {
console.log('pause toggle ...'); console.log('pause toggle ...');
if(this.isPlaying === true) { if (this.isPlaying === true) {
this.onPause(); this.onPause();
} else { } else {
this.onPlay(); this.onPlay();
@ -404,8 +263,12 @@ export class ElementPlayerAudioComponent implements OnInit {
onStop() { onStop() {
console.log('stop'); console.log('stop');
if(isNullOrUndefined(this.mediaPlayer)) { if (this.mediaPlayer.paused && this.mediaPlayer.currentTime == 0) {
console.log(`error element: ${ this.mediaPlayer}`); this.mediaSource = null;
return;
}
if (isNullOrUndefined(this.mediaPlayer)) {
console.log(`error element: ${this.mediaPlayer}`);
return; return;
} }
this.unlockPlayerEnable(); this.unlockPlayerEnable();
@ -426,7 +289,7 @@ export class ElementPlayerAudioComponent implements OnInit {
onNext() { onNext() {
console.log('next'); console.log('next');
if (this.localIdStreaming >= this.localListStreaming.length-1) { if (this.localIdStreaming >= this.localListStreaming.length - 1) {
console.error("have no next !!!"); console.error("have no next !!!");
return; return;
} }
@ -435,10 +298,10 @@ export class ElementPlayerAudioComponent implements OnInit {
this.playerService.next(); this.playerService.next();
} }
seek(newValue:any) { seek(newValue: any) {
console.log(`seek ${ newValue.value}`); console.log(`seek ${newValue.value}`);
if(isNullOrUndefined(this.mediaPlayer)) { if (isNullOrUndefined(this.mediaPlayer)) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${this.mediaPlayer}`);
return; return;
} }
this.mediaPlayer.currentTime = newValue.value; this.mediaPlayer.currentTime = newValue.value;
@ -446,8 +309,8 @@ export class ElementPlayerAudioComponent implements OnInit {
onRewind() { onRewind() {
console.log('rewind'); console.log('rewind');
if(isNullOrUndefined(this.mediaPlayer)) { if (isNullOrUndefined(this.mediaPlayer)) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${this.mediaPlayer}`);
return; return;
} }
this.mediaPlayer.currentTime = this.currentTime - 10; this.mediaPlayer.currentTime = this.currentTime - 10;
@ -455,8 +318,8 @@ export class ElementPlayerAudioComponent implements OnInit {
onForward() { onForward() {
console.log('forward'); console.log('forward');
if(isNullOrUndefined(this.mediaPlayer)) { if (isNullOrUndefined(this.mediaPlayer)) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${this.mediaPlayer}`);
return; return;
} }
this.mediaPlayer.currentTime = this.currentTime + 10; this.mediaPlayer.currentTime = this.currentTime + 10;
@ -464,8 +327,8 @@ export class ElementPlayerAudioComponent implements OnInit {
onMore() { onMore() {
console.log('more'); console.log('more');
if(isNullOrUndefined(this.mediaPlayer)) { if (isNullOrUndefined(this.mediaPlayer)) {
console.log(`error element: ${ this.mediaPlayer}`); console.log(`error element: ${this.mediaPlayer}`);
return; return;
} }
} }
@ -474,28 +337,29 @@ export class ElementPlayerAudioComponent implements OnInit {
// these element is to permit to not stop music when sceen is off !! // these element is to permit to not stop music when sceen is off !!
wakeLock = null; wakeLock = null;
unlockPlayerEnable() { unlockPlayerEnable() {
let tmppp = this.wakeLock; let temporaryValue = this.wakeLock;
this.wakeLock = null; this.wakeLock = null;
if (!isNullOrUndefined(tmppp)) { if (!isNullOrUndefined(temporaryValue)) {
tmppp.release(); console.log(`plopppp ${temporaryValue}`);
temporaryValue.release();
} }
try { try {
let tmp = navigator as any; let tmp = navigator as any;
this.wakeLock = tmp.wakeLock.request('screen'); this.wakeLock = tmp.wakeLock.request('screen');
} catch (err) { } catch (err) {
// The Wake Lock request has failed - usually system related, such as battery. // The Wake Lock request has failed - usually system related, such as battery.
console.log(`Can not lock screen element: ${err.name}, ${err.message}`); console.log(`Can not lock screen element: ${err.name}, ${err.message}`);
} }
} }
lockPlayerEnable() { async lockPlayerEnable() {
if ('wakeLock' in navigator) { if ('wakeLock' in navigator) {
try { try {
let tmp = navigator as any; let tmp = navigator as any;
this.wakeLock = tmp.wakeLock.request('screen'); this.wakeLock = await tmp.wakeLock.request('screen');
} catch (err) { } catch (err) {
// The Wake Lock request has failed - usually system related, such as battery. // The Wake Lock request has failed - usually system related, such as battery.
console.log(`Can not lock screen element: ${err.name}, ${err.message}`); console.log(`Can not lock screen element: ${err.name}, ${err.message}`);
} }
} }
} }
} }

2
front/src/app/model/album.ts
View File

@ -1,4 +1,4 @@
import { isArrayOf, isNumberFinite, isObject, isOptionalOf, isOptionalArrayOf, isString } from "common/utils"; import { isNumberFinite, isObject, isOptionalOf, isOptionalArrayOf, isString } from "common/utils";

5
front/src/app/scene/error-viewer/error-viewer.ts
View File

@ -5,15 +5,14 @@
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ArianeService } from '../../service/ariane';
@Component({ @Component({
selector: 'app-error-viewer', selector: 'app-error-viewer',
templateUrl: './error-viewer.html', templateUrl: './error-viewer.html',
styleUrls: [ './error-viewer.less' ] styleUrls: ['./error-viewer.less']
}) })
export class ErrorViewerScene implements OnInit { export class ErrorViewerScene implements OnInit {
constructor(private arianeService: ArianeService) { } constructor() { }
ngOnInit() { ngOnInit() {
} }

140
front/src/styles.less
View File

@ -1,34 +1,67 @@
@media all and (min-width: 800px) { @media all and (min-width: 800px) {
.xdesktop{display:block;} .xdesktop {
.xtablette{display:none;} display: block;
.xphone{display:none;} }
.xmobile{display:none;}
.xtablette {
display: none;
}
.xphone {
display: none;
}
.xmobile {
display: none;
}
} }
@media all and (min-width: 600px) and (max-width: 800px) { @media all and (min-width: 600px) and (max-width: 800px) {
.xdesktop{display:none;} .xdesktop {
.xtablette{display:block;} display: none;
.xphone{display:none;} }
.xmobile{display:block;}
.xtablette {
display: block;
}
.xphone {
display: none;
}
.xmobile {
display: block;
}
} }
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
.xdesktop{display:none;} .xdesktop {
.xtablette{display:none;} display: none;
.xphone{display:block;} }
.xmobile{display:block;}
.xtablette {
display: none;
}
.xphone {
display: block;
}
.xmobile {
display: block;
}
} }
.clear { .clear {
clear: both; clear: both;
text-align: center; text-align: center;
} }
html { html {
font-size: 24px; font-size: 24px;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
} }
.main-modal { .main-modal {
@ -40,7 +73,7 @@ html {
padding: 0; padding: 0;
display: block; display: block;
position: fixed; position: fixed;
z-index:1000; z-index: 1000;
/* /*
background-color:#F00; background-color:#F00;
*/ */
@ -59,7 +92,7 @@ html {
margin: 1px 1px; margin: 1px 1px;
transition-duration: 0.4s; transition-duration: 0.4s;
cursor: pointer; cursor: pointer;
:focus { :focus {
border: 5px solid #BBB; border: 5px solid #BBB;
} }
@ -83,7 +116,7 @@ html {
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
line-height: normal; line-height: normal;
border: none; border: none;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0; letter-spacing: 0;
@ -94,24 +127,24 @@ html {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
transition-duration: 0.4s; transition-duration: 0.4s;
&:hover { &:hover {
box-shadow: 0px 8px 20px 0 rgba(0, 0, 0, 0.9); box-shadow: 0px 8px 20px 0 rgba(0, 0, 0, 0.9);
} }
&:active { &:active {
box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.9); box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.9);
} }
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} }
.material-icons { .material-icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-12px,-12px); transform: translate(-12px, -12px);
line-height: 24px; line-height: 24px;
width: 24px; width: 24px;
} }
@ -130,7 +163,7 @@ html {
overflow: hidden; overflow: hidden;
line-height: normal; line-height: normal;
border: none; border: none;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0; letter-spacing: 0;
@ -140,16 +173,16 @@ html {
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} }
.material-icons { .material-icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-12px,-12px); transform: translate(-12px, -12px);
line-height: 24px; line-height: 24px;
width: 24px; width: 24px;
} }
@ -168,7 +201,7 @@ html {
min-width: 64px; min-width: 64px;
padding: 0 16px; padding: 0 16px;
display: inline-block; display: inline-block;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
@ -181,11 +214,11 @@ html {
text-align: center; text-align: center;
line-height: 36px; line-height: 36px;
vertical-align: middle; vertical-align: middle;
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} }
@ -202,7 +235,7 @@ html {
min-width: 36px; min-width: 36px;
padding: 0; padding: 0;
display: inline-block; display: inline-block;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
@ -215,12 +248,15 @@ html {
text-align: center; text-align: center;
line-height: 36px; line-height: 36px;
vertical-align: middle; vertical-align: middle;
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} }
background: rgba(0, 0, 0, 0) background: rgba(0, 0, 0, 0)
} }
@ -244,22 +280,38 @@ label {
height: 100%; height: 100%;
} }
.full-back{ .full-back {
position:absolute; position: absolute;
width:100%; width: 100%;
height:100%; height: 100%;
left:0; left: 0;
top:0; top: 0;
background-color:#2b3137; background-color: #2b3137;
background-image: url("assets/images/ikon_gray.svg"); background-image: url("assets/images/ikon_gray.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
/*
background-size: contain;
*/
background-size: 80%; background-size: 80%;
background-attachment: fixed; background-attachment: fixed;
background-position: 50% 50%; background-position: 50% 50%;
z-index:-1; z-index: -1;
} }
/*****************************************************************************
* FLEX TOOLS
*****************************************************************************/
.flex-row {
display: flex;
flex-direction: row;
}
.flex-row-last {
margin-left: auto;
}
.flex-row-first {
margin-right: auto;
}