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)) {
sw.Write(
@$"<li class='episode' title='{episode.TitleEncoded}'
data-slug='{episode.SlugEncoded}'
data-sslug='{series.SlugEncoded}'
data-cover='/cover/sm/{series.SlugEncoded}.jpg'
data-series='{series.TitleEncoded}'
data-file='{episode.FileNameEncoded}'>

723
site/radiostasis.js
View File

@ -1,392 +1,373 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
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); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
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;
if (y = 0, t) op = [op[0] & 2, t.value];
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) {
var _this = this;
this.playlist = playlist;
var controls = document.getElementById('controls');
var 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.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.howl = null;
this.episode = null;
// initialize to stopped state
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) {
this.stopPlaybackAndResetUi();
this.seriesName.innerHTML = 'Error playing episode';
this.episodeName.innerHTML = message;
this.nowPlaying.classList.add('error');
};
Player.prototype.playEpisode = function (episode) {
var _this = this;
this.stopPlaybackAndResetUi();
this.setPauseButtonUI();
this.episode = episode;
this.updateNowPlayingUI(true);
fetch("/api/r/".concat(episode.file)).then(function (res) { return __awaiter(_this, void 0, void 0, function () {
var link;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
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*/];
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';
}
});
}); });
};
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',
}],
overlay.addEventListener('click', () => {
queue.style.height = '10ex';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
overlay.style.backdropFilter = 'none';
overlay.style.pointerEvents = 'none';
});
}
else {
navigator.mediaSession.metadata = null;
}
}
};
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;
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';
}
};
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 () {
var _this = this;
// episode play and queue buttons
var episodes = this.main.getElementsByClassName('episode');
var _loop_1 = function (i) {
var el = episodes.item(i);
var 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', function (e) {
_this.player.playEpisode(episode);
// 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();
});
};
for (var i = 0; i < episodes.length; i++) {
_loop_1(i);
}
// series filter input
var filter = this.main
.getElementsByClassName('filter').item(0);
// wire up series filter inputs
var filter = e.detail.elt.getElementsByClassName('filter').item(0);
let debouncer;
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 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 _i = 0, terms_1 = terms; _i < terms_1.length; _i++) {
var term = terms_1[_i];
for (var term of terms) {
if (term.length > 0 && series.dataset.filter.indexOf(term) < 0) {
match = false;
break;
}
}
if (match)
if (match) {
series.classList.remove('no-match');
else
} 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();
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');
});
}
}

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 {
width: 100%;
border-bottom: 1px solid black;
height: 0.5ex;
background-color: rgba(0, 0, 0, 0.25);
}
#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,
}

274
src/Player.ts
View File

@ -1,260 +1,34 @@
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 rewButton: HTMLButtonElement;
private readonly playButton: HTMLButtonElement;
private readonly playButtonPath: SVGPathElement;
private readonly ffwButton: HTMLButtonElement;
private readonly skipButton: HTMLButtonElement;
private readonly cover: HTMLImageElement;
private readonly rewButton: HTMLElement;
private readonly playButton: HTMLElement;
private readonly playButtonPath: HTMLElement;
private readonly ffwButton: HTMLElement;
private readonly cover: HTMLElement;
private readonly seriesName: HTMLElement;
private readonly episodeName: HTMLElement;
private readonly timeDisplay: HTMLElement;
private readonly volumeSlider: HTMLInputElement;
private readonly progress: HTMLElement;
private readonly volumeSlider: HTMLElement;
private ticker: number | undefined;
// ticker timer
private ticker: number | null;
// the actual howler that plays the episodes
private howl: Howl | null;
// currently playing episode and playlist
private episode: Episode | null;
private playlist: Playlist;
public constructor(playlist: Playlist) {
this.playlist = playlist;
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.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;
public constructor() {
setInterval
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.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.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', () => {
// start application
new Radiostasis().initialize();
});

2
src/tsconfig.json
View File

@ -6,7 +6,7 @@
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"outFile": "../site/radiostasis.js",
"outFile": "../site/radiostasis.new.js",
"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 {
addClass(elt: HTMLElement, className: string): undefined;
ajax(
declare namespace htmx {
function addClass(elt: HTMLElement, className: string): undefined;
function ajax(
verb: string,
path: string,
context?: null | string | HTMLElement | {
@ -11,8 +11,8 @@ export class HTMX {
values?: any
headers?: any
}): void;
closest(elt: HTMLElement, className: string): HTMLElement | void;
config: {
function closest(elt: HTMLElement, className: string): HTMLElement | void;
let config: {
attributesToSettle: Array<string>,
defaultSettleDelay: number,
defaultSwapDelay: number,
@ -31,48 +31,27 @@ export class HTMX {
refreshOnHistoryMiss: boolean,
disableSelector: string,
}
createEventSource: (url: string) => EventSource;
createWebSocket: (url: string) => WebSocket;
defineExtension(name: string, ext: any): void;
find(selector: string): HTMLElement | null;
find(elt: HTMLElement, selector: string): HTMLElement | null;
findAll(selector: string): NodeList;
findAll(elt: HTMLElement, selector: string): NodeList;
logAll(): void;
logger: (elt: HTMLElement, event: Event, data: any) => void;
off(eventName: string, listener: EventListener): EventListener;
off(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener;
on(eventName: string, listener: EventListener): EventListener;
on(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener;
onLoad(callback: (elt: HTMLElement) => void): EventListener;
parseInterval(string: string): number;
process(elt: HTMLElement): undefined
remove(elt: HTMLElement): undefined;
removeClass(elt: HTMLElement, className: string): undefined;
removeExtension(name: string): undefined;
takeClass(elt: HTMLElement, className: string): undefined;
toggleClass(elt: HTMLElement, className: string): undefined;
trigger(elt: HTMLElement, name: string, details: any): any;
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,
},
},
}
let createEventSource: (url: string) => EventSource;
let createWebSocket: (url: string) => WebSocket;
function defineExtension(name: string, ext: any): void;
function find(selector: string): HTMLElement | null;
function find(elt: HTMLElement, selector: string): HTMLElement | null;
function findAll(selector: string): NodeList;
function findAll(elt: HTMLElement, selector: string): NodeList;
function logAll(): void;
let logger: (elt: HTMLElement, event: Event, data: any) => void;
function off(eventName: string, listener: EventListener): EventListener;
function off(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener;
function on(eventName: string, listener: EventListener): EventListener;
function on(target: string | HTMLElement, eventName: string, listener: EventListener): EventListener;
function onLoad(callback: (elt: HTMLElement) => void): EventListener;
function parseInterval(string: string): number;
function process(elt: HTMLElement): undefined
function remove(elt: HTMLElement): undefined;
function removeClass(elt: HTMLElement, className: string): undefined;
function removeExtension(name: string): undefined;
function takeClass(elt: HTMLElement, className: string): undefined;
function toggleClass(elt: HTMLElement, className: string): undefined;
function trigger(elt: HTMLElement, name: string, details: any): any;
function values(elt: HTMLElement, requestType?: string): object;
}