[DEV] add next and previous
This commit is contained in:
parent
8916ad33c8
commit
9399ffe3b6
25803
front/package-lock.json
generated
25803
front/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,41 +12,42 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~11.0.3",
|
||||
"@angular/cdk": "^11.0.1",
|
||||
"@angular/common": "~11.0.3",
|
||||
"@angular/compiler": "~11.0.3",
|
||||
"@angular/core": "~11.0.3",
|
||||
"@angular/forms": "~11.0.3",
|
||||
"@angular/material": "^11.0.1",
|
||||
"@angular/platform-browser": "~11.0.3",
|
||||
"@angular/platform-browser-dynamic": "~11.0.3",
|
||||
"@angular/router": "^11.0.3",
|
||||
"core-js": "^3.8.0",
|
||||
"jquery": "^3.5.1",
|
||||
"ngx-select-dropdown": "^1.4.4",
|
||||
"rxjs": "^6.6.3",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.3"
|
||||
"@angular/animations": "^11.2.12",
|
||||
"@angular/cdk": "^9.1.1",
|
||||
"@angular/common": "^11.2.12",
|
||||
"@angular/compiler": "^11.2.12",
|
||||
"@angular/core": "^11.2.12",
|
||||
"@angular/forms": "^11.2.12",
|
||||
"@angular/material": "^9.1.1",
|
||||
"@angular/platform-browser": "^11.2.12",
|
||||
"@angular/platform-browser-dynamic": "^11.2.12",
|
||||
"@angular/router": "^11.2.12",
|
||||
"core-js": "^3.6.4",
|
||||
"jquery": "^3.6.0",
|
||||
"rxjs": "^6.5.4",
|
||||
"tslib": "^1.11.1",
|
||||
"videogular": "^1.4.4",
|
||||
"zone.js": "^0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^0.1002.0",
|
||||
"@angular/cli": "~11.0.3",
|
||||
"@angular/compiler-cli": "~11.0.3",
|
||||
"@angular/language-service": "~11.0.3",
|
||||
"@types/jasmine": "^3.6.2",
|
||||
"@angular-devkit/build-angular": "^0.1102.11",
|
||||
"@angular/cli": "^11.2.11",
|
||||
"@angular/compiler-cli": "~11.2.12",
|
||||
"@angular/language-service": "~11.2.12",
|
||||
"@types/jasmine": "^3.6.11",
|
||||
"@types/jasminewd2": "^2.0.8",
|
||||
"@types/node": "^13.13.34",
|
||||
"jasmine-core": "~3.5.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~5.0.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.4",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "^8.10.2",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "^4.0.5"
|
||||
"@types/node": "^13.7.7",
|
||||
"codelyzer": "^6.0.2",
|
||||
"jasmine-core": "^3.7.1",
|
||||
"jasmine-spec-reporter": "^7.0.0",
|
||||
"karma": "^6.3.2",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "^2.1.1",
|
||||
"karma-jasmine": "^2.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.5.2",
|
||||
"protractor": "^7.0.0",
|
||||
"ts-node": "^8.6.2",
|
||||
"tslint": "^5.20.1",
|
||||
"typescript": "~4.0.6"
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,16 +17,28 @@
|
||||
<div class="title">
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="cover">
|
||||
<div class="cover-image" *ngIf="cover != null">
|
||||
<img src="{{cover}}"/>
|
||||
<div class="cover-full">
|
||||
<div class="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 class="cover-no-image" *ngIf="cover == null">
|
||||
<img src="{{cover}}"/>
|
||||
<div class="cover-button-next" *ngIf="haveNext != null">
|
||||
<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
|
||||
<i class="material-icons big-button">arrow_forward_ios</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cover-button">
|
||||
<button (click)="onRequirePlay()">
|
||||
<i class="material-icons big-button">play_circle_outline</i>
|
||||
<div class="cover-button-previous" *ngIf="havePrevious != null">
|
||||
<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
|
||||
<i class="material-icons big-button">arrow_back_ios</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -29,39 +29,71 @@
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cover {
|
||||
.cover-full {
|
||||
position:relative;
|
||||
width: 400px;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin: 0 auto;
|
||||
overflow:hidden;
|
||||
|
||||
.cover-image {
|
||||
position:absolute;
|
||||
};
|
||||
.cover-no-image {
|
||||
position:absolute;
|
||||
width: 390px;
|
||||
height: 490px;
|
||||
.cover {
|
||||
position:relative;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
margin: 0 auto;
|
||||
border: solid 5px;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
};
|
||||
.cover-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
};
|
||||
overflow:hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
};
|
||||
.cover-image {
|
||||
position:absolute;
|
||||
};
|
||||
.cover-no-image {
|
||||
position:absolute;
|
||||
width: 390px;
|
||||
height: 490px;
|
||||
margin: 0 auto;
|
||||
border: solid 5px;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
};
|
||||
.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 {
|
||||
border: 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 {
|
||||
|
||||
@ -45,7 +45,8 @@ export class VideoScene implements OnInit {
|
||||
this.videoCanva = el.nativeElement;
|
||||
}
|
||||
}
|
||||
|
||||
haveNext = null;
|
||||
havePrevious = null;
|
||||
id_video:number = -1;
|
||||
|
||||
mediaIsNotFound:boolean = false;
|
||||
@ -104,7 +105,16 @@ export class VideoScene implements OnInit {
|
||||
clearInterval(this.interval);
|
||||
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,
|
||||
private router: Router,
|
||||
@ -174,11 +184,21 @@ export class VideoScene implements OnInit {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
let self = this;
|
||||
this.startHideTimer();
|
||||
this.arianeService.updateManual(this.route.snapshot.paramMap);
|
||||
|
||||
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;
|
||||
self.haveNext = null;
|
||||
self.havePrevious = null;
|
||||
this.videoService.get(this.id_video)
|
||||
.then(function(response) {
|
||||
console.log("get response of video : " + JSON.stringify(response, null, 2));
|
||||
@ -222,6 +242,33 @@ export class VideoScene implements OnInit {
|
||||
}).catch(function(response) {
|
||||
// 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;
|
||||
//console.log("display source " + self.video_source);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user