From 8bc73810baa0bbf8cc0eda2e9807ee18da6260cb Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Wed, 27 Feb 2019 22:55:07 -0500
Subject: [PATCH] wirering button events on video #41

---
 .../attachements/attachements.component.html  |  2 +-
 .../attachements/attachements.component.scss  |  2 +-
 .../attachements/attachements.component.ts    | 40 ++++++++++++++-----
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/app/components/stream/status/attachements/attachements.component.html b/src/app/components/stream/status/attachements/attachements.component.html
index 294ab6a0..c7927631 100644
--- a/src/app/components/stream/status/attachements/attachements.component.html
+++ b/src/app/components/stream/status/attachements/attachements.component.html
@@ -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">
diff --git a/src/app/components/stream/status/attachements/attachements.component.scss b/src/app/components/stream/status/attachements/attachements.component.scss
index 3ff875f9..4e455105 100644
--- a/src/app/components/stream/status/attachements/attachements.component.scss
+++ b/src/app/components/stream/status/attachements/attachements.component.scss
@@ -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 {
diff --git a/src/app/components/stream/status/attachements/attachements.component.ts b/src/app/components/stream/status/attachements/attachements.component.ts
index 4958f5f8..182123e5 100644
--- a/src/app/components/stream/status/attachements/attachements.component.ts
+++ b/src/app/components/stream/status/attachements/attachements.component.ts
@@ -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;
     }
 }