cms/app-client/app/components/player-sound-control.js
author ymh <ymh.work@gmail.com>
Wed, 08 Feb 2017 15:25:24 +0100
changeset 502 74fba571487e
parent 480 814468b0fc69
permissions -rw-r--r--
Complete the notice display. add various fields to document to correctly display the notice. Correct bug #0025746
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
import Ember from 'ember';
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
import * as d3s from 'd3-scale';
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
const speakerClassScale = d3s.scaleQuantize()
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
  .domain([0, 1])
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
  .range(['fa-volume-down', 'fa-volume-up']);
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
export default Ember.Component.extend({
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
  classNames: ['player-sound-control'],
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
  popcorn: null,
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
  volume: Ember.computed('popcorn', {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
    get: function() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
      let popcorn = this.get('popcorn');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
      if(!popcorn) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
        return 0;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
      }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
      return popcorn.volume();
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
    },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
    set: function(key, value) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
      let popcorn = this.get('popcorn');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
      if(!popcorn) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
        return 0;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
      }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
      const newValue = Math.min(1.0, Math.max(0, value));
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
      popcorn.volume(newValue);
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
      return newValue;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
    }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
  }),
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
  muted: Ember.computed('popcorn', {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
    get: function() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
      let popcorn = this.get('popcorn');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
      if(!popcorn) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
        return false;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
      }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
      return popcorn.muted();
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
    },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
    set: function(key, value) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
      let popcorn = this.get('popcorn');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
      if(!popcorn) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
        return false;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
      }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
      if(value) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
        popcorn.mute();
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
      } else {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
        popcorn.unmute();
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
      }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
      return value;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
    }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
  }),
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
480
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    56
  mutedObserver: Ember.observer('muted', function() {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    57
    const rangeslider = this.$("#sound-control-range-slider");
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    58
    if(!rangeslider) {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    59
      return;
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    60
    }
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    61
    rangeslider.rangeslider('update', true);
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    62
  }),
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    63
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    64
  volumeObserver: Ember.observer('volume', function() {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    65
    const rangeslider = this.$("#sound-control-range-slider");
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    66
    const volume = this.get('volume');
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    67
    if(!rangeslider) {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    68
      return;
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    69
    }
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    70
    rangeslider.val(volume).change();
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    71
  }),
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
    72
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
  popcornObserver: Ember.observer('popcorn', function() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
    let popcorn = this.get('popcorn');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
    if(!popcorn) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
      return;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
    }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
    popcorn.on('volumechange', () => {  this.notifyPropertyChange('volume'); this.notifyPropertyChange('muted'); });
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
  }),
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
  speakerClass: Ember.computed('volume', 'muted', function() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
    const volume = this.get('volume');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
    const muted = this.get('muted');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
    if(muted || volume === 0 ) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
      return "fa-volume-off";
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
    } else {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
      return speakerClassScale(volume);
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
    }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
  }),
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
  mouseEnter: function() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
    let baseOffset = this.$("#sound-control-speaker").offset();
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
    if(this.get('muted')) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
      return;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
    }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
    this.$("#sound-control-scale").show(400);
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
    this.$("#sound-control-scale").offset({ top: baseOffset.top + 55, left: baseOffset.left});
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
  },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
  mouseLeave: function() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
    this.$("#sound-control-scale").hide(400);
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
  },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
  didInsertElement: function() {
480
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   105
    const volume = this.get('volume');
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   106
    let rangeslider = this.$('#sound-control-range-slider');
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   107
    rangeslider.rangeslider({
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   108
      polyfill: false,
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   109
      onSlide: (pos, value) => {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   110
        this.set('volume', value);
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   111
      },
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   112
      onSlideEnd: (pos, value) => {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   113
        this.set('volume', value);
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   114
      },
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   115
      onInit: function() {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   116
        Ember.$(this).value = volume;
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   117
      }
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   118
    });
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   119
  },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   120
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   121
  willDestroyElement: function() {
480
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   122
    this.$('#sound-control-range-slider').rangeslider('destroy');
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
  },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   124
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   125
  actions: {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   126
    muteToggle() {
480
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   127
      if(!this.get('volume')) {
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   128
        return;
814468b0fc69 use rangeslider.js polyfill to ensure cross browser compatibility
ymh <ymh.work@gmail.com>
parents: 477
diff changeset
   129
      }
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   130
      this.set('muted', !this.get('muted'));
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   131
    },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   132
    clickMinus() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   133
      if(this.get('muted')) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   134
        return;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   135
      }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   136
      let volume = this.get('volume');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   137
      this.set('volume', volume - 0.1);
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   138
    },
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   139
    clickPlus() {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   140
      if(this.get('muted')) {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   141
        return;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   142
      }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   143
      let volume = this.get('volume');
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   144
      this.set('volume', volume + 0.1);
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   145
    }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   146
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   147
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   148
});