add rel="noopener" to links opening in new tabs

[panikweb.git] / panikweb_templates / templates / includes / audio.html

diff --git a/panikweb_templates/templates/includes/audio.html b/panikweb_templates/templates/includes/audio.html
index cdda4b10704612df4ddce7df1e865edfd33d9cc5..673452d4aed07d25615a5d586d6f2efc6e6de295 100644 (file)
--- a/panikweb_templates/templates/includes/audio.html
+++ b/panikweb_templates/templates/includes/audio.html
@@ -1,29 +1,62 @@
-{% load soundfiles %}
-{% load paniktags %}
+{% load soundfiles paniktags i18n %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
-       <div class="controls huge">
-               <button class="icon-plus-sign"
-                       title="Add to playlist" 
+       <div class="audio" data-sound-id="{{ sound.id }}">
+               {% if not embed %}
+               <button class="resymbol icon-plus-sign big"
+                       title="{% trans "Add to playlist" %}"
+                       data-sound-id="{{ sound.id }}"
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="registerAudio" 
-                       id="addToPlaylist-{{ sound.file.url|slugify }}"
-                       ></button>
-               <button class="icon-play-circle"
-                       title="Play" 
-                       data-player-audio="Audio-{{ sound.file.url|slugify }}" 
+                       ><span class="sr-only">{% trans "Add to playlist" %}</span></button>
+               {% endif %}
+               <button class="resymbol icon-play-sign big"
+                       title="{% trans "Play" %}"
+                       data-sound-id="{{ sound.id }}"
                        data-player-action="playAudio" 
-                       ></button>
-               {% if sound|is_format_available:'ogg' %}
-                       <a target="_blanck" class="icon-download button" href="{{ sound|format_url:'ogg' }}"
-                               ></a>
+                       ><span class="sr-only">{% trans "Play" %}</span></button>
+               {% if embed %}
+               <button class="icons icon-pause big"
+                       title="{% trans "Pause" %}"
+                       style="display: none;"
+                       data-sound-id="{{ sound.id }}"
+                       data-player-action="pauseSounds" 
+                       ><span class="sr-only">{% trans "Pause" %}</span></button>
+               {% endif %}
+               <button class="resymbol icon-download big"
+                       title="{% trans "Download file" %}"
+                       onclick="$(this).next().toggleClass('hidden-download-links');return false;"
+                       ><span class="sr-only">{% trans "Download file" %}</span></button>
+               <div class="download-links hidden-download-links">
+                       {% if sound|is_format_available:'ogg' %}
+                       <a target="_blank" rel="noopener" class="button inBlock" href="{{ sound|format_url:'ogg' }}">
+                               <span class="icon-file">&nbsp;ogg</span>
+                       </a>
+                       {% endif %}
+                       {% if sound|is_format_available:'mp3' %}
+                       <a target="_blank" rel="noopener" class="button inBlock" href="{{ sound|format_url:'mp3' }}">
+                               <span class="icon-file">&nbsp;mp3</span>
+                       </a>
+                       {% endif %}
+               </div>
+               {% if not embed %}
+               <button class="icon-share icons big"
+                       title="{% trans "Embed" %}"
+                       data-popup-href="{% url 'soundfile-dialog-embed-view' emission_slug=sound.episode.emission.slug episode_slug=sound.episode.slug pk=sound.pk %}"
+                       ><span class="sr-only">{% trans "Embed" %}</span></button>
                {% endif %}
        </div>
-       <audio 
+       {% if display_fragment_name %}
+       <div class="fragment-name">
+               {{ sound.title }}
+       </div>
+       {% endif %}
+       <audio
                data-player='true'
                class='hidden'
-               data-url="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}"
-               title="{{episode.title}}"
-               id="Audio-{{ sound.file.url|slugify }}" 
+               data-url="{% url 'episode-view' emission_slug=sound.episode.emission.slug slug=sound.episode.slug %}"
+               data-sound-id="{{ sound.id }}"
+               {% if sound.fragment and sound.title %}title="{{ sound.title }}"
+               {% else %}title="{{sound.episode.title}}"{% endif %}
                preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
                controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
                >
@@ -43,19 +76,9 @@
                                <a class="icon-headphones" href="{{ sound|format_url:'mp3' }}"> mp3</a>
                        {% endif %}
                </div>
-               <code class="source hidden json">
-               {
-                       "source" :{
-                               "audio/ogg":{% if sound|is_format_available:'ogg' %}{{ sound|format_url:'ogg'|jsonify|safe }}{% else %}false{% endif %},        
-                               "audio/mpeg":{% if sound|is_format_available:'mp3' %}{{ sound|format_url:'mp3'|jsonify|safe }}{% else %}false{% endif %}                                                
-                       },
-                       "emission": "{{episode.slug}}",
-                       "episode": "{{episode.slug}}",
-                       "title": {{episode.title|jsonify|safe}},
-                       "id":"{{ sound.file.url|slugify }}"
-               }
-               </code>
-       </audio>        
+       </audio>
+       <div class="waveform" data-sound-id="{{ sound.id }}" data-duration="{{ sound.duration }}"
+               data-duration-string="{{ sound.get_duration_string }}"></div>
 {% else %}
        <div class="hidden error">No sound available!</div>
 {% endif%}