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

back/pom.xml

@@ -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>

front/package.json

@@ -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",

front/src/app/component/element-player-audio/element-player-audio.html

@@ -1,6 +1,4 @@
-<div class="bottom" *ngIf="mediaSource">
+<div *ngIf="mediaSource">
-	<div class="media" >
-		<div class="media-elem"> 
 	<audio width="1" height="1" src="{{mediaSource}}"
 		#mediaPlayer
 		preload
@@ -11,36 +9,37 @@
 		(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="controls-inner">
-				<div class="timer-title">
+			<div class="title text-ellipsis">
-					<label class="unselectable label">{{nameData}}</label>
+				<label class="unselectable">{{dataTitle}}</label>
 			</div>
-				<div class="timer-lines">
+			<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="timer-text">
+			<div class="flex-row">
-					<label class="unselectable label">{{currentTimeDisplay}} / {{durationDisplay}}</label>
+				<label class="unselectable">{{currentTimeDisplay}}</label>
+				<label class="unselectable flex-row-last">{{durationDisplay}}</label>
 			</div>
-				<div class="timer-control">
+			<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>
-					<!--<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>
 		</div>
 </div>

front/src/app/component/element-player-audio/element-player-audio.less

@@ -1,10 +1,8 @@
-
-.bottom {
 .controls {
 	//visibility: hidden;
 	opacity: 0.85;
 	width: 96%;
-		height: 150px;
+	//height: 150px;
 	border-radius: 10px;
 	position: absolute;
 	bottom: 20px;
@@ -15,10 +13,23 @@
 	transition: 1s all;
 	display: flex;
 	font-size: 40px;
+
+
+	.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;
@@ -31,20 +42,10 @@
 		}
 	}
 
-		.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: 100%;
-			width: 95%;
 		height: 10px;
 		top: 5px;
 		border-radius: 5px;
@@ -55,6 +56,7 @@
 		transition: opacity .2s;
 		flex: 5;
 	}
+
 	.slider::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
@@ -73,87 +75,37 @@
 		cursor: pointer;
 	}
 
