sample.js

sample.js

/**
 * Created by aguru on 06/01/16.
 */
/**
 *  @desc Class for /browse/* and /browse/others/* pages
 *  The browse page data can be filtered by Genre for the category selected example :
 *
 *  a) List of genre for the current page "/data/browse/[movies]/genre" - Assuming you are browsing "Movies"
 *  b) First data request is "/data/browse/[movies]/[all]" - All returns all movies for that section "Movies"
 *  c) Subsequent request can be made too "/data/browse/movies/action" and so on based on genre selected from the first
 *     call.
 */
goog.provide("app.views.Browse");
goog.provide("app.views.BrowseGrid");

goog.require("app.views");
goog.require("app.views.View");
goog.require("app.data.Playlist");
goog.require("app.data.Play.Item");
goog.require("app.data.Genre");

/**
 *
 * @constructor
 */
app.views.Browse = function(rootId, dataProvider, appMsgCh_, player, router, optPath){
    app.views.View.call(this, rootId, dataProvider, appMsgCh_);

    this.player_ = player;

    this.router_ = router;

    this.genreList_ = null;

    this.gridList_ = null;

    this.focusedCtrl_ = null;

    this.visible_ = false;

    if(optPath)
        this.load(optPath);

}
goog.inherits(app.views.Browse, app.views.View);

app.views.Browse.HANDLE_PATHS =[
    "^(\/browse\/movies\/)$",
    "^(\/browse\/series\/)$",
    "^(\/browse\/education\/)$",
    "^(\/browse\/documentary\/)$",
    "^(\/browse\/entertainment\/)$",
    "^(\/browse\/health\/)$",
    "^(\/browse\/popular\/)$",
    "^(\/browse\/comedy\/)$",
    "^(\/browse\/others\/science\/)$",
    "^(\/browse\/others\/technology\/)$",
    "^(\/browse\/others\/health\/)$",
    "^(\/browse\/others\/automobiles\/)$",
    "^(\/browse\/others\/cooking\/)$",
    "^(\/browse\/others\/culture\/)$",
    "^(\/browse\/others\/gaming\/)$"
]

app.views.Browse.ID = {
    "BROWSE_CONTAINER" : "browseContainer",
    "GRID_CONTAINER" : "gridContainer",
    "BROWSE_TOP" : "browseTop",
    "GENRE_CONTAINER" : "genreContainer",
    "SPINNER" : "browseSpinner",
    "NO_VIDEOS" : "noVideos"
}

app.views.Browse.prototype.getId = function(){
    return app.VIEW_CONTAINER_ID.BROWSE;
}

/**
 *
 * @param {!String} path to be loaded by the view
 * @param {!boolean} focusOnLoad should the view items be focused after loading ?
 *
 */
app.views.Browse.prototype.load = function(path, focusOnLoad, paramData){

  if(!paramData)
   paramData = {};

  paramData.section = this.getBrowseItemFromPath(path);

  if(!!paramData & !paramData.genre){
    paramData.genre = (paramData.genre) ? paramData.genre : app.data.BROWSE_SECTION_GENRE.ALL;
  }

  // Spinner util goes here

  this.dataProvider_.getData(app.data.APP_ENTITY.PLAYLIST_DATA, goog.bind(this.rebuild, this, paramData), paramData);

  this.dataProvider_.getData(app.data.APP_ENTITY.GENRE_DATA, goog.bind(this.rebuild, this, paramData), paramData);
}

app.views.Browse.prototype.getBrowseItemFromPath = function(path){
  var pathExp = path.split("/");
  return pathExp[pathExp.length - 2];
}

/**
 *
 * @param status
 * @param data
 * @param {Object} genreData optional genre and section data passed into rebuild
 *                  example {"section":"movies", "genre":"all"}
 */
app.views.Browse.prototype.rebuild = function(genreData, status, data){

    if(!this.visible_)
      this.show();

    if(!status){
        //maybe request data again or other error handling
        console.log("Browse data request failed with message" + data);
        return;
    }

    this.router_.hidePlayer();
    if(data[0] instanceof app.data.Genre.Item){
        this.buildGenre_(data, genreData);
    }else{
        this.buildPlaylist_(data, genreData);
    }

}

