Source

ytmanager / templates / ytmanager / playlist.html

Full commit
{% extends 'base.html' %}

{% block body %}
<div class="navigation">
  <ul>
    <li><a href="{% url ytmanager-reset %}">Reset playlists</a></li>
  </ul>
</div>

<div class="float-left sidebar">
  <ul class="player">
    {% for playlist in playlists %}
      <li id="playlist__{{ playlist.id }}" class="playlist playlist__{{ playlist.id }}" zz="{{ playlist.link }}">
        <div class="header">
          <input type="checkbox" checked="true">
          <span class="title">{{ playlist.title }}</span> (<span class="count">{{ playlist.playlistentry_set.all|length }}</span>)
        </div>
        <ul class="entry-list">
          {% for entry in playlist.playlistentry_set.all %}
            <li id="entry__{{ entry.id }}" class="entry entry__{{ entry.id }} video__{{ entry.video_id }}">
              <input type="checkbox" value="{{ entry.id }}" checked="true">
              <span class="entry-title">{{ entry.title }}</span>
            </li>
          {% endfor %}
        </ul>
      </li>
    {% endfor %}
  </ul>
</div>

<div class="float-left content">
  <h1 class="page-title">YouTube Manager</h1>
  
  <div id="ytplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>
</div>
  
<div class="float-left settings">
  <p>
    <label for="shuffle"><input type="checkbox" id="shuffle" checked="true"> Shuffle videos</label>
  </p>
  <p>
    <label for="repeat"><input type="checkbox" id="repeat"> Repeat current video</label>
  </p>
  <p>
    <label for="hide-duplicates"><input type="checkbox" id="hide-duplicates"> Hide duplicates</label>
  </p>
  <p>
    <input type="button" value="Prev" onclick="player.prev()" class="big">
    <input type="button" value="Next" onclick="player.next()" class="big"><br />
  </p>
</div>

<script type="text/x-jqote-template" id="playlist-template">
<![CDATA[

<li id="playlist__<%= this.id %>" class="playlist">
  <div class="header">
    <input type="checkbox" checked="true">
    <span class="title"><%= this.title %></span> (<span class="count">0</span>)
  </div>
  <ul class="entry-list">
  </ul>
</li>

]]>
</script>

<button id="entry-edit-button" class="edit-button">Edit</button>

<div id="entry-edit-panel" class="edit-panel">
  <p>
    <input type="button" id="entry-delete" value="Delete">
  </p>

  <dl class="form">
    <dt>Title</dt>
    <dd><input type="text" id="entry-title" size="40"></dd>

    <dt>Playlist</dt>
    <dd>
      <select id="entry-playlist_id">
        {% for playlist in playlists %}
          <option value="{{ playlist.id }}">{{ playlist.title }}</option>
        {% endfor %}
      </select><br />

      <input type="text" id="entry-playlist-title" size="40" placeholder="Create a new playlist">
      <input type="button" id="entry-playlist-create" value="Create">
    </dd>

    <dt></dt>
    <dd>
      <input type="button" id="entry-save" value="Save">
      <input type="button" id="entry-cancel" value="Cancel">
    </dd>
  </dl>
</div>

<button id="playlist-edit-button" class="edit-button">Edit</button>

<div id="playlist-edit-panel" class="edit-panel">
  <p>
    <input type="button" id="playlist-delete" value="Delete">
    <input type="button" id="playlist-delete-duplicates" value="Delete duplicates">
  </p>

  <dl class="form">
    <dt>Title</dt>
    <dd><input type="text" id="playlist-title" size="40"></dd>

    <dt></dt>
    <dd>
      <input type="button" id="playlist-save" value="Save">
      <input type="button" id="playlist-cancel" value="Cancel"><br />
    </dd>
  </dl>
</div>

{% endblock body %}

{% block extrascript %}
<script src="{{ MEDIA_URL }}js/jquery-1.4.2.js"></script>
<script src="{{ MEDIA_URL }}js/jquery.scrollTo.min.js"></script>
<script src="{{ MEDIA_URL }}js/jquery.placeholder.min.js"></script>
<script src="{{ MEDIA_URL }}js/jquery.blockUI.js"></script>
<script src="{{ MEDIA_URL }}jqote2/jquery.jqote2.min.js"></script>

<script src="{{ MEDIA_URL }}swfobject/swfobject.js"></script>

<script src="{{ MEDIA_URL }}js/common.js"></script>
<script src="{{ MEDIA_URL }}js/ytmanager/ytplayerwrapper.js"></script>
<script src="{{ MEDIA_URL }}js/ytmanager/gateway.js"></script>
<script src="{{ MEDIA_URL }}js/ytmanager/entryeditor.js"></script>
<script src="{{ MEDIA_URL }}js/ytmanager/playlisteditor.js"></script>

<script type="text/javascript">
(function() {

$(function() {
  $('input, textarea').placeholder();

  window.player = new ytmanager.YtPlayerWrapper({
    '$shuffle': $('#shuffle'),
    '$repeat': $('#repeat'),
    '$hideDuplicates': $('#hide-duplicates'),
  });

  var gateway = new ytmanager.Gateway({
    'updatePlaylistEntryUrl': '{% url ytmanager-update-playlist-entry %}',
    'deletePlaylistEntryUrl': '{% url ytmanager-delete-playlist-entry %}',
    'createPlaylistUrl': '{% url ytmanager-create-playlist %}',
    'updatePlaylistUrl': '{% url ytmanager-update-playlist %}',
    'deletePlaylistUrl': '{% url ytmanager-delete-playlist %}',
    'deletePlaylistDuplicatesUrl': '{% url ytmanager-delete-playlist-duplicates %}'
  });

  var entryEditor = new ytmanager.EntryEditor({
    'player': player,
    'gateway': gateway,
    '$container': $('#entry-edit-panel')
  });

  var playlistEditor = new ytmanager.PlaylistEditor({
    'player': player,
    'gateway': gateway,
    '$container': $('#playlist-edit-panel')
  });
});

})();
</script>
{% endblock extrascript %}