1 import Ember from 'ember';

     2 import * as d3s from 'd3-scale';

     3 

     4 const speakerClassScale = d3s.scaleQuantize()

     5   .domain([0, 1])

     6   .range(['fa-volume-down', 'fa-volume-up']);

     7 

     8 

     9 export default Ember.Component.extend({

    10   classNames: ['player-sound-control'],

    11 

    12   popcorn: null,

    13 

    14   volume: Ember.computed('popcorn', {

    15     get: function() {

    16       let popcorn = this.get('popcorn');

    17       if(!popcorn) {

    18         return 0;

    19       }

    20       return popcorn.volume();

    21     },

    22     set: function(key, value) {

    23       let popcorn = this.get('popcorn');

    24       if(!popcorn) {

    25         return 0;

    26       }

    27       const newValue = Math.min(1.0, Math.max(0, value));

    28       popcorn.volume(newValue);

    29       return newValue;

    30     }

    31   }),

    32 

    33   muted: Ember.computed('popcorn', {

    34     get: function() {

    35       let popcorn = this.get('popcorn');

    36       if(!popcorn) {

    37         return false;

    38       }

    39       return popcorn.muted();

    40     },

    41     set: function(key, value) {

    42       let popcorn = this.get('popcorn');

    43       if(!popcorn) {

    44         return false;

    45       }

    46       if(value) {

    47         popcorn.mute();

    48       } else {

    49         popcorn.unmute();

    50       }

    51       return value;

    52     }

    53 

    54   }),

    55 

    56   popcornObserver: Ember.observer('popcorn', function() {

    57     let popcorn = this.get('popcorn');

    58     if(!popcorn) {

    59       return;

    60     }

    61     popcorn.on('volumechange', () => {  this.notifyPropertyChange('volume'); this.notifyPropertyChange('muted'); });

    62 

    63   }),

    64 

    65   speakerClass: Ember.computed('volume', 'muted', function() {

    66     const volume = this.get('volume');

    67     const muted = this.get('muted');

    68     if(muted || volume === 0 ) {

    69       return "fa-volume-off";

    70     } else {

    71       return speakerClassScale(volume);

    72     }

    73   }),

    74 

    75   mouseEnter: function() {

    76     let baseOffset = this.$("#sound-control-speaker").offset();

    77     if(this.get('muted')) {

    78       return;

    79     }

    80     this.$("#sound-control-scale").show(400);

    81     this.$("#sound-control-scale").offset({ top: baseOffset.top + 55, left: baseOffset.left});

    82   },

    83   mouseLeave: function() {

    84     this.$("#sound-control-scale").hide(400);

    85   },

    86 

    87   didInsertElement: function() {

    88     this.set('volumeSliderHandler', this.$(".volume-slider").on("input change", (event) => { this.set('volume',Ember.$(event.target).val()); }));

    89   },

    90 

    91   willDestroyElement: function() {

    92     let volumeSliderHandler = this.get('volumeSliderHandler');

    93     if(volumeSliderHandler) {

    94       this.$(".volume-slider").off({"input change": volumeSliderHandler});

    95     }

    96   },

    97 

    98   actions: {

    99     muteToggle() {

   100       this.set('muted', !this.get('muted'));

   101     },

   102     clickMinus() {

   103       if(this.get('muted')) {

   104         return;

   105       }

   106       let volume = this.get('volume');

   107       this.set('volume', volume - 0.1);

   108     },

   109     clickPlus() {

   110       if(this.get('muted')) {

   111         return;

   112       }

   113       let volume = this.get('volume');

   114       this.set('volume', volume + 0.1);

   115     }

   116   }

   117 

   118 });