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

[DEV] add next and previous

Browse Source
This commit is contained in:
Edouard DUPIN 2021-09-16 01:04:11 +02:00
parent 8916ad33c8
commit 9399ffe3b6
5 changed files with 22239 additions and 3794 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25803
front/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

67
front/package.json
View File

@ -12,41 +12,42 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~11.0.3", "@angular/animations": "^11.2.12",
"@angular/cdk": "^11.0.1", "@angular/cdk": "^9.1.1",
"@angular/common": "~11.0.3", "@angular/common": "^11.2.12",
"@angular/compiler": "~11.0.3", "@angular/compiler": "^11.2.12",
"@angular/core": "~11.0.3", "@angular/core": "^11.2.12",
"@angular/forms": "~11.0.3", "@angular/forms": "^11.2.12",
"@angular/material": "^11.0.1", "@angular/material": "^9.1.1",
"@angular/platform-browser": "~11.0.3", "@angular/platform-browser": "^11.2.12",
"@angular/platform-browser-dynamic": "~11.0.3", "@angular/platform-browser-dynamic": "^11.2.12",
"@angular/router": "^11.0.3", "@angular/router": "^11.2.12",
"core-js": "^3.8.0", "core-js": "^3.6.4",
"jquery": "^3.5.1", "jquery": "^3.6.0",
"ngx-select-dropdown": "^1.4.4", "rxjs": "^6.5.4",
"rxjs": "^6.6.3", "tslib": "^1.11.1",
"tslib": "^2.0.0", "videogular": "^1.4.4",
"zone.js": "~0.10.3" "zone.js": "^0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^0.1002.0", "@angular-devkit/build-angular": "^0.1102.11",
"@angular/cli": "~11.0.3", "@angular/cli": "^11.2.11",
"@angular/compiler-cli": "~11.0.3", "@angular/compiler-cli": "~11.2.12",
"@angular/language-service": "~11.0.3", "@angular/language-service": "~11.2.12",
"@types/jasmine": "^3.6.2", "@types/jasmine": "^3.6.11",
"@types/jasminewd2": "^2.0.8", "@types/jasminewd2": "^2.0.8",
"@types/node": "^13.13.34", "@types/node": "^13.7.7",
"jasmine-core": "~3.5.0", "codelyzer": "^6.0.2",
"jasmine-spec-reporter": "~5.0.0", "jasmine-core": "^3.7.1",
"karma": "~5.0.0", "jasmine-spec-reporter": "^7.0.0",
"karma-chrome-launcher": "~3.1.0", "karma": "^6.3.2",
"karma-coverage-istanbul-reporter": "~3.0.2", "karma-chrome-launcher": "^3.1.0",
"karma-jasmine": "~4.0.0", "karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine-html-reporter": "^1.5.4", "karma-jasmine": "^2.0.1",
"protractor": "~7.0.0", "karma-jasmine-html-reporter": "^1.5.2",
"ts-node": "^8.10.2", "protractor": "^7.0.0",
"tslint": "~6.1.0", "ts-node": "^8.6.2",
"typescript": "^4.0.5" "tslint": "^5.20.1",
"typescript": "~4.0.6"
} }
} }

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

@ -17,16 +17,28 @@
<div class="title"> <div class="title">
{{name}} {{name}}
</div> </div>
<div class="cover"> <div class="cover-full">
<div class="cover-image" *ngIf="cover != null"> <div class="cover">
<img src="{{cover}}"/> <div class="cover-image" *ngIf="cover != null">
<img src="{{cover}}"/>
</div>
<div class="cover-no-image" *ngIf="cover == null">
<img src="{{cover}}"/>
</div>
<div class="cover-button">
<button (click)="onRequirePlay()">
<i class="material-icons big-button">play_circle_outline</i>
</button>
</div>
</div> </div>
<div class="cover-no-image" *ngIf="cover == null"> <div class="cover-button-next" *ngIf="haveNext != null">
<img src="{{cover}}"/> <button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
<i class="material-icons big-button">arrow_forward_ios</i>
</button>
</div> </div>
<div class="cover-button"> <div class="cover-button-previous" *ngIf="havePrevious != null">
<button (click)="onRequirePlay()"> <button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
<i class="material-icons big-button">play_circle_outline</i> <i class="material-icons big-button">arrow_back_ios</i>
</button> </button>
</div> </div>
</div> </div>

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

