rudism
/
radiostasis
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: rudism:c33a67795e1e987c0e96cb410ad454e071c5ebc8
Branches Tags
rudism:main
..
compare: rudism:d7148137d6ba1a88c387a4d2deba65e8c4ae0511
Branches Tags
rudism:main

No commits in common. "c33a67795e1e987c0e96cb410ad454e071c5ebc8" and "d7148137d6ba1a88c387a4d2deba65e8c4ae0511" have entirely different histories.
c33a67795e ... d7148137d6

12 changed files with 426 additions and 1002 deletions
Show Stats Expand all files Collapse all files

2
scripts/generate-site.csx
View File

@ -312,8 +312,6 @@ private void GenerateSeriesDetailsFragment(Series series) {
foreach (var episode in GetEpisodes(series.Slug)) { foreach (var episode in GetEpisodes(series.Slug)) {
sw.Write( sw.Write(
@$"<li class='episode' title='{episode.TitleEncoded}' @$"<li class='episode' title='{episode.TitleEncoded}'
data-slug='{episode.SlugEncoded}'
data-sslug='{series.SlugEncoded}'
data-cover='/cover/sm/{series.SlugEncoded}.jpg' data-cover='/cover/sm/{series.SlugEncoded}.jpg'
data-series='{series.TitleEncoded}' data-series='{series.TitleEncoded}'
data-file='{episode.FileNameEncoded}'> data-file='{episode.FileNameEncoded}'>

751
site/radiostasis.js
View File

@ -1,392 +1,373 @@
"use strict"; document.addEventListener('DOMContentLoaded', () => {
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { // initialize audio player
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } var player = new Player();
return new (P || (P = Promise))(function (resolve, reject) { player.initialize();
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } let lastSearch;
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } var queue = document.getElementById('queue-container');
step((generator = generator.apply(thisArg, _arguments || [])).next()); var overlay = document.getElementById('overlay');
}); queue.getElementsByTagName('h2')[0].addEventListener('click', () => {
}; if (queue.style.height !== 'calc(100% - 6ex)') {
var __generator = (this && this.__generator) || function (thisArg, body) { queue.style.height = 'calc(100% - 6ex)';
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; overlay.style.backdropFilter = 'blur(5px)';
function verb(n) { return function (v) { return step([n, v]); }; } overlay.style.pointerEvents = 'auto';
function step(op) { } else {
if (f) throw new TypeError("Generator is already executing."); queue.style.height = '10ex';
while (g && (g = 0, op[0] && (_ = 0)), _) try { overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; overlay.style.backdropFilter = 'none';
if (y = 0, t) op = [op[0] & 2, t.value]; overlay.style.pointerEvents = 'none';
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
} }
}; });
var Player = /** @class */ (function () {
function Player(playlist) { overlay.addEventListener('click', () => {
var _this = this; queue.style.height = '10ex';
this.playlist = playlist; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
var controls = document.getElementById('controls'); overlay.style.backdropFilter = 'none';
var timeVolume = document.getElementById('timeVolume'); overlay.style.pointerEvents = 'none';
this.nowPlaying = document.getElementById('nowPlaying'); });
this.rewButton = controls.getElementsByTagName('button').item(0);
this.playButton = controls.getElementsByTagName('button').item(1); // function that gets run on content load
this.playButtonPath = this.playButton.getElementsByTagName('path').item(0); var wirePage = (e) => {
this.ffwButton = controls.getElementsByTagName('button').item(2); // wire up episode items to play
this.skipButton = controls.getElementsByTagName('button').item(3); const episodes = e.detail.elt.getElementsByClassName('episode');
this.cover = this.nowPlaying.getElementsByTagName('img').item(0); for (var episode of episodes) {
this.seriesName = this.nowPlaying.getElementsByTagName('span').item(0); const title = episode.getAttribute('title');
this.episodeName = this.nowPlaying.getElementsByTagName('span').item(1); const series = episode.dataset.series;
this.timeDisplay = timeVolume.getElementsByTagName('span').item(0); const cover = episode.dataset.cover;
this.volumeSlider = timeVolume.getElementsByTagName('input').item(0); const file = episode.dataset.file;
this.progress = document.getElementById('progress'); var pbtn = episode.getElementsByTagName('a')[0];
this.ticker = null; var qbtn = episode.getElementsByTagName('a')[1];
this.howl = null; pbtn.addEventListener('click', (e) => {
this.episode = null; player.playEpisode(cover, series, title, file);
// initialize to stopped state e.preventDefault();
this.stopPlaybackAndResetUi(); });
// wire up static ui elements
this.playButton.addEventListener('click', function () { return _this.playPause(); });
this.rewButton.addEventListener('click', function () { return _this.rewind(); });
this.ffwButton.addEventListener('click', function () { return _this.fastForward(); });
this.volumeSlider.addEventListener('change', function () { return _this.setVolume(); });
// wire up mediaSession events
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('pause', function () { return _this.playPause(); });
navigator.mediaSession.setActionHandler('play', function () { return _this.playPause(); });
navigator.mediaSession.setActionHandler('stop', function () {
return _this.stopPlaybackAndResetUi();
});
navigator.mediaSession.setActionHandler('seekforward', function () {
return _this.fastForward();
});
navigator.mediaSession.setActionHandler('seekbackward', function () {
return _this.rewind();
});
// don't support previous track yet, queue removes them once finished
// wire this up to rewind instead
navigator.mediaSession.setActionHandler('previoustrack', function () {
return _this.rewind();
});
}
// set up playlist changed handler
this.playlist.setPlaylistChangedHandler(function () {
_this.skipButton.disabled = !_this.playlist.hasNextEpisode();
});
} }
Player.prototype.setErrorUI = function (message) { // wire up series filter inputs
this.stopPlaybackAndResetUi(); var filter = e.detail.elt.getElementsByClassName('filter').item(0);
this.seriesName.innerHTML = 'Error playing episode'; let debouncer;
this.episodeName.innerHTML = message; if (filter) {
this.nowPlaying.classList.add('error'); var allSeries = e.detail.elt.getElementsByTagName('section');
}; // show all series by default when the page loads
Player.prototype.playEpisode = function (episode) { filter.addEventListener('input', ev => {
var _this = this; clearTimeout(debouncer);
this.stopPlaybackAndResetUi(); debouncer = setTimeout(() => {
this.setPauseButtonUI(); lastSearch = ev.target.value.toLowerCase()
this.episode = episode; var terms = lastSearch.split(' ');
this.updateNowPlayingUI(true); for (var series of allSeries) {
fetch("/api/r/".concat(episode.file)).then(function (res) { return __awaiter(_this, void 0, void 0, function () { var match = true;
var link; for (var term of terms) {
var _this = this; if (term.length > 0 && series.dataset.filter.indexOf(term) < 0) {
return __generator(this, function (_a) { match = false;
switch (_a.label) { break;
case 0: }
if (!res.ok) {
this.setErrorUI("API returned ".concat(res.status));
return [2 /*return*/];
}
return [4 /*yield*/, res.json()];
case 1:
link = _a.sent();
this.howl = new Howl({
src: "".concat(link.url, "?Authorization=").concat(link.token),
html5: true,
autoplay: true,
volume: this.getVolume(),
onload: function () {
_this.updateTimeUI();
_this.sendMediaSessionMetadata();
},
onplay: function () {
_this.updateNowPlayingUI();
_this.sendMediaSessionMetadata();
_this.setPauseButtonUI();
_this.startTicker();
},
onpause: function () {
_this.setPlayButtonUI();
_this.stopTicker();
},
onend: function () { return _this.stopPlaybackAndResetUi(); },
onloaderror: function () { return _this.setErrorUI('Playback error'); },
});
return [2 /*return*/];
}
});
}); });
};
Player.prototype.playPause = function () {
if (this.howl && this.howl.playing())
this.howl.pause();
else if (this.howl && !this.howl.playing())
this.howl.play();
};
Player.prototype.rewind = function () {
if (this.howl && this.howl.state() === 'loaded') {
var newPos = this.howl.seek() - 10;
if (newPos < 0)
newPos = 0;
this.howl.seek(newPos);
this.updateTimeUI();
}
};
Player.prototype.fastForward = function () {
if (this.howl && this.howl.state() === 'loaded') {
var newPos = this.howl.seek() + 30;
if (newPos > this.howl.duration())
newPos = this.howl.duration();
this.howl.seek(newPos);
this.updateTimeUI();
}
};
Player.prototype.setPlayButtonUI = function () {
this.playButtonPath.setAttribute('d', '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');
};
Player.prototype.setPauseButtonUI = function () {
this.playButtonPath.setAttribute('d', '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');
};
Player.prototype.getVolume = function () {
return parseFloat(this.volumeSlider.value) / 100;
};
Player.prototype.setVolume = function () {
var _a;
(_a = this.howl) === null || _a === void 0 ? void 0 : _a.volume(this.getVolume());
};
Player.prototype.updateNowPlayingUI = function (loading) {
if (loading === void 0) { loading = false; }
this.nowPlaying.classList.remove('error');
if (this.episode) {
this.seriesName.innerHTML = loading
? 'Loading episode'
: this.episode.series.title;
this.episodeName.innerHTML = this.episode.title;
this.cover.src = loading
? '/loading.gif'
: this.episode.series.cover;
this.nowPlaying.title = "".concat(this.episode.series.title, "\n").concat(this.episode.title);
}
else {
this.seriesName.innerHTML = 'No episode playing';
this.episodeName.innerHTML = '';
this.cover.src = '/transparent.png';
this.nowPlaying.title = 'No episode playing';
}
if (loading || !this.episode) {
this.playButton.disabled = true;
this.rewButton.disabled = true;
this.ffwButton.disabled = true;
}
else {
this.playButton.disabled = false;
this.rewButton.disabled = false;
this.ffwButton.disabled = false;
}
this.skipButton.disabled = !this.playlist.hasNextEpisode();
};
Player.prototype.sendMediaSessionMetadata = function () {
if ('mediaSession' in navigator) {
if (this.episode) {
navigator.mediaSession.metadata = new MediaMetadata({
title: this.episode.title,
album: 'Radiostasis',
artist: this.episode.series.title,
artwork: [{
src: this.episode.series.cover,
sizes: '256x256',
type: 'image/jpeg',
}],
});
} }
else { if (match) {
navigator.mediaSession.metadata = null; series.classList.remove('no-match');
} else {
series.classList.add('no-match');
} }
} }
}; }, 499);
Player.prototype.timeToDisplayString = function (time) { });
var mins = Math.floor(time / 60);
var secs = Math.round(time - (mins * 60));
var secStr = secs < 10 ? "0".concat(secs) : secs.toString();
return "".concat(mins, ":").concat(secStr);
};
Player.prototype.updateTimeUI = function () {
if (this.howl && this.howl.state() === 'loaded') {
var total = this.howl.duration();
var current = this.howl.seek();
var pct = "".concat(Math.round(current / total * 1000) / 10, "%");
var timeStamp = "".concat(this.timeToDisplayString(current), " / ").concat(this.timeToDisplayString(total));
// set the new values if they've changed since the last tick
if (this.timeDisplay.innerHTML !== timeStamp)
this.timeDisplay.innerHTML = timeStamp;
if (this.progress.style.width !== pct)
this.progress.style.width = pct;
}
else {
this.timeDisplay.innerHTML = '--:-- / --:--';
this.progress.style.width = '0%';
}
};
Player.prototype.startTicker = function () {
var _this = this;
if (!this.ticker) {
this.ticker = setInterval(function () { return _this.updateTimeUI(); }, 500);
}
};
Player.prototype.stopTicker = function () {
if (this.ticker) {
clearInterval(this.ticker);
this.ticker = null;
}
};
Player.prototype.stopPlaybackAndResetUi = function () {
var _a;
(_a = this.howl) === null || _a === void 0 ? void 0 : _a.unload();
this.howl = null;
this.episode = null;
this.setPlayButtonUI();
this.updateNowPlayingUI();
this.sendMediaSessionMetadata();
this.stopTicker();
this.updateTimeUI();
};
return Player;
}());
var Playlist = /** @class */ (function () {
function Playlist() {
var _this = this;
this.queueExpandedHeight = 'calc(100% - 6ex)';
this.queueContainer = document.getElementById('queue-container');
this.queueInitialHeight = getComputedStyle(this.queueContainer).height;
this.queueTab = this.queueContainer.getElementsByTagName('h2').item(0);
this.overlay = document.getElementById('overlay');
this.queueTab.addEventListener('click', function () { return _this.toggleQueueUI(); });
this.overlay.addEventListener('click', function () { return _this.toggleQueueUI(); });
} }
Playlist.prototype.toggleQueueUI = function () { };
if (this.queueContainer.style.height !== this.queueExpandedHeight) {
this.queueContainer.style.height = this.queueExpandedHeight; var main = document.getElementsByTagName('main').item(0);
this.overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
this.overlay.style.backdropFilter = 'blur(5px)'; document.addEventListener('htmx:historyRestore', (e) => {
this.overlay.style.pointerEvents = 'auto'; // repopulate filter on history restore
} var filter = e.detail.elt.getElementsByClassName('filter').item(0);
else { if (lastSearch && filter) {
this.queueContainer.style.height = this.queueInitialHeight; filter.value = lastSearch;
this.overlay.style.backgroundColor = 'rgba(255, 255, 255, 0)'; lastSearch = null;
this.overlay.style.backdropFilter = 'none';
this.overlay.style.pointerEvents = 'none';
}
};
Playlist.prototype.setPlaylistChangedHandler = function (handler) {
this.changedHandler = handler;
};
Playlist.prototype.hasNextEpisode = function () {
return false;
};
return Playlist;
}());
var Radiostasis = /** @class */ (function () {
function Radiostasis() {
var _this = this;
this.lastSearch = null;
this.debouncer = null;
this.playlist = new Playlist();
this.player = new Player(this.playlist);
this.main = document.getElementsByTagName('main').item(0);
// set up htmx event handlers
document.addEventListener('htmx:historyRestore', function () { return _this.wireLoadedFragment(); });
document.getElementsByTagName('main').item(0).addEventListener('htmx:afterSwap', function () { return _this.wireLoadedFragment(); });
} }
Radiostasis.prototype.wireLoadedFragment = function () { // then wire up the page
var _this = this; wirePage(e);
// episode play and queue buttons });
var episodes = this.main.getElementsByClassName('episode');
var _loop_1 = function (i) { // set up episode links on content swap
var el = episodes.item(i); main.addEventListener('htmx:afterSwap', wirePage);
var episode = {
slug: el.dataset.slug, // load page
title: el.getAttribute('title'), const pname = location.pathname == '/'
file: el.dataset.file, ? '/home.html'
series: { : location.pathname + '.html';
slug: el.dataset.sslug, const path = '/partial' + pname;
title: el.dataset.series, htmx.ajax('GET', path, 'main');
cover: el.dataset.cover,
},
};
// play button
el.getElementsByTagName('a')[0].addEventListener('click', function (e) {
_this.player.playEpisode(episode);
e.preventDefault();
});
};
for (var i = 0; i < episodes.length; i++) {
_loop_1(i);
}
// series filter input
var filter = this.main
.getElementsByClassName('filter').item(0);
if (filter) {
if (this.lastSearch) {
filter.value = this.lastSearch;
this.lastSearch = null;
}
var allSeries_1 = this.main.getElementsByTagName('section');
filter.addEventListener('input', function () {
if (_this.debouncer)
clearTimeout(_this.debouncer);
_this.debouncer = setTimeout(function () {
_this.lastSearch = filter.value.toLowerCase();
var terms = _this.lastSearch.split(' ');
for (var i = 0; i < allSeries_1.length; i++) {
var series = allSeries_1.item(i);
var match = true;
for (var _i = 0, terms_1 = terms; _i < terms_1.length; _i++) {
var term = terms_1[_i];
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);
});
}
};
Radiostasis.prototype.initialize = function () {
var path = location.pathname == '/'
? '/partial/home.html'
: "/partial/".concat(location.pathname, ".html");
htmx.ajax('GET', path, 'main');
};
return Radiostasis;
}());
document.addEventListener('DOMContentLoaded', function () {
// start application
new Radiostasis().initialize();
}); });
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');
});
}
}

5
site/radiostasis.new.js Normal file
View File

@ -0,0 +1,5 @@
"use strict";
document.addEventListener('DOMContentLoaded', function () {
htmx.on('blah', function () {
});
});

2
site/style.css
View File

@ -330,8 +330,8 @@ footer {
footer > div:first-child { footer > div:first-child {
width: 100%; width: 100%;
border-bottom: 1px solid black;
height: 0.5ex; height: 0.5ex;
background-color: rgba(0, 0, 0, 0.25);
} }
#progress { #progress {

12
src/Model.ts
View File

@ -1,12 +0,0 @@
type Series = {
slug: string,
title: string,
cover: string,
}
type Episode = {
series: Series,
slug: string,
title: string,
file: string,
}

276
src/Player.ts
View File

@ -1,260 +1,34 @@
class Player { class Player {
// hold references to all ui elements private readonly 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';
private readonly 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';
private readonly nowPlaying: HTMLElement; private readonly nowPlaying: HTMLElement;
private readonly rewButton: HTMLButtonElement; private readonly rewButton: HTMLElement;
private readonly playButton: HTMLButtonElement; private readonly playButton: HTMLElement;
private readonly playButtonPath: SVGPathElement; private readonly playButtonPath: HTMLElement;
private readonly ffwButton: HTMLButtonElement; private readonly ffwButton: HTMLElement;
private readonly skipButton: HTMLButtonElement; private readonly cover: HTMLElement;
private readonly cover: HTMLImageElement;
private readonly seriesName: HTMLElement; private readonly seriesName: HTMLElement;
private readonly episodeName: HTMLElement; private readonly episodeName: HTMLElement;
private readonly timeDisplay: HTMLElement; private readonly timeDisplay: HTMLElement;
private readonly volumeSlider: HTMLInputElement; private readonly volumeSlider: HTMLElement;
private readonly progress: HTMLElement; private ticker: number | undefined;
// ticker timer public constructor() {
private ticker: number | null; setInterval
const controls = document.getElementById('controls');
// the actual howler that plays the episodes const timeVolume = document.getElementById('timeVolume');
private howl: Howl | null; this.nowPlaying = document.getElementById('nowPlaying');
this.rewButton = controls.getElementsByTagName('button').item(0);
// currently playing episode and playlist this.playButton = controls.getElementsByTagName('button').item(1);
private episode: Episode | null; this.playButtonPath = this.playButton.getElementsByTagName('path').item(0);
private playlist: Playlist; this.ffwButton = controls.getElementsByTagName('button').item(2);
this.cover = this.nowPlaying.getElementsByTagName('img').item(0);
public constructor(playlist: Playlist) { this.seriesName = this.nowPlaying.getElementsByTagName('span').item(0);
this.playlist = playlist; this.episodeName = this.nowPlaying.getElementsByTagName('span').item(1);
const controls = document.getElementById('controls')!; this.timeDisplay = timeVolume.getElementsByTagName('span').item(0);
const timeVolume = document.getElementById('timeVolume')!; this.volumeSlider = timeVolume.getElementsByTagName('input').item(0);
this.nowPlaying = document.getElementById('nowPlaying')!; this.howl = null;
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.skipButton = 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.volumeSlider = timeVolume.getElementsByTagName('input').item(0)!;
this.progress = document.getElementById('progress')!;
this.ticker = null; this.ticker = null;
this.howl = null;
this.episode = null;
// initialize to stopped state
this.stopPlaybackAndResetUi();
// wire up static ui elements
this.playButton.addEventListener('click', () => this.playPause());
this.rewButton.addEventListener('click', () => this.rewind());
this.ffwButton.addEventListener('click', () => this.fastForward());
this.volumeSlider.addEventListener('change', () => this.setVolume());
// wire up mediaSession events
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('pause', () => this.playPause());
navigator.mediaSession.setActionHandler('play', () => this.playPause());
navigator.mediaSession.setActionHandler('stop', () =>
this.stopPlaybackAndResetUi());
navigator.mediaSession.setActionHandler('seekforward', () =>
this.fastForward());
navigator.mediaSession.setActionHandler('seekbackward', () =>
this.rewind());
// don't support previous track yet, queue removes them once finished
// wire this up to rewind instead
navigator.mediaSession.setActionHandler('previoustrack', () =>
this.rewind());
}
// set up playlist changed handler
this.playlist.setPlaylistChangedHandler(() => {
this.skipButton.disabled = !this.playlist.hasNextEpisode();
});
}
private setErrorUI(message: string): void {
this.stopPlaybackAndResetUi();
this.seriesName.innerHTML = 'Error playing episode';
this.episodeName.innerHTML = message;
this.nowPlaying.classList.add('error');
}
public playEpisode(episode: Episode) {
this.stopPlaybackAndResetUi();
this.setPauseButtonUI();
this.episode = episode;
this.updateNowPlayingUI(true);
fetch(`/api/r/${episode.file}`).then(async (res) => {
if (!res.ok) {
this.setErrorUI(`API returned ${res.status}`);
return;
}
const link = await res.json();
this.howl = new Howl({
src: `${link.url}?Authorization=${link.token}`,
html5: true,
autoplay: true,
volume: this.getVolume(),
onload: () => {
this.updateTimeUI();
this.sendMediaSessionMetadata();
},
onplay: () => {
this.updateNowPlayingUI();
this.sendMediaSessionMetadata();
this.setPauseButtonUI();
this.startTicker();
},
onpause: () => {
this.setPlayButtonUI();
this.stopTicker();
},
onend: () => this.stopPlaybackAndResetUi(),
onloaderror: () => this.setErrorUI('Playback error'),
});
});
}
private playPause(): void {
if (this.howl && this.howl.playing()) this.howl.pause();
else if (this.howl && !this.howl.playing()) this.howl.play();
}
private rewind(): void {
if (this.howl && this.howl.state() === 'loaded') {
let newPos = this.howl.seek() - 10;
if (newPos < 0) newPos = 0;
this.howl.seek(newPos);
this.updateTimeUI();
}
}
private fastForward(): void {
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);
this.updateTimeUI();
}
}
private setPlayButtonUI(): void {
this.playButtonPath.setAttribute('d',
'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');
}
private setPauseButtonUI(): void {
this.playButtonPath.setAttribute('d',
'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');
}
private getVolume(): number {
return parseFloat(this.volumeSlider.value) / 100;
}
private setVolume(): void {
this.howl?.volume(this.getVolume());
}
private updateNowPlayingUI(loading: boolean = false) {
this.nowPlaying.classList.remove('error');
if (this.episode) {
this.seriesName.innerHTML = loading
? 'Loading episode'
: this.episode.series.title;
this.episodeName.innerHTML = this.episode.title;
this.cover.src = loading
? '/loading.gif'
: this.episode.series.cover;
this.nowPlaying.title = `${this.episode.series.title}\n${this.episode.title}`;
} else {
this.seriesName.innerHTML = 'No episode playing';
this.episodeName.innerHTML = '';
this.cover.src = '/transparent.png';
this.nowPlaying.title = 'No episode playing';
}
if (loading || !this.episode) {
this.playButton.disabled = true;
this.rewButton.disabled = true;
this.ffwButton.disabled = true;
} else {
this.playButton.disabled = false;
this.rewButton.disabled = false;
this.ffwButton.disabled = false;
}
this.skipButton.disabled = !this.playlist.hasNextEpisode();
}
private sendMediaSessionMetadata() {
if ('mediaSession' in navigator) {
if (this.episode) {
navigator.mediaSession.metadata = new MediaMetadata({
title: this.episode.title,
album: 'Radiostasis',
artist: this.episode.series.title,
artwork: [{
src: this.episode.series.cover,
sizes: '256x256',
type: 'image/jpeg',
}],
});
} else {
navigator.mediaSession.metadata = null;
}
}
}
private timeToDisplayString(time: number): string {
const mins = Math.floor(time / 60);
const secs = Math.round(time - (mins * 60));
const secStr = secs < 10 ? `0${secs}` : secs.toString();
return `${mins}:${secStr}`;
}
private updateTimeUI(): void {
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 timeStamp =
`${this.timeToDisplayString(current)} / ${this.timeToDisplayString(total)}`;
// set the new values if they've changed since the last tick
if (this.timeDisplay.innerHTML !== timeStamp)
this.timeDisplay.innerHTML = timeStamp;
if (this.progress.style.width !== pct) this.progress.style.width = pct;
} else {
this.timeDisplay.innerHTML = '--:-- / --:--';
this.progress.style.width = '0%';
}
}
private startTicker(): void {
if (!this.ticker) {
this.ticker = setInterval(() => this.updateTimeUI(), 500);
}
}
private stopTicker(): void {
if (this.ticker) {
clearInterval(this.ticker);
this.ticker = null;
}
}
private stopPlaybackAndResetUi(): void {
this.howl?.unload()
this.howl = null;
this.episode = null;
this.setPlayButtonUI();
this.updateNowPlayingUI();
this.sendMediaSessionMetadata();
this.stopTicker();
this.updateTimeUI();
} }
} }

