Tracking Development with Git now

src/components/Footer/Mute.js

@@ -0,0 +1,16 @@
+import React from 'react';
+// import '@fortawesome/fontawesome-free/css/all.css';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faVolumeUp } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faVolumeUp)
+
+export default class Mute extends React.Component {
+    render() {
+        return (
+            // <i className= 'fa fa-volume-up' id='muteIcon'></i>
+            <FontAwesomeIcon icon="faVolumeUp" id='muteIcon' />
+        );
+    }
+}

src/components/Footer/PlayPause.js

@@ -0,0 +1,52 @@
+import React from "react";
+import Emitter from "../../melodii/Events";
+import MusicPlayer from "../../melodii/MusicPlayer";
+// import "@fortawesome/fontawesome-free/css/all.css";
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
+
+
+library.add(faPause);
+library.add(faPlay);
+
+const mp = new MusicPlayer();
+export default class PlayPause extends React.Component {
+
+    /** @listens */
+    constructor(props) {
+        super(props);
+
+        Emitter.on("toggle", bool => this.handleEvent(bool));
+
+        this.state = { icon: "pause" };
+    }
+
+    handleClick() {
+        //Updates Icon and controls the Audio came from clicking on button
+        if (this.state.icon === "pause") {
+            //set to play
+            mp.pause();
+            this.setState({ icon: "play" });
+        } else {
+            //set to pause
+            mp.play();
+            this.setState({ icon: "pause" });
+        }
+    }
+
+    /**
+     * Updates Icon From Event
+     * @param {Boolean} bool 
+     */
+    handleEvent(bool) {
+        if (!bool) this.setState({ icon: "play" });
+        else this.setState({ icon: "pause" });
+    }
+    render() {
+        return ( 
+            <FontAwesomeIcon icon={this.state.icon} id="playPause" onClick={this.handleClick.bind(this)} />
+        );
+    }
+}

src/components/Footer/SongInfo.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class SongInfo extends React.Component {
+    render() {
+        return (
+        <span>{this.props.title} - {this.props.artist} | {this.props.album}</span>
+        );
+    }
+}

src/components/Footer/Volume.js

@@ -0,0 +1,48 @@
+import React from "react";
+import MusicPlayer from "../../melodii/MusicPlayer";
+
+const Settings = window.require("electron-settings");
+const mp = new MusicPlayer();
+
+export default class Volume extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            input: Settings.get("Volume") || 50,
+            max: 50
+        };
+    }
+    render() {
+        return (
+            <input
+                style={{
+                    backgroundSize:
+                        (this.state.input * 100) / this.state.max + "% 100%"
+                }}
+                value={this.state.input}
+                id="volBar"
+                type="range"
+                max={this.state.max}
+                onChange={this.setVolume.bind(this)}
+                onMouseUp={this.setLastVolume.bind(this)}
+            />
+        );
+    }
+    /**
+     * Sets Volume
+     * @param {Event} e 
+     */
+    setVolume(e) {
+        this.setState({
+            input: e.target.value
+        });
+        mp.setVolume(e.target.value / 50);
+    }
+    /**
+     * Saves the Previous Volume
+     * @param {Event} e 
+     */
+    setLastVolume(e) {
+        Settings.set("Volume", e.target.value);
+    }
+}