panikweb_templates/templates/includes/audio.html

   1 {% load soundfiles paniktags i18n %}
   2 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
   3         <div class="audio" data-sound-id="{{ sound.id }}">
   4                 {% if not embed %}
   5                 <button class="resymbol icon-plus-sign big"
   6                         title="{% trans "Add to playlist" %}"
   7                         data-sound-id="{{ sound.id }}"
   8                         data-player-audio="Audio-{{ sound.file.url|slugify }}"
   9                         data-player-action="registerAudio"
  10                         ><span class="sr-only">{% trans "Add to playlist" %}</span></button>
  11                 {% endif %}
  12                 <button class="resymbol icon-play-sign big"
  13                         title="{% trans "Play" %}"
  14                         data-sound-id="{{ sound.id }}"
  15                         data-player-action="playAudio"
  16                         ><span class="sr-only">{% trans "Play" %}</span></button>
  17                 {% if embed %}
  18                 <button class="icons icon-pause big"
  19                         title="{% trans "Pause" %}"
  20                         style="display: none;"
  21                         data-sound-id="{{ sound.id }}"
  22                         data-player-action="pauseSounds"
  23                         ><span class="sr-only">{% trans "Pause" %}</span></button>
  24                 {% endif %}
  25                 <button class="resymbol icon-download big"
  26                         title="{% trans "Download file" %}"
  27                         onclick="$(this).next().toggleClass('hidden-download-links');return false;"
  28                         ><span class="sr-only">{% trans "Download file" %}</span></button>
  29                 <div class="download-links hidden-download-links">
  30                         {% if sound|is_format_available:'ogg' %}
  31                         <a target="_blank" class="button inBlock" href="{{ sound|format_url:'ogg' }}">
  32                                 <span class="icon-file">&nbsp;ogg</span>
  33                         </a>
  34                         {% endif %}
  35                         {% if sound|is_format_available:'mp3' %}
  36                         <a target="_blank" class="button inBlock" href="{{ sound|format_url:'mp3' }}">
  37                                 <span class="icon-file">&nbsp;mp3</span>
  38                         </a>
  39                         {% endif %}
  40                 </div>
  41                 {% if not embed %}
  42                 <button class="icon-share icons big"
  43                         title="{% trans "Embed" %}"
  44                         data-popup-href="{% url 'soundfile-dialog-embed-view' emission_slug=sound.episode.emission.slug episode_slug=sound.episode.slug pk=sound.pk %}"
  45                         ><span class="sr-only">{% trans "Embed" %}</span></button>
  46                 {% endif %}
  47         </div>
  48         {% if display_fragment_name %}
  49         <div class="fragment-name">
  50                 {{ sound.title }}
  51         </div>
  52         {% endif %}
  53         <audio
  54                 data-player='true'
  55                 class='hidden'
  56                 data-url="{% url 'episode-view' emission_slug=sound.episode.emission.slug slug=sound.episode.slug %}"
  57                 data-sound-id="{{ sound.id }}"
  58                 {% if sound.fragment and sound.title %}title="{{ sound.title }}"
  59                 {% else %}title="{{sound.episode.title}}"{% endif %}
  60                 preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
  61                 controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
  62                 >
  63                 {% if sound|is_format_available:'ogg' %}
  64                         <source src="{{ sound|format_url:'ogg' }}" type="audio/ogg">
  65                 {% endif %}
  66                 {% if sound|is_format_available:'mp3' %}
  67                         <source src="{{ sound|format_url:'mp3' }}" type="audio/mpeg">
  68                 {% endif %}
  69                 <div class="alternative padded">
  70                         <div class="info smooth">Your browser can't play audio files</div>
  71                         <strong>Download: </strong>
  72                         {% if sound|is_format_available:'ogg' %}
  73                                 <a class="icon-headphones" href="{{ sound|format_url:'ogg' }}"> ogg</a>
  74                         {% endif %}
  75                         {% if sound|is_format_available:'mp3' %}
  76                                 <a class="icon-headphones" href="{{ sound|format_url:'mp3' }}"> mp3</a>
  77                         {% endif %}
  78                 </div>
  79         </audio>
  80         <div class="waveform" data-sound-id="{{ sound.id }}" data-duration="{{ sound.duration }}"
  81                 data-duration-string="{{ sound.get_duration_string }}"></div>
  82 {% else %}
  83         <div class="hidden error">No sound available!</div>
  84 {% endif%}