42
src/Playlist.ts
View File

@ -1,42 +0,0 @@
class Playlist {
private readonly queueContainer: HTMLElement;
private readonly queueTab: HTMLElement;
private readonly overlay: HTMLElement;
private readonly queueInitialHeight: string;
private readonly queueExpandedHeight = 'calc(100% - 6ex)';
// changed event handler
private changedHandler?: () => void;
constructor() {
this.queueContainer = document.getElementById('queue-container')!;
this.queueInitialHeight = getComputedStyle(this.queueContainer).height;
this.queueTab = this.queueContainer.getElementsByTagName('h2').item(0)!;
this.overlay = document.getElementById('overlay')!;
this.queueTab.addEventListener('click', () => this.toggleQueueUI());
this.overlay.addEventListener('click', () => this.toggleQueueUI());
}
private toggleQueueUI(): void {
if (this.queueContainer.style.height !== this.queueExpandedHeight) {
this.queueContainer.style.height = this.queueExpandedHeight;
this.overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
this.overlay.style.backdropFilter = 'blur(5px)';
this.overlay.style.pointerEvents = 'auto';
} else {
this.queueContainer.style.height = this.queueInitialHeight;
this.overlay.style.backgroundColor = 'rgba(255, 255, 255, 0)';
this.overlay.style.backdropFilter = 'none';
this.overlay.style.pointerEvents = 'none';
}
}
public setPlaylistChangedHandler(handler: () => void) {
this.changedHandler = handler;
}
public hasNextEpisode(): boolean {
return false;
}
}

