[DEV] many test and update

front/src/app/component/element-series/element-series.html

@@ -1,4 +1,9 @@
 <div>
+	<div class="count-base">
+		<div class="count" *ngIf="countvideo">
+			{{countvideo}}
+		</div>
+	</div>
 	<div class="imgContainer-small">
 		<div *ngIf="cover">
 			<img src="{{cover}}"/>
@@ -10,7 +15,7 @@
 	<div class="title-small">
 		{{name}}
 	</div>
-	<!--
+	<!-- 
 	<div class="description-small" *ngIf="description">
 		{{description}}
 	</div>

front/src/app/component/element-series/element-series.less

@@ -1,5 +1,30 @@
 
+.count-base {
+	height: 0px;
+	width: 0px;
+	.count {
+		height: 30px;
+		width: 30px;
+		font-size: 17px;
+		line-height: 30px;
+		overflow:hidden;
+		position:relative;
+		z-index: 12;
+		left: 165px;
+		top: 2px;
+		text-align: center;
+		//padding: 5px 10px;
+		color: rgba(0, 0, 0, 1.0);
+		background: rgba(256, 256, 256, 0.3);
+		border: 1px solid;
+		border-color: rgba(256, 256, 256, 0.8);
+		border-radius: 15px;
+	}
+}
+
 .imgContainer-small {
+	right: 2px;
+	top: 2px;
 	text-align: center;
 	width: 200px;
 	margin: 0 auto;

front/src/app/component/element-series/element-series.ts

@@ -26,6 +26,7 @@ export class ElementSeriesComponent implements OnInit {
 	error:string = "";
 	name:string = "plouf";
 	description:string = "";
+	countvideo:number = null;
 	imageSource:string = null;
 	
 	cover:string = "";
@@ -58,5 +59,11 @@ export class ElementSeriesComponent implements OnInit {
 				self.cover = null;
 				self.covers = [];
 			});
+		this.seriesService.countVideo(this.id_series)
+			.then(function(response) {
+				self.countvideo = response;
+			}).catch(function(response) {
+				self.countvideo = 0;
+			});
 	}
 }

front/src/app/component/element-type/element-type.html

@@ -1,4 +1,9 @@
 <div>
+	<div class="count-base">
+		<span class="count" *ngIf="countvideo">
+			{{countvideo}}
+		</span>
+	</div>
 	<div class="imgContainer-small">
 		<div *ngIf="cover">
 			<img src="{{cover}}" alt="type image" class="miniature-small"/>

front/src/app/component/element-type/element-type.less

@@ -1,5 +1,30 @@
 
-
+.count-base {
+	height: 0px;
+	width: 100%;
+	right: 0px;
+	z-index: 12;
+	//position:flex;
+	text-align: right;
+	.count {
+		height: 30px;
+		//width: 30px;
+		font-size: 17px;
+		line-height: 30px;
+		overflow:hidden;
+		position:relative;
+		z-index: 12;
+		right: 2px;
+		top: 4px;
+		text-align: right;
+		padding: 5px 10px;
+		color: rgba(0, 0, 0, 1.0);
+		background: rgba(256, 256, 256, 0.3);
+		border: 1px solid;
+		border-color: rgba(256, 256, 256, 0.8);
+		border-radius: 15px;
+	}
+}
 
 .imgContainer-small {
 	text-align: center;

front/src/app/component/element-type/element-type.ts

@@ -22,13 +22,15 @@ export class ElementTypeComponent implements OnInit {
 	// input parameters
 	@Input() id_type:number = -1;
 	
-	imageSource:string = ""
+	imageSource:string = "";
-	name:string = ""
+	name:string = "";
-	error:string = ""
+	error:string = "";
-	description:string = ""
+	description:string = "";
+	countvideo:number = null;
+	countserie:number = null;
 	
-	cover:string = ""
+	cover:string = "";
-	covers:Array<string> = []
+	covers:Array<string> = [];
 	
 	constructor(private router: Router,
 	            private typeService: TypeService) {
@@ -93,5 +95,11 @@ export class ElementTypeComponent implements OnInit {
 				self.cover = null;
 				self.covers = [];
 			});
+		this.typeService.countVideo(this.id_type)
+			.then(function(response) {
+				self.countvideo = response;
+			}).catch(function(response) {
+				self.countvideo = 0;
+			});
 	}
 }

