cntk-video-tagging-tool/src/bower_components/video-tagging/playback-control.html

An electron app for building end to end Object Detection Models with CNTK from Sample Videos.

<!--
   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>