player: remove usage of id attribute in audio player

diff --git a/panikweb_templates/static/js/audioPlayer.js b/panikweb_templates/static/js/audioPlayer.js
index 35f1dafd6fefc55df62772ab0feeae30e319a61f..2f1bb17769c432a2f8652d84a4e29414bfc9334b 100644 (file)
--- a/panikweb_templates/static/js/audioPlayer.js
+++ b/panikweb_templates/static/js/audioPlayer.js
@@ -86,7 +86,6 @@
                        var sound = {
                                source :{},
                                title: audio.attr('title'),
                        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')
                                sound_id:audio.data('sound-id'),
                                url:audio.attr('data-url'),
                                focus:audio.attr('data-player-focus')


@@ -108,7 +107,7 @@
                },
                // Transform JSON sound object to HTML container for playlist.
                _htmlifyJsonSound: function(sound) {
                },
                // 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)
                        var audio = $('<audio>',this.options.html5audioOptions)
                                .attr('title',sound.title).hide()
                                .attr('data-sound-id', sound.sound_id)


@@ -198,7 +197,7 @@
                // Play next sound
                bindControl: function(control,audio,element,options) {
                        element.addClass('loading');
                // 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
                        //TODO for controls in page content
                },
                // Play next sound

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index 584a36ea51c3947243afbf98be31bb442a1e7eaf..9e898a8e11e2a220d9737a7e85dd641dd895ce06 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -310,7 +310,7 @@ $(function() {
                        activeTab.trigger('load');
                });
                $('[data-player-action]').on('click',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);
                        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(){
                        }
                });
                $('[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));
                });
 
                        $localList.playlist("bindControl",$(this).attr('data-player-control'),audio,$(this));
                });
 

diff --git a/panikweb_templates/templates/includes/audio.html b/panikweb_templates/templates/includes/audio.html
index 5cb813adad096ac2ac4155bc24eff65959094fd4..e23cce2d2224cdb79243984b0611457b12b4a7e2 100644 (file)
--- a/panikweb_templates/templates/includes/audio.html
+++ b/panikweb_templates/templates/includes/audio.html
@@ -4,21 +4,21 @@
                {% if not embed %}
                <button class="resymbol icon-plus-sign big"
                        title="{% trans "Add to playlist" %}"
                {% 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" 
                        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" %}"
                        ><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-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 %}
                        data-player-action="pauseSounds" 
                        ><span class="sr-only">{% trans "Pause" %}</span></button>
                {% endif %}


@@ -50,14 +50,13 @@
                {{ sound.title }}
        </div>
        {% 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 %}
                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%}"
                >
                preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
                controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
                >