-		.timer-title {
+	.text-ellipsis {
-			position: absolute;
+		overflow: hidden;
-		    left: 30px;
+		text-overflow: ellipsis;
-		    width: 100%;
+		white-space: nowrap;
-		    font-size: 20px;
-		    font-weight:bold;
-		    bottom: 104px;
 	}
-		.timer-lines {
+
-			position: absolute;
+	.title {
-		    left: 30px;
+		font-size: 24px;
-		    //width: calc(100%-60px);
-		    font-size: 20px;
 		font-weight: bold;
-		    bottom: 82px;
 	}
-		.timer-text {
+
-			position: absolute;
+	.timer-slider {
-		    left: 30px;
 		width: 100%;
+		margin: 4px 0px 4px 0px;
 		font-size: 20px;
-		    font-weight:bold;
+		padding-bottom: 10px;
-		    bottom: 40px;
 	}
-	    .timer-control {
+
-			position: absolute;
+
-		    //top: 25px;
+	.control {
-		    left: 0px;
 		width: 100%;
-		    //line-height: 38px;
 		font-size: 30px;
 		font-weight: bold;
-		    bottom: 0px;
+		display: flex;
-	    }
+		justify-content: center;
-		.label {
-			//transform: translate(-12px,-12px);
-			vertical-align: text-top;
-			line-height: 18px;
-			min-width: 50%;
-			//display: block,
 	}
 }
-	/*
-	:hover .controls, :focus .controls {
-	  opacity: 1;
-	}
-	*/
 
 button:before {
 	font-family: HeydingsControlsRegular;
 	font-size: 30px;
 	position: relative;
 	color: #FFF;
-	  //text-shadow: 1px 1px 0px black;
-	}
-	.timer {
-		line-height: 38px;
-		font-size: 30px;
-		font-family: monospace;
-		text-shadow: 1px 1px 0px black;
-		color: white;
-		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;
-	}
-	
-	
 }

front/src/app/component/element-player-audio/element-player-audio.ts

@@ -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;
@@ -108,20 +110,19 @@ export class ElementPlayerAudioComponent implements OnInit {
 			.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;
+							self.dataAlbum = response2.name;
-							this.titleService.setTitle(`${environment.applName} > ${self.nameData}`)
+							self.updateTitle();
 						})
 						.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})`;
+							self.dataAuthor = response2.name;
-							this.titleService.setTitle(`${environment.applName} > ${self.nameData}`)
 						})
 						.catch(() => { });
 				}
@@ -136,169 +137,27 @@ 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() {
-	generateName() {
+		let title = this.dataTitle;
-		/*
+		if (!isNullOrUndefined(this.dataAlbum)) {
-		this.generatedName = '';
+			title = `${this.dataAlbum} - ${title}`;
-		if(this.seriesName !== undefined) {
-			this.generatedName = `${this.generatedName }${this.seriesName }-`;
 		}
-		if(this.seasonName !== undefined) {
+		if (!isNullOrUndefined(this.dataAuthor)) {
-			if(this.seasonName.length < 2) {
+			title = `${title} (${this.dataAuthor})`;
-				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() {
+		this.titleService.setTitle(`${environment.applName} > ${title}`)
-		console.log('check ... ');
 	}
 	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;
 	}
-		}
+	myPeriodicCheckFunction() {
-		*/
+		console.log('check ... ');
-	}
-/*
-	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;
-			});
-		*/
 	}
 	onRequirePlay() {
 		this.playStream = true;
@@ -337,14 +196,14 @@ export class ElementPlayerAudioComponent implements OnInit {
 	}
 
 	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 = '';
-		if(heures !== 0) {
+		if (hours !== 0) {
-			out = `${out }${heures }:`;
+			out = `${out}${hours}:`;
 		}
 		if (minutes >= 10) {
 			out = `${out}${minutes}:`;
@@ -404,6 +263,10 @@ export class ElementPlayerAudioComponent implements OnInit {
 
 	onStop() {
 		console.log('stop');
+		if (this.mediaPlayer.paused && this.mediaPlayer.currentTime == 0) {
+			this.mediaSource = null;
+			return;
+		}
 		if (isNullOrUndefined(this.mediaPlayer)) {
 			console.log(`error element: ${this.mediaPlayer}`);
 			return;
@@ -474,10 +337,11 @@ 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)) {
+		if (!isNullOrUndefined(temporaryValue)) {
-			tmppp.release();
+			console.log(`plopppp ${temporaryValue}`);
+			temporaryValue.release();
 		}
 		try {
 			let tmp = navigator as any;
@@ -487,11 +351,11 @@ export class ElementPlayerAudioComponent implements OnInit {
 			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');
+				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}`);

front/src/app/model/album.ts

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

front/src/app/scene/error-viewer/error-viewer.ts

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

front/src/styles.less

@@ -1,22 +1,55 @@
 @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) {
-	.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) {
-	.xdesktop{display:none;}
+	.xdesktop {
-	.xtablette{display:none;}
+		display: none;
-	.xphone{display:block;}
+	}
-	.xmobile{display:block;}
+
+	.xtablette {
+		display: none;
+	}
+
+	.xphone {
+		display: block;
+	}
+
+	.xmobile {
+		display: block;
+	}
 }
 
 
@@ -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)
 }
 
@@ -254,12 +290,28 @@ label {
 
 	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;
 }
+
+
+/*****************************************************************************
+ *             FLEX TOOLS
+ *****************************************************************************/
+
+
+.flex-row {
+	display: flex;
+	flex-direction: row;
+}
+
+.flex-row-last {
+	margin-left: auto;
+}
+
+.flex-row-first {
+	margin-right: auto;
+}