WFMU player timestamp link

Generates a timestamped link for easy bookmarking.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         WFMU player timestamp link
// @namespace    https://greasyfork.org/en/users/27283-mutationobserver
// @version      2017-10-03--2
// @description  Generates a timestamped link for easy bookmarking.
// @author       MutationObserver
// @match        https://wfmu.org/archiveplayer/*
// @grant        none
// ==/UserScript==

var showPopup = false;

function bookmarkSave(){
	var t = document.querySelector('.mejs-currenttime').innerHTML;
	if (window.location.href.includes("&starttime=")) {
		var url = window.location.href.split("&");
		for (i = 0; i < url.length; i++) {
			if (url[i].includes("starttime=")) { url.splice(i, 1); }
		}
		url = url.join("&");
		url = url + "&starttime=" +t;
	}
	else { var url = window.location.href+"&starttime="+t; }
	url = url.split("#").join("");
	
	document.querySelector(".mejs-playpause-button").click();
	
	if (showPopup) { prompt("Bookmark", url); }
	else {
		butBookmarkLink.setAttribute("href", url);
		butBookmarkLink.classList.remove("unclicked");
		butBookmarkLink.innerHTML = showTitleAbbrev + " " + showDateAbbrev;
		showTimestamp.innerHTML = "(" + t + ")";
	}
}

var injectedHTML = `
<style id="bookmarkstyle">
body { background-color: #f1f1f1; }
#bookmarkGeneratorCont {
    width: 66%;
    margin-left: 15%;
	}
#bookmarkGeneratorCont > * {
    padding-left: .25em;
	padding-right: .25em;
}
#bookmark, #bookmarklink {
	display: flex; height: 50px;
	background-color: #D7EDF9;
	align-items: center;
	justify-content: center;
}
#bookmark {
    border: #a4caec 1px solid;
    border-radius: 7px;
}
#bookmarklink {
    background-color: white;
    float: left;
    display: flex;
    justify-content: left;
	transition: all .2s ease-in-out;
}
#bookmarklink.unclicked {
    color: rgba(0, 0, 0, 0.36);
    text-decoration: none;
}
#bookmarklinkLabel {
    float: left;
    display: grid;
    margin-left: 33%;
    justify-content: right;
    text-align: right;
    align-items: center;
    height: 50px;
}
@media screen and (max-width: 470px) {
	#bookmarklinkLabel { margin-left: 0; }
}
#bookmarklinktime {
	background-color: white;
    float: left;
    display: grid;
    height: 50px;
    align-items: center;
}
</style>
<div id="bookmarkGeneratorCont">
	<a href="#" id="bookmark">generate link</a>
	<div id="bookmarklinkLabel">Bookmark:</div>
	<a href="#" id="bookmarklink" class="unclicked">&nbsp;</a>
	<div id="bookmarklinktime">&nbsp;</div>
</div>
`;
document.querySelector('.container').insertAdjacentHTML("beforeend", injectedHTML);
document.querySelector('#bookmark').addEventListener ("click", bookmarkSave, false);
var butBookmarkLink = document.querySelector("#bookmarklink"); 
var showTimestamp = document.querySelector("#bookmarklinktime"); 
var showTitle = document.querySelector(".show-title");
var showTitleAbbrev = showTitle.innerHTML.match(/(.*) from /)[1].match(/\b(\w)/g).join('');
var tmp = showTitle.innerHTML.match(/ from ([0-9]*\/[0-9]*\/)[0-9]{0,2}([0-9]{2})$/); tmp.shift();
var showDateAbbrev = tmp.join('');

var playlistHeight = document.querySelector('.dropdown-container').offsetHeight;

if (window.innerHeight < (playlistHeight + 100)) {
	window.resizeTo(window.innerWidth, window.innerHeight+ playlistHeight + 150);
}