From: Frédéric Péters <fpeters@0d.be>
Date: Wed, 22 Apr 2020 18:56:10 +0000 (+0200)
Subject: player: remove usage of id attribute in audio player
X-Git-Tag: v2021~175
X-Git-Url: https://git.0d.be/?p=panikweb.git;a=commitdiff_plain;h=6fab891cf4ee59ab527fbd69621c13e4e46a81ba

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 35f1daf..2f1bb17 100644
--- 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'),
-				id:audio.attr('id'),
 				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) {
-			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)
@@ -198,7 +197,7 @@
 		// 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
diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index 584a36e..9e898a8 100644
--- 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(){
-			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));
 		});
 
diff --git a/panikweb_templates/templates/includes/audio.html b/panikweb_templates/templates/includes/audio.html
index 5cb813a..e23cce2 100644
--- 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" %}"
+			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 %}
@@ -50,14 +50,13 @@
 		{{ 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%}"
 		>