SI18/03/contents.js

const reference = document.getElementById("reference");
const contributionsList = document.getElementById("contributions");
const trackList = document.getElementById("trackList");

const pagedjs = document.createElement("script");
pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
pagedjs.id = "printview";

const printLib = document.getElementById("btn-print");

window.addEventListener("load", () => {
	fetchContents();
	atlasLink();
});

printLib.addEventListener("click", () => {
	document.getElementsByTagName("head")[0].appendChild(pagedjs);

	// pardon for this is really stupid but it works
	setTimeout(() => {
		let sections = [".libretto", ".container", ".content", ".contribution", ".contributions"];

		for (const section of sections) {
			for (const el of document.querySelectorAll(section)) {
				el.classList.add("full-height");
			}
		}
	}, 1000);
});

function fetchContents() {
	fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions")
		.then((response) => response.json())
		.then((data) => populateContributions(data));
}

function populateContributions(contributions) {
	contributions.sort((a, b) => a.order - b.order);
	contributions.forEach((contribution) => {
		contributionsList.appendChild(createSection(contribution));
		createIndexSection(contribution);
	});
}

function createSection(contribution) {
	let section = reference.cloneNode(true);
	section.id = contribution.title;
	section.querySelector(".moment").innerHTML = contribution.moment;
	section.querySelector(".title").innerHTML = contribution.title;
	section.querySelector(".author").innerHTML = contribution.author;
	section.querySelector(".description").innerHTML = contribution.description;
	section.querySelector(".content").innerHTML = contribution.content_html;

	if ((contribution.audio && contribution.audio.length == 1) || contribution.original) {
		let audio = new Audio(
			`https://hub.xpub.nl/soupboat/SI18/03/${contribution.folder}/${
				contribution.original || contribution.audio[0]
			}`
		);
		audio.addEventListener("canplaythrough", (event) => {
			/* the audio is now playable; play it if permissions allow */
			section.querySelector(".filename").innerHTML = `${~~(audio.duration / 60)}:${~~(
				audio.duration % 60
			)}`;
			let player = section.querySelector(".player");
			player.innerHTML = "Play";
			player.addEventListener("click", () => {
				if (audio.paused) {
					audio.play();
					player.innerHTML = "Pause";
				} else {
					audio.pause();
					player.innerHTML = "Play";
				}
			});
		});
	} else section.querySelector(".audio").remove();
	return section;
}

function atlasLink() {
	let atlas = document.getElementById("atlas-map");
	let groups = atlas.querySelectorAll("[data-link]");
	for (const group of groups) {
		let link = document.createElementNS("http://www.w3.org/2000/svg", "a");
		link.setAttribute("href", "#" + group.dataset.link);
		wrap(group, link);
	}
}

var wrap = function (toWrap, wrapper) {
	wrapper = wrapper || document.createElement("div");
	toWrap.parentNode.appendChild(wrapper);
	return wrapper.appendChild(toWrap);
};

function createIndexSection(contribution) {
	if (contribution.audio) {
		let table = document.createElement("table");
		let title = document.createElement("div");
		title.classList.add("index-title");
		title.innerHTML = contribution.title;
		let tracks = contribution.audio;
		tracks.forEach((track) => {
			let row = document.createElement("tr");
			let sym = document.createElement("td");
			let filename = document.createElement("td");
			sym.setAttribute("class", "symbol");
			sym.innerHTML = symbols[track];
			sym.style.fontFamily = "Arial, sans-serif";
			filename.setAttribute("class", "filename");
			filename.innerHTML = track;
			row.appendChild(sym);
			row.appendChild(filename);
			table.appendChild(row);
		});
		trackList.appendChild(title);
		trackList.appendChild(table);
	}
}

var path = document.querySelector("#live-path");
console.log(path.getTotalLength());

const symbols = {
	"stream_01.mp3": "i1",
	"stream_02.mp3": "i2",
	"stream_03.mp3": "i3",
	"stream_04.mp3": "i4",
	"stream_05.mp3": "i5",
	"stream_06.mp3": "i6",
	"stream_07.mp3": "i7",
	"stream_08.mp3": "i8",
	"stream_09.mp3": "i9",
	"stream_10.mp3": "i10",
	"u.wav": "!!",
	"t.wav": "-\\-",
	"s.wav": "\\-",
	"r.wav": "||",
	"q.wav": "!—",
	"p.wav": "!-",
	"o.wav": ">/",
	"n.wav": "\\",
	"m.wav": "~~",
	"l.wav": "/",
	"k.wav": "ú",
	"j.wav": ",-",
	"i.wav": "|",
	"h.wav": "^^",
	"g.wav": "^",
	"f.wav": "%",
	"e.wav": "!",
	"d.wav": "-",
	"c.wav": ",,",
	"b.wav": "_",
	"a.wav": ".",
	"sample8_Entracte3.mp3": "-c",
	"sample6_Entracte3.mp3": "—C",
	"sample3_Entracte3.mp3": "~c",
	"sample7_Entracte3.mp3": "c-",
	"sample4_Entracte3.mp3": "c—",
	"sample2_Entracte3.mp3": "C~",
	"sample5_Entracte3.mp3": "c/",
	"sample1_Entracte3.mp3": "c\\",
	"sample6_Entracte_2_2.mp3": "/b",
	"sample5_Entracte_2_2.mp3": "\\b",
	"sample4_Entracte_2_2.mp3": "=B",
	"sample3_Entracte_2_2.mp3": ">B",
	"sample2_Entracte_2_2.mp3": "b>",
	"sample1_Entracte_2_2.mp3": "<b",
	"sample5_Entracte_1.mp3": "a",
	"sample4_Entracte_1.mp3": "]A",
	"sample3_Entracte_1.mp3": ")a",
	"sample2_Entracte_1.mp3": "A~",
	"sample1_Entracte_1.mp3": "a|",
	"voice-hierarchy-week03.mp3": "iii",
	"Laughing-Opera-Soprano-Violet-Duet.wav": "ii",
};