hide pause button when playing video

This commit is contained in:
Nicolas Constant 2019-04-13 14:27:55 -04:00
parent 45fff1b064
commit bc99ce15da
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 21 additions and 9 deletions

View File

@ -56,24 +56,26 @@
<video #videoPlayer class="galery__video" role="application" loop>
<source src="{{ attachments[0].url }}" type="video/mp4">
</video>
<div class="galery__play-control">
<button type="button" id="play-pause" class="galery__control--button" (click)="onPlay()">
<fa-icon [icon]="faPlay" *ngIf="!isPlaying"></fa-icon>
<fa-icon [icon]="faPause" *ngIf="isPlaying"></fa-icon>
<div class="galery__play-control" >
<button type="button" class="galery__control--button" (click)="onPlay()" *ngIf="!isPlaying">
<fa-icon [icon]="faPlay"></fa-icon>
</button>
<!-- <button type="button" id="play-pause" class="galery__control--button">
<fa-icon [icon]="faPause"></fa-icon>
</button> -->
</div>
<div class="galery__control">
<button type="button" class="galery__control--button" (click)="onPlay()">
<fa-icon [icon]="faPause" *ngIf="isPlaying"></fa-icon>
</button>
<!-- <input type="range" id="seek-bar" class="video-control__button" value="0"> -->
<button type="button" class="galery__control--button galery__control--expand" (click)="onExpand()">
<fa-icon [icon]="faExpand"></fa-icon>
</button>
</button>
<!-- <input type="range" id="volume-bar" class="video-control__button" min="0" max="1" step="0.1" value="1"> -->
<button type="button" class="galery__control--button galery__control--mute" (click)="onMute()">
<fa-icon [icon]="faVolumeUp" *ngIf="!isMuted"></fa-icon>
<fa-icon [icon]="faVolumeMute" *ngIf="isMuted"></fa-icon>
</button>
</button>
</div>
</div>

View File

@ -90,8 +90,8 @@
&__play-control{
z-index: 2;
position: absolute;
bottom: 0;
left: 5px;
bottom: 5px;
left: 0;
// outline: 1px greenyellow solid;
}
&__control {
@ -111,18 +111,28 @@
font-size: 16px;
padding: 10px 15px;
width: 40px;
height: 40px;
&:hover {
color: #fff;
}
}
&--play{
position: absolute;
left: 0;
}
&--expand {
position: absolute;
right: 0;
}
&--mute {
margin-left: 40px;
position: absolute;
left: 40px;
// margin-left: 40px;
}
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, .6), rgba(0, 0, 0, 1));