Add files via upload

src/Components/Display.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Navbar from './Navbar';
+import Menu from './Menu';
+import Music from './Music';
+import Songs from './Songs';
+import Settings from './Settings';
+import Playing from './Playing';
+import "../Css/Display.css"
+import Themes from './Themes';
+import WheelColor from './WheelColor';
+import MainScreen from './MainScreen';
+import Wallpaper from './Wallpaper.js';
+
+// On the basis of what the current menu is this item will render only that component 
+class Display extends React.Component {
+    render() {
+        const { active, currentMenu, menuItems, musicItems,songItems, playing, songIndex, audio, songUrl ,songImgUrl,wallpaper,wallpaperItems, noty, setNoty,notifyText} = this.props;
+
+        return (
+            <div style={{backgroundImage:`url(${wallpaperItems[wallpaper]})`}} className="display">
+                <Navbar noty={noty} setNoty={setNoty} playing={playing} notifyText ={notifyText} />
+                {currentMenu===-2&&<MainScreen/>}
+                {currentMenu === -1 && <Menu songImgUrl={songImgUrl} menuItems={menuItems} active={active} />}
+                {currentMenu === 1 && <Music musicItems={musicItems} active={active} />}
+                {currentMenu === 2 && <div className="blank-div"><h1 className="empty-text">Games</h1></div>}
+                {currentMenu === 3 && <Settings active={active}/>}
+                {currentMenu === 4 && <Songs songItems={songItems} active={active} />}
+                {currentMenu === 5 && <div className="blank-div"><h1 className="empty-text">Artists</h1></div>}
+                {currentMenu === 6 && <div className="blank-div"><h1 className="empty-text">Albums</h1></div>}
+                {(currentMenu === 0 ||currentMenu===7) && <Playing songImgUrl={songImgUrl} audio={audio} songUrl={songUrl} playing={playing} songIndex={songIndex} songItems={songItems} />}
+                {currentMenu===8&&<Themes active={active}/>}
+                {currentMenu===9&&<WheelColor active={active}/>}
+                {currentMenu===10&&<Wallpaper active={active}/>}
+            </div>
+        )
+    }
+}
+
+
+export default Display;

src/Components/Frame.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import "../Css/Frame.css"
+import Wheel from './Wheel.js'
+import Display from './Display.js'
+import $ from 'jquery';
+
+class Frame extends React.Component{
+    rotatePod=()=>
+    {
+        /* screen rotation feature */
+        $('.App').toggleClass('rotate-anti-clockwise');
+        $('.wheel-container').toggleClass('rotate-clockwise');
+        $('.display').toggleClass('rotate-clockwise');
+        $('.frame').toggleClass('rframe');
+        $('.speaker').toggleClass('rspeaker');
+    }
+    render(){
+        const {active,updateActiveMenu, currentMenu, changeMenuBackward,changeMenuForward, menuItems, musicItems,togglePlayPause, songItems,playing, songIndex,theme, audio, songUrl, songImgUrl, seekSongForward, seekSongReverse, wheelColor ,wallpaper, wallpaperItems, noty, setNoty, notifyText} = this.props;
+        // const theme="blue";
+        return(
+            <div className="case-container">
+                <div style={{backgroundColor:theme}} className="frame" id={!playing? " ":"color-frame"}>
+                    <div className='speaker'></div>
+                    <Display songIndex={songIndex} playing={playing} active={active} musicItems={musicItems} menuItems={menuItems} currentMenu={currentMenu} songItems={songItems} audio={audio} songUrl={songUrl} songImgUrl={songImgUrl} wallpaper={wallpaper} wallpaperItems={wallpaperItems} noty={noty} setNoty={setNoty} notifyText ={notifyText}/>
+                    <Wheel playing={playing} theme={theme} active={active}  menuItems={menuItems} currentMenu={currentMenu} changeMenuForward={changeMenuForward} changeMenuBackward={changeMenuBackward} updateActiveMenu={updateActiveMenu} togglePlayPause={togglePlayPause} seekSongForward={seekSongForward} seekSongReverse={seekSongReverse} wheelColor={wheelColor}/>
+                    <button className="rotate" onClick={this.rotatePod}>
+                    <i className="fa fa-undo"></i>
+                </button>
+                </div>
+            </div>  
+        )  
+    }
+}
+
+export default Frame

