Listy for JW Player

Example: Custom playlist HTML

By default, Listy produces playlist HTML similiar to that produced by JW Player when rendering in HTML5 mode (with the addition of the "duration" label).

By including settings in the "list" configuration block this can be completely overridden.

The playlist HTML is made up using 3 configurable settings: "start_tpl", "item_tpl" and "end_tpl".

• start_tpl - this is the template used to produce the starting block of HTML for the playlist. The default value is as follows: <div class="listy-playlistcontainer">
  <div class="listy-playlist">
    <div class="listy-listcontainer">
      <ul class="listy-pl">

• item_tpl - this is the template used to produce an individual playlist item. It is repeated for each item in the playlist. The default value is as follows:         <li class="listy-item" data-mediaid="{{item.mediaid}}" tabindex="0">
          <div class="listy-playlistdivider"></div>
          <div class="listy-playlistimg listy-fill" {{(item.image&&item.image!=""?'style="background-image:url('+item.image+');"':'')}}></div>
          <div class="listy-textwrapper">
            <span class="listy-title">{{item.title}}
              <span class="listy-duration">{{(item.duration?item.duration:'')}}</span>
            </span>
            {{(item.description?'<span class="listy-description">'+item.description+'</span>':'')}}
          </div>
        </li>

• end_tpl - this is the template used to produce the ending block of HTML for the playlist. The default value is as follows:       </ul>
    </div>
  </div>
</div>


There are a few important points to note when using these settings:

• When used as part of the configuration block, they should resolve as plain JavaScript strings. As such, any delimiter quotes used within the string will need to be escaped. For example, 'item_tpl':'It's a single quote' would be written as 'item_tpl':'It\'s a single quote'
• You can include any of the parameters associated with the playlist item by using the following notation: {{item.parameter}}
• You can also include simple JavaScript if..then.. logic in order to conditionally include parameters as such: {{(item.parameter?item.parameter:'')}}

A final setting which needs to be included in order to enable interactions with the playlist items is the "current_selector" setting.

The default setting for this is "current_selector":"data-mediaid" and the value relates directly to the data-mediaid="{{item.mediaid}}" attribute definition included on the parent element in the "item_tpl" string.

Whilst this can be set to anything, the corresponding attribute needs to be included as part of the parent element within the "item_tpl" string, and the value of that attribute must be set to {{item.mediaid}}

 

The following example demonstrates how these settings can be used to produce an alternative playlist design

---

---

CSS

  #player_wrapper{
    width:85%;
    margin-right:auto;
    margin-left:auto;
    background-color: rgb(60, 60, 62);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABMAQMAAAASt2oTAAAAA1BMVEUvLzHXqQRQAAAAFklEQVR4AWMYMmAUjIJRMApGwSgYBQAHuAABIqNCjAAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
  }
  #example{
    float:left;
  }
  /* ************************ */
  /* Additional listy styling */
  /* ************************ */
  /* Default breakpoint styles */
  #example, #example.jwfullscreen{
    width:100% !important;
  }
  /* Listy override container */
  #detached_options{
    width:100%;
    float:left;
  }
  /* Listy override - detached playlist */
  #detached_playlist{
    clear:both;
    width:100%;
    float:left;
    overflow-x:auto;
    background-color: rgb(60, 60, 62);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABMAQMAAAASt2oTAAAAA1BMVEUvLzHXqQRQAAAAFklEQVR4AWMYMmAUjIJRMApGwSgYBQAHuAABIqNCjAAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
    border:4px solid rgb(60, 60, 62);
  }
  #detached_playlist .custom-list{
    margin: 0;
    padding: 0;
  }
  #detached_playlist .custom-item{
    width:200px;
    overflow:hidden;
    float:left;
    list-style:none;
    border:1px solid #cacaca;
    text-align:center;
    font-size:0.7em;
    margin:1em;
    padding:10px;
    cursor:pointer;
    background-color:#fff;
  }
  #detached_playlist .custom-item.active{
    background-color:#cacaca;
  }
  #detached_playlist .custom-item:hover{
    background-color:#fff8dc;
  }
  #detached_playlist .custom-playlistimg{
    width:180px;
    height:100px;
    background-size:cover;
    margin-bottom:1em;
  }
  #detached_playlist .custom-title{
    display:inline-block;
    height:50px;
    overflow:hidden;
  }
  #detached_playlist .custom-duration{
    font-size:1em;
    font-weight:bold;
    min-height:1em;
    display: inline-block;
  }
  #detached_playlist .custom-category{
    font-size:0.9em;
    font-style:italic;
    min-height:1em;
    display: inline-block;
  }
  /* Medium breakpoint */
  @media only screen and (min-width: 35em) {
    #player_wrapper{
      width:65%;
    }
    #detached_options .listy-search-wrapper{
      width:50%;
    }
  }
  /* Large breakpoint */
  @media only screen and (min-width: 65em) {
    #player_wrapper{
      width:75%;
    }
    #example{
      width:50% !important;
    }
    #detached_options{
      width:50%;
      float:right;
    }
  }


