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

[DEV] add 3 main button

Browse Source
This commit is contained in:
Edouard DUPIN 2020-11-13 23:58:35 +01:00
parent d5070f773e
commit 18c039ef5b
3 changed files with 82 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,6 +84,10 @@
<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)="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">

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

@ -104,6 +104,7 @@
};
.controls {
opacity: 0;
//visibility: hidden;
opacity: 0.5;
width: 96%;
@ -127,6 +128,56 @@
background: none;
}
.bigPause {
position: fixed;
top: 10%;
left: 40%;
width: 20%;
height: 80%;
color: red;
border: none;
box-shadow: none;
cursor: pointer;
:hover {
border: none;
//opacity: 0;
}
.material-icons {
color: #FFF;
font-size: 100px;
}
:focus {
//opacity: 0;
}
}
.bigRewind {
position: fixed;
top: 10%;
left: 20%;
width: 20%;
height: 80%;
color: green;
border: none;
.material-icons {
color: #FFF;
font-size: 100px;
}
}
.bigForward {
position: fixed;
top: 10%;
left: 60%;
width: 20%;
height: 80%;
color: blue;
border: none;
.material-icons {
color: #FFF;
font-size: 100px;
}
}
.slidecontainer {
line-height: 38px;
font-size: 10px;
@ -177,9 +228,11 @@
font-weight:bold;
}
}
/*
:hover .controls, :focus .controls {
opacity: 1;
}
*/
button:before {
font-family: HeydingsControlsRegular;

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

@ -244,7 +244,7 @@ export class VideoScene implements OnInit {
console.log("play");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.volume = this.volumeValue/100;
@ -255,17 +255,30 @@ export class VideoScene implements OnInit {
console.log("pause");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.pause();
}
onPauseToggle() {
console.log("pause toggle");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error element: " + this.videoPlayer);
return;
}
if (this.isPlaying == true) {
this.videoPlayer.pause();
} else {
this.videoPlayer.play();
}
}
onStop() {
console.log("stop");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.pause();
@ -286,7 +299,7 @@ export class VideoScene implements OnInit {
console.log("next");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.currentTime = newValue.value;
@ -296,7 +309,7 @@ export class VideoScene implements OnInit {
console.log("rewind");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.currentTime = this.currentTime - 10;
@ -306,7 +319,7 @@ export class VideoScene implements OnInit {
console.log("forward");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.currentTime = this.currentTime + 10;
@ -316,7 +329,7 @@ export class VideoScene implements OnInit {
console.log("more");
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
}
@ -324,7 +337,7 @@ export class VideoScene implements OnInit {
console.log("fullscreen");
if (this.videoGlobal === null
|| this.videoGlobal === undefined) {
console.log("error elemrent: " + this.videoGlobal);
console.log("error element: " + this.videoGlobal);
return;
}
if (this.videoGlobal.requestFullscreen) {
@ -345,7 +358,7 @@ export class VideoScene implements OnInit {
console.log("fullscreen EXIT");
if (this.videoGlobal === null
|| this.videoGlobal === undefined) {
console.log("error elemrent: " + this.videoGlobal);
console.log("error element: " + this.videoGlobal);
return;
}
if (docc.exitFullscreen) {
@ -379,7 +392,7 @@ export class VideoScene implements OnInit {
console.log("onVolume " + newValue.value);
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.volumeValue = newValue.value;
@ -390,7 +403,7 @@ export class VideoScene implements OnInit {
onVolumeMute() {
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.muted=true;
@ -399,7 +412,7 @@ export class VideoScene implements OnInit {
onVolumeUnMute() {
if (this.videoPlayer === null
|| this.videoPlayer === undefined) {
console.log("error elemrent: " + this.videoPlayer);
console.log("error element: " + this.videoPlayer);
return;
}
this.videoPlayer.muted=false;