From 485f40b992d010ee1bcd40054c21c7e870196e4c Mon Sep 17 00:00:00 2001 From: jnutterdev Date: Sat, 6 Feb 2021 13:16:32 -0500 Subject: [PATCH 1/2] adding in some mute button functions --- src/Components/AudioPlayer.js | 10 ++++++++-- src/Components/AudioPlayerButtons.js | 27 ++++++++++++++------------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/Components/AudioPlayer.js b/src/Components/AudioPlayer.js index d707eea..2a77f08 100644 --- a/src/Components/AudioPlayer.js +++ b/src/Components/AudioPlayer.js @@ -14,6 +14,7 @@ class AudioPlayer extends Component { this.mute = this.mute.bind(this); this.changeVolume = this.changeVolume.bind(this); this.volumeRef = React.createRef(); + this.duration = this.duration.bind(this); } componentDidMount(){ @@ -30,6 +31,11 @@ class AudioPlayer extends Component { this.refs.audio.pause(); } + duration(){ + this.duration = document.getElementById("songInfo").duration; + document.getElementById("songLength").innerHTML = this.duration; + } + play(){ this.refs.audio.play(); this.refs.audio.volume = this.volumeRef.current.value/100; @@ -48,7 +54,7 @@ class AudioPlayer extends Component { this.setState((state)=>({ speakerEntity:'🔇', })); - this.refs.audio.volume=0; + this.refs.audio.volume = 0; } } @@ -74,7 +80,7 @@ class AudioPlayer extends Component { - +
diff --git a/src/Components/AudioPlayerButtons.js b/src/Components/AudioPlayerButtons.js index 0bdc0de..90b64a4 100644 --- a/src/Components/AudioPlayerButtons.js +++ b/src/Components/AudioPlayerButtons.js @@ -24,11 +24,12 @@ class AudioPlayerButtons extends Component {
+
00:00

Artist name - Song name

-
00:00
-
00:00
+ +
{this.duration}
{/* // PROGRESS BAR / NO COMPONENT */} @@ -40,53 +41,53 @@ class AudioPlayerButtons extends Component { {/* // PREVIOUS SONG BUTTON / NO COMPONENT */}
-
+
{/* // REWIND SONG BUTTON / NO COMPONENT */} -
+
{/* // PLAY BUTTON / AUDIOPLAYER > AUDIOPLAYERBUTTONS (this.play) */} -
+
-
+
{/* // FFWD BUTTON / NO COMPONENT */} -
+
{/* // NEXT SONG BUTTON / NO COMPONENT */} -
+
{/* // MUTE BUTTON / AUDIOPLAYER > AUDIOPLAYERBUTTONS (this.mute) */} -
-
- - -
+
+
+
+ +
From ee112abb2779e0547259226d6ef5ff259bc23aba Mon Sep 17 00:00:00 2001 From: jnutterdev Date: Sat, 6 Feb 2021 15:24:11 -0500 Subject: [PATCH 2/2] can't seem to get the mute button to toggle icons --- src/Components/AudioPlayer.js | 36 ++++++++++----------- src/Components/AudioPlayerButtons.js | 44 ++++++++++++++++--------- src/index.js | 48 ++++++++++++++-------------- 3 files changed, 71 insertions(+), 57 deletions(-) diff --git a/src/Components/AudioPlayer.js b/src/Components/AudioPlayer.js index 2a77f08..54da4ba 100644 --- a/src/Components/AudioPlayer.js +++ b/src/Components/AudioPlayer.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {Component, useState} from 'react'; import VolumeSlider from './VolumeSlider'; import AudioPlayerButtons from './AudioPlayerButtons'; @@ -7,14 +7,16 @@ class AudioPlayer extends Component { super(props); this.state = { volumeBeforeMute:.50, - speakerEntity:"🔊" + speakerEntity:"🔊", + } this.pause = this.pause.bind(this); this.play = this.play.bind(this); this.mute = this.mute.bind(this); this.changeVolume = this.changeVolume.bind(this); this.volumeRef = React.createRef(); - this.duration = this.duration.bind(this); + + } componentDidMount(){ @@ -31,43 +33,41 @@ class AudioPlayer extends Component { this.refs.audio.pause(); } - duration(){ - this.duration = document.getElementById("songInfo").duration; - document.getElementById("songLength").innerHTML = this.duration; - } - play(){ this.refs.audio.play(); this.refs.audio.volume = this.volumeRef.current.value/100; } mute(){ - if(this.refs.audio.volume === 0) + + if(this.refs.audio.volume === 0 ) { // To unmute the player - this.refs.audio.volume=this.volumeRef.current.value/100; - this.setState((state)=>({ + this.refs.audio.volume = this.volumeRef.current.value/100; + this.setState((state) => ({ speakerEntity:'🔊' })); } else { // To mute the player - this.setState((state)=>({ + this.setState((state) =>({ speakerEntity:'🔇', })); this.refs.audio.volume = 0; } } + + changeVolume() { this.refs.audio.volume = this.volumeRef.current.value/100; - if(this.refs.audio.volume>0) { - this.setState((state)=>({ - speakerEntity:'🔊', + if(this.refs.audio.volume > 0) { + this.setState((state) => ({ + speakerEntity: '🔊', })); } else { - this.setState((state)=>({ - speakerEntity:'🔇', + this.setState((state) => ({ + speakerEntity: '🔇', })); } } @@ -80,7 +80,7 @@ class AudioPlayer extends Component { - +
diff --git a/src/Components/AudioPlayerButtons.js b/src/Components/AudioPlayerButtons.js index 90b64a4..c562fdd 100644 --- a/src/Components/AudioPlayerButtons.js +++ b/src/Components/AudioPlayerButtons.js @@ -2,27 +2,38 @@ import React, {Component} from 'react'; class AudioPlayerButtons extends Component { - + constructor(props) { + super(props); + this.state = { + isMute: false, + } + this.muteIcon = this.muteIcon.bind(this); + this.muteActions = this.muteActions.bind(this); + } + shouldComponentUpdate(newProps) { if(newProps.entity !== this.props.entity) { - console.log('component has update'); + console.log('component has updated'); return true; } else { console.log('component has not updated.'); return false; } } - + + muteIcon() { + this.setState({ isMute: !this.state.isMute }) + } + + muteActions(){ + // this.state.mute; + this.muteIcon(); + } + render() { return ( <> - {/* */} - - +
00:00
@@ -82,12 +93,15 @@ class AudioPlayerButtons extends Component {
{/* // MUTE BUTTON / AUDIOPLAYER > AUDIOPLAYERBUTTONS (this.mute) */} -
- -
-
- +
+
+ { this.state.isMute + ? + : + }
+
+
diff --git a/src/index.js b/src/index.js index ea8908e..4d806cc 100644 --- a/src/index.js +++ b/src/index.js @@ -12,15 +12,15 @@ class WebPlayer extends Component { constructor(props) { super(props); this.state = { - mp3path:`${process.env.PUBLIC_URL}/songs/`, - mp3name:'Waxwork.mp3', - mp3artist:'Azure Window', - audiopath:'', - mp3autoplay:'autoPlay', - mp3genre:'IDM', - currentButtonId:0, - clickedButtonId:'', - mp3Data:[], + mp3path: `${process.env.PUBLIC_URL}/songs/`, + mp3name: 'Waxwork.mp3', + mp3artist: 'Azure Window', + audiopath: '', + mp3autoplay: 'autoPlay', + mp3genre: 'IDM', + currentButtonId: 0, + clickedButtonId: '', + mp3Data: [], } } @@ -29,18 +29,18 @@ class WebPlayer extends Component { mp3title = mp3title.replace('.mp3',''); this.changeMP3 = this.changeMP3.bind(this); this.setState((state)=>({ - mp3title:mp3title, - audiopath:state.mp3path+state.mp3name, + mp3title: mp3title, + audiopath: state.mp3path+state.mp3name, mp3Data:[ { - name:'Waxwork.mp3', - artist:'Azure Window', - genre:'IDM' + name: 'Waxwork.mp3', + artist: 'Azure Window', + genre: 'IDM' }, { - name:'Grime.mp3', - artist:'Caliper', - genre:'Beats' + name: 'Grime.mp3', + artist: 'Caliper', + genre: 'Beats' } ] })); @@ -51,13 +51,13 @@ class WebPlayer extends Component { var mp3name = name; mp3title = mp3title.replace('.mp3','').replaceAll('_',' ').toUpperCase(); this.setState((state)=>({ - audiopath:state.mp3path+mp3name, - mp3title:mp3title, - mp3artist:artist, - mp3genre:genre, - currentButtonId:currentButtonId, - clickedButtonId:currentButtonId, - mp3name:mp3name + audiopath: state.mp3path+mp3name, + mp3title: mp3title, + mp3artist: artist, + mp3genre: genre, + currentButtonId: currentButtonId, + clickedButtonId: currentButtonId, + mp3name: mp3name })); }