Playbar volume button, toggle mute

dustin-chan · Dec 12, 2018 · 31512eb · 31512eb
1 parent 195e4ab
commit 31512eb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/app/assets/stylesheets/components/music_player.scss b/app/assets/stylesheets/components/music_player.scss
@@ -138,6 +138,15 @@ progress[value]::-webkit-progress-value {
   color: #1db954;
 }
 
+ #volume {
+  margin: 0 5px 0 20px;
+  transition: color .1s linear;
+}
+ #volume:hover {
+  cursor: pointer;
+  color: #1db954;
+}
+
 .playbar-container {
   height: auto;
   display: flex;

diff --git a/frontend/components/main/playbar/music_player.jsx b/frontend/components/main/playbar/music_player.jsx
@@ -204,6 +204,14 @@ class MusicPlayer extends React.Component {
         </div>
 
         <div className="playbar-right">
+            { this.state.volume > 0 ? (
+              <i id="volume" className="material-icons"
+                onClick={ () => this.toggleMute() }>volume_up</i>
+            ) : (
+              <i id="volume" className="material-icons"
+                onClick={ () => this.toggleMute() }>volume_off</i>
+            )
+            }
           <input id="volume-control" type="range"
            min="0" max="100" step="1"
            defaultValue="100"