/**
 *
 * @param data
 * @param {Object} genreData optional genre and section data passed into rebuild
 *                  example {"section":"movies", "genre":"all"}
 * @private
 */
app.views.Browse.prototype.buildGenre_ = function(data, genreData){

    var listItems = new Array();
    var defId = null;

    for(var i in data){
        // Capture the id of the default genre so that we can later use it to set is as selected
        if( genreData.genre.toLowerCase() == data[i].getName().toLowerCase()){
            defId = data[i].getId();
        }

        listItems.push(new vcu.ListItem(data[i].getId(),
            { ".name": data[i].getName(), "data-path" : data[i].getPath() },
            "genreListItemClone", true, true, "genreItem"));
    }

    if(!this.genreList_){
        var scrollConfig = new vcu.ScrollConfig(app.views.Browse.ID.GENRE_CONTAINER, vcu.ListConfig.ORIENTATION.VERTICAL, "genrelistItem",
            goog.bind(this.onItemSelected, this), goog.bind(this.onItemFocused, this), false, true, true, "190px", true);
        this.genreList_ = new vcu.Scroller(listItems, scrollConfig);
    }else{
        this.genreList_.rebuild(listItems);
    }

    if(defId){
      this.genreList_.setSelected(defId);
      this.currentGenre_ = this.genreList_.getCurrentSelItem();
    }

    this.visible_ = true;
    console.log("Minimize genre ", this.genreList_);
    this.genreList_.minimize();
}

app.views.Browse.prototype.buildPlaylist_ = function(data){

    if(this.gridList_){
       this.gridList_.destroy();
       this.gridList_ = null;
    }

    this.hideLoading();

    var novid = document.getElementById("noVideos");
    if(data.length == 0){
        novid.classList.remove("hidden");
        return;
    }else{
        novid.classList.add("hidden");
    }

    this.gridList_ = new app.views.BrowseGrid(this, 3, goog.bind(this.onItemSelected, this), app.views.Browse.ID.GRID_CONTAINER);
    this.gridList_.load(data);
    this.router_.requestFocus(this);
    this.switchFocus(this.gridList_);
}

app.views.Browse.prototype.onItemSelected = function(item){

  var path = this.getItemPath(item);

  if(path && this.focusedCtrl_ == this.genreList_){

    var currSel = this.genreList_.getCurrentSelItem();
    console.log("Genre item selected ", item.getId(), currSel);

    if(this.genreList_.isMinimized()){
       this.genreList_.maximize();
    }else{
       this.genreList_.minimize();
    }

    // Genre change need to load the updated playlist.
    if(item.getId() != this.currentGenre_.getId()){
      this.currentGenre_ = item;
      var path = this.getItemPath(item);
      var paramData = this.pathToSectionGenreObj(path);
      this.showLoading();
      this.dataProvider_.getData(app.data.APP_ENTITY.PLAYLIST_DATA, goog.bind(this.rebuild, this, paramData), paramData);
    }

  }else{
      var itemEle = document.getElementById(item.getId());
      var mpd = itemEle.getAttribute("data-mpd");
      this.router_.playerReqLoadTrack(mpd);
      console.log("item path is ", this.getItemPath(item));
      this.router_.routeTo(this.getItemPath(item));
  }
}

app.views.Browse.prototype.showLoading = function(){
  if(this.gridList_)
    this.gridList_.destroy();
  var spinele = document.getElementById(app.views.Browse.ID.SPINNER);
  spinele.classList.remove("hidden");
}

app.views.Browse.prototype.hideLoading = function(){
    var spinele = document.getElementById(app.views.Browse.ID.SPINNER);
    spinele.classList.add("hidden");
}

app.views.Browse.prototype.pathToSectionGenreObj = function(path){
    path = path.split("/");
    var paramData = {};

    if(path[path.length  - 1 ] != ""){
        paramData.genre = path[path.length - 1];
        paramData.section = path[path.length - 2];
    }else{
        paramData.genre = path[path.length - 2];
        paramData.section = path[path.length - 3];
    }

    return paramData;
}

