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 (
{
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 } }) => {
My List
+
+ {isMuted ? (
+ setIsMuted(false)}
+ className='header__container-btnVolume'
+ />
+ ) : (
+ setIsMuted(true)}
+ className='header__container-btnVolume'
+ />
+ )}
{overview}
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 @@
+
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 @@
+
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;