front/src/app/scene/video/video.html

@@ -81,19 +81,20 @@
 					</div>
 				</div>
 				<!--<button (click)="onBefore()"><i class="material-icons">navigate_before</i></button>-->
-				<button (dblclick)="onRewind()"><i class="material-icons">fast_rewind</i></button>
+				<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
-				<button (dblclick)="onForward()"><i class="material-icons">fast_forward</i></button>
+				<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
 				<!--<button (click)="onNext()"><i class="material-icons">navigate_next</i></button>-->
 				<!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>-->
 				<button (click)="onFullscreen()" *ngIf="!isFullScreen"><i class="material-icons">fullscreen</i></button>
 				<button (click)="onFullscreenExit()" *ngIf="isFullScreen"><i class="material-icons">fullscreen_exit</i></button>
+				<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</i></button>-->
 				<button (click)="onVolumeMenu()" ><i class="material-icons">volume_up</i></button>
 				
 				<button class="bigPause" (click)="onPauseToggle()"><i *ngIf="!isPlaying" class="material-icons">play_circle_outline</i></button>
 				<button class="bigRewind" (click)="onRewind()"><i *ngIf="!isPlaying" class="material-icons">fast_rewind</i></button>
 				<button class="bigForward" (click)="onForward()"><i *ngIf="!isPlaying" class="material-icons">fast_forward</i></button>
 			</div>
-  
+  			
 			<div class="video-button" *ngIf="!isFullScreen || !isPlaying"> 
 				<button (click)="onRequireStop()">
 					<i class="material-icons big-button">highlight_off</i>
@@ -112,4 +113,5 @@
 			</div>
 		</div>
 	</div>
+	<canvas #canvascreenshoot style="overflow:auto"></canvas>
 </div>

front/src/app/scene/video/video.less

@@ -129,10 +129,10 @@
 		
 		.bigPause {
 			position: fixed;
-			top: 10%;
+			top: 120px;
 			left: 40%;
 			width: 20%;
-			height: 80%;
+			height: calc(90% - 120px*2);
 			border: none;
 			box-shadow: none;
 			cursor: pointer;
@@ -148,10 +148,10 @@
 		}
 		.bigRewind {
 			position: fixed;
-			top: 10%;
+			top: 120px;
 			left: 20%;
 			width: 20%;
-			height: 80%;
+			height: calc(90% - 120px*2);
 			border: none;
 			.material-icons {
 		  		color: #FFF;
@@ -165,10 +165,10 @@
 		}
 		.bigForward {
 			position: fixed;
-			top: 10%;
+			top: 120px;
 			left: 60%;
 			width: 20%;
-			height: 80%;
+			height: calc(90% - 120px*2);
 			border: none;
 			.material-icons {
 		  		color: #FFF;

front/src/app/scene/video/video.ts

@@ -38,7 +38,13 @@ export class VideoScene implements OnInit {
 		    this.videoPlayer = el.nativeElement;
 		}
 	 }
-
+	videoCanva: any;
+	@ViewChild('canvascreenshoot')
+	  set mainCanvaEl(el: ElementRef) {
+		if (el != null) {
+		    this.videoCanva = el.nativeElement;
+		}
+	 }
 	
 	id_video:number = -1;
 
@@ -444,4 +450,29 @@ export class VideoScene implements OnInit {
 			}
 		this.videoPlayer.muted=false;
 	}
+
+	onTakeScreenShoot() {
+		//const canvas = document.createElement("canvas");
+		// scale the canvas accordingly
+		this.videoCanva.width = this.videoPlayer.videoWidth;
+		this.videoCanva.height = this.videoPlayer.videoHeight;
+		// draw the video at that frame
+		this.videoCanva.getContext('2d').drawImage(this.videoPlayer, 0, 0, this.videoCanva.width, this.videoCanva.height);
+		//canvas.crossorigin="anonymous"
+		// convert it and send it to the server
+		let self = this;
+		
+		this.videoCanva.toBlob(function(blob){
+			self.videoService.uploadCoverBlob(blob, this.id_video);
+		}, 'image/jpeg', 0.95);
+		/*
+		let tmpUrl = this.videoCanva.toDataURL('image/jpeg', 0.95);
+		fetch(tmpUrl)
+		  .then(res => res.blob()) // Gets the response and returns it as a blob
+		  .then(blob => {
+			  self.videoService.uploadCoverBlob(blob, this.id_video);
+		});
+		*/
+	}
+	
 }