88
src/Radiostasis.ts
View File

@ -1,88 +0,0 @@
class Radiostasis {
// audio player
private readonly player: Player;
private readonly playlist: Playlist;
// ui element
private readonly main: HTMLElement;
private lastSearch: string | null = null;
private debouncer: number | null = null;
constructor() {
this.playlist = new Playlist();
this.player = new Player(this.playlist);
this.main = document.getElementsByTagName('main').item(0)!;
// set up htmx event handlers
document.addEventListener('htmx:historyRestore', () => this.wireLoadedFragment());
document.getElementsByTagName('main').item(0)!.addEventListener(
'htmx:afterSwap', () => this.wireLoadedFragment());
}
private wireLoadedFragment(): void {
// episode play and queue buttons
const episodes = this.main.getElementsByClassName('episode');
for (let i = 0; i < episodes.length; i++) {
const el = <HTMLElement>episodes.item(i)!;
const episode: Episode = {
slug: el.dataset.slug!,
title: el.getAttribute('title')!,
file: el.dataset.file!,
series: {
slug: el.dataset.sslug!,
title: el.dataset.series!,
cover: el.dataset.cover!,
},
};
// play button
el.getElementsByTagName('a')[0]!.addEventListener('click', (e) => {
this.player.playEpisode(episode);
e.preventDefault();
});
// TODO: queue button
}
// series filter input
const filter = <HTMLInputElement>this.main
.getElementsByClassName('filter').item(0);
if (filter) {
if (this.lastSearch) {
filter.value = this.lastSearch;
this.lastSearch = null;
}
const allSeries = this.main.getElementsByTagName('section');
filter.addEventListener('input', () => {
if (this.debouncer) clearTimeout(this.debouncer);
this.debouncer = setTimeout(() => {
this.lastSearch = filter.value.toLowerCase();
const terms = this.lastSearch.split(' ');
for (var i = 0; i < allSeries.length; i++) {
const series = allSeries.item(i)!;
let match = true;
for (let 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);
});
}
}
public initialize(): void {
const path = location.pathname == '/'
? '/partial/home.html'
: `/partial/${location.pathname}.html`;
htmx.ajax('GET', path, 'main');
}
}

2
src/index.ts → src/radiostasis.ts
View File

@ -1,4 +1,2 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// start application
new Radiostasis().initialize();
}); });

