Anastasia

src/MediaControl.css

@@ -0,0 +1,8 @@
+.media-control{
+    background-color: #111111;
+    height: 54px;
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+}

src/MediaControl.js

@@ -1,3 +1,22 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './MediaControl.css';
+import PlayButton from './MediaControlComponents/Buttons/PlayButton';
+import ClosedCaptionsButton from './MediaControlComponents/Buttons/ClosedCaptionsButton';
+import ExpandButton from './MediaControlComponents/Buttons/ExpandButton';
+import PauseButton from './MediaControlComponents/Buttons/PauseButton';
+import CollapseButton from './MediaControlComponents/Buttons/CollapseButton';
 
-export default () => <div>Media Control goes here.</div>;
+class MediaControl extends Component{
+
+    render(){
+        return <div className="media-control">
+            <PlayButton />
+            <ClosedCaptionsButton/>
+            <ExpandButton />
+            <PauseButton />
+            <CollapseButton />
+        </div>
+    }
+}
+
+export default MediaControl;

src/MediaControlComponents/Buttons/Button.css

@@ -0,0 +1,15 @@
+.button{
+    height: 20px;
+    margin: 8px;
+    color: white;
+
+}
+
+.button-outer{
+    height: 54px;
+    width: 54px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1C1C1C;
+}

src/MediaControlComponents/Buttons/ClosedCaptionsButton.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import ClosedCaptions from './../../icons/ClosedCaptions';
+
+class ClosedCaptionsButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+            <ClosedCaptions className='button' />
+            </div>
+    }
+}
+
+export default ClosedCaptionsButton;

src/MediaControlComponents/Buttons/CollapseButton.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import Collapse from './../../icons/Collapse';
+
+class CollapseButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+            <Collapse className='button'/>
+        </div>
+    }
+}
+
+export default CollapseButton;

src/MediaControlComponents/Buttons/ExpandButton.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import Expand from './../../icons/Expand';
+
+class ExpandButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+                    <Expand className='button'/>
+                </div>
+    }
+}
+
+export default ExpandButton;

src/MediaControlComponents/Buttons/PauseButton.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import Pause from './../../icons/Pause';
+
+class PauseButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+            <Pause className='button'/>
+        </div>
+    }
+}
+
+export default PauseButton;

src/MediaControlComponents/Buttons/PlayButton.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import PlayIcon from './../../icons/Play';
+
+class PlayButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+                    <PlayIcon className='button'/>
+                </div>
+    }
+}
+
+export default PlayButton;

src/MediaControlComponents/ProgressBar.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class ProgressBar extends Component{
+
+    render(){
+        return <div>ProgressBar</div>
+    }
+}
+
+export default ProgressBar;

src/MediaControlComponents/Timer.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class Timer extends Component{
+
+    render(){
+        return <div>Timer</div>
+    }
+}
+
+export default Timer;

src/MyClass.js

@@ -21,13 +21,9 @@ class MyClass {
   }
 
   refreshData(data) {
-    this.items = [];
-    data.forEach(item => {
-      items.push({
-        id: item.id,
-        name: item.name
-      });
-    });
+    this.items = data.map(item => (
+     {id: item.id, name: item.name}
+    ));
   }
 
   startTimer() {