71 lines
3.6 KiB
JavaScript
71 lines
3.6 KiB
JavaScript
function create_player(audio) {
|
|
window.player = new Shikwasa.Player({
|
|
container: () => document.querySelector('.player'),
|
|
preload: 'metadata',
|
|
autoplay: true,
|
|
themeColor: getComputedStyle(document.documentElement).getPropertyValue('--pico-primary'),
|
|
fixed: {
|
|
type: 'fixed',
|
|
position: 'bottom'
|
|
},
|
|
audio: audio
|
|
});
|
|
// $('.shk-title').on('click', e=>{
|
|
// window.location = "#";
|
|
// });
|
|
$('.footer').attr('style', 'margin-bottom: 120px !important');
|
|
}
|
|
function set_podcast_comment_button(comment_href) {
|
|
if (window.comment_btn){
|
|
window.comment_btn.remove();
|
|
}
|
|
if (comment_href) {
|
|
window.comment_btn = $('<button class="shk-btn shk-btn_comment" title="comment this episode" aria-label="comment" hx-get="'+comment_href+'" hx-target="body" hx-swap="beforeend"> <svg aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-chat-dots" viewBox="0 0 16 16"> <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/> <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9 9 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.4 10.4 0 0 1-.524 2.318l-.003.011a11 11 0 0 1-.244.637c-.079.186.074.394.273.362a22 22 0 0 0 .693-.125m.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6-3.004 6-7 6a8 8 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a11 11 0 0 0 .398-2"/> </svg> </button>')[0];
|
|
window.player.ui.extraControls.append(window.comment_btn);
|
|
htmx.process(window.comment_btn);
|
|
// $('<button class="shk-btn shk-btn_info" title="open podcast page" aria-label="info"> <svg aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-info-lg" viewBox="0 0 16 16"> <path d="m9.708 6.075-3.024.379-.108.502.595.108c.387.093.464.232.38.619l-.975 4.577c-.255 1.183.14 1.74 1.067 1.74.72 0 1.554-.332 1.933-.789l.116-.549c-.263.232-.65.325-.905.325-.363 0-.494-.255-.402-.704zm.091-2.755a1.32 1.32 0 1 1-2.64 0 1.32 1.32 0 0 1 2.64 0"/> </svg> </button>');
|
|
// $('<button class="shk-btn shk-btn_mark" title="mark this podcast" aria-label="mark"> <svg aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16"> <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/> </svg> </button>');
|
|
}
|
|
}
|
|
function podcast_init(context) {
|
|
$('.episode', context).on('click', e=>{
|
|
e.preventDefault();
|
|
var ele = e.currentTarget;
|
|
var album = $(ele).data('album');
|
|
var artist = $(ele).data('hosts');
|
|
var title = $(ele).data('title');
|
|
var cover_url = $(ele).data('cover');
|
|
var media_url = $(ele).data('media');
|
|
var position = $(ele).data('position');
|
|
var comment_href = $(ele).data('comment-href');
|
|
if (!media_url) return;
|
|
window.current_item_uuid = $(ele).data('uuid');
|
|
if (!window.player) {
|
|
create_player({
|
|
title: title,
|
|
cover: cover_url,
|
|
src: media_url,
|
|
album: album,
|
|
artist: artist
|
|
})
|
|
} else {
|
|
window.player.update({
|
|
title: title,
|
|
cover: cover_url,
|
|
src: media_url,
|
|
album: album,
|
|
artist: artist
|
|
})
|
|
}
|
|
set_podcast_comment_button(comment_href);
|
|
if (position) window.player._initSeek = position;
|
|
window.player.play()
|
|
});
|
|
}
|
|
|
|
$(function() {
|
|
document.body.addEventListener('htmx:load', function(evt) {
|
|
podcast_init(evt.detail.elt);
|
|
});
|
|
podcast_init(document.body);
|
|
});
|