diff --git a/app/controller/sdl/Abstract/Controller.js b/app/controller/sdl/Abstract/Controller.js index 8f94cac55..8e2bb850a 100644 --- a/app/controller/sdl/Abstract/Controller.js +++ b/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 diff --git a/app/controller/sdl/MediaController.js b/app/controller/sdl/MediaController.js index 6fe2dfb2b..046343b1b 100644 --- a/app/controller/sdl/MediaController.js +++ b/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(); }, diff --git a/app/model/sdl/Abstract/AppModel.js b/app/model/sdl/Abstract/AppModel.js index beff386b7..8310869a2 100644 --- a/app/model/sdl/Abstract/AppModel.js +++ b/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 * diff --git a/app/model/sdl/MediaModel.js b/app/model/sdl/MediaModel.js index bd47c704e..1c90a1f9f 100644 --- a/app/model/sdl/MediaModel.js +++ b/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); } diff --git a/app/view/media/sdl/controllsView.js b/app/view/media/sdl/controllsView.js index c615ebf52..f8dece847 100644 --- a/app/view/media/sdl/controllsView.js +++ b/app/view/media/sdl/controllsView.js @@ -49,15 +49,20 @@ SDL.SDLMediaControlls = Em.ContainerView.create( template: Em.Handlebars .compile( '{{#with view}}' + - '
' + + '
' + '
{{SDL.SDLController.model.deviceName}}
' + '
' + '
{{SDL.SDLController.model.appInfo.field1}}
' + '
{{SDL.SDLController.model.appInfo.field2}}
' + '
{{SDL.SDLController.model.appInfo.field3}}
' + '
{{SDL.SDLController.model.appInfo.mediaClock}}
' + + '' + '' + - '' + + '' + '
' + '{{/with}}' ) } diff --git a/css/general.css b/css/general.css index 6118c513b..dd45a614a 100644 --- a/css/general.css +++ b/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; + } diff --git a/css/media.css b/css/media.css index def941c05..1f9bb9080 100644 --- a/css/media.css +++ b/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; diff --git a/css/sdl.css b/css/sdl.css index f52a03366..1d3ad2e8a 100644 --- a/css/sdl.css +++ b/css/sdl.css @@ -319,7 +319,7 @@ } #sdl_view_container .player_controllsV2 { - top: 241px !important; + top: 264px !important; height: 48px; } @@ -631,7 +631,7 @@ } #sdl_view_container .timeV2 { - top: 155px; + top: 150px; } #sdl_view_container .textLimit { @@ -1567,7 +1567,7 @@ } #sdl_view_container .title { - top: 79px; + top: 69px; font-size: 38px; left: 7px; width: 340px; @@ -1575,7 +1575,7 @@ } #sdl_view_container .album { - top: 123px; + top: 106px; font-size: 26px; left: 10px; width: 330px; diff --git a/ffw/UIRPC.js b/ffw/UIRPC.js index de3fe4209..8f39042bb 100644 --- a/ffw/UIRPC.js +++ b/ffw/UIRPC.js @@ -1571,6 +1571,27 @@ FFW.UI = FFW.RPCObserver.create( }; this.client.send(JSONMessage); }, + + /** + * Notification method to send seek media clock timer to SDLCore + */ + onSeekMediaClockTimerNotification: function(params) { + Em.Logger.log('onSeekMediaClockTimerNotification'); + var JSONMessage = { + 'jsonrpc': '2.0', + 'method': 'UI.OnSeekMediaClockTimer', + 'params': { + 'seekTime': { + 'hours': params.hrs, + 'minutes': params.min, + 'seconds': params.sec + }, + 'appID': params.appID + } + }; + this.client.send(JSONMessage); + }, + /** * send notification when command was triggered *