From 4ba996f86533699c9e6674061008cddb9d1182be Mon Sep 17 00:00:00 2001
From: andres alcocer <andresalcocer7@yahoo.com>
Date: Sat, 9 Oct 2021 15:14:12 -0400
Subject: [PATCH] implemented mute functionality

---
 src/components/Header.js            | 22 ++++++++++++++++++++--
 src/static/images/mute.svg          |  3 +++
 src/static/images/unmute.svg        |  3 +++
 src/static/sass/layout/_header.scss | 23 +++++++++++++++++++++++
 4 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/static/images/mute.svg
 create mode 100644 src/static/images/unmute.svg

diff --git a/src/components/Header.js b/src/components/Header.js
index fd1120d..8b16a09 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,10 +1,14 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import PlayLogo from '../static/images/play-button.svg'
 import AddLogo from '../static/images/add.svg'
+import MuteIcon from '../static/images/mute.svg'
+import UnmuteIcon from '../static/images/unmute.svg'
 import ReactPlayer from 'react-player'
 
-const Header = ({ movie: { backdrop_path, name, overview } }) => {
+const Header = ({ movie: { name, overview } }) => {
+  const [isMuted, setIsMuted] = useState(false)
+
   return (
     <header className='header'>
       <ReactPlayer
@@ -12,6 +16,8 @@ const Header = ({ movie: { backdrop_path, name, overview } }) => {
         loop={true}
         width='100%'
         height='100%'
+        volume={1}
+        muted={isMuted}
         className='header__video'
         url='https://vimeo.com/384025132'
       />
@@ -27,6 +33,18 @@ const Header = ({ movie: { backdrop_path, name, overview } }) => {
         <AddLogo className='header__container-btnMyList-add' />
         My List
       </button>
+
+      {isMuted ? (
+        <MuteIcon
+          onClick={() => setIsMuted(false)}
+          className='header__container-btnVolume'
+        />
+      ) : (
+        <UnmuteIcon
+          onClick={() => setIsMuted(true)}
+          className='header__container-btnVolume'
+        />
+      )}
       <p className='header__container-overview'>{overview}</p>
       <div className='header__container--fadeBottom'></div>
     </header>
diff --git a/src/static/images/mute.svg b/src/static/images/mute.svg
new file mode 100644
index 0000000..bf3f4d1
--- /dev/null
+++ b/src/static/images/mute.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="#000" stroke-width="2" d="M1,8 L1,16 L6.09901951,16 L12,21 L12,3 L6,8 L1,8 Z M15,9 L21,15 M21,9 L15,15"/>
+</svg>
diff --git a/src/static/images/unmute.svg b/src/static/images/unmute.svg
new file mode 100644
index 0000000..f0d0260
--- /dev/null
+++ b/src/static/images/unmute.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="#000" stroke-width="2" d="M15,16 C17.209,16 19,14.209 19,12 C19,9.791 17.209,8 15,8 M15,20 C20,20 23,16.411 23,12 C23,7.589 19.411,4 15,4 M1,12 L1,8 L6,8 L12,3 L12,21 L6,16 L1,16 L1,12"/>
+</svg>
diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss
index 824d732..5376eac 100644
--- a/src/static/sass/layout/_header.scss
+++ b/src/static/sass/layout/_header.scss
@@ -85,6 +85,29 @@
       }
     }
 
+    &-btnVolume {
+      position: absolute;
+      height: 3rem;
+      width: 3rem;
+      top: 45rem;
+      right: 14rem;
+      cursor: pointer;
+      border-radius: 50%;
+      padding: 1rem;
+      border: #fff solid 1px;
+      transition: all 0.3s;
+
+      & > * {
+        stroke: #fff;
+        stroke-width: 1;
+      }
+
+      &:hover {
+        background-color: rgba(211, 211, 211, 0.178);
+        transition: all 0.3s;
+      }
+    }
+
     &-overview {
       top: 28rem;
       left: 4rem;