Impl/sdl 0084 progress bar seek resolve conflicts pr related to the feature

app/controller/sdl/Abstract/Controller.js

@@ -237,18 +237,47 @@ SDL.SDLController = Em.Object.extend(
     openNavButtonsList: function() {
       SDL.NavigationSubscriptionButtonsView.activate();
     },
+
     /**
-     * Notification of deactivation of current application model initiated in
-     * StateManager
+     * Function for enable\disable progress bar tracking
      */
-    deactivateApp: function() {
-      if (this.model) {
-        SDL.SDLController.onSubMenu('top');
-        SDL.SDLModel.onDeactivateApp(SDL.States.nextState, this.model.appID);
-        SDL.SDLController.model.set('tbtActivate', false);
+    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'){
+        var percent = event.currentTarget.value;
+        var currentTime = 0;
+        currentTime = parseInt(SDL.SDLController.model.endTime * percent/100);
+        SDL.SDLController.model.set('currTime', currentTime);
+        var number = 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
@@ -748,9 +777,6 @@ SDL.SDLController = Em.Object.extend(
       } else 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

@@ -71,10 +71,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);
 
       let get_template_from_app_type = function() {

app/model/sdl/Abstract/AppModel.js

@@ -138,6 +138,10 @@ SDL.ABSAppModel = Em.Object.extend(
           text: "Toggle Heading"
         }
     },
+    /**
+     * Flag to display/hide seek bar on media screen
+     */
+    seekBar: false,
     /**
      * mediaPlayerIndicator flag for SDL.SDLMediaControlls view
      */
@@ -170,6 +174,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

@@ -85,6 +85,14 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
     this.set("forwardSeekIndicator", {type: 'TRACK', seekTime: null});
     this.set("backSeekIndicator", {type: 'TRACK', seekTime: null});
 
+    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', []);
     this.set('cachedIconFileNamesList', []);
@@ -146,6 +154,13 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
   currTime: 0,
   countRate: 1.0,
 
+  /**
+   * Flag for progress bar show/hide state
+   *
+   * @param {Boolean}
+   */
+  disabled: true,
+
   /**
    * Method hides sdl activation button and sdl application
    *
@@ -190,6 +205,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);
@@ -202,16 +225,32 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
   setDuration: function() {
 
     var position, 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) {
-      position = this.startTime + this.currTime;
+
+      if(this.currTime != (this.endTime - this.duration)){
+
+        position = this.currTime;
+
+      } else {
+        clearInterval(this.timer);
+        this.currTime = 0;
+        return;
+      }
     } else {
-      if (this.startTime <= 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');
         return;
       }
-      position = this.startTime - this.currTime;
+      position = this.currTime;
     }
 
     hrs = parseInt(position / 3600), // hours
@@ -307,6 +346,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);
+        }
       }
       if (params.endTime) {
         this.set('endTime',

app/view/media/sdl/controllsView.js

@@ -49,16 +49,21 @@ SDL.SDLMediaControlls = Em.ContainerView.create(
         template: Em.Handlebars
           .compile(
             '{{#with view}}' +
-            '<div class="track-info">' +
             '<div class="device">{{SDL.SDLController.model.appInfo.title}}</div>' +
+            '<div class="track-info" id="sdlmedia">' +
             '<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="track textLimit"{{bindAttr style="SDL.SDLController.model.appInfo.alignment"}}>{{SDL.SDLController.model.appInfo.mediaTrack}}</div>' +
             '<div class="time"{{bindAttr class="SDL.SDLController.model.mediaPreset:timeV2"}}>{{SDL.SDLController.model.appInfo.mediaClock}}</div>' +
-            '<img class="cd_logo" onerror="this.style.display=\'none\'" {{bindAttr class="SDL.SDLController.model.mediaPreset:cd_logoV2"}} {{bindAttr class="SDL.SDLController.model.mode"}} {{bindAttr class="SDL.SDLController.model.isTemplate"}}/>' +       
-            '<img class="cd_logo" onerror="this.style.display=\'none\'" {{bindAttr src="SDL.SDLController.model.appInfo.trackIcon" class="SDL.SDLController.model.mediaPreset:cd_logoV2"}} />' +       
+            '<img class="cd_logo" onerror="this.style.display=\'none\'" {{bindAttr class="SDL.SDLController.model.mediaPreset:cd_logoV2"}} {{bindAttr class="SDL.SDLController.model.mode"}} {{bindAttr class="SDL.SDLController.model.isTemplate"}}/>' +              
+            '<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 src="SDL.SDLController.model.appInfo.trackIcon" class="SDL.SDLController.model.mediaPreset:cd_logoV2"}} />' +                
             '</div>' + '{{/with}}'
           )
       }

css/general.css

@@ -2470,3 +2470,118 @@ to {
 #addWidgetPopUp .list-item span {
     margin-left: 50px;
 }
+#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

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