front/src/app/service/bdd.ts

@@ -19,7 +19,8 @@ export class BddService {
 		"universe": null,
 		"video": null
 	};
-	
+	private base_local_storage_name = 'yota_karideo_bdd_';
+	private use_local_storage = false; // we exceed the limit of 5MB
 	
 	constructor(private http: HttpWrapperService) {
 		console.log("Start BddService");
@@ -69,7 +70,7 @@ export class BddService {
 				});
 		});
 	}
-	
+	//   https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/#:~:text=localStorage%20is%20a%20type%20of,browser%20window%20has%20been%20closed.
 	get(_name: string): any {
 		let self = this;
 		console.log("Try to get DB '" + _name + "'");
@@ -85,23 +86,53 @@ export class BddService {
 		console.log("get DB:   ??  " + _name + "  ??");
 		if (this.bddPomise[_name] == null) {
 			this.bddPomise[_name] = new Array<any>();
-			return new Promise((resolve, reject) => {
+			// Try to load Local Data (storage)
+			let retriveBDDString = null;
+			if (this.use_local_storage == true) {
+				localStorage.getItem(this.base_local_storage_name + _name);
+			}
+			if (retriveBDDString !== null) {
+				console.log("retrive local bdd string (" + _name + ")= " + retriveBDDString);
+				let retriveBDD = JSON.parse(retriveBDDString);
+				console.log("retrive local bdd (" + _name + ")= " + retriveBDD);
+				let retriveBDDTmp = new DataInterface(_name, retriveBDD);
+				self.bdd[_name] = retriveBDDTmp;
+				for (let iii=0; iii<self.bddPomise[_name].length; iii++) {
+					self.bddPomise[_name][iii]["resolve"](self.bdd[_name]);
+				}
+				// brut force update of the BDD : TODO optimise it later ...
+				console.log("Update BDD (" + _name + ")");
 				self.http.get_specific(_name)
-					.then(function(response) {
+				.then(function(response) {
-						console.log("end download DB:               ==> " + _name + "     " + response.length);
+					console.log("end download DB:               ==> " + _name + "     " + response.length);
-						self.bdd[_name] = new DataInterface(_name, response);
+					self.bdd[_name] = new DataInterface(_name, response);
-						for (let iii=0; iii<self.bddPomise[_name].length; iii++) {
+					localStorage.setItem(self.base_local_storage_name + _name, JSON.stringify(self.bdd[_name].bdd));
-							self.bddPomise[_name][iii]["resolve"](self.bdd[_name]);
+				}).catch(function(response) {
-						}
+					console.log("[E] " + self.constructor.name + ": cant not get data from remote server: " + _name);
-						resolve(self.bdd[_name]);
+				});
-					}).catch(function(response) {
+			} else {
-						console.log("[E] " + self.constructor.name + ": cant not get data from remote server: " + _name);
+				console.log("Download BDD (" + _name + ")");
-						for (let iii=0; iii<self.bddPomise[_name].length; iii++) {
+				return new Promise((resolve, reject) => {
-							self.bddPomise[_name][iii]["reject"](response);
+					self.http.get_specific(_name)
-						}
+						.then(function(response) {
-						reject(response);
+							console.log("end download DB:               ==> " + _name + "     " + response.length);// + "   " + JSON.stringify(response).length);
-					});
+							self.bdd[_name] = new DataInterface(_name, response);
-			});
+							if (self.use_local_storage == true) {
+								localStorage.setItem(self.base_local_storage_name + _name, JSON.stringify(self.bdd[_name].bdd));
+							}
+							for (let iii=0; iii<self.bddPomise[_name].length; iii++) {
+								self.bddPomise[_name][iii]["resolve"](self.bdd[_name]);
+							}
+							resolve(self.bdd[_name]);
+						}).catch(function(response) {
+							console.log("[E] " + self.constructor.name + ": can not get data from remote server: " + _name);
+							for (let iii=0; iii<self.bddPomise[_name].length; iii++) {
+								self.bddPomise[_name][iii]["reject"](response);
+							}
+							reject(response);
+						});
+				});
+			}
 		}
 		return new Promise((resolve, reject) => {
 			if (self.bdd[_name] != null) {

front/src/app/service/series.ts

@@ -70,7 +70,6 @@ export class SeriesService {
 		return new Promise((resolve, reject) => {
 			self.bdd.getVideo()
 				.then(function(response) {
-					//let data = response.gets_where([["==", "series_id", _id], ["==", "season_id", null]], ["id"], ["episode", "name"])
 					let data = response.gets_where([["==", "series_id", _id], ["==", "season_id", null]], undefined, ["episode", "name"])
 					resolve(data);
 				}).catch(function(response) {
@@ -78,6 +77,18 @@ export class SeriesService {
 				});
 		});
 	}
+	countVideo(_id:number):any {
+		let self = this;
+		return new Promise((resolve, reject) => {
+			self.bdd.getVideo()
+				.then(function(response) {
+					let data = response.gets_where([["==", "series_id", _id]], undefined, undefined)
+					resolve(data.length);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+	}
 	
 	getSeason(_id:number, _select:Array<string> = []):any {
 		let self = this;

front/src/app/service/type.ts

@@ -57,6 +57,19 @@ export class TypeService {
 				});
 		});
 	}
+
+	countVideo(_id:number):any {
+		let self = this;
+		return new Promise((resolve, reject) => {
+			self.bdd.getVideo()
+				.then(function(response) {
+					let data = response.gets_where([["==", "type_id", _id]], undefined, undefined)
+					resolve(data.length);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+	}
 	
 	getSubVideo(_id:number, _select:Array<string> = []):any {
 		let self = this;
@@ -84,6 +97,7 @@ export class TypeService {
 	
 	getSubSeries(_id:number, _select:Array<string> = []):any {
 		let self = this;
+		/*
 		return new Promise((resolve, reject) => {
 			self.bdd.getVideo()
 				.then(function(response) {
@@ -109,6 +123,16 @@ export class TypeService {
 					reject(response);
 				});
 		});
+		*/
+		return new Promise((resolve, reject) => {
+			self.bdd.getSeries()
+				.then(function(response) {
+					let data = response.gets_where([["==", "parent_id", _id]], undefined, ["name"]);
+					resolve(data);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
 	}
 	
 	getSubUniverse(_id:number, _select:Array<string> = []):any {

front/src/app/service/video.ts

@@ -125,5 +125,28 @@ export class VideoService {
 				});
 		});
 	}
+	uploadCoverBlob(_blob:Blob,
+		    _media_id:number,
+		    _progress:any = null) {
+    const formData = new FormData();
+    formData.append('file_name', "take_screenshoot");
+	formData.append('type_id', _media_id.toString());
+    formData.append('file', _blob);
+    let self = this;
+	return new Promise((resolve, reject) => {
+		self.http.uploadMultipart(this.serviceName + "/" + _media_id + "/add_cover/", formData, _progress)
+			.then(function(response) {
+				let data = response;
+				if (data === null || data === undefined) {
+					reject("error retrive data from server");
+					return;
+				}
+				self.bdd.asyncSetInDB(self.serviceName, _media_id, data);
+				resolve(data);
+			}).catch(function(response) {
+				reject(response);
+			});
+	});
+}
 }
 

front/src/environments/environment.ts

@@ -7,10 +7,10 @@ export const environment = {
 	production: false,
 	// URL of development API
 	//apiUrl: 'http://localhost:15080',
-	apiUrl: 'http://localhost:18080/karideo/api',
+	//apiUrl: 'http://localhost:18080/karideo/api',
-	//apiUrl: 'http://192.168.1.156/karideo/api',
+	apiUrl: 'http://192.168.1.156/karideo/api',
-	apiOAuthUrl: 'http://localhost:17080/karauth/api',
+	//apiOAuthUrl: 'http://localhost:17080/karauth/api',
-	//apiOAuthUrl: 'http://192.168.1.156/karauth/api',
+	apiOAuthUrl: 'http://192.168.1.156/karauth/api',
 	frontBaseUrl: '',
 	//apiMode: "QUERRY"
 	apiMode: "REWRITE"