Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/stream/status/attachements/attachements.component.html
View File

@ -56,16 +56,18 @@
<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>

16
src/app/components/stream/status/attachements/attachements.component.scss
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));