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

wirering button events on video #41

This commit is contained in:
Nicolas Constant 2019-02-27 22:55:07 -05:00
parent 94fbe52d4e
commit 8bc73810ba
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,7 @@
</div>
<div class="galery galery__hover" *ngIf="isVideo">
<!-- <video width="480" height="320" controls="controls"> -->
<video class="galery__video" role="application" loop>
<video #videoPlayer class="galery__video" role="application" loop>
<source src="{{ attachments[0].url }}" type="video/mp4">
</video>
<div class="galery__play-control">

2
src/app/components/stream/status/attachements/attachements.component.scss
View File

@ -125,7 +125,7 @@
margin-left: 40px;
}
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 100));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, .6), rgba(0, 0, 0, 1));
}
&__hover {
&:hover .galery__control {

40
src/app/components/stream/status/attachements/attachements.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, ViewChild, ElementRef } 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";
import { faPlay, faPause, faExpand, faVolumeUp, faVolumeMute } from "@fortawesome/free-solid-svg-icons";
@Component({
selector: 'app-attachements',
@ -33,9 +33,9 @@ export class AttachementsComponent implements OnInit {
if (this._attachments[0].type === 'image') {
this.isImage = true;
} else if(this._attachments[0].type === 'gifv'){
} else if (this._attachments[0].type === 'gifv') {
this.isGifv = true;
} else if(this._attachments[0].type === 'video'){
} else if (this._attachments[0].type === 'video') {
this.isVideo = true;
}
}
@ -43,6 +43,8 @@ export class AttachementsComponent implements OnInit {
return this._attachments;
}
@ViewChild('videoPlayer') videoplayer: ElementRef;
constructor(private readonly navigationService: NavigationService) { }
ngOnInit() {
@ -54,17 +56,35 @@ export class AttachementsComponent implements OnInit {
return false;
}
onPlay(){
console.warn('onPlay()');
private getVideo(): HTMLVideoElement {
return this.videoplayer.nativeElement;
}
onPlay() {
if (!this.isPlaying) {
this.getVideo().play();
} else {
this.getVideo().pause();
}
this.isPlaying = !this.isPlaying;
}
onExpand(){
console.warn('onExpand()');
onExpand() {
if (!this.isMuted) {
this.onMute();
}
if (this.isPlaying) {
this.onPlay();
}
this.attachmentSelected(0);
}
onMute(){
console.warn('onMute()');
onMute() {
this.isMuted = !this.isMuted;
this.getVideo().muted = this.isMuted;
}
}