374 lines
11 KiB
JavaScript
374 lines
11 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// initialize audio player
|
|
var player = new Player();
|
|
player.initialize();
|
|
let lastSearch;
|
|
|
|
var queue = document.getElementById('queue-container');
|
|
var overlay = document.getElementById('overlay');
|
|
queue.getElementsByTagName('h2')[0].addEventListener('click', () => {
|
|
if (queue.style.height !== 'calc(100% - 6ex)') {
|
|
queue.style.height = 'calc(100% - 6ex)';
|
|
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
|
overlay.style.backdropFilter = 'blur(5px)';
|
|
overlay.style.pointerEvents = 'auto';
|
|
} else {
|
|
queue.style.height = '10ex';
|
|
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
|
|
overlay.style.backdropFilter = 'none';
|
|
overlay.style.pointerEvents = 'none';
|
|
}
|
|
});
|
|
|
|
overlay.addEventListener('click', () => {
|
|
queue.style.height = '10ex';
|
|
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
|
|
overlay.style.backdropFilter = 'none';
|
|
overlay.style.pointerEvents = 'none';
|
|
});
|
|
|
|
// function that gets run on content load
|
|
var wirePage = (e) => {
|
|
// wire up episode items to play
|
|
const episodes = e.detail.elt.getElementsByClassName('episode');
|
|
for (var episode of episodes) {
|
|
const title = episode.getAttribute('title');
|
|
const series = episode.dataset.series;
|
|
const cover = episode.dataset.cover;
|
|
const file = episode.dataset.file;
|
|
var pbtn = episode.getElementsByTagName('a')[0];
|
|
var qbtn = episode.getElementsByTagName('a')[1];
|
|
pbtn.addEventListener('click', (e) => {
|
|
player.playEpisode(cover, series, title, file);
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
// wire up series filter inputs
|
|
var filter = e.detail.elt.getElementsByClassName('filter').item(0);
|
|
let debouncer;
|
|
if (filter) {
|
|
var allSeries = e.detail.elt.getElementsByTagName('section');
|
|
// show all series by default when the page loads
|
|
filter.addEventListener('input', ev => {
|
|
clearTimeout(debouncer);
|
|
debouncer = setTimeout(() => {
|
|
lastSearch = ev.target.value.toLowerCase()
|
|
var terms = lastSearch.split(' ');
|
|
for (var series of allSeries) {
|
|
var match = true;
|
|
for (var term of terms) {
|
|
if (term.length > 0 && series.dataset.filter.indexOf(term) < 0) {
|
|
match = false;
|
|
break;
|
|
}
|
|
}
|
|
if (match) {
|
|
series.classList.remove('no-match');
|
|
} else {
|
|
series.classList.add('no-match');
|
|
}
|
|
}
|
|
}, 499);
|
|
});
|
|
}
|
|
};
|
|
|
|
var main = document.getElementsByTagName('main').item(0);
|
|
|
|
document.addEventListener('htmx:historyRestore', (e) => {
|
|
// repopulate filter on history restore
|
|
var filter = e.detail.elt.getElementsByClassName('filter').item(0);
|
|
if (lastSearch && filter) {
|
|
filter.value = lastSearch;
|
|
lastSearch = null;
|
|
}
|
|
// then wire up the page
|
|
wirePage(e);
|
|
});
|
|
|
|
// set up episode links on content swap
|
|
main.addEventListener('htmx:afterSwap', wirePage);
|
|
|
|
// load page
|
|
const pname = location.pathname == '/'
|
|
? '/home.html'
|
|
: location.pathname + '.html';
|
|
const path = '/partial' + pname;
|
|
htmx.ajax('GET', path, 'main');
|
|
});
|
|
|
|
class Playlist {
|
|
constructor() {
|
|
this.queue = this.load();
|
|
}
|
|
|
|
save() {
|
|
window.localStorage.setItem('rs_queue', JSON.stringify(this.queue));
|
|
}
|
|
|
|
load() {
|
|
var queueJson = window.localStorage.getItem('rs_queue');
|
|
return queueJson ? JSON.parse(queueJson) : {version: 1};
|
|
}
|
|
}
|
|
|
|
class Player {
|
|
constructor() {
|
|
this.playSvg = 'M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z';
|
|
this.pauseSvg = 'M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5zm3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5z';
|
|
const controls = document.getElementById('controls');
|
|
const timeVolume = document.getElementById('timeVolume');
|
|
this.nowPlaying = document.getElementById('nowPlaying');
|
|
this.rewButton = controls.getElementsByTagName('button').item(0);
|
|
this.playButton = controls.getElementsByTagName('button').item(1);
|
|
this.playButtonPath = this.playButton.getElementsByTagName('path').item(0);
|
|
this.ffwButton = controls.getElementsByTagName('button').item(2);
|
|
this.nxtButton = controls.getElementsByTagName('button').item(3);
|
|
this.cover = this.nowPlaying.getElementsByTagName('img').item(0);
|
|
this.seriesName = this.nowPlaying.getElementsByTagName('span').item(0);
|
|
this.episodeName = this.nowPlaying.getElementsByTagName('span').item(1);
|
|
this.timeDisplay = timeVolume.getElementsByTagName('span').item(0);
|
|
this.progress = document.getElementById('progress');
|
|
this.volumeSlider = timeVolume.getElementsByTagName('input').item(0);
|
|
this.howl = null;
|
|
this.ticker = null;
|
|
}
|
|
|
|
initialize() {
|
|
this.reset();
|
|
const player = this;
|
|
this.playButton.addEventListener('click', () => {
|
|
player.playPause();
|
|
});
|
|
this.rewButton.addEventListener('click', () => {
|
|
player.rewind();
|
|
});
|
|
this.ffwButton.addEventListener('click', () => {
|
|
player.fastForward();
|
|
});
|
|
this.volumeSlider.addEventListener('change', () => {
|
|
this.setVolume();
|
|
});
|
|
|
|
// set up mediasession in browsers that support it
|
|
if ('mediaSession' in navigator) {
|
|
const player = this;
|
|
navigator.mediaSession.setActionHandler('pause',
|
|
() => player.playPause());
|
|
navigator.mediaSession.setActionHandler('play',
|
|
() => player.playPause());
|
|
navigator.mediaSession.setActionHandler('stop',
|
|
() => player.playPause());
|
|
navigator.mediaSession.setActionHandler('seekforward',
|
|
() => player.fastForward());
|
|
navigator.mediaSession.setActionHandler('seekbackward',
|
|
() => player.rewind());
|
|
navigator.mediaSession.setActionHandler('nexttrack',
|
|
() => player.fastForward());
|
|
navigator.mediaSession.setActionHandler('previoustrack',
|
|
() => player.rewind());
|
|
}
|
|
}
|
|
|
|
startTicker() {
|
|
if (!this.ticker) {
|
|
const player = this;
|
|
this.ticker = setInterval(() => {
|
|
player.setTime();
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
stopTicker() {
|
|
if (this.ticker) {
|
|
clearInterval(this.ticker);
|
|
this.ticker = null;
|
|
}
|
|
}
|
|
|
|
disableControls(disabled) {
|
|
this.playButton.disabled = disabled === true;
|
|
this.rewButton.disabled = disabled === true;
|
|
this.ffwButton.disabled = disabled === true;
|
|
this.nxtButton.disabled = disabled === true || true;
|
|
}
|
|
|
|
setPlay() {
|
|
this.playButtonPath.setAttribute('d', this.playSvg);
|
|
}
|
|
|
|
setPause() {
|
|
this.playButtonPath.setAttribute('d', this.pauseSvg);
|
|
}
|
|
|
|
setSeries(series, cover) {
|
|
this.seriesName.innerHTML = series ?? 'No episode playing';
|
|
this.seriesName.setAttribute('title', series ?? 'No episode playing');
|
|
this.cover.setAttribute('src', cover ?? '/transparent.png');
|
|
}
|
|
|
|
setEpisode(episode) {
|
|
this.episodeName.innerHTML = episode ?? '';
|
|
this.episodeName.setAttribute('title', episode ?? '');
|
|
}
|
|
|
|
setMetadata(series, episode, cover) {
|
|
if ('mediaSession' in navigator) {
|
|
this.metadata = new MediaMetadata({
|
|
title: episode,
|
|
album: series,
|
|
artist: 'Radiostasis',
|
|
artwork: [{
|
|
src: cover,
|
|
sizes: '256x256',
|
|
type: 'image/jpeg',
|
|
}],
|
|
});
|
|
}
|
|
}
|
|
|
|
sendMetadata() {
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.metadata = this.metadata;
|
|
}
|
|
}
|
|
|
|
clearMetadata() {
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.metadata = null;
|
|
}
|
|
}
|
|
|
|
_getDisplayTime(time) {
|
|
const minutes = Math.floor(time / 60);
|
|
const seconds = Math.round(time - (minutes * 60));
|
|
const secStr = seconds < 10 ? '0' + seconds : seconds;
|
|
return minutes + ':' + secStr;
|
|
}
|
|
|
|
setTime() {
|
|
if (this.howl && this.howl.state() === 'loaded') {
|
|
const total = this.howl.duration();
|
|
const current = this.howl.seek();
|
|
const pct = `${Math.round(current / total * 1000) / 10}%`;
|
|
const content =
|
|
this._getDisplayTime(current) + ' / ' + this._getDisplayTime(total);
|
|
if (this.timeDisplay.innerHTML !== content) {
|
|
this.timeDisplay.innerHTML = content;
|
|
}
|
|
if (this.progress.style.width !== pct) {
|
|
this.progress.style.width = pct;
|
|
}
|
|
} else {
|
|
this.timeDisplay.innerHTML = '--:-- / --:--';
|
|
this.progress.style.width = '0%';
|
|
}
|
|
}
|
|
|
|
getVolume() {
|
|
return parseFloat(this.volumeSlider.value) / 100;
|
|
}
|
|
|
|
setVolume() {
|
|
if (this.howl) {
|
|
this.howl.volume(this.getVolume());
|
|
}
|
|
}
|
|
|
|
reset() {
|
|
this.howl = null;
|
|
this.setPlay();
|
|
this.setSeries();
|
|
this.setEpisode();
|
|
this.clearMetadata();
|
|
this.setTime();
|
|
this.nowPlaying.classList.remove('error');
|
|
this.disableControls(true);
|
|
this.stopTicker();
|
|
this.metadata = null;
|
|
}
|
|
|
|
error(message) {
|
|
this.reset();
|
|
this.setSeries('Error playing episode');
|
|
this.setEpisode(message);
|
|
this.nowPlaying.classList.add('error');
|
|
}
|
|
|
|
playPause() {
|
|
if (this.howl && this.howl.playing()) {
|
|
this.howl.pause();
|
|
} else if (this.howl && !this.howl.playing()) {
|
|
this.howl.play();
|
|
}
|
|
}
|
|
|
|
rewind() {
|
|
if (this.howl && this.howl.state() === 'loaded') {
|
|
let newPos = this.howl.seek() - 10;
|
|
if (newPos < 0) newPos = 0;
|
|
this.howl.seek(newPos);
|
|
}
|
|
}
|
|
|
|
fastForward() {
|
|
if (this.howl && this.howl.state() === 'loaded') {
|
|
let newPos = this.howl.seek() + 30;
|
|
if (newPos > this.howl.duration()) newPos = this.howl.duration();
|
|
this.howl.seek(newPos);
|
|
}
|
|
}
|
|
|
|
playEpisode(cover, series, episode, file) {
|
|
if (this.howl) {
|
|
this.howl.stop();
|
|
}
|
|
|
|
this.reset();
|
|
this.setPause();
|
|
this.disableControls(true);
|
|
this.setSeries('Loading episode', '/loading.gif');
|
|
this.setEpisode(episode);
|
|
|
|
fetch('/api/r/' + file).then(async (res) => {
|
|
if (!res.ok) {
|
|
this.error('API returned ' + res.status);
|
|
return;
|
|
}
|
|
const link = await res.json();
|
|
const player = this;
|
|
this.howl = new Howl({
|
|
src: link.url + '?Authorization=' + link.token,
|
|
html5: true,
|
|
autoplay: true,
|
|
volume: this.getVolume(),
|
|
onload: () => {
|
|
player.setTime();
|
|
player.setMetadata(series, episode, cover);
|
|
},
|
|
onplay: () => {
|
|
player.sendMetadata();
|
|
player.setSeries(series, cover);
|
|
player.setPause();
|
|
player.disableControls(false);
|
|
player.startTicker();
|
|
},
|
|
onpause: () => {
|
|
player.setPlay();
|
|
player.stopTicker();
|
|
},
|
|
onend: () => {
|
|
player.reset();
|
|
},
|
|
onloaderror: () => {
|
|
player.reset();
|
|
player.error('Playback error');
|
|
},
|
|
});
|
|
}).catch(err => {
|
|
console.log(err);
|
|
this.error('API request error');
|
|
});
|
|
}
|
|
}
|