app.views.Browse.prototype.getItemPath = function(item){

  var ele = document.getElementById(item.getId());
  var attr = ele.getAttribute("data-path");
    if(attr)
     return attr;
  return false;
}

app.views.Browse.prototype.onItemFocused = function(item){
  console.log("Item focused " , item);
}

app.views.Browse.prototype.onFocus = function(){
    if(!this.visible_)
        this.show();

    if(this.gridList_){
        this.switchFocus(this.gridList_);
    }else{
        //this.currentGenre_ = this.genreList_.getCurrentSelItem();
        this.switchFocus(this.genreList_, this.currentGenre_);
    }

}

app.views.Browse.prototype.switchFocus = function(list, topGridItem){
  if(this.focusedCtrl_){
      this.focusedCtrl_.lostFocus();
  }
  this.focusedCtrl_ = list;
  this.focusedCtrl_.onFocus(topGridItem);
}

app.views.Browse.prototype.lostFocus = function(){
  if(this.focusedCtrl_)
    this.focusedCtrl_.lostFocus();
}

app.views.Browse.prototype.lostSelection = function(){

}

app.views.Browse.prototype.onKeyHandler = function(key){

    if(!this.visible_)
        return false;


    // Special case
    if(this.focusedCtrl_ == this.genreList_
        && this.genreList_.isMinimized()
        && key.keyCode != 13){

       // Case when there is no video and the list is minimized
       if(!this.gridList_)
          return false;

       if(key.keyCode == 40){
           this.switchFocus(this.gridList_, true);
           return true;
       }

    }

    if(!this.focusedCtrl_.onKeyHandler(key)){
        switch (key.keyCode){
            case 40: //Down
                if(this.focusedCtrl_ == this.genreList_ && this.gridList_){
                  this.genreList_.minimize();
                  this.switchFocus(this.gridList_, true);
                  return true;
                }
            break;
            case 38: //Up
                if(this.focusedCtrl_ == this.gridList_ ){
                  this.switchFocus(this.genreList_);
                  this.genreList_.maximize();
                  return true;
                }
            break;
            case 37: //left
            case 39: //right
                if(this.focusedCtrl_ == this.genreList_ && this.gridList_){
                    this.genreList_.minimize();
                    this.switchFocus(this.gridList_, true);
                    return true;
                }
        }
        return false;
    }
    return true;
}

app.views.Browse.prototype.onClickHandler = function(){

}

app.views.Browse.prototype.hide = function(){
   this.visible_ = false;
   var ele = document.getElementById(app.views.Browse.ID.BROWSE_CONTAINER);
   ele.classList.add("hidden");
}

app.views.Browse.prototype.show = function(){
    this.visible_ = true;
    var ele = document.getElementById(app.views.Browse.ID.BROWSE_CONTAINER);
    ele.classList.remove("hidden");
}

app.views.Browse.prototype.isVisible = function(){
    return this.visible_;
}

app.views.Browse.prototype.enable = function(){

}

app.views.Browse.prototype.disable = function(){

}

app.views.Browse.prototype.destroy = function(){

    var bspinner = document.getElementById(app.views.Browse.ID.SPINNER);
    var novideos = document.getElementById(app.views.Browse.ID.NO_VIDEOS);
    bspinner.classList.add("hidden");
    novideos.classList.add("hidden");

    this.genreList_ = null;
    this.focusedCtrl_= null;
    if(!!this.gridList_)
        this.gridList_.destroy();
    var ele = document.getElementById(app.views.Browse.ID.GENRE_CONTAINER);
    ele.innerHTML = "";

    this.hide();

}

/**
 *
 * @param containerView
 * @param rowcount
 * @param onSelected
 * @param gridContainer
 * @constructor
 */
app.views.BrowseGrid = function(containerView, rowcount, onSelected, gridContainer){

  this.containerView_ = containerView;

  this.rowcount_ = rowcount;

  this.onSelected_ = onSelected;

  this.gridContainer_ = gridContainer;

  this.scroller_ = new Array();

  this.scrollerFocused_ = null;

  this.gridItemFocused_ = null;
}