@ -29,39 +29,71 @@
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
.cover { .cover-full {
position:relative; position:relative;
width: 400px; width: 100%;
height: 500px; height: 500px;
margin: 0 auto; margin: 0 auto;
overflow:hidden; overflow:hidden;
.cover {
.cover-image { position:relative;
position:absolute; width: 400px;
}; height: 500px;
.cover-no-image {
position:absolute;
width: 390px;
height: 490px;
margin: 0 auto; margin: 0 auto;
border: solid 5px; overflow:hidden;
border-color: rgba(0, 0, 0, 0.7);
}; .cover-image {
.cover-button { position:absolute;
position: absolute; };
top: 50%; .cover-no-image {
left: 50%; position:absolute;
-ms-transform: translate(-50%, -50%); width: 390px;
transform: translate(-50%, -50%); height: 490px;
}; margin: 0 auto;
border: solid 5px;
img { border-color: rgba(0, 0, 0, 0.7);
width: 100%; };
}; .cover-button {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
};
img {
width: 100%;
};
button {
border: none;
background: none;
color: #00F000;
:hover {
color: #F00000;
}
};
}
button { button {
border: none; border: none;
background: none; background: none;
color: #00F000; color: #000000;
:hover {
color: #F00000;
}
};
.cover-button-previous {
position: absolute;
top: 50%;
left: 15%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
};
.cover-button-next {
position: absolute;
top: 50%;
left: 85%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}; };
} }
.video { .video {

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

@ -45,7 +45,8 @@ export class VideoScene implements OnInit {
this.videoCanva = el.nativeElement; this.videoCanva = el.nativeElement;
} }
} }
haveNext = null;
havePrevious = null;
id_video:number = -1; id_video:number = -1;
mediaIsNotFound:boolean = false; mediaIsNotFound:boolean = false;
@ -104,7 +105,16 @@ export class VideoScene implements OnInit {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = null; this.interval = null;
} }
onRequireNext(_event: any) {
console.log("generate next : " + this.haveNext.id);
this.arianeService.navigateVideo(this.haveNext.id, _event.which==2, _event.ctrlKey);
this.arianeService.setVideo(this.haveNext.id);
}
onRequirePrevious(_event: any) {
console.log("generate previous : " + this.havePrevious.id);
this.arianeService.navigateVideo(this.havePrevious.id, _event.which==2, _event.ctrlKey);
this.arianeService.setVideo(this.havePrevious.id);
}
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private router: Router, private router: Router,
@ -174,11 +184,21 @@ export class VideoScene implements OnInit {
} }
ngOnInit() { ngOnInit() {
let self = this;
this.startHideTimer(); this.startHideTimer();
this.arianeService.updateManual(this.route.snapshot.paramMap); this.arianeService.updateManual(this.route.snapshot.paramMap);
this.id_video = this.arianeService.getVideoId(); this.id_video = this.arianeService.getVideoId();
this.arianeService.video_change.subscribe(video_id => {
console.log("Detect videoId change..." + video_id);
self.id_video = video_id;
self.updateDisplay();
});
self.updateDisplay();
}
updateDisplay():void {
let self = this; let self = this;
self.haveNext = null;
self.havePrevious = null;
this.videoService.get(this.id_video) this.videoService.get(this.id_video)
.then(function(response) { .then(function(response) {
console.log("get response of video : " + JSON.stringify(response, null, 2)); console.log("get response of video : " + JSON.stringify(response, null, 2));
@ -222,6 +242,33 @@ export class VideoScene implements OnInit {
}).catch(function(response) { }).catch(function(response) {
// nothing to do ... // nothing to do ...
}); });
self.seasonService.getVideo(self.season_id)
.then(function(response:any) {
//console.log("saison property: " + JSON.stringify(response, null, 2));
self.haveNext = null;
self.havePrevious = null;
for (let iii=0; iii<response.length; iii++) {
if (response[iii].episode === undefined || response[iii].episode === null) {
continue;
}
if (response[iii].episode < self.episode) {
if (self.havePrevious === null) {
self.havePrevious = response[iii];
} else if (self.havePrevious.episode < response[iii].episode) {
self.havePrevious = response[iii];
}
} else if (response[iii].episode > self.episode) {
if (self.haveNext === null) {
self.haveNext = response[iii];
} else if (self.haveNext.episode > response[iii].episode) {
self.haveNext = response[iii];
}
}
self.covers.push(self.seriesService.getCoverUrl(response[iii]));
}
}).catch(function(response:any) {
});
} }
self.mediaIsLoading = false; self.mediaIsLoading = false;
//console.log("display source " + self.video_source); //console.log("display source " + self.video_source);