HTML

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


Setup code

  jwplayer("example").setup({
    "playlist":[{...}],
    "width":"100%",
    "aspectratio":"16:9",
    "plugins": {
      "listy.js":{
        "target":"detached_options"
        "list":{
          "label":"My playlist",
          "target":"detached_playlist",
          "current_selector": "data-mediaid",
          "start_tpl":'<div class="custom-playlistcontainer">'+
            '<div class="custom-playlist">'+
            '<div class="custom-listcontainer">'+
            '<table class="custom-list"><tr>',
          "item_tpl": '<td><div class="custom-item" data-mediaid="{{item.mediaid}}" tabindex="0">'+
            '<div class="custom-playlistdivider"></div>'+
            '<div class="custom-playlistimg custom-fill" {{(item.image&&item.image!=""?\'style="background-image:url(\'+item.image+\');"\':\'\')}}></div>'+
            '<div class="custom-textwrapper">'+
            '<span class="custom-title">{{item.title}}</span>'+
            '<br/><span class="custom-duration">{{(item.duration?item.duration:\'\')}}</span>'+
            '<br/><span class="custom-category">{{(item.category?item.category.join(\', \'):\'\')}}</span>'+
            '</div>'+
            '</div></td>',
          "end_tpl": '</tr></table>'+
            '</div>'+
            '</div>'+
            '</div>'
        },
        "features":{
          "shuffle":{"enabled":true},
          "search":{"enabled":true},
          "edit":{"enabled":true, "buttons":{"move_up":{"label":"←"},"remove":{"label":"remove"},"move_down":{"label":"→"}}},
          "add":{ "enabled":true,
            "options":{
              "form":{
                "fields":{
                  "mediaid":{"label":"Media ID:","type":"hidden"},
                  "title":{"label":"Title:","value":"Example: JW Player promo"},
                  "description":{"label":"Description:","type":"textarea","value":"Example: Your video solution starts with JW Player"},
                  "image":{"label":"Image URL:","value":"http://content.jwplatform.com/thumbs/HkauGhRi-640.jpg"},
                  "file":{"label":"File URL:","value":"http://content.jwplatform.com/videos/HkauGhRi-640.mp4"},
                  "duration":{"label":"Duration:","value":"mm:ss"},
                  "category":{
                    "label":"Categories:",
                    "type":"checkbox",
                    "options":{
                      "music":{"label":"Music"},
                      "hip_hop":{"label":"Hip Hop"},
                      "beatbox":{"label":"Beatbox"},
                      "dance":{"label":"Dance"},
                      "sport":{"label":"Sport"},
                      "inspirational":{"label":"Inspirational"},
                      "no_audio":{"label":"No Audio"},
                      "visual effects":{"label":"Visual effects"}
                    }
                  }
                }
              }
            }
          },
          "add_from_yt":{"enabled":true}
        }
      }
    }
  });