Source: components/uibuilder.js

  1. define('application/components/uibuilder', [
  2.     'rofl/widgets/component',
  3.     'rofl/lib/utils',
  4.     'rofl/lib/l10n',
  5.     'application/widgets/uibuilder/hero',
  6.     'application/widgets/uibuilder/carousel',
  7.     'application/widgets/uibuilder/filter',
  8.     'application/widgets/uibuilder/herocarousel',
  9.     'application/widgets/uibuilder/heroslider',
  10.     'application/widgets/clock',
  11.     'rofl/widgets/verticallist',
  12.     'antie/widgets/horizontallist',
  13.     'rofl/events/keyevent',
  14.     'antie/runtimecontext',
  15.     'rofl/widgets/label',
  16.     'rofl/widgets/container',
  17.     'application/formatters/vodasset',
  18.     'application/formatters/homeepgasset',
  19.     'application/formatters/heroslider',
  20.     'application/formatters/sports',
  21.     'application/formatters/editorials',
  22.     'application/formatters/bookmarkasset',
  23.     'rofl/analytics/web/google',
  24.     'application/managers/halo'
  25. ], function (
  26.     Component,
  27.     Utils,
  28.     L10N,
  29.     Hero,
  30.     Carousel,
  31.     Filter,
  32.     HeroCarousel,
  33.     HeroSlider,
  34.     Clock,
  35.     VerticalList,
  36.     HorizontalList,
  37.     KeyEvent,
  38.     RuntimeContext,
  39.     Label,
  40.     Container,
  41.     VodFormatter,
  42.     EpgFormatter,
  43.     HeroSliderFormatter,
  44.     SportsFormatter,
  45.     EditorialFormatter,
  46.     BookmarkFormatter,
  47.     GoogleAnalytics,
  48.     HaloManager
  49. ) {
  50.     'use strict';
  52.     var application = RuntimeContext.getCurrentApplication(),
  53.         l10n = L10N.getInstance(),
  54.         GA = GoogleAnalytics.getInstance(),
  55.         UPDATE_CAROUSEL_INTERVAL_TIME = 120000, // 2 minutes.
  56.         PROGRESS_INTERVAL_TIME = 5000,
  57.         UIBuilderComponent,
  58.         WIDGET_TYPES = {
  59.             EDITORIAL_BLOCK: 'editorial',
  60.             HERO: 'hero',
  61.             HERO_SLIDER: 'heroSlider',
  62.             CAROUSEL: 'carousel',
  63.             FILTERED_RESULT: 'filteredResult'
  64.         },
  65.         layout = application.getLayout(),
  66.         VOD_CAROUSEL_PARAMS = {
  67.             formatter: VodFormatter,
  68.             layout: layout.asset.vod,
  69.             numberOfVisibleItemsOnScreen: 8,
  70.             watchAll: {
  71.                 classNames: []
  72.             }
  73.         },
  74.         EPG_CAROUSEL_PARAMS = {
  75.             formatter: EpgFormatter,
  76.             layout: layout.asset.epg,
  77.             numberOfVisibleItemsOnScreen: 4,
  78.             watchAll: {
  79.                 classNames: ['landscape-watchall']
  80.             }
  81.         },
  82.         BOOKMARK_CAROUSEL_PARAMS = {
  83.             formatter: BookmarkFormatter,
  84.             layout: layout.asset.epg,
  85.             numberOfVisibleItemsOnScreen: 4,
  86.             watchAll: {
  87.                 classNames: ['landscape-watchall']
  88.             }
  89.         },
  90.         VOD_GRID = {
  91.             grid: {
  92.                 columns: 8,
  93.                 width: layout.requiredScreenSize.width,
  94.                 height: layout.watchall.gridHeight,
  95.                 alignPoint: 0,
  96.                 culling: true,
  97.                 continuousListener: true,
  98.                 navigateNext: true,
  99.                 animOptions: {
  100.                     easing: 'easeInOut',
  101.                     fps: 60,
  102.                     duration: 200,
  103.                     skipAnim: false
  104.                 }
  105.             },
  106.             asset: {
  107.                 width: layout.asset.vod.width,
  108.                 height: layout.asset.vod.height,
  109.                 formatter: VodFormatter
  110.             }
  111.         },
  112.         EPG_GRID = {
  113.             grid: {
  114.                 columns: 4,
  115.                 width: layout.requiredScreenSize.width,
  116.                 height: layout.watchall.gridHeight,
  117.                 alignPoint: 0,
  118.                 culling: true,
  119.                 continuousListener: true,
  120.                 navigateNext: true,
  121.                 animOptions: {
  122.                     easing: 'easeInOut',
  123.                     fps: 60,
  124.                     duration: 200,
  125.                     skipAnim: false
  126.                 }
  127.             },
  128.             asset: {
  129.                 width: layout.asset.epg.width,
  130.                 height: layout.asset.epg.height,
  131.                 formatter: EpgFormatter
  132.             }
  133.         },
  134.         BOOKMARK_GRID = {
  135.             grid: {
  136.                 columns: 4,
  137.                 width: layout.requiredScreenSize.width,
  138.                 height: layout.watchall.gridHeight,
  139.                 alignPoint: 0,
  140.                 culling: true,
  141.                 continuousListener: true,
  142.                 navigateNext: true,
  143.                 animOptions: {
  144.                     easing: 'easeInOut',
  145.                     fps: 60,
  146.                     duration: 200,
  147.                     skipAnim: false
  148.                 }
  149.             },
  150.             asset: {
  151.                 width: layout.asset.epg.width,
  152.                 height: layout.asset.epg.height,
  153.                 formatter: BookmarkFormatter
  154.             }
  155.         },
  156.         WIDGETS_PARAMS = {
  157.             home: {
  158.                 hero: {
  159.                     id: 'hero',
  160.                     formatter: HeroSliderFormatter,
  161.                     numberOfVisibleItemsOnScreen: 4,
  162.                     layout: layout.home.slider
  163.                 },
  164.                 carousels: {
  165.                     vod: VOD_CAROUSEL_PARAMS,
  166.                     epg: EPG_CAROUSEL_PARAMS,
  167.                     bookmark: BOOKMARK_CAROUSEL_PARAMS
  168.                 },
  169.                 grid: {
  170.                     vod: VOD_GRID,
  171.                     epg: EPG_GRID,
  172.                     bookmark: BOOKMARK_GRID
  173.                 }
  174.             },
  175.             movies: {
  176.                 hero: {
  177.                     id: 'hero',
  178.                     formatter: HeroSliderFormatter,
  179.                     numberOfVisibleItemsOnScreen: 4,
  180.                     layout: layout.home.slider
  181.                 },
  182.                 carousels: {
  183.                     vod: VOD_CAROUSEL_PARAMS
  184.                 },
  185.                 grid: {
  186.                     vod: VOD_GRID
  187.                 }
  188.             },
  189.             series: {
  190.                 hero: {
  191.                     id: 'hero',
  192.                     formatter: HeroSliderFormatter,
  193.                     numberOfVisibleItemsOnScreen: 4,
  194.                     layout: layout.home.slider
  195.                 },
  196.                 carousels: {
  197.                     vod: VOD_CAROUSEL_PARAMS
  198.                 },
  199.                 grid: {
  200.                     vod: VOD_GRID
  201.                 }
  202.             },
  203.             sports: {
  204.                 editorialBlocks: {
  205.                     id: 'hero',
  206.                     formatter: EditorialFormatter,
  207.                     numberOfVisibleItemsOnScreen: 4,
  208.                     layout: layout.home.slider
  209.                 },
  210.                 carousels: {
  211.                     epg: EPG_CAROUSEL_PARAMS
  212.                 },
  213.                 grid: {
  214.                     epg: EPG_GRID
  215.                 }
  216.             }
  217.         };
  219.     UIBuilderComponent = Component.extend({
  221.         /**
  222.          * Initialises the component.
  223.          */
  224.         init: function init () {
  225.             init.base.call(this, this.pageId);
  227.             this.addClass('page');
  228.             this._buildFiltersContainer();
  229.             this._buildGenreFilters();
  231.             this._build();
  232.             this._onKeyDownBound = Utils.bind(this._onKeyDown, this);
  233.             this._onToplistFocusBound = Utils.bind(this._onToplistFocus, this);
  235.             this._activeFilters = {};
  237.             this._onSelectedItemChangeBound = Utils.bind(this._onSelectedItemChange, this);
  238.             this._onSelectBound = Utils.bind(this._onSelect, this);
  239.             this._unlockAssetsBound = Utils.bind(this._unlockAssets, this);
  240.             this._lockAssetsBound = Utils.bind(this._lockAssets, this);
  241.         },
  243.         /**
  244.          * Builds the page layout.
  245.          *
  246.          * @private
  247.          */
  248.         _build: function () {
  249.             this._list = this.appendChildWidget(new VerticalList());
  250.             this._topList = this._list.appendChildWidget(new HorizontalList());
  251.             this._widgetList = this._list.appendChildWidget(new VerticalList());
  253.             this._widgetList.addClass('widget-list');
  254.         },
  256.         /**
  257.          * Builds the filters container.
  258.          *
  259.          * @private
  260.          */
  261.         _buildFiltersContainer: function () {
  262.             var filtersContainer = this._filterscontainer = new HorizontalList();
  264.             filtersContainer.addClass('filters-container');
  265.             filtersContainer.addClass('filters');
  266.         },
  268.         /**
  269.          * Builds genre filters.
  270.          *
  271.          * @private
  272.          */
  273.         _buildGenreFilters: function () {
  274.             var genreFiltersButton = this._genrefilter = new Filter({
  275.                 text: l10n.get('genre.all'),
  276.                 id: 'filter-genre-btn',
  277.                 isDropDown: true,
  278.                 classList: 'icon-button',
  279.                 type: 'genre'
  280.             }),
  282.             commonFiltersButton = this._commonfilter = new Filter({
  283.                 text: l10n.get('filter.filter'),
  284.                 id: 'filter-filter-btn',
  285.                 isDropDown: true,
  286.                 classList: 'icon-button',
  287.                 type: 'filter'
  288.             }),
  290.             sortingFiltersButton = this._sortfilter = new Filter({
  291.                 text: l10n.get('sort.all'),
  292.                 id: 'filter-sort-btn',
  293.                 isDropDown: true,
  294.                 classList: 'icon-button',
  295.                 type: 'sort'
  296.             });
  298.             this._filterscontainer.appendChildWidget(genreFiltersButton);
  299.             this._filterscontainer.appendChildWidget(commonFiltersButton);
  300.             this._filterscontainer.appendChildWidget(sortingFiltersButton);
  301.         },
  303.         /**
  304.          * Builds the title.
  305.          *
  306.          * @param {Object} params - Title params.
  307.          * @param {Object} params.label.text - Label text.
  308.          * @param {Array} params.label.classNames - Label class names..
  309.          * @private
  310.          */
  311.         _buildTitle: function (params) {
  312.             var titleParams = params || {},
  313.                 title = this._title = new Label(titleParams.label),
  314.                 branding = this._branding = new Container();
  316.             branding.addClass('page-branding');
  317.             branding.addClass('page-title');
  318.             branding.appendChildWidget(title);
  319.             this._header.appendChildWidget(branding);
  320.         },
  322.         /**
  323.          * BeforeRender event.
  324.          */
  325.         onBeforeRender: function () {
  326.             this.addEventListener('keydown', this._onKeyDownBound);
  327.             this._topList.addEventListener('keydown', this._onKeyDownBound);
  328.             this._topList.addEventListener('focus', this._onToplistFocusBound);
  329.             this.addEventListener('selecteditemchange', this._onSelectedItemChangeBound);
  330.             this.addEventListener('select', this._onSelectBound);
  331.             application.addEventListener('$unlocked', this._unlockAssetsBound);
  332.             application.addEventListener('$locked', this._lockAssetsBound);
  334.             HaloManager.getInstance()
  335.                 .getServiceMessage()
  336.                 .then(function (r) {
  337.                     if (r) {
  338.                         application.route('service');
  339.                     }
  340.                 });
  341.         },
  343.         /**
  344.          * BeforeHide event.
  345.          */
  346.         onBeforeHide: function () {
  347.             this.removeEventListener('keydown', this._onKeyDownBound);
  348.             this._topList.removeEventListener('keydown', this._onKeyDownBound);
  349.             this._topList.removeEventListener('focus', this._onToplistFocusBound);
  350.             this.removeEventListener('selecteditemchange', this._onSelectedItemChangeBound);
  351.             this.removeEventListener('select', this._onSelectBound);
  352.             application.removeEventListener('$unlocked', this._unlockAssetsBound);
  353.             application.removeEventListener('$locked', this._lockAssetsBound);
  354.             this._clearProgressInterval();
  355.             this._clearUpdateCarouselsInterval();
  357.             this._grid = null;
  358.         },
  360.         /**
  361.          * AddFilterWidget to the page layout event.
  362.          */
  363.         _addFilterWidget: function () {
  364.             this._topList.appendChildWidget(this._filterscontainer);
  365.         },
  367.         /**
  368.          * Builds the clock.
  369.          *
  370.          * @private
  371.          */
  372.         _buildClock: function () {
  373.             var clock = this._clock = new Clock();
  375.             clock.addClass('header-clock');
  376.             this._topList.appendChildWidget(clock);
  377.         },
  379.         /**
  380.          * Toplist focus event.
  381.          *
  382.          * @param {Object} e - The event data.
  383.          * @private
  384.          */
  385.         _onToplistFocus: function (e) {
  387.             if (e.target === this._hero) {
  388.                 if (!this._hero.isVisible()) {
  389.                     this._hero.show();
  391.                     e.index = 0;
  392.                     e.item = e.target;
  393.                     this._scroll(e, true, true);
  394.                     this._widgetList.setActiveChildIndex(0);
  396.                     if (this._grid) {
  397.                         this._grid.alignToFirstItem();
  398.                     }
  399.                 }
  401.                 if (this._grid && this._grid.getActiveChildIndex() > 0) {
  402.                     this._grid.alignToFirstItem();
  403.                 }
  404.             }
  405.         },
  407.         /**
  408.          * KeyDown event.
  409.          *
  410.          * @param {Object} e - The event data.
  411.          * @private
  412.          */
  413.         _onKeyDown: function (e) {
  414.             var filtersContainerItem;
  416.             switch (e.keyCode) {
  417.                 case KeyEvent.VK_BACK:
  418.                     this._onBack();
  419.                     break;
  420.                 case KeyEvent.VK_LEFT:
  421.                     e.preventDefault();
  422.                     e.stopPropagation();
  423.                     application.focusMenu('main');
  424.                     break;
  425.                 case KeyEvent.VK_RIGHT:
  426.                     e.preventDefault();
  427.                     e.stopPropagation();
  428.                     break;
  429.                 case KeyEvent.VK_DOWN:
  430.                     if (this._filterscontainer && this._filterscontainer.isFocussed()) {
  431.                         if (this.heroFound) {
  432.                             this._hero.focusAction(this._hero.getButtonCount() - 1);
  433.                             if (!this._hero.isVisible()) {
  434.                                 this._widgetList.focus();
  435.                                 if (this._grid) {
  436.                                     this._grid.alignToActiveIndex();
  437.                                 }
  438.                             }
  440.                             e.preventDefault();
  441.                             e.stopPropagation();
  442.                         } else if (this._grid) {
  443.                             this._widgetList.focus();
  444.                             this._grid.alignToActiveIndex();
  445.                         }
  446.                     }
  447.                     break;
  448.                 case KeyEvent.VK_UP:
  449.                     if (this.heroFound && this._hero.isFocussed()) {
  450.                         this._hero.setButtonActiveChildIndex(this._hero.getButtonCount() - 1);
  452.                         filtersContainerItem = this._filterscontainer && this._filterscontainer.getChildWidgetByIndex(0);
  454.                         if (filtersContainerItem) {
  455.                             filtersContainerItem.focus();
  456.                         }
  458.                         e.preventDefault();
  459.                         e.stopPropagation();
  460.                     }
  461.                     break;
  462.             }
  463.         },
  465.         /**
  466.          * Builds the widgets and appends them to the component.
  467.          *
  468.          * @param {Array} widgets - The widgets.
  469.          */
  470.         buildWidgets: function (widgets) {
  471.             this.heroFound = false;
  473.             Utils.each(widgets, function (widget) {
  475.                 this.buildWidget(widget);
  476.             }, this);
  478.             if (!this.heroFound) {
  479.                 this.addClass('no-hero-item');
  480.                 this._list.getChildWidgetByIndex(0).focus();
  481.             } else {
  482.                 if (this.hasClass('no-hero-item')) {
  483.                     this.removeClass('no-hero-item');
  484.                 }
  485.             }
  486.         },
  488.         /**
  489.          * Builds the individual widget.
  490.          *
  491.          * @param {Object} widget - The widget. See WIDGET_TYPES for available widgets.
  492.          */
  493.         buildWidget: function (widget) {
  494.             var list = this._widgetList,
  495.                 widgetsParams = WIDGETS_PARAMS[this.pageId],
  496.                 editorialBlocks,
  497.                 sliderItems,
  498.                 carouselsWidgetParams,
  499.                 widgetLayout;
  501.             switch (widget.getWidgetType()) {
  502.                 case WIDGET_TYPES.HERO:
  503.                     if (widget._item && widget.hasRights() && !this.heroFound) {
  504.                         if (!widget._item.isLocked()) {
  505.                             this._hero = new Hero(widget, widgetsParams.hero);
  506.                             this._topList.insertChildWidget(0, this._hero);
  507.                             this.heroFound = true;
  508.                         }
  509.                     }
  510.                     break;
  511.                 case WIDGET_TYPES.CAROUSEL:
  512.                     if (widget.getItems().length) {
  513.                         widgetLayout = widget.getLayout();
  514.                         carouselsWidgetParams = this._getWidgetParams(widgetLayout);
  516.                         list.appendChildWidget(new Carousel(widget, carouselsWidgetParams));
  517.                     }
  518.                     break;
  519.                 case WIDGET_TYPES.EDITORIAL_BLOCK:
  520.                     editorialBlocks = widget.getEditorialBlocks({hasContent: true});
  522.                     if (editorialBlocks.length) {
  523.                         this._hero = list
  524.                             .appendChildWidget(new HeroSlider(editorialBlocks, widgetsParams.editorialBlocks));
  525.                         this.heroFound = true;
  526.                     }
  527.                     break;
  528.                 case WIDGET_TYPES.HERO_SLIDER:
  529.                     sliderItems = widget.getItems();
  531.                     this._hero = list.appendChildWidget(new HeroSlider(sliderItems, widgetsParams.hero));
  532.                     this.heroFound = true;
  533.                     break;
  535.                     // No default.
  536.             }
  537.         },
  539.         /**
  540.          * Returns the widgets params for the type of layout.
  541.          *
  542.          * @param {string} widgetLayout - The type of layout of the widget.
  543.          * @returns {Object} - The widget's params.
  544.          */
  545.         _getWidgetParams: function (widgetLayout) {
  546.             var widgetsParams = WIDGETS_PARAMS[this.pageId];
  548.             switch (widgetLayout) {
  549.                 case 'EPG_LARGE':
  550.                     return widgetsParams.carousels.epg;
  551.                 case 'VOD_SMALL':
  552.                     return widgetsParams.carousels.vod;
  553.                 case 'BOOKMARK_LARGE_HORIZONTAL':
  554.                     return widgetsParams.carousels.bookmark;
  555.                 default:
  556.                     return widgetsParams.carousels.vod || widgetsParams.carousels.epg;
  557.             }
  558.         },
  560.         /**
  561.          * Aligns the carousels to force them to render items.
  562.          */
  563.         alignCarousels: function () {
  564.             Utils.each(this._widgetList.getChildWidgets(), function (widget) {
  566.                 if (widget && widget instanceof Carousel) {
  567.                     widget.alignToIndex(0);
  568.                 }
  569.             });
  570.         },
  572.         alignCarouselsToLastIndex: function () {
  573.             Utils.each(this._widgetList.getChildWidgets(), function (widget) {
  575.                 if (widget && widget instanceof Carousel) {
  576.                     widget.alignToLastIndex();
  577.                 }
  578.             });
  579.         },
  581.         /**
  582.          * Removes all the widgets.
  583.          */
  584.         removeAll: function () {
  585.             this._hero = null;
  586.             this._list.removeChildWidgets();
  587.             this._widgetList.removeChildWidgets();
  588.             this._topList.removeChildWidgets();
  589.             this._list.appendChildWidget(this._topList);
  590.             this._list.appendChildWidget(this._widgetList);
  591.         },
  593.         /**
  594.          * Returns true if the component has a hero element attached.
  595.          *
  596.          * @returns {boolean} - True if the component has a hero element attached.
  597.          */
  598.         hasHeroElement: function () {
  599.             return this._hero !== null;
  600.         },
  602.         /**
  603.          * Shows the Hero widget.
  604.          */
  605.         showHero: function () {
  606.             var self = this;
  608.             if (this.hasHeroElement()) {
  609.                 if (!this._hero.isVisible() || this._isHidingHero) {
  610.                     this._isShowingHero = true;
  611.                     this._hero.show({
  612.                         duration: 500,
  613.                         onComplete: function () {
  614.                             self._isShowingHero = false;
  615.                         }
  616.                     });
  617.                 }
  618.             }
  619.         },
  621.         /**
  622.          * Hides the Hero widget.
  623.          *
  624.          * @param {boolean} skipAnimation - Whether to skip animation.
  625.          */
  626.         hideHero: function (skipAnimation) {
  627.             var self = this;
  629.             if (this.hasHeroElement()) {
  630.                 if (this._hero.isVisible() || this._isShowingHero) {
  631.                     if (skipAnimation) {
  632.                         this._hero.hide({skipAnim: true});
  633.                     } else {
  634.                         this._isHidingHero = true;
  636.                         this._hero.hide({
  637.                             duration: 300,
  638.                             onComplete: function () {
  639.                                 self._isHidingHero = false;
  640.                             }
  641.                         });
  642.                     }
  643.                 }
  644.             }
  645.         },
  647.         /**
  648.          * Routes to watch all module.
  649.          *
  650.          * @param {Promise} watchAllItem - The watchall item.
  651.          */
  652.         goToWatchAll: function (watchAllItem) {
  653.             var widgetsParams = WIDGETS_PARAMS[this.pageId],
  654.                 watchAllEndpoint = watchAllItem.getWatchAll(),
  655.                 gridParams;
  657.             if (watchAllItem.isEpgLayout()) {
  658.                 gridParams = widgetsParams.grid.epg;
  659.             } else if (watchAllItem.isBookmarkLayout()) {
  660.                 gridParams = widgetsParams.grid.bookmark;
  661.             } else {
  662.                 gridParams = widgetsParams.grid.vod;
  663.             }
  665.             application.route('watchall', {
  666.                 watchAll: watchAllEndpoint,
  667.                 gridParams: gridParams
  668.             });
  669.         },
  671.         /**
  672.          * Unlock the assets.
  673.          *
  674.          * @private
  675.          */
  676.         _unlockAssets: function () {
  677.             var rows = this._widgetList.getChildWidgets(),
  678.                 assets;
  680.             this._assetsUnlocked = true;
  681.             Utils.each(rows, function (row) {
  682.                 if (row.getCarousel) {
  683.                     assets = row.getCarousel().getChildWidgets();
  685.                     Utils.each(assets, function (asset) {
  686.                         if (asset.hasClass('asset')) {
  687.                             asset.unlock();
  688.                         }
  689.                     });
  690.                 }
  691.             });
  693.             if (this._grid) {
  694.                 Utils.each(this._grid.getList().getChildWidgets(), function (row) {
  696.                     Utils.each(row.getChildWidgets(), function (asset) {
  697.                         if (asset.hasClass('asset')) {
  698.                             asset.unlock();
  699.                         }
  700.                     });
  701.                 });
  702.             }
  703.         },
  705.         /**
  706.          * Lock the assets.
  707.          *
  708.          * @private
  709.          */
  710.         _lockAssets: function () {
  711.             var rows = this._widgetList.getChildWidgets(),
  712.                 assets;
  714.             this._assetsUnlocked = false;
  715.             Utils.each(rows, function (row) {
  716.                 if (row.getCarousel) {
  717.                     assets = row.getCarousel().getChildWidgets();
  719.                     Utils.each(assets, function (asset) {
  720.                         if (asset.hasClass('asset')) {
  721.                             asset.lock();
  722.                         }
  723.                     });
  724.                 }
  725.             });
  727.             if (this._grid) {
  728.                 Utils.each(this._grid.getList().getChildWidgets(), function (row) {
  730.                     Utils.each(row.getChildWidgets(), function (asset) {
  731.                         if (asset.hasClass('asset')) {
  732.                             asset.lock();
  733.                         }
  734.                     });
  735.                 });
  736.             }
  737.         },
  739.         /**
  740.          * Routes to the details page of the content.
  741.          *
  742.          * @param {Object} routeParams - The route params.
  743.          */
  744.         _routeToDetails: function (routeParams) {
  745.             application.route('details', {
  746.                 data: routeParams.data,
  747.                 callback: Utils.bind(this.focus, this)
  748.             });
  749.         },
  751.         /**
  752.          *
  753.          * @param {Object} routeParams - The player's route params.
  754.          * @param {string} playerRoute - The player to be used (liveplayer, vodplayer, catchupplayer...).
  755.          * @private
  756.          */
  757.         _routeToPlayer: function (routeParams, playerRoute) {
  758.             application.route(playerRoute || 'player', routeParams);
  759.             GA.onEvent('player', 'started', {eventLabel: this.pageId});
  760.         },
  762.         /**
  763.          * Back event.
  764.          *
  765.          * @private
  766.          */
  767.         _onBack: function () {
  768.             this.parentWidget.back();
  769.             application.focusMenu('main');
  770.         },
  772.         /**
  773.          * Starts the progressbars update interval.
  774.          */
  775.         _updateProgressbars: function () {
  776.             var now = application.getDate(),
  777.                 rows = this._widgetList.getChildWidgets(),
  778.                 rowItems,
  779.                 currentProgramFinished,
  780.                 dataItem,
  781.                 hasProgressbar,
  782.                 updateableCarousel;
  784.             if (this._progressInterval) {
  785.                 this._clearProgressInterval();
  787.                 Utils.each(rows, Utils.bind(function (row) {
  788.                     updateableCarousel = row.getCarousel && !row.hasClass('hero') &&
  789.                         this._isUpdateableCarousel(row.getCarouselLayout());
  791.                     if (updateableCarousel) {
  792.                         rowItems = row.getCarousel().getChildWidgets();
  794.                         Utils.each(rowItems, Utils.bind(function (rowItem) {
  796.                             if (rowItem.hasClass('asset')) {
  797.                                 hasProgressbar = rowItem.updateProgressBar();
  798.                                 dataItem = rowItem.getDataItem();
  800.                                 currentProgramFinished = now >= dataItem.endTime;
  802.                                 // A program has finished in the row, add it to the update list.
  803.                                 if (currentProgramFinished && hasProgressbar) {
  804.                                     if (!this._updateRowsList) {
  805.                                         this._updateRowsList = [];
  806.                                     }
  808.                                     if (!Utils.contains(this._updateRowsList, row)) {
  809.                                         this._updateRowsList.push(row);
  810.                                     }
  811.                                 }
  812.                             }
  813.                         }, this));
  814.                     }
  815.                 }, this));
  816.             }
  818.             if (!this._updateCarouselsInterval) {
  819.                 this._updateCarouselsInterval = setInterval(Utils.bind(this._updateCarousels, this), UPDATE_CAROUSEL_INTERVAL_TIME);
  820.             }
  822.             this._progressInterval = setInterval(Utils.bind(this._updateProgressbars, this), PROGRESS_INTERVAL_TIME);
  823.         },
  825.         /**
  826.          * Clears any progress interval update.
  827.          *
  828.          * @private
  829.          */
  830.         _clearProgressInterval: function () {
  831.             clearInterval(this._progressInterval);
  832.             this._progressInterval = null;
  833.         },
  835.         /**
  836.          * Clears any progress interval update.
  837.          *
  838.          * @private
  839.          */
  840.         _clearUpdateCarouselsInterval: function () {
  841.             clearInterval(this._updateCarouselsInterval);
  842.             this._updateCarouselsInterval = null;
  843.         },
  845.         /**
  846.          * Checks carousels with EPG layout that can be updated with new data.
  847.          * i.e. live carousels in home or sports page.
  848.          *
  849.          * @param {string} carouselLayout - The carousel layout.
  850.          * @returns {boolean} - True if the carousel can be updated.
  851.          **/
  852.         _isUpdateableCarousel: function (carouselLayout) {
  853.             switch (carouselLayout) {
  854.                 case 'EPG_SPORT':
  856.                     // Falls through.
  857.                 case 'EPG_LARGE':
  858.                     return true;
  859.                 default:
  860.                     return false;
  861.             }
  862.         },
  864.         /**
  865.          * Updates the carousels found on the update list.
  866.          *
  867.          * @private
  868.          */
  869.         _updateCarousels: function () {
  870.             if (this._updateRowsList && this._updateRowsList.length) {
  871.                 this._clearProgressInterval();
  873.                 Utils.each(this._updateRowsList, Utils.bind(function (row) {
  874.                     row.updateCarousel();
  875.                     this._updateProgressbars();
  876.                 }, this));
  878.                 this._updateRowsList.length = 0;
  879.             }
  880.         }
  881.     });
  883.     UIBuilderComponent.WIDGET_TYPES = WIDGET_TYPES;
  885.     return UIBuilderComponent;
  886. });