2
src/tsconfig.json
View File

@ -6,7 +6,7 @@
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"strict": true, "strict": true,
"skipLibCheck": true, "skipLibCheck": true,
"outFile": "../site/radiostasis.js", "outFile": "../site/radiostasis.new.js",
"lib": ["DOM", "ESNext"], "lib": ["DOM", "ESNext"],
} }
} }

169
src/typings/howler.d.ts vendored
View File

@ -1,169 +0,0 @@
export type HowlCallback = (soundId: number) => void;
export type HowlErrorCallback = (soundId: number, error: unknown) => void;
export type SpatialOrientation = [number, number, number];
export type SpatialPosition = [number, number, number];
export enum HowlerState {
Unloaded = 'unloaded',
Loading = 'loading',
Loaded = 'loaded',
}
export interface SoundSpriteDefinitions {
[name: string]: [number, number] | [number, number, boolean];
}
export interface PannerAttributes {
coneInnerAngle?: number | undefined;
coneOuterAngle?: number | undefined;
coneOuterGain?: number | undefined;
distanceModel?: 'inverse' | 'linear';
maxDistance?: number;
panningModel?: 'HRTF' | 'equalpower';
refDistance?: number;
rolloffFactor?: number;
}
export interface Sound {
(howl: Howl): this;
}
export interface HowlListeners {
onstop?: HowlCallback | undefined;
onpause?: HowlCallback | undefined;
onload?: HowlCallback | undefined;
onmute?: HowlCallback | undefined;
onvolume?: HowlCallback | undefined;
onrate?: HowlCallback | undefined;
onseek?: HowlCallback | undefined;
onfade?: HowlCallback | undefined;
onunlock?: HowlCallback | undefined;
onend?: HowlCallback | undefined;
onplay?: HowlCallback | undefined;
onloaderror?: HowlErrorCallback | undefined;
onplayerror?: HowlErrorCallback | undefined;
}
export interface HowlOptions extends HowlListeners {
src: string | string[];
volume?: number | undefined;
html5?: boolean | undefined;
loop?: boolean | undefined;
preload?: boolean | 'metadata' | undefined;
autoplay?: boolean | undefined;
mute?: boolean | undefined;
sprite?: SoundSpriteDefinitions | undefined;
rate?: number | undefined;
pool?: number | undefined;
format?: string | string[] | undefined;
xhr?: {
method?: string | undefined;
headers?: Record<string, string> | undefined;
withCredentials?: boolean | undefined;
} | undefined;
}
declare global {
export class Howl {
constructor(options: HowlOptions);
play(spriteOrId?: string | number): number;
pause(id?: number): this;
stop(id?: number): this;
mute(): boolean;
mute(muted: boolean, id?: number): this;
volume(): number;
volume(idOrSetVolume: number): this | number;
volume(volume: number, id: number): this;
fade(from: number, to: number, duration: number, id?: number): this;
rate(id?: number): number;
rate(rate: number, id?: number): this;
seek(id?: number): number;
seek(seek: number, id?: number): this;
loop(id?: number): boolean;
loop(loop: boolean, id?: number): this;
playing(id?: number): boolean;
duration(id?: number): number;
state(): 'unloaded' | 'loading' | 'loaded';
load(): this;
unload(): null;
on(event: 'load', callback: () => void, id?: number): this;
on(event: 'loaderror' | 'playerror', callback: HowlErrorCallback, id?: number): this;
on(
event: 'play' | 'end' | 'pause' | 'stop' | 'mute' | 'volume' | 'rate' | 'seek' | 'fade' | 'unlock',
callback: HowlCallback,
id?: number,
): this;
on(event: string, callback: HowlCallback | HowlErrorCallback, id?: number): this;
once(event: 'load', callback: () => void, id?: number): this;
once(event: 'loaderror' | 'playerror', callback: HowlErrorCallback, id?: number): this;
once(
event: 'play' | 'end' | 'pause' | 'stop' | 'mute' | 'volume' | 'rate' | 'seek' | 'fade' | 'unlock',
callback: HowlCallback,
id?: number,
): this;
once(event: string, callback: HowlCallback | HowlErrorCallback, id?: number): this;
off(event: 'load', callback?: () => void, id?: number): this;
off(event: 'loaderror' | 'playerror', callback?: HowlErrorCallback, id?: number): this;
off(
event: 'play' | 'end' | 'pause' | 'stop' | 'mute' | 'volume' | 'rate' | 'seek' | 'fade' | 'unlock',
callback?: HowlCallback,
id?: number,
): this;
off(
event: 'load' | 'loaderror' | 'playerror' | 'play' | 'end' | 'pause' | 'stop' | 'mute' | 'volume' | 'rate' | 'seek' | 'fade' | 'unlock',
id: number,
): this;
off(event?: string, callback?: HowlCallback | HowlErrorCallback, id?: number): this;
stereo(): number;
stereo(pan: number, id?: number): number | this;
pos(): SpatialPosition;
pos(x: number, y?: number, z?: number, id?: number): this;
orientation(): SpatialOrientation;
orientation(x: number, y?: number, z?: number, id?: number): this;
pannerAttr(id?: number): PannerAttributes;
pannerAttr(options: PannerAttributes, id?: number): this;
}
class HowlerGlobal {
mute(muted: boolean): this;
stop(): this;
volume(): number;
volume(volume: number): this;
codecs(ext: string): boolean;
unload(): this;
usingWebAudio: boolean;
html5PoolSize: number;
noAudio: boolean;
autoUnlock: boolean;
autoSuspend: boolean;
ctx: AudioContext;
masterGain: GainNode;
stereo(pan: number): this;
pos(): SpatialPosition;
pos(x: number, y?: number, z?: number): this;
orientation(): SpatialOrientation;
orientation(x: number, y?: number, z?: number, xUp?: number, yUp?: number, zUp?: number): this;
}
const Howler: HowlerGlobal;
}

