--- a/cms/app-client/app/components/player-component.js	Thu Aug 04 17:59:38 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Fri Aug 05 14:55:45 2016 +0200
@@ -101,6 +101,10 @@
 
         setTime: function(event) {
             this.get('popcorn').currentTime(event.layerX * this.get('popcorn').duration() / Ember.$(event.target).width());
+        },
+
+        display: function(el) {
+            this.get('player').display(el);
         }
 
     }

--- a/cms/app-client/app/components/playlist-component.js	Thu Aug 04 17:59:38 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Fri Aug 05 14:55:45 2016 +0200
@@ -64,11 +64,7 @@
 
         displayNotice: function(id) {
             if(this.get('player').get('item') === id) {
-                if(this.get('player').get('window') !== 'notice') {
-                    this.get('player').set('window', 'notice');
-                } else {
-                    this.get('player').set('window', '');
-                }
+                this.get('player').display('notice');
             } else {
                 if(this.get('notice') !== id) {
                     this.set('notice', id);

--- a/cms/app-client/app/components/toolbar-component.js	Thu Aug 04 17:59:38 2016 +0200
+++ b/cms/app-client/app/components/toolbar-component.js	Fri Aug 05 14:55:45 2016 +0200
@@ -11,10 +11,8 @@
 		display: function(element) {
 			if(element === 'video') {
 				this.get('player').set('reduce', !this.get('player').get('reduce'));
-			} else if(this.get('player').get('window') !== element) {
-				this.get('player').set('window', element);
 			} else {
-				this.get('player').set('window', '');
+				this.get('player').display(element);
 			}
 		}
 

--- a/cms/app-client/app/services/player.js	Thu Aug 04 17:59:38 2016 +0200
+++ b/cms/app-client/app/services/player.js	Fri Aug 05 14:55:45 2016 +0200
@@ -11,6 +11,14 @@
     progress: 0, // In Milliseconds
     reduce: false,
 
+    display: function(el) {
+         if(this.get('window') !== el) {
+            this.set('window', el);
+        } else {
+            this.set('window', '');
+        }
+    },
+
     init: function() {
         this.on('reset', Ember.run.bind(this, this.get('reset')));
     },

--- a/cms/app-client/app/styles/components/player-component.scss	Thu Aug 04 17:59:38 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Fri Aug 05 14:55:45 2016 +0200
@@ -90,7 +90,7 @@
 }
 
 .player-component #audio .progress .bar {
-    width: 302px;
+    width: 226px;
     height: 3px;
     background-color: $light-white;
     margin: -1px 60px 0 60px;
@@ -120,7 +120,7 @@
 }
 
 .player-component #audio .meta p:first-child {
-    margin-left: 0px;
+    margin-left: 59px;
 }
 
 .player-component #audio .meta p > * {
@@ -165,4 +165,21 @@
     width: 100%;
     display: block;
     margin: 0 auto;
-}
\ No newline at end of file
+}
+
+.player-component #audio .controls.extra i.fa-bars {
+    position: relative;
+}
+
+.player-component #audio .controls.extra i.fa-bars::before {
+    font-size: 21px;
+    transition: opacity .15s;
+}
+
+.player-component #audio .controls.extra i.fa-bars:not(.active)::before {
+    opacity: .1;
+}
+
+.player-component #audio .controls.extra i.fa-bars:not(.active):hover::before {
+    opacity: 1;
+}

--- a/cms/app-client/app/templates/components/player-component.hbs	Thu Aug 04 17:59:38 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Fri Aug 05 14:55:45 2016 +0200
@@ -13,6 +13,11 @@
 		<span class="bar" onclick={{action 'setTime'}}><span class="value"></span></span>
 		<span class="remaining">- {{to-minutes remaining}}</span>
 	</div>
+	<div class="controls extra">
+		<i title="Transcript" class="fa fa-bars{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>
+			Transcript
+		</i>
+	</div>
 	<div class="meta">
 		<p>
 			<span title="{{ item.title }}" class="title">{{ item.title }}</span>