Playlist Player Public Show View

player_public_show.html

<div class="container">
  <h1 class="player-title">[player-title]</h1>
  <h2 class="video-title">[selected video-title]</h2>
  <ul class="playlist-list [many/single - depending if there are many playlists assigned or not]">
     <!-- A list element will be created for every playlist assigned to the player -->
     <li class="playlist-row [even/odd - alternating for zebra styling] [current - on the currently selected playlist]" data-playlist-id="[playlist-id]">
       <span class="title"><a href="#" onclick="[method-for-loading-playlist]">[playlist-title]</a></span>
     </li>
    <!-- the list ends with a 'last' li useful for clearing if you're using float for the playlist-rows -->
    <li class="last"></li>
  </ul>
  <div id="embed-holder" class="player">
    [flash/html5-player - depending on browser and flash support]
  </div>
  <h3 class="playlist-title">[selected playlist-title]</h3>
  <ul class="video-list">
    <!-- A list element will be created for every video included in the selected playlist -->
    <li class="video-row [even/odd - alternating for zebra styling] [current - on the currently selected video]" data-video-id="[video-id]">
      <span class="thumbnail"><a href="#" onclick="[method-for-loading-video]"><img src="[link to video-image thumbnail]" alt=""></img></a></span>
      <span class="duration">[video-duration]</span>
      <span class="title"><a href="#" onclick="[method-for-loading-video]">[video-title]</a></span>
      <span class="description">[video-description]</span>
    </li>
  </ul>
  <div class="pagination">
    <span class="current-span">[current video span, ex. 1-4]</span>
    <span class="of">/</span>
    <span class="page-count">[total number of videos]</span>
    <ul class="page-list">
      <!-- A list element will be created for every page used for pagination -->
      <li class="page-row [current - on the currently selected page]" data-page-number="[page-number]">[page-number]</li>
    </ul>
  </div>
</div>