From 385cd68e85b896f3540f678138626dfe46f8d28a Mon Sep 17 00:00:00 2001
From: Anastasia Brade <anastasia.brade@googlemail.com>
Date: Fri, 15 Jun 2018 10:32:48 +1200
Subject: [PATCH 1/3] media control component styled

---
 src/MediaControl.css |  5 +++++
 src/MediaControl.js  | 12 ++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 src/MediaControl.css

diff --git a/src/MediaControl.css b/src/MediaControl.css
new file mode 100644
index 0000000..cd8225e
--- /dev/null
+++ b/src/MediaControl.css
@@ -0,0 +1,5 @@
+.media-control{
+    background-color: #111111;
+    height: 54px;
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/MediaControl.js b/src/MediaControl.js
index b081df4..e78b495 100644
--- a/src/MediaControl.js
+++ b/src/MediaControl.js
@@ -1,3 +1,11 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './MediaControl.css';
 
-export default () => <div>Media Control goes here.</div>;
+class MediaControl extends Component{
+
+    render(){
+        return <div className="media-control">MediaControl here!!!!</div>
+    }
+}
+
+export default MediaControl;

From 0bf38c06540876135bbb7e20aa672d8189d44f23 Mon Sep 17 00:00:00 2001
From: Anastasia Brade <anastasia.brade@googlemail.com>
Date: Fri, 15 Jun 2018 10:45:19 +1200
Subject: [PATCH 2/3] Component skelletons created

---
 .../Buttons/ClosedCaptionsButton.js                    | 10 ++++++++++
 src/MediaControlComponents/Buttons/CollapseButton.js   | 10 ++++++++++
 src/MediaControlComponents/Buttons/ExpandButton.js     | 10 ++++++++++
 src/MediaControlComponents/Buttons/PauseButton.js      | 10 ++++++++++
 src/MediaControlComponents/Buttons/PlayButton.js       | 10 ++++++++++
 src/MediaControlComponents/ProgressBar.js              | 10 ++++++++++
 src/MediaControlComponents/Timer.js                    | 10 ++++++++++
 7 files changed, 70 insertions(+)
 create mode 100644 src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
 create mode 100644 src/MediaControlComponents/Buttons/CollapseButton.js
 create mode 100644 src/MediaControlComponents/Buttons/ExpandButton.js
 create mode 100644 src/MediaControlComponents/Buttons/PauseButton.js
 create mode 100644 src/MediaControlComponents/Buttons/PlayButton.js
 create mode 100644 src/MediaControlComponents/ProgressBar.js
 create mode 100644 src/MediaControlComponents/Timer.js

diff --git a/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js b/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
new file mode 100644
index 0000000..f9a7f50
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class ClosedCaptionsButton extends Component{
+
+    render(){
+        return <div>ClosedCaptionsButton</div>
+    }
+}
+
+export default ClosedCaptionsButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/CollapseButton.js b/src/MediaControlComponents/Buttons/CollapseButton.js
new file mode 100644
index 0000000..f4addab
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/CollapseButton.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class CollapseButton extends Component{
+
+    render(){
+        return <div>CollapseButton</div>
+    }
+}
+
+export default CollapseButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/ExpandButton.js b/src/MediaControlComponents/Buttons/ExpandButton.js
new file mode 100644
index 0000000..1518b09
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/ExpandButton.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class ExpandButton extends Component{
+
+    render(){
+        return <div>ExpandButton</div>
+    }
+}
+
+export default ExpandButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/PauseButton.js b/src/MediaControlComponents/Buttons/PauseButton.js
new file mode 100644
index 0000000..0b451b2
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/PauseButton.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class PauseButton extends Component{
+
+    render(){
+        return <div>PauseButton</div>
+    }
+}
+
+export default PauseButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/PlayButton.js b/src/MediaControlComponents/Buttons/PlayButton.js
new file mode 100644
index 0000000..888bfa8
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/PlayButton.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class PlayButton extends Component{
+
+    render(){
+        return <div>PlayButton</div>
+    }
+}
+
+export default PlayButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/ProgressBar.js b/src/MediaControlComponents/ProgressBar.js
new file mode 100644
index 0000000..0073ae4
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Timer.js b/src/MediaControlComponents/Timer.js
new file mode 100644
index 0000000..393cabd
--- /dev/null
+++ b/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;
\ No newline at end of file

From 76aee6112d5fc8335f5b96e29f94d7ada31406ff Mon Sep 17 00:00:00 2001
From: Anastasia Brade <anastasia.brade@googlemail.com>
Date: Fri, 15 Jun 2018 13:03:25 +1200
Subject: [PATCH 3/3] worked on buttons - final commit

---
 src/MediaControl.css                              |  3 +++
 src/MediaControl.js                               | 13 ++++++++++++-
 src/MediaControlComponents/Buttons/Button.css     | 15 +++++++++++++++
 .../Buttons/ClosedCaptionsButton.js               |  6 +++++-
 .../Buttons/CollapseButton.js                     |  6 +++++-
 .../Buttons/ExpandButton.js                       |  6 +++++-
 src/MediaControlComponents/Buttons/PauseButton.js |  6 +++++-
 src/MediaControlComponents/Buttons/PlayButton.js  |  6 +++++-
 src/MyClass.js                                    | 10 +++-------
 9 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 src/MediaControlComponents/Buttons/Button.css

diff --git a/src/MediaControl.css b/src/MediaControl.css
index cd8225e..a823172 100644
--- a/src/MediaControl.css
+++ b/src/MediaControl.css
@@ -2,4 +2,7 @@
     background-color: #111111;
     height: 54px;
     border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
 }
