[DEV] corrrect the desplay of the player overflow (and some redesign)
This commit is contained in:
parent
9da93a2831
commit
70c63882e4
@ -20,7 +20,7 @@
|
||||
<dependency>
|
||||
<groupId>kangaroo-and-rabbit</groupId>
|
||||
<artifactId>archidata</artifactId>
|
||||
<version>0.6.0</version>
|
||||
<version>0.6.1</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.slf4j</groupId>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"scripts": {
|
||||
"all": "npm run build && npm run test",
|
||||
"ng": "ng",
|
||||
"start": "ng serve --configuration=develop --watch --port 4203",
|
||||
"dev": "ng serve --configuration=develop --watch --port 4203",
|
||||
"build": "ng build --prod",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
|
||||
@ -1,46 +1,45 @@
|
||||
<div class="bottom" *ngIf="mediaSource">
|
||||
<div class="media" >
|
||||
<div class="media-elem">
|
||||
<audio width="1" height="1" src="{{mediaSource}}"
|
||||
#mediaPlayer
|
||||
preload
|
||||
(play)="changeStateToPlay()"
|
||||
(pause)="changeStateToPause()"
|
||||
(timeupdate)="changeTimeupdate($event.currentTime)"
|
||||
(durationchange)="changeDurationchange($event.duration)"
|
||||
(loadedmetadata)="changeMetadata()"
|
||||
autoplay
|
||||
(ended)="onAudioEnded()"
|
||||
><!-- controls > --> <!--preload="none"-->
|
||||
<!--<p>Your browser does not support HTML5 media player. download media: <a href="{{mediaSource}}>link here</a>.</p>-->
|
||||
</audio>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="timer">
|
||||
<div class="timer-title">
|
||||
<label class="unselectable label">{{nameData}}</label>
|
||||
</div>
|
||||
<div class="timer-lines">
|
||||
<input type="range" min="0" class="slider"
|
||||
[value]="currentTime"
|
||||
[max]="duration"
|
||||
(input)="seek($event.target)">
|
||||
</div>
|
||||
<div class="timer-text">
|
||||
<label class="unselectable label">{{currentTimeDisplay}} / {{durationDisplay}}</label>
|
||||
</div>
|
||||
<div class="timer-control">
|
||||
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
|
||||
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
|
||||
<button (click)="onStop()" ><i class="material-icons">stop</i></button>
|
||||
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button>
|
||||
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
|
||||
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
|
||||
<button [disabled]="haveNext" (click)="onNext()"><i class="material-icons">navigate_next</i></button>
|
||||
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</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>-->
|
||||
</div>
|
||||
<div *ngIf="mediaSource">
|
||||
<audio width="1" height="1" src="{{mediaSource}}"
|
||||
#mediaPlayer
|
||||
preload
|
||||
(play)="changeStateToPlay()"
|
||||
(pause)="changeStateToPause()"
|
||||
(timeupdate)="changeTimeupdate($event.currentTime)"
|
||||
(durationchange)="changeDurationchange($event.duration)"
|
||||
(loadedmetadata)="changeMetadata()"
|
||||
autoplay
|
||||
(ended)="onAudioEnded()"
|
||||
>
|
||||
</audio>
|
||||
<div class="controls">
|
||||
<div class="controls-inner">
|
||||
<div class="title text-ellipsis">
|
||||
<label class="unselectable">{{dataTitle}}</label>
|
||||
</div>
|
||||
<div class="text-ellipsis">
|
||||
<label class="unselectable">{{dataAuthor}} / {{dataAlbum}}</label>
|
||||
</div>
|
||||
<div class="timer-slider">
|
||||
<input type="range" min="0" class="slider"
|
||||
[value]="currentTime"
|
||||
[max]="duration"
|
||||
(input)="seek($event.target)">
|
||||
</div>
|
||||
<div class="flex-row">
|
||||
<label class="unselectable">{{currentTimeDisplay}}</label>
|
||||
<label class="unselectable flex-row-last">{{durationDisplay}}</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
|
||||
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
|
||||
<button (click)="onStop()"><i class="material-icons">stop</i></button>
|
||||
<div style="margin:auto"></div>
|
||||
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button>
|
||||
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
|
||||
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
|
||||
<button [disabled]="haveNext" (click)="onNext()"><i class="material-icons">navigate_next</i></button>
|
||||
<div style="margin:auto"></div>
|
||||
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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 {
|
||||
//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;
|
||||
|
||||
.controls-inner {
|
||||
position: relative;
|
||||
width: fill;
|
||||
height: fill;
|
||||
font-family: monospace;
|
||||
color: white;
|
||||
margin: 10px 15px 1px 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
color: #FFF;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
button[disabled] {
|
||||
.material-icons {
|
||||
color: #FFF;
|
||||
font-size: 40px;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: rgb(46, 46, 46);
|
||||
}
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
button[disabled] {
|
||||
.material-icons {
|
||||
color: rgb(46, 46, 46);
|
||||
}
|
||||
}
|
||||
|
||||
.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: 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;
|
||||
}
|
||||
.slider {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
top: 5px;
|
||||
border-radius: 5px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
.timer-title {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
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 {
|
||||
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,
|
||||
}
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
background: #4CAF50;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*
|
||||
:hover .controls, :focus .controls {
|
||||
opacity: 1;
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
background: #4CAF50;
|
||||
cursor: pointer;
|
||||
}
|
||||
*/
|
||||
|
||||
button:before {
|
||||
font-family: HeydingsControlsRegular;
|
||||
font-size: 30px;
|
||||
position: relative;
|
||||
color: #FFF;
|
||||
//text-shadow: 1px 1px 0px black;
|
||||
|
||||
.text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.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-family: monospace;
|
||||
text-shadow: 1px 1px 0px black;
|
||||
color: white;
|
||||
flex: 5;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -26,16 +26,16 @@ export enum PlayMode {
|
||||
@Component({
|
||||
selector: 'app-element-player-audio',
|
||||
templateUrl: './element-player-audio.html',
|
||||
styleUrls: [ './element-player-audio.less' ]
|
||||
styleUrls: ['./element-player-audio.less']
|
||||
})
|
||||
export class ElementPlayerAudioComponent implements OnInit {
|
||||
mediaPlayer: HTMLAudioElement;
|
||||
duration: number;
|
||||
durationDisplay: string;
|
||||
@ViewChild('mediaPlayer')
|
||||
set mainVideoEl(el: ElementRef) {
|
||||
if(el !== null && el !== undefined) {
|
||||
this.mediaPlayer = el.nativeElement;
|
||||
set mainVideoEl(el: ElementRef) {
|
||||
if (el !== null && el !== undefined) {
|
||||
this.mediaPlayer = el.nativeElement;
|
||||
}
|
||||
}
|
||||
public mediaSource: string = undefined;
|
||||
@ -50,7 +50,9 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
public volume_value: number = 100;
|
||||
public volume_displayMenu: boolean = false;
|
||||
|
||||
nameData: string;
|
||||
dataTitle: string;
|
||||
dataAlbum: string;
|
||||
dataAuthor: string;
|
||||
playStream: boolean;
|
||||
isPlaying: boolean;
|
||||
currentTime: any;
|
||||
@ -103,28 +105,27 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
}
|
||||
let self = this;
|
||||
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])
|
||||
.then((response: Media) => {
|
||||
//console.log(`get response of video : ${ JSON.stringify(response, null, 2)}`);
|
||||
self.currentLMedia = response;
|
||||
self.nameData = response.name;
|
||||
self.dataTitle = response.name;
|
||||
if (!isNullOrUndefined(response.albumId)) {
|
||||
this.albumService.get(response.albumId)
|
||||
.then((response2: NodeData) => {
|
||||
self.nameData = response2.name + " - " + self.nameData;
|
||||
this.titleService.setTitle(`${environment.applName} > ${self.nameData}`)
|
||||
self.dataAlbum = response2.name;
|
||||
self.updateTitle();
|
||||
})
|
||||
.catch(() => {});
|
||||
.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})`;
|
||||
this.titleService.setTitle(`${environment.applName} > ${self.nameData}`)
|
||||
self.dataAuthor = response2.name;
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
.catch(() => { });
|
||||
}
|
||||
if (isNullOrUndefined(self.currentLMedia)) {
|
||||
console.log("Can not retreive the media ...")
|
||||
return;
|
||||
@ -136,187 +137,45 @@ 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");
|
||||
})
|
||||
}
|
||||
updateTitle() {
|
||||
let title = this.dataTitle;
|
||||
if (!isNullOrUndefined(this.dataAlbum)) {
|
||||
title = `${this.dataAlbum} - ${title}`;
|
||||
}
|
||||
if (!isNullOrUndefined(this.dataAuthor)) {
|
||||
title = `${title} (${this.dataAuthor})`;
|
||||
}
|
||||
|
||||
generateName() {
|
||||
/*
|
||||
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 ... ');
|
||||
this.titleService.setTitle(`${environment.applName} > ${title}`)
|
||||
}
|
||||
changeMetadata() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
/*
|
||||
ngOnInit() {
|
||||
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;
|
||||
});
|
||||
*/
|
||||
myPeriodicCheckFunction() {
|
||||
console.log('check ... ');
|
||||
}
|
||||
onRequirePlay() {
|
||||
this.playStream = true;
|
||||
}
|
||||
onRequireStop() {
|
||||
|
||||
|
||||
this.playStream = false;
|
||||
}
|
||||
onAudioEnded() {
|
||||
if (this.playMode === PlayMode.PLAY_ONE) {
|
||||
this.playStream = false;
|
||||
this.playStream = false;
|
||||
} else if (this.playMode === PlayMode.PLAY_ALL) {
|
||||
this.onNext();
|
||||
} else if (this.playMode === PlayMode.PLAY_ONE_LOOP) {
|
||||
this.mediaPlayer.currentTime = 0;
|
||||
this.onPlay();
|
||||
} else {
|
||||
if (this.localIdStreaming == this.localListStreaming.length-1) {
|
||||
if (this.localIdStreaming == this.localListStreaming.length - 1) {
|
||||
this.localIdStreaming = 0;
|
||||
this.updateMediaStreamed();
|
||||
if (this.localListStreaming.length == 1) {
|
||||
@ -336,25 +195,25 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
this.isPlaying = false;
|
||||
}
|
||||
|
||||
convertIndisplayTime(time:number) : string {
|
||||
let tmpp = parseInt(`${ time}`, 10);
|
||||
let heures = parseInt(`${ tmpp / 3600}`, 10);
|
||||
tmpp = tmpp - heures * 3600;
|
||||
let minutes = parseInt(`${ tmpp / 60}`, 10);
|
||||
let seconds = tmpp - minutes * 60;
|
||||
convertIndisplayTime(time: number): string {
|
||||
let temporaryValue = parseInt(`${time}`, 10);
|
||||
let hours = parseInt(`${temporaryValue / 3600}`, 10);
|
||||
temporaryValue = temporaryValue - hours * 3600;
|
||||
let minutes = parseInt(`${temporaryValue / 60}`, 10);
|
||||
let seconds = temporaryValue - minutes * 60;
|
||||
let out = '';
|
||||
if(heures !== 0) {
|
||||
out = `${out }${heures }:`;
|
||||
if (hours !== 0) {
|
||||
out = `${out}${hours}:`;
|
||||
}
|
||||
if(minutes >= 10) {
|
||||
out = `${out }${minutes }:`;
|
||||
if (minutes >= 10) {
|
||||
out = `${out}${minutes}:`;
|
||||
} else {
|
||||
out = `${out }0${ minutes }:`;
|
||||
out = `${out}0${minutes}:`;
|
||||
}
|
||||
if(seconds >= 10) {
|
||||
if (seconds >= 10) {
|
||||
out = out + seconds;
|
||||
} else {
|
||||
out = `${out }0${ seconds}`;
|
||||
out = `${out}0${seconds}`;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
@ -368,15 +227,15 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
}
|
||||
changeDurationchange(duration: any) {
|
||||
console.log('duration change ');
|
||||
console.log(` ==> ${ this.mediaPlayer.duration}`);
|
||||
console.log(` ==> ${this.mediaPlayer.duration}`);
|
||||
this.duration = this.mediaPlayer.duration;
|
||||
this.durationDisplay = this.convertIndisplayTime(this.duration);
|
||||
}
|
||||
|
||||
onPlay() {
|
||||
console.log('play');
|
||||
if(isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${ this.mediaPlayer}`);
|
||||
if (isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${this.mediaPlayer}`);
|
||||
return;
|
||||
}
|
||||
this.lockPlayerEnable();
|
||||
@ -385,8 +244,8 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
|
||||
onPause() {
|
||||
console.log('pause');
|
||||
if(isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${ this.mediaPlayer}`);
|
||||
if (isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${this.mediaPlayer}`);
|
||||
return;
|
||||
}
|
||||
this.unlockPlayerEnable();
|
||||
@ -395,7 +254,7 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
|
||||
onPauseToggle() {
|
||||
console.log('pause toggle ...');
|
||||
if(this.isPlaying === true) {
|
||||
if (this.isPlaying === true) {
|
||||
this.onPause();
|
||||
} else {
|
||||
this.onPlay();
|
||||
@ -404,8 +263,12 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
|
||||
onStop() {
|
||||
console.log('stop');
|
||||
if(isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${ this.mediaPlayer}`);
|
||||
if (this.mediaPlayer.paused && this.mediaPlayer.currentTime == 0) {
|
||||
this.mediaSource = null;
|
||||
return;
|
||||
}
|
||||
if (isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${this.mediaPlayer}`);
|
||||
return;
|
||||
}
|
||||
this.unlockPlayerEnable();
|
||||
@ -426,7 +289,7 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
|
||||
onNext() {
|
||||
console.log('next');
|
||||
if (this.localIdStreaming >= this.localListStreaming.length-1) {
|
||||
if (this.localIdStreaming >= this.localListStreaming.length - 1) {
|
||||
console.error("have no next !!!");
|
||||
return;
|
||||
}
|
||||
@ -435,10 +298,10 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
this.playerService.next();
|
||||
}
|
||||
|
||||
seek(newValue:any) {
|
||||
console.log(`seek ${ newValue.value}`);
|
||||
if(isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${ this.mediaPlayer}`);
|
||||
seek(newValue: any) {
|
||||
console.log(`seek ${newValue.value}`);
|
||||
if (isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${this.mediaPlayer}`);
|
||||
return;
|
||||
}
|
||||
this.mediaPlayer.currentTime = newValue.value;
|
||||
@ -446,8 +309,8 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
|
||||
onRewind() {
|
||||
console.log('rewind');
|
||||
if(isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${ this.mediaPlayer}`);
|
||||
if (isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${this.mediaPlayer}`);
|
||||
return;
|
||||
}
|
||||
this.mediaPlayer.currentTime = this.currentTime - 10;
|
||||
@ -455,8 +318,8 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
|
||||
onForward() {
|
||||
console.log('forward');
|
||||
if(isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${ this.mediaPlayer}`);
|
||||
if (isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${this.mediaPlayer}`);
|
||||
return;
|
||||
}
|
||||
this.mediaPlayer.currentTime = this.currentTime + 10;
|
||||
@ -464,8 +327,8 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
|
||||
onMore() {
|
||||
console.log('more');
|
||||
if(isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${ this.mediaPlayer}`);
|
||||
if (isNullOrUndefined(this.mediaPlayer)) {
|
||||
console.log(`error element: ${this.mediaPlayer}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -474,28 +337,29 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
// these element is to permit to not stop music when sceen is off !!
|
||||
wakeLock = null;
|
||||
unlockPlayerEnable() {
|
||||
let tmppp = this.wakeLock;
|
||||
let temporaryValue = this.wakeLock;
|
||||
this.wakeLock = null;
|
||||
if (!isNullOrUndefined(tmppp)) {
|
||||
tmppp.release();
|
||||
if (!isNullOrUndefined(temporaryValue)) {
|
||||
console.log(`plopppp ${temporaryValue}`);
|
||||
temporaryValue.release();
|
||||
}
|
||||
try {
|
||||
let tmp = navigator as any;
|
||||
this.wakeLock = tmp.wakeLock.request('screen');
|
||||
} catch (err) {
|
||||
} 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}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
lockPlayerEnable() {
|
||||
async lockPlayerEnable() {
|
||||
if ('wakeLock' in navigator) {
|
||||
try {
|
||||
let tmp = navigator as any;
|
||||
this.wakeLock = tmp.wakeLock.request('screen');
|
||||
} catch (err) {
|
||||
this.wakeLock = await 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}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { isArrayOf, isNumberFinite, isObject, isOptionalOf, isOptionalArrayOf, isString } from "common/utils";
|
||||
import { isNumberFinite, isObject, isOptionalOf, isOptionalArrayOf, isString } from "common/utils";
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,15 +5,14 @@
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ArianeService } from '../../service/ariane';
|
||||
|
||||
@Component({
|
||||
selector: 'app-error-viewer',
|
||||
templateUrl: './error-viewer.html',
|
||||
styleUrls: [ './error-viewer.less' ]
|
||||
styleUrls: ['./error-viewer.less']
|
||||
})
|
||||
export class ErrorViewerScene implements OnInit {
|
||||
constructor(private arianeService: ArianeService) { }
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
@ -1,34 +1,67 @@
|
||||
@media all and (min-width: 800px) {
|
||||
.xdesktop{display:block;}
|
||||
.xtablette{display:none;}
|
||||
.xphone{display:none;}
|
||||
.xmobile{display:none;}
|
||||
.xdesktop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xtablette {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xphone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xmobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) and (max-width: 800px) {
|
||||
.xdesktop{display:none;}
|
||||
.xtablette{display:block;}
|
||||
.xphone{display:none;}
|
||||
.xmobile{display:block;}
|
||||
.xdesktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xtablette {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xphone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xmobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
.xdesktop{display:none;}
|
||||
.xtablette{display:none;}
|
||||
.xphone{display:block;}
|
||||
.xmobile{display:block;}
|
||||
.xdesktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xtablette {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xphone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xmobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
font-size: 24px;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
.main-modal {
|
||||
@ -40,7 +73,7 @@ html {
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index:1000;
|
||||
z-index: 1000;
|
||||
/*
|
||||
background-color:#F00;
|
||||
*/
|
||||
@ -59,7 +92,7 @@ html {
|
||||
margin: 1px 1px;
|
||||
transition-duration: 0.4s;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
:focus {
|
||||
border: 5px solid #BBB;
|
||||
}
|
||||
@ -83,7 +116,7 @@ html {
|
||||
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
@ -94,24 +127,24 @@ html {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transition-duration: 0.4s;
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 8px 20px 0 rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-12px,-12px);
|
||||
transform: translate(-12px, -12px);
|
||||
line-height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
@ -130,7 +163,7 @@ html {
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
@ -140,16 +173,16 @@ html {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-12px,-12px);
|
||||
transform: translate(-12px, -12px);
|
||||
line-height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
@ -168,7 +201,7 @@ html {
|
||||
min-width: 64px;
|
||||
padding: 0 16px;
|
||||
display: inline-block;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@ -181,11 +214,11 @@ html {
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
vertical-align: middle;
|
||||
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -202,7 +235,7 @@ html {
|
||||
min-width: 36px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@ -215,12 +248,15 @@ html {
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
vertical-align: middle;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
background: rgba(0, 0, 0, 0)
|
||||
}
|
||||
|
||||
@ -244,22 +280,38 @@ label {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-back{
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;
|
||||
background-color:#2b3137;
|
||||
|
||||
.full-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #2b3137;
|
||||
|
||||
background-image: url("assets/images/ikon_gray.svg");
|
||||
background-repeat: no-repeat;
|
||||
/*
|
||||
background-size: contain;
|
||||
*/
|
||||
background-size: 80%;
|
||||
background-attachment: fixed;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user