define('application/components/sports', [
'application/components/uibuilder',
'application/managers/api',
'antie/runtimecontext',
'rofl/widgets/label',
'rofl/lib/l10n',
'rofl/widgets/container',
'antie/widgets/verticallist',
'rofl/lib/utils',
'application/managers/genre',
'application/models/uibuilder/filteredResult',
'application/widgets/movies/grid',
'rofl/analytics/web/google',
'rofl/lib/promise',
'application/widgets/infoblock',
'rofl/events/keyevent',
'antie/storageprovider',
'application/widgets/uibuilder/filter',
'application/managers/halo'
], function (
UIBuilder,
ApiManager,
RuntimeContext,
Label,
L10N,
Container,
VerticalList,
Utils,
GenreManager,
FilteredResult,
Grid,
GoogleAnalytics,
Promise,
InfoBlock,
KeyEvent,
StorageProvider,
Filter,
HaloManager
) {
'use strict';
var api = ApiManager.getKPNAPI(),
application = RuntimeContext.getCurrentApplication(),
device = application.getDevice(),
storage = device.getStorage(StorageProvider.STORAGE_TYPE_SESSION, 'storage'),
layout = application.getLayout(),
l10n = L10N.getInstance(),
GA = GoogleAnalytics.getInstance(),
EVENT = {
Sports_EditorialClickAction: 'Sports_EditorialClickAction',
UserClickedonFilter: 'Sports_UserClickedonFilter',
UserClickedonSortingOptions: 'Sports_UserClickedonSortingOptions'
},
filterTypes = {
SORT: 'sort',
FILTER: 'filter'
},
sortOptions = {},
filterOptions = {},
infoblockConfig = {
id: 'back-on-top-block',
text: l10n.get('infoblock'),
classname: ['icon', 'icon-back-v2'],
position: 'right'
},
STORAGE_ITEMS = {
parental: 'parental'
},
topPosition = layout.sports.top;
return UIBuilder.extend({
/**
* Initialises the component.
*/
init: function init () {
this.pageId = 'sports';
init.base.call(this);
},
/**
* Builds the component.
*
* @private
*/
_build: function _build () {
_build.base.call(this);
this._buildPageContainer();
this._buildHeader();
this._buildTitle({
label: {text: l10n.get('sports.title'), classNames: ['top-title']}
});
this._buildInfoBlock();
},
/**
* Builds the header.
*
* @private
*/
_buildPageContainer: function () {
var pageContainer = this._pageContainer = new VerticalList();
this.appendChildWidget(pageContainer);
},
/**
* Builds the header.
*
* @private
*/
_buildHeader: function () {
var header = this._header = new Container();
header.addClass('header');
this._pageContainer.appendChildWidget(header);
},
/**
* Builds the no results message.
*
* @private
*/
_showNoResultsMessage: function () {
var noResultsLabel = this._noResultsLabel = new Label({
text: l10n.get('sports.noresults'),
classNames: ['noresults']
});
this.addClass('empty-result');
this._widgetList.removeChildWidgets();
this._widgetList.appendChildWidget(noResultsLabel);
},
/**
* Builds the infoblock.
*
* @private
*/
_buildInfoBlock: function () {
var infoblock = this._infoblock = new InfoBlock(infoblockConfig);
infoblock.addClass('info-block');
this.appendChildWidget(infoblock);
},
/**
* BeforeShow event.
*
* @param {Object} e - The event data.
*/
onBeforeShow: function (e) {
var activeRowIndex,
isParentalActive,
eventArgs = e.args;
this._filtersEnabled = false;
application.showLoader();
if (!e.fromBack) {
this._resetPage();
this._infoblock.hide({skipAnim: true});
if (eventArgs && Utils.isFunction(eventArgs.callback)) {
eventArgs.callback();
}
} else {
application.hideLoader();
this.alignCarouselsToLastIndex();
activeRowIndex = this._widgetList && this._widgetList.getActiveChildWidgetIndex();
this._widgetList.focus();
isParentalActive = storage.getItem(STORAGE_ITEMS.parental);
if (activeRowIndex > 0) {
this._infoblock.show();
} else {
this._infoblock.hide({skipAnim: true});
}
if (!this._assetsUnlocked && !isParentalActive) {
this._unlockAssets();
}
}
this._updateProgressbars();
},
/**
* Loads the data.
*
* @param {Object} params - The parameters.
* @private
*/
_loadData: function loadMoviesData (params) {
var defaultParams = {
page: application.getConfiguration().PAGES.SPORTS
},
customParams = params || {},
allParams = Utils.extend(defaultParams, customParams);
api.read('uibuilder/page', {
params: allParams
}).then(Utils.bind(function (response) {
var promises = [];
promises.push(HaloManager.getInstance().getSportsScreenData()
.then(Utils.bind(this._getEditorialBlocksContent, this))
);
Utils.each(response.getSections(), function (section) {
promises.push(section.prepare());
});
Promise.all(promises)
.then(Utils.bind(this._onDataReady, this));
}, this));
},
/**
* Get the editorial blocks' contents (The watchall content).
*
* @param {Object} editorialBlocks - The requested editorial blocks item.
* @returns {Object} - Returns editorialBlocks.
* @private
*/
_getEditorialBlocksContent: function (editorialBlocks) {
var promises = [];
Utils.each(editorialBlocks.getItem().editorialBlocks, Utils.bind(function (editorialBlock) {
promises.push(editorialBlock.getWatchAll().prepare());
}), this);
if (promises.length) {
return Promise.all(promises)
.then(function () {
return editorialBlocks;
});
}
return editorialBlocks;
},
/**
* Loads the filtered data.
*
* @private
*/
_loadFilteredData: function loadFilteredData () {
var firstLoadTo = application.getConfiguration().series.firstLoadTo;
if (Object.keys(this._getActiveFilters()).length < 1) {
this._resetPage();
return;
}
this._previousActiveRowNumber = null;
this._buildGrid();
this._getFilteredData(firstLoadTo)
.then(Utils.bind(this._onDataReady, this));
},
/**
* Returns the filtered data.
*
* @param {number} [firstLoadTo] - The first number to load if not paginating.
*
* @returns {Promise} - Returns the filtered data promise.
* @private
*/
_getFilteredData: function (firstLoadTo) {
var selectedFilter = this._getActiveFilters()[filterTypes.FILTER] ? this._getActiveFilters()[filterTypes.FILTER].value : null,
selectedSort = this._getActiveFilters()[filterTypes.SORT] ? this._getActiveFilters()[filterTypes.SORT].value : null,
newPaginationIndex = this._lastPaginationIndex + application.getConfiguration().series.followingLoads,
filter,
order,
sort,
options,
pagination;
sort = selectedSort ? '&sortOrder=' + selectedSort.sortOrder : '';
order = selectedSort ? '&orderBy=' + selectedSort.orderBy : '';
if (firstLoadTo) {
pagination = '&from=0&to=' + firstLoadTo;
newPaginationIndex = firstLoadTo;
} else {
pagination = '&from=' + this._lastPaginationIndex + '&to=' + newPaginationIndex;
}
this._lastPaginationIndex = newPaginationIndex;
filter = selectedFilter ? '&filter_excludedGenres=' + this._getActiveFilters()[filterTypes.FILTER].value : '';
options = {
uri: '/TRAY/SEARCH/VOD/' +
'?filter_contentType=GROUP_OF_BUNDLES' +
'&filter_contentSubtype=SERIES' +
'&filter_quality=hd' +
'&dfilter_packages=matchSubscription' +
'&filter_technicalPackages=10078,10081,10129,10132,10159,10162,10228,10231,10252,10255,10258,10261'
+ order + sort + filter + pagination
};
return new FilteredResult(options).prepare();
},
/**
* Lazy loading data fetch.
*
* @private
*/
_loadMoreFilteredData: function _loadMoreFilteredData () {
if (!this._loadInProgress) {
this._loadInProgress = true;
this._getFilteredData()
.then(Utils.bind(function (data) {
if (data._items) {
this._grid.appendData(data._items, false, false);
}
this._loadInProgress = false;
}, this));
}
},
/**
* Gets executed when the page data has loaded.
*
* @param {Array} sections - The sections to build.
* @private
*/
_onDataReady: function (sections) {
var sportsLayout = layout.sports,
firstContentCarousel,
carouselWidget;
topPosition = sportsLayout.top;
this.buildWidgets(sections);
this.alignCarousels();
firstContentCarousel = this._widgetList.getChildWidgetByIndex(0);
this._addFilterWidget();
this._buildClock();
this._widgetList.focus();
if (!this.heroFound) {
topPosition = sportsLayout.topNoHero;
firstContentCarousel.focus();
}
// Check if it there's only a hero and a carousel to reduce top.
if (this._widgetList.getChildWidgetCount() === 2) {
carouselWidget = this._widgetList.getChildWidgetByIndex(1);
carouselWidget.addClass('single-ui-carousel');
}
this._widgetList.setStyleTo('top', topPosition + 'px');
application.hideLoader();
},
/**
* Builds the grid.
*
* @private
*/
_buildGrid: function () {
var opts = {
loadmoreCallback: Utils.bind(this._loadMoreFilteredData, this)
};
this._grid = new Grid(opts);
},
/**
* Unlock the assets.
*
* @private
*/
_unlockAssets: function () {
var rows = this._widgetList.getChildWidgets(),
assets;
this._assetsUnlocked = true;
Utils.each(rows, function (row) {
if (row.getCarousel) {
assets = row.getCarousel().getChildWidgets();
Utils.each(assets, function (asset) {
if (asset.hasClass('asset')) {
asset.unlock();
}
});
}
});
if (this._grid) {
Utils.each(this._grid.getList().getChildWidgets(), function (row) {
Utils.each(row.getChildWidgets(), function (asset) {
if (asset.hasClass('asset')) {
asset.unlock();
}
});
});
}
},
/**
* Select event.
*
* @param {Object} e - The event data.
* @private
*/
_onSelect: function (e) {
var selectAction = Utils.bind(function () {
if (e.target.hasClass('asset')) {
this._routeToDetails({
data: e.target.getDataItem().item
});
}
}, this);
switch (e.target.id) {
case 'back-on-top-block':
this._onBack();
return;
case 'filter-genre-btn':
this._genreFilterSelected();
return;
case 'filter-filter-btn':
this._commonFilterSelected();
return;
case 'filter-sort-btn':
this._sortFilterSelected();
return;
// no default
}
if (e.target.hasClass('watchall') || e.target.hasClass('editorial-block')) {
this.goToWatchAll(e.target.getDataItem());
return;
}
if (e.target.hasClass('pointer-button-big')) {
if (e.target.hasClass('left-pointer')) {
e.target.parentWidget.getCarousel().alignPrevious();
} else if (e.target.hasClass('right-pointer')) {
e.target.parentWidget.getCarousel().alignNext();
}
} else if (!e.target.isLocked()) {
selectAction();
} else {
application.route('parentalpin', {
successCallback: Utils.bind(function () {
selectAction();
this._unlockAssets();
}, this)
});
}
},
/**
* Builds genre filters.
*
* @private
*/
_buildGenreFilters: function () {
var commonFiltersButton,
sortingFiltersButton;
if (this._filtersEnabled) {
commonFiltersButton = this._commonfilter = new Filter({
text: l10n.get('sports.filterFilterText'),
id: 'filter-filter-btn',
isDropDown: true,
classList: 'icon-button',
type: 'filter'
});
sortingFiltersButton = this._sortfilter = new Filter({
text: l10n.get('sports.filterSortText'),
id: 'filter-sort-btn',
isDropDown: true,
classList: 'icon-button',
icon: 'icon-calender',
type: 'sort'
});
this._filterscontainer.appendChildWidget(sortingFiltersButton);
this._filterscontainer.appendChildWidget(commonFiltersButton);
}
},
/**
* Popup a modal to filter a genre.
*
* @private
*/
_genreFilterSelected: function () {
var genreArray = [],
genreValues = [],
genres = GenreManager.MOVIE_GENRES,
all = l10n.get('genre.overview'),
highlighted = l10n.get('genre.highlighted');
genreArray.push(all);
genreValues.push({
name: all,
values: null
});
genreArray.push(highlighted);
genreValues.push({
name: highlighted,
values: 11393
});
Utils.each(genres, function (genre) {
genreArray.push(genre.name);
genreValues.push(genre);
});
clearTimeout(this._timer);
application.route('dropdown', {
dataOptions: genreArray,
dataValues: genreValues,
prevValue: this._genrefilter.getGenreButton().getText(),
filter: 'genre',
callback: Utils.bind(this._onDropdownCallback, this),
showGoBackButton: true
});
},
/**
* Popup a modal to filter by filtering.
*
* @private
*/
_commonFilterSelected: function () {
var genreArray = [],
genreValues = [],
genres = filterOptions,
all = l10n.get('filter.all_sports');
genreArray.push(all);
genreValues.push({
name: all,
values: null
});
Utils.each(genres, function (value, key) {
genreArray.push(key);
genreValues.push(value);
});
clearTimeout(this._timer);
application.route('dropdown', {
dataOptions: genreArray,
dataValues: genreValues,
prevValue: this._commonfilter.getFilterButton().getText(),
filter: 'filter',
callback: Utils.bind(this._onDropdownCallback, this),
showGoBackButton: true
});
},
/**
* Popup a modal to filter by sorting.
*
* @private
*/
_sortFilterSelected: function () {
var genreArray = [],
genreValues = [],
genres = sortOptions,
all = l10n.get('sports.filterSortText');
genreArray.push(all);
genreValues.push({
name: all,
values: null
});
Utils.each(genres, function (value, key) {
genreArray.push(key);
genreValues.push(value);
});
clearTimeout(this._timer);
application.route('dropdown', {
dataOptions: genreArray,
dataValues: genreValues,
prevValue: this._sortfilter.getSortButton().getText(),
filter: 'sort',
callback: Utils.bind(this._onDropdownCallback, this),
showGoBackButton: true
});
},
/**
* Function fires after dropdown item is selected.
*
* @param {Object} event - Selected item.
* @private
*/
_onDropdownCallback: function (event) {
var target,
filterName,
valueObject;
if (!event) {
return;
}
application.showLoader();
target = event.target;
filterName = target._filterName;
valueObject = target._itemValueObject;
this._setFilter(filterName, valueObject);
this._markSelectedFilters();
this._sendFiltersAnalyticsEvents(filterName, valueObject.name);
this._loadFilteredData();
},
/**
* Upload text filter value.
*
* @param {string} filter - Filter name.
* @param {string} value - Value which should be set.
* @private
*/
_setFilter: function (filter, value) {
var buttonName = value.name;
switch (filter) {
case 'genre':
if (buttonName === l10n.get('genre.overview')) {
buttonName = l10n.get('genre.all');
}
this._genrefilter.getGenreButton().setText(buttonName);
break;
case 'filter':
if (buttonName === l10n.get('filter.all')) {
buttonName = l10n.get('filter.filter');
}
this._commonfilter.getFilterButton().setText(buttonName);
break;
case 'sort':
this._sortfilter.getSortButton().setText(buttonName);
break;
}
if (value.values || value.value) {
this._setActiveFilters(filter, value);
} else {
this._removeActiveFilter(filter);
}
},
/**
* Send the appropriate events to google analytics.
*
* @param {string} type - Type of the filter.
* @param {string} value - Value which should be sent to GA.
* @private
*/
_sendFiltersAnalyticsEvents: function (type, value) {
switch (type) {
case 'genre':
GA.onEvent('Action', EVENT.UserClickedonGenreFilter, {eventLabel: value});
break;
case 'filter':
GA.onEvent('Action', EVENT.UserClickedonFilter, {eventLabel: value});
break;
case 'sort':
GA.onEvent('Action', EVENT.UserClickedonSortingOptions, {eventLabel: value});
break;
}
},
/**
* Upload text filter value.
*
* @param {string} filter - Filter name.
* @param {string} value - Value which should be set.
* @private
*/
_setActiveFilters: function (filter, value) {
this._activeFilters = this._activeFilters || {};
this._activeFilters[filter] = value;
},
/**
* Upload text filter value.
*
* @param {string} filter - Filter name.
* @private
*/
_removeActiveFilter: function (filter) {
delete this._activeFilters[filter];
},
/**
* Return the active filter if any.
*
* @returns {Array} List of active filters.
* @private
*/
_getActiveFilters: function () {
return this._activeFilters;
},
/**
* Clear the filters set.
*
* @private
*/
_clearAllFilters: function () {
this._activeFilters = {};
},
/**
* Mark active filtes as selected, if any.
*
* @private
*/
_markSelectedFilters: function () {
var activeFilters = this._getActiveFilters();
if (activeFilters['filter']) {
if (!this._commonfilter.hasClass('selected')) {
this._commonfilter.addClass('selected');
}
} else {
if (this._commonfilter.hasClass('selected')) {
this._commonfilter.removeClass('selected');
}
}
if (activeFilters['sort']) {
if (!this._sortfilter.hasClass('selected')) {
this._sortfilter.addClass('selected');
}
} else {
if (this._sortfilter.hasClass('selected')) {
this._sortfilter.removeClass('selected');
}
}
},
/**
* Resets the filters to their initial texts.
*
* @private
*/
_resetFiltersText: function () {
this._commonfilter.getFilterButton().setText(l10n.get('filter.all_sports'));
this._sortfilter.getSortButton().setText(l10n.get('sports.filterSortText'));
},
/**
* Selected item change event.
*
* @param {Object} e - The event data.
* @private
*/
_onSelectedItemChange: function (e) {
var activeRowNumber,
itemsLength,
target = e.target;
if (target === this._widgetList && !this._grid) {
this._scroll(e);
activeRowNumber = e.index + 1;
if (activeRowNumber > 1) {
this._infoblock.show();
} else {
this._infoblock.hide();
}
} else if (this._grid) {
activeRowNumber = this._grid.getActiveChildIndex() + 1;
if (activeRowNumber > 1) {
this._infoblock.show();
} else {
this._infoblock.hide();
}
if (this._grid.getDataItem()) {
itemsLength = this._grid.getDataItem().items.length;
if (!this._previousActiveRowNumber || activeRowNumber > this._previousActiveRowNumber && itemsLength < this._totalCount) {
this._grid.checkLoadMore();
this._previousActiveRowNumber = activeRowNumber;
}
}
}
},
/**
* Back event.
*
* @private
*/
_onBack: function () {
var activeRowNumber,
topCarousel;
if (this._grid) {
activeRowNumber = this._grid.getActiveChildIndex() + 1;
} else {
activeRowNumber = this._widgetList._selectedIndex + 1;
}
if (activeRowNumber !== 1) {
if (this._grid) {
this._grid.alignToFirstItem();
} else {
// Focus on first carousel/hero.
this._widgetList.setActiveChildIndex(0);
topCarousel = this._widgetList.getChildWidgetByIndex(0).getCarousel();
topCarousel.alignToIndex(0);
topCarousel.setActiveChildIndex(0);
}
} else {
application.focusMenu('main');
}
},
/**
* Reset the page to initial view.
*
* @private
*/
_resetPage: function () {
this.removeAll();
this.removeClass('empty-result');
this._loadData();
if (this._filtersEnabled) {
this._clearAllFilters();
this._markSelectedFilters();
this._resetFiltersText();
}
this._grid = null;
},
/**
* Scrolls the page.
*
* @param {Object} e - The selected item change event data.
* @param {boolean} donotAnim - Do not animate.
* @param {boolean} [reset] - True if the alignment should reset.
* @private
*/
_scroll: function (e, donotAnim, reset) {
if (!e.item.outputElement) {
return;
}
// Skip align at last carousel, this way we don't leave a gap at the end of the screen.
if (this._widgetList.getIndexOfChildWidget(e.item) >= 0) {
this._align(e.item, donotAnim, reset, e.index);
}
},
/**
* Aligns the widgetlist to the item.
*
* @param {Object} item - The item.
* @param {boolean} doNotAnim - Prevent animation.
* @param {boolean} [reset] - True if the alignment should reset.
* @private
*/
_align: function (item, doNotAnim, reset, index) {
var listElement = this._widgetList.outputElement,
listTop = listElement.getBoundingClientRect().top,
left = 0,
dimensions,
difference,
newTop,
sportsLayout = layout.sports,
marginTop = sportsLayout.marginTopCarousels;
dimensions = item.outputElement.getBoundingClientRect();
if (index > 1 || (index && !this.heroFound)) {
dimensions = this._widgetList.getChildWidgetByIndex(index - 1).outputElement.getBoundingClientRect();
}
difference = dimensions.top - marginTop;
if (difference > 0) {
newTop = listTop - difference;
} else {
newTop = listTop + -difference;
}
if (newTop > 0 || reset) {
newTop = topPosition;
}
device.moveElementTo({
el: listElement,
duration: 300,
fps: 60,
easing: 'easeInOut',
skipAnim: !!doNotAnim,
to: {
top: newTop,
left: left
}
});
}
});
});