\ No newline at end of file
diff --git a/src/MediaControl.js b/src/MediaControl.js
index e78b495..dab660c 100644
--- a/src/MediaControl.js
+++ b/src/MediaControl.js
@@ -1,10 +1,21 @@
 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';
 
 class MediaControl extends Component{
 
     render(){
-        return <div className="media-control">MediaControl here!!!!</div>
+        return <div className="media-control">
+            <PlayButton />
+            <ClosedCaptionsButton/>
+            <ExpandButton />
+            <PauseButton />
+            <CollapseButton />
+        </div>
     }
 }
 
diff --git a/src/MediaControlComponents/Buttons/Button.css b/src/MediaControlComponents/Buttons/Button.css
new file mode 100644
index 0000000..efcf6e6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js b/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
index f9a7f50..26eaf9c 100644
--- a/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
+++ b/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
+import './Button.css';
+import ClosedCaptions from './../../icons/ClosedCaptions';
 
 class ClosedCaptionsButton extends Component{
 
     render(){
-        return <div>ClosedCaptionsButton</div>
+        return <div className='button-outer'>
+            <ClosedCaptions className='button' />
+            </div>
     }
 }
 
diff --git a/src/MediaControlComponents/Buttons/CollapseButton.js b/src/MediaControlComponents/Buttons/CollapseButton.js
index f4addab..a22905d 100644
--- a/src/MediaControlComponents/Buttons/CollapseButton.js
+++ b/src/MediaControlComponents/Buttons/CollapseButton.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
+import './Button.css';
+import Collapse from './../../icons/Collapse';
 
 class CollapseButton extends Component{
 
     render(){
-        return <div>CollapseButton</div>
+        return <div className='button-outer'>
+            <Collapse className='button'/>
+        </div>
     }
 }
 
diff --git a/src/MediaControlComponents/Buttons/ExpandButton.js b/src/MediaControlComponents/Buttons/ExpandButton.js
index 1518b09..d99de4d 100644
--- a/src/MediaControlComponents/Buttons/ExpandButton.js
+++ b/src/MediaControlComponents/Buttons/ExpandButton.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
+import './Button.css';
+import Expand from './../../icons/Expand';
 
 class ExpandButton extends Component{
 
     render(){
-        return <div>ExpandButton</div>
+        return <div className='button-outer'>
+                    <Expand className='button'/>
+                </div>
     }
 }
 
diff --git a/src/MediaControlComponents/Buttons/PauseButton.js b/src/MediaControlComponents/Buttons/PauseButton.js
index 0b451b2..98258d2 100644
--- a/src/MediaControlComponents/Buttons/PauseButton.js
+++ b/src/MediaControlComponents/Buttons/PauseButton.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
+import './Button.css';
+import Pause from './../../icons/Pause';
 
 class PauseButton extends Component{
 
     render(){
-        return <div>PauseButton</div>
+        return <div className='button-outer'>
+            <Pause className='button'/>
+        </div>
     }
 }
 
diff --git a/src/MediaControlComponents/Buttons/PlayButton.js b/src/MediaControlComponents/Buttons/PlayButton.js
index 888bfa8..46f6374 100644
--- a/src/MediaControlComponents/Buttons/PlayButton.js
+++ b/src/MediaControlComponents/Buttons/PlayButton.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
+import './Button.css';
+import PlayIcon from './../../icons/Play';
 
 class PlayButton extends Component{
 
     render(){
-        return <div>PlayButton</div>
+        return <div className='button-outer'>
+                    <PlayIcon className='button'/>
+                </div>
     }
 }
 
diff --git a/src/MyClass.js b/src/MyClass.js
index 18f308a..bcbda46 100644
--- a/src/MyClass.js
+++ b/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() {