66 lines
1.8 KiB
PHTML
66 lines
1.8 KiB
PHTML
<?php
|
|
/** @var \App\Customization $customization */
|
|
|
|
$assets->load('Vue_InlinePlayer');
|
|
?>
|
|
|
|
let inlinePlayer, currentUrl = null;
|
|
|
|
const stopText = <?=$this->escapeJs(__('Stop')) ?>;
|
|
const playText = <?=$this->escapeJs(__('Play')) ?>;
|
|
|
|
function redrawPlayIcons () {
|
|
$('.btn-audio').each(function () {
|
|
if (!$(this).hasClass('has-listener')) {
|
|
$(this).on('click', function (e) {
|
|
e.preventDefault();
|
|
inlinePlayer.$eventHub.$emit('player_toggle', $(this).data('url'));
|
|
return false;
|
|
});
|
|
$(this).addClass('has-listener');
|
|
}
|
|
|
|
let playIcon = $(this).find('i.material-icons');
|
|
|
|
if (null !== currentUrl && $(this).is('[data-url="' + currentUrl + '"]')) {
|
|
$(this).addClass('playing')
|
|
.attr('title', stopText)
|
|
.attr('aria-label', stopText);
|
|
|
|
playIcon.text('stop_circle');
|
|
} else {
|
|
$(this).removeClass('playing')
|
|
.attr('title', playText)
|
|
.attr('aria-label', playText);
|
|
|
|
playIcon.text('play_circle');
|
|
}
|
|
});
|
|
}
|
|
|
|
$(function () {
|
|
inlinePlayer = new Vue({
|
|
el: '#radio-player-controls',
|
|
render: function (createElement) {
|
|
return createElement(InlinePlayer.default);
|
|
}
|
|
});
|
|
|
|
redrawPlayIcons();
|
|
|
|
inlinePlayer.$eventHub.$on('player_stopped', function () {
|
|
currentUrl = null;
|
|
redrawPlayIcons();
|
|
});
|
|
|
|
inlinePlayer.$eventHub.$on('player_playing', function (audio_source) {
|
|
currentUrl = audio_source.split(/[?#]/)[0];
|
|
redrawPlayIcons();
|
|
});
|
|
|
|
// The "content_changed" event fires from other components when they redraw portions of a page.
|
|
inlinePlayer.$eventHub.$on('content_changed', function () {
|
|
redrawPlayIcons();
|
|
});
|
|
});
|