added custom buttons for video #41
This commit is contained in:
Nicolas Constant
parent
9fc2aecd0a
commit
94fbe52d4e
|
|
@ -24,7 +24,7 @@
|
|||
</a>
|
||||
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
|
||||
title="{{ attachments[2].description }}" (click)="attachmentSelected(2)">
|
||||
<img src="{{ attachments[2].urpreview_urll }}" />
|
||||
<img src="{{ attachments[2].preview_url }}" />
|
||||
</a>
|
||||
|
||||
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
|
||||
|
|
@ -48,6 +48,32 @@
|
|||
<div class="galery" *ngIf="isGifv">
|
||||
<!-- <video width="480" height="320" controls="controls"> -->
|
||||
<video class="galery__gifv" role="application" loop autoplay (click)="attachmentSelected(0)">
|
||||
<source src="{{ attachments[0].url }}" type="video/mp4">
|
||||
<source src="{{ attachments[0].url }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="galery galery__hover" *ngIf="isVideo">
|
||||
<!-- <video width="480" height="320" controls="controls"> -->
|
||||
<video 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>
|
||||
</button>
|
||||
<!-- <button type="button" id="play-pause" class="galery__control--button">
|
||||
<fa-icon [icon]="faPause"></fa-icon>
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="galery__control">
|
||||
<!-- <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>
|
||||
<!-- <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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,15 +1,18 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
.galery {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
position : relative;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&--link {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
&--1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -38,7 +41,6 @@
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
|
||||
}
|
||||
}
|
||||
&--link-3-2 {
|
||||
|
|
@ -71,11 +73,64 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__gifv{
|
||||
&__gifv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: zoom-in;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&__video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background-color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&__play-control{
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 5px;
|
||||
// outline: 1px greenyellow solid;
|
||||
}
|
||||
&__control {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
transition: all .2s;
|
||||
height: 100px;
|
||||
padding-top: 55px;
|
||||
|
||||
&--button {
|
||||
@include clearButton;
|
||||
color: rgb(211, 211, 211);
|
||||
font-size: 16px;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--expand {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&--mute {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 100));
|
||||
}
|
||||
&__hover {
|
||||
&:hover .galery__control {
|
||||
opacity: 100;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
|
|||
import { Attachment } from '../../../../services/models/mastodon.interfaces';
|
||||
import { NavigationService } from '../../../../services/navigation.service';
|
||||
import { OpenMediaEvent } from '../../../../models/common.model';
|
||||
import { faPlay, faPause, faExpand, faVolumeUp, faVolumeMute} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@Component({
|
||||
selector: 'app-attachements',
|
||||
|
|
@ -13,7 +14,18 @@ export class AttachementsComponent implements OnInit {
|
|||
private _attachments: Attachment[];
|
||||
isImage: boolean;
|
||||
isGifv: boolean;
|
||||
imageUrls: string[];
|
||||
isVideo: boolean;
|
||||
|
||||
faPlay = faPlay;
|
||||
faPause = faPause;
|
||||
faExpand = faExpand;
|
||||
faVolumeUp = faVolumeUp;
|
||||
faVolumeMute = faVolumeMute;
|
||||
|
||||
isPlaying: boolean = false;
|
||||
isMuted: boolean = false;
|
||||
|
||||
// imageUrls: string[];
|
||||
|
||||
@Input('attachments')
|
||||
set attachments(value: Attachment[]) {
|
||||
|
|
@ -22,8 +34,9 @@ export class AttachementsComponent implements OnInit {
|
|||
if (this._attachments[0].type === 'image') {
|
||||
this.isImage = true;
|
||||
} else if(this._attachments[0].type === 'gifv'){
|
||||
console.warn(value);
|
||||
this.isGifv = true;
|
||||
} else if(this._attachments[0].type === 'video'){
|
||||
this.isVideo = true;
|
||||
}
|
||||
}
|
||||
get attachments(): Attachment[] {
|
||||
|
|
@ -41,4 +54,17 @@ export class AttachementsComponent implements OnInit {
|
|||
return false;
|
||||
}
|
||||
|
||||
onPlay(){
|
||||
console.warn('onPlay()');
|
||||
this.isPlaying = !this.isPlaying;
|
||||
}
|
||||
|
||||
onExpand(){
|
||||
console.warn('onExpand()');
|
||||
}
|
||||
|
||||
onMute(){
|
||||
console.warn('onMute()');
|
||||
this.isMuted = !this.isMuted;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue