Improve the user interface of fyyd podcasts with just the audio element.
// ==UserScript==
// @name Fyyd.de redesign
// @namespace https://fyyd.de
// @description Improve the user interface of fyyd podcasts with just the audio element.
// @include https://fyyd.de/episode/*
// @version 1.2
// @license MIT
// @grant none
// ==/UserScript==
// anonymous function closure to avoid global variables
(function() {
// use strict mode with variable declaration
"use strict";
var newDate = "unknown_date";
// get the HTML element with the class "uk-width-2-5" for the date of the podcast
var spanElement = document.querySelector("div.uk-width-2-5 span");
if (spanElement) {
var titleContent = spanElement.title;
// extract the date from the title
var myDate = titleContent.match(/\d{2}\.\d{2}\.\d{4}/)[0];
// format the date
var dateParts = myDate.split(".");
newDate = dateParts[2] + "-" + dateParts[1] + "-" + dateParts[0];
console.log(newDate);
}
// functions for button presses
function skipSeconds(event) {
// console.log("event: " + event.target.textContent);
audioElement.currentTime += parseInt(event.target.textContent);
}
function setSpeed(event) {
audioElement.playbackRate = parseFloat(event.target.textContent);
}
// get URL for mp3 file
var audioSrc = document.querySelector("meta[name='twitter:player:stream']").content;
if (audioSrc) {
console.log("URL: " + audioSrc);
/*
fetch(audioSrc)
.then(response => response.blob())
.then(blob => {
var urlBlob = URL.createObjectURL(blob);
*/
var urlBlob = audioSrc;
// create the new webpage
var audioElement = document.createElement("audio");
audioElement.src = urlBlob;
audioElement.controls = true;
audioElement.autoplay = true;
var linkElement = document.createElement("a");
linkElement.href = urlBlob;
linkElement.download = newDate + "_hakendran.mp3";
linkElement.textContent = newDate;
var divElement = document.createElement("div");
divElement.className = "side";
var divElement2 = document.createElement("div");
divElement2.className = "side";
var style = document.createElement("style");
style.innerHTML = "* { background: black; color: white; font-size: 30px; text-align: center; margin-left: auto; margin-right: auto; }\n" +
"body { height: 150% }\n" +
"audio {width: 100%; max-width: 800px; margin-top: 20vh}\n" +
".bigButton { display: block; width: 100%; max-width: 800px; margin-top: 20px; }\n" +
".mybutton { float: left; width: 25%; margin-top: 20px; }\n" +
"a { height: 50px; display: block; margin-top: 20px; width: 100%}\n" +
".side { display: block; overflow: auto; max-width: 600px; }";
document.head.appendChild(style);
var playElement = document.createElement("button");
playElement.textContent = "play / pause";
playElement.className = "bigButton";
playElement.addEventListener("click", function() {
if (audioElement.paused) {
audioElement.play();
} else {
audioElement.pause();
}
});
document.body.innerHTML = "";
document.body.appendChild(audioElement);
document.body.appendChild(playElement);
var times = [ "-60", "-10", "+10", "+60" ];
var button = new Array(4);
var index = 0;
for ( index = 0; index < times.length; index++) {
button[index] = document.createElement("button");
button[index].textContent = times[index];
button[index].className = "mybutton";
button[index].addEventListener("click", skipSeconds);
divElement.appendChild(button[index]);
}
var speeds = [ "1.0", "1.2", "1.3", "1.5" ];
var button2 = new Array(4);
for ( index = 0; index < speeds.length; index++) {
button2[index] = document.createElement("button");
button2[index].textContent = speeds[index];
button2[index].className = "mybutton";
button2[index].addEventListener("click", setSpeed);
divElement2.appendChild(button2[index]);
}
document.body.appendChild(divElement);
document.body.appendChild(divElement2);
document.body.appendChild(linkElement);
// });
} else {
console.log("audioSrc not found");
}
})();