define('application/components/watchall', [
'rofl/widgets/component',
'application/widgets/watchall/grid',
'rofl/widgets/label',
'rofl/lib/utils',
'rofl/widgets/container',
'antie/events/keyevent',
'antie/runtimecontext',
'application/models/production/uibuilder/series',
'application/widgets/clock',
'rofl/lib/l10n',
'application/widgets/infoblock',
'rofl/widgets/button'
], function (
Component,
Grid,
Label,
Utils,
Container,
KeyEvent,
RuntimeContext,
SeriesModel,
Clock,
L10N,
InfoBlock,
Button
) {
'use strict';
var application = RuntimeContext.getCurrentApplication(),
l10n = L10N.getInstance(),
infoblockConfig = {
id: 'back-on-top-block',
text: l10n.get('infoblock'),
classname: ['icon', 'icon-back-v2'],
position: 'right'
},
CONTENT_TYPES = {
VOD: 'VOD',
SERIES: 'GROUP_OF_BUNDLES',
LIVE: 'PROGRAM'
};
return Component.extend({
/**
* Initialises the watch all component.
*/
init: function init () {
init.base.call(this, 'watchall');
this._onKeyDownBound = Utils.bind(this._onKeyDown, this);
this._onSelectedItemChangeBound = Utils.bind(this._onSelectedItemChange, this);
this._onSelectBound = Utils.bind(this._onSelect, this);
},
onBeforeRender: function onBeforeRender (e) {
var gridParams = e.args.gridParams || {};
this._build(gridParams);
},
/**
* Builds the component.
*
* @param {Object} gridParams - The grid configuration params.
* @private
*/
_build: function (gridParams) {
var title = this._title = new Label({ classNames: ['top-title'] }),
branding = this._branding = new Container(),
grid = this._grid = new Grid(gridParams);
branding.addClass('page-branding');
branding.appendChildWidget(title);
this.appendChildWidget(branding);
this.appendChildWidget(grid);
this._buildInfoBlock();
this._buildClock();
},
/**
* Builds the infoblock.
*
* @private
*/
_buildInfoBlock: function () {
var infoblock = this._infoblock = new InfoBlock(infoblockConfig);
infoblock.addClass('info-block');
this.appendChildWidget(infoblock);
},
/**
* Builds the clock.
*
* @private
*/
_buildClock: function () {
var clock = new Clock();
clock.addClass('header-clock');
this.appendChildWidget(clock);
},
/**
* BeforeShow event.
*
* @param {Object} e - The event data.
*/
onBeforeShow: function (e) {
var watchAll = e.args.watchAll;
this._title.setText(e.args.title);
if (!watchAll.getItems()) {
watchAll.prepare()
.then(Utils.bind(this._onDataReady, this));
} else {
setTimeout(Utils.bind(this._onDataReady, this, watchAll), 0);
}
this.addEventListener('keydown', this._onKeyDownBound);
this.addEventListener('selecteditemchange', this._onSelectedItemChangeBound);
this.addEventListener('select', this._onSelectBound);
this._infoblock.hide({skipAnim: true});
},
/**
* BeforeHide event.
*/
onBeforeHide: function () {
this.removeEventListener('keydown', this._onKeyDownBound);
this.removeEventListener('selecteditemchange', this._onSelectedItemChangeBound);
this.removeEventListener('select', this._onSelectBound);
this.removeChildWidgets();
},
/**
* On Data Ready.
*
* @param {Object} watchAll - The watch all object.
* @private
*/
_onDataReady: function (watchAll) {
var label;
this._grid.alignToFirstItem();
this._grid.setDataItem({
items: watchAll.getItems()
}, true, true);
this._title.setText(watchAll.getTitle());
if (!watchAll.getItems().length) {
this._noResultsButton = new Button();
label = new Label({
text: l10n.get('sports.watchall.noresults', {title: watchAll.getTitle()})
});
this._noResultsButton.addClass('no-results');
this._noResultsButton.appendChildWidget(label);
this.appendChildWidget(this._noResultsButton);
this._noResultsButton.focus();
}
},
/**
* KeyDown event.
*
* @param {Object} e - The event data.
* @private
*/
_onKeyDown: function (e) {
e.preventDefault();
e.stopPropagation();
switch (e.keyCode) {
case KeyEvent.VK_LEFT:
application.focusMenu('main');
break;
case KeyEvent.VK_BACK:
if (this._grid && this._grid.getActiveChildIndex()) {
this._grid.alignToFirstItem();
} else {
this.parentWidget.back();
}
break;
}
},
/**
* Select event.
*
* @param {Object} e - The event data.
* @private
*/
_onSelect: function (e) {
var dataItem;
if (e.target.id === 'back-on-top-block') {
if (this._grid) {
this._grid.alignToFirstItem();
} else {
this.parentWidget.back();
}
} else if (e.target.hasClass('asset')) {
dataItem = e.target.getDataItem().item;
if (dataItem.isLocked && dataItem.isLocked()) {
application.route('parentalpin', {
successCallback: Utils.bind(this._unlockAssets, this, dataItem, e.target.playOnSelect())
});
} else if (e.target.playOnSelect()) {
this._playOnSelect(dataItem);
} else {
this._openDetail(dataItem);
}
}
},
/**
* Open detail page for the given content.
*
* @param {Object} dataItem - Data item to open its detail page.
*/
_openDetail: function (dataItem) {
var detailRoute;
switch (dataItem.getContentType()) {
case CONTENT_TYPES.VOD:
detailRoute = 'voddetail';
break;
case CONTENT_TYPES.SERIES:
detailRoute = 'seriesdetail';
break;
case CONTENT_TYPES.LIVE:
detailRoute = 'epgdetail';
break;
}
application.route(detailRoute, {
data: dataItem,
callback: Utils.bind(this.focus, this),
callingPage: 'watchall'
});
},
/**
* Unlock the assets.
*
* @param {Object} dataItem - The event's data item that has been unlocked.
* @param {boolean} playOnSelect - True if item should play on select.
* @private
*/
_unlockAssets: function (dataItem, playOnSelect) {
if (this._grid) {
Utils.each(this._grid.getList().getChildWidgets(), function (row) {
Utils.each(row.getChildWidgets(), function (asset) {
if (asset.hasClass('asset')) {
asset.unlock();
}
});
});
}
if (playOnSelect) {
this._playOnSelect(dataItem);
} else {
this._openDetail(dataItem);
}
},
/**
* Selected Item Change Event.
*
* @param {Object} e - The event data.
* @private
*/
_onSelectedItemChange: function (e) {
if (!e.item.outputElement) {
return;
}
if (this._grid.getActiveChildIndex() > 0) {
this._infoblock.show();
} else {
this._infoblock.hide();
}
},
/**
*
* @param {Object} routeParams - The player's route params.
* @param {string} playerRoute - The player to be used (liveplayer, vodplayer, catchupplayer...).
* @private
*/
_routeToPlayer: function (routeParams, playerRoute) {
playerRoute = playerRoute || 'player';
application.route(playerRoute, routeParams);
},
/**
* Show the player on top of this component.
*
* @private
*/
showPlayer: function () {
var main = application.getComponent('main'),
player = application.getComponent('player');
main.setStyleTo('display', 'none');
player.setStyleTo('display', 'block');
player.getChildWidget('player').setStyleTo('display', 'block');
this.parentWidget.setStyleTo('display', 'none');
},
/**
* Attempts to play asset on select.
*
* @param {Object} dataItem - Data item to play.
* @private
*/
_playOnSelect: function (dataItem) {
if (dataItem.canPlay()) {
// Route to player if should play on select (bookmark layout for vod).
this._routeToPlayer({
data: dataItem,
type: 'VOD_MOVIE',
callingPage: 'watchall'
}, 'playervod');
}
}
});
});