panikweb/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 embed %}
   5                 <button class="icons icon-pause big"
   6                         title="{% trans "Pause" %}"
   7                         style="display: none;"
   8                         data-player-audio="Audio-{{ sound.file.url|slugify }}"
   9                         data-player-action="pauseSounds"
  10                         ></button>
  11                 <a class="resymbol icon-download big"
  12                         title="Download file"
  13                         target="_new" rel="noopener" download
  14                         {% if sound|is_format_available:'mp3' %}
  15                         href="{{ sound|format_url:'mp3' }}"
  16                         {% else %}
  17                         href="{{ sound|format_url:'ogg' }}"
  18                         {% endif %}
  19                         ></a>
  20                 {% endif %}
  21                 {% if not embed %}
  22                 <button class="action-play"
  23                         data-player-audio="Audio-{{ sound.file.url|slugify }}"
  24                         data-player-action="playAudio"
  25                         >Écouter le podcast</button>
  26                 {% if sound|is_format_available:'ogg' %}
  27                 / <a href="{{ sound|format_url:'ogg' }}" download>Télécharger</a>
  28                 {% else %}
  29                 / <a href="{{ sound|format_url:'mp3' }}" download>Télécharger</a>
  30                 {% endif %}
  31                 / <button class="action-share"
  32                         data-popup-href="{% url 'soundfile-dialog-embed-view' emission_slug=sound.episode.emission.slug episode_slug=sound.episode.slug pk=sound.pk %}"
  33                         >Partager</button>
  34                 {% endif %}
  35         </div>
  36         {% if display_fragment_name %}
  37         <div class="fragment-name">
  38                 {{ sound.title }}
  39         </div>
  40         {% endif %}
  41         <audio
  42                 data-player='true'
  43                 class='hidden'
  44                 data-url="{% url 'episode-view' emission_slug=sound.episode.emission.slug slug=sound.episode.slug %}"
  45                 data-sound-id="{{ sound.id }}"
  46                 {% if sound.fragment and sound.title %}title="{{ sound.title }}"
  47                 {% else %}title="{{sound.episode.title}}"{% endif %}
  48                 id="Audio-{{ sound.file.url|slugify }}"
  49                 preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
  50                 controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
  51                 >
  52                 {% if sound|is_format_available:'ogg' %}
  53                         <source src="{{ sound|format_url:'ogg' }}" type="audio/ogg">
  54                 {% endif %}
  55                 {% if sound|is_format_available:'mp3' %}
  56                         <source src="{{ sound|format_url:'mp3' }}" type="audio/mpeg">
  57                 {% endif %}
  58                 <div class="alternative padded">
  59                         <div class="info smooth">Your browser can't play audio files</div>
  60                         <strong>Download: </strong>
  61                         {% if sound|is_format_available:'ogg' %}
  62                                 <a class="icon-headphones" href="{{ sound|format_url:'ogg' }}"> ogg</a>
  63                         {% endif %}
  64                         {% if sound|is_format_available:'mp3' %}
  65                                 <a class="icon-headphones" href="{{ sound|format_url:'mp3' }}"> mp3</a>
  66                         {% endif %}
  67                 </div>
  68         </audio>
  69         <div class="waveform" data-sound-id="{{ sound.id }}" data-duration="{{ sound.duration }}"
  70                 data-duration-string="{{ sound.get_duration_string }}"></div>
  71 {% else %}
  72         <div class="hidden error">No sound available!</div>
  73 {% endif%}