77
src/typings/htmx.d.ts vendored
View File

@ -1,6 +1,6 @@
export class HTMX { declare namespace htmx {
addClass(elt: HTMLElement, className: string): undefined; function addClass(elt: HTMLElement, className: string): undefined;
ajax( function ajax(
verb: string, verb: string,
path: string, path: string,
context?: null | string | HTMLElement | { context?: null | string | HTMLElement | {
@ -11,8 +11,8 @@ export class HTMX {
values?: any values?: any
headers?: any headers?: any
}): void; }): void;
closest(elt: HTMLElement, className: string): HTMLElement | void; function closest(elt: HTMLElement, className: string): HTMLElement | void;
config: { let config: {
attributesToSettle: Array<string>, attributesToSettle: Array<string>,
defaultSettleDelay: number, defaultSettleDelay: number,
defaultSwapDelay: number, defaultSwapDelay: number,
@ -31,48 +31,27 @@ export class HTMX {
refreshOnHistoryMiss: boolean, refreshOnHistoryMiss: boolean,
disableSelector: string, disableSelector: string,
} }
createEventSource: (url: string) => EventSource; let createEventSource: (url: string) => EventSource;
createWebSocket: (url: string) => WebSocket; let createWebSocket: (url: string) => WebSocket;
defineExtension(name: string, ext: any): void; function defineExtension(name: string, ext: any): void;
find(selector: string): HTMLElement | null; function find(selector: string): HTMLElement | null;
find(elt: HTMLElement, selector: string): HTMLElement | null; function find(elt: HTMLElement, selector: string): HTMLElement | null;
findAll(selector: string): NodeList; function findAll(selector: string): NodeList;
findAll(elt: HTMLElement, selector: string): NodeList; function findAll(elt: HTMLElement, selector: string): NodeList;
logAll(): void; function logAll(): void;
logger: (elt: HTMLElement, event: Event, data: any) => void; let logger: (elt: HTMLElement, event: Event, data: any) => void;
off(eventName: string, listener: EventListener): EventListener; function off(eventName: string, listener: EventListener): EventListener;
off(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener; function off(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener;
on(eventName: string, listener: EventListener): EventListener; function on(eventName: string, listener: EventListener): EventListener;
on(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener; function on(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener;
onLoad(callback: (elt: HTMLElement) => void): EventListener; function onLoad(callback: (elt: HTMLElement) => void): EventListener;
parseInterval(string: string): number; function parseInterval(string: string): number;
process(elt: HTMLElement): undefined function process(elt: HTMLElement): undefined
remove(elt: HTMLElement): undefined; function remove(elt: HTMLElement): undefined;
removeClass(elt: HTMLElement, className: string): undefined; function removeClass(elt: HTMLElement, className: string): undefined;
removeExtension(name: string): undefined; function removeExtension(name: string): undefined;
takeClass(elt: HTMLElement, className: string): undefined; function takeClass(elt: HTMLElement, className: string): undefined;
toggleClass(elt: HTMLElement, className: string): undefined; function toggleClass(elt: HTMLElement, className: string): undefined;
trigger(elt: HTMLElement, name: string, details: any): any; function trigger(elt: HTMLElement, name: string, details: any): any;
values(elt: HTMLElement, requestType?: string): object; function values(elt: HTMLElement, requestType?: string): object;
}
declare global {
export const htmx: HTMX;
export type HtmxEvent = {
detail: {
elt: HTMLElement,
xhr: XMLHttpRequest,
target: HtmlElement,
requestConfig: {
parameters: any,
unfilteredParameters: any,
headers: {[string]: string},
target: any,
verb: any,
errors: any,
path: string,
triggeringEvent: any,
},
},
}
} }