src/Components/MainScreen.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import "../Css/MainScreen.css";
+// Renderse lockscreen
+class MainScreen extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            time: this.getCurrentTime(),
+        }
+        this.stateId = "";
+    }
+
+    // if there is no notification then iPod logo, time and battery iconv
+    componentDidMount() {
+        const { noty} = this.props;
+        if (noty === true) {
+            return;
+        }
+        this.stateId = setInterval(() => {
+            this.setState({ time: this.getCurrentTime() });
+        }, 60000);
+    }
+
+    componentDidUpdate(){
+        const {setNoty, noty } = this.props;
+        if(noty===true){
+            setTimeout(function () {
+                setNoty();
+            },1000)
+        }
+    }
+
+    // Clear the update time interval
+    componentWillUnmount() {
+        const { noty } = this.props;
+        if (noty !== true)
+            clearInterval(this.stateId);
+    }
+
+    // fir getting current time in string
+    getCurrentTime() {
+        const today = new Date();
+        var time = today.getHours() + ":" + today.getMinutes();
+        if (today.getMinutes() < 10) {
+            time = today.getHours() + ":0" + today.getMinutes();
+        }
+        return time;
+    }
+    // Render playing screen
+    render() {  
+
+        const { time } = this.state; 
+        return (
+            <div>
+                <div className="lock-display">
+                <div className="upper-div-lock">
+                    <h3>Mini iPod!</h3>
+                </div>
+                    <i className="fa fa-lock" aria-hidden="true"></i>
+
+                 <h3 className="lockscreen-time">{time}</h3>
+                </div>
+                <div className="bottom-div-lock">
+                    <h3>Power Button to unlock!</h3>
+                </div>
+            </div>
+        )
+    }
+
+}
+
+
+export default MainScreen;

src/Components/Menu.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import "../Css/Menu.css"
+import game from "../Wallet/Gifs/game.gif"
+import music from "../Wallet/Gifs/songs.gif"
+import settings from "../Wallet/Gifs/setting.gif"
+
+// Renders main menu
+class Menu extends React.Component {
+    render() {
+        const { active,menuItems, songImgUrl} = this.props;
+        return (
+
+            <div className="menu-container">
+                <div className="menu">
+                    <ul>
+                        {menuItems.map((element, index)=>{
+                            return active===index?<li key={index} className="active">&nbsp;&raquo;&nbsp;{element}</li>:<li key={index}>&nbsp;{element}</li>
+                        })}
+                    </ul>
+                </div>
+                <div className="leaf">
+                    {active === 0 && <img className="leaf-img" src={songImgUrl} alt=""></img>}
+                    {active === 1 && <img className="leaf-img" src={music} alt=""></img>}
+                    {active === 2 && <img className="leaf-img" src={game} alt=""></img>}
+                    {active === 3 && <img className="leaf-img" src={settings} alt=""></img>}
+                </div>
+            </div>
+        )
+    }
+}
+
+
+export default Menu;

src/Components/Music.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import "../Css/Music.css"
+
+// Renders music menu
+class Music extends React.Component {
+    render() {
+        const {musicItems,active} = this.props;
+        return (
+            <div className="music">
+                <h2>Music</h2>
+                <ul>
+                {musicItems.map((element, index)=>{
+                            return active===index?<li key={index} className="active">&nbsp;&raquo;&nbsp;{element}</li>:<li key={index}>&nbsp;{element}</li>
+                        })}
+                </ul>
+            </div>
+
+        )
+    }
+
+}
+
+
+export default Music;

