video-tagging/playback-control.html at master · CatalystCode/video-tagging · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!--
   playback-control control for play speed of video
       of the video-tagging control
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="video-taggingstyles.html">

<dom-module id="playback-control">
  <template>
    <style include="video-taggingstyles"></style>

             <div id="container" on-mouseleave="containerMouseOut">
               <div id="speed1" class="playSpeedValues clickableControl" on-click="playbackClicked">x 1.0  </div>
               <div id="speed2" class="playSpeedValues clickableControl" on-click="playbackClicked">x .50</div>
               <div id="speed3" class="playSpeedValues clickableControl" on-click="playbackClicked">x .25</div>
               <div id="speed4" class="playSpeedValues clickableControl" on-click="playbackClicked">x .10</div>
               <div id="speed5" class="playSpeedValues clickableControl" on-click="playbackClicked">x .05</div>
             </div>
   </template>
   <script>

  Polymer({

       is: 'playback-control',

       properties: {
       },
       attached: function(){
             this.container = this.$$('#container');

             this.speed1 = this.$$('#speed1');
             this.speed1.value = 1;
             this.speed2 = this.$$('#speed2');
             this.speed2.value = .5;
             this.speed3 = this.$$('#speed3');
             this.speed3.value = .25;
             this.speed4 = this.$$('#speed4');
             this.speed4.value = .1;
             this.speed5 = this.$$('#speed5');
             this.speed5.value = .05;
       },
       playbackClicked: function(e){
           //Reset
           var playSpeeds = this.container.children;
           for (var i=0;i<playSpeeds.length;i++) {
             playSpeeds[i].classList.remove('playSpeedValueSelected');
           };
           //Highlight selected
           var div = this.$$('#' + e.target.id);
           div.classList.add('playSpeedValueSelected');
           this.fire("playSpeedSelected",{playbackValue:div.value, playbackText:div.innerHTML});
       },
       containerMouseOut: function(e){
            this.fire("playSpeedSelected",{playbackValue:null});
       }
   });
</script>
</dom-module>