From 74678ed0e504189d2a684bcc28576f148314f93d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Sun, 28 Apr 2024 10:09:38 +0200 Subject: [PATCH] prepare support for multiple players --- panikweb/base/static/js/specifics.js | 233 ++++++++++--------- panikweb/base/templates/base.html | 4 +- panikweb/base/templates/includes/player.html | 92 ++++---- panikweb/paniktags/templatetags/paniktags.py | 10 +- 4 files changed, 178 insertions(+), 161 deletions(-) diff --git a/panikweb/base/static/js/specifics.js b/panikweb/base/static/js/specifics.js index b980ec6..6133470 100644 --- a/panikweb/base/static/js/specifics.js +++ b/panikweb/base/static/js/specifics.js @@ -206,128 +206,137 @@ $(function() { var timer = null; var ticker_interval = null; - const player = document.getElementById('Player'); - const display_emission_subtitle = player.dataset.hasOwnProperty('display_emission_subtitle'); - const display_episode_subtitle = player.dataset.hasOwnProperty('display_episode_subtitle'); - $('#WhatsOnAir').on('load',function(){ - var WhatsOnAir = $(this); - $.getJSON('/onair.json', function(onair) { - var onairContainer = $(''); - if (onair.data.emission) { - var text = onair.data.emission.title; - if (onair.data.emission.subtitle && display_emission_subtitle) { - text = text + " - " + onair.data.emission.subtitle; - } - $('', {class: "onair--emission-link", - href: onair.data.emission.url, - text: text} - ).appendTo(onairContainer); - } - if (onair.data.episode) { - var text = onair.data.episode.title; - if (onair.data.episode.subtitle && display_episode_subtitle) { - text = text + " - " + onair.data.episode.subtitle; + const players = document.querySelectorAll('.radio-player, #Player'); + + players.forEach(function(player) { + const display_emission_subtitle = player.dataset.hasOwnProperty('display_emission_subtitle'); + const display_episode_subtitle = player.dataset.hasOwnProperty('display_episode_subtitle'); + const whatsonair = player.querySelector('.radio-player--whatsonair') || document.getElementById('WhatsOnAir'); + const live_stream_controller = player.querySelector('.radio-player--live-stream-controller') || document.getElementById('LiveStreamController'); + const live_stream_button = player.querySelector('.radio-player--play-stream-button') || document.getElementById('streamSymbol'); + const live_stream_audio = player.querySelector('.radio-player--audio-stream') || document.getElementById('LiveStream'); + + $(whatsonair).on('load',function(){ + var WhatsOnAir = $(this); + $.getJSON('/onair.json', function(onair) { + var onairContainer = $(''); + if (onair.data.emission) { + var text = onair.data.emission.title; + if (onair.data.emission.subtitle && display_emission_subtitle) { + text = text + " - " + onair.data.emission.subtitle; + } + $('', {class: "onair--emission-link", + href: onair.data.emission.url, + text: text} + ).appendTo(onairContainer); } - $(' - ').appendTo(onairContainer); - $('', {class: "onair--episode-link", - href: onair.data.episode.url, - text: text} - ).appendTo(onairContainer); - } - if (onair.data.nonstop) { - if (onair.data.nonstop.url) { - $('', {class: "onair--nonstop-link", - href: onair.data.nonstop.url, - text: onair.data.nonstop.title} + if (onair.data.episode) { + var text = onair.data.episode.title; + if (onair.data.episode.subtitle && display_episode_subtitle) { + text = text + " - " + onair.data.episode.subtitle; + } + $(' - ').appendTo(onairContainer); + $('', {class: "onair--episode-link", + href: onair.data.episode.url, + text: text} ).appendTo(onairContainer); + } + if (onair.data.nonstop) { + if (onair.data.nonstop.url) { + $('', {class: "onair--nonstop-link", + href: onair.data.nonstop.url, + text: onair.data.nonstop.title} + ).appendTo(onairContainer); + } else { + $('', {class: "onair--nonstop-span", + text: onair.data.nonstop.title} + ).appendTo(onairContainer); + } + } + if (onair.data.track_title) { + var $track_container = $('', {class: "nonstop-track-metadata"}); + if (onair.data.nonstop && onair.data.nonstop.playlist_url) { + $track_container = $('', {class: "nonstop-track-metadata", href: onair.data.nonstop.playlist_url}); + } + if (onair.data.track_artist) { + $('', {text: onair.data.track_artist, class: "nonstop-track-artist"}).appendTo($track_container); + $(' - ').appendTo($track_container) + } + $('', {text: onair.data.track_title, + class: "nonstop-track-title"} + ).appendTo($track_container); + $(' - ').appendTo(onairContainer); + $track_container.appendTo(onairContainer); + } + if (onair.data.emission || onair.data.episode || onair.data.nonstop) { + $('body').attr('data-nothing-playing', null) + onairContainer.find('a').ajaxifyClick(); } else { - $('', {class: "onair--nonstop-span", - text: onair.data.nonstop.title} - ).appendTo(onairContainer); + $('body').attr('data-nothing-playing', 'true') + onairContainer = $(''); } - } - if (onair.data.track_title) { - var $track_container = $('', {class: "nonstop-track-metadata"}); - if (onair.data.nonstop && onair.data.nonstop.playlist_url) { - $track_container = $('', {class: "nonstop-track-metadata", href: onair.data.nonstop.playlist_url}); + if (onair.data.emission && onair.data.emission.chat) { + $('#CurrentlyChatting a').attr('href', onair.data.emission.chat); + $('#CurrentlyChatting').show(); + } else { + $('#CurrentlyChatting').hide(); } - if (onair.data.track_artist) { - $('', {text: onair.data.track_artist, class: "nonstop-track-artist"}).appendTo($track_container); - $(' - ').appendTo($track_container) + var current_html = WhatsOnAir.find('> span').html(); + var new_html = onairContainer.html(); + if (new_html !== current_html) { + WhatsOnAir.fadeOut(); + WhatsOnAir.empty().append(onairContainer); + WhatsOnAir.fadeIn(); } - $('', {text: onair.data.track_title, - class: "nonstop-track-title"} - ).appendTo($track_container); - $(' - ').appendTo(onairContainer); - $track_container.appendTo(onairContainer); - } - if (onair.data.emission || onair.data.episode || onair.data.nonstop) { - $('body').attr('data-nothing-playing', null) - onairContainer.find('a').ajaxifyClick(); - } else { - $('body').attr('data-nothing-playing', 'true') - onairContainer = $(''); - } - if (onair.data.emission && onair.data.emission.chat) { - $('#CurrentlyChatting a').attr('href', onair.data.emission.chat); - $('#CurrentlyChatting').show(); - } else { - $('#CurrentlyChatting').hide(); + // update grid + var cell_slug = (onair.data.emission && onair.data.emission.slug) || ( + onair.data.nonstop && onair.data.nonstop.slug); + var $current_cell = $('.program li.current'); + if ($current_cell.data('program-slug') !== cell_slug && + $current_cell.next().data('program-slug') === cell_slug) { + $current_cell.removeClass('current').addClass('past'); + $current_cell.next().removeClass('future').addClass('current'); + } + }); + }); + $(whatsonair).trigger('load'); + var refresh_onair_interval = 25000; + setInterval(function() { $(whatsonair).trigger('load') }, refresh_onair_interval); + + $(live_stream_controller).on('click', function() { + $(live_stream_button).trigger('click'); + return false; + }); + $(live_stream_button).on('click keypress', function(e) { + if (e.type === 'keypress' && !(e.key === ' ' || e.key === 'Enter')) + return; + e.preventDefault(); + var stream = live_stream_audio; + if (stream.paused == false){ + stream.pause(); + }else{ + if (typeof (_paq) == 'object') { + _paq.push(['trackEvent', 'Audio', 'Play Stream']); + } + stream.play(); } - var current_html = WhatsOnAir.find('> span').html(); - var new_html = onairContainer.html(); - if (new_html !== current_html) { - WhatsOnAir.fadeOut(); - WhatsOnAir.empty().append(onairContainer); - WhatsOnAir.fadeIn(); + return false; + }); + $(live_stream_audio).on('play',function(){ + $('audio:not("#LiveStream"):not(".radio-player--audio-stream")').each(function(){this.pause();}); + $(live_stream_button).removeClass('icon-volume-up').addClass('icon-stop'); + if (typeof window.mixcloud_widgets !== 'undefined') { + window.mixcloud_widgets.forEach(function(value) { value.pause() }); } - // update grid - var cell_slug = (onair.data.emission && onair.data.emission.slug) || ( - onair.data.nonstop && onair.data.nonstop.slug); - var $current_cell = $('.program li.current'); - if ($current_cell.data('program-slug') !== cell_slug && - $current_cell.next().data('program-slug') === cell_slug) { - $current_cell.removeClass('current').addClass('past'); - $current_cell.next().removeClass('future').addClass('current'); + if (typeof window.soundcloud_widgets !== 'undefined') { + window.souncloud_widgets.forEach(function(value) { value.pause() }); } + }).on('pause',function(){ + $(this).attr('src', ''); // invalid URI will stop stream for real + $(this).attr('src', null); // remove invalid attribute (will get back to elements + $(live_stream_button).addClass('icon-volume-up').removeClass('icon-stop'); }); - }); - $('#WhatsOnAir').trigger('load'); - var refresh_onair_interval = 25000; - setInterval("$('#WhatsOnAir').trigger('load');", refresh_onair_interval); - $('#LiveStreamController').on('click', function() { - $('#streamSymbol').trigger('click'); - return false; - }); - $('#streamSymbol').on('click keypress',function(e) { - if (e.type === 'keypress' && !(e.key === ' ' || e.key === 'Enter')) - return; - e.preventDefault(); - var stream = $('#LiveStream').get(0); - if (stream.paused == false){ - stream.pause(); - }else{ - if (typeof (_paq) == 'object') { - _paq.push(['trackEvent', 'Audio', 'Play Stream']); - } - stream.play(); - } - return false; - }); - $('#LiveStream').on('play',function(){ - $('audio:not(#LiveStream)').each(function(){this.pause();}); - $('#streamSymbol').removeClass('icon-volume-up').addClass('icon-stop'); - if (typeof window.mixcloud_widgets !== 'undefined') { - window.mixcloud_widgets.forEach(function(value) { value.pause() }); - } - if (typeof window.soundcloud_widgets !== 'undefined') { - window.souncloud_widgets.forEach(function(value) { value.pause() }); - } - }).on('pause',function(){ - $(this).attr('src', ''); // invalid URI will stop stream for real - $(this).attr('src', null); // remove invalid attribute (will get back to elements - $('#streamSymbol').addClass('icon-volume-up').removeClass('icon-stop'); - }); + }) if($('#player-container').offset() && $('#mainHeader > div').length) { var topPosition = 0; topPosition = $('#mainHeader > div').offset().top + $('#mainHeader > div').height(); diff --git a/panikweb/base/templates/base.html b/panikweb/base/templates/base.html index 51257c3..10d1140 100644 --- a/panikweb/base/templates/base.html +++ b/panikweb/base/templates/base.html @@ -62,9 +62,7 @@

{{ radio_long_name }}

 {% endblock %} -
- {% block listen %}{% player %}{% endblock %} -
+ {% block listen %}{% player %}{% endblock %} diff --git a/panikweb/base/templates/includes/player.html b/panikweb/base/templates/includes/player.html index fc0ee5f..f2ce1f9 100644 --- a/panikweb/base/templates/includes/player.html +++ b/panikweb/base/templates/includes/player.html @@ -1,52 +1,56 @@ {% load i18n paniktags %} -
-
-
-
-
- {% for radio_stream in radio_stream_urls %} - {% if radio_stream.m3u_url %} - - {% endif %} - {% endfor %} +
+
+
+
+
+
+ {% for radio_stream in radio_stream_urls %} + {% if radio_stream.m3u_url %} + + {% endif %} + {% endfor %} +
+
+
+
{% trans 'live' %}
+
+
+ +
+ +
-
-
-
{% trans 'live' %}
-
-
- -
- -
-
-
- -
diff --git a/panikweb/paniktags/templatetags/paniktags.py b/panikweb/paniktags/templatetags/paniktags.py index 56a6217..26b7188 100644 --- a/panikweb/paniktags/templatetags/paniktags.py +++ b/panikweb/paniktags/templatetags/paniktags.py @@ -137,11 +137,17 @@ def soundfile_resume(soundfile, date=None): @register.inclusion_tag('includes/player.html', takes_context=True) -def player(context): +def player(context, player_id='main', display_emission_subtitle=False, display_episode_subtitle=False): return { 'unique': uuid.uuid4(), - 'radio_stream_urls': settings.RADIO_STREAM_URLS, + 'radio_stream_urls': [ + x for x in settings.RADIO_STREAM_URLS if x.get('player_id', 'main') == player_id + ], 'soundfiles': context.get('soundfiles'), + 'player_id': player_id, + 'prefix': '' if player_id == 'main' else f'{player_id}-', + 'display_emission_subtitle': display_emission_subtitle, + 'display_episode_subtitle': display_episode_subtitle, } -- 2.39.2