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 start-episode" href="#">Démarrer l'émission</a>
  12 <a class="big-friendly-button end-episode" href="#">Terminer l'émission</a>
  13 <a style="display: none" class="big-friendly-button reset-episode" href="#">Réinitialiser</a>
  14 </p>
  15
  16 <input type="hidden" id="start_time">
  17 <input type="hidden" id="end_time">
  18
  19 <table id="playlist"
  20   data-update-order-url="{% url 'episode-regie-update-order' emission_slug=episode.emission.slug slug=episode.slug %}"
  21      ><tbody>
  22 {% for element in playlist %}
  23 <tr data-element-id="{{element.id}}" data-shortcut="{{element.shortcut}}">
  24     <td class="handle">⠿⁣</td>
  25     <td class="playlist-title">{{element.title}} <span class="shortcut">[{{element.shortcut}}]</span></td>
  26     <td><audio src="{{element.sound.url}}" controls/></td>
  27     <td>{{element.notes}}</td>
  28   </tr>
  29 {% endfor %}
  30 </tbody></table>
  31
  32 {% if can_manage %}
  33 <hr />
  34 <h3>Ajouter à la playlist</h3>
  35 <form id="add-playlist-elements-form" method="POST" action="." enctype="multipart/form-data">
  36 {% csrf_token %}
  37 <input type="file" name="playlist-element" multiple>
  38 </form>
  39 {% endif %}
  40
  41 {% endblock %}
  42
  43 {% block page-end %}
  44 <script>
  45 $(function() {
  46   $('#start_time').val('');
  47   $('#end_time').val('');
  48   $('#add-playlist-elements-form input[type=file]').on('change', function() {
  49     $('body').addClass('submitting');
  50     $(this).parent().submit();
  51   });
  52   $('#playlist tbody').sortable({
  53     handle: '.handle',
  54     update: function(event, ui) {
  55       var new_order = Array();
  56       $('#playlist tr').each(function(i, tr) {
  57         new_order.push($(tr).data('element-id'));
  58       });
  59       $.ajax({
  60          url: $('#playlist').data('update-order-url'),
  61          data: {'new-order': new_order}
  62       });
  63     }
  64   });
  65   $('.playlist-title').on('click', function() {
  66      var audio = $(this).parent().find('audio')[0];
  67      if (audio.paused === true) {
  68        audio.play();
  69        if ($('#start_time').val() == "") {
  70          $('.start-episode').trigger('click');
  71        }
  72      } else {
  73        audio.pause();
  74      }
  75   });
  76   $(document).keypress(function(ev) {
  77     $('[data-shortcut=' + ev.key + '] .playlist-title').trigger('click');
  78     return true;
  79   });
  80   $('.start-episode').click(function() {
  81     $('#start_time').val(Date.now());
  82     $(this).toggleClass('button-done');
  83     $('.reset-episode').show();
  84     return false;
  85   });
  86   $('.end-episode').click(function() {
  87     $('#end_time').val(Date.now());
  88     $(this).toggleClass('button-done');
  89     return false;
  90   });
  91   $('.reset-episode').click(function() {
  92     $('#start_time').val('');
  93     $('#end_time').val('');
  94     $('a').removeClass('button-done');
  95     $(this).hide();
  96     return false;
  97   });
  98   $('audio').each(function(i, elem) {
  99     elem.addEventListener('play', function() {
 100        if ($('#start_time').val() == "") {
 101          $('.start-episode').trigger('click');
 102        }
 103     });
 104   });
 105 });
 106 </script>
 107 {% endblock %}