player: remove usage of id attribute in audio player
authorFrédéric Péters <fpeters@0d.be>
Wed, 22 Apr 2020 18:56:10 +0000 (20:56 +0200)
committerFrédéric Péters <fpeters@0d.be>
Wed, 22 Apr 2020 18:58:52 +0000 (20:58 +0200)
panikweb_templates/static/js/audioPlayer.js
panikweb_templates/static/js/specifics.js
panikweb_templates/templates/includes/audio.html

index 35f1daf..2f1bb17 100644 (file)
@@ -86,7 +86,6 @@
                        var sound = {
                                source :{},
                                title: audio.attr('title'),
-                               id:audio.attr('id'),
                                sound_id:audio.data('sound-id'),
                                url:audio.attr('data-url'),
                                focus:audio.attr('data-player-focus')
                },
                // Transform JSON sound object to HTML container for playlist.
                _htmlifyJsonSound: function(sound) {
-                       var container = $('<li>').attr('data-origin',sound.id);
+                       var container = $('<li>');
                        var audio = $('<audio>',this.options.html5audioOptions)
                                .attr('title',sound.title).hide()
                                .attr('data-sound-id', sound.sound_id)
                // Play next sound
                bindControl: function(control,audio,element,options) {
                        element.addClass('loading');
-                       audioID = audio.attr('id');                     
+                       audioID = audio.data('souce-id');
                        //TODO for controls in page content
                },
                // Play next sound
index 584a36e..9e898a8 100644 (file)
@@ -310,7 +310,7 @@ $(function() {
                        activeTab.trigger('load');
                });
                $('[data-player-action]').on('click',function(){
-                       var audio = $('#'+$(this).attr('data-player-audio'));
+                       var audio = $('audio[data-sound-id=' + $(this).attr('data-sound-id') + ']');
                        var sound_id = audio.data('sound-id');
                        if($(this).attr('data-player-action') == "registerAudio"){
                                $localList.playlist("registerAudio",audio);
@@ -336,7 +336,7 @@ $(function() {
                        }
                });
                $('[data-player-control]').each(function(){
-                       var audio = $('#'+$(this).attr('data-player-audio'));
+                       var audio = $('audio[data-sound-id=' + $(this).attr('data-sound-id') + ']');
                        $localList.playlist("bindControl",$(this).attr('data-player-control'),audio,$(this));
                });
 
index 5cb813a..e23cce2 100644 (file)
@@ -4,21 +4,21 @@
                {% 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 }}"
                        ><span class="sr-only">{% trans "Add to playlist" %}</span></button>
                {% endif %}
                <button class="resymbol icon-play-sign big"
                        title="{% trans "Play" %}"
-                       data-player-audio="Audio-{{ sound.file.url|slugify }}" 
+                       data-sound-id="{{ sound.id }}"
                        data-player-action="playAudio" 
                        ><span class="sr-only">{% trans "Play" %}</span></button>
                {% if embed %}
                <button class="icons icon-pause big"
                        title="{% trans "Pause" %}"
                        style="display: none;"
-                       data-player-audio="Audio-{{ sound.file.url|slugify }}" 
+                       data-sound-id="{{ sound.id }}"
                        data-player-action="pauseSounds" 
                        ><span class="sr-only">{% trans "Pause" %}</span></button>
                {% endif %}
                {{ sound.title }}
        </div>
        {% endif %}
-       <audio 
+       <audio
                data-player='true'
                class='hidden'
                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 %}
-               id="Audio-{{ sound.file.url|slugify }}" 
                preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
                controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
                >