app.views.BrowseGrid.ID = {
   "INFO_BOX" : "infoBox",
   "INFO_TITLE" : "bBoxTitle",
   "INFO_DESC" : "bBoxDesc",
   "INFO_GENRE" : "infoGenre",
   "INFO_STARRING" : "infoStarring"
};

/** @param {app.data.Playlist.item} data */
app.views.BrowseGrid.prototype.load = function(data){
  var scrollerIndex = 0;
  var listSize;

  if(data.length < 6){
    this.rowcount_ = 1;
    listSize = data.length;
  }else if(data.length < 11){
    this.rowcount_ = 2;
    listSize = Math.floor(data.length/2);
  }else{
    listSize = Math.floor(data.length/this.rowcount_);
  }

  var gridContainerEle = document.getElementById(app.views.Browse.ID.GRID_CONTAINER);
  for(var i = 0 ; (data.length - i) >= listSize; i = i + listSize){

   var containerId = app.views.Browse.ID.GRID_CONTAINER + scrollerIndex;
   var ctele = document.createElement("div");
   ctele.setAttribute("id", containerId);
   gridContainerEle.appendChild(ctele);

   this.scroller_[scrollerIndex] = this.buildList(containerId, data, i, (i + listSize), scrollerIndex);
   scrollerIndex = scrollerIndex + 1;
  }

  this.focusScroller(scrollerIndex - 1);
  var item = this.scroller_[this.currentFocusIndex_].getCurrentFocusItem();
  this.onItemFocused((this.currentFocusIndex_), item);
}

app.views.BrowseGrid.prototype.buildList = function( containerId, data, stIndex, enIndex, scrollerIndex){

    var listItems = new Array();

    for(var i = stIndex ; i < enIndex; i++){
        listItems.push(new vcu.ListItem(data[i].getId(),
            {
                ".browseThumb": data[i].getThumbUrl(), "data-path" : data[i].getPath(), "data-mpd" : data[i].getMpd(),
                "data-desc" : data[i].getDesc(), "data-genre" : data[i].getGenre(), "data-title" : data[i].getTitle()
            },"browseItemClone", true, true, "browseItem"));
    }

    var scrollConfig = new vcu.ScrollConfig(containerId, vcu.ListConfig.ORIENTATION.HORIZONTAL, "browselistItem",
        goog.bind(this.onSelected_, this), goog.bind(this.onItemFocused, this, scrollerIndex), true, true, true, 96.5);
    return new vcu.Scroller(listItems, scrollConfig);
}

app.views.BrowseGrid.prototype.focusScroller = function(scrollerIndex){

    if(goog.isDefAndNotNull(this.currentFocusIndex_)){
        this.scrollerRemoveFocus(this.currentFocusIndex_);
    }

    this.currentFocusIndex_ = scrollerIndex;
    this.scrollerAddFocus(this.currentFocusIndex_);
}

app.views.BrowseGrid.prototype.scrollerAddFocus = function(scrollerIndex){
    var id = app.views.Browse.ID.GRID_CONTAINER + scrollerIndex;
    var ele = document.getElementById(id);

    if(!!ele)
      ele.classList.add("FocusedGridScroller");
}

app.views.BrowseGrid.prototype.scrollerRemoveFocus = function(scrollerIndex){
    var id = app.views.Browse.ID.GRID_CONTAINER + scrollerIndex;
    var ele = document.getElementById(id);

    if(!!ele)
      ele.classList.remove("FocusedGridScroller");
}

/** @param {app.data.Playlist.item} data */
app.views.BrowseGrid.prototype.rebuild = function(data){

}

app.views.BrowseGrid.prototype.destroy = function(){

  var infoBox = document.getElementById(app.views.BrowseGrid.ID.INFO_BOX);
  var titleEle = document.getElementById(app.views.BrowseGrid.ID.INFO_TITLE);
  var descEle = document.getElementById(app.views.BrowseGrid.ID.INFO_DESC);
  var genreEle = document.getElementById(app.views.BrowseGrid.ID.INFO_GENRE);
  //var starrEle = document.getElementById(app.views.BrowseGrid.ID.INFO_STARRING);
  var gridContainerEle = document.getElementById(app.views.Browse.ID.GRID_CONTAINER);
  var novid = document.getElementById("noVideos");

  infoBox.classList.add("hidden");
  novid.classList.add("hidden");
  titleEle.innerHTML = "";
  descEle.innerHTML = "";
  genreEle.innerHTML = "";
  //starrEle.innerHTML = "";
  gridContainerEle.innerHTML = "";

}

