--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/player-sound-control.js	Mon Dec 19 21:58:02 2016 +0100
@@ -0,0 +1,118 @@
+import Ember from 'ember';
+import * as d3s from 'd3-scale';
+
+const speakerClassScale = d3s.scaleQuantize()
+  .domain([0, 1])
+  .range(['fa-volume-down', 'fa-volume-up']);
+
+
+export default Ember.Component.extend({
+  classNames: ['player-sound-control'],
+
+  popcorn: null,
+
+  volume: Ember.computed('popcorn', {
+    get: function() {
+      let popcorn = this.get('popcorn');
+      if(!popcorn) {
+        return 0;
+      }
+      return popcorn.volume();
+    },
+    set: function(key, value) {
+      let popcorn = this.get('popcorn');
+      if(!popcorn) {
+        return 0;
+      }
+      const newValue = Math.min(1.0, Math.max(0, value));
+      popcorn.volume(newValue);
+      return newValue;
+    }
+  }),
+
+  muted: Ember.computed('popcorn', {
+    get: function() {
+      let popcorn = this.get('popcorn');
+      if(!popcorn) {
+        return false;
+      }
+      return popcorn.muted();
+    },
+    set: function(key, value) {
+      let popcorn = this.get('popcorn');
+      if(!popcorn) {
+        return false;
+      }
+      if(value) {
+        popcorn.mute();
+      } else {
+        popcorn.unmute();
+      }
+      return value;
+    }
+
+  }),
+
+  popcornObserver: Ember.observer('popcorn', function() {
+    let popcorn = this.get('popcorn');
+    if(!popcorn) {
+      return;
+    }
+    popcorn.on('volumechange', () => {  this.notifyPropertyChange('volume'); this.notifyPropertyChange('muted'); });
+
+  }),
+
+  speakerClass: Ember.computed('volume', 'muted', function() {
+    const volume = this.get('volume');
+    const muted = this.get('muted');
+    if(muted || volume === 0 ) {
+      return "fa-volume-off";
+    } else {
+      return speakerClassScale(volume);
+    }
+  }),
+
+  mouseEnter: function() {
+    let baseOffset = this.$("#sound-control-speaker").offset();
+    if(this.get('muted')) {
+      return;
+    }
+    this.$("#sound-control-scale").show(400);
+    this.$("#sound-control-scale").offset({ top: baseOffset.top + 55, left: baseOffset.left});
+  },
+  mouseLeave: function() {
+    this.$("#sound-control-scale").hide(400);
+  },
+
+  didInsertElement: function() {
+    this.set('volumeSliderHandler', this.$(".volume-slider").on("input change", (event) => { this.set('volume',Ember.$(event.target).val()); }));
+  },
+
+  willDestroyElement: function() {
+    let volumeSliderHandler = this.get('volumeSliderHandler');
+    if(volumeSliderHandler) {
+      this.$(".volume-slider").off({"input change": volumeSliderHandler});
+    }
+  },
+
+  actions: {
+    muteToggle() {
+      this.set('muted', !this.get('muted'));
+    },
+    clickMinus() {
+      if(this.get('muted')) {
+        return;
+      }
+      let volume = this.get('volume');
+      this.set('volume', volume - 0.1);
+    },
+    clickPlus() {
+      if(this.get('muted')) {
+        return;
+      }
+      let volume = this.get('volume');
+      this.set('volume', volume + 0.1);
+    }
+  }
+
+});