src/Components/Navbar.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import "../Css/Navbar.css"
+import BatImg from "../Wallet/Icons/battery.png" ;  
+
+// Renders navbar
+class Navbar extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            time: this.getCurrentTime(),
+        }
+        this.stateId = "";
+    }
+
+    // if there is no notification then iPod logo, time and battery icon 
+    componentDidMount() {
+        const { noty} = this.props;
+        if (noty === true) {
+            return;
+        }
+        // set an interval of 60 seconds to update time
+        this.stateId = setInterval(() => {
+            this.setState({ time: this.getCurrentTime() });
+        }, 60000);
+    }
+
+    componentDidUpdate(){
+        const {setNoty, noty } = this.props;
+        if(noty===true){
+            setTimeout(function () {
+                setNoty();
+            },1000)
+        }
+    }
+
+    // Clear the update time interval
+    componentWillUnmount() {
+        const { noty } = this.props;
+        if (noty !== true)
+            clearInterval(this.stateId);
+    }
+
+    // fir getting current time in string
+    getCurrentTime() {
+        const today = new Date();
+        var time = today.getHours() + ":" + today.getMinutes();
+        if (today.getMinutes() < 10) {
+            time = today.getHours() + ":0" + today.getMinutes();
+        }
+        return time;
+    }
+
+    // Render navbar to show either ipod logo, time or Notification
+    render() {
+        const { time } = this.state;
+        const { playing, noty , notifyText} = this.props;
+        return (
+            <div className="bar">
+                { <h5 className="heading">M-iPod <i className="fa fa-wifi"></i></h5>}
+                {noty === true && <h5 className="notification">{notifyText}</h5>}
+                {noty === false && <h3 className="time">{time}</h3>}
+                {<div className="right-container-nav">
+                    {playing ? <h5 className="play-pause-nav"><i className="fa fa-pause">{playing}</i></h5> : <h5 className="play-pause-nav"><i className="fa fa-play"></i> </h5>}
+                    <img className="battery" src={BatImg} alt="Battery" />
+                </div>}
+            </div>
+        )
+    }
+}
+
+
+export default Navbar;

src/Components/Playing.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import "../Css/Playing.css"
+
+class Playing extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentTime: 0,
+        }
+        this.intervalId = "";
+
+
+    }
+
+    // logic for updating the current music playbak
+    componentDidMount() {
+        const { audio } = this.props;
+        this.setState({ currentTime: audio.currentTime });
+        this.intervalId = setInterval(() => {
+            this.setState({ currentTime: this.props.audio.currentTime });
+        }, 100);
+    }
+
+    // Clear interval for that same thing
+    componentWillUnmount() {
+        clearInterval(this.intervalId);
+    }
+
+    // Render playing screen
+    render() {
+        const { songItems, playing, songIndex, audio, songImgUrl } = this.props;
+        var currentTimeRender = Math.floor(this.state.currentTime / 60) + ":" + Math.floor(this.state.currentTime % 60);
+        var durationRender = Math.floor(audio.duration / 60) + ":" + Math.floor(audio.duration % 60);
+        const percentageComplete = { width: (this.state.currentTime / audio.duration * 100) + "%" };
+        if(durationRender==="NaN:NaN"){
+            durationRender="0:00";
+        }
+        if(Math.floor(this.state.currentTime%60<10)){
+            currentTimeRender = Math.floor(this.state.currentTime / 60) + ":0" + Math.floor(this.state.currentTime % 60);
+        }
+        return (
+            <div className="now-playing-container">
+                <div className="song-details">
+                    <img src={songImgUrl} alt="songImg"></img>
+                    <div>
+                        <h1>{songItems[songIndex]}</h1>
+                        {playing && <h5 className="play-pause-nav">Playing</h5>}
+                        {!playing && <h5 className="play-pause-nav">Paused</h5>}
+                    </div>
+                </div>
+                <div className="status">
+                    {currentTimeRender}
+                    <div id="progress">
+                        <div style={percentageComplete} id="progress-bar"></div>
+                    </div>
+                    {durationRender}
+                </div>
+            </div>
+        )
+    }
+}
+
+
+export default Playing;

src/Components/Settings.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import "../Css/Settings.css"
+
+ // Renders settings
+class Settings extends React.Component {
+    render() {
+        const {active} = this.props;
+        return (
+            <div className="settings">
+                <h2>Settings</h2>
+                <ul>
+                    {active===0?<li className="active">&nbsp;&raquo;&nbsp;Themes</li>:<li>Themes</li>}
+                    {active===1?<li className="active">&nbsp;&raquo;&nbsp;Wheel Color</li>:<li>Wheel Color</li>}
+                    {active===2?<li className="active">&nbsp;&raquo;&nbsp;Wallpaper</li>:<li>Wallpaper</li>}
+                </ul>
+            </div>
+
+        )
+    }
+
+}
+
+
+export default Settings;