emissions/templates/emissions/episode_regie.html

   1 {% extends "base.html" %}
   2 {% load soundfiles panikdbtags %}
   3 {% block appbar %}
   4 <h2>{{ episode.emission.title }} — {{ episode.title }}</h2>
   5 <span><a href="../">Retourner à l'épisode</a></span>
   6 {% endblock %}
   7
   8 {% block content %}
   9
  10 <p>
  11 <a class="big-friendly-button ready" href="#">Prêt !</a>
  12 <a style="display: none;" class="big-friendly-button start-episode" href="#">Démarrer l'émission</a>
  13 <a style="display: none;" class="big-friendly-button end-episode" href="#">Terminer l'émission</a>
  14 <a style="display: none" class="big-friendly-button reset-episode" href="#">Réinitialiser</a>
  15 <a {% if not download_url %}style="display: none"{% endif %} class="big-friendly-button" id="pige-url" href="{{download_url}}">Télécharger depuis la pige</a>
  16 </p>
  17
  18 <div style="display: none;">
  19 <input type="text" id="ready" value="{{ready}}"/>
  20 <input data-url="{% url 'episode-regie-marks' emission_slug=episode.emission.slug slug=episode.slug %}"
  21        type="text" id="start_time" value="{{start_time}}">
  22 <input type="text" id="end_time" value="{{end_time}}">
  23 </div>
  24
  25 <table id="playlist"
  26   data-update-order-url="{% url 'episode-regie-update-order' emission_slug=episode.emission.slug slug=episode.slug %}"
  27      ><tbody>
  28 {% for element in playlist %}
  29 <tr data-element-id="{{element.id}}" data-shortcut="{{element.shortcut}}">
  30     <td class="handle">⠿⁣</td>
  31     <td class="playlist-title">{{element.title}} <span class="shortcut">[{{element.shortcut}}]</span></td>
  32     <td><audio src="{{element.sound.url}}" controls/></td>
  33     <td>{{element.notes}}</td>
  34     {% if can_manage %}
  35     <td class="delete-column"><a href="{% url 'episode-regie-delete-element' emission_slug=episode.emission.slug slug=episode.slug %}?id={{element.id}}" class="icon-remove-sign"></a></td>
  36     {% endif %}
  37   </tr>
  38 {% endfor %}
  39 </tbody></table>
  40
  41 {% if can_manage %}
  42 <hr />
  43 <h3>Ajouter à la playlist</h3>
  44 <form id="add-playlist-elements-form" method="POST" action="." enctype="multipart/form-data">
  45 {% csrf_token %}
  46 {{upload_file_form}}
  47 </form>
  48 {% endif %}
  49
  50 {% endblock %}
  51
  52 {% block page-end %}
  53 <style>
  54 #add-playlist-elements-form > label { display: none; }
  55 </style>
  56 <script>
  57 $(function() {
  58   function update_start_end() {
  59     $.ajax({
  60        url: $('#start_time').data('url'),
  61        data: {'start': $('#start_time').val(),
  62               'end': $('#end_time').val()},
  63        success: function(data, status, jqxhr) {
  64          if (data.pige_download_url) {
  65            $('#pige-url').attr('href', data.pige_download_url).show();
  66            $('#pige-url').show();
  67          } else {
  68            $('#pige-url').hide();
  69          }
  70        }
  71     });
  72   }
  73
  74   $('.ready').on('click', function() {
  75     $('.ready').hide();
  76     $('.start-episode').show();
  77     $('.end-episode').show();
  78     $('#ready').val('ready');
  79     return false;
  80   });
  81
  82   $('#add-playlist-elements-form').on('panik:file-upload-complete', function() {
  83    $(this).submit();
  84   });
  85
  86   $('#playlist tbody').sortable({
  87     handle: '.handle',
  88     update: function(event, ui) {
  89       var new_order = Array();
  90       $('#playlist tr').each(function(i, tr) {
  91         new_order.push($(tr).data('element-id'));
  92       });
  93       $.ajax({
  94          url: $('#playlist').data('update-order-url'),
  95          data: {'new-order': new_order}
  96       });
  97     }
  98   });
  99   $('.playlist-title').on('click', function() {
 100      var audio = $(this).parent().find('audio')[0];
 101      if (audio.paused === true) {
 102        audio.play();
 103        if ($('#ready').val() === 'ready' && $('#start_time').val() === "") {
 104          $('.start-episode').trigger('click');
 105        }
 106      } else {
 107        audio.pause();
 108      }
 109   });
 110   $(document).keypress(function(ev) {
 111     $('[data-shortcut=' + ev.key + '] .playlist-title').trigger('click');
 112     return true;
 113   });
 114   $('.start-episode').click(function() {
 115     $('#start_time').val(Date.now());
 116     update_start_end();
 117     $(this).addClass('button-done');
 118     $('.reset-episode').show();
 119     return false;
 120   });
 121   $('.end-episode').click(function() {
 122     $('#end_time').val(Date.now());
 123     update_start_end();
 124     $(this).addClass('button-done');
 125     return false;
 126   });
 127   $('.reset-episode').click(function() {
 128     $('.ready').show();
 129     $('.start-episode').hide();
 130     $('.end-episode').hide();
 131     $('#ready').val('');
 132     $('#start_time').val('');
 133     $('#end_time').val('');
 134     update_start_end();
 135     $('a').removeClass('button-done');
 136     $(this).hide();
 137     return false;
 138   });
 139   $('audio').each(function(i, elem) {
 140     elem.addEventListener('play', function() {
 141        if ($('#ready').val() === 'ready' && $('#start_time').val() === "") {
 142          $('.start-episode').trigger('click');
 143        }
 144     });
 145   });
 146
 147   $('.delete-column a').on('click', function() {
 148     var tr = $(this).parents('tr');
 149     $.ajax({
 150        url: $(this).attr('href'),
 151        success: function() {
 152          $(tr).hide();
 153        }
 154     });
 155     return false;
 156   });
 157
 158
 159   if ($('#ready').val() === 'ready') {
 160     $('.ready').trigger('click');
 161   }
 162   if ($('#start_time').val() !== '') {
 163     $('.start-episode').toggleClass('button-done');
 164     $('.reset-episode').show();
 165   }
 166   if ($('#end_time').val() !== '') {
 167     $('.end-episode').toggleClass('button-done');
 168   }
 169
 170 });
 171 </script>
 172 {% endblock %}