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 style="display: none" 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   </tr>
  35 {% endfor %}
  36 </tbody></table>
  37
  38 {% if can_manage %}
  39 <hr />
  40 <h3>Ajouter à la playlist</h3>
  41 <form id="add-playlist-elements-form" method="POST" action="." enctype="multipart/form-data">
  42 {% csrf_token %}
  43 {{upload_file_form}}
  44 </form>
  45 {% endif %}
  46
  47 {% endblock %}
  48
  49 {% block page-end %}
  50 <style>
  51 #add-playlist-elements-form > label { display: none; }
  52 </style>
  53 <script>
  54 $(function() {
  55   function update_start_end() {
  56     $.ajax({
  57        url: $('#start_time').data('url'),
  58        data: {'start': $('#start_time').val(),
  59               'end': $('#end_time').val()},
  60        success: function(data, status, jqxhr) {
  61          if (data.pige_download_url) {
  62            $('#pige-url').attr('href', data.pige_download_url).show();
  63            $('#pige-url').show();
  64          } else {
  65            $('#pige-url').hide();
  66          }
  67        }
  68     });
  69   }
  70
  71   $('.ready').on('click', function() {
  72     $('.ready').hide();
  73     $('.start-episode').show();
  74     $('.end-episode').show();
  75     $('#ready').val('ready');
  76     return false;
  77   });
  78
  79   $('#add-playlist-elements-form').on('panik:file-upload-complete', function() {
  80    $(this).submit();
  81   });
  82
  83   $('#playlist tbody').sortable({
  84     handle: '.handle',
  85     update: function(event, ui) {
  86       var new_order = Array();
  87       $('#playlist tr').each(function(i, tr) {
  88         new_order.push($(tr).data('element-id'));
  89       });
  90       $.ajax({
  91          url: $('#playlist').data('update-order-url'),
  92          data: {'new-order': new_order}
  93       });
  94     }
  95   });
  96   $('.playlist-title').on('click', function() {
  97      var audio = $(this).parent().find('audio')[0];
  98      if (audio.paused === true) {
  99        audio.play();
 100        if ($('#ready').val() === 'ready' && $('#start_time').val() === "") {
 101          $('.start-episode').trigger('click');
 102        }
 103      } else {
 104        audio.pause();
 105      }
 106   });
 107   $(document).keypress(function(ev) {
 108     $('[data-shortcut=' + ev.key + '] .playlist-title').trigger('click');
 109     return true;
 110   });
 111   $('.start-episode').click(function() {
 112     $('#start_time').val(Date.now());
 113     update_start_end();
 114     $(this).addClass('button-done');
 115     $('.reset-episode').show();
 116     return false;
 117   });
 118   $('.end-episode').click(function() {
 119     $('#end_time').val(Date.now());
 120     update_start_end();
 121     $(this).addClass('button-done');
 122     return false;
 123   });
 124   $('.reset-episode').click(function() {
 125     $('.ready').show();
 126     $('.start-episode').hide();
 127     $('.end-episode').hide();
 128     $('#ready').val('');
 129     $('#start_time').val('');
 130     $('#end_time').val('');
 131     update_start_end();
 132     $('a').removeClass('button-done');
 133     $(this).hide();
 134     return false;
 135   });
 136   $('audio').each(function(i, elem) {
 137     elem.addEventListener('play', function() {
 138        if ($('#ready').val() === 'ready' && $('#start_time').val() === "") {
 139          $('.start-episode').trigger('click');
 140        }
 141     });
 142   });
 143
 144
 145   if ($('#ready').val() === 'ready') {
 146     $('.ready').trigger('click');
 147   }
 148   if ($('#start_time').val() !== '') {
 149     $('.start-episode').toggleClass('button-done');
 150     $('.reset-episode').show();
 151   }
 152   if ($('#end_time').val() !== '') {
 153     $('.end-episode').toggleClass('button-done');
 154   }
 155
 156 });
 157 </script>
 158 {% endblock %}