define('application/components/landing', [
'rofl/widgets/component',
'rofl/widgets/label',
'rofl/widgets/container',
'rofl/lib/l10n',
'antie/runtimecontext',
'rofl/lib/utils',
'rofl/events/keyevent',
'rofl/analytics/web/google',
'rofl/widgets/horizontallist',
'rofl/widgets/verticallist',
'application/widgets/button',
'rofl/media/source',
'rofl/devices/mediaplayer/mediaplayer',
'application/decorators/player/interfaces/playerinterface',
'application/managers/api',
'application/helpers/playerproperties'
], function (
Component,
Label,
Container,
L10N,
RuntimeContext,
Utils,
KeyEvent,
GoogleAnalytics,
HorizontalList,
VerticalList,
Button,
MediaSource,
MediaPlayer,
AppCorePlaybackInterface,
ApiManager,
PlayerProperties
) {
'use strict';
var api = ApiManager.getKPNAPI(),
l10n = L10N.getInstance(),
application = RuntimeContext.getCurrentApplication(),
GA = GoogleAnalytics.getInstance(),
device = RuntimeContext.getDevice(),
mediaPlayer = device.getMediaPlayer(),
mainContainerAnimOptions = {
duration: 200
},
Landing;
Landing = Component.extend({
/**
* Initialises the component.
*/
init: function init () {
init.base.call(this, 'landingPage');
this._build();
this._onKeyDownBound = Utils.bind(this._onKeyDown, this);
this._onSelectBound = Utils.bind(this._onSelect, this);
this._multitaskHandler = Utils.bind(this._onVisibilityChanged, this);
this._onFocusBound = Utils.bind(this._onFocus, this);
this.playerInterface = new AppCorePlaybackInterface();
this._playerVisible = false;
},
/**
* PlayerEvent.
*
* @param {Object} e - The event data.
*/
onPlayerEvent: function (e) {
if (e.type === AppCorePlaybackInterface.EVENTS.COMPLETE) {
this.playerInterface.stop();
this.playerInterface.play(this._properties);
}
},
/**
* Visibility changed event.
*
* @private
*/
_onVisibilityChanged: function () {
if (!document.hidden) {
this._displayPromoVideo();
}
},
/**
* BeforeShow event.
*/
onBeforeShow: function () {
this._setEventListeners();
GA.onPageView('landingPage');
this._loginBtn.focus();
},
/**
* OnAfterShow event.
*/
onAfterShow: function () {
application.hideLoader();
this._displayPromoVideo();
},
/**
* Display promo video.
*
* @private
*/
_displayPromoVideo: function () {
var properties;
api.read('streams/promo', {
type: 'intro'
}).then(Utils.bind(function (data) {
properties = this._properties = new PlayerProperties({
source: {
src: data.url,
mimeType: PlayerProperties.MIME_TYPES.mp4
},
autoplay: true
});
this.playerInterface.initPlayer(properties);
}, this));
},
/**
* BeforeHide event.
*/
onBeforeHide: function () {
this._removeEventListeners();
this.playerInterface.unload();
},
/**
* Builds the component.
*
* @private
*/
_build: function () {
this._buildMainContainer();
this._buildLoginContainer();
this._buildPromoContainer();
},
/**
* Builds the main container.
*
* @private
*/
_buildMainContainer: function () {
var mainContainer = this._mainContainer = new VerticalList('container');
this.appendChildWidget(mainContainer);
},
/**
* Builds the top bar list.
*
* @private
*/
_buildLoginContainer: function () {
var container = new HorizontalList('login-container'),
title = this._mainTitle = new Label(l10n.get('landing.title')),
loginBtn = this._loginBtn = new Button(l10n.get('landing.buttons.login'), 'login-btn');
title.addClass('title');
this._mainContainer.appendChildWidget(container);
container.appendChildWidget(title);
container.appendChildWidget(loginBtn);
},
/**
* Builds the top bar list.
*
* @private
*/
_buildPromoContainer: function () {
var container = new HorizontalList(),
title = new Label({ text: l10n.get('landing.promo_title'), classNames: ['title'] }),
text = new Label({ text: l10n.get('landing.promo_text'), classNames: ['text'] }),
buttonList = new HorizontalList(),
promoBtn = new Button(l10n.get('landing.buttons.promo'), 'watch-promo'),
moreInfoBtn = new Button(l10n.get('landing.buttons.more'), 'more-info'),
fakeLabel = new Label({ text: 'fakeLabel', classNames: ['fakeLabel'] });
buttonList.addClass('button-list');
this._mainContainer.appendChildWidget(container);
container.appendChildWidget(title);
container.appendChildWidget(text);
container.appendChildWidget(buttonList);
buttonList.appendChildWidget(promoBtn);
buttonList.appendChildWidget(moreInfoBtn);
buttonList.appendChildWidget(fakeLabel);
buttonList.addClass('buttons-list');
},
/**
* Handle KeyEvent.
*
* @param {KeyEvent} e - KeyEvent instance.
* @private
*/
_onKeyDown: function (e) {
switch (e.keyCode) {
case KeyEvent.VK_LEFT:
case KeyEvent.VK_RIGHT:
e.stopPropagation();
break;
case KeyEvent.VK_BACK:
if (this._playerVisible) {
this.togglePlayers(false);
} else {
this._onClose();
}
break;
}
},
/**
* OnSelect event.
*
* @param {Object} e - Event.
* @private
*/
_onSelect: function (e) {
var target = e.target,
qrModalConfig = {
title: l10n.get('landing.modal.title'),
text: l10n.get('landing.modal.text'),
url: l10n.get('landing.modal.url'),
imgUrl: 'src/assets/images/kpn-qr-code.png',
buttons: [
{
label: l10n.get('landing.modal.close'),
class: 'confirm_button',
button: 'confirmbutton',
labelname: 'confirmButtonLabel'
}
],
showGoBackButton: false
};
switch (target.id) {
case 'watch-promo':
if (!this._playerVisible) {
GA.onEvent('Action', 'ButtonWelcomeScreen', {eventLabel: 'PromoVideo'});
application.route('promoplayer');
}
break;
case 'login-btn':
GA.onEvent('Action', 'ButtonWelcomeScreen', {eventLabel: 'Login'});
application.route('username');
break;
case 'more-info':
GA.onEvent('Action', 'ButtonWelcomeScreen', {eventLabel: 'MoreInfo'});
application.route('qrmodal', qrModalConfig);
break;
}
},
/**
* Sets the event listeners.
*
* @private
*/
_setEventListeners: function () {
this.playerInterface.listen(Utils.bind(this.onPlayerEvent, this));
this._setTizenMultitaskHandler();
this.addEventListener('keydown', this._onKeyDownBound);
this.addEventListener('select', this._onSelectBound);
this.addEventListener('focus', this._onFocusBound);
},
/**
* Removes the event listeners.
*
* @private
*/
_removeEventListeners: function () {
this.playerInterface.destroy();
this._removeTizenMultitaskHandler();
this.removeEventListener('keydown', this._onKeyDownBound);
this.removeEventListener('select', this._onSelectBound);
this.removeEventListener('focus', this._onFocusBound);
},
/**
* Blur event.
*
* @private
*/
_onBlur: function () {
this._removeTizenMultitaskHandler();
},
/**
* Focus event.
*
* @private
*/
_onFocus: function () {
this._setTizenMultitaskHandler();
},
/**
* Toggle players with promo videos.
*
* @param {boolean} show - True if player should be visible.
*/
togglePlayers: function (show) {
var mediaPlayerState = mediaPlayer.getState(),
main = application.getComponent('main'),
playerComponent = application.getComponent('player');
if (mediaPlayerState !== MediaPlayer.STATE.EMPTY) {
mediaPlayer.stop();
mediaPlayer.reset();
}
if (show) {
this._mainContainer.hide(mainContainerAnimOptions);
main.setStyleTo('display', 'none');
application.route('promoplayer');
if (playerComponent) {
playerComponent.setStyleTo('display', 'block');
}
this._playerVisible = true;
} else {
application.hideLoader();
playerComponent.back();
main.setStyleTo('display', 'block');
this._displayPromoVideo();
this._mainContainer.show(mainContainerAnimOptions);
this._playerVisible = false;
this._mainContainer.focus();
}
},
/**
* Removes the tizen multitask handler.
*/
_removeTizenMultitaskHandler: function removeTizenMultitaskHandlerFn () {
if (!this._listenening) {
return;
}
document.removeEventListener('visibilitychange', this._multitaskHandler);
this._listenening = false;
},
/**
* Sets the tizen multitask handler.
*/
_setTizenMultitaskHandler: function setTizenMultitaskHandlerFn () {
if (this._listenening) {
return;
}
this._listenening = true;
document.addEventListener('visibilitychange', this._multitaskHandler);
},
/**
* Executes the close functionality.
*/
_onClose: function () {
application.route('error', {
type: 'exit-popup',
title: L10N.getInstance().get('errors.exit_confirmation'),
button: [
{
name: 'confirmbtn',
id: 'exit-confirm-button',
label: L10N.getInstance().get('errors.confirm_close')
},
{
name: 'rejectbtn',
id: 'exit-reject-button',
label: L10N.getInstance().get('errors.reject_close')
}
]
});
}
});
return Landing;
});