[DEV] update the elements

back/src/org/kar/karideo/api/UserMediaAdvancementResource.java

@@ -77,8 +77,12 @@ public class UserMediaAdvancementResource {
     	UserMediaAdvancement elem = this.getWithId(sc, id);
     	if (elem == null) {
     		// insert element
+    		if (data.addCount) {
+    			return this.post(sc, id, new MediaInformations(data.time(), data.percent(), 1));
+    		} else {
     			return this.post(sc, id, new MediaInformations(data.time(), data.percent(), 0));
     		}
+    	}
     	elem.time = data.time;
     	elem.percent = data.percent;
     	if (data.addCount) {

back/src/org/kar/karideo/migration/Migration20230810.java

@@ -16,7 +16,7 @@ public class Migration20230810 extends MigrationSqlStep {
 		addClass(UserMediaAdvancement.class);
 
 		addAction("""
-				ALTER TABLE `userMediaAdvencement` AUTO_INCREMENT = 1000;
+				ALTER TABLE `userMediaAdvancement` AUTO_INCREMENT = 1000;
 				""");
 	}
 

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

@@ -1,4 +1,9 @@
 <div>
+	<div class="count-base">
+		<span class="views" *ngIf="advancement">
+			{{advancement.count}}
+		</span>
+	</div>
 	<div class="videoImgContainer">
 		<div *ngIf="covers">
 			<!--<data-image id="{{cover}}"></data-image>-->
@@ -8,11 +13,12 @@
 
 		</div>
 	</div>
+	<div class="view-progess" [ngStyle]="updateAdvancement()"></div>
 	<div class="title-small" *ngIf="data">
 		{{episodeDisplay}} {{name}}
 	</div>
 	<div class="title-small" *ngIf="!data">
-		Error meda: {{element?.id}}
+		Error media: {{element?.id}}
 	</div>
 	<!--
 	<div class="description-small" *ngIf="description">

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

@@ -1,14 +1,53 @@
+.count-base {
+	height: 0px;
+	width: 100%;
+	left: 0px;
+	z-index: 12;
+	//position:flex;
+	text-align: left;
+
+	.views {
+		height: 30px;
+		//width: 30px;
+		font-size: 17px;
+		line-height: 30px;
+		overflow: hidden;
+		position: relative;
+		z-index: 12;
+		left: 6px;
+		top: 6px;
+		text-align: left;
+		padding: 5px 10px;
+		color: rgba(0, 0, 0, 1.0);
+		background: rgba(256, 256, 256, 0.3);
+		border: 1px solid;
+		border-color: rgba(56, 206, 26, 0.8);
+		border-radius: 15px;
+	}
+}
+
+.view-progess {
+	//position: relative;
+	//display: flex;
+	height: 2px;
+	background-color: #079207;
+	//width: 70%;
+	left: 0px;
+	z-index: 15;
+}
 
 .videoImgContainer {
 	text-align: center;
 	width: 200px;
 	margin: 0 auto;
 	height: 250px;
+
 	img {
 		//width: 100%;
 		max-height: 250px;
 		max-width: 200px;
 	}
+
 	.noImage {
 		height: 243px;
 		width: 193px;

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

@@ -5,8 +5,9 @@
  */
 import { Injectable, Component, OnInit, Input } from '@angular/core';
 import { isMedia, Media } from 'app/model';
+import { UserMediaAdvancement } from 'app/model/user-media-advancement';
 
-import { DataService } from 'app/service';
+import { AdvancementService, DataService } from 'app/service';
 import { NodeData } from 'common/model';
 import { isNullOrUndefined } from 'common/utils';
 
@@ -29,8 +30,11 @@ export class ElementVideoComponent implements OnInit {
 	cover: string = '';
 	covers: string[];
 
+	advancement: UserMediaAdvancement = undefined;
+
 	constructor(
-		private dataService: DataService) {
+		private dataService: DataService,
+		private advancementService: AdvancementService) {
 		// nothing to do.
 	}
 	ngOnInit() {
@@ -49,5 +53,19 @@ export class ElementVideoComponent implements OnInit {
 			this.episodeDisplay = `${this.element.episode} - `;
 		}
 		this.covers = this.dataService.getCoverListThumbnailUrl(this.element.covers);
+
+		this.advancementService.get(this.element.id)
+			.then((response: UserMediaAdvancement) => {
+				console.log(`  ==> get answer sub-series: ${JSON.stringify(response)}`);
+				this.advancement = response;
+			}).catch((response) => {
+				this.advancement = undefined;
+			});
+	}
+	updateAdvancement() {
+		if (isNullOrUndefined(this.advancement)) {
+			return { width: "0%" };
+		}
+		return { width: `${this.advancement.percent * 100}%` };
 	}
 }

front/src/app/scene/season/season.ts

@@ -6,7 +6,7 @@
 
 import { Component, OnInit } from '@angular/core';
 
-import { SeasonService, DataService, SeriesService, ArianeService } from 'app/service';
+import { SeasonService, DataService, SeriesService, ArianeService, AdvancementService } from 'app/service';
 
 @Component({
 	selector: 'app-season',
@@ -27,7 +27,8 @@ export class SeasonScene implements OnInit {
 		private seasonService: SeasonService,
 		private seriesService: SeriesService,
 		private arianeService: ArianeService,
-	    private dataService: DataService) {
+		private dataService: DataService,
+		private advancementService: AdvancementService) {
 
 	}
 
@@ -76,6 +77,11 @@ export class SeasonScene implements OnInit {
 	}
 
 	onSelectVideo(event: any, idSelected: number): void {
+		if (event.ctrlKey && event.altKey && event.which === 2) {
+			// special feature ==> add count id...
+			this.advancementService.updateTime(idSelected, 0, 1, true);
+		} else {
 			this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
 		}
 	}
+}

front/src/app/scene/series/series.ts

@@ -6,7 +6,7 @@
 
 import { Component, OnInit } from '@angular/core';
 
-import { SeriesService, DataService, ArianeService } from 'app/service';
+import { SeriesService, DataService, ArianeService, AdvancementService } from 'app/service';
 import { NodeData } from 'common/model';
 
 @Component({
@@ -28,7 +28,8 @@ export class SeriesScene implements OnInit {
 	constructor(
 		private seriesService: SeriesService,
 		private arianeService: ArianeService,
-		private dataService: DataService) {
+		private dataService: DataService,
+		private advancementService: AdvancementService) {
 
 	}
 
@@ -97,8 +98,13 @@ export class SeriesScene implements OnInit {
 	}
 
 	onSelectVideo(event: any, idSelected: number): void {
+		if (event.ctrlKey && event.altKey && event.which === 2) {
+			// special feature ==> add count id...
+			this.advancementService.updateTime(idSelected, 0, 1, true);
+		} else {
 			this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
 		}
+	}
 	checkIfJumpIsNeeded(updateEnded: { seriesMetadata: boolean; subSaison: boolean; subVideo: boolean; }): void {
 		// all update is ended
 		if (updateEnded.seriesMetadata === false || updateEnded.subSaison === false || updateEnded.subVideo === false) {

front/src/app/scene/type/type.ts

@@ -7,7 +7,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { TypeService, DataService, ArianeService } from 'app/service';
+import { TypeService, DataService, ArianeService, AdvancementService } from 'app/service';
 
 @Component({
 	selector: 'app-type',
@@ -28,7 +28,8 @@ export class TypeScene implements OnInit {
 	constructor(
 		private typeService: TypeService,
 		private arianeService: ArianeService,
-	    private dateService: DataService) {
+		private dateService: DataService,
+		private advancementService: AdvancementService) {
 
 		/*
 		this.route.params.subscribe(params => {
@@ -90,6 +91,12 @@ export class TypeScene implements OnInit {
 	}
 
 	onSelectVideo(event: any, idSelected: number): void {
+		console.log(` type of event: ${typeof event}`);
+		if (event.ctrlKey && event.altKey && event.which === 2) {
+			// special feature ==> add count id...
+			this.advancementService.updateTime(idSelected, 0, 1, true);
+		} else {
 			this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
 		}
 	}
+}

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

@@ -53,9 +53,9 @@
 		<div class="episode">
 			<b>generatedName:</b> {{generatedName}}
 		</div>
-		<div class="description">
-			count= {{userMetaData?.count}} view percent={{userMetaData?.percent}}
-			percent={{convertIndisplayTime(userMetaData?.time)}}
+		<div class="episode" *ngIf="userMetaData">
+			<b>Number of view:</b> {{userMetaData.count}}<br />
+			<b>Position:</b> {{userMetaData.percentDisplay}} % ==> {{convertIndisplayTime(userMetaData.time)}}
 		</div>
 		<div class="description">
 			{{description}}

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

@@ -74,7 +74,7 @@ export class VideoScene implements OnInit {
 	timeLeft: number = 10;
 	interval = null;
 
-	userMetaData: UserMediaAdvancement = undefined
+	userMetaData: UserMediaAdvancement & { percentDisplay: number } = undefined
 
 	previousTime: number = 0;
 	startPlayingTime: number = undefined;
@@ -299,7 +299,7 @@ export class VideoScene implements OnInit {
 			});
 		this.advancementService.get(this.idVideo)
 			.then((response: UserMediaAdvancement) => {
-				this.userMetaData = response
+				this.userMetaData = { ...response, percentDisplay: Math.floor(response.percent * 100) }
 				this.startPlayingTime = response.time
 			})
 	}