Listy for JW Player

Example: Add new item

Demonstrates how to enable the "Add item" tab which allows you to specify the parameters for a new playlist item, preview using "Preview item", and add the item to the current playlist using "Add as last" or "Add as next".

Key features

---

---

CSS

  #player_wrapper{
    width:85%;
    margin-right:auto;
    margin-left:auto;
  }
  #example{
    float:left;
  }
  /* Default breakpoint styles */
  #example,#example.jwfullscreen{
    width:100% !important;
  }
  /* Listy container */
  #example_listy{
    width:100%;
    float:left;
  }
  /* Description - Limit displayed text */
  #example_listy .listy-description{
    height:42px;
    overflow:hidden;
  }
  /* Playlist images - Hide images*/
  #example_listy .listy-fill{
    display:none;
  }
  #example_listy .listy-textwrapper {
    padding:10px;
  }
  /* Medium breakpoint */
  @media only screen and (min-width: 35em) {
    #player_wrapper{
      width:65%;
    }
    #example_listy .listy-search-wrapper{
      width:50%;
    }
    /* IMAGES */
    #example_listy .listy-fill{
      display:block;
    }
    #example_listy .listy-textwrapper {
      padding:10px 10px 10px 150px;
    }
  }
  /* Large breakpoint */
  @media only screen and (min-width: 65em) {
    #player_wrapper{
      width:75%;
    }
    #example{
      width:47% !important;
    }
    #example_listy{
      width:47%;
      float:right;
    }
    /* Playlist area */
    #example_listy_list{
      height:500px;
    }
    /* Description */
    #example_listy .listy-description{
      height:auto;
      overflow:none;
    }
  }


HTML

  <div id="player_wrapper">
    <div id="example"></div>
  </div>


Setup code

  jwplayer("example").setup({
    "playlist":[{...}],
    "width":"100%",
    "aspectratio":"16:9",
    "plugins": {
      "listy.js":{
        "features":{
          "shuffle":{"enabled":true,"label":"Mix it up!"},
          "search":{"enabled":true},
          "edit":{
            "enabled":true,
            "label":"Edit",
            "buttons":{
              "move_up":{"enabled":true},
              "remove":{"enabled":true,"label":"REMOVE"},
              "move_down":{"enabled":true}
            }
          },
          "add":{
            "enabled":true,
            "label":"Add item"
          }
        }
      }
    }
  });