Source

ytmanager / mcyoutube / templates / mcyoutube / playlist / playlist.html

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

{% block body %}
<div class="navigation">
  <ul>
    <li><a href="{% url mcyoutube-playlist-reload %}">Reload playlists</a></li>
  </ul>
</div>

<div class="sidebar">

  <div class="playlists-actions">
    <input type="text" id="filter-playlists" placeholder="Filter playlists" />
    <input type="button" id="toggle-playlists-button" />
  </div>

  <div class="playlists-container">
    <ul class="player">
      {% for playlist in playlists %}
        <li id="playlist__{{ playlist.id }}" class="playlist playlist__{{ playlist.id }}">
          <div class="header">
            <input type="checkbox" checked="checked">
            <a href="{% url mcyoutube-playlist-view playlist.user_id playlist.id %}"><span class="title">{{ playlist.title }}</span></a>
            (<span class="count">{{ playlist.playlistentry_set.all|length }}</span>)
            <a href="" class="toggle"></a>
          </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="checked">
                <span class="entry-title">{{ entry.title }}</span>
              </li>
            {% endfor %}
          </ul>
        </li>
      {% endfor %}
    </ul>
  </div>

</div>

<div class="content base">

  <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="settings">
  <p>
    <label for="shuffle"><input type="checkbox" id="shuffle" /> 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>

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

<div id="entry-edit-panel" class="edit-panel base">
  <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 base">
  <p>
    <a href="" id="playlist-link"></a>
  </p>

  <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 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>

<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();

  ytmanager.Playlist.prototype.URL_TEMPLATE = unescape('{% url mcyoutube-playlist-view "{0}" "{1}" %}');
  window.player = new ytmanager.YtPlayerWrapper({
    $shuffle: $('#shuffle'),
    $repeat: $('#repeat'),
    $hideDuplicates: $('#hide-duplicates'),
  });

  var gateway = new ytmanager.Gateway({
    updatePlaylistEntryUrl: '{% url mcyoutube-entry-update %}',
    deletePlaylistEntryUrl: '{% url mcyoutube-entry-delete %}',
    createPlaylistUrl: '{% url mcyoutube-playlist-create %}',
    updatePlaylistUrl: '{% url mcyoutube-playlist-update %}',
    deletePlaylistUrl: '{% url mcyoutube-playlist-delete %}',
    deletePlaylistDuplicatesUrl: '{% url mcyoutube-playlist-delete-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 %}