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

[DEV] many test and update

Browse Source
This commit is contained in:
Edouard DUPIN 2020-12-05 14:44:59 +01:00
parent 600f102ac9
commit 2b8d170383
14 changed files with 238 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/app/component/element-series/element-series.html
View File

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

25
front/src/app/component/element-series/element-series.less
View File

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

7
front/src/app/component/element-series/element-series.ts
View File

@ -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;
});
}
}

5
front/src/app/component/element-type/element-type.html
View File

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

27
front/src/app/component/element-type/element-type.less
View File

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

20
front/src/app/component/element-type/element-type.ts
View File

@ -22,13 +22,15 @@ export class ElementTypeComponent implements OnInit {
// input parameters
@Input() id_type:number = -1;
imageSource:string = ""
name:string = ""
error:string = ""
description:string = ""
imageSource:string = "";
name:string = "";
error:string = "";
description:string = "";
countvideo:number = null;
countserie:number = null;
cover:string = ""
covers:Array<string> = []
cover: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;
});
}
}

8
front/src/app/scene/video/video.html
View File

@ -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 (dblclick)="onForward()"><i class="material-icons">fast_forward</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 (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>

12
front/src/app/scene/video/video.less
View File

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

33
front/src/app/scene/video/video.ts
View File

@ -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);
});
*/
}
}

67
front/src/app/service/bdd.ts
View File

@ -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) {
console.log("end download DB: ==> " + _name + " " + response.length);
self.bdd[_name] = new DataInterface(_name, response);
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 + ": cant 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);
});
});
.then(function(response) {
console.log("end download DB: ==> " + _name + " " + response.length);
self.bdd[_name] = new DataInterface(_name, response);
localStorage.setItem(self.base_local_storage_name + _name, JSON.stringify(self.bdd[_name].bdd));
}).catch(function(response) {
console.log("[E] " + self.constructor.name + ": cant not get data from remote server: " + _name);
});
} else {
console.log("Download BDD (" + _name + ")");
return new Promise((resolve, reject) => {
self.http.get_specific(_name)
.then(function(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) {

13
front/src/app/service/series.ts
View File

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

24
front/src/app/service/type.ts
View File

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

23
front/src/app/service/video.ts
View File

@ -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);
});
});
}
}

8
front/src/environments/environment.ts
View File

@ -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://192.168.1.156/karideo/api',
apiOAuthUrl: 'http://localhost:17080/karauth/api',
//apiOAuthUrl: 'http://192.168.1.156/karauth/api',
//apiUrl: 'http://localhost:18080/karideo/api',
apiUrl: 'http://192.168.1.156/karideo/api',
//apiOAuthUrl: 'http://localhost:17080/karauth/api',
apiOAuthUrl: 'http://192.168.1.156/karauth/api',
frontBaseUrl: '',
//apiMode: "QUERRY"
apiMode: "REWRITE"