Feature/progress bar seek

app/controller/sdl/Abstract/Controller.js

@@ -192,18 +192,54 @@ SDL.SDLController = Em.Object.extend(
     openCommandsList: function() {
       SDL.OptionsView.activate();
     },
+
     /**
-     * Notification of deactivation of current application model initiated in
-     * StateManager
+     * Function for enable\disable progress bar tracking
      */
-    deactivateApp: function() {
-      if (this.model) {
-        SDL.SDLModel.onDeactivateApp(SDL.States.nextState, this.model.appID);
+    seekBarActive: function() {
+      if(SDL.SDLController.model === null) {
+        return;
       }
+      var seekBar = SDL.SDLController.model.seekBar;
+      SDL.SDLController.model.set('seekBarStyle', seekBar ? "progressBarWithSeek" : "progressBarWithoutSeek");
+    }.observes('SDL.SDLController.model.seekBar'),
+
+    /**
+     * Deactivate current application
+     */    
+    deactivateApp: function() {
+      SDL.SDLModel.onDeactivateApp(SDL.States.nextState, this.model.appID);
       SDL.SDLController.onSubMenu('top');
       SDL.SDLController.model.set('tbtActivate', false);
       this.set('model', null);
     },
+
+    /**
+    * seekTracking function for a tracking progress bar
+    */
+    seekTracking: function(event){
+      if(event.type == 'change'){
+        SDL.SDLController.model.set('pause', true);
+        var percent = event.currentTarget.value;
+        SDL.SDLController.model.set('valueOfSeekBar',percent);
+        var currentTime = 0;
+        if(SDL.SDLController.model.countUp){
+          currentTime = parseInt((SDL.SDLController.model.endTime - SDL.SDLController.model.duration) * percent/100);
+        }
+        else {
+          currentTime = parseInt((SDL.SDLController.model.duration - SDL.SDLController.model.endTime) * percent/100);
+        }
+        SDL.SDLController.model.set('currTime', currentTime);
+        var number = SDL.SDLController.model.duration + SDL.SDLController.model.currTime;
+        var params = {};
+        params.appID = SDL.SDLController.model.appID;
+        params.hrs = parseInt(number / 3600); // hours
+        params.min = parseInt(number / 60) % 60; // minutes
+        params.sec = number % 60; // seconds
+        FFW.UI.onSeekMediaClockTimerNotification(params);
+        SDL.SDLController.model.set('pause',false);
+      }
+    },
     /**
      * Notification to SDL about triggered events on HMI
      * @param reason
@@ -616,9 +652,6 @@ SDL.SDLController = Em.Object.extend(
       if (methodName == 'UI.Slider') {
         SDL.SliderView.deactivate(true);
       }
-      //            if (SDL.VRHelpListView.active) {
-      //                SDL.VRHelpListView.deactivate();
-      //            }
     },
     /**
      * Method to close InteractionChoices view

app/controller/sdl/MediaController.js

@@ -65,10 +65,7 @@ SDL.SDLMediaController = Em.Object.create(
     },
     /** Switching on Application */
     activateApp: function(applicationModel) {
-
-      // store active application id
       this.set('currentAppId', applicationModel.appID);
-      // set active model
       SDL.SDLController.set('model', applicationModel);
       SDL.MediaController.turnOnSDL();
     },

app/model/sdl/Abstract/AppModel.js

@@ -58,6 +58,10 @@ SDL.ABSAppModel = Em.Object.extend(
      * depends on BC.SubscribeButton request
      */
     TUNEDOWN: false,
+    /**
+     * Flag to display/hide seek bar on media screen
+     */
+    seekBar: false,
     /**
      * mediaPlayerIndicator flag for SDL.SDLMediaControlls view
      */
@@ -90,6 +94,18 @@ SDL.ABSAppModel = Em.Object.extend(
      * @type {Number}
      */
     appID: null,
+    /**
+     * Current value of seek bar
+     *
+     * @type {Number}
+     */
+    valueOfSeekBar: null,
+    /**
+     * Style for progress bar
+     *
+     * @type {String}
+     */
+    seekBarStyle: "",
     /**
      * Application name
      *

app/model/sdl/MediaModel.js

@@ -80,12 +80,14 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
     this.set('VRCommands', []);
     this.set('tbtActivate', false);
     this.set('isPlaying', true);
+    this.set('seekBar', false);
+    this.set('seekBarStyle', 'progressBarWithoutSeek');
+    this.set('valueOfSeekBar', 0);
     this.set('globalProperties.helpPrompt', []);
     this.set('globalProperties.timeoutPrompt', []);
     this.set('globalProperties.keyboardProperties', Em.Object.create());
     this.set('globalProperties.keyboardProperties.keyboardLayout', 'QWERTY');
     this.set('globalProperties.keyboardProperties.limitedCharacterList', []);
-
     this.set('commandsList', {'top': []});
     this.set('softButtons', []);
   },
@@ -133,6 +135,14 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
   maxTimeValue: 68400, // 19 hours
   duration: 0,
   currTime: 0,
+  endTime: 0,
+
+  /**
+   * Flag for progress bar show/hide state
+   *
+   * @param {Boolean}
+   */
+  disabled: true,
 
   /**
    * Method hides sdl activation button and sdl application
@@ -178,6 +188,14 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
     }
   }.observes('this.pause'),
 
+  /**
+   * Hide/display progress bar call back function
+   * which handle a seekBar Boolean parameter
+   */
+  hideDisplayProgressBar: function() {
+    this.set('disabled', !this.seekBar);
+  }.observes('this.seekBar'),
+
   stopTimer: function() {
 
     clearInterval(this.timer);
@@ -188,10 +206,26 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
   setDuration: function() {
 
     var number, str = '', hrs = 0, min = 0, sec = 0;
+    var divisor = (this.countUp ?  
+      this.endTime - this.duration : 
+      this.duration - this.endTime);
+    var progress = this.currTime / divisor * 100;
+    this.valueOfSeekBar = progress;
+
     if (this.countUp) {
+
+      if(this.currTime != (this.endTime - this.duration)){
+
       number = this.duration + this.currTime;
+
+      } else {
+        clearInterval(this.timer);
+        this.currTime = 0;
+        return;
+      }
     } else {
-      if (this.duration <= this.currTime) {
+      if (this.duration <= this.currTime ||
+        this.endTime != 0 && (this.duration - this.endTime) <= this.currTime) {
         clearInterval(this.timer);
         this.currTime = 0;
         this.appInfo.set('mediaClock', '00:00:00');
@@ -218,7 +252,7 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
     }
 
   }.observes('this.currTime'),
-
+  
   changeDuration: function() {
 
     clearInterval(this.timer);
@@ -259,6 +293,20 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
           params.startTime.hours * 3600 + params.startTime.minutes * 60 +
           params.startTime.seconds
         );
+        if(params.endTime) {
+          this.set('endTime', null);
+          this.set('endTime',
+            params.endTime.hours * 3600 + params.endTime.minutes * 60 +
+            params.endTime.seconds
+          );
+          if(params.enableSeek !== undefined){
+            this.set('seekBar', params.enableSeek);
+          }
+          else this.set('seekBar', false);
+        }
+        else {
+          this.set('seekBar', false);
+        }
       }
       this.set('pause', false);
     }

app/view/media/sdl/controllsView.js

@@ -49,15 +49,20 @@ SDL.SDLMediaControlls = Em.ContainerView.create(
         template: Em.Handlebars
           .compile(
             '{{#with view}}' +
-            '<div class="track-info">' +
+            '<div class="track-info" id="sdlmedia">' +
             '<div class="device">{{SDL.SDLController.model.deviceName}}</div>' +
             '<div class="divider_o"></div>' +
             '<div class="title textLimit" {{bindAttr style="SDL.SDLController.model.appInfo.alignment"}}>{{SDL.SDLController.model.appInfo.field1}}</div>' +
             '<div class="album textLimit" {{bindAttr style="SDL.SDLController.model.appInfo.alignment"}}>{{SDL.SDLController.model.appInfo.field2}}</div>' +
             '<div class="artist textLimit"{{bindAttr class="SDL.SDLController.model.mediaPreset:hidden"}}>{{SDL.SDLController.model.appInfo.field3}}</div>' +
             '<div class="time"{{bindAttr class="SDL.SDLController.model.mediaPreset:timeV2"}}>{{SDL.SDLController.model.appInfo.mediaClock}}</div>' +
+            '<input type="range" min="0" max="100"' + 
+              'onchange="SDL.SDLController.seekTracking(event)" ' +
+              '{{bindAttr id="SDL.SDLController.model.seekBarStyle"}} ' +
+              '{{bindAttr disabled="SDL.SDLController.model.disabled"}} ' +
+              '{{bindAttr value="SDL.SDLController.model.valueOfSeekBar"}}/>' +
             '<img class="cd_logo" {{bindAttr class="SDL.SDLController.model.mediaPreset:cd_logoV2"}} {{bindAttr class="SDL.SDLController.model.mode"}} {{bindAttr class="SDL.SDLController.model.isTemplate"}}/>' +       
-            '<img class="cd_logo" {{bindAttr src="SDL.SDLController.model.appInfo.trackIcon" class="SDL.SDLController.model.mediaPreset:cd_logoV2"}} />' +       
+            '<img class="cd_logo" {{bindAttr src="SDL.SDLController.model.appInfo.trackIcon" class="SDL.SDLController.model.mediaPreset:cd_logoV2"}} />' +                
             '</div>' + '{{/with}}'
           )
       }

css/general.css

@@ -1777,3 +1777,119 @@ to {
     width: 50px;
     z-index: 1001;
 }
+
+#progressBarWithSeek{  /* container */
+    top: 187px;
+    width: 463px;
+    position: absolute;
+    -webkit-appearance: none;
+            appearance: none;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
+    background: #fff linear-gradient(#BCBCBC, #fff0f5);
+    overflow: hidden;
+  }
+
+  #progressBarWithSeek::-webkit-slider-thumb {  /* slider in Chrome/Chromium */
+    -webkit-appearance: none;
+    width:15px;
+    height:15px;
+    border: 1px solid #818181;
+    border-radius: 2px;
+    background-image: linear-gradient(#dedede, #f2f2f2);
+    box-shadow: -13px 0 #40310a,
+                -26px 0 #40310a,
+                -39px 0 #40310a,
+                -52px 0 #40310a,
+                -65px 0 #40310a,
+                -78px 0 #40310a,
+                -91px 0 #40310a,
+                -104px 0 #40310a,
+                -117px 0 #40310a,
+                -130px 0 #40310a,
+                -143px 0 #40310a,
+                -156px 0 #40310a,
+                -169px 0 #40310a,
+                -182px 0 #40310a,
+                -195px 0 #40310a,
+                -208px 0 #40310a,
+                -221px 0 #40310a,
+                -234px 0 #40310a,
+                -247px 0 #40310a,
+                -260px 0 #40310a,
+                -273px 0 #40310a,
+                -286px 0 #40310a,
+                -299px 0 #40310a,
+                -312px 0 #40310a,
+                -325px 0 #40310a,
+                -338px 0 #40310a,
+                -351px 0 #40310a,
+                -364px 0 #40310a,
+                -377px 0 #40310a,
+                -390px 0 #40310a,
+                -403px 0 #40310a,
+                -416px 0 #40310a,
+                -429px 0 #40310a,
+                -442px 0 #40310a,
+                -455px 0 #40310a;
+  }
+
+  #progressBarWithoutSeek{  /* container */
+    top: 187px;
+    width: 463px;
+    position: absolute;
+    -webkit-appearance: none;
+            appearance: none;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
+    background: #fff linear-gradient(#BCBCBC, #fff0f5);
+    overflow: hidden;
+  }
+
+  #progressBarWithoutSeek::-webkit-slider-thumb {  /* slider in Chrome/Chromium */
+    -webkit-appearance: none;
+    width:15px;
+    height:15px;
+    border: 1px solid #40310a;
+    border-radius: 2px;
+    background-image: linear-gradient(#40310a, #40310a);
+    box-shadow: -13px 0 #40310a,
+                -26px 0 #40310a,
+                -39px 0 #40310a,
+                -52px 0 #40310a,
+                -65px 0 #40310a,
+                -78px 0 #40310a,
+                -91px 0 #40310a,
+                -104px 0 #40310a,
+                -117px 0 #40310a,
+                -130px 0 #40310a,
+                -143px 0 #40310a,
+                -156px 0 #40310a,
+                -169px 0 #40310a,
+                -182px 0 #40310a,
+                -195px 0 #40310a,
+                -208px 0 #40310a,
+                -221px 0 #40310a,
+                -234px 0 #40310a,
+                -247px 0 #40310a,
+                -260px 0 #40310a,
+                -273px 0 #40310a,
+                -286px 0 #40310a,
+                -299px 0 #40310a,
+                -312px 0 #40310a,
+                -325px 0 #40310a,
+                -338px 0 #40310a,
+                -351px 0 #40310a,
+                -364px 0 #40310a,
+                -377px 0 #40310a,
+                -390px 0 #40310a,
+                -403px 0 #40310a,
+                -416px 0 #40310a,
+                -429px 0 #40310a,
+                -442px 0 #40310a,
+                -455px 0 #40310a;
+  }

css/media.css

@@ -632,7 +632,7 @@
 }
 
 #sdl_media_presetButtons.main-preset-buttons-wraper {
-    top: 291px;
+    top: 315px;
     left: 165px;
 }
 
@@ -967,7 +967,7 @@
 
 #usb_logo {
     position: absolute;
-    top: 90px;
+    top: 70px;
     right: 10px;
     border: 1px solid #393939;
     border-radius: 2px;