app.views.BrowseGrid.prototype.enable = function(){

}

app.views.BrowseGrid.prototype.disable = function(){

}

app.views.BrowseGrid.prototype.show = function(){

}

app.views.BrowseGrid.prototype.hide = function(){

}

app.views.BrowseGrid.prototype.isVisible = function(){

}

app.views.BrowseGrid.prototype.onClickHandler = function(){

}

app.views.BrowseGrid.prototype.move = function(key){
  for(var i = 0 ; i < this.rowcount_ ; i++){
      this.scroller_[i].onKeyHandler(key);
  }
}

app.views.BrowseGrid.prototype.onKeyHandler = function(key){

    switch (key.keyCode){
        case 40: //Down
            if(this.currentFocusIndex_ != this.rowcount_ - 1 ) {
                if(this.currentFocusIndex_ + 1 < this.rowcount_){
                    this.focusScroller(this.currentFocusIndex_ + 1);
                    var item = this.scroller_[this.currentFocusIndex_].getCurrentFocusItem();
                    this.onItemFocused((this.currentFocusIndex_), item);
                    return true;
                }
            }
            break;
        case 38: //Up
            if(this.currentFocusIndex_ != 0 ){
                if(this.currentFocusIndex_ - 1 >= 0){
                    this.focusScroller(this.currentFocusIndex_ - 1);
                    var item = this.scroller_[this.currentFocusIndex_].getCurrentFocusItem();
                    this.onItemFocused((this.currentFocusIndex_), item);
                    return true;
                }
            }
            break;
        case 37: //left
        case 39: //right
           return this.move(key);
        case 13:
           return this.scroller_[this.currentFocusIndex_].onKeyHandler(key);
        default:
    }

    return false;
}

app.views.BrowseGrid.prototype.lostSelection = function(){

}

app.views.BrowseGrid.prototype.onFocus = function(top, bottom){

    if(this.scroller_.length !=  0){
      if(goog.isBoolean(top)){
          this.focusScroller(0);
      }else{
          this.focusScroller(this.scroller_.length - 1);
      }
    }

}

app.views.BrowseGrid.prototype.lostFocus = function(){
  this.scrollerRemoveFocus(this.currentFocusIndex_);
}

app.views.BrowseGrid.prototype.onItemSelected = function(){

}

app.views.BrowseGrid.prototype.onItemFocused = function(scrollIndex, item){

  if(scrollIndex == this.currentFocusIndex_){
      this.updateInfo(item);
      this.focusGridItem(item);
  }
}

app.views.BrowseGrid.prototype.focusGridItem = function(item){

    if(this.gridItemFocused_){
        var ele = document.getElementById(this.gridItemFocused_.getId());
        ele.classList.remove("gridItemFocused");

    }

    var ele = document.getElementById(item.getId());
    ele.classList.add("gridItemFocused");
    this.gridItemFocused_ = item;
}

app.views.BrowseGrid.prototype.updateInfo = function(item){

  var container = document.getElementById(app.views.BrowseGrid.ID.INFO_BOX);
  var titleEle = document.getElementById(app.views.BrowseGrid.ID.INFO_TITLE);
  var descEle = document.getElementById(app.views.BrowseGrid.ID.INFO_DESC);
  var genreEle = document.getElementById(app.views.BrowseGrid.ID.INFO_GENRE);
  var starrEle = document.getElementById(app.views.BrowseGrid.ID.INFO_STARRING);

  var itemEle = document.getElementById(item.getId());
  var titleData = itemEle.getAttribute("data-title");
  var descData = itemEle.getAttribute("data-desc");
  var genreData = itemEle.getAttribute("data-genre");
  //var starrData = itemEle.getAttribute("data-starring");

  container.classList.remove("hidden");
  titleEle.innerHTML = titleData;
  descEle.innerHTML = descData;
  genreEle.innerHTML = genreData;
}